/* Article éditorial : styles propres au gabarit. Jetons et styles communs : home.css et bundle.css du système. */
.art-head{padding-top:var(--space-2)}
.art-hl{box-shadow:inset 0 -.32em 0 var(--logo-yellow)}
.art-meta{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-4);margin:var(--space-3) 0 0;font-size:16px;line-height:24px;color:var(--ink-muted)}
.art-meta a{color:var(--ink);text-underline-offset:3px}
.art-layout{padding-top:var(--space-4)}

.art-body > *{max-width:700px}
.art-body h2{margin:var(--space-6) 0 var(--space-3);font:600 26px/32px var(--font-display);scroll-margin-top:var(--space-4)}
.art-body > p{margin:0 0 var(--space-4)}
.art-faq__item p{margin:0 0 var(--space-4)}
.art-body > ul{margin:0 0 var(--space-4);padding-left:22px}
.art-body > ul li{margin-bottom:var(--space-2)}
.art-body > p a{color:var(--ink);text-decoration-color:var(--logo-orange);text-decoration-thickness:3px;text-underline-offset:4px}

/* En bref */
.art-brief{padding:var(--space-4);background:var(--surface);border:2px solid var(--ink);border-radius:var(--radius-lg);box-shadow:0 6px 0 var(--logo-yellow)}
.art-brief__k{display:inline-flex;align-items:center;height:28px;margin:0 !important;padding:0 12px;border:1.5px solid var(--ink);border-radius:var(--radius-pill);background:var(--logo-yellow);font:600 15px/1 var(--font-display)}
.art-brief__t{margin:var(--space-3) 0 0 !important;font:600 20px/28px var(--font-display)}

.art-body > .pcc-ad--content{max-width:none;min-height:274px;margin:var(--space-6) auto var(--space-5)}

/* Sommaire */
.art-toc--inline{padding:0 var(--space-4);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-md)}
.art-toc--inline summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;list-style:none;cursor:pointer;font:600 18px/24px var(--font-display)}
.art-toc--inline summary::-webkit-details-marker{display:none}
.art-toc--inline summary::after{content:"";width:9px;height:9px;margin-right:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.art-toc--inline[open] summary::after{transform:translateY(2px) rotate(225deg)}
.art-toc ol{margin:0;padding:0 0 var(--space-2) 22px}
.art-toc li::marker{font:600 16px var(--font-display);color:var(--ink-muted)}
.art-toc a{display:flex;align-items:center;min-height:44px;color:var(--ink);font-size:17px;line-height:24px;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.art-toc a:hover{text-decoration-color:var(--ink)}

/* Tableau */
.art-table{width:100%;margin:0 0 var(--space-4);border:1px solid var(--line-strong);border-radius:var(--radius-md);border-collapse:separate;border-spacing:0;overflow:hidden;background:var(--surface)}
.art-table th,.art-table td{padding:var(--space-3) var(--space-4);text-align:left;font-size:17px;line-height:24px}
.art-table thead th{background:var(--surface-sunken);font:600 16px/24px var(--font-display)}
.art-table tbody td{border-top:1px solid var(--line)}
.art-table__l{font:600 22px/24px var(--font-display) !important}
.art-table__now td{background:var(--logo-yellow);font-weight:600}
.art-cal{margin:0 0 var(--space-4)}
.art-cal .art-table{margin:0}
.art-cal .art-table tbody td{padding-top:var(--space-1);padding-bottom:var(--space-1)}
.art-cal__nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-2)}
.art-cal__nav .pcc-heart{color:var(--ink);border-color:var(--ink)}
.art-cal__nav .pcc-heart:disabled{border-color:var(--line);color:var(--ink-disabled);cursor:default}
.art-cal__range{font:600 18px/24px var(--font-display)}
.art-cal__year{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:var(--ink);font:inherit;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px;cursor:pointer}
.art-cal__year[aria-pressed="true"]{text-decoration:none}
.art-cal__say{margin:var(--space-3) 0 0;font:600 18px/26px var(--font-display)}

