/* ============================================================
   SALON DU LIVRE FÉMININ DE DAKAR — 5e édition
   Identité : violet du logo, magenta des affiches, kaolin, or.
   ============================================================ */

:root{
  /* --- Palette de marque --- */
  --violet:        #5B2A86;
  --violet-clair:  #7B4BA8;
  --violet-fonce:  #3A1358;
  --magenta:       #B3197A;
  --or:            #C08A2B;
  --kaolin:        #F6EFE0;
  --encre:         #221031;

  /* --- Jetons de thème (clair par défaut) --- */
  --fond:          #FAF5EA;
  --fond-2:        #F1E7D4;
  --surface:       #FFFDF8;
  --texte:         #2A1638;
  --texte-doux:    #6A5573;
  --trait:         #E0D2BC;
  --accent:        var(--violet);
  --accent-2:      var(--magenta);
  --dore:          var(--or);
  --sombre-fond:   #1B0B28;
  --sombre-texte:  #F3E9DC;
  --ombre:         0 1px 2px rgba(34,16,49,.06), 0 8px 28px rgba(34,16,49,.07);
  --ombre-forte:   0 18px 50px rgba(58,19,88,.20);
  --verre:         rgba(250,245,234,.78);

  /* --- Type --- */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Hoefler Text", Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- Échelle --- */
  --pas: clamp(1rem, .6rem + 1.6vw, 1.6rem);
  --marge: clamp(1.25rem, 5vw, 5.5rem);
  --max: 1240px;
}

@media (prefers-color-scheme: dark){
  :root{
    --fond:        #150920;
    --fond-2:      #1E0E2C;
    --surface:     #241134;
    --texte:       #F1E6DA;
    --texte-doux:  #B9A6C6;
    --trait:       #3B2350;
    --accent:      #B98CE0;
    --accent-2:    #EE6BB4;
    --dore:        #E0B65E;
    --sombre-fond: #0F0518;
    --ombre:       0 1px 2px rgba(0,0,0,.5), 0 10px 34px rgba(0,0,0,.45);
    --ombre-forte: 0 20px 56px rgba(0,0,0,.6);
    --verre:       rgba(21,9,32,.76);
  }
}
:root[data-theme="dark"]{
  --fond:        #150920;
  --fond-2:      #1E0E2C;
  --surface:     #241134;
  --texte:       #F1E6DA;
  --texte-doux:  #B9A6C6;
  --trait:       #3B2350;
  --accent:      #B98CE0;
  --accent-2:    #EE6BB4;
  --dore:        #E0B65E;
  --sombre-fond: #0F0518;
  --ombre:       0 1px 2px rgba(0,0,0,.5), 0 10px 34px rgba(0,0,0,.45);
  --ombre-forte: 0 20px 56px rgba(0,0,0,.6);
  --verre:       rgba(21,9,32,.76);
}
:root[data-theme="light"]{
  --fond:        #FAF5EA;
  --fond-2:      #F1E7D4;
  --surface:     #FFFDF8;
  --texte:       #2A1638;
  --texte-doux:  #6A5573;
  --trait:       #E0D2BC;
  --accent:      var(--violet);
  --accent-2:    var(--magenta);
  --dore:        var(--or);
  --sombre-fond: #1B0B28;
  --ombre:       0 1px 2px rgba(34,16,49,.06), 0 8px 28px rgba(34,16,49,.07);
  --ombre-forte: 0 18px 50px rgba(58,19,88,.20);
  --verre:       rgba(250,245,234,.78);
}

*, *::before, *::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--fond);
  color:var(--texte);
  font-family:var(--sans);
  font-size:clamp(1rem, .96rem + .18vw, 1.075rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; text-wrap:balance; margin:0; line-height:1.08; letter-spacing:-.012em; }
p{ margin:0; }
a{ color:inherit; }
img,svg{ max-width:100%; }

::selection{ background:var(--accent-2); color:#fff; }

:where(a,button,input,summary):focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:3px;
  border-radius:3px;
}

.enveloppe{ max-width:var(--max); margin-inline:auto; padding-inline:var(--marge); }

/* Étiquette : petite capitale filetée — répétée partout comme signature */
.etiquette{
  font-family:var(--sans);
  font-size:.68rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-2);
  display:inline-flex; align-items:center; gap:.7em;
}
.etiquette::before{
  content:""; width:1.9rem; height:2px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* ===================== LOGO ===================== */
.logo{ display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.logo svg{ display:block; flex:none; }
.logo-mot{ line-height:1.05; }
.logo-mot b{
  display:block; font-family:var(--sans); font-weight:800;
  font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--texte);
}
.logo-mot span{
  display:block; font-family:var(--sans); font-weight:600;
  font-size:.55rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--accent); margin-top:.18rem;
}

