/* Fontes variables servies depuis le site, sans appel à un service tiers.
   Newsreader et Public Sans — SIL Open Font License 1.1.
   Un seul fichier par famille couvre les graisses 400 à 600. */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/newsreader-latin-wght-normal.woff2') format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/public-sans-latin-wght-normal.woff2') format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Public Sans';font-style:italic;font-weight:400 600;font-display:swap;src:url('fonts/public-sans-latin-wght-italic.woff2') format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ============================================================
   Massalis — feuille de style commune
   Charte du 31/08/2026 : encre, papier ivoire, vert cartouche.
   Newsreader (titres) + Public Sans (texte), variables, servies depuis /fonts.
   Aucune fonte monospace, aucun appel à un service tiers.
   Couvre l'accueil (index/en) et les articles (ressource-*).
   ============================================================ */

:root{
  --encre:#1C1F1B;
  --papier:#F5F3ED;
  --blanc:#FCFBF7;
  --vert:#2C6350;
  --vert-fonce:#1F4B3B;
  --gris:#5C6058;
  --filet:#D9D5C9;
  --vert-clair:#2C6350; /* un seul vert : celui de la charte */
  --sur-encre:#A9AEA4;
  --filet-encre:rgba(217,213,201,.20);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  font-family:'Public Sans',system-ui,sans-serif;
  background:var(--papier);
  color:var(--encre);
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1040px;margin:0 auto;padding:0 30px}
.skip{position:absolute;left:-9999px;top:0;background:var(--encre);color:var(--blanc);padding:10px 18px;z-index:100}
.skip:focus{left:12px;top:12px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--vert);outline-offset:3px}

/* ---------- en-tete ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:var(--encre);
  border-bottom:1px solid var(--filet-encre);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.marque{display:flex;align-items:center;gap:13px;text-decoration:none}
.marque svg{display:block;flex-shrink:0}
header .nom,header .wordmark{
  font-family:'Newsreader',Georgia,serif;font-weight:600;font-size:1.42rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--blanc);line-height:1;
  text-decoration:none;
}
.nom,.wordmark{
  font-family:'Newsreader',Georgia,serif;font-weight:600;font-size:1.42rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--encre);line-height:1;
  text-decoration:none;
}
.nom span,.wordmark span{color:var(--vert)}
header .nom span,header .wordmark span{color:var(--vert)}
nav{display:flex;align-items:center;gap:30px}
nav ul{display:flex;gap:27px;list-style:none}
nav a{color:var(--sur-encre);text-decoration:none;font-size:.875rem}
nav a:hover{color:var(--blanc)}
.langues,.lang{
  display:flex;gap:8px;
  font-size:.8rem;letter-spacing:.06em;color:var(--filet-encre);
}
.langues a,.lang a{color:var(--sur-encre);text-decoration:none;padding:0 2px}
.langues a[aria-current],.lang a[aria-current]{color:var(--blanc);font-weight:600}
#menu,.burger{display:none}
@media(max-width:820px){
  .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;cursor:pointer;padding:8px}
  .burger span{display:block;height:1.5px;background:var(--blanc)}
  nav{position:absolute;top:78px;left:0;right:0;background:var(--encre);border-bottom:1px solid var(--filet-encre);display:none;flex-direction:column;align-items:stretch;gap:0}
  #menu:checked ~ nav{display:flex}
  nav ul{flex-direction:column;gap:0;padding:4px 30px 0}
  nav li{border-top:1px solid var(--filet-encre)}
  nav a{display:block;padding:13px 0;font-size:.95rem}
  .langues,.lang{padding:14px 30px 18px;border-top:1px solid var(--filet-encre)}
}

/* ---------- titres ---------- */
h1,h2,h3{font-family:'Newsreader',Georgia,serif;font-weight:500;letter-spacing:0}
.etiquette,.ref{
  font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--vert);display:block;margin-bottom:18px;
}

/* ============================================================
   ACCUEIL
   ============================================================ */

