/* ============================================================================
   ONG A.H.D.P.S — feuille de style unique.
   Metaphore directrice : un rapport d'execution de bailleur, ouvert au public.
   On choisit ce qui DOCUMENTE plutot que ce qui emeut.

   PALETTE : derivee du logo (terre de Sienne, teinte 12-30 deg, mesuree sur
   95 868 pixels d'encre). PAS DE VERT : ce n'est pas leur couleur.
   Chaque ratio ci-dessous est MESURE, pas estime.
   Regle des deux familles : sous 4,5:1 -> APLAT seulement, + variante texte.
   ========================================================================== */

@font-face{font-family:"Serif";src:url("../fonts/serif-latin.woff2") format("woff2");
 font-weight:400 700;font-display:swap;
 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:"Sans";src:url("../fonts/sans-latin.woff2") format("woff2");
 font-weight:400 700;font-display:swap;
 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}
/* L'arabe n'est telecharge QUE si des glyphes arabes sont rendus (unicode-range).
   La page francaise ne paie donc pas ses 91 Ko. */
@font-face{font-family:"Serif";src:url("../fonts/arabe.woff2") format("woff2");
 font-weight:400 700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Sans";src:url("../fonts/arabe.woff2") format("woff2");
 font-weight:400 700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
/* La troisieme famille est un CHOIX DE FOND, pas un ornement : les references
   administratives (numeros de projet, decrets, surfaces) s'ecrivent dans une
   chasse fixe. C'est le registre du document officiel, et c'est ce que le
   panneau de chantier fait deja sur le terrain. 29 Ko pour les deux graisses. */
@font-face{font-family:"Mono";src:url("../fonts/mono.woff2") format("woff2");
 font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"Mono";src:url("../fonts/mono-600.woff2") format("woff2");
 font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}

:root{
  --terre:#8A4A32;        /*  6,34:1 sur creme  — marque, aplats, texte fort   */
  --terre-nuit:#4A2418;   /* 12,65:1 sur creme  — pied de page, fonds sombres  */
  --terre-texte:#7A3D26;  /*  7,80:1 sur creme  — liens, intertitres           */
  --brique:#9C3C24;       /*  6,38:1 sur creme  — carte du Benin du logo       */
  --ocre:#C79A54;         /*  2,41:1 sur creme  — APLAT UNIQUEMENT             */
  --ocre-clair:#E9C98E;   /*  APLAT + texte SUR --terre-nuit uniquement        */
  --ocre-texte:#7E5A12;   /*  5,86:1 sur creme  — seul ocre autorise en texte  */
  --sable:#E7D9C6;        /*  1,30:1 APLAT. 9,72:1 en TEXTE sur --terre-nuit   */
  --encre:#1B1512;        /* 16,93:1 — texte courant                           */
  --support:#5E5450;      /*  6,88:1 — texte secondaire                        */
  --creme:#FBF7F2;
  --papier:#FFFFFF;
  --trait:#E4DAD0;
  --r:14px;
  --ombre:0 1px 2px rgba(27,21,18,.05), 0 12px 34px -18px rgba(74,36,24,.28);
  --max:1180px;
  --serif:"Serif",Georgia,"Times New Roman",serif;
  --sans:"Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  /* 16/08/2026 : les deux filets aux couleurs des drapeaux ont ete RETIRES.
     Ils evoquaient le bailleur, et le client demande qu'aucune trace de lui
     ne subsiste. Ce qui ancre la fiche desormais, c'est le trait ocre du lieu. */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--creme);color:var(--encre);
 font:400 17px/1.65 var(--sans);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--terre-texte)}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.14;letter-spacing:-.012em;margin:0}
p{margin:0 0 1em}
.just{text-align:justify;text-justify:inter-word;hyphens:auto}
[dir=rtl] .just{text-align:justify}

/* Le lien d'evitement se cache par DECOUPE, jamais par `left:-999px`.
   Mesure du 14/08/2026 : en RTL, un element sorti a gauche AGRANDIT la zone
   defilable -- scrollWidth 2439 px pour un ecran de 1440. La page arabe entiere
   etait decalee. Le defaut n'existait pas en francais : `overflow-x:hidden`
   coupe le depassement du cote oppose. */
.saut{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
 clip-path:inset(50%);white-space:nowrap;border:0}
.saut:focus{position:fixed;top:0;inset-inline-start:0;width:auto;height:auto;margin:0;
 padding:.7rem 1.1rem;clip-path:none;background:var(--terre-nuit);color:#fff;
 z-index:99;border-radius:0 0 10px 10px;text-decoration:none}
