/* =========================================================================
   LOGRE — feuille de style partagée (site éditorial)
   Palette, typo et composants dans les règles de marque (voir CLAUDE.md).
   Seules couleurs autorisées ; serif = Georgia, sans = Helvetica/Arial (micro-labels).
   ========================================================================= */

:root{
  --vert:#14372B; --sdb:#5A1E28; --ecru:#ECE3D0; --papier:#FBF7EE;
  --anthracite:#1B1B1A; --ocre:#B06A2C; --bronze:#B0824A;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--papier);color:var(--anthracite);
  font-family:Georgia,'Times New Roman',serif;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img,svg{max-width:100%;}
figure img,figure svg{display:block;}
a{color:inherit;}
::selection{background:var(--bronze);color:var(--papier);}

/* --- Bandes pleine largeur (sections) --- */
.band{padding:clamp(60px,9vw,116px) 24px;}
.band--vert{background:var(--vert);color:var(--ecru);}
.band--sdb{background:var(--sdb);color:var(--ecru);}
.band--papier{background:var(--papier);color:var(--anthracite);}
.band--ecru{background:var(--ecru);color:var(--anthracite);}
.band--hero{padding-top:20px;}

/* --- Conteneurs --- */
.wrap{max-width:1080px;margin:0 auto;}
.col{max-width:680px;margin:0 auto;}
.col--wide{max-width:880px;margin:0 auto;}

/* --- Navigation --- */
.nav{max-width:1080px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:6px 0 clamp(44px,7vw,72px);}
.nav a{text-decoration:none;}
.nav__brand{display:inline-flex;align-items:center;}
.nav__brand svg{width:112px;height:auto;display:block;}
.nav__links{display:flex;flex-wrap:wrap;justify-content:flex-end;
  gap:clamp(13px,2.6vw,28px);row-gap:10px;
  font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;
  letter-spacing:2px;text-transform:uppercase;}
/* Nav resserrée sur petits écrans : les entrées passent sous le logotype, centrées */
@media(max-width:600px){
  .nav{justify-content:center;gap:14px;}
  .nav__links{justify-content:center;letter-spacing:1.4px;gap:16px;}
}
.nav__links a{opacity:.8;padding-bottom:3px;border-bottom:1px solid transparent;
  transition:opacity .15s,border-color .15s;white-space:nowrap;}
.nav__links a:hover{opacity:1;border-color:var(--bronze);}
.nav__links a[aria-current="page"]{opacity:1;color:var(--bronze);border-color:var(--bronze);}

/* --- Sur-titre (micro-label) --- */
.eyebrow{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;
  letter-spacing:3px;text-transform:uppercase;color:var(--bronze);margin-bottom:18px;}

/* --- Titres --- */
h1,h2,h3{font-weight:700;line-height:1.12;letter-spacing:.01em;}
.display{font-size:clamp(34px,6vw,62px);line-height:1.05;}
h2{font-size:clamp(26px,4.2vw,40px);}
h3{font-size:clamp(20px,2.6vw,26px);}

/* --- Corps de texte --- */
p{margin-bottom:1.1em;}
p:last-child{margin-bottom:0;}
.lead{font-size:clamp(18px,2.4vw,23px);line-height:1.5;}
.prose{font-size:clamp(16px,1.9vw,18px);}
.prose p+h3{margin-top:1.6em;}
.prose h3+p{margin-top:.4em;}

/* --- Filet --- */
.rule{width:64px;height:2px;background:var(--bronze);border:none;margin:34px 0;}
.rule--center{margin-left:auto;margin-right:auto;}

/* --- Citation --- */
.pull{font-size:clamp(23px,3.5vw,34px);line-height:1.28;font-style:italic;
  color:var(--ocre);max-width:820px;margin:clamp(38px,6vw,68px) auto;text-align:center;}
.band--vert .pull,.band--sdb .pull{color:var(--bronze);}

/* --- Figures & emplacements photo --- */
figure{margin:clamp(26px,5vw,46px) 0;}
figure img,figure svg{width:100%;height:auto;border-radius:4px;}
figcaption{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;
  letter-spacing:.3px;line-height:1.5;margin-top:12px;opacity:.72;}
.ph{position:relative;display:flex;align-items:center;justify-content:center;
  text-align:center;border:1px solid var(--bronze);border-radius:4px;
  aspect-ratio:16/10;padding:24px;}
.ph--tall{aspect-ratio:3/4;}
.ph--wide{aspect-ratio:2/1;}
.band--vert .ph,.band--sdb .ph{background:rgba(236,227,208,.04);}
.band--papier .ph,.band--ecru .ph{background:rgba(27,27,26,.025);}
.ph__label{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;
  letter-spacing:1.5px;text-transform:uppercase;opacity:.72;max-width:300px;line-height:1.7;}
.ph__label b{display:block;font-size:12px;letter-spacing:2px;color:var(--bronze);margin-bottom:6px;}

/* --- Liste de détails (construction) --- */
.details{list-style:none;margin-top:8px;}
.details li{padding:20px 0;border-top:1px solid rgba(176,130,74,.28);
  display:grid;grid-template-columns:220px 1fr;gap:clamp(18px,3vw,34px);align-items:start;}
/* Entrées sans schéma : le texte garde la même colonne, la gouttière reste libre */
.details li>.details__txt:first-child{grid-column:2;}
.details__fig{margin:0;}
.details__fig img{display:block;width:auto;max-width:100%;max-height:200px;margin:0 auto;}
.details__fig figcaption{margin-top:10px;text-align:center;}
@media(max-width:640px){
  .details li{grid-template-columns:1fr;gap:16px;}
  .details li>.details__txt:first-child{grid-column:1;}
  .details__fig img{max-height:160px;}
}
/* Schéma technique isolé, centré dans la colonne de texte */
.schema{max-width:420px;margin-left:auto;margin-right:auto;}
.schema img{width:100%;}
.details li:last-child{border-bottom:1px solid rgba(176,130,74,.28);}
.details h3{font-size:clamp(18px,2.2vw,22px);margin-bottom:4px;}
.details h3 span{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;
  letter-spacing:2px;color:var(--bronze);margin-right:12px;vertical-align:2px;}
.details p{font-size:16px;margin:0;opacity:.85;}

/* --- Grille de valeurs --- */
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(24px,4vw,40px);margin-top:20px;}
.value .num{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;
  letter-spacing:2px;color:var(--bronze);display:block;margin-bottom:10px;}