.ouverture{padding:80px 0 26px;display:grid;grid-template-columns:1.35fr .65fr;gap:60px;align-items:start}
.ouverture h1{font-size:clamp(2.15rem,4.3vw,3.15rem);line-height:1.1;max-width:15em}
.ouverture .chapeau{margin-top:26px;font-size:1.08rem;color:var(--gris);max-width:36em}
.ouverture .chapeau strong{color:var(--encre);font-weight:600}
.actions{margin-top:34px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.bouton,.cta{
  display:inline-block;background:var(--encre);color:var(--blanc);text-decoration:none;
  font-family:'Public Sans',system-ui,sans-serif;
  font-size:.9rem;font-weight:500;padding:13px 26px;
}
.bouton:hover,.cta:hover{background:var(--vert-fonce)}
.lien{color:var(--encre);text-decoration:none;font-size:.9rem;font-weight:500;border-bottom:1px solid var(--vert);padding-bottom:2px}
.lien:hover{color:var(--vert)}
.embleme{width:100%;max-width:190px;height:auto;display:block;margin-left:auto}
@media(max-width:820px){
  .ouverture{grid-template-columns:1fr;gap:34px;padding:52px 0 20px}
  .embleme{margin:0;max-width:150px}
}

.reperes{border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);margin-top:40px}
.reperes dl{max-width:1040px;margin:0 auto;padding:26px 30px;display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
@media(max-width:760px){.reperes dl{grid-template-columns:1fr;gap:20px}}
.reperes dt{font-family:'Newsreader',Georgia,serif;font-size:1.5rem;color:var(--vert);line-height:1.1}
.reperes dd{font-size:.85rem;color:var(--gris);margin-top:5px}

section{padding:76px 0;border-top:1px solid var(--filet)}
section:first-of-type{border-top:none}
h2{font-size:clamp(1.5rem,2.6vw,1.95rem);line-height:1.22;margin-bottom:26px;max-width:20em}
.texte{max-width:37em}
.texte p+p{margin-top:15px}
.texte p{color:var(--gris)}
.texte strong{color:var(--encre);font-weight:600}

.mandat{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px}
@media(max-width:860px){.mandat{grid-template-columns:1fr;gap:34px}}
.volet h3{font-size:1.22rem;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--vert)}
.volet ul{list-style:none}
.volet li{color:var(--gris);font-size:.9rem;line-height:1.5;padding:9px 0;border-bottom:1px solid var(--filet)}

.attentes{margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:40px 56px}
@media(max-width:760px){.attentes{grid-template-columns:1fr;gap:30px}}
.attente h3{font-size:1.16rem;margin-bottom:9px}
.attente p{color:var(--gris);font-size:.93rem}

.qui{margin-top:34px;border-top:1px solid var(--filet)}
.qui>div{display:grid;grid-template-columns:.3fr .7fr;gap:36px;padding:22px 0;border-bottom:1px solid var(--filet)}
@media(max-width:760px){.qui>div{grid-template-columns:1fr;gap:6px}}
.qui h3{font-size:1.08rem}
.qui p{color:var(--gris);font-size:.92rem}

.questions{max-width:44em}
.questions details{border-bottom:1px solid var(--filet)}
.questions summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;position:relative;font-weight:500;font-size:.97rem}
.questions summary::-webkit-details-marker{display:none}
.questions summary::after{
  content:"";position:absolute;right:6px;top:calc(50% - 4px);
  width:8px;height:8px;border-right:1.5px solid var(--vert);border-bottom:1.5px solid var(--vert);
  transform:rotate(45deg);
}
.questions details[open] summary::after{transform:rotate(-135deg);top:calc(50% - 1px)}
.questions details p{color:var(--gris);font-size:.93rem;padding:0 0 20px;max-width:44em}

