/* 🌐 PROLI · site public · #3550
   Même identité que l'interne — noir, sérif à haut contraste, laiton — mais
   allégée : c'est un site, pas un dossier de 29 rubriques. */
:root{--noir:#0a0a0a;--encre:#141414;--papier:#f2efe9;--papier2:#e6e0d4;
  --laiton:#c9a227;--gris:#8d8d8d;--gris2:#5a5a5a;
  --serif:'Cormorant Garamond',Georgia,serif;--sans:'Inter',system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--encre);font-family:var(--sans);
  font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}

/* ── en-tête ─────────────────────────────────────────── */
.entete{background:var(--noir);padding:1rem 1.25rem;display:flex;flex-wrap:wrap;
  gap:1rem 1.6rem;align-items:baseline;position:sticky;top:0;z-index:20}
.marque{font-family:var(--serif);font-size:1.05rem;letter-spacing:.34em;color:var(--papier);
  text-decoration:none;flex:0 0 auto}
.menu{display:flex;flex-wrap:wrap;gap:1.2rem;margin-left:auto}
.menu a{font-size:.78rem;letter-spacing:.09em;color:#8d8d8d;text-decoration:none;
  padding-bottom:.2rem;border-bottom:1px solid transparent}
.menu a:hover{color:var(--papier)}
.menu a.actif{color:var(--laiton);border-bottom-color:var(--laiton)}