:focus-visible{outline:3px solid var(--terre);outline-offset:3px;border-radius:4px}

/* ---------------------------------------------------------------- en-tete */
.tete{position:sticky;top:0;z-index:40;background:rgba(251,247,242,.92);
 backdrop-filter:blur(12px);border-bottom:1px solid var(--trait);transition:box-shadow .3s}
.tete.colle{box-shadow:0 8px 26px -20px rgba(74,36,24,.55)}
.tete-in{max-width:var(--max);margin:0 auto;padding:.7rem 20px;
 display:flex;align-items:center;gap:18px}
.marque{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;flex:0 0 auto}
.marque-logo{width:42px;height:auto}
.marque-txt{display:flex;flex-direction:column;line-height:1.15}
.marque-txt b{font-family:var(--serif);font-size:1.06rem;letter-spacing:.005em}
.marque-txt i{font-style:normal;font-size:.7rem;color:var(--support);letter-spacing:.045em;text-transform:uppercase}
.nav{display:flex;gap:4px;margin-inline-start:auto;flex-wrap:nowrap}
.nav a{font-size:.9rem;color:var(--encre);text-decoration:none;padding:.5rem .66rem;
 border-radius:9px;white-space:nowrap;transition:background .18s,color .18s}
.nav a:hover{background:var(--sable);color:var(--terre-nuit)}
.nav a[aria-current=page]{color:var(--terre-texte);font-weight:700;background:#F2E7DA}
.tete-fin{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.lang{font-size:.82rem;text-decoration:none;color:var(--terre-texte);border:1px solid var(--trait);
 padding:.36rem .7rem;border-radius:99px;white-space:nowrap;background:var(--papier)}
.lang:hover{background:var(--terre-nuit);color:#fff;border-color:var(--terre-nuit)}
.burger{display:none;width:42px;height:38px;border:1px solid var(--trait);background:var(--papier);
 border-radius:10px;cursor:pointer;padding:9px 10px;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:2px;background:var(--encre);border-radius:2px;transition:.25s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Le basculement est a 980px, et le nom de marque ne disparait JAMAIS.
   Piege paye sur le projet precedent : une bande morte 1025-1099 ou la barre
   complete s'affichait SANS le nom du site. Ici, une seule rupture. */
@media (max-width:979px){
  .nav{position:fixed;inset:64px 0 auto 0;flex-direction:column;gap:0;background:var(--creme);
   border-bottom:1px solid var(--trait);padding:10px 20px 20px;display:none;
   box-shadow:0 22px 40px -26px rgba(74,36,24,.6)}
  .nav.ouvert{display:flex}
  .nav a{padding:.85rem .6rem;border-bottom:1px solid var(--trait);border-radius:0}
  .burger{display:flex}
  .tete-fin{margin-inline-start:auto}
}
@media (max-width:400px){.marque-txt i{display:none}}

/* ---------------------------------------------------------------- structure */
.in{max-width:var(--max);margin:0 auto;padding:0 20px}
.in-etroit{max-width:820px}
.in-large{max-width:1320px}
.sec{padding:clamp(56px,8vw,104px) 0}
.sec-creme{background:#F4EDE4}
.sec-nuit{background:var(--terre-nuit);color:var(--sable)}
.sur{font:700 .72rem/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;
 color:var(--terre-texte);margin:0 0 .7rem}
.sur-clair{color:var(--ocre-clair)}
.tt{font-size:clamp(1.85rem,4.2vw,3rem);margin:0 0 .55rem;max-width:19ch}
.tt-clair{color:#fff}
.sous{color:var(--support);font-size:1.06rem;max-width:66ch;margin:0 0 2.4rem}
.sous-clair{color:var(--sable)}
.entete-p{padding:clamp(46px,6vw,78px) 0 0}
.entete-p .tt{max-width:22ch}
/* Deux paddings qui se suivent font un trou. Vu a l'oeil sur la page
   « L'organisation » : 130 px de vide entre le chapo et la premiere carte. */
.entete-p + .sec{padding-top:clamp(30px,3.6vw,52px)}
.entete-p + .in .dom-l:first-child{padding-top:clamp(24px,3vw,44px)}

.btn{display:inline-block;background:var(--terre-nuit);color:#fff;text-decoration:none;
 padding:.85rem 1.5rem;border-radius:99px;font-weight:600;font-size:.96rem;border:1px solid var(--terre-nuit);
 transition:transform .18s,background .18s}
.btn:hover{background:var(--terre);border-color:var(--terre);transform:translateY(-2px)}
.btn-fant{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-fant:hover{background:#fff;color:var(--terre-nuit);border-color:#fff}
.boutons{display:flex;gap:12px;flex-wrap:wrap;margin:1.6rem 0 0}
.lien-fleche{font-weight:600;text-decoration:none;border-bottom:2px solid var(--ocre)}
.lien-fleche::after{content:" →"}
[dir=rtl] .lien-fleche::after{content:" ←"}
.plus{margin-top:2.2rem}

/* ---------------------------------------------------------------- heros */
.heros{position:relative;min-height:clamp(520px,78vh,720px);display:flex;align-items:flex-end;
 color:#fff;overflow:hidden;background:var(--terre-nuit)}
.heros-fond{position:absolute;inset:0}
.heros-img{width:100%;height:100%;object-fit:cover;opacity:.42}
.heros::after{content:"";position:absolute;inset:0;
 background:linear-gradient(180deg,rgba(30,14,8,.62) 0%,rgba(30,14,8,.30) 34%,rgba(45,20,12,.90) 100%)}
.heros-in{position:relative;z-index:2;max-width:var(--max);margin:0 auto;
 padding:clamp(90px,13vw,150px) 20px clamp(84px,9vw,110px);width:100%}
.heros h1{font-size:clamp(1.9rem,4.6vw,3.45rem);max-width:17ch;margin:0 0 1.1rem;color:#fff}
.chapo{max-width:62ch;font-size:clamp(1rem,1.6vw,1.14rem);color:#F3E7DA}
.chapo b{color:#fff}
.heros-ref{position:absolute;z-index:3;inset-inline-start:0;bottom:0;width:100%;
 background:rgba(24,11,6,.72);backdrop-filter:blur(6px);color:var(--ocre-clair);
 font:600 .78rem/1 var(--sans);letter-spacing:.06em;padding:.85rem 20px;
 display:flex;align-items:center;gap:10px;border-top:1px solid rgba(233,201,142,.28)}
.pt{width:7px;height:7px;border-radius:99px;background:var(--ocre);flex:0 0 auto}

/* ---------------------------------------------------------------- bande de mesures */
.bande{background:var(--papier);border-bottom:1px solid var(--trait)}
.bande-in{max-width:var(--max);margin:0 auto;padding:34px 20px;
 display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat b{display:block;font-family:var(--serif);font-size:clamp(1.7rem,3.4vw,2.5rem);
 color:var(--terre);line-height:1;font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:.78rem;color:var(--support);letter-spacing:.05em;
 text-transform:uppercase;margin-top:.42rem}
@media (max-width:700px){.bande-in{grid-template-columns:repeat(2,1fr);gap:24px}}

/* ---------------------------------------------------------------- domaines */
.grille-dom{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dom{background:var(--papier);border:1px solid var(--trait);border-radius:var(--r);
 padding:26px 24px 22px;text-decoration:none;color:inherit;box-shadow:var(--ombre);
 transition:transform .22s,box-shadow .22s,border-color .22s}
.dom:hover{transform:translateY(-4px);border-color:var(--ocre);
 box-shadow:0 20px 42px -22px rgba(74,36,24,.42)}
.dom svg{width:32px;height:32px;fill:none;stroke:var(--terre);stroke-width:1.5;
 stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.dom h3{font-size:1.2rem;margin:0 0 .5rem}
.dom p{font-size:.94rem;color:var(--support);margin:0}
@media (max-width:900px){.grille-dom{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grille-dom{grid-template-columns:1fr}}

.dom-l{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);
 align-items:center;padding:clamp(34px,5vw,60px) 0;border-bottom:1px solid var(--trait)}
.dom-l.inv .dom-l-img{order:2}
.dom-l-img img{border-radius:var(--r);box-shadow:var(--ombre)}
.dom-l h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:0 0 .6rem}
.dom-l p{color:var(--support)}
@media (max-width:820px){.dom-l{grid-template-columns:1fr}.dom-l.inv .dom-l-img{order:0}}

/* ---------------------------------------------------------------- fiches projet */
.fiches{display:flex;flex-direction:column;gap:22px}
.fiche{display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);
 background:var(--papier);border:1px solid var(--trait);border-radius:var(--r);
 overflow:hidden;box-shadow:var(--ombre)}
.fiche-media{position:relative;background:var(--sable)}
.fiche-img{width:100%;height:100%;object-fit:cover;min-height:230px}
.fiche-corps{padding:clamp(22px,3vw,34px)}
.fiche-corps h3{font-size:clamp(1.15rem,2.1vw,1.5rem);margin:0 0 .7rem}
.fiche-corps p.just{color:var(--support);font-size:.96rem}
/* ---------------------------------------------------------------------------
   LE LIEU, POSE COMME UNE LEGENDE DE PHOTOGRAPHIE DOCUMENTAIRE.
   La fiche a perdu son tableau de reference le 16/08/2026 : plus de numero, plus
   de bailleur, plus de plaque. Il reste l'emplacement, l'image et un chapeau.
   Avec moins de matiere, chaque element restant doit porter davantage -- d'ou
   ce lieu en chasse fixe, precede de son reperage, sur un trait ocre.
   --------------------------------------------------------------------------- */
.lieu{display:flex;align-items:center;gap:7px;margin:0 0 .55rem;
 font:600 .74rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;
 color:var(--terre-texte)}
.ic-lieu{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;
 stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* Le texte se centre dans sa colonne. Sans cela, une fiche au chapeau court
   laisse un grand vide sous elle : vu a l'oeil le 16/08/2026 sur la fiche
   « Ecole integree », dont l'image est plus haute que le texte. */
.fiche-corps{position:relative;display:flex;flex-direction:column;justify-content:center}
.fiche-corps::before{content:"";position:absolute;inset-block-start:50%;transform:translateY(-50%);
 inset-inline-start:0;width:3px;height:46px;background:var(--ocre);border-radius:0 3px 3px 0}
[dir=rtl] .fiche-corps::before{border-radius:3px 0 0 3px}
@media (max-width:760px){.fiche{grid-template-columns:1fr}.fiche-img{min-height:210px;max-height:320px}}

/* ------------------------------------------------- domaine SANS photographie
   Aucune image disponible pour ce domaine, et aucune photo de banque d'images
   ne viendra combler le trou. Le bloc assume son absence d'image : icone large,
   texte centre, largeur reduite. Il rythme la page au lieu de la casser. */
.dom-t{max-width:760px;margin:0 auto;text-align:center;
 padding:clamp(34px,5vw,58px) 20px;border-bottom:1px solid var(--trait)}
.dom-t-ic{width:44px;height:44px;fill:none;stroke:var(--terre);stroke-width:1.4;
 stroke-linecap:round;stroke-linejoin:round;margin:0 auto .9rem;display:block}
.dom-t h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:0 0 .6rem}
.dom-t p{color:var(--support);text-align:center}
.dom-t .sur{justify-content:center}

/* ------------------------------------------------- ou nous sommes */
.loc{display:grid;grid-template-columns:minmax(240px,32%) 1fr;gap:clamp(20px,3.5vw,44px);
 align-items:start}
.loc-siege{position:relative;background:rgba(255,255,255,.07);
 border:1px solid rgba(233,201,142,.26);border-radius:14px;padding:24px;overflow:hidden}
.loc-adr{font-family:var(--serif);font-size:1.22rem;line-height:1.5;color:#fff;margin:0}
.loc-carte{position:absolute;inset-block-end:-26px;inset-inline-end:-26px;width:150px;
 opacity:.13;pointer-events:none}
.loc-liste{display:grid;gap:10px}
.loc-l{display:grid;grid-template-columns:minmax(110px,22%) minmax(90px,18%) 1fr;gap:14px;
 align-items:baseline;padding:.8rem 1rem;border:1px solid rgba(233,201,142,.2);
 border-radius:10px;background:rgba(255,255,255,.04)}
.loc-l b{font-family:var(--serif);font-size:1.08rem;color:#fff}
.loc-l span{font:600 .7rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;
 color:var(--ocre-clair)}
.loc-l i{font-style:normal;font-size:.9rem;color:var(--sable)}
@media (max-width:820px){.loc{grid-template-columns:1fr}}
@media (max-width:520px){.loc-l{grid-template-columns:1fr;gap:2px}}

/* ---------------------------------------------------------------- village */
.vil{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin:0 0 34px}
.vil-c{background:rgba(255,255,255,.07);border:1px solid rgba(233,201,142,.26);
 border-radius:12px;padding:18px 14px;text-align:center}
.vil-c b{display:block;font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.1rem);
 color:var(--ocre-clair);line-height:1;font-variant-numeric:tabular-nums}
.vil-c span{display:block;font-size:.76rem;color:var(--sable);margin-top:.4rem}
.vil-img img{border-radius:var(--r)}
@media (max-width:900px){.vil{grid-template-columns:repeat(3,1fr)}}
@media (max-width:460px){.vil{grid-template-columns:repeat(2,1fr)}}

/* ---------------------------------------------------------------- bailleurs, galerie */
.bail{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,4vw,48px);align-items:center}
.bail p{color:var(--support)}
.bail-img img{border-radius:var(--r);box-shadow:var(--ombre)}
@media (max-width:820px){.bail{grid-template-columns:1fr}}
.galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.galerie figure{margin:0}
.galerie img{border-radius:var(--r);box-shadow:var(--ombre);aspect-ratio:4/3;object-fit:cover;width:100%}
.galerie figcaption{font-size:.84rem;color:var(--support);margin-top:.55rem}
@media (max-width:820px){.galerie{grid-template-columns:repeat(2,1fr)}}
@media (max-width:500px){.galerie{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- cartes, dons, formulaire */
.carte{background:var(--papier);border:1px solid var(--trait);border-radius:var(--r);
 padding:clamp(22px,3vw,34px);box-shadow:var(--ombre);margin:0 0 20px}
.carte h2{font-size:1.28rem;margin:0 0 .8rem}
.carte h2+h2{margin-top:1.6rem}
.carte-logo{display:flex;justify-content:center;background:#F4EDE4}
.carte-logo img{width:min(240px,60%);height:auto}
.note{font-size:.85rem;color:var(--support);margin:1rem 0 0;font-style:italic}
.obj{margin:0;padding-inline-start:1.3rem;color:var(--support)}
.obj li{margin:0 0 .55rem}
.tels{display:flex;flex-direction:column;gap:.2rem}
.tels a{text-decoration:none;font-variant-numeric:tabular-nums}
.reserve{color:var(--support);background:#F4EDE4;border:1px dashed var(--ocre);
 border-radius:10px;padding:.7rem .9rem;font-size:.92rem}
.dons{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.don{background:var(--papier);border:1px solid var(--trait);border-radius:var(--r);
 padding:26px 24px;box-shadow:var(--ombre);border-top:3px solid var(--ocre)}
.don h3{font-size:1.2rem;margin:0 0 .5rem;color:var(--terre-texte)}
.don p{font-size:.94rem;color:var(--support);margin:0}
@media (max-width:900px){.dons{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.dons{grid-template-columns:1fr}}
.deux-col{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
@media (max-width:820px){.deux-col{grid-template-columns:1fr}}
form label{display:block;margin:0 0 .95rem;font-size:.86rem;letter-spacing:.04em;
 text-transform:uppercase;color:var(--support)}
form input,form textarea{display:block;width:100%;margin-top:.35rem;padding:.72rem .85rem;
 border:1px solid var(--trait);border-radius:10px;background:var(--creme);
 font:400 1rem/1.5 var(--sans);color:var(--encre)}
form input:focus,form textarea:focus{border-color:var(--terre);background:var(--papier)}
form button{margin-top:.4rem;cursor:pointer;font-family:var(--sans)}

/* ---------------------------------------------------------------- pied */
.pied{background:var(--terre-nuit);color:var(--sable);padding:clamp(44px,6vw,68px) 0 0}
.pied-in{max-width:var(--max);margin:0 auto;padding:0 20px;display:grid;
 grid-template-columns:auto 1fr;gap:clamp(24px,4vw,54px);align-items:start}
.pastille{display:inline-flex;background:var(--creme);border-radius:16px;padding:14px}
.pastille img{width:96px;height:auto}
.pied-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.pied-cols h3{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
 color:var(--ocre-clair);margin:0 0 .7rem}
.pied-cols p{font-size:.9rem;margin:0 0 .3rem;color:var(--sable)}
.pied-bas{max-width:var(--max);margin:clamp(30px,4vw,44px) auto 0;padding:20px;
 border-top:1px solid rgba(233,201,142,.22);display:flex;justify-content:space-between;
 gap:16px;flex-wrap:wrap}
.pied-bas p{font-size:.82rem;color:var(--sable);margin:0;max-width:64ch}
.credit a{color:var(--ocre-clair);text-decoration:underline;text-underline-offset:3px}
.credit a:hover{color:#fff}
@media (max-width:900px){.pied-in{grid-template-columns:1fr}.pied-cols{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.pied-cols{grid-template-columns:1fr}}

.sec-404{min-height:56vh;display:flex;align-items:center}

/* ---------------------------------------------------------------- animation
   REGLE FERME, ET ELLE VIENT D'UNE ERREUR DEJA PAYEE DEUX FOIS :
   le contenu est VISIBLE PAR DEFAUT. Aucune regle ci-dessous ne cache quoi que
   ce soit. GSAP anime avec gsap.from() : l'etat FINAL est l'etat du CSS, donc
   sans JavaScript, sans GSAP, ou si le script echoue, la page reste complete.
   Et tout est desarme si l'utilisateur demande moins de mouvement. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}