.lectures{margin-top:34px;display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
@media(max-width:860px){.lectures{grid-template-columns:1fr;gap:26px}}
.lecture{border-top:2px solid var(--encre);padding-top:16px}
.lecture h3{font-size:1.08rem;line-height:1.3;margin-bottom:9px}
.lecture h3 a{color:var(--encre);text-decoration:none}
.lecture h3 a:hover{color:var(--vert)}
.lecture p{color:var(--gris);font-size:.88rem}

.contact-grille{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;margin-top:6px}
@media(max-width:860px){.contact-grille{grid-template-columns:1fr;gap:34px}}
.contact-grille>div>p{color:var(--gris)}
.precisions{list-style:none;margin-top:16px}
.precisions li{color:var(--gris);font-size:.9rem;line-height:1.5;padding:7px 0;border-bottom:1px solid var(--filet)}
.adresse{margin-top:24px;font-size:1.02rem}
.adresse a{color:var(--encre);text-decoration:none;border-bottom:1px solid var(--vert)}
.adresse .tel{display:inline-block;margin-top:7px;font-size:.98rem}
form{display:grid;gap:15px}
label{font-size:.82rem;font-weight:500;display:block;margin-bottom:5px}
input,textarea{
  width:100%;padding:12px 13px;border:1px solid var(--filet);
  background:var(--blanc);font:inherit;font-size:.93rem;color:var(--encre);
}
input:focus,textarea:focus{outline:none;border-color:var(--vert);box-shadow:0 0 0 1px var(--vert)}
textarea{min-height:120px;resize:vertical}
form button{
  justify-self:start;background:var(--encre);color:var(--blanc);border:none;
  font:inherit;font-size:.9rem;font-weight:500;padding:13px 26px;cursor:pointer;
}
form button:hover{background:var(--vert-fonce)}
.mention,.note-form{font-size:.78rem;color:var(--gris)}

/* ============================================================
   ARTICLES (ressource-*.html)
   ============================================================ */

.article{max-width:38em;margin:0 auto;padding:64px 0 76px}
.article h1{
  font-size:clamp(1.85rem,3.4vw,2.5rem);line-height:1.15;
  margin-bottom:22px;
}
.article .chapo{
  font-size:1.06rem;color:var(--gris);
  padding-bottom:26px;margin-bottom:30px;border-bottom:1px solid var(--filet);
}
.article h2{
  font-size:1.38rem;line-height:1.28;
  margin:44px 0 14px;max-width:none;
}
.article h3{font-size:1.12rem;margin:30px 0 10px}
.article p{color:var(--gris);margin-bottom:15px}
.article strong{color:var(--encre);font-weight:600}
.article a{color:var(--encre);text-decoration:none;border-bottom:1px solid var(--vert)}
.article a:hover{color:var(--vert)}
.article ul,.article ol{margin:0 0 18px 0;padding-left:0;list-style:none}
.article ol{counter-reset:pas}
.article li{
  position:relative;padding-left:22px;color:var(--gris);
  line-height:1.55;margin-bottom:9px;
}
.article ul>li::before{
  content:"";position:absolute;left:0;top:.65em;
  width:9px;height:1.5px;background:var(--vert);
}
.article ol>li{counter-increment:pas}
.article ol>li::before{
  content:counter(pas)".";position:absolute;left:0;top:0;
  font-family:'Newsreader',Georgia,serif;color:var(--vert);font-size:.95rem;
}
.article blockquote{
  margin:26px 0;padding-left:22px;border-left:2px solid var(--vert);
  font-family:'Newsreader',Georgia,serif;font-size:1.12rem;color:var(--encre);
}
.article .note{
  margin:30px 0;padding:20px 22px;background:var(--blanc);
  border:1px solid var(--filet);
  font-size:.9rem;color:var(--gris);
}
.article .note strong{color:var(--encre)}
.article table{width:100%;border-collapse:collapse;margin:26px 0;font-size:.9rem}
.article th,.article td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--filet)}
.article th{font-weight:600;color:var(--encre);border-bottom:2px solid var(--encre)}
.article td{color:var(--gris)}

.encart-cta{
  margin:44px 0 30px;padding:28px 26px;
  background:var(--blanc);border:1px solid var(--filet);
}
.encart-cta p{color:var(--gris);font-size:.94rem;margin-bottom:18px}
.retour{
  display:inline-block;margin-top:8px;
  color:var(--gris);text-decoration:none;font-size:.88rem;
}
.retour::before{content:"\2190";margin-right:7px;color:var(--vert)}
.retour:hover{color:var(--vert)}

/* ---------- pied ---------- */
footer{border-top:1px solid var(--filet);background:var(--blanc);padding:40px 0 48px}
.pied,.footer-grille{display:grid;grid-template-columns:1fr 1.4fr;gap:44px}
@media(max-width:760px){.pied,.footer-grille{grid-template-columns:1fr;gap:26px}}
footer p{font-size:.79rem;color:var(--gris);line-height:1.65}
footer .nom,footer .wordmark{font-size:1.1rem}

/* ============================================================
   ACCUEIL — refonte du 16 septembre 2026
   Ouverture pleine largeur sur fond encre, alternance de fonds,
   arguments nommés. Les regles ci-dessous priment sur celles
   de la version precedente (meme specificite, plus bas dans le fichier).
   ============================================================ */