.value h3{font-size:20px;margin-bottom:8px;}
.value p{font-size:15px;opacity:.85;margin:0;}

/* --- Cartes d'articles --- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(18px,3vw,26px);margin-top:26px;}
/* 4 cartes : grille 2×2 sur grand écran (évite la 4e orpheline sur une 2e ligne) */
@media(min-width:700px){.cards--2{grid-template-columns:repeat(2,1fr);}}
.card{display:block;text-decoration:none;color:inherit;
  border:1px solid rgba(176,130,74,.42);border-radius:6px;padding:28px 24px;
  transition:border-color .15s,transform .15s;}
.card:hover{border-color:var(--bronze);transform:translateY(-2px);}
.card .eyebrow{margin-bottom:12px;}
.card h3{font-size:22px;margin-bottom:10px;}
.card p{font-size:15px;opacity:.85;margin-bottom:16px;}
.card .more{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;
  letter-spacing:2px;text-transform:uppercase;color:var(--bronze);}

/* --- Le fil (visuels de posts, servis en natif — aucun embed tiers) --- */
/* Grille explicite 3x2 : en auto-fit, les 6 tuiles tombaient en 5 + 1 orpheline. */
.fil{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px;}
.fil a{display:block;border:1px solid rgba(176,130,74,.35);border-radius:4px;
  overflow:hidden;transition:transform .15s,border-color .15s;}
