/* PDDM — refonte. Jetons identiques aux variables Figma « PDDM / Color » et « PDDM / Scale ». */
:root{
  --red-900:#6E040E; --red-800:#910613; --red-600:#B81322; --red-400:#E8414F;
  --ink-900:#141414; --ink-850:#242323; --ink-800:#202020; --ink-700:#2C2B2B; --ink-600:#3D3C3C;
  --neutral-500:#999997; --neutral-300:#C9C7C4; --cream-300:#FFEADB; --cream-100:#FFF7F1; --white:#fff;

  --surface-base:var(--ink-900); --surface-raised:var(--ink-700); --surface-inverse:var(--cream-100);
  --surface-brand:var(--red-600); --surface-brand-deep:var(--red-900);
  --text-primary:var(--white); --text-secondary:var(--cream-300); --text-muted:var(--neutral-300);
  --text-on-light:var(--ink-900); --text-accent:var(--red-400);
  --border-subtle:var(--ink-600); --border-strong:var(--cream-300); --focus-ring:var(--red-400);

  --space-8:8px; --space-12:12px; --space-16:16px; --space-24:24px; --space-32:32px;
  --space-40:40px; --space-48:48px; --space-64:64px; --space-96:96px; --space-120:120px;
  --radius-sm:4px; --radius-md:8px; --radius-pill:999px;
  --container:1200px; --gutter:120px; --entete-h:88px;
  --font-display:"Roboto",system-ui,sans-serif; --font-body:"Montserrat",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* 17 x 1.65 = 28 px : l'interligne retombe sur l'echelle d'espacement, au lieu
   des 29.24 px de 1.72 qui ne s'alignaient sur aucun jeton. */
body{margin:0;background:var(--surface-base);color:var(--text-primary);font:400 17px/1.65 var(--font-body)}
a{color:inherit}

/* --- Images ------------------------------------------------------------
   Regle de base : une photo n'est jamais etiree. Par defaut elle garde son
   ratio naturel (height:auto). Quand un cadre fixe est necessaire, le ratio
   choisi suit l'orientation reelle du fichier, via data-orientation pose au
   build. Les portraits sont recadres vers le haut pour ne pas couper les
   visages ; les affiches ne sont jamais recadrees du tout. */
img{max-width:100%;display:block;height:auto}
/* Chaque image est enveloppee dans <picture> au build. display:contents retire
   l'enveloppe de l'arbre de rendu : le <img> reste l'element de grille ou de flex,
   et les mises en page ecrites avant le passage au srcset fonctionnent telles quelles.
   MAIS display:contents promeut aussi les <source> en elements de grille : sans la
   seconde regle, ils occupent des cellules et poussent l'image dans une rangee
   suivante. Mesure a l'appui : grille a 2 rangees et image en 0x0 sans, une seule
   rangee et image a sa place avec. */
picture{display:contents}
picture > source{display:none}
/* Image isolee : le cadre epouse l'orientation reelle du fichier. */
.cadre{width:100%;object-fit:cover;object-position:center 30%;border-radius:var(--radius-md)}
.cadre[data-orientation=paysage]{aspect-ratio:3/2}
.cadre[data-orientation=carre]{aspect-ratio:1}
.cadre[data-orientation=portrait]{aspect-ratio:3/4;object-position:center 20%}
/* DANS UNE GRILLE, c'est l'inverse : un cadre unique, sinon les cartes d'une meme
   rangee n'ont plus la meme hauteur et le texte ne s'aligne plus. L'orientation
   ne pilote alors que le point de recadrage, pas le format. */
/* 4/3 plutot que 3/2 : avec les sources verticales et carrees de la compagnie,
   un cadre moins large preserve 56 % de la photo au lieu de 50 %, et 75 % d'une
   image carree au lieu de 67 %, sans casser l'uniformite de la rangee. */
.grille .cadre,.carte .cadre{aspect-ratio:4/3}
.grille .cadre[data-orientation=portrait],.carte .cadre[data-orientation=portrait]{object-position:center 18%}
/* Portraits de personnes : cadre vertical franc, recadrage haut, toujours identique
   d'une vignette a l'autre pour que les noms partagent la meme ligne de base. */
.portrait-humain{width:100%;aspect-ratio:2/3;object-fit:cover;object-position:center 18%;border-radius:var(--radius-md)}
/* Affiches et documents : jamais recadres, le ratio du fichier fait foi.
   width:100% (et non auto) pour que les attributs width/height reservent la place
   AVANT le chargement : avec width:auto, une image differee reste a 0x0 et la page
   saute quand elle arrive. object-fit:contain garantit qu'un eventuel plafond de
   hauteur met l'affiche a l'echelle au lieu de la comprimer. */
.intacte{width:100%;height:auto;max-height:78vh;object-fit:contain;margin-inline:auto;border-radius:var(--radius-md)}
.skip-link{position:absolute;left:-9999px;background:var(--white);color:var(--ink-900);padding:12px 20px;z-index:100}
.skip-link:focus{left:0;top:0}
/* Anneau de focus creme + halo sombre : lisible aussi bien sur le fond de base
   que sur le bouton rouge, ou l'ancien anneau rouge tombait a 1.68:1. */
:where(a,button,input,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--cream-300);outline-offset:3px;box-shadow:0 0 0 6px var(--ink-900)}
.section--claire :focus-visible{outline-color:var(--red-800);box-shadow:0 0 0 6px var(--cream-100)}
.col{width:min(100% - var(--gutter)*2,var(--container));margin-inline:auto}