/* ---------- ouverture ---------- */
.hero{background:var(--encre);color:var(--blanc)}
.hero-grille{display:grid;grid-template-columns:1.45fr .55fr;gap:56px;align-items:center;padding:96px 0 0}
.hero h1{
  font-family:'Newsreader',Georgia,serif;font-weight:500;
  font-size:clamp(2.45rem,5.3vw,4.05rem);line-height:1.04;
  color:var(--blanc);max-width:12.5em;letter-spacing:-.005em;
}
.hero .chapeau{margin-top:30px;font-size:1.1rem;line-height:1.68;color:var(--sur-encre);max-width:34em}
.hero .chapeau strong{color:var(--blanc);font-weight:600}
.hero .actions{margin-top:38px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.hero .bouton{background:var(--blanc);color:var(--encre)}
.hero .bouton:hover{background:var(--vert);color:var(--blanc)}
.hero .lien{color:var(--blanc);border-bottom:1px solid var(--vert)}
.hero .lien:hover{color:var(--sur-encre)}
.hero .embleme{width:100%;max-width:240px;margin-left:auto}
.hero-reperes{
  margin-top:86px;border-top:1px solid var(--filet-encre);
  display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding:30px 0 40px;
}
.hero-reperes dt{font-family:'Newsreader',Georgia,serif;font-size:1.5rem;line-height:1.1;color:var(--blanc)}
.hero-reperes dd{font-size:.85rem;line-height:1.55;color:var(--sur-encre);margin-top:6px}
@media(max-width:860px){
  .hero-grille{grid-template-columns:1fr;gap:34px;padding:56px 0 0}
  .hero .embleme{margin:0;max-width:150px}
  .hero-reperes{margin-top:52px;grid-template-columns:1fr;gap:22px}
}

/* ---------- fonds de sections ---------- */
.sec-ivoire{background:var(--papier);border-top:none;padding:88px 0}
.sec-blanc{background:var(--blanc);border-top:none;padding:88px 0}
.sec-encre{background:var(--encre);color:var(--blanc);border-top:none;padding:88px 0}
.sec-encre h2{color:var(--blanc)}
.sec-encre .etiquette{color:var(--sur-encre)}
@media(max-width:760px){
  .sec-ivoire,.sec-blanc,.sec-encre{padding:62px 0}
}

/* ---------- chapeau de section ---------- */
.lead{
  font-family:'Newsreader',Georgia,serif;font-size:1.32rem;line-height:1.5;
  color:var(--encre);max-width:30em;margin-bottom:34px;
}
.colonnes{max-width:none;columns:2;column-gap:56px}
.colonnes p{break-inside:avoid;margin:0 0 15px}
.colonnes p+p{margin-top:0}
@media(max-width:860px){.colonnes{columns:1}}

/* ---------- le mandat ---------- */
.mandat{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:0 44px}
@media(max-width:860px){.mandat{grid-template-columns:1fr;gap:40px}}
.volet .num{
  display:block;font-family:'Newsreader',Georgia,serif;font-size:1.05rem;
  color:var(--vert);letter-spacing:.08em;margin-bottom:12px;
}
.volet h3{font-size:1.24rem;margin-bottom:12px;padding-bottom:0;border-bottom:none}
.volet .amorce{font-size:.92rem;line-height:1.55;color:var(--gris);margin-bottom:18px;padding-bottom:16px;border-bottom:2px solid var(--vert)}
.volet li{color:var(--gris);font-size:.9rem;line-height:1.5;padding:9px 0;border-bottom:1px solid var(--filet)}

/* ---------- arguments nommes ---------- */
.arguments{margin-top:14px}
.argument{
  display:grid;grid-template-columns:.36fr .64fr;gap:44px;
  padding:34px 0;border-top:1px solid var(--filet);
}
.argument:last-child{border-bottom:1px solid var(--filet)}
.argument h3{font-size:1.3rem;line-height:1.25;max-width:12em}
.argument p{color:var(--gris)}
.argument p+p{margin-top:13px}
.argument strong{color:var(--encre);font-weight:600}
@media(max-width:820px){
  .argument{grid-template-columns:1fr;gap:12px;padding:28px 0}
}

/* ---------- interlocuteurs sur fond encre ---------- */
.sec-encre .qui{border-top:1px solid var(--filet-encre)}
.sec-encre .qui>div{border-bottom:1px solid var(--filet-encre)}
.sec-encre .qui h3{color:var(--blanc)}
.sec-encre .qui p{color:var(--sur-encre)}

/* ---------- contact sur fond encre ---------- */
.sec-contact{background:var(--encre);color:var(--blanc);border-top:none;padding:88px 0}
.sec-contact h2{color:var(--blanc)}
.sec-contact .etiquette{color:var(--sur-encre)}
.sec-contact .contact-grille>div>p{color:var(--sur-encre)}
.sec-contact .precisions li{color:var(--sur-encre);border-bottom:1px solid var(--filet-encre)}
.sec-contact .adresse a{color:var(--blanc);border-bottom:1px solid var(--vert)}
.sec-contact .adresse a:hover{color:var(--sur-encre)}
.panneau-form{background:var(--blanc);padding:30px 30px 32px}
.panneau-form label{color:var(--encre)}
.panneau-form .mention{color:var(--gris)}
@media(max-width:760px){.sec-contact{padding:62px 0}.panneau-form{padding:24px 22px 26px}}

/* alignement des trois volets du mandat : les filets verts sur une meme ligne */
@supports (grid-template-rows: subgrid){
  .mandat{grid-template-rows:auto auto auto auto}
  .mandat .volet{display:grid;grid-row:span 4;grid-template-rows:subgrid;align-content:start}
  .volet .num{margin-bottom:0;align-self:end}
  .volet h3{margin:12px 0 0}
  .volet .amorce{margin-top:12px}
}
@media(max-width:860px){
  .mandat .volet{display:block}
  .volet h3{margin:0 0 12px}
  .volet .amorce{margin-top:0}
}