/* Blog de L’Ère du Chien : tête et pastilles, article « à la une », cartes, carte de Marine, pages d'article,
   encadré « Réserver ma place » des activités et listes tamponnées d'une empreinte. */

/* ---------- Tête et pastilles ---------- */
.blog-tete { background: var(--creme); padding-block: clamp(2.6rem, 6vw, 4.2rem) clamp(1.2rem, 3vw, 1.8rem); }
.blog-tete .surtitre { font-size: 1.4rem; margin-bottom: .5rem; }
.blog-tete .surtitre a { text-decoration: none; }
.blog-tete .surtitre a:hover { text-decoration: underline; }
.blog-tete h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem); font-weight: 700; color: var(--sur-cuivre); margin: 0 0 .6rem; text-wrap: balance; }
.blog-intro { font-size: 1.15rem; max-width: 46rem; }
.blog-intro p { margin-bottom: .4em; }
.pastilles { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.pastilles a { display: inline-flex; align-items: center; gap: .45em; padding: .7rem 1.15rem; border-radius: 999px; background: #fff; color: #3b312f; text-decoration: none;
  font: 600 .95rem/1 var(--titres); box-shadow: inset 0 0 0 1.5px #e3d5cb; transition: background .2s, color .2s, translate .2s, box-shadow .2s; }
.pastilles a span { opacity: .6; font-weight: 500; }
.pastilles a:hover { translate: 0 -1px; box-shadow: inset 0 0 0 1.5px var(--cuivre); }
.pastilles a[aria-current] { background: #3b312f; color: #fff; box-shadow: none; }
.pastilles .pastille-activites { background: var(--tilleul); box-shadow: none; color: var(--sur-cuivre); }
.pastilles .pastille-activites span { opacity: 1; }

/* ---------- Liste ---------- */
.blog { padding-top: clamp(1.4rem, 3vw, 2rem); }
.grille-blog { gap: 1.6rem; }
@media (min-width: 62em) { .grille-blog { grid-template-columns: repeat(3, 1fr); } }
.carte-article[hidden] { display: none; }
.carte-article.arrive { animation: arrive .45s ease both; }
@keyframes arrive { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
.carte-une { grid-column: 1 / -1; }
@media (min-width: 48em) {
  .carte-une { flex-direction: row; min-height: 24rem; }
  .carte-une .ca-photo { flex: 1.25 1 0; overflow: hidden; }
  .carte-une .ca-photo img { height: 100%; aspect-ratio: auto; }
  .carte-une .ca-corps { flex: 1 1 0; padding: clamp(1.6rem, 3vw, 2.6rem); justify-content: center; }
  .carte-une h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.15; }
  .carte-une .ca-chapo { font-size: 1.05rem; -webkit-line-clamp: 4; }
  .carte-une .ca-lire { margin-top: 1.2rem; }
}
.carte-article .ca-photo { overflow: hidden; }
.carte-article .ca-photo img { transition: transform .6s ease; }
.carte-article:hover .ca-photo img { transform: scale(1.05); }

/* ---------- Carte de Marine ---------- */
.auteur-carte { margin-top: clamp(2.6rem, 5vw, 3.6rem); background: var(--sombre); color: #ecebe9; border-radius: 28px; padding: clamp(1.4rem, 3vw, 2.2rem);
  display: grid; gap: 1.2rem 1.8rem; align-items: center; }
.auteur-photo { width: 8.5rem; height: 8.5rem; border-radius: 50%; object-fit: cover; }
.auteur-nom { font: 400 1.6rem/1 var(--manuscrit); color: var(--cuivre-clair); margin-bottom: .5rem; }
.auteur-texte p:last-child { margin: 0; }
.auteur-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; }
@media (min-width: 48em) { .auteur-carte { grid-template-columns: auto 1fr auto; } }

/* ---------- Article ---------- */
.article-tete { background: var(--creme); padding-top: clamp(1.8rem, 4vw, 2.8rem); }
.fil { font-size: .95rem; margin-bottom: 1rem; }
.fil a { color: var(--cuivre-texte); }
.etiquette-cat { display: inline-block; padding: .5rem .9rem; border-radius: 999px; background: var(--tilleul); color: var(--sur-cuivre); font: 700 .78rem/1 var(--titres); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1rem; }
.article-tete h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); font-weight: 700; color: var(--sur-cuivre); max-width: 22ch; text-wrap: balance; margin-bottom: .8rem; }
.chapo { font: 400 clamp(1.1rem, 1rem + .4vw, 1.3rem)/1.55 "Lato", sans-serif; color: var(--texte); max-width: 46rem; margin-bottom: .8rem; }
.article-meta { color: var(--gris); font-size: .92rem; }
.article-photo { margin: 1.4rem 0 0; }
.article-photo img { border-radius: clamp(18px, 2.5vw, 28px); width: 100%; max-height: 32rem; object-fit: cover; }
.article-photo figcaption { font-size: .88rem; color: var(--gris); margin-top: .5rem; }
.article-corps { padding-top: clamp(2.2rem, 5vw, 3.4rem); }
.article { max-width: 46rem; }
.texte-article { font-size: 1.07rem; }
.texte-article h2 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem); margin: 2.4rem 0 .8rem; color: var(--sur-cuivre); }
.texte-article h3 { font-size: 1.2rem; margin: 1.8rem 0 .6rem; color: var(--brun); }
.texte-article blockquote { margin: 1.4rem 0; }
.texte-article hr { border: 0; height: 1px; background: var(--ligne); margin: 2rem 0; }
.texte-article figure { margin: 1.8rem 0; }
.texte-article figure img { border-radius: 16px; margin-inline: auto; width: auto; max-height: 34rem; }
.texte-article figcaption { text-align: center; font-style: italic; font-size: .9rem; color: var(--gris); margin-top: .5rem; }
.texte-article a { color: var(--cuivre-texte); }
.etroit-article { max-width: 66rem; }
.lies { margin-top: 3rem; }
.lies h2 { font-size: 1.5rem; margin-bottom: 1.4rem; color: var(--sur-cuivre); }
@media (min-width: 62em) { .grille-lies { grid-template-columns: repeat(3, 1fr); } .grille-lies .ca-chapo { display: none; } }
@media (min-width: 62em) {
  .article-deux { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 3.5rem; align-items: start; }
  .article-deux .reserver { position: sticky; top: 7rem; }
}