/* ── hero ────────────────────────────────────────────── */
.hero{background:#000;color:var(--papier);text-align:center;padding:6rem 1.25rem 5rem}
.hero-k{font-size:.66rem;letter-spacing:.38em;text-transform:uppercase;color:var(--gris2);margin:0 0 2.4rem}
.hero-mot{font-family:var(--serif);font-weight:300;white-space:nowrap;
  font-size:clamp(1.05rem,6vw,4.6rem);letter-spacing:.14em;text-indent:.14em;margin:0 0 2.2rem;line-height:1.05}
.hero-sig{font-family:var(--serif);font-size:clamp(1rem,2.4vw,1.6rem);letter-spacing:.12em;
  line-height:1.7;max-width:min(34ch,100%);margin:0 auto 2rem}
.filet{width:52px;height:1px;background:var(--laiton);margin:0 auto}

/* ── sections ────────────────────────────────────────── */
.sec{padding:4.5rem 1.25rem}
.sec-clair{background:var(--papier2)}
.sec-axiome,.sec-corpus{background:var(--noir);color:var(--papier)}
.sec-tete{padding-bottom:2rem}
.wrap{max-width:1040px;margin:0 auto}
.wrap-etroit{max-width:620px}
.eyebrow{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gris2);margin:0 0 .8rem}
.sec-axiome .eyebrow,.sec-corpus .eyebrow{color:var(--laiton)}
h1,h2{font-family:var(--serif);font-weight:300;line-height:1.15;margin:0 0 1rem}
h1{font-size:clamp(1.9rem,5vw,3.2rem)}
h2{font-size:clamp(1.5rem,3.6vw,2.3rem)}
h3{font-family:var(--serif);font-weight:400;font-size:1.12rem;margin:0 0 .5rem}
.lead{font-size:1.02rem;line-height:1.75;max-width:min(70ch,100%);color:#3a3a3a}
.sec-axiome .lead,.sec-corpus .lead{color:#b9b4ab}
.axiome{font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,3.4vw,2.1rem);
  line-height:1.5;color:var(--laiton);max-width:min(48ch,100%);margin:0 0 1.6rem}

/* ── manifeste ───────────────────────────────────────── */
.articles{display:grid;gap:1.5rem;margin-top:2rem}
.art{display:grid;grid-template-columns:52px 1fr;gap:1.1rem;border-top:1px solid #ccc4b4;padding-top:1.2rem}
.art-n{font-family:var(--serif);font-size:1.9rem;color:var(--laiton);line-height:1;text-align:right}
.art p{margin:0;font-size:.94rem;line-height:1.7;color:#4a4a4a;max-width:min(66ch,100%)}

/* ── protocoles ──────────────────────────────────────── */
.protos{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin-top:2rem}
.proto{background:#fff;border:1px solid #ddd6c8;padding:1.3rem;position:relative}
.proto-c{position:absolute;top:.9rem;right:1rem;font-size:.6rem;letter-spacing:.14em;
  background:var(--noir);color:var(--laiton);padding:.12rem .4rem}
.proto-i{font-size:1.6rem;display:block;margin-bottom:.4rem}
.proto p{font-size:.86rem;line-height:1.6;color:#4a4a4a;margin:0}
.proto-d{background:var(--noir);color:#cfcac1!important;padding:.7rem .85rem;font-size:.78rem!important;margin-top:.9rem!important}
.proto-d span{display:block;font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--laiton);margin-bottom:.25rem}

/* ── compteur ────────────────────────────────────────── */
.compteur{display:flex;flex-wrap:wrap;gap:2.4rem;align-items:baseline;margin:1.6rem 0 2rem}
.compteur div{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris2)}
.compteur span{display:block;font-family:var(--serif);font-size:4rem;line-height:1;color:var(--laiton);letter-spacing:0}
.compteur-au{align-self:flex-end;color:var(--gris2)!important}

/* ── filiation ───────────────────────────────────────── */
.filiation{list-style:none;padding:0;margin:2rem 0 1.6rem;display:grid;gap:.5rem}
.filiation li{display:grid;grid-template-columns:72px 1fr;gap:1rem;padding:.7rem 0;border-top:1px solid #ccc4b4}
.fi-an{font-family:var(--serif);font-size:1.05rem;color:var(--gris2)}
.fi-q{font-size:.92rem;line-height:1.6;color:#4a4a4a}
.fi-nous .fi-an,.fi-nous .fi-q{color:var(--encre)}
.fi-nous{border-top:2px solid var(--laiton)}

/* ── lexique ─────────────────────────────────────────── */
.lexique{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.2rem;margin-top:2rem}
.lexique dt{font-family:var(--serif);font-size:1.08rem;color:var(--encre);margin-bottom:.25rem}
.lexique dt em{font-size:.66rem;letter-spacing:.08em;color:var(--gris2);font-style:italic}
.lexique dd{margin:0;font-size:.86rem;line-height:1.6;color:#4a4a4a}

/* ── actualités ──────────────────────────────────────── */
.news{display:grid;gap:1.2rem}
.new{background:#fff;border:1px solid #ddd6c8;border-left:3px solid var(--laiton);padding:1.5rem}
.new-tete{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;margin-bottom:.7rem}
.new-q{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gris2)}
.new-s{font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:var(--laiton);padding:.15rem .45rem}
.new h2{font-size:1.3rem;margin-bottom:.6rem}
.new p{margin:0;font-size:.94rem;line-height:1.7;color:#4a4a4a;max-width:min(72ch,100%)}

/* ── services ────────────────────────────────────────── */
.services{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.1rem}
.svc{background:#fff;border:1px solid #ddd6c8;padding:1.5rem;display:flex;flex-direction:column}
.svc-i{font-size:1.8rem;margin-bottom:.5rem}
.svc h2{font-size:1.2rem;margin-bottom:.6rem}
.svc p{font-size:.88rem;line-height:1.65;color:#4a4a4a;margin:0}
.svc-d{margin-top:auto!important;padding-top:1rem;font-size:.6rem!important;letter-spacing:.2em;
  text-transform:uppercase;color:var(--laiton)!important}
.note{font-size:.9rem;line-height:1.7;color:#4a4a4a;max-width:min(66ch,100%);margin-top:2rem;
  border-left:2px solid var(--laiton);padding-left:1rem}
.cta-l{margin-top:2rem}
.cta{display:inline-block;background:var(--noir);color:var(--papier);text-decoration:none;
  padding:.9rem 1.8rem;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase}
.cta:hover{background:var(--laiton);color:var(--noir)}

/* ── auteurs ─────────────────────────────────────────── */
.auteurs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.3rem}
.auteur{background:#fff;border:1px solid #ddd6c8;padding:1.8rem}
.auteur-vide{background:repeating-linear-gradient(45deg,#fbf8f2 0 12px,#f6f2e8 12px 24px);border-style:dashed}
.au-i{display:inline-block;width:34px;height:34px;line-height:34px;text-align:center;border-radius:50%;
  background:var(--noir);color:var(--laiton);font-family:var(--serif);margin-bottom:.9rem}
.auteur h2{font-size:1.35rem;margin-bottom:.2rem}
.au-ne{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris2);margin:0 0 1.1rem}
.auteur p{font-size:.94rem;line-height:1.75;color:#4a4a4a;margin:0}
.au-reserve{font-style:italic;color:#6e675c!important}

/* ── timeline ────────────────────────────────────────── */
.tl{list-style:none;padding:0;margin:2rem 0 1.6rem;display:grid;gap:.4rem}
.tl li{display:grid;grid-template-columns:92px 44px 1fr;gap:.9rem;align-items:baseline;
  padding:.8rem 0;border-top:1px solid #ccc4b4}
.tl-an{font-family:var(--serif);font-size:1rem;color:var(--gris2)}
.tl-qui{font-size:.62rem;letter-spacing:.14em;text-align:center;padding:.12rem .3rem;
  border:1px solid #ccc4b4;color:var(--gris2)}
.tl-o .tl-qui{border-color:#1a1a1a;color:#1a1a1a}
.tl-v .tl-qui{border-color:var(--laiton);color:var(--laiton)}
.tl-ov .tl-qui{background:var(--noir);color:var(--laiton);border-color:var(--noir)}
.tl-q{font-size:.92rem;line-height:1.6;color:#4a4a4a}

/* ── contact ─────────────────────────────────────────── */
.mail{font-family:var(--serif);font-size:clamp(1.15rem,3.4vw,2rem);margin:0 0 1rem;word-break:break-word}
.mail a{color:var(--laiton);text-decoration:none;border-bottom:1px solid #ddd0a0}
.ou{margin-top:2.6rem}
.ou h2{font-size:1.25rem}
.ou ul{padding-left:1.1rem;margin:0}
.ou li{font-size:.94rem;line-height:1.75;color:#4a4a4a;margin-bottom:.6rem}
.mentions{font-size:.8rem;color:var(--gris2);margin-top:2.4rem}

/* ── pied ────────────────────────────────────────────── */
.pied{background:var(--noir);color:var(--gris);text-align:center;padding:3.4rem 1.25rem}
.pied-mot{font-family:var(--serif);letter-spacing:.3em;color:var(--papier);margin:0 0 .5rem}
.pied-l{font-size:.82rem;margin:0 0 1.6rem}
.pied-menu{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:center;margin-bottom:1.6rem}
.pied-menu a{font-size:.74rem;letter-spacing:.1em;color:var(--gris);text-decoration:none}
.pied-menu a:hover{color:var(--laiton)}
.pied-c{font-size:.72rem;color:var(--gris2);margin:0}

@media (max-width:767px){
  .sec{padding:3rem 1rem}
  .menu{margin-left:0;width:100%;gap:.9rem}
  .art{grid-template-columns:1fr;gap:.3rem}
  .art-n{text-align:left;font-size:1.5rem}
  .filiation li{grid-template-columns:1fr;gap:.2rem}
  .tl li{grid-template-columns:1fr;gap:.2rem}
  .tl-qui{justify-self:start}
  .compteur{gap:1.4rem}
  .compteur span{font-size:2.6rem}
}

/* 🌍 #3823 · le sélecteur de langue et le bandeau de traduction */
.langues{display:flex;gap:.15rem;align-items:center;flex-wrap:wrap;margin-left:auto}
/* 🔴 CORRIGÉ APRÈS CAPTURE RÉELLE (#3823). La première version posait opacity:.55 et
   des fonds `rgba(0,0,0,…)` — sur un en-tête NOIR, ça donnait du noir sur du noir :
   seul le code de la langue active était lisible, les six autres avaient disparu.
   ⭐ Aucun test HTML ne pouvait le voir : les sept liens étaient bien dans le DOM,
     avec le bon href. C'est la CAPTURE qui l'a montré. Le rendu n'est pas la structure. */
.langues .drapeau{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .45rem;
  border-radius:4px;font-size:.74rem;line-height:1;text-decoration:none;
  color:rgba(255,255,255,.72);            /* clair sur sombre, pas une opacité globale */
  transition:color .15s,background .15s}
.langues .drapeau:hover,.langues .drapeau:focus-visible{color:#fff;background:rgba(255,255,255,.12)}
.langues .drapeau.actif{color:#fff;font-weight:600;background:rgba(255,255,255,.16)}
.langues .drapeau span[aria-hidden]{opacity:.9}   /* le drapeau garde ses couleurs */
.langues .drapeau span[aria-hidden]{font-size:1.05rem}
/* ⚠️ Le code ISO à côté du drapeau n'est pas décoratif : un drapeau ne désigne pas une
   langue (🇪🇸 n'est pas « l'espagnol », 🇨🇳 n'est pas « le chinois »), et plusieurs
   systèmes n'affichent pas les drapeaux du tout — ils rendent « ES », « CN ». Sans le
   code, le sélecteur serait alors une rangée de carrés vides. */
.drapeau-code{letter-spacing:.04em}
@media (max-width:640px){.langues{width:100%;margin:.5rem 0 0;justify-content:flex-start}}
.bandeau-traduction{margin:0;padding:.7rem 1rem;background:#fff8e6;border-bottom:1px solid #f0e0b0;
  font-size:.85rem;line-height:1.5;text-align:center}
.bandeau-traduction a{margin-left:.4rem}

/* 🖼️ #3835 · les décors · ⛔ ce ne sont PAS des œuvres, la légende le dit */
.decor{margin:0;padding:0}
.decor img{display:block;width:100%;height:auto;aspect-ratio:var(--decor-ratio,3/2);object-fit:cover}
.decor figcaption{max-width:1240px;margin:.6rem auto 0;padding:0 1.25rem;
  font-size:.74rem;letter-spacing:.02em;opacity:.55;text-align:right}