/* ==========================================================================
   L'Épée et le Chaudron — feuille de style
   Organisation : variables → base → header/nav → hero → sections → composants
   → contrôles flottants → responsive (≤940 tablette, ≤620 téléphone) → motion.
   ========================================================================== */

:root{
  --blue:#123d91;
  --blue-dark:#071a44;
  --gold:#f2cc28;
  --fire:#c23f16;
  --ink:#17120d;
  --text:#2c271f;
  --muted:#6a6257;
  --paper:#f7efe0;
  --paper-2:#fffaf0;
  --line:rgba(23,18,13,.13);
  --shadow:0 16px 42px rgba(7,26,68,.16);
  --max:1120px;
}

/* --- Base ------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--paper-2);
  font-size:16px;
  line-height:1.55;
  text-rendering:optimizeLegibility;
}
/* Une photo n'est jamais étirée : si son cadre impose largeur et hauteur,
   elle est recadrée (cover). Les vues qui doivent la montrer entière le
   disent elles-mêmes (contain : galerie agrandie, plein écran). */
img{max-width:100%;height:auto;display:block;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font:inherit}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
h2{
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(1.6rem,2.6vw,2.25rem);
  line-height:1.08;
  margin:.1rem 0 .65rem;
  color:var(--ink);
  letter-spacing:-.02em;
}