h1,h2,h3{font-family:var(--font-display);font-weight:700;margin:0}
.t-display{font-size:84px;line-height:.96;letter-spacing:-2.1px}
.t-h1{font-size:56px;line-height:1.04;letter-spacing:-1px}
.t-h2{font-size:40px;line-height:1.12;letter-spacing:-.6px}
.t-h3{font-size:26px;line-height:1.26;letter-spacing:-.2px}
/* Echelon intermediaire : les noms de personnes et les titres d'ateliers
   partageaient le corps des titres de cartes, trois importances pour un seul niveau. */
.t-h4{font-size:21px;line-height:1.3;letter-spacing:-.1px}
.eyebrow{font:600 13px/1.2 var(--font-body);letter-spacing:3.9px;text-transform:uppercase;color:var(--text-accent);margin:0}
/* red-400 passe sur ink-900 (4.65:1) mais pas sur la surface surelevee (3.56:1) :
   sur ce fond, les petits textes d'accent passent au creme (12.13:1). */
.section--raised .eyebrow,.section--raised blockquote footer,.interprete .meta{color:var(--cream-300)}
.lead{font:400 21px/1.62 var(--font-body)}
.meta{font:500 14px/1.5 var(--font-body);letter-spacing:.5px;text-transform:uppercase}

/* en-tete collant */
.entete{position:sticky;top:0;z-index:40;background:var(--ink-900);border-bottom:1px solid var(--border-subtle)}
.entete__in{display:flex;align-items:center;gap:var(--space-32);padding:16px 0;min-height:88px}
.entete img{width:48px;height:70px;object-fit:contain}
.nav{margin-left:auto}
.nav ul{display:flex;gap:var(--space-32);list-style:none;margin:0;padding:0}
.nav a{font:500 15px/1.4 var(--font-body);letter-spacing:.3px;text-decoration:none;padding:8px 2px;display:inline-block;border-bottom:2px solid transparent}
/* red-600 sur le fond sombre ne donnait que 2.77:1 : le soulignement actif
   passe a red-400 (4.65:1) et le libelle s'eclaircit, pour ne pas dependre
   de la seule couleur. */