/* ===================== NAVIGATION ===================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:80;
  transform:translateY(-102%);
  transition:transform .45s cubic-bezier(.22,1,.36,1);
  background:var(--verre);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  backdrop-filter:blur(18px) saturate(180%);
  border-bottom:1px solid var(--trait);
}
.nav.visible{ transform:translateY(0); }
.nav-int{
  max-width:var(--max); margin-inline:auto;
  padding:.75rem var(--marge);
  display:flex; align-items:center; gap:1.5rem;
}
.nav-liens{ margin-left:auto; display:flex; gap:1.6rem; }
.nav-liens a{
  text-decoration:none; font-size:.82rem; font-weight:600;
  letter-spacing:.03em; color:var(--texte-doux);
  position:relative; padding-block:.25rem;
  transition:color .2s;
}
.nav-liens a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--accent-2); transition:width .28s ease;
}
.nav-liens a:hover{ color:var(--texte); }
.nav-liens a:hover::after{ width:100%; }
.nav-cta{
  background:var(--accent); color:#fff; text-decoration:none;
  font-size:.78rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:.6rem 1.1rem; border-radius:2px; white-space:nowrap;
  transition:background .2s, transform .2s;
}
.nav-cta:hover{ background:var(--accent-2); transform:translateY(-1px); }
.theme-bascule{
  border:1px solid var(--trait); background:transparent; color:var(--texte-doux);
  width:2.1rem; height:2.1rem; border-radius:50%; cursor:pointer;
  font-size:.9rem; line-height:1; display:grid; place-items:center;
  transition:border-color .2s, color .2s;
}
.theme-bascule:hover{ border-color:var(--accent); color:var(--accent); }
@media (max-width:860px){ .nav-liens{ display:none; } }

/* ===================== BANDEAU MAQUETTE ===================== */
.bandeau{
  background:linear-gradient(90deg, #2A0E40 0%, var(--violet-fonce) 50%, #2A0E40 100%);
  border-bottom:1px solid rgba(192,138,43,.4);
  color:#E9D7C6; text-align:center;
  padding:.55rem 1rem;
  font-size:.63rem; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase;
  line-height:1.5;
}
.bandeau b{ color:var(--or); font-weight:700; }
.bandeau span{ opacity:.78; font-weight:500; letter-spacing:.12em; }

/* ===================== HÉRO ===================== */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:6rem 0 3rem;
  background:
    radial-gradient(120% 90% at 82% 8%,  rgba(179,25,122,.30) 0%, transparent 58%),
    radial-gradient(100% 80% at 8% 96%,  rgba(192,138,43,.22) 0%, transparent 60%),
    linear-gradient(168deg, #4A1E72 0%, #33124F 46%, #1F0A31 100%);
  color:#F6EFE0;
  overflow:hidden;
}
/* Trame « matrimoine » : fils tissés en SVG */
.hero-trame{
  position:absolute; inset:0; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23F6EFE0' stroke-opacity='.10' stroke-width='1'%3E%3Cpath d='M0 36h72M36 0v72'/%3E%3Cpath d='M0 0l72 72M72 0L0 72' stroke-opacity='.05'/%3E%3Ccircle cx='36' cy='36' r='11'/%3E%3C/g%3E%3C/svg%3E");
  mask-image:radial-gradient(80% 70% at 50% 45%, #000 10%, transparent 82%);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 45%, #000 10%, transparent 82%);
}
/* Chiffre V fantôme — la 5e édition */
.hero-chiffre{
  position:absolute; right:-2vw; top:44%; transform:translateY(-50%);
  font-family:var(--serif); font-size:min(62vh, 46vw); line-height:.8;
  color:transparent; -webkit-text-stroke:1.5px rgba(246,239,224,.09);
  pointer-events:none; user-select:none;
}
.hero-int{ position:relative; z-index:2; }

.hero-haut{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap; margin-bottom:clamp(2rem,6vh,4rem);
}
.hero .logo-mot b{ color:#F6EFE0; }
.hero .logo-mot span{ color:#E9B8D6; }
.icone-drapeau{ width:1.15rem; height:auto; border-radius:1px; flex:none; }
.hero-pays{
  display:inline-flex; align-items:center; gap:.6rem;
  border:1px solid rgba(246,239,224,.28); border-radius:100px;
  padding:.42rem 1rem; font-size:.74rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:#F0DCEA;
  background:rgba(246,239,224,.06);
}

.hero-edition{
  font-family:var(--sans); font-size:.72rem; font-weight:700;
  letter-spacing:.28em; text-transform:uppercase; color:#E7A9CE;
  display:block; margin-bottom:1.4rem;
}
.hero h1{
  font-size:clamp(2.9rem, 1.4rem + 7.4vw, 7.2rem);
  letter-spacing:-.028em; margin-bottom:1.5rem;
  max-width:16ch;
}
.hero h1 em{
  font-style:italic; color:#F0C9E2;
  display:block;
}
.theme-accroche{ display:block; font-style:normal; font-weight:600; color:#F6EFE0; margin-bottom:.45rem; }
.portrait-photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:62% 28%;
}
/* Voile dégradé : garantit la lisibilité du nom quelle que soit la photo. */
.portrait-voile{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(30,10,45,0) 38%, rgba(30,10,45,.55) 66%, rgba(24,8,38,.92) 100%);
}
.portrait-credit{
  position:absolute; left:1.8rem; right:1.8rem; bottom:.85rem; z-index:3;
  font-size:.58rem; font-weight:400; letter-spacing:.01em;
  text-transform:none; color:rgba(246,239,224,.55);
  text-align:left; line-height:1.4;
}
.portrait-credit a{ color:inherit; text-decoration:underline; text-underline-offset:2px; position:relative; }
/* Le crédit doit rester discret : un texte plus gros concurrencerait le nom.
   Une zone tactile invisible porte la cible à 44 px sans rien déplacer. */
.portrait-credit a::after{
  content:""; position:absolute; left:-.6rem; right:-.6rem;
  top:50%; transform:translateY(-50%); min-height:44px; height:100%;
}
.portrait-legende{ position:relative; z-index:2; margin-top:auto; }
figure.portrait{ margin:0; justify-content:flex-end; }
.portrait-legende{ padding-bottom:1.1rem; }
.hero-theme{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.15rem, .9rem + 1vw, 1.7rem);
  color:#EBD9C6; max-width:34ch; line-height:1.35;
  padding-left:1.1rem; border-left:2px solid var(--or);
  margin-bottom:2.2rem;
}
.hero-lieu{
  display:flex; flex-wrap:wrap; gap:.6rem 2rem;
  font-size:.95rem; color:#E5D3C4; margin-bottom:2.4rem;
}
.hero-lieu strong{ color:#F6EFE0; font-weight:600; }

/* Compte à rebours */
.rebours{ display:flex; gap:.55rem; flex-wrap:wrap; margin-bottom:2.4rem; }
.rebours-case{
  min-width:5.2rem; padding:.75rem .6rem .6rem;
  background:rgba(246,239,224,.07);
  border:1px solid rgba(246,239,224,.16);
  border-radius:3px; text-align:center;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.rebours-case b{
  display:block; font-family:var(--serif); font-weight:600;
  font-size:2rem; line-height:1; color:#F6EFE0;
  font-variant-numeric:tabular-nums;
}
.rebours-case span{
  display:block; margin-top:.35rem; font-size:.6rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:#D2A9C6;
}

.hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:clamp(2.5rem,7vh,4rem); }
.bouton{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.7rem; border-radius:2px; text-decoration:none;
  font-size:.8rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  border:1px solid transparent; cursor:pointer;
  transition:transform .22s cubic-bezier(.22,1,.36,1), background .22s, color .22s, border-color .22s;
}
.bouton:hover{ transform:translateY(-2px); }
.bouton-plein{ background:#F6EFE0; color:#3A1358; }
.bouton-plein:hover{ background:var(--or); color:#241033; }
.bouton-vide{ border-color:rgba(246,239,224,.4); color:#F6EFE0; background:transparent; }
.bouton-vide:hover{ border-color:#F6EFE0; background:rgba(246,239,224,.1); }

/* Chiffres clés */
.chiffres{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr));
  border-top:1px solid rgba(246,239,224,.2);
}
.chiffre{ padding:1.4rem 1.4rem 0 0; }
.chiffre b{
  display:block; font-family:var(--serif); font-weight:600;
  font-size:clamp(2rem,1.4rem + 1.8vw,2.9rem); line-height:1;
  color:#F6EFE0; font-variant-numeric:tabular-nums;
}
.chiffre span{
  display:block; margin-top:.4rem; font-size:.72rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:#C9A5BE;
}

/* ===================== SECTIONS ===================== */
.section{ padding:clamp(4rem, 9vh, 7.5rem) 0; }
.section-alt{ background:var(--fond-2); }

/* Grille « gouttière » : titre à gauche, contenu à droite */
.gouttiere{
  display:grid; grid-template-columns:minmax(220px, 340px) 1fr;
  gap:clamp(1.8rem, 4vw, 4.5rem);
  align-items:start;
}
/* Sans min-width:0, un element de grille refuse de devenir plus etroit que
   son contenu : un mot long deborde alors dans la colonne voisine. */
.gouttiere > *{ min-width:0; }
@media (max-width:820px){ .gouttiere{ grid-template-columns:1fr; } }

.tete{ position:sticky; top:5.5rem; }
@media (max-width:820px){ .tete{ position:static; } }
.tete h2{
  /* La colonne fait 340 px au plus, moins 17,6 px de retrait : 322 px utiles.
     Le mot le plus long du site, « representativeness » sur les pages
     anglaises, mesure 294 px a 2,05 rem dans cette police. Il tient donc
     sans jamais etre coupe. La cesure automatique est ecartee : couper un
     titre d'affiche au milieu d'un mot se lit comme une faute.
     break-word ne sert que de filet, il ne se declenche pas. */
  hyphens:manual; overflow-wrap:break-word;
  font-size:clamp(1.7rem, 1.15rem + 1.3vw, 2.05rem);
  margin:.9rem 0 1rem;
  padding-left:1.1rem;
  border-left:3px solid var(--accent);
}
.tete p{ color:var(--texte-doux); font-size:.95rem; padding-left:1.1rem; }

/* ===================== INVITÉE D'HONNEUR ===================== */
.honneur{
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(1.5rem,4vw,3.5rem); align-items:start;
}
@media (max-width:820px){ .honneur{ grid-template-columns:1fr; } }
.portrait{
  position:sticky; top:5.5rem;
  aspect-ratio:3/3.9; border-radius:3px; overflow:hidden;
  background:
    radial-gradient(70% 60% at 30% 22%, rgba(240,201,226,.35), transparent 62%),
    linear-gradient(150deg, var(--violet) 0%, var(--violet-fonce) 62%, #1D0A2E 100%);
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:1.8rem; color:#F6EFE0;
}
.portrait::before{
  content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20h40M20 0v40' stroke='%23F6EFE0' stroke-opacity='.07'/%3E%3C/svg%3E");
}
/* Les initiales fantômes occupent le haut et repoussent le nom vers le bas :
   aucun risque de chevauchement, quelle que soit la taille du bloc. */
.portrait-initiales{
  position:relative; margin-bottom:auto; align-self:flex-start;
  font-family:var(--serif); font-size:clamp(3rem,6vw,5rem); line-height:.85;
  color:transparent; -webkit-text-stroke:2px rgba(246,239,224,.5);
  text-shadow:0 0 40px rgba(240,201,226,.25);
}
@supports not (-webkit-text-stroke: 1px black){
  .portrait-initiales{ color:rgba(246,239,224,.28); }
}
.portrait b{ position:relative; font-family:var(--serif); font-size:1.9rem; font-weight:600; display:block; }
.portrait > b, .portrait-legende b{ position:relative; }
.portrait-legende span, .portrait > span:not([class]){ position:relative; display:block; margin-top:.4rem; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:#DDB4CE; }

.honneur-texte h3{ font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem); margin-bottom:1rem; }
.honneur-texte p + p{ margin-top:1rem; }
.honneur-texte p{ color:var(--texte-doux); max-width:62ch; }
.oeuvres{
  list-style:none; margin:1.6rem 0 0; padding:0;
  display:grid; gap:.1rem;
  border-top:1px solid var(--trait);
}
.oeuvres li{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.65rem 0; border-bottom:1px solid var(--trait);
  font-size:.9rem;
}
.oeuvres li i{ font-style:italic; font-family:var(--serif); font-size:1.05rem; }
.oeuvres li i small{ font-family:var(--sans); font-style:normal; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--texte-doux); margin-left:.45rem; }
.oeuvres li em{ font-style:normal; color:var(--texte-doux); font-size:.78rem; letter-spacing:.06em; white-space:nowrap; font-variant-numeric:tabular-nums; }

/* ===================== PROGRAMME ===================== */
.filtres{ display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1.8rem; }
.puce{
  border:1px solid var(--trait); background:transparent; color:var(--texte-doux);
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  padding:.45rem .95rem; border-radius:100px; cursor:pointer;
  transition:background .2s, color .2s, border-color .2s;
}
.puce:hover{ border-color:var(--accent); color:var(--accent); }
.puce[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:#fff; }

.grille-prog{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:1rem; }
.carte{
  position:relative; background:var(--surface);
  border:1px solid var(--trait); border-radius:3px;
  padding:1.5rem 1.5rem 1.5rem 1.75rem;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .3s;
}
.carte::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  transform:scaleY(0); transform-origin:top;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.carte:hover{ transform:translateY(-4px); box-shadow:var(--ombre); border-color:transparent; }
.carte:hover::before{ transform:scaleY(1); }
.carte-haut{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.7rem; }
.carte-heure{
  font-family:var(--sans); font-size:.78rem; font-weight:700;
  letter-spacing:.08em; color:var(--accent-2); font-variant-numeric:tabular-nums;
}
.carte-jour{ font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--texte-doux); }
.carte h3{ font-size:1.28rem; margin-bottom:.55rem; }
.carte p{ font-size:.88rem; color:var(--texte-doux); margin-bottom:1rem; }
.tag{
  display:inline-block; font-size:.62rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.3rem .6rem; border-radius:2px;
}
.t-inauguration{ background:rgba(192,138,43,.15);  color:var(--dore); }
.t-rencontre   { background:rgba(91,42,134,.14);   color:var(--accent); }
.t-atelier     { background:rgba(179,25,122,.12);  color:var(--accent-2); }
.t-debat       { background:rgba(43,110,110,.14);  color:#2B7A72; }
.t-poesie      { background:rgba(160,60,140,.13);  color:#9A3F8C; }
.t-jeunesse    { background:rgba(198,90,40,.14);   color:#C05A28; }
@media (prefers-color-scheme: dark){
  .t-debat{ color:#63C6BB; } .t-poesie{ color:#E48CD4; } .t-jeunesse{ color:#EE9668; }
}
:root[data-theme="dark"] .t-debat{ color:#63C6BB; }
:root[data-theme="dark"] .t-poesie{ color:#E48CD4; }
:root[data-theme="dark"] .t-jeunesse{ color:#EE9668; }

.vide-msg{ color:var(--texte-doux); font-style:italic; padding:2rem 0; }

/* ===================== AUTRICES (défilé) ===================== */
.defile{ padding:clamp(3rem,7vh,5rem) 0; background:var(--fond); overflow:hidden; }
.defile-entete{ max-width:var(--max); margin:0 auto 2.2rem; padding-inline:var(--marge); }
.defile-entete h2{ font-size:clamp(1.8rem,1.4rem + 1.8vw,2.7rem); margin-top:.8rem; }
.piste{
  display:flex; gap:.9rem; width:max-content;
  animation:glisser 52s linear infinite;
}
.piste-2{ animation-duration:64s; animation-direction:reverse; margin-top:.9rem; }
.defile:hover .piste{ animation-play-state:paused; }
@keyframes glisser{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.autrice{
  display:flex; align-items:center; gap:.85rem;
  background:var(--surface); border:1px solid var(--trait);
  border-radius:100px; padding:.55rem 1.3rem .55rem .55rem;
  white-space:nowrap; flex:none;
  transition:border-color .25s, transform .25s;
}
.autrice:hover{ border-color:var(--accent); transform:translateY(-2px); }
.pastille{
  width:2.5rem; height:2.5rem; border-radius:50%; flex:none;
  display:grid; place-items:center;
  font-family:var(--serif); font-size:.92rem; font-weight:600; color:#F6EFE0;
  background:linear-gradient(140deg, var(--violet), var(--magenta));
}
.autrice.mali .pastille{ background:linear-gradient(140deg, #0E7A3C, #C08A2B 55%, #B3197A); }
.autrice-txt{ display:block; }
.autrice-txt b{ display:block; font-family:var(--serif); font-size:1.06rem; font-weight:600; line-height:1.2; }
.autrice-txt i{ display:block; font-style:normal; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--texte-doux); }

/* ===================== LIVRES ===================== */
.grille-livres{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:clamp(1.2rem,2.5vw,2rem); }
.livre{ perspective:1000px; }
.livre-obj{
  position:relative; aspect-ratio:1/1.48; border-radius:2px 5px 5px 2px;
  padding:1.4rem 1.1rem 1.1rem 1.6rem;
  display:flex; flex-direction:column;
  color:#F6EFE0; overflow:hidden;
  box-shadow:var(--ombre);
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s;
}
.livre:hover .livre-obj{ transform:translateY(-10px) rotateY(-13deg) rotateX(3deg); box-shadow:var(--ombre-forte); }
/* Vraie couverture fournie par l'éditeur : même géométrie, même survol que la
   couverture stylisée, pour que les deux puissent cohabiter dans la grille. */
.livre-couv{
  /* display:block — hérité de .livre-obj, `flex` ferait mettre en page le
     texte alternatif comme un conteneur flex si l'image ne charge pas. */
  display:block; padding:0; width:100%; height:auto;
  object-fit:cover; background:var(--fond-2);
}
/* dos du livre */
.livre-obj::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:11px;
  background:linear-gradient(90deg, rgba(0,0,0,.42), rgba(255,255,255,.16) 55%, rgba(0,0,0,.22));
}
/* filet doré */
.livre-obj::after{
  content:""; position:absolute; left:1.6rem; right:1.1rem; top:1.1rem; height:1px;
  background:rgba(246,239,224,.4);
}
.livre-obj b{ font-family:var(--serif); font-size:1.22rem; font-weight:600; line-height:1.18; margin-top:.6rem; }
.livre-obj i{ font-style:normal; margin-top:auto; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; opacity:.82; }
.livre-obj em{ font-style:italic; font-family:var(--serif); font-size:.9rem; opacity:.9; margin-top:.35rem; display:block; }
.c1{ background:linear-gradient(155deg,#5B2A86,#2E0F47); }
.c2{ background:linear-gradient(155deg,#B3197A,#5A0C3E); }
.c3{ background:linear-gradient(155deg,#0E6B4F,#0A3A2B); }
.c4{ background:linear-gradient(155deg,#C08A2B,#6B4310); }
.c5{ background:linear-gradient(155deg,#8E2F5B,#3B0F26); }
.c6{ background:linear-gradient(155deg,#2C4C86,#131F3D); }
.c7{ background:linear-gradient(155deg,#A8442A,#4A1810); }
.c8{ background:linear-gradient(155deg,#4A2A6B,#7B1E5C); }
.livre-pied{ display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; margin-top:.85rem; }
.livre-pied b{ font-family:var(--serif); font-size:1.02rem; font-weight:600; }
.livre-pied span{ font-size:.76rem; color:var(--texte-doux); }
.prix{
  font-family:var(--sans); font-size:.82rem; font-weight:700;
  color:var(--accent-2); font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* ===================== INFOS PRATIQUES ===================== */
.pratique{
  background:var(--sombre-fond); color:#F1E6DA;
  padding:clamp(4rem,9vh,7rem) 0;
  position:relative; overflow:hidden;
}
.pratique::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(90% 70% at 88% 6%, rgba(179,25,122,.25), transparent 60%);
}
.pratique .enveloppe{ position:relative; }
.pratique h2{ font-size:clamp(1.9rem,1.4rem + 2vw,3rem); margin:.9rem 0 2.6rem; max-width:18ch; }
.grille-infos{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:1px; background:rgba(246,239,224,.16); border:1px solid rgba(246,239,224,.16); }
.info{
  background:var(--sombre-fond); padding:1.9rem 1.5rem;
  transition:background .3s;
}
.info:hover{ background:rgba(246,239,224,.05); }
.info-icone{
  display:block; width:2rem; height:2rem; margin-bottom:1rem;
  color:var(--dore);
  stroke:currentColor; fill:none;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.info:hover .info-icone{ color:var(--accent-2); transition:color .3s; }
.icone-ligne{
  width:1em; height:1em; vertical-align:-.14em; margin:0 .12em;
  stroke:currentColor; fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; color:var(--dore);
}
.info h3{ font-size:1.18rem; margin-bottom:.7rem; }
.info p{ font-size:.88rem; color:#C4B0BE; }
.info p strong{ color:#F1E6DA; font-weight:600; }
.info p + p{ margin-top:.45rem; }

/* ===================== INFOLETTRE ===================== */
.infolettre{
  background:linear-gradient(115deg, var(--magenta) 0%, #8C1266 55%, var(--violet) 100%);
  color:#F6EFE0; padding:clamp(3.5rem,8vh,6rem) 0;
}
.infolettre-grille{ display:grid; grid-template-columns:1fr minmax(300px,.85fr); gap:clamp(1.6rem,4vw,4rem); align-items:center; }
@media (max-width:820px){ .infolettre-grille{ grid-template-columns:1fr; } }
.infolettre h2{ font-size:clamp(1.8rem,1.4rem + 2vw,2.9rem); margin-bottom:.8rem; max-width:20ch; }
.infolettre p{ color:#F0D9E7; font-size:.95rem; max-width:46ch; }
.forme{ display:flex; gap:.5rem; flex-wrap:wrap; }
.forme input{
  flex:1 1 200px; min-width:0;
  background:rgba(246,239,224,.12); border:1px solid rgba(246,239,224,.4);
  border-radius:2px; padding:.9rem 1.1rem; color:#F6EFE0;
  font-family:var(--sans); font-size:.92rem;
}
.forme input::placeholder{ color:rgba(246,239,224,.6); }
.forme input:focus{ background:rgba(246,239,224,.2); outline:none; border-color:#F6EFE0; }
.forme button{ background:#F6EFE0; color:#8C1266; border:none; }
.forme button:hover{ background:var(--or); color:#241033; }
.forme-note{ font-size:.74rem; color:#EBC6DE; margin-top:.8rem; }
.merci{ font-family:var(--serif); font-style:italic; font-size:1.1rem; color:#F6EFE0; }

/* ===================== PIED ===================== */
.pied{ background:var(--fond); padding:clamp(3rem,6vh,4.5rem) 0 2.5rem; border-top:1px solid var(--trait); }
.pied-grille{ display:grid; grid-template-columns:1.4fr repeat(3, minmax(130px,1fr)); gap:2rem; }
@media (max-width:760px){ .pied-grille{ grid-template-columns:1fr 1fr; } }
.pied h4{ font-family:var(--sans); font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:1rem; }
.pied ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.pied a{ text-decoration:none; font-size:.88rem; color:var(--texte-doux); transition:color .2s; }
.pied a:hover{ color:var(--accent-2); }
.pied-intro{ font-size:.88rem; color:var(--texte-doux); max-width:34ch; margin-top:1rem; }
.pied-bas{
  margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--trait);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font-size:.78rem; color:var(--texte-doux);
}

/* ===================== APPARITION AU DÉFILEMENT =====================
   L'état masqué n'est appliqué que si le JS tourne (classe .js posée par
   le script d'amorce). Sans JS, tout le contenu reste visible. */
.js .reveler{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.js .reveler.vu{ opacity:1; transform:none; }

/* Séquence d'ouverture */
.entree{ opacity:0; transform:translateY(20px); animation:monter .9s cubic-bezier(.22,1,.36,1) forwards; }
.d1{ animation-delay:.10s } .d2{ animation-delay:.20s } .d3{ animation-delay:.30s }
.d4{ animation-delay:.40s } .d5{ animation-delay:.50s } .d6{ animation-delay:.60s } .d7{ animation-delay:.70s }
@keyframes monter{ to{ opacity:1; transform:none; } }

/* ===================== PAGE D'ACCUEIL =====================
   Réutilise les jetons de la charte : violet, magenta, or, kaolin. */

.hero-accueil{ min-height:auto; padding:clamp(7rem,16vh,11rem) 0 clamp(4rem,9vh,6rem); }
.hero-accueil h1{ font-size:clamp(2.6rem,1.2rem + 6.4vw,6rem); max-width:14ch; }
.hero-accueil .hero-theme{
  font-style:normal; font-family:var(--sans);
  font-size:clamp(1rem,.94rem + .35vw,1.18rem); max-width:56ch;
  border-left-color:rgba(246,239,224,.35);
}
/* La marque en très grand, en filigrane : rappelle le logo sans le répéter. */
.hero-marque{
  position:absolute; right:-4vw; bottom:-8vh; width:min(52vh,44vw);
  opacity:.07; pointer-events:none;
}
.hero-marque svg{ width:100%; height:auto; fill:#F6EFE0; }

/* --- Titre pleine largeur (sections sans gouttière) --- */
.tete-large{ max-width:52ch; margin-bottom:clamp(2rem,5vh,3.2rem); }
.tete-large h2{
  font-size:clamp(1.9rem,1.4rem + 2.2vw,3rem);
  margin:.9rem 0 .9rem; padding-left:1.1rem;
  border-left:3px solid var(--accent);
}
.tete-large p{ color:var(--texte-doux); padding-left:1.1rem; }

/* --- Prose --- */
.prose{ max-width:64ch; }
.prose p + p{ margin-top:1.1rem; }
.prose p{ color:var(--texte-doux); }
.prose-intro{ font-size:1.1rem; color:var(--texte) !important; }
.prose-titre{ font-size:1.35rem; margin:2rem 0 .9rem; }

.encart{
  margin:2rem 0; padding:1.4rem 1.5rem;
  background:var(--surface); border:1px solid var(--trait);
  border-left:3px solid var(--accent-2); border-radius:3px;
}
.encart p{
  margin-top:.7rem; font-family:var(--serif); font-style:italic;
  font-size:1.15rem; line-height:1.45; color:var(--texte);
}

.liste-filet{ list-style:none; margin:0; padding:0; border-top:1px solid var(--trait); }
.liste-filet li{
  padding:.75rem 0 .75rem 1.4rem; border-bottom:1px solid var(--trait);
  position:relative; font-size:.95rem; color:var(--texte-doux);
}
.liste-filet li::before{
  content:""; position:absolute; left:0; top:1.25rem;
  width:.5rem; height:1px; background:var(--accent-2);
}

/* --- Les trois projets --- */
.grille-projets{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.1rem; }
.projet{
  position:relative; display:flex; flex-direction:column;
  padding:1.9rem 1.6rem 1.6rem; text-decoration:none;
  background:var(--surface); border:1px solid var(--trait); border-radius:3px;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .3s;
}
.projet::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--teinte); transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.projet:hover{ transform:translateY(-5px); box-shadow:var(--ombre); border-color:transparent; }
.projet:hover::before{ transform:scaleX(1); }
.projet-salon{ --teinte:var(--accent-2); }
.projet-symposium{ --teinte:#A62B5C; }
.projet-cffac{ --teinte:#7C5A15; }
.projet-num{ display:block; margin-bottom:1.1rem; }
.projet-icone{
  width:2.1rem; height:2.1rem; display:block;
  stroke:var(--teinte); fill:none; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.projet h3{ font-size:1.4rem; margin-bottom:.7rem; }
.projet p{ font-size:.9rem; color:var(--texte-doux); margin-bottom:1.1rem; }
.projet-meta{
  display:block; margin-top:auto; font-size:.7rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--teinte);
}
.projet-lien{
  display:inline-flex; align-items:center; gap:.45rem; margin-top:1rem;
  font-size:.8rem; font-weight:700; letter-spacing:.05em; color:var(--texte);
}
.projet-lien::after{
  content:""; width:1.1rem; height:1px; background:var(--teinte);
  transition:width .3s ease;
}
.projet:hover .projet-lien::after{ width:1.9rem; }

/* --- Missions --- */
.grille-missions{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px; background:var(--trait); border:1px solid var(--trait); border-radius:3px; overflow:hidden; }
.mission{ background:var(--fond); padding:1.6rem 1.4rem; transition:background .3s; }
.mission:hover{ background:var(--surface); }
.mission h3{ font-size:1.15rem; margin-bottom:.6rem; }
.mission p{ font-size:.88rem; color:var(--texte-doux); }

/* --- Partenaires --- */
.grille-partenaires{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.8rem;
}
.grille-partenaires li{
  padding:1.3rem 1.1rem; text-align:center;
  border:1px dashed var(--trait); border-radius:3px;
  font-size:.85rem; font-weight:600; color:var(--texte-doux);
  transition:border-color .3s, color .3s;
}
.grille-partenaires li:hover{ border-color:var(--accent); color:var(--accent); }

.bouton-accent{
  background:var(--accent); color:#fff; margin-top:1.8rem;
}
.bouton-accent:hover{ background:var(--accent-2); color:#fff; }

.pratique-intro{ color:#C4B0BE; max-width:52ch; margin:-1.6rem 0 2.6rem; }
.pratique .info a{ color:inherit; }
.pratique .info a:hover{ color:var(--dore); }

@media (max-width:560px){
  .hero-accueil{ padding:5rem 0 3rem; }
  .grille-missions{ grid-template-columns:1fr; }
}

/* ===================== PAGES DE PROJET =====================
   Chaque projet garde la charte commune mais reçoit sa propre teinte,
   posée sur <body data-page>. Les composants lisent --accent, donc rien
   d'autre n'a besoin d'être redéfini page par page. */

/* Teintes vérifiées : au moins 4,5 pour 1 sur les trois fonds clairs. */
body[data-page="symposium"]{ --accent:#8E2F6B; --accent-2:#A62B5C; }
body[data-page="cffac"]{ --accent:#6E4A12; --accent-2:#7C5A15; }
@media (prefers-color-scheme: dark){
  body[data-page="symposium"]{ --accent:#E08CB4; --accent-2:#F07FAE; }
  body[data-page="cffac"]{ --accent:#E0B65E; --accent-2:#EBC97E; }
}
:root[data-theme="dark"] body[data-page="symposium"]{ --accent:#E08CB4; --accent-2:#F07FAE; }
:root[data-theme="dark"] body[data-page="cffac"]{ --accent:#E0B65E; --accent-2:#EBC97E; }

.hero-projet{ min-height:auto; padding:clamp(6rem,14vh,9rem) 0 clamp(3.5rem,8vh,5rem); }
.hero-projet h1{ font-size:clamp(2.8rem,1.3rem + 7vw,6.4rem); max-width:12ch; }

/* --- Journées du symposium --- */
.journee{ margin-top:clamp(2rem,5vh,3rem); }
.journee-titre{
  display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap;
  font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem); margin-bottom:1.1rem;
  padding-bottom:.7rem; border-bottom:1px solid var(--trait);
}
.journee-titre span{
  font-family:var(--sans); font-size:.66rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:#fff;
  background:var(--accent); padding:.35rem .7rem; border-radius:2px;
}
.grille-seances{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; }
.seance{
  position:relative; background:var(--surface);
  border:1px solid var(--trait); border-radius:3px;
  padding:1.3rem 1.3rem 1.3rem 1.5rem;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .3s;
}
.seance::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  transform:scaleY(0); transform-origin:top; transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.seance:hover{ transform:translateY(-4px); box-shadow:var(--ombre); border-color:transparent; }
.seance:hover::before{ transform:scaleY(1); }
.seance h3{ font-size:1.15rem; margin-bottom:.5rem; }
.seance p{ font-size:.87rem; color:var(--texte-doux); }

/* --- Formations du CFFAC --- */
.grille-formations{ display:grid; grid-template-columns:repeat(auto-fill,minmax(285px,1fr)); gap:1rem; }
.formation{
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--trait); border-radius:3px;
  padding:1.6rem 1.5rem; border-top:3px solid var(--accent-2);
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.formation:hover{ transform:translateY(-5px); box-shadow:var(--ombre); }
.formation h3{ font-size:1.25rem; margin-bottom:.6rem; }
.formation p{ font-size:.88rem; color:var(--texte-doux); margin-bottom:1rem; }

/* Meta et détail, partagés par les séances et les formations */
.bloc-meta{
  display:inline-block; margin-bottom:.7rem;
  font-family:var(--sans); font-size:.68rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--accent-2);
  font-variant-numeric:tabular-nums;
}
.bloc-detail{
  display:block; margin-top:auto; padding-top:.9rem;
  border-top:1px solid var(--trait);
  font-size:.75rem; color:var(--texte-doux); font-style:italic;
}

/* --- Montant mis en avant dans un encart --- */
.encart p.encart-montant{
  font-family:var(--serif); font-style:normal;
  font-size:clamp(1.7rem,1.4rem + 1.2vw,2.3rem);
  font-weight:600; color:var(--accent);
  font-variant-numeric:tabular-nums; margin-top:.5rem;
}
.encart p.encart-detail{
  font-family:var(--sans); font-style:normal;
  font-size:.87rem; color:var(--texte-doux);
  margin-top:.6rem;
}

@media (max-width:560px){
  .grille-seances, .grille-formations{ grid-template-columns:1fr; }
  .journee-titre{ gap:.6rem; }
}

/* --- Bande de citation ---
   L'épigraphe du symposium mérite sa propre respiration : une bande pleine
   largeur entre le héros et le contexte, sans concurrencer le titre. */
.citation-bande{
  background:var(--fond-2);
  border-block:1px solid var(--trait);
  padding:clamp(2.5rem,6vh,4rem) 0;
}
.citation{
  margin:0; max-width:34ch;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.3rem,1rem + 1.6vw,2.1rem); line-height:1.35;
  color:var(--texte); text-wrap:balance;
  padding-left:1.4rem; border-left:3px solid var(--accent-2);
}

/* Bouton accueil : sur mobile les liens de navigation sont masques,
   il faut donc un retour a l'accueil toujours atteignable. */
.nav-accueil{
  display:none; width:2.4rem; height:2.4rem; border-radius:50%;
  border:1px solid var(--trait); place-items:center; flex:none;
  color:var(--texte-doux); text-decoration:none;
  transition:border-color .2s, color .2s;
}
.nav-accueil svg{
  width:1.05rem; height:1.05rem; stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.nav-accueil:hover{ border-color:var(--accent); color:var(--accent); }
@media (max-width:860px){
  .nav-accueil{ display:grid; width:44px; height:44px; }
}

/* ===================== FORMULAIRES =====================
   Champs a 16 px : en dessous, iOS zoome sur le champ a la saisie.
   Chaque champ a une etiquette visible, jamais un simple placeholder :
   le placeholder disparait des que l'on tape et laisse l'utilisateur
   sans repere. */
.formulaire{ display:grid; gap:1.1rem; max-width:44rem; }
.champ{ display:grid; gap:.4rem; }
.champ-duo{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:560px){ .champ-duo{ grid-template-columns:1fr; } }

.champ label{
  font-family:var(--sans); font-size:.72rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--texte-doux);
}
.champ label .requis{ color:var(--accent-2); margin-left:.2em; }

.champ input, .champ select, .champ textarea{
  width:100%; font-family:var(--sans); font-size:16px; color:var(--texte);
  background:var(--surface); border:1px solid var(--trait); border-radius:3px;
  padding:.8rem .95rem; transition:border-color .2s, box-shadow .2s;
}
.champ textarea{ min-height:7.5rem; resize:vertical; line-height:1.55; }
.champ select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--texte-doux) 50%),
                   linear-gradient(135deg,var(--texte-doux) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%, calc(100% - 15px) 55%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
  padding-right:2.6rem; }
.champ input:focus, .champ select:focus, .champ textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.champ .aide{ font-size:.78rem; color:var(--texte-doux); }

/* Piege a robots : invisible pour les humains, rempli par les automates. */
.pot-de-miel{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.formulaire .bouton{ justify-self:start; border:none; cursor:pointer; }
.formulaire-note{ font-size:.8rem; color:var(--texte-doux); }

/* Formulaire sur fond sombre */
.pratique .champ label{ color:#C4B0BE; }
.pratique .champ input, .pratique .champ select, .pratique .champ textarea{
  background:rgba(246,239,224,.08); border-color:rgba(246,239,224,.28); color:#F1E6DA;
}
.pratique .champ input:focus, .pratique .champ select:focus, .pratique .champ textarea:focus{
  border-color:var(--dore); box-shadow:0 0 0 3px rgba(192,138,43,.22);
}
.pratique .formulaire-note{ color:#C4B0BE; }

/* ===================== GALERIE PHOTO =====================
   Grille souple : les photos gardent leurs proportions, la legende reste
   sous l'image et non par dessus, pour ne rien masquer du sujet. */
.grille-photos{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1rem;
}
.photo{
  margin:0; background:var(--surface);
  border:1px solid var(--trait); border-radius:3px; overflow:hidden;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.photo:hover{ transform:translateY(-4px); box-shadow:var(--ombre); }
.photo img{
  display:block; width:100%; height:auto; aspect-ratio:4/3;
  object-fit:cover; background:var(--fond-2);
}
.photo figcaption{
  padding:.85rem 1rem; font-size:.82rem; color:var(--texte-doux);
  line-height:1.45;
}
/* La premiere photo occupe deux colonnes : elle donne le ton de la serie. */
@media (min-width:820px){
  .photo:first-child{ grid-column:span 2; }
  .photo:first-child img{ aspect-ratio:16/9; }
}

/* --- Citation de la fondatrice --- */
.citation-fondatrice{
  max-width:60ch; margin:0; padding-left:1.4rem;
  border-left:3px solid var(--accent-2);
}
.citation-fondatrice p{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.2rem,1rem + 1vw,1.75rem); line-height:1.4;
  color:var(--texte); text-wrap:balance;
}
.citation-fondatrice .contexte{
  font-family:var(--sans); font-style:normal;
  font-size:.95rem; color:var(--texte-doux); margin-top:1rem;
}
.citation-fondatrice cite{
  display:block; margin-top:1.2rem; font-style:normal;
  font-size:.72rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-2);
}

/* ===================== SÉLECTEUR DE LANGUE =====================
   Un globe fin et deux codes de langue, dans la barre de navigation. */
.langue{
  display:inline-flex; align-items:center; gap:.15rem;
  padding:.2rem .45rem .2rem .35rem;
  border:1px solid var(--trait); border-radius:100px;
  background:transparent; flex:none;
}
.langue-globe{
  width:1.05rem; height:1.05rem; margin-right:.2rem; flex:none;
  stroke:var(--texte-doux); fill:none; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.langue-choix{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.9rem; padding:.32rem .3rem; border-radius:100px;
  font-family:var(--sans); font-size:.68rem; font-weight:700;
  letter-spacing:.08em; text-decoration:none; color:var(--texte-doux);
  transition:color .2s, background .2s;
}
.langue-choix:hover{ color:var(--accent); }
.langue-choix.actif{ background:var(--accent); color:#fff; }
.langue:hover .langue-globe{ stroke:var(--accent); }

/* Dans le héros sombre, la barre de navigation n'est pas encore visible :
   ce sélecteur suit donc simplement les jetons de thème. */

@media (max-width:860px){
  .langue-choix{ min-height:44px; }
  .langue{ padding-block:0; }
}
@media (max-width:560px){
  .langue-globe{ display:none; }
  .langue{ padding-inline:.25rem; }
  .langue-choix{ min-width:1.7rem; font-size:.64rem; }
}

/* ===================== TÉLÉPHONES =====================
   La majorité des visiteurs consultera le site sur un téléphone.
   Cibles tactiles à 44 px minimum, aucun débordement horizontal,
   et champs de saisie à 16 px pour empêcher le zoom automatique d'iOS. */

html{
  -webkit-text-size-adjust:100%;
  /* Les ancres s'arretent sous la navigation collante au lieu de passer
     dessous. 4,5 rem correspond a sa hauteur reelle, marge comprise. */
  scroll-padding-top:4.5rem;
  /* Defilement fluide pour les liens internes. Neutralise plus bas si la
     personne a demande moins d'animation. */
  scroll-behavior:smooth;
}
/* Un geste de defilement dans le bandeau des autrices ne doit pas entrainer
   la page entiere une fois la fin atteinte. */
.defile{ overscroll-behavior-x:contain; }
/* Le bandeau ne tourne que lorsqu'il est a l'ecran : hors champ, l'animation
   continuerait a solliciter le processeur et la batterie du telephone. */
.defile.hors-champ .piste{ animation-play-state:paused; }
/* Les elements anime au defilement sont promus sur leur propre couche
   pendant la transition seulement, puis liberes. */
.reveler{ will-change:opacity, transform; }
.reveler.vu{ will-change:auto; }

@media (max-width:860px){
  /* Cibles tactiles : 30 px et 24 px sont trop petits au doigt. */
  .puce{
    min-height:44px; display:inline-flex; align-items:center;
    padding-block:0; padding-inline:1.05rem;
  }
  .theme-bascule{ width:44px; height:44px; font-size:1rem; }
  .nav-cta{ min-height:44px; display:inline-flex; align-items:center; }
  .bouton{ min-height:48px; }
  .pied ul a{ display:inline-block; padding-block:.72rem; }
  .pied ul{ gap:0; }
  /* Les liens portant le logo n'ont pas de texte propre : on leur donne
     une surface tactile explicite. */
  .nav .logo{ padding:.45rem; margin:-.45rem; }
  .pied .logo{ padding-block:.45rem; }

  /* Le portrait ne doit pas rester collé : il occuperait tout l'écran. */
  .portrait{ position:static; }

  /* 16 px : en dessous, iOS zoome sur le champ au moment de la saisie. */
  .forme input{ font-size:16px; }
}

@media (max-width:560px){
  /* Le nom complet ne tient pas à côté du bouton : on ne garde que la marque,
     déjà présente en toutes lettres dans le héros juste au dessus. */
  .nav .logo-mot{ display:none; }
  .nav-int{ gap:.75rem; padding-block:.6rem; }
  .nav-cta{ padding-inline:.95rem; font-size:.72rem; }

  /* Les quatre cases du compte à rebours tiennent alors sur une seule ligne. */
  .rebours{ gap:.4rem; }
  .rebours-case{ min-width:0; flex:1 1 0; padding:.6rem .3rem .5rem; }
  .rebours-case b{ font-size:1.55rem; }
  .rebours-case span{ font-size:.52rem; letter-spacing:.1em; }

  /* Les deux appels à l'action passent pleine largeur, plus faciles à viser. */
  .hero-actions{ gap:.6rem; }
  .hero-actions .bouton{ flex:1 1 100%; justify-content:center; }

  .chiffres{ grid-template-columns:1fr 1fr; }
  .chiffre{ padding-right:.8rem; }

  .forme{ gap:.6rem; }
  .forme button{ flex:1 1 100%; justify-content:center; }

  .pied-grille{ grid-template-columns:1fr; gap:1.6rem; }

  /* Rythme resserré : sur un écran de 568 px de haut, 96 px de marge
     supérieure repoussent le compte à rebours hors de vue. */
  /* L'interlettrage large fait passer le bandeau sur quatre lignes
     et lui fait manger un cinquième de l'écran. */
  .bandeau{ padding:.45rem .8rem; font-size:.6rem; letter-spacing:.07em; }
  .bandeau span{ letter-spacing:.05em; }

  .hero{ padding:2.4rem 0 2.6rem; }
  .hero-haut{ margin-bottom:1.7rem; }
  .hero h1{ margin-bottom:1.1rem; }
  .hero-theme{ margin-bottom:1.6rem; }
  .hero-lieu{ margin-bottom:1.5rem; }
  .rebours{ margin-bottom:1.6rem; }
  .hero-actions{ margin-bottom:2rem; }
  .hero-edition{ margin-bottom:1rem; }
  .section{ padding:3.2rem 0; }
}

/* Écrans très étroits (Galaxy A, iPhone SE de première génération). */
@media (max-width:360px){
  .hero-lieu{ gap:.35rem 1rem; font-size:.88rem; }
  .etiquette{ font-size:.62rem; letter-spacing:.16em; }
  .tag{ letter-spacing:.1em; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .js .reveler, .reveler{ opacity:1; transform:none; }
  .entree{ opacity:1; transform:none; }
  .piste{ animation:none !important; }
}