.container{width:min(calc(100% - 32px),var(--max));margin-inline:auto}
.skip-link{position:absolute;left:10px;top:-60px;background:#fff;color:var(--ink);padding:.55rem .8rem;border-radius:8px;z-index:999}
.skip-link:focus{top:10px}

.eyebrow{margin:0 0 .55rem;color:var(--fire);font-size:.75rem;line-height:1.25;text-transform:uppercase;font-weight:900;letter-spacing:.09em}

.button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:42px;border-radius:999px;padding:.68rem 1rem;
  font-size:.95rem;font-weight:850;border:1px solid transparent;
  transition:transform .18s ease,background .18s ease;
}
.button:hover{transform:translateY(-1px)}
.button.primary{background:var(--gold);color:var(--ink)}
.button.secondary{background:#fff;color:var(--blue-dark);border-color:rgba(18,61,145,.22)}

/* --- Header / navigation ---------------------------------------------- */
.topbar{
  position:sticky;top:0;z-index:80;min-height:60px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px max(14px,calc((100vw - var(--max))/2));
  background:rgba(255,250,240,.94);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;min-width:0;min-height:44px}
.brand img{width:38px;height:38px;border-radius:10px;object-fit:cover;border:2px solid var(--gold);background:var(--blue)}
.brand span{display:grid;min-width:0}
.brand strong{font-size:1rem;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand small{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.nav{display:flex;align-items:center;gap:4px}
.nav a{font-size:.92rem;font-weight:650;padding:.55rem .7rem;border-radius:999px;color:#2c271f}
.nav a:hover,.nav a:focus-visible{background:rgba(18,61,145,.08)}
/* Libellé abrégé de la barre du bas sur téléphone (« Persos ») */
.nav-short{display:none}
.nav-contact{background:var(--blue)!important;color:#fff!important}
.nav-icon{display:none;width:23px;height:23px;fill:currentColor}
.nav-home{display:none!important}

.menu-button{display:none;border:0;background:transparent;color:var(--ink);padding:4px 0 4px 8px}
.menu-button span{display:block;width:22px;height:2px;background:currentColor;margin:4px 0;border-radius:2px}
.menu-button em{display:block;font-style:normal;font-size:.68rem;color:var(--muted);margin-top:1px}

/* --- Hero ------------------------------------------------------------- */
.hero{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,520px);gap:0;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  min-height:560px;
}
.hero-image{position:relative;min-height:560px;overflow:hidden}
.hero-image picture,.hero-image img{width:100%;height:100%}
/* Photo du haut de page légèrement désaturée : les couleurs vives des
   costumes et des façades restent, sans crier à côté de la carte de texte. */
.hero-image img{object-fit:cover;object-position:center;filter:saturate(.82)}
.hero-content{display:flex;align-items:center;padding:clamp(24px,4vw,48px)}
.hero-card{
  width:100%;background:rgba(255,250,240,.97);border-radius:24px;
  padding:clamp(24px,3.2vw,38px);box-shadow:var(--shadow);
  border:1px solid rgba(242,204,40,.34);
}
.hero h1{
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(1.6rem,3vw,2.5rem);
  line-height:1.04;margin:0;color:var(--ink);letter-spacing:-.025em;
}
.hero-lead{font-size:1.04rem;color:#4d453a;margin:1rem 0 1.2rem}
.hero-actions,.contact-actions{display:flex;gap:10px;flex-wrap:wrap}
.proofs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0 0}
.proofs div{border:1px solid rgba(18,61,145,.12);background:#fff;border-radius:14px;padding:9px 10px}
.proofs dt{font-size:.8rem;font-weight:900;color:var(--blue);line-height:1.2}
.proofs dd{margin:2px 0 0;font-size:.78rem;color:var(--muted);line-height:1.2}

/* --- Sections ---------------------------------------------------------- */
.section{padding:62px 0}
.paper{background:var(--paper)}
/* Titres et chapeaux de section sur toute la largeur du corps de page,
   alignés sur les cartes qu'ils annoncent. */
.section-title{margin-bottom:24px}
.intro-text p,.section-title p{color:var(--muted)}
.organisers p{color:var(--muted);max-width:620px}

/* Intro « Voir, toucher, comprendre » */
/* Bannière + texte sur une ligne, les trois points forts en rangée dessous :
   section compacte, sans colonne vide sur grand écran */
.intro{background:var(--paper-2);padding:44px 0}
.intro-grid{display:grid;grid-template-columns:170px 1fr;column-gap:36px;row-gap:22px;align-items:center}
.intro-banner{background:#fff;border-radius:20px;padding:10px;box-shadow:var(--shadow);transform:rotate(-1deg)}
.intro-banner img{border-radius:14px}
.intro-points{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.intro-points article{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px}
.intro-points strong{display:block;color:var(--blue);font-size:.98rem}
.intro-points span{display:block;color:var(--muted);font-size:.9rem;margin-top:2px}

/* Animations : filtres + cartes */
.module-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
/* « Voir les 19 animations » : n'existe que sur téléphone (voir la règle 620 px). */
.module-voir-tout{display:none}
.module-filter{
  border:1px solid var(--line);background:#fff;color:var(--text);
  border-radius:999px;padding:.5rem .72rem;font-size:.88rem;font-weight:850;cursor:pointer;
  transition:background .18s ease,border-color .18s ease;
}
.module-filter:not(.is-active):hover{background:rgba(18,61,145,.06);border-color:rgba(18,61,145,.28)}
.module-filter.is-active{background:var(--blue);border-color:var(--blue);color:#fff}
.module-filter:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cards .card[hidden]{display:none}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 8px 24px rgba(23,18,13,.06)}
.card img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 35%}
.card div{padding:16px}
.card h3{margin:0 0 6px;color:var(--blue-dark);font-size:1.07rem;line-height:1.18}
.card p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.45}

.module-card{position:relative;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.module-card>div:not(.module-details){padding-right:54px}
.module-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(23,18,13,.12)}
.module-card:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.module-card:after{
  content:"Détails";position:absolute;right:10px;top:10px;
  background:rgba(7,26,68,.62);color:#fff;border-radius:999px;
  padding:.28rem .55rem;font-size:.7rem;font-weight:700;letter-spacing:.01em;
  box-shadow:0 1px 4px rgba(0,0,0,.08);pointer-events:none;
}
.module-wishlist{
  position:absolute;z-index:2;right:6px;bottom:6px;width:44px;height:44px;padding:0;
  border:1px solid rgba(106,98,87,.3);border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--fire);
  display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;line-height:1;cursor:pointer;
  box-shadow:0 2px 7px rgba(0,0,0,.1);
}
.module-wishlist:hover{transform:scale(1.05)}
.module-wishlist:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.module-wishlist[aria-pressed="true"]{background:var(--fire);border-color:var(--fire);color:#fff}

/* Organisateurs : liste + formats en onglets */
.organisers{background:linear-gradient(180deg,#fffaf0,var(--paper))}
.organiser-grid{display:grid;grid-template-columns:1fr 400px;gap:36px;align-items:start}
.ticks{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:28px}
.ticks li:before{content:"";position:absolute;left:0;top:.25rem;width:18px;height:18px;border-radius:50%;background:var(--blue)}
.ticks li:after{content:"";position:absolute;left:5px;top:.48rem;width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.format-card{background:var(--blue-dark);color:#fff;border-radius:22px;padding:16px;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.12)}
.format-card{touch-action:pan-y pinch-zoom}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:14px}
.tab{border:0;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;padding:.55rem .3rem;font-size:.84rem;font-weight:850;white-space:nowrap;cursor:pointer;transition:background .18s ease}
.tab:not(.is-active):hover{background:rgba(255,255,255,.22)}
.tab.is-active{background:var(--gold);color:var(--ink)}
.tab:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.tab-panel{display:none}
.tab-panel.is-active{display:block}
.tab-panel h3{font-size:1.18rem;margin:0 0 .35rem;color:#fff}
.tab-panel p{margin:0;color:rgba(255,255,255,.78);font-size:.95rem}
.tab-panel p+p,.tab-panel ul+p{margin-top:.7rem}
.tab-panel strong{color:#fff}
.tab-panel ul{margin:.35rem 0 0;padding-left:1.1rem;color:rgba(255,255,255,.78);font-size:.93rem;line-height:1.45}
.tab-panel li{margin:.25rem 0}
.ticks strong{color:var(--blue-dark)}

/* Bande photo pleine largeur */
.photo-band{position:relative;min-height:clamp(360px,30vw,600px);display:flex;align-items:flex-end;overflow:hidden;background:#101010}
.photo-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.photo-band:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,26,68,.78),rgba(7,26,68,.12))}
.photo-band div{
  position:relative;z-index:1;width:min(500px,calc(100% - 32px));
  margin:0 0 28px max(16px,calc((100vw - var(--max))/2));
  background:rgba(7,26,68,.82);border:1px solid rgba(242,204,40,.36);border-radius:18px;padding:18px;color:#fff;
}
.photo-band span{display:block;color:var(--gold);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:900}
.photo-band strong{display:block;font-family:Georgia,'Times New Roman',serif;font-size:1.65rem;line-height:1.12;margin-top:4px}

/* Contact + pied de page */
.contact{background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:#fff}
.contact-card{display:grid;grid-template-columns:1fr 330px;gap:28px;align-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:24px}
.contact h2,.contact p{color:#fff}
.contact p{opacity:.8}
.contact-actions{justify-content:flex-end}
.footer{background:#060b1b;color:#fff;padding:22px 0}
.footer-inner{display:flex;justify-content:space-between;gap:16px;align-items:center;font-size:.9rem}
.footer span:last-child{opacity:.65;text-align:right}
/* Mentions légales : repliées, une ligne discrète sous le pied de page. */
.mentions{margin-top:6px;font-size:.9rem;color:rgba(255,255,255,.72)}
.mentions summary{display:list-item;padding:11px 0;cursor:pointer;color:rgba(255,255,255,.8)}
.mentions summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.mentions dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:4px 0 8px}
.mentions dt{font-weight:700;color:#fff}
.mentions dd{margin:0}

/* --- Lightbox photo ----------------------------------------------------- */
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(5,9,20,.94);padding:18px;display:grid;grid-template-rows:1fr auto;place-items:center}
.lightbox[hidden]{display:none}
/* Photo en plein écran (téléphone) : au-dessus de tout, refermée d'un toucher.
   is-tourne : photo en largeur sur un écran en hauteur, pivotée d'un quart de
   tour ; ses limites sont donc celles de l'écran, inversées. */
.plein-ecran{position:fixed;inset:0;z-index:1300;background:#000;display:flex;align-items:center;justify-content:center;cursor:zoom-out}
.plein-ecran[hidden]{display:none}
.plein-ecran img{max-width:100vw;max-height:100vh;max-height:100dvh;object-fit:contain}
.plein-ecran.is-tourne img{max-width:100vh;max-width:100dvh;max-height:100vw;transform:rotate(90deg)}
@media (max-width:620px){
  [data-lightbox-image],[data-module-modal-image],[data-persona-modal-image],.photo-band{cursor:zoom-in}
}
.lightbox{touch-action:pan-y pinch-zoom}
.lightbox img{max-width:min(1100px,96vw);max-height:82vh;border-radius:14px;object-fit:contain}
.lightbox p{color:#fff;text-align:center;margin:10px 0 0}
.lightbox-close{position:absolute;top:12px;right:12px;width:44px;height:44px;border:0;border-radius:50%;background:var(--gold);color:var(--ink);font-size:1.7rem;line-height:1;cursor:pointer}
.lightbox-nav{
  position:absolute;z-index:3;top:50%;width:48px;height:48px;padding:0;
  border:1px solid rgba(242,204,40,.72);border-radius:50%;background:rgba(7,26,68,.9);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:2rem;line-height:1;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.26);transform:translateY(-50%);
}
.lightbox-nav:hover{background:var(--blue)}
.lightbox-nav:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.lightbox-prev{left:12px}
.lightbox-next{right:12px}

/* --- Fiche animation (modale) ------------------------------------------ */
.module-modal{position:fixed;inset:0;z-index:1100;background:rgba(5,9,20,.92);padding:18px;overflow-y:auto}
.module-modal[hidden]{display:none}
.module-modal-panel{
  position:relative;width:min(960px,100%);min-height:calc(100vh - 36px);margin:auto;
  background:var(--paper-2);border-radius:22px;overflow:hidden;
  display:grid;grid-template-columns:minmax(280px,42%) 1fr;
  box-shadow:0 24px 70px rgba(0,0,0,.38);
}
.module-modal-panel{touch-action:pan-y pinch-zoom}
.module-modal-panel>img{width:100%;height:100%;min-height:520px;object-fit:cover}
/* Le visuel « Photo à venir » s'affiche entier, sur le même bleu que son fond */
.module-modal-panel>img[src$="photo-a-venir.webp"]{object-fit:contain;background:#0f2f6e}
.module-modal-content{align-self:center;padding:clamp(28px,5vw,58px)}
/* Fiche animation : une photo en hauteur occupe la colonne de gauche (45 %),
   une photo en largeur se pose au-dessus du texte. Le sens est lu par
   main.js à l'ouverture (classe is-paysage). Sur téléphone, la photo est
   toujours au-dessus : voir la règle 620 px. */
[data-module-modal] .module-modal-panel{grid-template-columns:minmax(280px,45%) 1fr}
@media (min-width:621px){
  [data-module-modal] .module-modal-panel.is-paysage{
    width:min(820px,100%);grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:start
  }
  [data-module-modal] .module-modal-panel.is-paysage>img{height:auto;min-height:0;aspect-ratio:720/520;max-height:52vh}
  [data-module-modal] .module-modal-panel.is-paysage .module-modal-content{
    align-self:start;padding:clamp(24px,4vw,44px) clamp(28px,5vw,58px)
  }
  /* Les flèches restent au milieu de la photo, pas au milieu de la fiche */
  [data-module-modal] .module-modal-panel.is-paysage .module-modal-nav{top:min(26vh,min(820px,100vw - 36px) * .361)}
}
.module-modal-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:1rem}
.module-modal-heading h2{margin:0;flex:1 1 auto}
.module-modal-details p{color:var(--muted)}
.module-modal-details h4{margin:1.3rem 0 .45rem;color:var(--blue-dark);font-family:inherit;font-size:inherit;line-height:inherit;font-weight:700}
.module-modal-details ul{margin:0 0 1.5rem;padding-left:1.2rem;font-family:inherit;font-size:inherit;line-height:inherit}
.module-modal-details li{margin:.35rem 0;font-family:inherit;font-size:inherit;line-height:inherit}
/* « Animé par » : mêmes liens que l'atelier dans la fiche d'un personnage,
   sur des lignes de 44 px pour le doigt. */
.module-modal-details .module-modal-animateurs{margin:1rem 0 0;color:var(--text);line-height:44px}
.module-modal-animateurs strong{color:var(--ink);font-weight:800}
.module-modal-close{
  position:absolute;z-index:3;top:12px;right:12px;width:44px;height:44px;padding:0;border:0;border-radius:50%;
  background:var(--gold);color:var(--ink);display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.2);
}
.module-modal-nav{
  position:absolute;z-index:3;top:50%;width:48px;height:48px;padding:0;
  border:1px solid rgba(242,204,40,.72);border-radius:50%;background:rgba(7,26,68,.9);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:2rem;line-height:1;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.26);transform:translateY(-50%);
}
.module-modal-nav:hover{background:var(--blue)}
.module-modal-nav:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.module-modal-prev{left:12px}
.module-modal-next{right:12px}
.module-modal-wishlist{
  flex:0 0 auto;width:44px;height:44px;padding:0;border:1px solid rgba(106,98,87,.3);border-radius:50%;
  background:#fff;color:var(--fire);display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;line-height:1;cursor:pointer;
  /* Contour gris fin et ombre douce : le bouton se détache du fond crème
     sans attirer l'œil ; seul le cœur porte la couleur feu. */
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  transition:transform .15s ease,box-shadow .15s ease;
}
.module-modal-wishlist:hover{transform:scale(1.05);box-shadow:0 0 0 4px rgba(106,98,87,.1),0 2px 8px rgba(0,0,0,.14)}
.module-modal-wishlist:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.module-modal-wishlist[aria-pressed="true"]{background:var(--fire);border-color:var(--fire);color:#fff}

/* --- Fiche personnage --------------------------------------------------- */
/* Même charpente que la fiche animation ; seule la colonne du portrait change,
   parce qu'un portrait vertical se cadre autrement qu'une photo de camp. */
/* Une fiche de personnage n'a que quatre choses à dire — nom, rôle, accroche,
   atelier. C'est le portrait qui la porte : il prend la plus grande part. */
.persona-modal-panel{
  width:min(920px,100%);min-height:clamp(460px,72vh,700px);
  grid-template-columns:minmax(300px,52%) 1fr;
}
.persona-modal-panel>img{min-height:0;object-position:50% 12%}
.persona-modal-role{margin:0 0 .25rem;color:var(--blue);font-weight:800;font-size:.95rem}
.persona-modal-details p{margin:0 0 1rem;color:var(--muted);font-style:italic;font-size:1.06rem;line-height:1.5}
/* L'accroche est en italique ; l'atelier et le texte qui la suivent restent droits. */
.persona-modal-details p ~ p{font-style:normal;font-size:1rem}
.persona-modal-details .persona-modal-contexte{font-style:normal;font-size:.9rem;line-height:1.4}
.persona-modal-atelier strong{color:var(--ink);font-weight:800}
/* Les liens suivent le fil du texte (plusieurs ateliers s'enchaînent) ; la
   ligne fait 44 px, la hauteur tactile minimale, sans zones qui se chevauchent
   d'une ligne à l'autre. */
.persona-modal-details .persona-modal-atelier{line-height:44px}
.persona-modal-atelier-link{
  display:inline-block;padding:0;border:0;background:none;cursor:pointer;
  color:var(--blue);font:inherit;line-height:44px;text-decoration:underline;text-underline-offset:3px;text-align:left
}
.persona-modal-atelier-link:hover{color:var(--blue-dark)}
.persona-modal-atelier-link:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
/* Le rang du personnage, en coin : un repère, pas une information. */
.persona-modal-counter{
  position:absolute;right:18px;bottom:12px;margin:0;
  color:var(--muted);font-size:.75rem;letter-spacing:.02em;font-variant-numeric:tabular-nums
}

/* Ordinateur : une fiche tient toujours dans la fenêtre, si basse soit-elle
   (portable, barre d'adresse et onglets déduits). La photo se réduit, le
   texte défile dans sa colonne ; la page derrière ne bouge pas. */
@media (min-width:621px){
  .module-modal{overflow:hidden;display:flex;align-items:center}
  .module-modal-panel{grid-template-rows:minmax(0,1fr);height:calc(100vh - 36px);height:calc(100dvh - 36px);min-height:0}
  .persona-modal-panel{height:min(700px,calc(100vh - 36px));height:min(700px,calc(100dvh - 36px))}
  .module-modal-panel>img{height:100%;min-height:0}
  .module-modal-content{align-self:stretch;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    display:flex;flex-direction:column;justify-content:safe center}
  /* Photo en largeur au-dessus du texte : la fiche s'arrête à sa hauteur utile. */
  [data-module-modal] .module-modal-panel.is-paysage{
    display:flex;flex-direction:column;height:auto;max-height:calc(100vh - 36px);max-height:calc(100dvh - 36px)
  }
  [data-module-modal] .module-modal-panel.is-paysage>img{flex:0 1 auto;height:auto;min-height:120px;max-height:52vh;max-height:min(52vh,52dvh)}
  [data-module-modal] .module-modal-panel.is-paysage .module-modal-content{flex:1 1 auto;justify-content:flex-start}
}

/* --- Contrôles flottants ------------------------------------------------ */
.back-to-top{
  position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:90;
  width:46px;height:46px;border:1px solid rgba(242,204,40,.8);border-radius:50%;
  background:var(--blue-dark);color:#fff;font-size:1.35rem;font-weight:900;line-height:1;cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.24);
  opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.back-to-top:hover{background:var(--blue)}
.back-to-top:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.wishlist-notification{
  position:fixed;z-index:1200;right:18px;bottom:18px;width:min(390px,calc(100% - 36px));
  padding:14px 16px;border:1px solid rgba(242,204,40,.45);border-radius:14px;
  background:var(--blue-dark);color:#fff;font-size:.9rem;font-weight:750;line-height:1.4;
  box-shadow:0 12px 34px rgba(0,0,0,.3);
  opacity:0;visibility:hidden;transform:translateY(12px);pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
}
.wishlist-notification.is-visible{opacity:1;visibility:visible;transform:none}

/* Apparition progressive au défilement */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease}
.reveal.is-visible{opacity:1;transform:none}

/* ==========================================================================
   Tablette et petits écrans (≤ 940 px) : colonnes empilées, menu en popover
   ========================================================================== */
@media (max-width:940px){
  .menu-button{display:block}
  .nav{
    position:fixed;left:12px;right:12px;top:66px;display:grid;gap:2px;padding:10px;
    background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:.18s ease;
  }
  .nav.is-open{opacity:1;transform:none;pointer-events:auto}
  .nav a{padding:.76rem .9rem}
  .nav-contact{text-align:center}

  .hero{grid-template-columns:1fr;min-height:0}
  .hero-image{min-height:330px;height:42vh}
  .hero-content{padding:0 16px 30px;margin-top:-44px;position:relative;z-index:3}

  .section{padding:48px 0}
  .organiser-grid,.contact-card{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .contact-actions{justify-content:flex-start}
  .footer-inner{display:grid}
  .footer span:last-child{text-align:left}
  .mentions dl{grid-template-columns:1fr;gap:2px}
  .mentions dd{margin-bottom:8px}
}

/* ==========================================================================
   Téléphone (≤ 620 px) : barre de navigation basse, cartes compactes
   ========================================================================== */
@media (max-width:620px){
  /* Corps de texte à 16 px : les paragraphes ne descendent jamais sous 15 px */
  body{font-size:16px;line-height:1.5;padding-bottom:calc(62px + env(safe-area-inset-bottom))}
  .container{width:calc(100% - 24px)}
  .section{padding:38px 0}
  h2{font-size:1.3rem;line-height:1.18}
  .section-title{margin-bottom:18px}
  .eyebrow{font-size:.7rem;margin-bottom:.45rem}
  /* Cibles tactiles : 44 px minimum sur tout ce qui se touche */
  .button{width:100%;min-height:44px;font-size:.92rem;padding:.62rem .9rem}
  /* Filtres : une seule ligne compacte, qu'on fait glisser du pouce */
  .module-filters{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;gap:6px;padding-bottom:2px;margin-bottom:14px}
  .module-filters::-webkit-scrollbar{display:none}
  .module-filter{flex:0 0 auto;white-space:nowrap;
    min-height:44px;padding:.5rem .72rem;font-size:.78rem}
  .tab{min-height:44px}

  /* Header : marque seule en haut, navigation fixée en bas */
  .topbar{min-height:56px;padding:8px 12px;justify-content:flex-start;background:var(--paper-2);backdrop-filter:none;-webkit-backdrop-filter:none}
  .brand{max-width:100%}
  .brand img{width:36px;height:36px}
  .brand strong{font-size:.93rem;max-width:235px}
  .brand small{display:block}
  .menu-button{display:none}
  .menu-button em{font-size:.64rem}
  .topbar .nav{
    position:fixed;z-index:900;inset:auto 0 0 0;top:auto!important;bottom:0!important;left:0!important;right:0!important;
    display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    border:0;border-top:1px solid rgba(242,204,40,.32);border-radius:0;
    background:rgba(18,61,145,.98);box-shadow:0 -8px 24px rgba(7,26,68,.22);backdrop-filter:blur(16px);
    opacity:1;transform:none;pointer-events:auto;
  }
  .topbar .nav a,.topbar .nav-contact{
    min-width:0;min-height:48px;padding:.3rem .12rem!important;border-radius:11px!important;
    display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center;text-align:center;
    color:var(--gold)!important;background:transparent!important;
    font-size:.64rem;font-weight:500;line-height:1;
  }
  .topbar .nav-home{display:flex!important}
  .topbar .nav-icon{display:block}
  .topbar .nav-label{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar .nav-long{display:none}
  .topbar .nav-short{display:inline}
  .topbar .nav a[aria-current="page"]{background:var(--blue-dark)!important;color:var(--gold)!important;box-shadow:inset 0 0 0 1px rgba(242,204,40,.55),0 3px 10px rgba(7,26,68,.28)}

  /* Hero */
  .hero-image{height:285px;min-height:285px}
  .hero-content{padding:0 12px 28px;margin-top:-34px}
  .hero-card{border-radius:18px;padding:18px}
  .hero h1{font-size:1.36rem;line-height:1.14;letter-spacing:-.01em}
  .hero-lead{font-size:.97rem;line-height:1.45;margin:.8rem 0 1rem}
  .proofs{grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:12px}
  .proofs div{padding:8px 6px;text-align:center}
  .proofs dt{font-size:.78rem}
  .proofs dd{font-size:.74rem}

  /* Intro : tout empilé, bannière centrée */
  .intro-grid{grid-template-columns:1fr;gap:18px}
  .intro-banner{max-width:170px;margin-inline:auto}
  .intro-points{grid-template-columns:1fr}
  .intro-points article{padding:12px}

  /* Animations : cartes compactes vignette à gauche */
  .cards{grid-template-columns:1fr;gap:10px}
  .cards.is-replie .module-card:nth-child(n+7){display:none}
  .module-voir-tout{display:flex;margin-top:10px}
  .module-voir-tout[hidden]{display:none}
  .compact-cards .card{display:grid;grid-template-columns:118px 1fr;min-height:112px}
  .compact-cards .card img{aspect-ratio:auto;height:100%;min-height:112px}
  .card div{padding:12px}
  .card h3{font-size:1rem;margin-bottom:4px}
  .card p{font-size:.9rem;line-height:1.4}
  /* « Détails » devient un œil : même rôle, sans mot qui mange la photo.
     Gris sur blanc cassé, assorti au rond du cœur. */
  .module-card:after{
    content:"";width:30px;height:30px;padding:0;
    border:1px solid rgba(106,98,87,.3);box-shadow:0 2px 6px rgba(0,0,0,.1);
    background:var(--paper-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a6257' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/17px no-repeat;
  }
  /* Le cœur rapetisse à l'œil (32 px) mais garde sa zone tactile de 44 px :
     le rond visible est dessiné par un pseudo-élément. */
  .module-wishlist{right:4px;bottom:4px;background:transparent;border:0;box-shadow:none;font-size:.88rem}
  .module-wishlist::before{
    content:"";position:absolute;inset:6px;z-index:-1;border-radius:50%;
    border:1px solid rgba(106,98,87,.3);background:rgba(255,255,255,.92);box-shadow:0 2px 6px rgba(0,0,0,.1);
  }
  .module-wishlist[aria-pressed="true"]{background:transparent;color:#fff}
  .module-wishlist[aria-pressed="true"]::before{background:var(--fire);border-color:var(--fire)}

  /* Organisateurs */
  .organiser-grid{gap:22px}
  .ticks{gap:8px;margin-top:16px}
  .format-card{padding:13px;border-radius:18px}
  .tabs{gap:5px}
  .tab{font-size:.78rem;padding:.5rem .15rem}
  .tab-panel p{font-size:.93rem}

  /* Bande photo */
  .photo-band{min-height:270px}
  .photo-band:after{background:linear-gradient(180deg,rgba(7,26,68,.12),rgba(7,26,68,.85))}
  .photo-band div{margin:0 12px 14px;width:calc(100% - 24px);padding:14px;border-radius:16px}

  .contact-card{padding:18px;border-radius:18px;gap:16px}

  /* Lightbox + fiche animation plein écran */
  .lightbox{padding:10px}
  .lightbox img{max-height:78vh}
  .lightbox-close{width:44px;height:44px}
  .module-modal{padding:0}
  /* Fiche animation : la photo prend la moitié de l'écran, le texte la
     moitié restante et défile sur place si besoin. */
  .module-modal-panel{min-height:100vh;border-radius:0;display:block}
  [data-module-modal] .module-modal-panel{display:flex;flex-direction:column;min-height:0;height:100%}
  .module-modal-panel>img{height:34vh;min-height:220px;max-height:310px}
  [data-module-modal] .module-modal-panel>img{flex:0 0 auto;height:50%;min-height:0;max-height:none}
  .module-modal-content{padding:24px 18px 34px}
  [data-module-modal] .module-modal-content{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 18px 24px}
  [data-module-modal] .module-modal-heading{margin-bottom:.6rem}
  .module-modal-content h2{font-size:1.32rem}
  .module-modal-details{font-size:.9rem;line-height:1.5}
  .module-modal-nav{top:17vh;width:44px;height:44px}
  [data-module-modal] .module-modal-nav{top:25%}
  /* Le portrait prend 60 % de l'écran, pas plus ; le texte occupe le reste
     et défile s'il ne tient pas. Hauteurs en % de la fiche, elle-même collée
     aux bords de l'écran : en svh, la fiche gardait la hauteur prévue pour
     la barre d'adresse et laissait une bande vide quand celle-ci se masque. */
  .persona-modal-panel{display:flex;flex-direction:column;min-height:0;height:100%}
  .persona-modal-panel>img{flex:0 0 auto;height:60%;min-height:0;max-height:none}
  /* Nom, rôle et rang sur une seule ligne, le reste dessous. */
  .persona-modal-content{
    flex:1 1 auto;min-height:0;align-content:flex-start;overflow-y:auto;overscroll-behavior:contain;
    display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.6rem;
    padding:10px 16px 12px;
  }
  .persona-modal-content h2{order:0;margin:0;font-size:1.22rem}
  .persona-modal-role{order:1;margin:0;font-size:.94rem}
  .persona-modal-counter{order:2;position:static;margin-left:auto}
  .persona-modal-details{order:3;flex-basis:100%;margin-top:.3rem}
  .persona-modal-details p,.persona-modal-details p ~ p{margin-bottom:.25rem;font-size:.94rem;line-height:1.35}
  .persona-modal-details .persona-modal-contexte{font-size:.94rem;line-height:1.35}
  /* Époque et région sur une ligne : « XIVe siècle · Europe ». */
  .persona-modal-details .persona-modal-contexte span{display:inline}
  .persona-modal-details .persona-modal-contexte span + span::before{content:" · "}
  .persona-modal .module-modal-nav{top:30%}
  .module-modal-prev{left:10px}
  .module-modal-next{right:10px}

  /* Contrôles flottants au-dessus de la barre de navigation */
  .back-to-top{right:max(12px,env(safe-area-inset-right));bottom:calc(86px + env(safe-area-inset-bottom));width:44px;height:44px}
  .wishlist-notification{right:12px;bottom:calc(86px + env(safe-area-inset-bottom));width:calc(100% - 24px)}
}

/* --- Motion réduit ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,.reveal,.back-to-top,.wishlist-notification{transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ==========================================================================
   Carrousels (galerie photo, personnages) et compléments de la refonte 2026
   ========================================================================== */
/* --- Hero : appel à l'action discret ------------------------------------ */
.hero-actions{margin:0 0 .25rem}
.hero-actions + .proofs{margin-top:16px}

/* --- Bande photo : cadrage hérité, texte plus court ---------------------- */
/* La taille téléphone est ici et non dans la section responsive : placée
   avant cette règle, elle était écrasée par elle. */
.photo-band strong{font-size:1.5rem}
@media (max-width:620px){.photo-band strong{font-size:1.2rem}}

/* ==========================================================================
   Carrousel générique : défilement horizontal natif (swipe, molette,
   clavier), accroche magnétique par élément, défilement automatique en JS.
   --per : nombre d'éléments visibles (peut être fractionnaire pour laisser
   dépasser le suivant et suggérer le geste).
   ========================================================================== */
.carousel{position:relative;--per:1;--gap:12px}
.carousel-track{
  display:flex;gap:var(--gap);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* marge interne pour ne pas rogner les ombres des cartes */
  padding:6px 4px 12px;margin:-6px -4px -12px;
}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track>*{
  flex:0 0 calc((100% - (var(--per) - 1)*var(--gap))/var(--per));
  min-width:0;
  scroll-snap-align:start;scroll-snap-stop:always;
}
.carousel-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px}
.carousel-arrow{
  flex:none;width:44px;height:44px;padding:0;border:1px solid rgba(242,204,40,.72);border-radius:50%;
  background:var(--blue-dark);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;line-height:1;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.14);
  transition:background .18s ease,transform .18s ease;
}
/* Chevrons dessinés en SVG : centrés au pixel, trait régulier, même rendu partout */
.carousel-arrow svg,.lightbox-nav svg,.module-modal-nav svg{
  width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
}
.lightbox-nav svg,.module-modal-nav svg{width:24px;height:24px}
/* La croix de fermeture aussi : le caractère « × » tombait bas et à gauche
   dans son rond, selon la police. */
.lightbox-close,.module-modal-close{display:flex;align-items:center;justify-content:center;padding:0}
.lightbox-close svg,.module-modal-close svg{
  width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;
}
.carousel-arrow:hover{background:var(--blue);transform:translateY(-1px)}
.carousel-arrow:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.carousel-dots{display:flex;gap:2px;flex-wrap:wrap;justify-content:center;min-width:0}
.carousel-dot{
  width:28px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.carousel-dot:before{content:"";width:7px;height:7px;border-radius:999px;background:rgba(7,26,68,.22);transition:width .2s ease,background .2s ease}
.carousel-dot.is-active:before{width:18px;background:var(--blue)}
.carousel-dot:focus-visible{outline:3px solid var(--gold);outline-offset:1px;border-radius:999px}
/* Variante pour les longues séries : une jauge fine plutôt que 17 points */
.carousel-progress{
  --progress:0;
  position:relative;width:min(220px,40%);height:4px;border-radius:999px;
  background:rgba(7,26,68,.14);overflow:hidden;
}
.carousel-progress:before{
  content:"";position:absolute;inset:0;border-radius:999px;background:var(--blue);
  transform:scaleX(var(--progress));transform-origin:left;transition:transform .3s ease;
}
.carousel-counter{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums;min-width:3.5ch;text-align:center}
/* Les personnages gardent leurs points sur grand écran, où deux rangées de
   cartes défilent ensemble ; sur téléphone, une position par personnage
   ferait trois lignes de points : la jauge et le compteur les remplacent. */
.persona-carousel .carousel-progress,.persona-carousel .carousel-counter{display:none}

/* --- Galerie photo en carrousel ----------------------------------------- */
.photo-carousel{--per:3}
.photo-carousel .carousel-track>button{
  position:relative;border:0;padding:0;aspect-ratio:3/2;border-radius:14px;overflow:hidden;
  background:#0b1734;cursor:pointer;box-shadow:0 8px 24px rgba(23,18,13,.08);
}
.photo-carousel .carousel-track>button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.photo-carousel .carousel-track img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform .35s ease}
.photo-carousel .carousel-track>button:hover img{transform:scale(1.03)}
/* légende : un mot posé sur la photo, sans cadre ni bandeau */
.photo-carousel .carousel-track span{
  position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);
  background:rgba(7,26,68,.55);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-radius:8px;padding:.28rem .55rem;font-size:.74rem;font-weight:600;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Grand écran en paysage : deux rangées de trois photos qui défilent
   ensemble, comme les personnages. */
@media (min-width:1181px) and (min-height:640px){
  .photo-carousel{--per:3}
  .photo-carousel .carousel-track{
    display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);
    grid-auto-columns:calc((100% - (var(--per) - 1)*var(--gap))/var(--per));
  }
}

/* --- Personnages -------------------------------------------------------- */
.personnages{background:var(--paper-2)}
.persona-carousel{--per:4}
.persona{
  display:flex;flex-direction:column;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:0 8px 24px rgba(23,18,13,.06);
  transition:transform .18s ease,box-shadow .18s ease;
}
.persona:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(23,18,13,.13)}
.persona:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.persona-figure{position:relative;margin:0}
.persona-figure img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 12%}
.persona-body{padding:14px 14px 16px}
.persona h3{margin:0;color:var(--blue-dark);font-size:1.07rem;line-height:1.18}
.persona-role{margin:2px 0 .5rem;color:var(--blue);font-weight:700;font-size:.86rem}
/* Relais des costumes d'un même membre : fondu entre deux portraits. */
.persona-figure img,.persona-body,.persona-modal-panel>img,.persona-modal-role,.persona-modal-hook{transition:opacity .35s ease}
.is-fondu{opacity:0}
.persona-hook{margin:0;color:var(--muted);font-size:.9rem;line-height:1.45;font-style:italic}
/* D'où vient le costume : un repère discret sous l'accroche, pas un titre. */
.persona-contexte{
  margin:.6rem 0 0;padding-top:.5rem;border-top:1px solid var(--line);
  color:var(--muted);font-size:.8rem;line-height:1.35;
}
.persona-contexte span,.persona-modal-contexte span{display:block}

/* Grand écran en paysage : deux rangées de quatre, qui défilent ensemble.
   La hauteur des photos suit celle de l'écran pour que les deux rangées
   tiennent d'un seul regard : au format portrait habituel, huit cartes
   feraient deux fois la hauteur d'un écran d'ordinateur portable, et l'on ne
   verrait jamais les deux rangées à la fois. */
@media (min-width:1181px) and (min-height:640px){
  .persona-carousel .carousel-track{
    display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);
    grid-auto-columns:calc((100% - (var(--per) - 1)*var(--gap))/var(--per));
  }
  .persona-carousel .persona-figure img{aspect-ratio:auto;height:clamp(170px,calc(50vh - 212px),320px)}
  .persona-carousel .persona-body{padding:10px 12px 12px}
  .persona-carousel .persona h3{font-size:1rem}
  .persona-carousel .persona-role{margin-bottom:.3rem;font-size:.8rem}
  /* L'accroche occupe toujours trois lignes, même courte : la ligne d'époque
     tombe alors à la même hauteur sur toutes les cartes d'une rangée. */
  .persona-carousel .persona-hook{
    font-size:.84rem;line-height:1.4;min-height:4.2em;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width:1180px){
  .persona-carousel{--per:3}
}
@media (max-width:940px){
  .photo-carousel{--per:2}
  .persona-carousel{--per:2.4}
}
@media (max-width:620px){
  .carousel{--gap:10px}
  .photo-carousel{--per:1}
  .photo-carousel button{aspect-ratio:4/3;border-radius:12px}
  .persona-carousel{--per:1.35}
  .persona-figure img{aspect-ratio:4/5}
  .persona-body{padding:12px}
  .persona-hook{font-size:.88rem}
  .carousel-controls{margin-top:10px;gap:8px}
  .carousel-arrow{width:44px;height:44px}
  .carousel-dots{gap:0}
  .carousel-dot{width:26px;height:44px}
  .persona-carousel .carousel-dots{display:none}
  .persona-carousel .carousel-progress,.persona-carousel .carousel-counter{display:block}
  .hero-actions .button{width:100%}
  /* « Personnages » doit tenir dans sa case de la barre basse */
  .topbar .nav a,.topbar .nav-contact{font-size:.6rem;padding:.3rem .06rem!important}
}