.fil a:hover{transform:translateY(-2px);border-color:var(--bronze);}
.fil img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;}
.fil-cta{text-align:center;margin-top:24px;}
.fil-cta a{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;
  letter-spacing:2px;text-transform:uppercase;color:var(--bronze);
  text-decoration:none;border-bottom:1px solid var(--bronze);padding-bottom:3px;}
@media(max-width:520px){.fil{grid-template-columns:repeat(2,1fr);}}

/* --- Bloc deux colonnes (texte + visuel) --- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px);align-items:center;}
.split figure{margin:0;}
@media(max-width:760px){.split{grid-template-columns:1fr;gap:32px;}}

/* --- Hero logotype --- */
.hero-logo{text-align:center;}
.hero-logo svg{width:min(420px,86vw);height:auto;margin:0 auto;display:block;}
.hero-sub{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;
  letter-spacing:3px;text-transform:uppercase;opacity:.85;margin-top:22px;text-align:center;}
.tagline{font-style:italic;color:var(--bronze);font-size:clamp(16px,2.5vw,20px);
  text-align:center;margin-top:12px;}
.scroll-cue{text-align:center;margin-top:clamp(38px,6vw,64px);
  font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;
  letter-spacing:2px;text-transform:uppercase;opacity:.55;}

/* --- Manifeste --- */
.manifeste{text-align:center;font-size:clamp(18px,2.6vw,22px);}
.manifeste p{margin-bottom:1.05em;}
.manifeste .chute{font-style:italic;color:var(--ocre);}
.manifeste .sig{margin-top:1.8em;font-weight:700;font-size:.8em;letter-spacing:3px;text-transform:uppercase;}

/* --- Titre d'article --- */
.article-head{text-align:center;}
.article-head .display{margin-bottom:20px;}
.article-head .lead{max-width:640px;margin:0 auto;opacity:.9;}

/* --- Inscription (formulaire) --- */
.signup{max-width:540px;margin:0 auto;text-align:center;}
.signup h2{margin-bottom:10px;}
.signup .lead{margin-bottom:22px;opacity:.9;}
.signup-form{display:flex;gap:10px;max-width:440px;margin:0 auto;flex-wrap:wrap;justify-content:center;}
input[type=email]{flex:1;min-width:220px;padding:14px 16px;border:1px solid var(--ecru);
  border-radius:8px;background:transparent;color:var(--ecru);font-family:inherit;
  font-size:16px;transition:border-color .15s;}
input[type=email]::placeholder{color:var(--ecru);opacity:.55;}
input[type=email]:focus{outline:none;border-color:var(--bronze);box-shadow:0 0 0 2px rgba(176,130,74,.4);}
button{padding:14px 24px;border:none;border-radius:8px;background:var(--ecru);color:var(--vert);
  font-family:inherit;font-weight:700;font-size:16px;cursor:pointer;transition:background .15s;}
button:hover{background:#fff;}
button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--vert),0 0 0 4px var(--bronze);}
a:focus-visible{outline:2px solid var(--ocre);outline-offset:2px;border-radius:2px;}
.rgpd{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;opacity:.6;margin-top:14px;}
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.signup-ok{max-width:440px;margin:8px auto 0;font-size:17px;line-height:1.5;}
.signup-ok strong{color:var(--bronze);}
[hidden]{display:none!important;}

/* --- Pied de page --- */
footer{background:var(--vert);color:var(--ecru);text-align:center;padding:56px 24px;
  font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;letter-spacing:1px;}
footer .foot-links{margin-bottom:16px;display:flex;gap:20px;justify-content:center;
  flex-wrap:wrap;text-transform:uppercase;letter-spacing:2px;}
footer .foot-links a{color:var(--ecru);text-decoration:none;opacity:.82;}
footer .foot-links a:hover{opacity:1;color:var(--bronze);}
footer .foot-meta{opacity:.6;line-height:1.9;}
footer .foot-meta a{color:var(--bronze);text-decoration:none;font-weight:700;}