/* ---------------------------------------------------------
   LES BERGERIES DE SÈTE, gabarit d'article du Carnet de bord
   Chargé après main.css. Utilisé par /carnet/*.html
   --------------------------------------------------------- */

/* ---- Hero d'article : plus bas que les héros de page ---- */
.hero--article{min-height:min(62svh,560px)}
.hero--article .hero__inner{max-width:820px}
.hero--article h1{font-size:clamp(28px,4.4vw,50px);line-height:1.14;font-weight:300}
.art-hero__meta{margin-top:16px;font-family:var(--sans);font-size:11.5px;letter-spacing:.08em;
  color:rgba(255,255,255,.82)}
.art-hero__meta .dot{margin:0 8px;color:rgba(255,255,255,.5)}

/* ---- Fil d'Ariane ---- */
.crumb{border-bottom:1px solid var(--line);background:var(--cream)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:14px 0;font-size:11.5px;letter-spacing:.05em;color:var(--ink-mute)}
.crumb li{display:flex;align-items:center;gap:8px}
.crumb li+li::before{content:"›";color:var(--line-strong)}
.crumb a{color:var(--ink-soft)}
.crumb a:hover{color:var(--terra)}
.crumb [aria-current]{color:var(--ink)}

/* ---- Colonne de lecture ---- */
.art{padding:clamp(48px,6.5vw,86px) 0 clamp(30px,4vw,48px)}
.art__col{max-width:720px;margin:0 auto}

.art__chapo{font-family:var(--serif);font-size:clamp(19px,2.2vw,24px);font-style:italic;
  color:var(--pine);line-height:1.5;padding-bottom:clamp(26px,3.4vw,38px);
  border-bottom:1px solid var(--line)}

.art__body{padding-top:clamp(26px,3.4vw,38px)}
.art__body h2{font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.8vw,31px);
  line-height:1.25;color:var(--pine);margin:clamp(38px,4.4vw,54px) 0 14px;text-wrap:balance}
.art__body h2:first-child{margin-top:0}
.art__body p{font-size:16px;color:var(--ink-soft);font-weight:300;line-height:1.85;margin-bottom:18px}
.art__body p strong,.art__body li strong{color:var(--ink);font-weight:500}
.art__body a{color:var(--terra);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.art__body a:hover{text-decoration-color:var(--terra)}
.art__body ul,.art__body ol{margin:0 0 20px;padding-left:22px}
.art__body li{font-size:16px;color:var(--ink-soft);font-weight:300;line-height:1.8;margin-bottom:10px}
.art__body li::marker{color:var(--olive)}
.art__body ol{counter-reset:none}

/* Tableau : défile seul, la page ne bouge jamais latéralement */
.art__table{overflow-x:auto;margin:0 0 24px;border:1px solid var(--line);border-radius:var(--radius)}
.art__table table{border-collapse:collapse;width:100%;min-width:420px;font-size:14.5px}
.art__table th{text-align:left;font-family:var(--sans);font-weight:600;font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute);
  background:var(--cream-2);padding:12px 16px;border-bottom:1px solid var(--line)}
.art__table td{padding:12px 16px;border-bottom:1px solid var(--line);color:var(--ink-soft);
  font-weight:300;line-height:1.6;vertical-align:top}
.art__table tr:last-child td{border-bottom:0}

/* Note de bas d'article */
.art__note{background:var(--cream-2);border-left:2px solid var(--olive);
  padding:18px 22px;margin:0 0 24px;font-size:14.5px;color:var(--ink-soft);
  font-weight:300;line-height:1.75}

/* ---- Questions fréquentes ---- */
.art__faq{max-width:720px;margin:0 auto;padding:clamp(34px,4.4vw,52px) 0 0;
  border-top:1px solid var(--line)}
.art__faq h2{font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.8vw,31px);
  color:var(--pine);margin-bottom:8px}
.faq-list{margin-top:22px;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line);padding:20px 0}
.faq-item h3{font-family:var(--sans);font-size:15px;font-weight:600;line-height:1.5;
  color:var(--ink);margin-bottom:9px}
.faq-item p{font-size:15px;color:var(--ink-soft);font-weight:300;line-height:1.8}

/* ---- Appel à l'action de fin d'article ---- */
.art__cta{max-width:720px;margin:clamp(38px,4.6vw,56px) auto 0;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(24px,3.2vw,34px);display:flex;align-items:center;
  justify-content:space-between;gap:20px;flex-wrap:wrap}
.art__cta>*{max-width:100%;min-width:0}
.art__cta span{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ink-mute)}
/* le libellé peut être long : il passe à la ligne plutôt que de pousser la page */
.art__cta .btn{white-space:normal;text-align:center;line-height:1.45}

/* ---- Articles liés ---- */
.art-more{background:var(--cream-2)}
.art-more .posts{grid-template-columns:repeat(3,1fr)}

@media(max-width:1000px){.art-more .posts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){
  .art-more .posts{grid-template-columns:1fr}
  .art__cta{flex-direction:column;align-items:stretch}
  .art__cta .btn{width:100%}
  .hero--article{min-height:min(56svh,460px)}
}