/* Sélection de noms */
.art-names{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-2);margin:0 0 var(--space-3);padding:0;list-style:none}
.art-mini{display:flex;align-items:center;justify-content:space-between;gap:var(--space-1);margin:0 !important;padding:var(--space-3) var(--space-2) var(--space-3) var(--space-3);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}
.art-mini__name{display:inline-flex;align-items:center;min-height:32px;font:600 20px/26px var(--font-display);color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:5px}
.art-mini__name--ph{color:var(--ink-muted);text-decoration:none}
.art-mini__meta{margin:var(--space-1) 0 0 !important}

/* Générateur réduit */
.art-gen{display:grid;gap:var(--space-3);margin:var(--space-6) 0;padding:var(--space-5) var(--space-4);background:var(--surface-sunken);border-radius:var(--radius-lg);scroll-margin-top:var(--space-4)}
.art-gen__title{margin:0 0 var(--space-3) !important;font:600 26px/30px var(--font-display)}
.art-gen .home-result{min-height:150px;margin-top:0}
.art-gen .home-go{margin-top:var(--space-2)}
.art-gen .home-go:hover{filter:brightness(.96)}

.art-aff{margin:var(--space-5) 0}

/* Questions fréquentes */
.art-faq__item{margin-top:var(--space-2);padding:0 var(--space-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md)}
.art-faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:56px;padding:var(--space-2) 0;list-style:none;cursor:pointer;font:600 18px/24px var(--font-display)}
.art-faq__item summary::-webkit-details-marker{display:none}
.art-faq__item summary::after{content:"";flex:none;width:9px;height:9px;margin-right:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.art-faq__item[open] summary::after{transform:translateY(2px) rotate(225deg)}

/* Rédacteur : encart sobre, nom + métier (sans biographie) */
.art-author{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--space-1) var(--space-3);align-items:center;max-width:700px;margin-top:var(--space-6);padding:var(--space-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}
.art-author__avatar{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--surface-sunken);font:600 19px/1 var(--font-display);color:var(--ink)}
.art-author__txt{display:flex;flex-direction:column;gap:2px;min-width:0;margin:0 !important}
.art-author__kicker{font-size:13px;line-height:18px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.art-author__name{font:600 19px/26px var(--font-display);color:var(--ink)}
.art-author__role{font-size:16px;line-height:22px;color:var(--ink-muted)}
.art-end{padding-top:var(--space-6);padding-bottom:var(--space-8);border-top:1px solid var(--line-strong)}
.pcc-main.art-layout{padding-bottom:var(--space-6)}

@media (min-width:1024px){
  .art-head{max-width:calc(var(--content-max) + 64px);margin:0 auto;padding:var(--space-4) 32px 0}
  .art-h1{max-width:900px;font-size:46px;line-height:56px}
  .art-meta{font-size:17px}
  .art-layout{align-items:start;padding-top:var(--space-6)}
  .pcc-main.art-layout{padding-bottom:var(--space-7)}
  .art-end{padding-top:var(--space-7)}
  .art-body h2{font-size:30px;line-height:36px}
  .art-brief{padding:var(--space-5)}
  .art-brief__t{font-size:22px !important;line-height:32px !important}
  .art-body > .pcc-ad--content{min-height:114px;margin-left:0}
  .art-toc--inline{display:none}
  .art-names{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
  .art-cta .pcc-btn{display:inline-flex;width:auto}
  .art-gen{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--space-5);row-gap:var(--space-4);padding:var(--space-5)}
  .art-gen__text{grid-column:1;grid-row:1;align-self:end}
  .art-gen .home-go{grid-column:1;grid-row:2;align-self:start;margin-top:0;font-size:18px}
  .art-gen .home-result{grid-column:2;grid-row:1 / span 2;align-self:center;min-height:200px}
  .art-gen .home-result__name{font-size:44px;line-height:52px}
  .art-side{position:sticky;top:var(--space-4)}
  .art-side__in{display:grid;gap:var(--space-5)}
  .art-toc--side{padding:var(--space-3) var(--space-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}
  .art-toc__title{margin:0 0 var(--space-1);font:600 18px/28px var(--font-display)}
  .art-toc--side ol{padding-bottom:0}
  .art-toc--side a{min-height:34px;font-size:16px;line-height:22px}
  .art-author{padding:var(--space-4) var(--space-5)}
    .art-sky{margin:0}
  .art-sky .pcc-ad__slot{width:var(--sidebar);height:var(--ad-sky-h)}
}

/* Outil « Quelle lettre pour mon animal ? » (section 8.8 de CLAUDE.md) */
.qlt{margin:var(--space-5) 0;padding:var(--space-4);background:var(--surface-sunken);border-radius:var(--radius-lg)}
.qlt-row{display:grid;gap:var(--space-3)}
.qlt-field{display:block;font:600 15px/22px var(--font-display)}
.qlt-field select{display:block;width:100%;min-height:48px;margin-top:4px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);font:400 16px/24px var(--font-text)}
.qlt-result{margin-top:var(--space-4)}
.qlt-result p{margin:0 0 var(--space-2)}
.qlt-result .pcc-btn{margin-top:4px}
.qlt-note{margin:var(--space-3) 0 0;font-size:14px;line-height:20px;color:var(--ink-muted)}
@media (min-width:1024px){
  .qlt-row{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Photo dans le texte de l'article */
.art-fig{margin:var(--space-5) 0}
.art-fig .pcc-photo__img{aspect-ratio:3/2;border-radius:var(--radius-lg)}

/* Bandeau photo pleine largeur derrière le titre.
   Mobile : 300 px de haut minimum, fil d'Ariane réduit à « Accueil › Guides » (la page en cours est déjà le titre),
   titre 30 px. Ordinateur : 440 px, contenu aligné sur la colonne de l'article.
   Un dégradé sombre en bas garantit la lisibilité du texte blanc quelle que soit la photo. */
.art-hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:300px;color:#fff}
.art-hero__photo{position:absolute;inset:0;z-index:-2;overflow:hidden;
  background:
    radial-gradient(60% 70% at 72% 30%,rgba(255,226,150,.95),rgba(255,226,150,0) 60%),
    radial-gradient(40% 50% at 30% 85%,rgba(120,150,70,.9),rgba(120,150,70,0) 70%),
    linear-gradient(180deg,#e9c88f 0%,#d7a868 38%,#8f9a55 62%,#5f7638 100%)}
.art-hero__photo img{display:block;width:100%;height:100%;object-fit:cover}
.art-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(42,33,24,0) 15%,rgba(42,33,24,.55) 58%,rgba(42,33,24,.85) 100%)}
.art-hero__tag{position:absolute;top:12px;right:12px;display:flex;align-items:center;gap:6px;padding:4px 10px 4px 6px;border-radius:var(--radius-pill);background:rgba(255,255,255,.88);color:var(--ink);font:600 12px/18px var(--font-text)}
.art-hero__tag svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.art-hero__in{width:100%;padding:64px var(--space-4) var(--space-5)}
.art-hero .pcc-crumbs ol{font-size:15px}
.art-hero .pcc-crumbs li:last-child{display:none}
.art-hero .pcc-crumbs span{color:rgba(255,255,255,.85)}
.art-hero .pcc-crumbs a{color:#fff;text-decoration-color:rgba(255,255,255,.6)}
.art-hero .pcc-crumbs li+li::before{border-color:rgba(255,255,255,.85)}
.art-hero .art-h1{margin-top:var(--space-1);font-size:28px;line-height:36px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.25)}
.art-hero .art-hl{box-shadow:none;padding:0 .14em;border-radius:6px;background:linear-gradient(var(--logo-yellow),var(--logo-yellow)) 0 0/0% 100% no-repeat;color:var(--ink);text-shadow:none;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:pccDrawFull 700ms cubic-bezier(.6,.1,.3,1) 200ms forwards}
.art-hero .art-meta{gap:var(--space-1) var(--space-3);margin-top:var(--space-2);font-size:15px;line-height:22px;color:rgba(255,255,255,.9)}
.art-hero + .art-layout{padding-top:var(--space-5)}
@media (min-width:1024px){
  .art-hero{min-height:440px}
  .art-hero__in{max-width:calc(var(--content-max) + 64px);margin:0 auto;padding:0 32px var(--space-6)}
  .art-hero__tag{top:20px;right:24px;font-size:14px}
  .art-hero .pcc-crumbs ol{font-size:16px}
  .art-hero .pcc-crumbs li:last-child{display:inline-flex}
  .art-hero .art-h1{max-width:900px;font-size:46px;line-height:56px}
  .art-hero .art-meta{font-size:17px}
  .art-hero + .art-layout{padding-top:var(--space-6)}
}