.nav a:hover,.nav a:focus-visible,.nav a[aria-current=page]{border-bottom-color:var(--red-400);color:var(--cream-300)}
.actions{display:flex;gap:var(--space-12);align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:16px 32px;
  border-radius:var(--radius-pill);text-decoration:none;cursor:pointer;border:0;
  font:600 15px/1 var(--font-body);letter-spacing:.6px;text-transform:uppercase}
.btn{transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .08s ease}
.btn:active{transform:translateY(1px)}
/* Le survol assombrit au lieu d'inverser fond et texte : le bouton reagit
   sans changer d'identite. Blanc sur red-800 = 9.38:1. */
.btn--primary{background:var(--surface-brand);color:var(--white)}
.btn--primary:hover{background:var(--red-800)}
.btn--ghost{background:transparent;color:var(--text-secondary);border:1.5px solid var(--border-strong)}
.btn--ghost:hover{background:var(--cream-300);color:var(--ink-900)}
.menu-btn{display:none;width:48px;height:48px;background:none;border:1px solid var(--neutral-500);border-radius:var(--radius-sm);cursor:pointer}
.menu-btn span{display:block;width:24px;height:2px;background:var(--white);margin:5px auto}
/* NAV_JS pose deja cet attribut : sans cette regle, la page continuait de
   defiler derriere le panneau de menu ouvert. */
body[data-menu-ouvert]{overflow:hidden}

/* heros */
.heros{position:relative;isolation:isolate;min-height:640px;display:grid;align-items:center}
/* Classe plutot que selecteur d'enfant direct : l'enveloppe <picture> ajoutee
   au build s'intercale entre .heros et le <img>. */
.heros__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;z-index:-2}
.heros::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(20,20,20,.95) 0%,rgba(20,20,20,.62) 55%,rgba(20,20,20,.18) 100%)}
.heros__in{padding:var(--space-96) 0;max-width:660px}
/* Quand la seule photo disponible est verticale, un heros pleine largeur la
   recadrerait de moitie. On passe alors en heros scinde : la photo garde son
   cadrage integral a cote du texte, au lieu d'etre amputee derriere. */
.heros--portrait{min-height:0;display:block;background:var(--surface-base)}
.heros--portrait::after{content:none}
.heros--portrait__in{display:grid;grid-template-columns:1fr minmax(300px,400px);
  gap:var(--space-64);align-items:center;padding:var(--space-96) 0}
.heros--portrait .heros__in{padding:0;max-width:none}
.heros h1{margin:var(--space-16) 0}
.heros .lead{color:var(--text-secondary);margin:0 0 var(--space-24)}
.puces{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0 0 var(--space-24)}
.puces li{border:1px solid var(--border-strong);border-radius:var(--radius-pill);padding:8px 16px;
  font:500 14px/1.5 var(--font-body);letter-spacing:.5px;text-transform:uppercase;color:var(--text-secondary)}
.heros .actions{flex-wrap:wrap}

/* sections */
.section{padding:var(--space-96) 0}
/* Deux sections consecutives cumulaient 96+96 px : le rythme est differencie
   pour que la page respire sans se diluer. */