/* ---------- Activités : les listes en petites cartes tamponnées d'une empreinte ---------- */
.texte-activite ul { list-style: none; padding: 0; margin: 1.2rem 0 1.6rem; display: grid; gap: .8rem; }
@media (min-width: 40em) { .texte-activite ul { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } }
.texte-activite li { position: relative; display: block; background: #fff; border-radius: 20px; padding: .95rem 1rem .95rem 4.5rem; min-height: 4.6rem; font-size: 1rem; line-height: 1.4; align-content: center;
  box-shadow: 0 10px 26px rgba(35, 34, 32, .07); transition: translate .25s, box-shadow .25s; }
.texte-activite li:hover { translate: 0 -3px; box-shadow: 0 18px 36px rgba(35, 34, 32, .12); }
.texte-activite li::before { content: ""; position: absolute; left: 1rem; top: 50%; width: 2.9rem; height: 2.9rem; margin-top: -1.45rem; border-radius: 50%; background: #eef7d6; }
.texte-activite li::after { content: ""; position: absolute; left: 1.7rem; top: 50%; width: 1.5rem; height: 1.5rem; margin-top: -.75rem; background: var(--vert);
  -webkit-mask: url(../img/patte.svg) center/contain no-repeat; mask: url(../img/patte.svg) center/contain no-repeat; transform: rotate(-14deg); opacity: .92; }
@media (prefers-reduced-motion: no-preference) {
  .js .texte-activite ul:not(.vu) li { opacity: 0; translate: 0 14px; }
  .js .texte-activite ul:not(.vu) li::after { opacity: 0; }
  .texte-activite ul.vu li { animation: carte-entre .6s ease-out backwards; }
  .texte-activite ul.vu li::after { animation: tampon .7s cubic-bezier(.3, 1.5, .5, 1) backwards; }
  .texte-activite ul.vu li::after { animation-delay: .35s; }
  .texte-activite ul.vu li:nth-child(2) { animation-delay: .35s; } .texte-activite ul.vu li:nth-child(2)::after { animation-delay: .7s; }
  .texte-activite ul.vu li:nth-child(3) { animation-delay: .7s; } .texte-activite ul.vu li:nth-child(3)::after { animation-delay: 1.05s; }
  .texte-activite ul.vu li:nth-child(4) { animation-delay: 1.05s; } .texte-activite ul.vu li:nth-child(4)::after { animation-delay: 1.4s; }
  .texte-activite ul.vu li:nth-child(n + 5) { animation-delay: 1.3s; } .texte-activite ul.vu li:nth-child(n + 5)::after { animation-delay: 1.65s; }
  .texte-activite li:hover::after { animation: tampon-bis .7s cubic-bezier(.3, 1.5, .5, 1) both; }
}
@keyframes carte-entre { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes tampon { 0% { opacity: 0; transform: scale(2.4) rotate(-38deg); } 55% { opacity: 1; transform: scale(.82) rotate(-10deg); } 75% { transform: scale(1.08) rotate(-16deg); } 100% { opacity: .92; transform: scale(1) rotate(-14deg); } }
@keyframes tampon-bis { 0% { opacity: 0; transform: scale(2.4) rotate(-38deg); } 55% { opacity: 1; transform: scale(.82) rotate(-10deg); } 75% { transform: scale(1.08) rotate(-16deg); } 100% { opacity: .92; transform: scale(1) rotate(-14deg); } }

/* ---------- Encadré « Réserver ma place » ---------- */
.vers-reserver { margin: .2rem 0 1rem; }
@media (min-width: 62em) { .vers-reserver { display: none; } }
.reserver h2 { scroll-margin-top: 6rem; }
.reserver { background: #fff; border-radius: 28px; padding: clamp(1.4rem, 3vw, 1.9rem); box-shadow: 0 20px 44px rgba(35, 34, 32, .12); margin-top: 2.4rem; }
@media (min-width: 62em) { .reserver { margin-top: 0; } }
.reserver h2 { font: 400 1.75rem/1.1 var(--manuscrit); color: var(--vert); margin: 0 0 1rem; }
.reserver-etiquette { font: 700 .78rem/1 var(--titres); letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin-bottom: .7rem; }
.reserver-dates { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .5rem; }
.reserver-dates a { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; border-radius: 14px; text-decoration: none; background: var(--creme); color: #3b312f;
  font: 600 1rem/1.2 var(--titres); transition: background .2s, color .2s; }
.reserver-dates a span + span { font-weight: 500; opacity: .8; }
.reserver-dates a:hover { background: #3b312f; color: #fff; }
.reserver-attente { font-size: .98rem; background: var(--creme); border-radius: 14px; padding: .9rem 1rem; }
.reserver-infos { display: grid; grid-template-columns: auto 1fr; gap: .55rem 1rem; font-size: .95rem; line-height: 1.4; padding-top: 1rem; margin: 0 0 1.2rem; border-top: 1px solid var(--ligne); }
.reserver-infos dt { font-weight: 700; color: var(--sur-cuivre); }
.reserver-infos dd { margin: 0; }
.reserver-actions { display: grid; gap: .6rem; margin: 0; }
.reserver-actions .btn { width: 100%; }

/* ---------- Articles : une plume ----------
   Une barre de lecture en haut de l'écran, la signature de Marine sous le titre, un texte plus grand sur une colonne de
   lecture, une lettrine, des intertitres, les citations en exergue, des ornements d'empreintes entre les
   parties, un sommaire qui suit la lecture (articles longs) et la signature manuscrite à la fin. */
@supports (animation-timeline: scroll()) {
  .progression { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 40; background: var(--cuivre); transform-origin: left; transform: scaleX(0);
    animation: progression linear both; animation-timeline: scroll(root); }
}
@keyframes progression { to { transform: scaleX(1); } }
.signe { display: flex; align-items: center; gap: .9rem; margin: .4rem 0 .2rem; }
.signe-photo { width: 3.2rem; height: 3.2rem; border-radius: 50%; object-fit: cover; flex: none; }
.signe p { margin: 0; display: flex; flex-direction: column; gap: .1rem; }
.signe-nom { font: 700 1rem/1.2 var(--titres); color: var(--sur-cuivre); }
.signe-meta { font-size: .88rem; color: var(--gris); }
.article { margin-inline: auto; }
.texte-plume { max-width: 40rem; font-size: clamp(1.08rem, 1rem + .3vw, 1.18rem); line-height: 1.8; color: #39332f; }
.texte-plume > p { margin-bottom: 1.15em; }
.texte-plume > p.lettrine::first-letter { float: left; font: 400 4.1em/.82 var(--manuscrit); color: var(--cuivre-texte); margin: .06em .1em 0 0; }
.texte-plume strong { color: var(--sur-cuivre); }
.texte-plume h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem); line-height: 1.2; margin: 3.2rem 0 1.1rem; color: var(--sur-cuivre); scroll-margin-top: 7rem; text-wrap: balance; }
.texte-plume blockquote { position: relative; border: 0; margin: 2.2rem 0; padding: .2rem 0 .2rem 2.6rem; font: 500 1.18em/1.55 var(--titres); font-style: normal; color: var(--sur-cuivre); }
.texte-plume blockquote::before { content: "“"; position: absolute; left: -.1rem; top: -.35rem; font: 400 3.6rem/1 var(--manuscrit); color: var(--cuivre); }
.texte-plume blockquote p { margin-bottom: .6em; }
.texte-plume ul, .texte-plume ol { padding-left: 1.3em; }
.texte-plume li { margin-bottom: .45em; }
.texte-plume li::marker { color: var(--cuivre); }
hr.orn { border: 0; width: 4.4rem; height: 1.1rem; margin: 2.8rem auto; background: var(--cuivre); opacity: .75;
  -webkit-mask: url(../img/patte.svg) center / 1.1rem 1.1rem space; mask: url(../img/patte.svg) center / 1.1rem 1.1rem space; }
.signature-fin { max-width: 40rem; margin: 2.8rem 0 0; display: flex; flex-direction: column; gap: .3rem; }
.signature-prenom { display: inline-flex; align-items: center; gap: .8rem; font: 400 2.5rem/1 var(--manuscrit); color: var(--cuivre-texte); }
.signature-prenom::before { content: ""; width: 2.4rem; height: 1px; background: currentColor; opacity: .6; }
.signature-role { font-size: .9rem; color: var(--gris); padding-left: 3.2rem; }
/* sommaire des articles longs */
.sommaire { margin-bottom: 2.2rem; padding: 1.2rem 1.3rem; border-radius: 18px; background: #fff; box-shadow: 0 10px 26px rgba(35, 34, 32, .06); }
.sommaire-titre { margin: 0 0 .8rem; font: 700 .75rem/1 var(--titres); letter-spacing: .14em; text-transform: uppercase; color: var(--cuivre-texte); }
.sommaire ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.sommaire li { display: grid; grid-template-columns: 1.1rem 1fr; font-size: .92rem; line-height: 1.35; }
.sommaire li::before { content: ""; width: .45rem; height: 1px; margin-top: .65em; background: var(--cuivre); }
.sommaire a { text-decoration: none; color: var(--texte); }
.sommaire a:hover { color: var(--cuivre-texte); text-decoration: underline; }
.sommaire a[aria-current] { color: var(--sur-cuivre); font-weight: 700; }
.sommaire li:has(a[aria-current])::before { width: .8rem; height: 2px; background: var(--cuivre-texte); }
@media (min-width: 62em) {
  .article-sommaire { display: grid; grid-template-columns: 14rem minmax(0, 40rem); gap: 4rem; justify-content: center; align-items: start; }
  .article-sommaire .sommaire { position: sticky; top: 7.5rem; margin: 0; background: none; box-shadow: none; padding: .2rem 0 0; border-left: 1px solid var(--ligne); padding-left: 1.2rem; }
  .article-sommaire .article { margin: 0; }
}

/* ---------- Poèmes (catégorie « Ode aux chiens ») ----------
   Les vers sont saisis comme des listes : ni puces ni retraits, une ligne par vers, chaque liste est une strophe,
   centrée sur une colonne étroite. Les intertitres deviennent des refrains manuscrits, les citations des vers en
   italique. Les strophes apparaissent doucement à la lecture. */
.texte-poeme { max-width: 34rem; margin-inline: auto; text-align: center; font: 400 clamp(1.12rem, 1.02rem + .35vw, 1.28rem)/1.9 "Lato", sans-serif; color: #39332f; }
.texte-poeme ul, .texte-poeme ol { list-style: none; padding: 0; margin: 0 0 2.2rem; }
.texte-poeme li { margin: 0; padding: 0; }
.texte-poeme li::marker { content: none; }
.texte-poeme p { margin: 0 0 2.2rem; }
.texte-poeme strong { color: var(--sur-cuivre); font-weight: 700; }
.texte-poeme h2, .texte-poeme h3 { margin: 3rem 0 1rem; font: 400 clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem)/1.2 var(--manuscrit); color: var(--cuivre-texte); letter-spacing: .01em; text-wrap: balance; }
.texte-poeme > :first-child { margin-top: 0; }
.texte-poeme blockquote { border: 0; margin: 0 auto 2.2rem; padding: 0; font-style: italic; color: var(--vert); font-size: 1.04em; }
.texte-poeme blockquote p { margin: 0; }
.texte-poeme blockquote::before { content: none; }
.texte-poeme p:has(+ ul) { margin-bottom: .7rem; font: italic 400 .95em/1.5 "Lato", sans-serif; color: var(--cuivre-texte); letter-spacing: .02em; }
.texte-poeme ul + ul { position: relative; padding-top: 2.2rem; }
.texte-poeme ul + ul::before { content: ""; position: absolute; top: 0; left: 50%; width: 1rem; height: 1rem; margin-left: -.5rem; background: var(--cuivre); opacity: .5;
  -webkit-mask: url(../img/patte.svg) center/contain no-repeat; mask: url(../img/patte.svg) center/contain no-repeat; transform: rotate(-14deg); }
.article:has(.texte-poeme) .signature-fin { max-width: 34rem; margin-inline: auto; align-items: center; text-align: center; }
.article:has(.texte-poeme) .signature-prenom::before { display: none; }
.article:has(.texte-poeme) .signature-role { padding-left: 0; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .texte-poeme > ul, .texte-poeme > p, .texte-poeme > blockquote, .texte-poeme > h2, .texte-poeme > h3 { animation: strophe linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
}
@keyframes strophe { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }

/* Renvoi vers la prestation qui prolonge l'article (liens internes) : toute la carte est cliquable */
.suite-prestation { position: relative; max-width: 40rem; margin: 2.6rem 0 0; padding: 1.4rem 4.6rem 1.5rem 1.5rem; border-radius: 22px; background: #fff; box-shadow: 0 14px 34px rgba(35, 34, 32, .08); transition: translate .25s, box-shadow .25s; }
.suite-prestation:hover { translate: 0 -3px; box-shadow: 0 20px 40px rgba(35, 34, 32, .13); }
.suite-prestation::after { content: ""; position: absolute; right: 1.4rem; top: 50%; width: 2.4rem; height: 2.4rem; margin-top: -1.2rem; border-radius: 50%;
  background: var(--cuivre) center / 1.05rem no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b211c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); transition: transform .3s; }
.suite-prestation:hover::after { transform: translateX(4px); }
.suite-question { margin: 0 0 .2rem; font: 400 1.2rem/1.2 var(--manuscrit); color: var(--vert); }
.suite-titre { margin: 0 0 .35rem; font: 700 1.2rem/1.25 var(--titres); }
.suite-titre a { color: var(--sur-cuivre); text-decoration: none; }
.suite-titre a::after { content: ""; position: absolute; inset: 0; border-radius: 22px; }
.suite-titre a:focus-visible { outline: 0; }
.suite-prestation:focus-within { outline: 3px solid var(--vert-logo); outline-offset: 3px; }
.suite-texte { margin: 0; font-size: .95rem; color: var(--gris); }