.section + .section,.heros + .section{padding-top:var(--space-64)}
.section--brand{padding:var(--space-64) 0}
/* Longueur de ligne : au-dela de ~66 caracteres l'oeil perd la ligne suivante. */
.section p:not(.lead):not(.eyebrow):not(.meta){max-width:66ch}
.section--claire{background:var(--surface-inverse);color:var(--text-on-light)}
.section--claire .eyebrow{color:var(--surface-brand)}
.section--raised{background:var(--surface-raised)}
.section--brand{background:var(--surface-brand-deep)}
.section__tete{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-24);margin-bottom:var(--space-48)}
.grille{display:grid;gap:var(--space-24)}
.grille--3{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.grille--2{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}
.grille--4{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

/* cartes */
.carte{background:var(--surface-raised);border-radius:var(--radius-md);overflow:hidden;position:relative}
.carte img{border-radius:0}
.carte__corps{padding:var(--space-24);display:grid;gap:var(--space-12)}
.carte h3 a{text-decoration:none}
.carte h3 a::after{content:"";position:absolute;inset:0}
.carte{transition:outline-color .18s ease}
.carte:hover{outline:2px solid var(--red-600)}
/* Toute la carte est cliquable : au clavier, c'est toute la carte qui doit
   se signaler, pas seulement le titre. */
.carte:has(a:focus-visible){outline:3px solid var(--cream-300);outline-offset:2px}
.carte .meta{color:var(--text-muted);margin:0}

.synopsis{display:grid;grid-template-columns:1fr 400px;gap:var(--space-64);align-items:start}
.synopsis p{margin:0 0 var(--space-24)}
.synopsis img{position:sticky;top:calc(var(--entete-h) + var(--space-24))}
.credits{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-48) var(--space-32);margin:var(--space-40) 0 0}
.credits__groupe h3{margin:0 0 var(--space-16);padding-bottom:10px;border-bottom:1px solid var(--border-subtle);color:var(--text-accent)}
.credits__groupe dl{margin:0;display:grid;gap:var(--space-16)}
.credits dt{font:600 13px/1.2 var(--font-body);letter-spacing:3.9px;text-transform:uppercase;color:var(--text-muted)}
.credits dd{margin:6px 0 0;font:600 17px/1.5 var(--font-body)}
.interpretes{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-40) var(--space-24)}
.interprete img{margin-bottom:var(--space-16)}
.interprete h3{margin:0 0 6px}
.interprete .meta{color:var(--text-accent);margin:0 0 var(--space-12)}
.interprete p{margin:0;color:var(--text-muted)}
/* Galerie en maconnerie : chaque photo garde son ratio, rien n'est recadre. */
.galerie{columns:3;column-gap:var(--space-16)}
.galerie img{width:100%;height:auto;margin:0 0 var(--space-16);break-inside:avoid;border-radius:var(--radius-md)}
@media (max-width:1024px){.galerie{columns:2}}
@media (max-width:620px){.galerie{columns:1}}
.bande{display:grid;grid-template-columns:1fr auto;gap:var(--space-64);align-items:center}
.bande p{color:var(--text-secondary);margin:var(--space-16) 0 0}
.piliers{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-24)}
.pilier .regle{width:48px;height:3px;background:var(--surface-brand);margin-bottom:var(--space-12)}
.note{color:var(--text-muted);font:500 14px/1.6 var(--font-body);margin:var(--space-24) 0 0}
.carte-claire{background:var(--white);border-radius:var(--radius-md);padding:var(--space-32)}
.ateliers{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-24);list-style:none;padding:0;margin:0}
.ateliers li{background:var(--surface-raised);border-radius:var(--radius-md);padding:28px}
/* 40 px mettait le numero au niveau d'un titre de section, au-dessus de son
   propre intitule : le chiffre dominait le contenu. */
.ateliers b{display:block;font:700 30px/1.1 var(--font-display);color:var(--cream-300)}
.objectifs{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:12px var(--space-24);list-style:none;padding:0;margin:var(--space-24) 0 0}
.logo-boite{background:var(--white);border-radius:var(--radius-md);height:200px;display:grid;place-items:center;padding:var(--space-24)}
.logo-boite img{max-width:100%;max-height:150px;width:auto;height:auto;object-fit:contain}
.formulaire{background:var(--surface-raised);border-radius:var(--radius-md);padding:var(--space-40);display:grid;gap:var(--space-16)}
.champ{display:grid;gap:8px}
.champ label{font:500 14px/1.5 var(--font-body);letter-spacing:.5px;text-transform:uppercase;color:var(--text-secondary)}
/* border-subtle sur ink-900 ne donnait que 1.68:1 : un champ de saisie
   doit se voir, sa bordure passe a neutral-500 (6.45:1). */
.champ input,.champ textarea{background:var(--ink-900);border:1px solid var(--neutral-500);border-radius:var(--radius-sm);
  color:var(--text-primary);font:400 17px/1.5 var(--font-body);padding:14px}
.champ input:focus,.champ textarea:focus{border-color:var(--cream-300)}
.champ textarea{min-height:140px;resize:vertical}
.coordonnees{display:grid;gap:var(--space-32);margin:0}
.coordonnees dt{font:600 13px/1.2 var(--font-body);letter-spacing:3.9px;text-transform:uppercase;color:var(--text-muted)}
.coordonnees dd{margin:8px 0 0;font:400 21px/1.5 var(--font-body)}
blockquote{margin:0;font-family:var(--font-display);font-weight:700;font-size:40px;line-height:1.12}
blockquote footer{margin-top:var(--space-16);font:500 14px/1.5 var(--font-body);letter-spacing:.5px;text-transform:uppercase;color:var(--text-accent)}

/* pied de page */
.pied{background:var(--ink-900);padding:var(--space-96) 0 var(--space-48)}
.pied__cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-48)}
.pied h2{font:600 13px/1.2 var(--font-body);letter-spacing:3.9px;text-transform:uppercase;color:var(--text-accent);margin:0 0 var(--space-16)}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pied a{color:var(--text-muted);text-decoration:none}
.pied a:hover{color:var(--text-primary)}
.pied__bas{border-top:1px solid var(--border-subtle);margin-top:var(--space-64);padding-top:var(--space-24);
  display:flex;justify-content:space-between;gap:var(--space-24);flex-wrap:wrap;color:var(--text-muted)}

@media (max-width:860px){ .heros--portrait__in{grid-template-columns:1fr} }
@media (max-width:1024px){
  :root{--gutter:48px}
  .t-display{font-size:60px;letter-spacing:-1.4px}
  .t-h1{font-size:42px}
  .nav{position:fixed;inset:var(--entete-h) 0 auto;background:var(--ink-900);padding:var(--space-24) var(--gutter);
    display:none;border-bottom:1px solid var(--border-subtle);
    max-height:calc(100dvh - var(--entete-h));overflow:auto}
  .nav[data-ouvert]{display:block}
  .nav ul{flex-direction:column;gap:0}
  .nav a{display:block;padding:16px 0;border-bottom:1px solid var(--border-subtle)}
  .menu-btn{display:block}
  .entete .actions .btn--ghost{display:none}
  .synopsis{grid-template-columns:1fr}
  .synopsis img{max-width:420px}
  .bande{grid-template-columns:1fr}
}
@media (max-width:768px){
  :root{--gutter:24px}
  .t-display{font-size:44px;line-height:1;letter-spacing:-1px}
  .t-h1{font-size:34px} .t-h2{font-size:30px} .t-h3{font-size:22px} .t-h4{font-size:18px}
  .lead{font-size:19px;line-height:1.64}
  body{font-size:16px}
  .section{padding:var(--space-64) 0}
  /* Sur telephone, un heros pleine hauteur imposait un cadre presque carre :
     la banniere des formations (2.88:1) n'y montrait plus qu'un quart de sa
     largeur, soit une autre photo. Le heros se decompose donc : la photo passe
     au-dessus, a son ratio naturel et sans aucun recadrage, et le texte vient
     dessous sur fond plein — ou il est de toute facon plus lisible. */
  .heros{min-height:0;display:block;background:var(--surface-base)}
  .heros::after{content:none}
  .heros__img{position:static;width:100%;height:auto;z-index:auto}
  .heros__in{padding:var(--space-40) 0 var(--space-48)}
  .section__tete{flex-direction:column;align-items:flex-start}
  .btn{width:100%}
  .actions{width:100%;flex-wrap:wrap}
  .entete .actions{width:auto}
  .entete .actions .btn{width:auto}
  blockquote{font-size:30px}
}
@media (max-width:480px){ :root{--gutter:20px} }
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}