/* ============================================================
   PAGES DE PROJET
   Elles reprennent tout de la feuille du site — barre, boutons, pastilles,
   pied — et n'ajoutent que leur mise en page : une tête (le nom, ce qu'on a
   fait, la fiche), une grande image, puis des rangées texte / images qui
   alternent, et le projet suivant pour finir.
   Une seule couleur leur est propre : `--fond-projet`, le fond des scènes,
   prise dans l'univers du client et posée sur `<main>`.
   ============================================================ */
.pp{
  --fond-projet:var(--sable);
  --marge-carte:clamp(.8rem,1.4vw,1.3rem);
  padding-top:calc(var(--haut-barre) + clamp(2.6rem,7vh,5rem));
}

/* --- La tête : le nom à gauche, la fiche à droite --- */
.pp-tete{
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:2rem clamp(2rem,5vw,6rem); align-items:start;
}
.pp h1{
  font-size:clamp(2.7rem,7.4vw,8rem); max-width:none;
  /* Sans script, le titre est là d'emblée. */
}
html:not(.js) .pp h1{ opacity:1; transform:none; }
/* La seconde moitié du titre : ce qu'on a fait, pour qui. Elle compte pour
   le référencement autant que le nom, sans lui disputer la place. */
.pp-h1-suite{
  /* Toute la largeur de la colonne : deux lignes plutôt que trois. */
  display:block; margin-top:.55em; max-width:none;
  font-size:clamp(1.15rem,1.75vw,1.7rem); font-weight:300;
  line-height:1.35; letter-spacing:-.012em; color:var(--noir);
}
.pp-fiche{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.1rem 1.6rem;
  /* La fiche part du haut des lettres du titre : l'interligne serré du titre
     laisse 0,15 em au-dessus des capitales ; la ligne de « Client », elle,
     en laisse un peu au-dessus des siennes. */
  margin-top:calc(.15 * clamp(2.7rem,7.4vw,8rem) - .2rem);
}
.pp-fiche dt{
  font-size:.78rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gris-texte); margin-bottom:.2rem;
}
.pp-fiche dd{ font-size:var(--corps); font-weight:500; line-height:1.35; }
.pp-fiche a{ text-decoration:underline; text-underline-offset:.18em; text-decoration-thickness:1px; }
.pp-fiche a:hover{ color:var(--orange); }
/* Le lien vers le projet en ligne : un bouton, en dernière case de la fiche. */
.pp-fiche-lien{ align-self:center; }
.pp-fiche .jeton{ text-decoration:none; }
.pp-fiche .jeton:hover{ color:var(--blanc); }

/* --- La scène : un aplat arrondi qui porte une image ---
   L'écran y est posé avec de l'air autour, et file sous le bord bas : on lit
   un site, pas une capture encadrée. */
.scene{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:var(--rayon); background:var(--fond-projet);
}
.scene--une{ margin-top:clamp(2.4rem,5vw,4.5rem); }
/* Elle tient entière dans l'écran, sous la barre : sa largeur se déduit de
   la hauteur disponible et du format de l'image (`--ratio`, posé par le
   générateur). Une ombre la détache du fond de page — une capture de site
   blanche s'y confondait. */
.scene--une{
  width:min(100%, calc((100svh - var(--haut-barre) - 2.5rem) * var(--ratio, 1.6)));
  margin-inline:auto;
  box-shadow:0 34px 70px -34px rgba(34,31,32,.42), var(--ombre-barre);
}
/* La première image prend toute la scène : pas de cadre dans le cadre, les
   pastilles et le bouton se posent dessus. */
.scene--une:not(.scene--signe){ padding:0; }
.scene--une .navigateur{ border-radius:0; box-shadow:none; }
.scene--une .navigateur::before{ display:none; }
/* Sur une scène, les pastilles montent en haut à gauche, en face du bouton :
   en bas, elles tombaient sur le texte des captures. */
.scene .projet-pastilles{ top:var(--marge-carte); bottom:auto; right:auto; }
.scene-bouton{
  position:absolute; z-index:3; top:var(--marge-carte); right:var(--marge-carte);
}

/* La fenêtre de navigateur : trois pois, puis la page. */
.navigateur{
  position:relative; overflow:hidden;
  border-radius:calc(var(--rayon) * .7); background:var(--blanc);
  box-shadow:0 30px 70px -25px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.05);
}
/* Les pois sont trois dégradés ronds : pas d'élément à ajouter dans chaque
   fenêtre. Leur rayon, leur pas et leur retrait se déduisent de la hauteur
   de la barre. */
.navigateur::before{
  --h:clamp(1.4rem,2.4vw,2.2rem);
  --p:calc(var(--h) * .13); --pas:calc(var(--h) * .42); --x:calc(var(--h) * .55);
  content:''; display:block; height:var(--h);
  background:
    radial-gradient(circle at var(--x) 50%, var(--pois,#d1d3d4) var(--p), transparent calc(var(--p) + .6px)),
    radial-gradient(circle at calc(var(--x) + var(--pas)) 50%, var(--pois,#d1d3d4) var(--p), transparent calc(var(--p) + .6px)),
    radial-gradient(circle at calc(var(--x) + 2 * var(--pas)) 50%, var(--pois,#d1d3d4) var(--p), transparent calc(var(--p) + .6px));
}
.navigateur--sombre{ background:#151515; --pois:#3a3a3a; }
.navigateur--nu::before{ display:none; }
.navigateur img, .navigateur video{ display:block; width:100%; height:auto; }

/* Le téléphone : les proportions d'un iPhone, quelle que soit sa taille. Un
   bord fin (2,4 % de la largeur, comme partout sur le site), un écran arrondi à 15 %. Les pourcentages
   verticaux se rapportent à la hauteur, d'où le second jeu de valeurs. */
.tel{
  position:relative; aspect-ratio:390/844;
  border-radius:15% / 6.93%;
  background:#121212; box-shadow:0 28px 60px -22px rgba(0,0,0,.45);
}
.tel img{
  position:absolute; left:2.4%; top:1.11%; width:95.2%; height:97.78%;
  display:block; object-fit:cover; object-position:top;
  border-radius:13.2% / 5.95%;
}

/* --- Les rangées ---
   Un texte et une image, côte à côte ; `--inverse` met l'image à gauche.
   L'image prend la plus grande part : c'est elle qu'on vient voir. */
.pp-rangee{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  gap:2rem clamp(2rem,5vw,6rem); align-items:center;
  margin-top:clamp(5rem,11vw,10rem);
}
.pp-rangee--inverse{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); }
.pp-rangee--inverse > .pp-texte{ order:2; }
.pp-rangee--haut{ align-items:start; }

.pp-texte h2{
  font-size:clamp(1.9rem,3.4vw,3.5rem); max-width:16ch;
}
.pp-texte p{ margin-top:clamp(1rem,1.8vw,1.5rem); font-size:var(--corps); line-height:1.65; max-width:46ch; }
.pp-texte p + p{ margin-top:1em; }
.pp-texte strong{ font-weight:500; }
.pp-texte ul{ margin-top:clamp(1rem,1.8vw,1.5rem); display:flex; flex-direction:column; gap:.6rem; }
.pp-texte li{ position:relative; padding-left:1.15rem; font-size:var(--corps); line-height:1.5; max-width:44ch; }
.pp-texte li::before{
  content:''; position:absolute; left:0; top:calc(.75em - .21rem);
  width:.42rem; height:.42rem; border-radius:50%; background:var(--orange);
}

/* Une section qui ouvre sur toute la largeur : son titre, puis ses images. */
.pp-section{ margin-top:clamp(5rem,11vw,10rem); }
.pp-section > .pp-texte{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem clamp(2rem,5vw,6rem); align-items:end; }
.pp-section > .pp-texte p{ margin-top:0; }
/* Les blocs d'une même section se suivent à l'écart d'une gouttière ; le
   premier, sous le texte, prend plus d'air. */
.pp-section > * + *{ margin-top:clamp(.8rem,1.8vw,1.6rem); }
.pp-section > .pp-texte + *{ margin-top:clamp(2rem,4vw,3.5rem); }
.pp-section > .legende{ margin-top:.8rem; }

/* --- Les images --- */
.media{ position:relative; overflow:hidden; border-radius:var(--rayon); background:var(--fond-projet); }
.media > img{ display:block; width:100%; height:auto; }
.media--blanc{ background:var(--blanc); box-shadow:var(--ombre-barre); }
.media--cadre{ padding:clamp(1rem,4vw,3.5rem); }
/* Un logo seul sur le blanc : centré, à une taille de logo. */
.media--logo{ display:grid; place-items:center; aspect-ratio:4/3; }
.media--logo{ padding:0; }
.media--logo > img{ width:min(72%,34rem); }
.legende{
  margin-top:.8rem; font-size:calc(.9 * var(--corps)); line-height:1.45;
  color:var(--gris-texte);
}

/* Une image seule, à la taille d'une case de la grille qui la suit, centrée. */
.pp-moitie{ width:calc((100% - clamp(.8rem,1.8vw,1.6rem)) / 2); margin-inline:auto; }
@media (max-width:560px){ .pp-moitie{ width:100%; } }

.grille-media{
  display:grid; grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));
  gap:clamp(.8rem,1.8vw,1.6rem); align-items:start;
}
/* Des carrés : le logo seul et le logo sur papier n'ont pas le même format,
   la case le leur donne. */
.grille-media--carre > .media{ aspect-ratio:1; }
.grille-media--carre > .media > img{ width:100%; height:100%; object-fit:cover; }
.grille-media--carre > .media--cadre{ display:grid; place-items:center; }
.grille-media--carre > .media--cadre > img{ object-fit:contain; }

/* Trois téléphones, le premier un peu plus haut : on les voit comme une
   suite d'écrans, pas comme une rangée d'objets. Ils gardent la taille d'un
   téléphone tenu en main, et non celle d'un tiers de la page. */
.scene--tels{
  display:grid; grid-template-columns:repeat(3,min(14rem,30%));
  justify-content:center;
  gap:clamp(1rem,4vw,4.5rem); align-items:start;
  padding:clamp(2rem,6vw,6rem) clamp(1.2rem,9vw,11rem) 0;
}
.scene--tels{ padding-bottom:clamp(3rem,7vw,7rem); }
.scene--tels .tel:nth-child(2){ margin-top:clamp(1.5rem,4vw,4rem); }
.scene--tels .tel:nth-child(3){ margin-top:clamp(.75rem,2vw,2rem); }

/* Deux écrans côte à côte, le français et l'anglais. */
.scene--duo{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,3vw,3rem); padding:clamp(1.4rem,5vw,5rem);
}
.scene--duo figure{ margin:0; }
.scene--duo figcaption{
  margin-top:.9rem; font-size:.78rem; font-weight:500; letter-spacing:.09em;
  text-transform:uppercase; color:var(--gris-texte);
}
.scene--sombre figcaption{ color:rgba(255,255,255,.6); }

/* Un écran en plein cadre, et son téléphone posé dessus, entier, en bas à
   droite. */
.scene--paire{
  padding:0;
  /* Le contour et l'ombre des fenêtres de navigateur de la page. */
  border-radius:calc(var(--rayon) * .7);
  box-shadow:0 30px 70px -25px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.05);
}
.scene--paire .navigateur{ border-radius:0; box-shadow:none; }
/* La capture est coupée sous le chapô : plus bas commençaient une photo et
   un titre, à moitié visibles. */
.scene--paire .navigateur img{ aspect-ratio:2000/1180; object-fit:cover; object-position:top; }
.scene--paire .tel{
  position:absolute; right:5%; bottom:6%; width:19%;
  box-shadow:0 24px 50px -16px rgba(0,0,0,.55);
}

/* Un seul téléphone, au milieu de la scène. */
.scene--un{ grid-template-columns:minmax(0,1fr); justify-items:center; padding-inline:0; }
.scene--un .tel{ width:min(17rem,52%); }

/* Le signe Lybe, animé, sur le blanc de sa vidéo : la scène prend ce blanc,
   il n'y a donc aucun raccord à voir. */
.scene--signe{
  --fond-projet:var(--blanc);
  /* Le format de la scène est écrit : la vidéo s'y centre. */
  aspect-ratio:var(--ratio, 1.6); display:grid; place-items:center;
  padding:6% 14% 9%;
}
.signe-grand{ display:block; width:100%; height:100%; min-height:0; object-fit:contain; }
html:not(.js) .scene--signe{ background:var(--blanc) url("../Assets/realisations/lybe/signe-poster.jpg?v=d8876dfb") center/70% auto no-repeat; }

/* Une scène sans aplat : les images se posent sur la page. */
.scene--sans-fond{ background:none; padding-inline:0; overflow:visible; }
.scene--tels.scene--sans-fond{ padding-top:0; padding-bottom:clamp(1.5rem,3vw,2.5rem); }
.scene--sans-fond.scene--affiche, .scene--sans-fond.scene--logo{ padding:0; }
.scene--sans-fond.scene--deux{ padding:0; }
/* Une capture de site sombre, bord à bord. */
.media--sombre{ background:#000; }

/* Les illustrations et le lettrage côte à côte. */
.pp-planche{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(.8rem,1.8vw,1.6rem); align-items:stretch;
}
.pp-planche > .media--cadre{ display:grid; place-items:center; }

/* La planche d'illustrations : des pièces détourées, sur le blanc. */
.illustrations{
  display:grid; grid-template-columns:repeat(var(--cols,6),minmax(0,1fr));
  gap:clamp(.8rem,2vw,2rem); align-items:center;
  padding:clamp(1.4rem,4vw,3.5rem); border-radius:var(--rayon); background:var(--blanc);
  box-shadow:var(--ombre-barre);
}
.illustrations img{ display:block; width:100%; height:auto; }

/* La scène sans marge : une photo, bord à bord. */
.scene--plein{ padding:0; }
.scene--plein > img{ display:block; width:100%; height:auto; }

/* Le logo seul, au centre d'une scène. */
.scene--logo{ display:grid; place-items:center; padding:clamp(2rem,6vw,5rem); }
.scene--logo img{ width:min(100%,24rem); height:auto; }

/* Une affiche debout, au centre. */
.scene--affiche{ display:grid; place-items:center; padding:clamp(1.6rem,5vw,4.5rem); }
.scene--affiche .media{ width:min(100%,26rem); box-shadow:0 30px 60px -25px rgba(0,0,0,.35); }

/* Les volets d'un dépliant, côte à côte, comme posés à plat. */
.scene--volets{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px;
  padding:clamp(1.4rem,5vw,4.5rem) clamp(1.2rem,9vw,10rem);
}
.scene--volets img{ display:block; width:100%; height:auto; }

/* Deux formats ensemble : le haut et le large. */
.scene--deux{
  display:grid; grid-template-columns:minmax(0,.55fr) minmax(0,1fr);
  gap:clamp(.8rem,2vw,1.6rem); align-items:center; padding:clamp(1.2rem,4vw,3.5rem);
}
.grille-media--posts .media{ border-radius:calc(var(--rayon) * .6); }
.pp-bandeau{ margin-top:clamp(.8rem,1.8vw,1.6rem); }
/* Le bandeau n'existe qu'en 1128 px : il garde sa taille au lieu d'être
   agrandi, et se centre. */
.pp-bandeau{ max-width:1128px; margin-inline:auto; }

/* Le crédit de l'agence d'origine, discret : son logo, à la taille d'une
   ligne de la fiche. */
.credit{ display:inline-flex; align-items:center; gap:.55rem; text-decoration:none !important; }
.credit img{ width:2.6rem; height:2.6rem; border-radius:var(--rayon-petit); }
.credit span{ text-decoration:underline; text-underline-offset:.18em; text-decoration-thickness:1px; }

/* --- Les chiffres --- */
.chiffres{
  display:grid; grid-template-columns:repeat(var(--n,4),minmax(0,1fr));
  gap:1.5rem clamp(1.5rem,3vw,3rem);
  margin-top:clamp(5rem,11vw,10rem); padding-top:clamp(1.6rem,3vw,2.4rem);
  border-top:1.5px solid var(--gris);
}
.chiffre-val{
  display:block; font-size:clamp(2.4rem,4.6vw,4.8rem); font-weight:500;
  line-height:1; letter-spacing:-.04em;
}
.chiffre-val small{ font-size:.42em; letter-spacing:-.01em; }
.chiffre-nom{ display:block; margin-top:.6rem; font-size:var(--corps); line-height:1.4; color:var(--gris-texte); max-width:22ch; }

/* --- La fenêtre qui défile (exposition Terre Fragile) ---
   Le film parcourt la page de haut en bas, puis remonte ; la molette le
   prend en main, dans un sens comme dans l'autre. */
/* Le film fait 1280 × 700 : la fenêtre en garde le format exact (rien n'est
   rogné en largeur), ne dépasse jamais sa taille réelle (pas d'image
   agrandie, donc pas de pixels), et tient dans l'écran, sous la barre. */
.defile{
  aspect-ratio:1280/700; margin-inline:auto;
  width:min(100%, 1280px, calc((100svh - var(--haut-barre) - 4rem) * 1280 / 700));
}
.defile video{ width:100%; height:100%; object-fit:cover; object-position:center top; background:#000; }
.indice{
  position:absolute; left:50%; bottom:.9rem; z-index:2;
  display:inline-flex; align-items:center; gap:.42rem;
  padding:.32rem .85rem; border-radius:6rem;
  background:var(--verre); -webkit-backdrop-filter:var(--flou); backdrop-filter:var(--flou);
  font-size:.78rem; font-weight:500; color:var(--noir); white-space:nowrap;
  transform:translateX(-50%); transition:opacity .45s var(--ease);
}
.indice svg{ width:.82rem; height:.82rem; fill:none; stroke:var(--noir); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.parcouru .indice{ opacity:0; }
@media (hover:none){ .indice{ display:none; } }

/* --- La fin : le projet suivant, et l'appel --- */
.pp-fin{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2.5rem,5vw,6rem); align-items:end;
  margin-top:clamp(6rem,13vw,12rem);
}
.pp-fin .projet{ --encoche:var(--blanc); }
.appel{
  padding:clamp(1.6rem,3.5vw,3rem); border-radius:var(--rayon); background:var(--sable);
}
.appel h2{ font-size:clamp(1.9rem,3.4vw,3.4rem); max-width:13ch; }
.appel p{ margin-top:1.1rem; font-size:var(--corps); line-height:1.6; max-width:38ch; }
.appel .jeton{ margin-top:clamp(1.4rem,2.6vw,2rem); }
.pp-fin-etiquette{ margin-bottom:1.1rem; }
.pp + .pied{ margin-top:clamp(4rem,8vw,7rem); }

/* --- La page des réalisations, et la page introuvable --- */
.pp-galerie .appel{ margin-top:clamp(5rem,10vw,8rem); max-width:40rem; }

/* Les filtres : un bouton par métier, avec le nombre de projets. Celui qui
   est choisi passe en noir. Sans script, ils n'apparaissent pas. */
.filtres{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:clamp(2rem,4vw,3.2rem); }
html:not(.js) .filtres{ display:none; }
.filtre{ --btn-py:.78rem; --btn-px:1.35rem; }
.filtre-nombre{ margin-left:.4em; font-size:.82em; color:var(--gris-texte); }
.filtre[aria-pressed="true"]{ color:var(--blanc); }
.filtre[aria-pressed="true"]::before{ background:var(--noir); box-shadow:none; }
.filtre[aria-pressed="true"] .filtre-nombre{ color:var(--gris); }

/* Tous les projets, en lignes alignées : pas de quinconce ici. */
.grille-projets{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(2.6rem,4.4vw,4.6rem) clamp(1.2rem,2.4vw,3rem); align-items:start;
  margin-top:clamp(2rem,4vw,3.2rem);
}
.grille-projets > .projet[hidden]{ display:none; }
/* La page est blanche : l'encoche du titre prend ce blanc, et non le sable
   de la section de l'accueil. */
.grille-projets .projet{ --encoche:var(--blanc); }
/* Au changement de filtre, les cartes glissent à leur nouvelle place. */
::view-transition-group(*){ animation-duration:.5s; animation-timing-function:cubic-bezier(.2,.8,.2,1); }
@media (max-width:900px){ .grille-projets{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .grille-projets{ grid-template-columns:minmax(0,1fr); } }
.pp-tete--seule{ grid-template-columns:minmax(0,1fr); }
.pp-tete--seule h1{ max-width:22ch; }
.pp-404 .actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:clamp(1.8rem,3vw,2.6rem); opacity:1; transform:none; }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:900px){
  .pp-tete, .pp-rangee, .pp-rangee--inverse, .pp-section > .pp-texte, .pp-fin{ grid-template-columns:minmax(0,1fr); }
  .pp-rangee--inverse > .pp-texte{ order:0; }
  .pp-texte h2{ max-width:none; }
  .chiffres{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .scene--duo{ grid-template-columns:minmax(0,1fr); }
  .scene--paire .tel{ width:24%; }
  .pp-planche{ grid-template-columns:minmax(0,1fr); }
  .scene--tels{ padding-inline:1rem; gap:.8rem; }
  .illustrations{ --cols:3; }
  .grille-media{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grille-media--seul-mobile{ grid-template-columns:minmax(0,1fr); }
  .scene .projet-pastilles{ display:none; }
  .grille-media--posts{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .scene--volets{ padding-inline:1rem; }
  .scene--deux{ grid-template-columns:minmax(0,1fr); }
  .scene--deux .media:first-child{ width:min(100%,18rem); justify-self:center; }
}
@media (max-width:560px){
  .grille-media{ grid-template-columns:minmax(0,1fr); }
  .pp-fiche{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}

/* Une maquette de taille modeste : posée au centre de sa scène, à sa taille
   réelle au plus, plutôt qu'agrandie et floue. */
.scene--maquette{ display:grid; place-items:center; padding:clamp(2rem,6vw,5.5rem) clamp(1.2rem,5vw,4rem); }
.scene--maquette .media{ width:min(100%,50rem); box-shadow:0 30px 60px -25px rgba(0,0,0,.3); }

/* ============================================================
   CONVERTGENCE : LES VISUELS RECONSTRUITS
   Le montage du haut, les fiches des langues et les fenêtres de l'envoi sont
   dessinés en HTML, d'après le site et l'application : le texte reste net à
   toutes les tailles, et le montage passe du français à l'anglais. Le montage
   et les fenêtres se mesurent en cqw (la largeur de leur cadre) : ils gardent
   leurs proportions, comme une image. Police du système : celle de l'app.
   ============================================================ */
.cg-scene{ container-type:inline-size; }
.cg-montage, .cg-envoi, .cg-langues{
  --cg-vert:#0F7F12; --cg-texte:#151815; --cg-doux:#5A635A; --cg-bord:#E0E6E0;
  --cg-choisi:rgba(15,127,18,.13); --cg-lavis:rgba(15,127,18,.09);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  color:var(--cg-texte); -webkit-font-smoothing:antialiased; letter-spacing:0;
}

/* --- Le montage : logo, titre, portable, et six pastilles qui flottent --- */
.cg-montage{
  position:relative; aspect-ratio:1.6; overflow:hidden;
  background:radial-gradient(ellipse 70% 62% at 50% 70%, #E3F4E2 0%, #F2FAF1 55%, #fff 100%);
}
.cg-halo{ position:absolute; border-radius:50%; filter:blur(7cqw); }
.cg-halo--a{ left:22%; top:42%; width:30%; height:44%; background:#5BD45F; opacity:.3; }
.cg-halo--b{ left:48%; top:40%; width:30%; height:44%; background:#2FB534; opacity:.24; }
.cg-halo--c{ left:33%; top:70%; width:34%; height:30%; background:#5BD45F; opacity:.22; }
.cg-logo{ position:absolute; left:50%; top:5.5%; width:20cqw; height:auto; translate:-50% 0; }
.cg-titre{
  position:absolute; left:0; right:0; top:13%; margin:0;
  display:grid; justify-items:center; text-align:center;
  font-size:4.3cqw; line-height:1.04; letter-spacing:-.035em; font-weight:780;
}
.cg-titre em{ font-style:normal; color:var(--cg-vert); }
.cg-portable{ position:absolute; left:25%; top:36.5%; width:50%; filter:drop-shadow(0 1.6cqw 2.6cqw rgba(0,0,0,.22)); }
.cg-chassis{ display:block; width:100%; height:auto; }
/* L'écran, mesuré au pixel dans le portable (2408 × 1472), et la fenêtre de
   l'app posée dedans, comme sur convertgence.app. */
.cg-dalle{
  position:absolute; left:8.223%; top:.883%; width:83.472%; height:89.266%;
  overflow:hidden; border-radius:2% 2% 0 0 / 3.5% 3.5% 0 0; background:#0B1418;
}
.cg-dalle img{ display:block; width:100%; height:100%; object-fit:cover; }
.cg-fenetre{
  position:absolute; left:12.4%; top:7%; width:75.12%; display:grid;
  border-radius:2.31% / 3.68%; overflow:hidden; box-shadow:0 1cqw 2.2cqw rgba(0,0,0,.45);
}
.cg-fenetre img{ display:block; width:100%; height:auto; }
/* Le français et l'anglais occupent la même case : l'un s'efface, l'autre
   paraît. La case prend la taille du plus long des deux. */
.cg-titre > span, .cg-fenetre > img, .cg-mots > span{ grid-area:1/1; transition:opacity .7s ease; }
.cg-montage[data-langue="fr"] .en, .cg-montage[data-langue="en"] .fr{ opacity:0; }
.cg-pastille{
  position:absolute; z-index:2; left:var(--x); top:var(--y); translate:-50% -50%;
  display:inline-flex; align-items:center; gap:1.1cqw;
  height:4.7cqw; padding:0 2.3cqw 0 1.8cqw; border-radius:9cqw;
  background:#fff; border:1px solid rgba(21,24,21,.05);
  box-shadow:0 .9cqw 2.2cqw rgba(21,24,21,.1), 0 .15cqw .4cqw rgba(21,24,21,.05);
  font-size:2cqw; font-weight:600; letter-spacing:-.02em; white-space:nowrap;
}
.cg-mots{ display:grid; }
.cg-picto{ flex:none; fill:none; stroke:var(--cg-vert); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.cg-pastille .cg-picto{ width:2.4cqw; height:2.4cqw; }
/* Elles flottent : chacune à son rythme, de quelques pixels. */
@media (prefers-reduced-motion:no-preference){
  .cg-pastille{ animation:cg-flotte calc(5s + var(--n) * .7s) ease-in-out calc(var(--n) * -1.9s) infinite alternate; }
}
@keyframes cg-flotte{
  from{ transform:translateY(-.45cqw) rotate(-.7deg); }
  to{ transform:translateY(.45cqw) rotate(.7deg); }
}
/* Sur un téléphone, le cadre carré des visuels de campagne. */
@container (max-width:600px){
  .cg-montage{ aspect-ratio:1; }
  .cg-logo{ top:4.1%; width:33cqw; }
  .cg-titre{ top:12.6%; font-size:6cqw; }
  .cg-portable{ left:14.35%; top:42.4%; width:71.3%; }
  .cg-halo--a{ left:9%; top:42%; width:44%; height:41%; }
  .cg-halo--b{ left:47%; top:39%; width:44%; height:41%; }
  .cg-halo--c{ left:25%; top:68%; width:50%; height:28%; }
  .cg-pastille{
    left:var(--xm); top:var(--ym); translate:var(--am,-50%) -50%;
    height:8.15cqw; gap:1.67cqw; padding:0 3.7cqw 0 3cqw; font-size:3.43cqw;
  }
  .cg-pastille .cg-picto{ width:3.9cqw; height:3.9cqw; }
}

/* --- Les cinq langues : une fiche par langue, comme sur le site --- */
.cg-langues-scene{ padding:clamp(1rem,4vw,3.5rem); }
.cg-langues{ max-width:62rem; margin-inline:auto; display:grid; gap:.65rem; }
.cg-langues li{
  display:grid; grid-template-columns:10rem minmax(0,1fr); gap:1rem; align-items:center;
  padding:1rem 1.35rem; border-radius:12px; background:#fff; border:1px solid rgba(0,0,0,.07);
  box-shadow:0 12px 26px -20px rgba(21,24,21,.3);
}
.cg-langue{
  display:flex; align-items:center; gap:.6rem;
  font-size:.8rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--cg-vert);
}
.cg-langues li[lang="zh-Hans"] .cg-langue{ letter-spacing:0; font-size:.86rem; }
.cg-langue svg{ flex:none; width:1.45rem; height:1.45rem; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.08); }
.cg-langues p{ margin:0; font-size:1.06rem; line-height:1.45; }
@media (max-width:560px){
  .cg-langues li{ grid-template-columns:minmax(0,1fr); gap:.4rem; padding:.8rem 1rem; }
  .cg-langues p{ font-size:.95rem; }
}

/* --- L'envoi : la fenêtre d'export derrière, la gestion des serveurs
   devant, telles que l'app les dessine (couleurs de Theme.swift) --- */
.cg-envoi{
  display:grid; padding:4cqw 3.5cqw; font-size:1.52cqw; line-height:1.35;
  background:radial-gradient(ellipse 80% 70% at 62% 62%, #E3F2E2 0%, #F2F6F2 55%, var(--fond-projet) 100%);
}
.cg-envoi p{ margin:0; }
.cg-envoi small{ font-size:.82em; color:var(--cg-doux); }
.cg-envoi b{ font-weight:500; }
.cg-fen{
  grid-area:1/1; align-self:start; overflow:hidden;
  border-radius:1.1cqw; background:#FAFBFA;
  box-shadow:0 0 0 1px rgba(0,0,0,.1), 0 2cqw 4.5cqw -1.6cqw rgba(21,24,21,.4);
}
.cg-export{ width:58%; margin-bottom:24cqw; }
.cg-serveurs{ width:63%; margin:26cqw 0 0 auto; box-shadow:0 0 0 1px rgba(0,0,0,.12), 0 3cqw 6cqw -1.5cqw rgba(21,24,21,.5); }
.cg-barre{ display:flex; gap:.5em; padding:.75em .9em; background:#F1F4F1; border-bottom:1px solid var(--cg-bord); }
.cg-barre i{ width:.9em; height:.9em; border-radius:50%; background:#FF5F57; }
.cg-barre i:nth-child(2){ background:#FEBC2E; }
.cg-barre i:nth-child(3){ background:#28C840; }
.cg-corps{ display:grid; gap:.7em; padding:1em 1.2em 1.1em; }
.cg-titre-fen{ font-size:1.3em; font-weight:650; }
.cg-gras{ font-weight:600; }
.cg-cartes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5em; }
.cg-cartes > span{
  display:grid; justify-items:center; align-content:start; gap:.2em; padding:.75em .4em;
  text-align:center; background:#fff; border:1px solid var(--cg-bord); border-radius:.7em;
}
.cg-cartes b{ font-size:.9em; font-weight:600; line-height:1.2; }
.cg-cartes .cg-picto{ width:1.7em; height:1.7em; stroke:var(--cg-doux); }
.cg-cartes .cg-choisi{ background:var(--cg-choisi); border:1.5px solid var(--cg-vert); }
.cg-cartes .cg-choisi .cg-picto{ stroke:var(--cg-vert); }
.cg-entete{ display:flex; align-items:center; justify-content:space-between; gap:1em; margin-top:.2em !important; }
.cg-rond{ display:grid; place-items:center; flex:none; width:2em; height:2em; border-radius:50%; background:var(--cg-lavis); }
.cg-rond .cg-picto{ width:1.2em; height:1.2em; }
.cg-liste{ background:#fff; border:1px solid var(--cg-bord); border-radius:.6em; overflow:hidden; }
.cg-liste > span{ display:flex; align-items:center; gap:.7em; padding:.5em .75em; }
.cg-liste > span + span{ border-top:1px solid var(--cg-bord); }
.cg-liste > span > span, .cg-colonne > span > span{ display:grid; flex:1; min-width:0; }
.cg-liste .cg-picto{ width:1.45em; height:1.45em; }
.cg-liste .cg-choisi, .cg-colonne .cg-choisi{ background:var(--cg-choisi); }
.cg-coche{ flex:none; width:1.3em; height:1.3em; }
.cg-coche circle{ fill:var(--cg-vert); }
.cg-coche path{ fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.cg-note{ font-size:.82em; color:var(--cg-doux); }
.cg-pied{ display:flex; justify-content:flex-end; gap:.6em; padding:.85em 1.1em; border-top:1px solid var(--cg-bord); }
.cg-bouton{
  padding:.35em .85em; border-radius:.45em; white-space:nowrap; font-size:.92em;
  background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.12), 0 1px 1px rgba(0,0,0,.06);
}
.cg-bouton--vert{ background:var(--cg-vert); color:#fff; box-shadow:none; }
.cg-espace{ flex:1; }
.cg-tete-fen{ display:grid; gap:.25em; padding:1.1em 1.3em; border-bottom:1px solid var(--cg-bord); }
.cg-deux{ display:grid; grid-template-columns:31% minmax(0,1fr); }
.cg-colonne{ display:flex; flex-direction:column; gap:.15em; padding:.6em; background:#F6F8F6; border-right:1px solid var(--cg-bord); }
.cg-colonne > span{ display:flex; align-items:center; gap:.55em; padding:.35em .5em; border-radius:.45em; }
.cg-colonne b{ font-weight:400; }
.cg-colonne .cg-picto{ width:1.2em; height:1.2em; }
.cg-plusmoins{ margin-top:auto; justify-content:flex-end; }
.cg-plusmoins i{
  display:grid; place-items:center; width:1.7em; height:1.7em; border-radius:50%;
  background:var(--cg-lavis); color:var(--cg-vert); font-style:normal; font-weight:600;
}
.cg-fiche{ display:grid; grid-template-columns:max-content minmax(0,1fr); gap:.55em .7em; align-items:center; padding:1.1em 1.2em; background:#fff; }
.cg-libelle{ align-self:start; padding-top:calc(.3em + 1px); text-align:right; color:var(--cg-doux); font-size:.92em; }
.cg-champ{
  display:block; padding:.3em .55em; border:1px solid var(--cg-bord); border-radius:.4em; background:#fff;
  font-size:.92em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cg-menu{ display:inline-flex; align-items:center; gap:.7em; }
.cg-menu svg{ width:1em; height:1em; fill:none; stroke:var(--cg-doux); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cg-case{ display:flex; align-items:center; gap:.45em; margin-top:.45em; font-size:.92em; }
.cg-case::before{
  content:''; flex:none; width:1em; height:1em; border-radius:.25em;
  border:1px solid #C5CEC5; background:#fff center/80% no-repeat;
}
.cg-case--oui::before{
  border-color:var(--cg-vert);
  background-color:var(--cg-vert);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cg-ligne{ display:flex; align-items:center; gap:.5em; min-width:0; }
.cg-ligne .cg-champ{ flex:1; min-width:0; }
.cg-ligne .cg-port{ flex:0 0 2.6em; }
.cg-test{
  grid-column:1 / -1; display:flex; align-items:flex-start; gap:.6em; margin-top:.3em;
  padding:.7em .8em; border-radius:.6em; background:rgba(15,127,18,.1); font-size:.9em; line-height:1.45;
}
/* Sur un téléphone, la gestion des serveurs seule, plus grande. */
@container (max-width:520px){
  .cg-envoi{ font-size:2.55cqw; padding:5cqw 4cqw; }
  .cg-export{ display:none; }
  .cg-serveurs{ width:100%; margin:0; }
}

/* ============================================================
   LYBE : LA CHARTE RECONSTRUITE
   Le logo, les couleurs, les typographies, les motifs, les pictogrammes et
   les photographies sont dessinés en HTML et en SVG d'après les fichiers de
   la charte, avec ses deux polices. Chaque élément bouge un peu : le cadre
   du logo respire, les dégradés passent du mode clair au sombre, la graisse
   de MuseoModerno varie, les motifs laissent voir leur photographie.
   ============================================================ */
@font-face{ font-family:"MuseoModerno"; src:url("../Assets/realisations/lybe/polices/museomoderno.woff2?v=a1507f39") format("woff2"); font-weight:300 800; font-display:swap; }
@font-face{ font-family:"Poppins"; src:url("../Assets/realisations/lybe/polices/poppins-400.ttf?v=9d740080") format("truetype"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Poppins"; src:url("../Assets/realisations/lybe/polices/poppins-500.ttf?v=1867da99") format("truetype"); font-weight:500; font-display:swap; }
@font-face{ font-family:"Poppins"; src:url("../Assets/realisations/lybe/polices/poppins-600.ttf?v=f0822617") format("truetype"); font-weight:600; font-display:swap; }
.ly-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.ly-marque, .ly-couleurs, .ly-typo, .ly-scene{ --ly-orange:#F96716; --ly-jaune:#F9C215; --ly-degrade:linear-gradient(135deg, var(--ly-orange), var(--ly-jaune)); font-family:"Poppins", var(--font); }
.ly-libelle{ font-size:.92rem; font-weight:500; line-height:1.3; text-align:center; }

/* --- Le logo : le cadre de respiration, l'icône, le logo secondaire --- */
.ly-marque{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.6rem,1.4vw,1.1rem); align-items:end; }
.ly-marque figure{ margin:0; display:grid; justify-items:center; gap:.7rem; }
.ly-marque figcaption{ font-size:.82rem; color:var(--gris-texte); text-align:center; }
.ly-respire{
  grid-column:1 / -1; padding:clamp(2.4rem,5.5vw,4.2rem) clamp(1.5rem,4vw,3rem) clamp(1.1rem,2.4vw,1.7rem);
  border-radius:var(--rayon); background:#fff; box-shadow:var(--ombre-barre);
}
/* La marge de respiration vaut la moitié du L, soit 10 % de la largeur du
   logo : les quatre coins s'y posent, puis respirent. */
.ly-zone{ position:relative; display:block; width:min(76%,22rem); container-type:inline-size; margin-bottom:clamp(1rem,2.4vw,1.6rem); }
.ly-zone img{ display:block; width:100%; height:auto; }
.ly-coin{
  position:absolute; width:7cqw; height:7cqw; border:solid #9A9A9A; border-width:0;
  animation:ly-respire 3.2s ease-in-out infinite alternate;
}
.ly-coin--hg{ left:-10cqw; top:-10cqw; border-width:2px 0 0 2px; --dx:4cqw; --dy:4cqw; }
.ly-coin--hd{ right:-10cqw; top:-10cqw; border-width:2px 2px 0 0; --dx:-4cqw; --dy:4cqw; }
.ly-coin--bg{ left:-10cqw; bottom:-10cqw; border-width:0 0 2px 2px; --dx:4cqw; --dy:-4cqw; }
.ly-coin--bd{ right:-10cqw; bottom:-10cqw; border-width:0 2px 2px 0; --dx:-4cqw; --dy:-4cqw; }
@keyframes ly-respire{ from{ translate:0 0; } to{ translate:var(--dx) var(--dy); } }
.ly-carre{
  display:block; width:min(100%,9rem); aspect-ratio:1; overflow:hidden;
  border-radius:22%; background:#fff; box-shadow:var(--ombre-barre);
  transition:transform .5s cubic-bezier(.3,1.5,.5,1);
}
.ly-carre img{ display:block; width:100%; height:100%; }
.ly-secondaire img{ display:block; width:100%; height:auto; border-radius:14% / 27%; box-shadow:var(--ombre-barre); transition:transform .5s cubic-bezier(.3,1.5,.5,1); }
@media (hover:hover){
  .ly-marque figure:hover .ly-carre, .ly-secondaire:hover img{ transform:translateY(-.3rem) rotate(-2deg); }
}

/* --- Les couleurs : les primaires, la gamme des disciplines, et leurs
   dégradés, du mode clair au mode sombre --- */
.ly-couleurs{
  --fond:#fff; --texte:var(--noir); --doux:var(--gris-texte); --puits:#F1F1F3;
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(1.4rem,3vw,2.6rem) clamp(1.6rem,4vw,3.6rem); align-items:center;
  padding:clamp(1.4rem,4vw,3rem); border-radius:var(--rayon);
  background:var(--fond); color:var(--texte); box-shadow:var(--ombre-barre);
  transition:background-color .7s var(--ease), color .7s var(--ease);
}
.ly-couleurs[data-mode="sombre"]{ --fond:#1E2447; --texte:#fff; --doux:#BEC3DE; --puits:#2A3260; }
.ly-modes{ grid-column:1 / -1; justify-self:start; display:inline-flex; gap:.25rem; padding:.3rem; border-radius:6rem; background:var(--puits); transition:background-color .7s var(--ease); }
.ly-modes button{ padding:.45rem 1rem; border-radius:6rem; font-size:.85rem; font-weight:500; color:var(--doux); transition:background-color .4s, color .4s; }
.ly-modes button[aria-pressed="true"]{ background:var(--fond); color:var(--texte); box-shadow:0 2px 8px rgba(0,0,0,.12); }
.ly-primaires{ display:grid; gap:1rem; }
.ly-paire{ display:flex; gap:.9rem; padding:.75rem .9rem .55rem; border-radius:2.8rem; background:var(--puits); transition:background-color .7s var(--ease); }
.ly-teinte{ position:relative; display:grid; justify-items:center; gap:.5rem; }
.ly-rond-couleur{
  display:block; width:clamp(2.8rem,5vw,4.2rem); aspect-ratio:1; border-radius:50%; background:var(--c);
  box-shadow:0 0 0 .28rem #fff, 0 12px 22px -12px rgba(0,0,0,.45);
}
.ly-teinte code{ font-family:"Poppins", var(--font); font-size:.7rem; letter-spacing:.03em; color:var(--doux); transition:color .7s var(--ease); }
.ly-gamme{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1rem .6rem; align-items:end; }
.ly-gamme b{ display:flex; align-items:flex-end; min-height:2.5em; font-size:.76rem; font-weight:600; line-height:1.2; text-align:center; color:var(--c); }
/* Le dégradé de chaque couleur, posé contre elle : de la couleur au gris
   clair en mode clair, du bleu nuit à la couleur en mode sombre ; du plus
   sombre en haut à gauche au plus clair en bas à droite. */
.ly-degrade{
  position:relative; display:block; width:58%; aspect-ratio:1; margin:-1.5rem -2.2rem 0 0; justify-self:end;
  border-radius:50%; background:linear-gradient(135deg, var(--c), #E9E9E9);
  box-shadow:0 0 0 .22rem #fff, 0 8px 16px -10px rgba(0,0,0,.45);
}
.ly-degrade::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:linear-gradient(135deg, #343E72, var(--c)); opacity:0; transition:opacity .7s var(--ease);
}
.ly-couleurs[data-mode="sombre"] .ly-degrade::after{ opacity:1; }

/* --- Les typographies --- */
.ly-typo{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.8rem,1.8vw,1.6rem); }
.ly-carte{ display:grid; align-content:start; gap:.2rem; padding:clamp(1.2rem,2.6vw,2rem); border-radius:var(--rayon); background:#fff; box-shadow:var(--ombre-barre); min-width:0; }
.ly-carte p{ margin:0; }
.ly-museo{ font-family:"MuseoModerno", var(--font); }
.ly-aa{
  font-size:clamp(4rem,8vw,7rem); line-height:1.05; letter-spacing:-.02em; font-weight:600;
  background:var(--ly-degrade); -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* MuseoModerno est variable : sa graisse va et vient, de 300 à 800. */
.ly-museo .ly-aa{ animation:ly-graisse 3.4s ease-in-out infinite alternate; }
@keyframes ly-graisse{ from{ font-weight:300; } to{ font-weight:800; } }
.ly-nom{ margin-top:.4rem !important; font-size:1.45rem; font-weight:600; }
.ly-usage{ font-size:.92rem; color:var(--gris-texte); }
.ly-alphabet{ display:grid; margin-top:.9rem !important; font-size:.86rem; line-height:1.55; overflow-wrap:anywhere; }
.ly-alphabet em{ font-style:normal; color:var(--ly-orange); }
.ly-hierarchie ul{ display:grid; gap:.45rem; }
.ly-hierarchie li{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.ly-hierarchie li span{ font-size:calc(var(--t) * .055rem); line-height:1.15; }
.ly-h span{ font-family:"MuseoModerno", var(--font); font-weight:600; }
.ly-st span{ font-weight:500; }
.ly-st:first-of-type{ margin-top:.5rem; padding-top:.7rem; border-top:1px solid #EAEAEA; }
.ly-hierarchie small{ font-size:.74rem; color:var(--gris-texte); white-space:nowrap; }
.ly-boutons{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.1rem !important; }
.ly-bouton{
  padding:.5em 1.15em; border-radius:6rem; border:2px solid transparent;
  font-size:.8rem; font-weight:500; color:#fff;
  background:var(--ly-degrade) border-box; transition:color .35s, background .35s;
}
.ly-bouton--survol, .ly-bouton:not(.ly-bouton--autre):hover{
  color:var(--ly-orange); background:linear-gradient(#fff,#fff) padding-box, var(--ly-degrade) border-box;
}
.ly-bouton--survol:hover{ color:#fff; background:var(--ly-degrade) border-box; }
.ly-bouton--autre{ color:var(--noir); background:#E9E9E9; }

/* --- Les motifs, les pictogrammes et les photographies : une ligne de
   quatre, puis de trois, centrée --- */
.scene.ly-scene{ padding:clamp(1.6rem,4.5vw,3.6rem) clamp(1rem,3vw,2.6rem); background:#fff; box-shadow:var(--ombre-barre); }
.ly-motifs, .ly-pictos, .ly-photos{
  --g:clamp(1.2rem,3vw,2.6rem);
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--g) var(--g);
}
.ly-motifs > li, .ly-pictos > li, .ly-photos > li{ width:calc((100% - 3 * var(--g)) / 4); display:grid; justify-items:center; gap:.85rem; }
/* Le motif, à la couleur de sa discipline ; au survol (et tour à tour,
   seul), sa photographie paraît dessous et le motif passe en blanc : c'est
   l'assemblage de la charte. Le petit cercle en dégradé flotte à côté. */
.ly-rond{ position:relative; display:block; width:min(100%,12rem); aspect-ratio:1; color:var(--c); transition:color .6s var(--ease); }
.ly-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%;
  opacity:0; transform:scale(.9); transition:opacity .6s var(--ease), transform .9s var(--ease);
}
.ly-trace{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.ly-mini{ position:absolute; right:-9%; bottom:-7%; width:36%; height:auto; overflow:visible; }
.ly-motif .ly-libelle{ color:var(--c); }
.ly-motif--photo .ly-rond{ color:#fff; }
.ly-motif--photo .ly-photo{ opacity:1; transform:none; }
@media (hover:hover){
  .ly-motif:hover .ly-rond{ color:#fff; }
  .ly-motif:hover .ly-photo{ opacity:1; transform:none; }
}
.ly-paire-picto{ display:flex; gap:clamp(.4rem,1vw,.8rem); }
.ly-paire-picto svg{ width:clamp(2.6rem,5.4vw,4.4rem); height:auto; }
.ly-cadre{ position:relative; display:block; width:min(86%,10rem); aspect-ratio:1; margin:12% 12% 0 0; }
.ly-cadre::before{
  content:''; position:absolute; inset:0; border-radius:var(--rayon-petit);
  background:color-mix(in srgb, var(--c) 22%, #fff);
  transform:translate(16%,-16%); transition:transform .6s var(--ease);
}
.ly-cadre img{
  position:relative; display:block; width:100%; height:100%; object-fit:cover;
  border-radius:var(--rayon-petit); box-shadow:0 14px 26px -16px rgba(0,0,0,.5);
  transition:transform .6s var(--ease);
}
.ly-photos .ly-libelle{ color:var(--c); }
@media (hover:hover){
  .ly-photos li:hover .ly-cadre::before{ transform:translate(24%,-24%); }
  .ly-photos li:hover .ly-cadre img{ transform:translate(-5%,5%); }
}
@media (prefers-reduced-motion:no-preference){
  .ly-mini{ animation:ly-flotte 4.6s ease-in-out calc(var(--n) * -.8s) infinite alternate; }
  .ly-paire-picto svg{ animation:ly-vague 6s ease-in-out calc(var(--n) * .35s) infinite; }
  .ly-paire-picto svg + svg{ animation-delay:calc(var(--n) * .35s + .12s); }
}
@keyframes ly-flotte{ from{ transform:translate(0,0) rotate(-4deg); } to{ transform:translate(-6%,-8%) rotate(5deg); } }
@keyframes ly-vague{ 0%, 70%, 100%{ transform:none; } 78%{ transform:translateY(-14%) scale(1.06); } 86%{ transform:translateY(2%); } }
@media (prefers-reduced-motion:reduce){
  .ly-coin, .ly-museo .ly-aa{ animation:none; }
}
@media (max-width:900px){
  .ly-couleurs{ grid-template-columns:minmax(0,1fr); }
  .ly-primaires{ display:flex; flex-wrap:wrap; gap:.8rem; }
  .ly-gamme{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .ly-typo{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:560px){
  .ly-motifs > li, .ly-pictos > li, .ly-photos > li{ width:calc((100% - var(--g)) / 2); }
  .ly-marque{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ly-secondaire{ grid-column:1 / -1; }
  .ly-secondaire img{ width:min(100%,14rem); }
  .ly-couleurs{ padding:1.3rem 1rem; }
  .ly-gamme{ gap:1rem .4rem; }
  .ly-gamme b{ font-size:.7rem; }
  .ly-degrade{ width:50%; margin:-1.1rem -.7rem 0 0; }
}

/* ============================================================
   LES BASCULES ET LES TRACÉS
   Deux boutons pour choisir un mode (voir projet.js, `data-bascule`), et des
   SVG dont les traits se dessinent dans l'ordre de lecture, en boucle
   (svg-anime.mjs pose `trait`, `plein` et leur rang --k, de 0 à 1).
   ============================================================ */
.bascule-boutons{
  display:inline-flex; gap:.2rem; padding:.28rem; border-radius:6rem;
  background:rgba(255,255,255,.92); box-shadow:var(--ombre-barre);
}
.bascule-boutons button{ padding:.4rem .9rem; border-radius:6rem; font-size:.8rem; font-weight:500; color:var(--gris-texte); transition:background-color .4s, color .4s; }
.bascule-boutons button[aria-pressed="true"]{ background:var(--noir); color:var(--blanc); }
.trace .trait{ stroke-dasharray:1; stroke-dashoffset:0; }
/* Le script pose `dessine` (chaque pièce paraît à son rang), puis `efface`
   (tout s'éteint ensemble), puis recommence, tant que le dessin est à
   l'écran. */
@media (prefers-reduced-motion:no-preference){
  .js .trace .trait{ stroke-dashoffset:1; transition:stroke-dashoffset 1.1s var(--ease) calc(var(--k) * var(--etale,2.4s)), opacity .6s var(--ease); }
  .js .trace .plein{
    opacity:0; transform:scale(.85); transform-box:fill-box; transform-origin:center;
    transition:opacity .7s var(--ease) calc(var(--k) * var(--etale,2.4s)), transform .9s cubic-bezier(.3,1.5,.5,1) calc(var(--k) * var(--etale,2.4s));
  }
  .js .trace.dessine .trait{ stroke-dashoffset:0; }
  .js .trace.dessine .plein{ opacity:1; transform:none; }
  .js .trace.efface .trait, .js .trace.efface .plein{ opacity:0; transition:opacity .6s var(--ease); }
  .js .trace.sans-transition *{ transition:none !important; }
}

/* --- L'Académie des toits : le logo sur ses deux fonds, sa construction --- */
.adt-duo{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:clamp(.8rem,1.8vw,1.6rem); align-items:stretch; }
.adt-logo{
  --adt-fond:#292e4c; --adt-lettres:#fff;
  position:relative; display:grid; place-items:center; overflow:hidden;
  border-radius:var(--rayon); background:var(--adt-fond); box-shadow:var(--ombre-barre);
  transition:background-color .8s var(--ease);
}
.adt-logo[data-mode="clair"]{ --adt-fond:#fff; --adt-lettres:#292e4c; }
.adt-logo svg{ display:block; width:100%; height:auto; }
.adt-logo svg *{ transition:fill .8s var(--ease); }
.adt-logo .bascule-boutons{ position:absolute; right:var(--marge-carte); bottom:var(--marge-carte); }
.adt-construction{
  --adt-nuit:#292e4c; margin:0; display:grid; place-items:center;
  padding:clamp(1rem,3vw,2.4rem); border-radius:var(--rayon); background:#fff; box-shadow:var(--ombre-barre);
}
.adt-construction svg{ display:block; width:100%; height:auto; }
@media (max-width:900px){ .adt-duo{ grid-template-columns:minmax(0,1fr); } }

/* --- Tennis Match Up : la balle sur l'affiche, le logo, les croquis --- */
.tmu-affiche{ position:relative; }
.tmu-trajectoire{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.tmu-sillage{ fill:none; stroke:#fff; stroke-width:5; stroke-dasharray:1 15; stroke-linecap:round; opacity:.9; }
.tmu-balle circle{ fill:#D7EE3A; stroke:rgba(0,0,0,.12); stroke-width:1; }
.tmu-balle path{ fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; }
@media (prefers-reduced-motion:reduce){ .tmu-trajectoire{ display:none; } }
.tmu-marque{
  position:relative; display:grid; place-items:center; aspect-ratio:16/10;
  padding:clamp(1.6rem,5vw,4rem); border-radius:var(--rayon); background:#E76C2D;
  box-shadow:0 30px 60px -30px rgba(160,60,10,.55);
}
.tmu-nom{ display:block; width:min(100%,30rem); height:auto; overflow:visible; }
.tmu-icone{
  position:absolute; right:-4%; bottom:-9%; width:clamp(4.4rem,9vw,7.4rem); aspect-ratio:1; overflow:hidden;
  border-radius:22%; box-shadow:0 0 0 .3rem #fff, 0 18px 34px -14px rgba(0,0,0,.45);
}
.tmu-icone img{ display:block; width:100%; height:100%; }
/* Le cordage vibre comme après une frappe, l'éclat part et revient. */
@media (prefers-reduced-motion:no-preference){
  .tmu-cordage, .tmu-goutte{ transform-box:fill-box; transform-origin:center; }
  .tmu-cordage{ animation:tmu-frappe 4s cubic-bezier(.3,1.6,.5,1) infinite; }
  .tmu-goutte{ animation:tmu-eclat 4s var(--ease) infinite; }
  .tmu-icone{ animation:tmu-flotte 5s ease-in-out infinite alternate; }
}
@keyframes tmu-frappe{ 0%, 62%, 100%{ transform:none; } 68%{ transform:scale(.9) rotate(-4deg); } 76%{ transform:scale(1.05) rotate(2deg); } }
@keyframes tmu-eclat{ 0%, 66%, 100%{ transform:none; opacity:1; } 74%{ transform:translate(-120%,90%) scale(.8); opacity:.2; } 82%{ transform:translate(-40%,30%); opacity:.6; } }
@keyframes tmu-flotte{ from{ transform:translateY(0) rotate(-3deg); } to{ transform:translateY(-.5rem) rotate(2deg); } }
/* Les croquis, puis le signe : une feuille après l'autre se lève, comme
   on avance d'une piste à la suivante. */
.tmu-recherches{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.8rem,2vw,1.8rem); align-items:center; counter-reset:etape; }
.tmu-recherches li{ position:relative; display:grid; }
.tmu-recherches li + li::before{
  content:''; position:absolute; left:calc(-1 * clamp(.8rem,2vw,1.8rem) / 2 - .35rem); top:50%;
  width:.7rem; height:.7rem; border:solid var(--gris-texte); border-width:2px 2px 0 0; transform:translateY(-50%) rotate(45deg);
}
.tmu-feuille{ display:block; overflow:hidden; border-radius:var(--rayon-petit); background:#fff; box-shadow:var(--ombre-barre); }
.tmu-feuille img{ display:block; width:100%; height:auto; }
.tmu-feuille--signe{ border-radius:22%; box-shadow:0 22px 40px -18px rgba(160,60,10,.55); }
@media (prefers-reduced-motion:no-preference){
  .tmu-feuille{ animation:tmu-etape 8s var(--ease) infinite; animation-delay:calc(var(--i,0) * 1.6s); }
}
@keyframes tmu-etape{ 0%, 24%, 100%{ transform:none; } 6%, 16%{ transform:translateY(-.7rem) rotate(-1.5deg); box-shadow:0 26px 40px -22px rgba(0,0,0,.45); } }
@media (max-width:700px){
  .tmu-recherches{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tmu-recherches li:nth-child(3)::before{ display:none; }
}

/* --- Cloud Skate --- */
/* Le mur des pages : quatre colonnes inclinées qui défilent lentement, à
   contresens l'une de l'autre, comme la mosaïque du dossier. */
.cld-scene{ aspect-ratio:var(--ratio,1.5); background:#26272B; }
.cld-mur{ position:absolute; inset:0; overflow:hidden; }
.cld-plan{
  position:absolute; left:50%; top:50%; width:118%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.6%;
  transform:translate(-50%,-50%) rotate(-24deg) skewX(8deg);
}
.cld-colonne{ display:flex; flex-direction:column; gap:.8rem; }
.cld-colonne span{ display:block; border-radius:.5rem; overflow:hidden; background:#fff; box-shadow:0 20px 40px -16px rgba(0,0,0,.6); }
.cld-colonne img{ display:block; width:100%; height:auto; }
@media (prefers-reduced-motion:no-preference){
  .cld-colonne{ animation:cld-defile 70s linear infinite; }
  .cld-colonne:nth-child(even){ animation-direction:reverse; animation-duration:80s; }
}
@keyframes cld-defile{ from{ transform:translateY(0); } to{ transform:translateY(calc(-50% - .4rem)); } }
/* Le projet : la photo, et la borne de location qui flotte devant. */
.cld-projet{ position:relative; padding-right:clamp(2rem,9vw,8rem); }
.cld-borne{
  position:absolute; right:0; bottom:-12%; width:clamp(6rem,17vw,14rem); height:auto;
  filter:drop-shadow(0 28px 34px rgba(0,0,0,.4));
}
@media (prefers-reduced-motion:no-preference){ .cld-borne{ animation:tmu-flotte 6s ease-in-out infinite alternate; } }
/* Les constructions : la planche se monte pièce à pièce (voir .trace). */
.cld-planche{ border-radius:var(--rayon); background:#fff; box-shadow:var(--ombre-barre); overflow:hidden; }
.cld-trace{ display:block; width:100%; height:auto; --etale:3.4s; }
.cld-trace text{ font-family:"Poppins", var(--font); font-weight:600; font-size:50px; fill:#E0AA00; }
.cld-logo{
  --cld-encre:#1E1E1E; --cld-fond:#fff;
  position:relative; display:grid; place-items:center; padding:clamp(2rem,7vw,5.5rem) clamp(1.5rem,6vw,5rem);
  border-radius:var(--rayon); background:var(--cld-fond); box-shadow:var(--ombre-barre); transition:background-color .8s var(--ease);
}
.cld-logo[data-mode="sombre"]{ --cld-encre:#fff; --cld-fond:#1E1E1E; }
.cld-logo svg{ display:block; width:min(100%,30rem); height:auto; }
.cld-logo svg *{ transition:fill .8s var(--ease); }
.cld-logo .bascule-boutons{ position:absolute; right:var(--marge-carte); bottom:var(--marge-carte); }
/* La liseuse du dossier : une page en grand, les vignettes dessous. */
.cld-liseuse{ display:grid; gap:clamp(.8rem,1.6vw,1.2rem); }
.cld-vue{ position:relative; aspect-ratio:16/9; border-radius:var(--rayon); overflow:hidden; background:#fff; box-shadow:0 30px 60px -30px rgba(0,0,0,.45), var(--ombre-barre); }
.cld-page{ position:absolute; inset:0; margin:0; opacity:0; transform:translateX(3%); transition:opacity .6s var(--ease), transform .8s var(--ease); }
.cld-page.est-actif{ opacity:1; transform:none; }
.cld-page img{ display:block; width:100%; height:100%; object-fit:cover; }
.cld-commandes{ display:flex; align-items:center; justify-content:center; gap:1rem; }
.cld-fleche{ display:grid; place-items:center; width:2.8rem; height:2.8rem; border-radius:50%; background:#fff; box-shadow:var(--ombre-barre); transition:transform .3s var(--ease), background-color .3s; }
.cld-fleche svg{ width:1.2rem; height:1.2rem; fill:none; stroke:var(--noir); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media (hover:hover){ .cld-fleche:hover{ background:var(--orange-fond); } .cld-fleche:hover svg{ stroke:#fff; } }
.cld-compte{ min-width:4.5rem; text-align:center; font-weight:500; font-variant-numeric:tabular-nums; }
.cld-vignettes{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:.5rem; }
.cld-vignettes button{ display:block; width:100%; border-radius:.35rem; overflow:hidden; opacity:.55; box-shadow:var(--ombre-barre); transition:opacity .3s, transform .3s var(--ease); }
.cld-vignettes button[aria-current="true"]{ opacity:1; transform:translateY(-.2rem); box-shadow:0 0 0 2px #E0AA00; }
.cld-vignettes img{ display:block; width:100%; height:auto; }
@media (hover:hover){ .cld-vignettes button:hover{ opacity:1; } }
@media (max-width:700px){ .cld-vignettes{ grid-template-columns:repeat(6,minmax(0,1fr)); } }
/* Les émissions : six barres qui montent, Cloud en jaune. */
.cld-emissions{ margin:0; padding:clamp(1.4rem,4vw,3rem); border-radius:var(--rayon); background:#fff; box-shadow:var(--ombre-barre); }
.cld-emissions ol{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(.5rem,2vw,1.6rem); align-items:end; height:clamp(14rem,30vw,22rem); border-bottom:3px solid #E0AA00; }
.cld-emissions li{ display:grid; grid-template-rows:1fr auto; height:100%; align-items:end; }
.cld-barre{
  display:block; height:calc(var(--v) * 100%); border-radius:.4rem .4rem 0 0;
  background:linear-gradient(90deg, #F2F2F2, #9C9C9C 70%); transform-origin:bottom;
}
.cld-nous .cld-barre{ background:linear-gradient(90deg, #FBEFC2, #E0AA00 70%); }
.cld-nom{ position:relative; top:2.4rem; height:0; font-size:clamp(.66rem,1.2vw,.88rem); line-height:1.25; text-align:center; color:var(--gris-texte); }
.cld-nous .cld-nom{ color:var(--noir); font-weight:600; }
.cld-emissions figcaption{ margin-top:clamp(3.6rem,6vw,4.6rem); font-size:calc(.9 * var(--corps)); color:var(--gris-texte); text-align:center; }
@media (prefers-reduced-motion:no-preference){
  .js .cld-barre{ transform:scaleY(0); transition:transform 1.2s cubic-bezier(.2,.9,.3,1.1) calc(.25s + var(--i) * .14s); }
  .js .cld-emissions.vu .cld-barre{ transform:none; }
}

/* --- Fondation Crédit Agricole : les formats, et la campagne en cinq temps --- */
.fca-formats{ display:grid; gap:1rem; }
.fca-scene{ position:relative; aspect-ratio:1.6; border-radius:var(--rayon); background:var(--fond-projet); overflow:hidden; }
.fca-format{
  position:absolute; left:50%; top:50%; width:var(--l); height:var(--h); margin:0;
  translate:-50% -50%; border-radius:calc(var(--rayon) * .45); overflow:hidden;
  box-shadow:0 26px 50px -24px rgba(0,0,0,.45); opacity:0; scale:.94;
  transition:opacity .6s var(--ease), scale .8s var(--ease);
}
.fca-format.est-actif{ opacity:1; scale:1; }
.fca-format img{ display:block; width:100%; height:100%; object-fit:cover; }
.fca-onglets, .fca-frise{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; list-style:none; margin:0; }
.fca-onglets button{
  padding:.5rem 1rem; border-radius:6rem; font-size:.85rem; font-weight:500; color:var(--gris-texte);
  background:#fff; box-shadow:var(--ombre-barre); transition:background-color .35s, color .35s;
}
.fca-onglets button[aria-current="true"]{ background:var(--noir); color:var(--blanc); }
.fca-campagne{ display:grid; grid-template-columns:minmax(0,1fr) minmax(14rem,.62fr); gap:clamp(1.2rem,3vw,3rem); align-items:center; }
.fca-post{ position:relative; aspect-ratio:1; border-radius:var(--rayon); overflow:hidden; box-shadow:0 30px 60px -30px rgba(0,0,0,.5); }
.fca-post img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
/* Toutes les images partagent le même fond : seul le message semble changer. */
.fca-message{ opacity:0; transition:opacity .7s var(--ease); }
.fca-message.est-actif{ opacity:1; }
.fca-frise{ position:relative; flex-direction:column; align-items:stretch; gap:.2rem; padding-left:1.4rem; }
.fca-frise::before{ content:''; position:absolute; left:.45rem; top:1.2rem; bottom:1.2rem; width:2px; background:var(--gris); }
.fca-frise button{ position:relative; display:grid; gap:.15rem; width:100%; padding:1rem 1.2rem; border-radius:var(--rayon-petit); text-align:left; transition:background-color .35s; }
.fca-frise button::before{
  content:''; position:absolute; left:-1.3rem; top:50%; width:.8rem; height:.8rem; border-radius:50%;
  background:#fff; box-shadow:0 0 0 2px var(--gris); translate:0 -50%; transition:background-color .35s, box-shadow .35s;
}
.fca-frise b{ font-size:1.12rem; font-weight:600; }
.fca-frise small{ font-size:.9rem; color:var(--gris-texte); }
.fca-frise button[aria-current="true"]{ background:#fff; box-shadow:var(--ombre-barre); }
.fca-frise button[aria-current="true"]::before{ background:#0B6B4C; box-shadow:0 0 0 2px #0B6B4C; }
@media (hover:hover){ .fca-frise button:hover, .fca-onglets button:hover{ background:#fff; color:var(--noir); } }
@media (max-width:900px){
  .fca-campagne{ grid-template-columns:minmax(0,1fr); }
  .fca-frise{ flex-direction:row; flex-wrap:wrap; justify-content:center; padding-left:0; }
  .fca-frise::before, .fca-frise button::before{ display:none; }
  .fca-frise li{ flex:1 1 30%; }
  .fca-frise button{ text-align:center; background:#fff; box-shadow:var(--ombre-barre); }
  .fca-frise button[aria-current="true"]{ background:var(--noir); color:var(--blanc); }
  .fca-frise button[aria-current="true"] small{ color:var(--gris); }
}

/* --- Serge Delavallée --- */
/* L'affiche, et le Z qui se trace : le mouvement, les dates, le portrait,
   le nom. Les étiquettes suivent le tracé (voir .trace). */
.dlv-affiche{ display:grid; justify-items:center; gap:1.2rem; }
.dlv-papier{ position:relative; width:min(100%,24rem); border-radius:var(--rayon-petit); box-shadow:0 30px 60px -25px rgba(0,0,0,.4); }
.dlv-papier > img{ display:block; width:100%; height:auto; border-radius:inherit; }
.dlv-z{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; --etale:3.2s; }
.dlv-z path{ fill:none; stroke:#F28B35; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.dlv-z circle{ fill:#F28B35; stroke:#fff; stroke-width:.7; }
.dlv-z text{ fill:#fff; font-size:3.8px; font-weight:700; text-anchor:middle; }
/* Les étiquettes, hors de l'affiche, à la hauteur de leur point. */
.dlv-etape{
  position:absolute; display:inline-flex; align-items:center; gap:.45rem; translate:0 -50%;
  padding:.3rem .8rem .3rem .3rem; border-radius:6rem; background:#fff; box-shadow:0 8px 20px -10px rgba(0,0,0,.35);
  font-size:.8rem; font-weight:600; white-space:nowrap;
}
.dlv-etape--g{ right:calc(100% + 1rem); }
.dlv-etape--d{ left:calc(100% + 1rem); }
.dlv-etape b{ display:grid; place-items:center; width:1.45rem; height:1.45rem; border-radius:50%; background:#F28B35; color:#fff; font-size:.72rem; }
.dlv-legende{ display:none; }
@media (prefers-reduced-motion:no-preference){
  .js .dlv-etape{ opacity:0; transition:opacity .6s var(--ease) calc(var(--k) * 3.2s + .3s); }
  .js .dlv-z.dessine ~ .dlv-etape{ opacity:1; }
  .js .dlv-z.efface ~ .dlv-etape{ opacity:0; transition:opacity .5s var(--ease); }
  .js .dlv-z.sans-transition ~ .dlv-etape{ transition:none; }
}
@media (max-width:1100px){
  .dlv-etape{ display:none; }
  .dlv-legende{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1rem; counter-reset:z; list-style:none; margin:0; padding:0; font-size:.88rem; font-weight:500; }
  .dlv-legende li{ display:inline-flex; align-items:center; gap:.4rem; counter-increment:z; }
  .dlv-legende li::before{ content:counter(z); display:grid; place-items:center; width:1.4rem; height:1.4rem; border-radius:50%; background:#F28B35; color:#fff; font-size:.72rem; font-weight:700; }
}
/* --- Le dépliant et la carte recto verso (composants.mjs) ---
   Une feuille qui se retourne ; le dépliant se replie à moitié pendant
   qu'il tourne, ses volets de côté sur leur pli. */
.depliant-scene{ display:grid; place-items:center; padding:clamp(1.6rem,5vw,4rem) clamp(1rem,4vw,3rem) clamp(4.4rem,7vw,5.4rem); perspective:2200px; }
.depliant, .carte-rv{ position:relative; width:100%; display:grid; justify-items:center; }
.depliant-feuille{ position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:min(100%,62rem, calc(3 * var(--ratio-volet) * 34rem)); transform-style:preserve-3d; transition:transform 1.4s cubic-bezier(.6,0,.2,1); }
.depliant[data-mode="verso"] .depliant-feuille, .depliant[data-mode="interieur"] .depliant-feuille, .carte-rv[data-mode="verso"] .carte-rv-in{ transform:rotateY(180deg); }
.depliant-volet{ position:relative; aspect-ratio:var(--ratio-volet); transform-style:preserve-3d; }
.depliant-volet:first-child{ transform-origin:right center; --pli:42deg; }
.depliant-volet:last-child{ transform-origin:left center; --pli:-42deg; }
.depliant-volet:nth-child(2){ --pli:0deg; }
.face-recto, .face-verso{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  backface-visibility:hidden; -webkit-backface-visibility:hidden; box-shadow:0 26px 50px -24px rgba(0,0,0,.45);
}
.face-verso{ transform:rotateY(180deg); }
@media (prefers-reduced-motion:no-preference){
  .depliant .depliant-volet{ animation:depliant-plie-a 1.4s cubic-bezier(.6,0,.2,1); }
  .depliant[data-mode="verso"] .depliant-volet, .depliant[data-mode="interieur"] .depliant-volet{ animation-name:depliant-plie-b; }
}
@keyframes depliant-plie-a{ 0%, 100%{ transform:none; } 45%{ transform:rotateY(var(--pli)); } }
@keyframes depliant-plie-b{ 0%, 100%{ transform:none; } 45%{ transform:rotateY(var(--pli)); } }
.carte-rv-in{ position:relative; width:min(78%,22rem); aspect-ratio:var(--ratio-carte); transform-style:preserve-3d; transition:transform 1.2s cubic-bezier(.6,0,.2,1); }
.depliant .bascule-boutons, .carte-rv .bascule-boutons{ position:absolute; bottom:calc(-1 * clamp(3.4rem,5.5vw,4.2rem)); }

/* --- Terre Fragile, l'association : le logo qui se compose, les colibris
   qui volent sur place --- */
.tfa-logo svg{ display:block; width:min(72%,34rem); height:auto; --etale:2.2s; }
@media (prefers-reduced-motion:no-preference){
  .tfa-illustrations img{ animation:tfa-vol 3.6s ease-in-out infinite alternate; }
  .tfa-illustrations img:nth-child(2){ animation-delay:-1.1s; animation-duration:4.2s; }
  .tfa-illustrations img:nth-child(3){ animation-delay:-2.3s; animation-duration:3.9s; }
  .tfa-illustrations img:nth-child(4){ animation-delay:-.6s; animation-duration:4.6s; }
  .tfa-illustrations img:nth-child(5){ animation-delay:-1.7s; animation-duration:5.2s; }
  .tfa-illustrations img:nth-child(6){ animation-delay:-2.9s; animation-duration:4.4s; }
}
@keyframes tfa-vol{ from{ transform:translateY(0) rotate(-2deg); } to{ transform:translateY(-6%) rotate(2deg); } }

/* --- Exposition Terre Fragile : le site reconstruit (expo-terre-fragile.mjs) ---
   Ses polices, son noir, son orange. Les mesures du site, en pixels d'un
   écran de 1440, sont rapportées à la largeur du bloc : --u vaut un de ces
   pixels. */
@font-face{ font-family:"TF Montserrat"; src:url("../Assets/realisations/terre-fragile/polices/montserrat-variable.woff2?v=c154477b") format("woff2"); font-weight:200 600; font-display:swap; }
@font-face{ font-family:"TF Caveat"; src:url("../Assets/realisations/terre-fragile/polices/caveat-500.woff2?v=cf3c9470") format("woff2"); font-weight:500; font-display:swap; }
.tfe-site, .tfe-livre-scene, .tfe-papier{ --tf-orange:#ff4b1f; --tf-gris:#b8b4ae; }
.tfe-site{
  --u:calc(100cqw / 1440);
  position:relative; overflow:hidden; container-type:inline-size;
  background:#000; color:#fff; font-family:"TF Montserrat",sans-serif; line-height:1.5;
}
.tfe-site button{ font-family:inherit; }
.tfe-barre{
  position:absolute; z-index:3; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center;
  padding:calc(30 * var(--u)) calc(42 * var(--u)) 0; font-size:max(calc(11 * var(--u)), 6px); font-weight:600; letter-spacing:.22em; text-transform:uppercase;
}
.tfe-barre i{
  width:calc(28 * var(--u)); height:calc(17 * var(--u));
  background:linear-gradient(#fff 0 0) top / 100% max(1px, calc(1.5 * var(--u))) no-repeat, linear-gradient(#fff 0 0) center / 100% max(1px, calc(1.5 * var(--u))) no-repeat, linear-gradient(#fff 0 0) bottom / 100% max(1px, calc(1.5 * var(--u))) no-repeat;
}

/* L'accueil : la photo floue, le voile, le titre en capitales fines. */
.tfe-une{ aspect-ratio:1.6; }
.tfe-une-fond{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%;
  filter:blur(calc(14 * var(--u))) brightness(.75); transform:scale(1.08);
}
.tfe-une::after{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.75) 100%); }
.tfe-une-titre{ position:absolute; z-index:2; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.tfe-h1{
  margin:0; font-size:calc(104 * var(--u)); font-weight:200; letter-spacing:.24em; text-indent:.24em;
  line-height:1.12; text-transform:uppercase; text-shadow:0 2px 30px rgba(0,0,0,.6);
}
.tfe-h1 > span{ display:block; }
.tfe-sous{
  margin:calc(24 * var(--u)) 0 0; font-size:max(calc(16 * var(--u)), 6.5px); letter-spacing:.3em;
  text-transform:uppercase; text-shadow:0 1px 12px rgba(0,0,0,.8);
}
.tfe-noai{
  position:absolute; z-index:2; left:0; right:0; bottom:calc(34 * var(--u)); margin:0; text-align:center;
  font-size:max(calc(12 * var(--u)), 5.5px); letter-spacing:.12em; text-transform:uppercase; color:var(--tf-gris); text-shadow:0 1px 10px rgba(0,0,0,.85);
}
.tfe-noai em{ font-style:normal; font-weight:500; color:var(--tf-orange); }
@container (max-width:560px){
  .tfe-sous .tfe-coupe{ display:block; height:.4em; }
}
@media (prefers-reduced-motion:no-preference){
  .tfe-une-fond{ animation:tfe-respire 16s ease-in-out infinite alternate; }
  .js .tfe-h1 > span > span{ display:inline-block; opacity:0; filter:blur(6px); transform:translateY(.12em); transition:opacity 1.2s var(--ease), filter 1.2s var(--ease), transform 1.2s var(--ease); transition-delay:calc(.3s + var(--l) * 90ms); }
  .js .tfe-h1 > span + span > span{ transition-delay:calc(.75s + var(--l) * 90ms); }
  .js .tfe-sous, .js .tfe-noai{ opacity:0; transition:opacity 1.4s var(--ease) 1.6s; }
  .js .tfe-noai{ transition-delay:2.2s; }
  .js .vu .tfe-h1 > span > span{ opacity:1; filter:none; transform:none; }
  .js .vu .tfe-sous, .js .vu .tfe-noai{ opacity:1; }
}
@keyframes tfe-respire{ to{ transform:scale(1.16) translate(-1.5%, -1%); } }

/* Les timbres : la planche du site, ses dents taillées dans le noir. */
.tfe-timbres{
  --u:calc(100cqw / 1220); --d:calc(6 * var(--u)); --dent:calc(5.4 * var(--u));
  list-style:none; margin:0; padding:calc(70 * var(--u)) calc(30 * var(--u)) calc(90 * var(--u));
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); justify-items:center; align-items:start; gap:calc(46 * var(--u)) calc(30 * var(--u));
}
.tfe-timbre{
  position:relative; padding:calc(9 * var(--u)) calc(9 * var(--u)) calc(22 * var(--u));
  background:
    radial-gradient(circle var(--d) at calc(11 * var(--u)) 0, #000 var(--dent), transparent var(--d)) top left / calc(22 * var(--u)) calc(12 * var(--u)) repeat-x,
    radial-gradient(circle var(--d) at calc(11 * var(--u)) calc(12 * var(--u)), #000 var(--dent), transparent var(--d)) bottom left / calc(22 * var(--u)) calc(12 * var(--u)) repeat-x,
    radial-gradient(circle var(--d) at 0 calc(11 * var(--u)), #000 var(--dent), transparent var(--d)) top left / calc(12 * var(--u)) calc(22 * var(--u)) repeat-y,
    radial-gradient(circle var(--d) at calc(12 * var(--u)) calc(11 * var(--u)), #000 var(--dent), transparent var(--d)) top right / calc(12 * var(--u)) calc(22 * var(--u)) repeat-y,
    #f2efe8;
  box-shadow:0 calc(16 * var(--u)) calc(34 * var(--u)) rgba(0,0,0,.65);
  transform:rotate(var(--r)) translateY(calc(var(--dy) * var(--u)));
  transition:transform .45s ease;
}
.tfe-timbre img{ display:block; width:100%; object-fit:cover; }
.tfe-timbre--h{ width:calc(250 * var(--u)); }
.tfe-timbre--h img{ height:calc(150 * var(--u)); }
.tfe-timbre--v{ width:calc(180 * var(--u)); }
.tfe-timbre--v img{ height:calc(210 * var(--u)); }
.tfe-timbre-pied{ display:flex; justify-content:space-between; align-items:baseline; gap:calc(6 * var(--u)); margin-top:calc(10 * var(--u)); text-transform:uppercase; letter-spacing:.12em; line-height:1.2; }
.tfe-timbre-pied span:first-child{ font-size:calc(10 * var(--u)); font-weight:600; color:#2b2b2b; }
.tfe-timbre-pied span:last-child{ font-size:calc(9 * var(--u)); font-weight:500; color:#5a5752; text-align:right; }
.tfe-timbre:hover{ animation:none; z-index:2; transform:rotate(0deg) translateY(calc(var(--dy) * var(--u))) scale(1.05); }
@container (max-width:560px){
  .tfe-timbres{ --u:calc(100cqw / 600); grid-template-columns:repeat(2, minmax(0,1fr)); padding-block:calc(50 * var(--u)) calc(60 * var(--u)); }
  /* Comme sur le site, en petit : le nom seul, centré. */
  .tfe-timbre-pied{ justify-content:center; margin-top:calc(7 * var(--u)); }
  .tfe-timbre-pied span:first-child{ font-size:calc(12 * var(--u)); }
  .tfe-timbre-pied span:last-child{ display:none; }
}
@media (prefers-reduced-motion:no-preference){
  .js .tfe-timbres-bloc .tfe-timbre{
    opacity:0; transform:rotate(calc(var(--r) * 3)) translateY(calc((var(--dy) - 50) * var(--u))) scale(1.12);
    transition:opacity .6s var(--ease), transform 1s cubic-bezier(.2,1.25,.4,1); transition-delay:calc(.2s + var(--i) * 110ms);
  }
  .js .tfe-timbres-bloc.vu .tfe-timbre{ opacity:1; transform:rotate(var(--r)) translateY(calc(var(--dy) * var(--u))); }
  .tfe-timbres-bloc.vu .tfe-timbre{ animation:tfe-souleve 19.2s ease-in-out calc(2.4s + var(--i) * 2.4s) infinite; }
  .js .tfe-timbres-bloc.vu .tfe-timbre:hover{ animation:none; transform:rotate(0deg) translateY(calc(var(--dy) * var(--u))) scale(1.05); transition-delay:0s; }
}
@keyframes tfe-souleve{
  0%, 10%, 100%{ transform:rotate(var(--r)) translateY(calc(var(--dy) * var(--u))); z-index:0; }
  3%, 7%{ transform:rotate(0deg) translateY(calc(var(--dy) * var(--u))) scale(1.06); z-index:2; }
}

/* Les salles : l'œuvre plein cadre, la citation à la main en haut à gauche,
   le nom de la salle en bas à droite. */
.tfe-salles{ aspect-ratio:1.6; }
.tfe-salle{ position:absolute; inset:0; margin:0; opacity:0; visibility:hidden; transition:opacity 1s var(--ease), visibility 0s 1s; }
.tfe-salle.est-actif{ opacity:1; visibility:visible; transition:opacity 1s var(--ease); }
.tfe-salle::after{ content:''; position:absolute; inset:0; background:linear-gradient(transparent 65%, rgba(0,0,0,.55)); }
.tfe-salle-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.07); transition:transform 1.8s cubic-bezier(.16,1,.3,1); }
.tfe-salle.est-actif .tfe-salle-img{ transform:none; }
.tfe-citation{ position:absolute; z-index:2; top:12%; left:6%; max-width:calc(560 * var(--u)); margin:0; }
.tfe-citation p{ margin:0; font-family:"TF Caveat",cursive; font-weight:500; font-size:calc(36 * var(--u)); line-height:1.4; text-shadow:0 2px 14px rgba(0,0,0,.8); }
.tfe-citation footer{ margin-top:calc(20 * var(--u)); font-size:max(calc(12 * var(--u)), 6px); font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--tf-orange); }
.tfe-citation small{ display:block; margin-top:calc(8 * var(--u)); font-size:inherit; font-weight:400; letter-spacing:.12em; text-transform:none; color:var(--tf-gris); }
.tfe-caret{ display:none; width:max(1px, calc(1.5 * var(--u))); height:.9em; margin-left:.06em; vertical-align:-.1em; background:#fff; animation:tfe-clignote 1s steps(1) infinite; }
@keyframes tfe-clignote{ 50%{ opacity:0; } }
/* Le script tape la citation : le texte entier reste aux lecteurs d'écran. */
.tfe-salles.tape .tfe-lu{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.tfe-salles.tape .tfe-caret{ display:inline-block; }
.tfe-salle-nom{
  position:absolute; z-index:2; right:calc(42 * var(--u)); bottom:calc(38 * var(--u)); display:flex; align-items:baseline; gap:calc(18 * var(--u));
  font-size:max(calc(13 * var(--u)), 6.5px); font-weight:500; letter-spacing:.3em; text-transform:uppercase; text-shadow:0 1px 10px rgba(0,0,0,.85);
}
.tfe-salle-nom span{ font-size:.85em; letter-spacing:.22em; color:var(--tf-gris); }
.tfe-salles-pas{ position:absolute; z-index:3; left:calc(42 * var(--u)); bottom:calc(30 * var(--u)); display:flex; gap:.5rem; }
.tfe-salles-pas button, .tfe-livre-commandes button{
  display:grid; place-items:center; width:2.3rem; height:2.3rem; border-radius:50%;
  border:1px solid rgba(255,255,255,.3); color:#fff; transition:border-color .3s, background-color .3s;
}
.tfe-salles-pas button:hover, .tfe-livre-commandes button:hover{ border-color:#fff; background:rgba(255,255,255,.1); }
.tfe-salles-pas svg, .tfe-livre-commandes svg{ width:1.05rem; height:1.05rem; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:560px){ .tfe-salles{ aspect-ratio:1.15; } }
@container (max-width:560px){
  .tfe-salles > *{ --u:calc(100cqw / 520); }
  .tfe-citation{ top:auto; bottom:22%; left:6%; right:6%; max-width:none; }
  .tfe-citation p{ font-size:calc(30 * var(--u)); }
  .tfe-citation small{ display:none; }
  .tfe-salle-img{ object-position:center 30%; }
  .tfe-salle::after{ background:linear-gradient(transparent 35%, rgba(0,0,0,.75)); }
  .tfe-salles-pas{ bottom:calc(26 * var(--u)); }
  .tfe-salles-pas button{ width:2rem; height:2rem; }
}

/* Le configurateur : la pièce à gauche, les choix à droite, comme sur le site. */
.tfe-config{
  display:grid; grid-template-columns:minmax(0,1.65fr) minmax(15rem,1fr); gap:clamp(1.4rem,4vw,3.6rem); align-items:start;
  padding:clamp(1rem,4vw,3.6rem);
}
.tfe-piece{ position:relative; aspect-ratio:1316/824; overflow:hidden; border:1px solid rgba(255,255,255,.1); border-radius:14px; background:#050505; }
.tfe-decor{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s var(--ease); }
.tfe-decor.est-actif{ opacity:1; }
.tfe-cadre{
  position:absolute; z-index:2; left:50%; top:33%; height:var(--h); aspect-ratio:var(--ratio); padding:.6%; box-sizing:content-box;
  transform:translate(-50%,-50%); background:#141414;
  box-shadow:0 1.6em 3.4em rgba(0,0,0,.5), 0 .3em .9em rgba(0,0,0,.35);
  transition:height .5s cubic-bezier(.22,1,.36,1), aspect-ratio .5s cubic-bezier(.22,1,.36,1), padding .4s, background-color .4s;
}
.tfe-cadre img{ display:block; width:100%; height:100%; object-fit:cover; transition:opacity .25s ease; }
.tfe-cadre.tfe-caisse{ padding:1.7%; background:#050505; box-shadow:0 1.6em 3.6em rgba(0,0,0,.55), 0 .3em .9em rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.08); }
.tfe-cadre.tfe-caisse::after{ content:''; position:absolute; inset:1%; border:1px solid rgba(255,255,255,.14); pointer-events:none; }
.tfe-rubrique{ margin:1.6rem 0 .8rem; font-size:.7rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--tf-gris); }
.tfe-rubrique:first-child{ margin-top:0; }
.tfe-puces{ display:flex; flex-wrap:wrap; gap:.6rem; }
.tfe-puces--egales{ flex-wrap:nowrap; }
.tfe-puces button, .tfe-choix-bouton{
  border:1px solid rgba(255,255,255,.3); border-radius:999px; color:#fff; font-size:.72rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; padding:.7rem 1.1rem;
  transition:background-color .35s, color .35s, border-color .35s, transform .15s;
}
.tfe-puces--egales button{ flex:1 1 0; min-width:0; padding-inline:.3rem; letter-spacing:.08em; white-space:nowrap; text-align:center; }
.tfe-puces button:hover, .tfe-choix-bouton:hover{ border-color:#fff; }
.tfe-puces button:active, .tfe-choix-bouton:active{ transform:scale(.97); }
.tfe-puces button[aria-pressed="true"]{ background:#fff; color:#000; border-color:#fff; }
.tfe-choix{ position:relative; }
.tfe-choix-bouton{ display:flex; justify-content:space-between; align-items:center; gap:.8rem; width:100%; padding:.8rem 1.25rem; }
.tfe-choix-fleche{ font-size:.62rem; color:var(--tf-gris); transition:transform .3s; }
.tfe-choix.ouvert .tfe-choix-fleche{ transform:rotate(180deg); }
.tfe-choix-liste{
  position:absolute; z-index:5; top:calc(100% + .6rem); left:0; right:0; display:none; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; padding:.75rem;
  background:#050505; border:1px solid rgba(255,255,255,.14); border-radius:14px; box-shadow:0 0 46px rgba(255,244,226,.1), 0 24px 50px rgba(0,0,0,.8);
}
.tfe-choix.ouvert .tfe-choix-liste{ display:grid; }
.tfe-choix-liste button{ position:relative; overflow:hidden; border:1px solid transparent; border-radius:4px; opacity:.75; transition:opacity .25s, border-color .25s; }
.tfe-choix-liste button:hover, .tfe-choix-liste button[aria-pressed="true"]{ opacity:1; }
.tfe-choix-liste button[aria-pressed="true"]{ border-color:var(--tf-orange); }
.tfe-choix-liste img{ display:block; width:100%; aspect-ratio:1; height:auto; object-fit:cover; }
.tfe-choix-liste span{
  position:absolute; left:0; right:0; bottom:0; padding:.2rem .3rem; background:rgba(0,0,0,.55); text-align:left;
  font-size:.62rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media (max-width:900px){ .tfe-config{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:480px){
  .tfe-puces{ gap:.35rem; }
  .tfe-puces button{ font-size:.62rem; padding:.7rem .8rem; }
  .tfe-puces--egales button{ padding-inline:.2rem; letter-spacing:.02em; }
}

/* Le livre : six feuilles qui tournent sur la reliure. Fermé, il montre sa
   couverture, centrée ; au bout, sa quatrième. Une feuille tournée (--f)
   passe à gauche ; elle change de plan à mi-course, quand elle est de chant. */
.tfe-livre-scene{
  display:grid; place-items:center; padding:clamp(1.6rem,5vw,4rem) clamp(.8rem,3vw,2.4rem) clamp(1.2rem,3vw,2rem);
  background:radial-gradient(ellipse 70% 60% at 50% 42%, #262422, #000 75%);
}
.tfe-livre-bloc{ --rang:0; width:100%; display:grid; justify-items:center; gap:clamp(1rem,2.5vw,1.8rem); }
.tfe-livre{ position:relative; width:min(100%,46rem); aspect-ratio:2; }
.tfe-livre-in{
  position:absolute; inset:0; perspective:2600px;
  transform:translateX(calc(-25% * (1 - min(var(--rang), 1)) + 25% * max(var(--rang) - 5, 0)));
  transition:transform .9s cubic-bezier(.6,0,.2,1);
}
.tfe-feuille{
  --f:clamp(0, var(--rang) - var(--n), 1);
  position:absolute; top:0; left:50%; width:50%; height:100%; transform-origin:left center; transform-style:preserve-3d;
  transform:rotateY(calc(-180deg * var(--f)));
  z-index:calc(var(--f) * var(--n) + (1 - var(--f)) * (6 - var(--n)));
  transition:transform 1s cubic-bezier(.45,.05,.25,1), z-index 0s .5s;
}
.tfe-face{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; backface-visibility:hidden; -webkit-backface-visibility:hidden; box-shadow:0 22px 40px -20px rgba(0,0,0,.9); }
.tfe-face--verso{ transform:rotateY(180deg); }
/* Le creux de la reliure, sur chaque page. */
.tfe-feuille::before, .tfe-feuille::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.tfe-feuille::before{ background:linear-gradient(to right, rgba(0,0,0,.28), rgba(0,0,0,0) 9%); transform:translateZ(.5px); }
.tfe-feuille::after{ background:linear-gradient(to left, rgba(0,0,0,.28), rgba(0,0,0,0) 9%); transform:rotateY(180deg) translateZ(.5px); }
.tfe-feuille:first-child::before, .tfe-feuille:last-child::after{ background:linear-gradient(to right, rgba(255,255,255,.08), rgba(255,255,255,0) 3%); }
.tfe-livre-moitie{ position:absolute; z-index:20; top:0; bottom:0; width:50%; cursor:pointer; }
.tfe-livre-moitie--g{ left:0; }
.tfe-livre-moitie--d{ right:0; }
.tfe-livre-commandes{ display:flex; align-items:center; gap:1rem; width:min(100%,30rem); }
.tfe-livre-commandes p{ position:relative; flex:1; margin:0; height:1.4em; font-family:"TF Montserrat",sans-serif; font-size:.72rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; text-align:center; color:var(--tf-gris); }
.tfe-livre-commandes span{ position:absolute; inset:0; opacity:0; transition:opacity .5s var(--ease); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tfe-livre-commandes span.est-actif{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .tfe-feuille, .tfe-livre-in{ transition-duration:0s; } }
@media (max-width:560px){ .tfe-livre-commandes p{ font-size:.62rem; letter-spacing:.08em; } }

/* L'exposition en place : les lieux en fondu, lentement approchés. */
.tfe-expo{ aspect-ratio:16/8; }
.tfe-lieu{ position:absolute; inset:0; margin:0; opacity:0; visibility:hidden; transition:opacity 1.2s var(--ease), visibility 0s 1.2s; }
.tfe-lieu.est-actif{ opacity:1; visibility:visible; transition:opacity 1.2s var(--ease); }
.tfe-lieu img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.001); }
.tfe-lieu::after{ content:''; position:absolute; inset:0; background:linear-gradient(transparent 60%, rgba(0,0,0,.6)); }
.tfe-lieu figcaption{
  position:absolute; z-index:2; left:calc(42 * var(--u)); right:6rem; bottom:calc(36 * var(--u)); display:flex; align-items:center; gap:.7em;
  font-size:max(calc(13 * var(--u)), 9px); font-weight:500; letter-spacing:.22em; text-transform:uppercase; text-shadow:0 1px 10px rgba(0,0,0,.85);
}
.tfe-lieu figcaption::before{ content:''; flex:none; width:1.4em; height:1px; background:var(--tf-orange); }
.tfe-expo-points{ position:absolute; z-index:3; right:calc(42 * var(--u)); bottom:calc(36 * var(--u)); display:flex; gap:.2rem; }
.tfe-expo-points button{ width:1.6rem; height:1.6rem; display:grid; place-items:center; }
.tfe-expo-points button::before{ content:''; width:.45rem; height:.45rem; border-radius:50%; border:1px solid #fff; transition:background-color .3s; }
.tfe-expo-points button[aria-current="true"]::before{ background:#fff; }
@media (prefers-reduced-motion:no-preference){
  .tfe-lieu.est-actif img{ animation:tfe-approche 7s linear forwards; }
}
@keyframes tfe-approche{ from{ transform:scale(1.001); } to{ transform:scale(1.08); } }
@media (max-width:560px){ .tfe-expo{ aspect-ratio:4/3; } .tfe-lieu figcaption{ right:4.6rem; letter-spacing:.12em; } }

/* La carte et la lettre, posées sur le papier. */
.tfe-papier{ background:var(--sable); }
.carte-vernis{
  position:absolute; inset:0; pointer-events:none; backface-visibility:hidden; -webkit-backface-visibility:hidden; transform:translateZ(1px);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  background:linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.42) 47%, rgba(255,255,255,.7) 50%, rgba(255,255,255,.42) 53%, rgba(255,255,255,0) 62%) no-repeat 150% 0 / 250% 100%;
}
@media (prefers-reduced-motion:no-preference){
  .carte-vernis{ animation:carte-reflet 4.2s ease-in-out infinite; }
}
@keyframes carte-reflet{ 0%{ background-position:150% 0; } 55%, 100%{ background-position:-50% 0; } }
.tfe-lettre-scene{ display:grid; place-items:center; padding:clamp(1.4rem,4vw,3rem); }
.tfe-mail{ width:min(100%,25rem); border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 30px 60px -25px rgba(0,0,0,.45); container-type:inline-size; }
.tfe-mail-tete{ padding:.8rem 1rem; border-bottom:1px solid #e7e3dd; font-size:.74rem; line-height:1.5; color:var(--noir); }
.tfe-mail-tete p{ margin:0; display:flex; gap:.6rem; }
.tfe-mail-tete span{ width:2.8rem; flex:none; color:var(--gris-texte); }
.tfe-mail-corps{ position:relative; height:clamp(20rem,44vw,27rem); overflow:hidden; background:#000; }
.tfe-nl{
  --u:calc(100cqw / 600);
  padding:calc(44 * var(--u)) calc(54 * var(--u)) calc(60 * var(--u)); color:#fff; font-family:"TF Montserrat",sans-serif;
  font-size:calc(14 * var(--u)); line-height:1.7;
}
.tfe-nl p{ margin:0 0 1.1em; }
.tfe-nl b{ font-weight:600; }
.tfe-nl-tete{ display:grid; grid-template-columns:1fr 44%; gap:calc(16 * var(--u)); align-items:start; margin-bottom:calc(30 * var(--u)); }
.tfe-nl-tete img, .tfe-nl-duo img{ display:block; width:100%; height:auto; }
.tfe-nl-sur{ font-size:calc(10 * var(--u)); font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--tf-gris); }
.tfe-nl .tfe-nl-titre{ margin:0; font-size:calc(38 * var(--u)); font-weight:300; letter-spacing:.18em; line-height:1.2; text-transform:uppercase; }
.tfe-nl .tfe-nl-titre--petit{ margin:calc(36 * var(--u)) 0 calc(24 * var(--u)); padding-top:calc(30 * var(--u)); border-top:1px solid #3a3330; font-size:calc(26 * var(--u)); letter-spacing:.16em; }
.tfe-nl-trait{ display:block; width:calc(48 * var(--u)); height:calc(2 * var(--u)); margin-top:calc(20 * var(--u)); background:var(--tf-orange); }
.tfe-nl-duo{ display:grid; grid-template-columns:1fr 34%; gap:calc(22 * var(--u)); align-items:start; }
.tfe-nl-bouton{ display:inline-block; margin-top:.4em; padding:calc(16 * var(--u)) calc(34 * var(--u)); border:1px solid var(--tf-orange); border-radius:999px; font-size:calc(12 * var(--u)); font-weight:500; letter-spacing:.22em; text-transform:uppercase; }
.tfe-nl .tfe-nl-rubrique{ margin:calc(22 * var(--u)) 0 calc(10 * var(--u)); color:var(--tf-orange); }
.tfe-nl ul{ list-style:none; margin:0; padding:0; }
.tfe-nl li{ display:grid; grid-template-columns:30% 1fr; gap:calc(12 * var(--u)); padding:calc(10 * var(--u)) 0; border-bottom:1px solid #1d1b1a; font-size:calc(12 * var(--u)); }
.tfe-nl li span:first-child{ color:var(--tf-gris); }
.tfe-nl li em{ font-style:normal; color:#6d6a66; }
@media (prefers-reduced-motion:no-preference){
  .tfe-nl{ animation:tfe-lettre 30s ease-in-out 1.5s infinite alternate; }
  .tfe-mail:hover .tfe-nl{ animation-play-state:paused; }
}
@keyframes tfe-lettre{ 0%, 8%{ transform:none; } 92%, 100%{ transform:translateY(calc(-100% + clamp(20rem,44vw,27rem))); } }

/* --- Vanessa Forget : le site reconstruit (vanessa-site.mjs) ---
   Ses polices, sa palette de série (--fond, --texte, --accent) et ses
   couleurs dérivées. Les mesures du site, en pixels d'un écran de 1440
   (--u), passent à celles d'un téléphone de 390 sous 560 px de large : les
   mêmes blocs se lisent comme le site sur ordinateur, ou dans un téléphone. */
@font-face{ font-family:"VF Bodoni"; src:url("../Assets/realisations/vanessa-forget/polices/bodoni-moda-variable.woff2?v=09bd6196") format("woff2"); font-style:normal; font-weight:400; font-display:swap; }
@font-face{ font-family:"VF Bodoni"; src:url("../Assets/realisations/vanessa-forget/polices/bodoni-moda-italique.woff2?v=15b972be") format("woff2"); font-style:italic; font-weight:400; font-display:swap; }
@font-face{ font-family:"VF Archivo"; src:url("../Assets/realisations/vanessa-forget/polices/archivo-variable.woff2?v=4ba98906") format("woff2"); font-weight:400 500; font-display:swap; }
.vfe-site, .vfe-serie{
  --texte-doux:color-mix(in srgb, var(--texte) 70%, var(--fond));
  --trait:color-mix(in srgb, var(--texte) 16%, transparent);
  --trait-fort:color-mix(in srgb, var(--texte) 34%, transparent);
}
.vfe-site{
  --u:calc(100cqw / 1440); --marge:calc(49.6 * var(--u)); --barre:calc(62.4 * var(--u));
  position:relative; overflow:hidden; container-type:inline-size;
  background:var(--fond); color:var(--texte); font-family:"VF Archivo",system-ui,sans-serif; line-height:1.6;
}
/* La taille du texte courant se pose sur les enfants : c'est là que --u
   se rapporte au bloc (et au téléphone, sous 560 px). */
.vfe-site > *{ font-size:calc(16 * var(--u)); }
.vfe-site p{ margin:0; }
.vfe-site button{ font-family:inherit; color:inherit; }
.vfe-barre{
  position:relative; z-index:3; height:var(--barre); display:flex; align-items:center; justify-content:space-between; gap:calc(24 * var(--u));
  padding-inline:var(--marge); border-bottom:1px solid var(--trait); background:color-mix(in srgb, var(--fond) 92%, transparent); color:var(--texte);
}
.vfe-signature{ font-family:"VF Bodoni",Didot,serif; font-style:italic; font-size:calc(25.5 * var(--u)); line-height:1; }
.vfe-liens{ display:flex; gap:calc(37 * var(--u)); }
.vfe-liens span, .vfe-menu, .vfe-etiquette{ font-size:calc(13 * var(--u)); font-weight:500; letter-spacing:.2em; text-transform:uppercase; line-height:1.4; }
.vfe-liens span{ padding-block:calc(12 * var(--u)); border-bottom:1px solid transparent; }
.vfe-liens span.est-actif{ border-bottom-color:currentColor; }
.vfe-menu{ display:none; }
.vfe-etiquette{ color:var(--texte-doux); }
.vfe-titre-1, .vfe-titre-2, .vfe-titre-3{ font-family:"VF Bodoni",Didot,serif; font-weight:400; line-height:1.06; letter-spacing:-.012em; text-wrap:balance; }
.vfe-titre-1{ font-size:calc(79.5 * var(--u)); }
.vfe-titre-2{ font-size:calc(56.5 * var(--u)); }
.vfe-titre-3{ font-size:calc(34.8 * var(--u)); }
.vfe-chapo{ font-family:"VF Bodoni",Didot,serif; font-style:italic; font-size:calc(21.7 * var(--u)); line-height:1.35; color:color-mix(in srgb, var(--texte) 80%, var(--fond)); }
.vfe-page{ padding:calc(48 * var(--u)) var(--marge) calc(56 * var(--u)); }

/* L'accueil : l'œuvre plein cadre sous son voile, le titre, les six noms. */
.vfe-accueil{ aspect-ratio:1.6; display:grid; grid-template-rows:auto 1fr; }
.vfe-hero{ position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-rows:1fr auto auto; background:#0C0E0F; color:#F2F3F1; }
.vfe-diapo{ position:absolute; z-index:0; inset:0; margin:0; opacity:0; transition:opacity 1.2s ease; }
.vfe-diapo.est-actif{ opacity:1; }
.vfe-diapo img{ display:block; width:100%; height:100%; object-fit:cover; }
.vfe-hero::after{
  content:''; position:absolute; z-index:1; inset:0; pointer-events:none;
  background:linear-gradient(to right, rgb(9 11 12 / .66) 0%, rgb(9 11 12 / .38) 42%, rgb(9 11 12 / 0) 66%),
    linear-gradient(to top, rgb(9 11 12 / .78) 0%, rgb(9 11 12 / .5) 36%, rgb(9 11 12 / 0) 66%, rgb(9 11 12 / .12) 100%);
}
.vfe-entete, .vfe-commandes{ position:relative; z-index:2; }
.vfe-entete{ grid-row:2; display:flex; flex-direction:column; padding:0 var(--marge) calc(45.6 * var(--u)); text-shadow:0 1px 2rem rgb(9 11 12 / .55), 0 0 .5rem rgb(9 11 12 / .25); }
.vfe-baseline{ margin-bottom:calc(16 * var(--u)) !important; font-family:"VF Bodoni",Didot,serif; font-style:italic; font-size:calc(21.7 * var(--u)); }
.vfe-hero .vfe-titre-1{ max-width:14ch; }
.vfe-hero .vfe-titre-1 em{ color:color-mix(in oklab, var(--accent-diapo) 42%, white); transition:color .7s ease; }
.vfe-commandes{ grid-row:3; display:flex; align-items:center; gap:calc(24 * var(--u)); padding:0 var(--marge) calc(16 * var(--u)); }
.vfe-onglets{ display:flex; flex:1; gap:calc(29 * var(--u)); list-style:none; margin:0; padding:0; }
.vfe-onglets button{
  display:flex; flex-direction:column; gap:calc(8.8 * var(--u)); padding-block:calc(15.2 * var(--u)); text-align:left; color:#C3C7C2;
  font-size:calc(13 * var(--u)); font-weight:500; letter-spacing:.2em; text-transform:uppercase; line-height:1.4; transition:color .25s;
}
.vfe-onglets button:hover, .vfe-onglets button[aria-current="true"]{ color:#F2F3F1; }
.vfe-progression{ display:block; width:100%; height:max(1px, calc(2 * var(--u))); overflow:hidden; }
.vfe-onglets [aria-current="true"] .vfe-progression{ background:rgb(255 255 255 / .24); }
.vfe-progression span{ display:block; height:100%; background:currentColor; transform:scaleX(0); transform-origin:left center; }
.vfe-onglets [aria-current="true"] .vfe-progression span{ animation:vfe-progression var(--duree-diapo) linear forwards; }
.est-tenu .vfe-onglets [aria-current="true"] .vfe-progression span{ animation:none; transform:none; }
@keyframes vfe-progression{ to{ transform:none; } }
.vfe-boutons{ display:flex; gap:calc(4 * var(--u)); flex:none; }
.vfe-boutons button{ display:grid; place-items:center; width:max(2rem, calc(44 * var(--u))); height:max(2rem, calc(44 * var(--u))); border-radius:50%; color:#F2F3F1; transition:background-color .2s; }
.vfe-boutons button:hover{ background:rgb(255 255 255 / .12); }
.vfe-boutons svg, .vfe-selecteur svg, .vfe-fermer svg{ width:1.15em; height:1.15em; fill:none; stroke:currentColor; stroke-width:1.5; }
.vfe-boutons svg{ width:calc(20 * var(--u)); height:calc(20 * var(--u)); min-width:.9rem; min-height:.9rem; }
@media (prefers-reduced-motion:reduce){ .vfe-onglets [aria-current="true"] .vfe-progression span{ animation:none; transform:none; } .vfe-diapo{ transition:none; } }

/* Le manifeste : deux temps superposés, l'un paraît quand l'autre s'efface. */
.vfe-manifeste{ --u:calc(100cqw / 1100); }
.vfe-filet{ padding-bottom:calc(16 * var(--u)); border-bottom:1px solid var(--trait); margin-bottom:calc(32 * var(--u)) !important; }
.vfe-manifeste .vfe-titre-2{ max-width:22ch; margin-bottom:calc(40 * var(--u)) !important; }
.vfe-temps{ display:grid; }
.vfe-temps-un{ grid-area:1 / 1; display:grid; grid-template-columns:1fr 1.15fr; gap:calc(48 * var(--u)); align-items:start; opacity:0; transition:opacity 1.2s ease; }
.vfe-manifeste[data-mode="regard"] [data-temps="regard"], .vfe-manifeste[data-mode="geste"] [data-temps="geste"]{ opacity:1; }
.vfe-temps-un p + p{ margin-top:calc(16 * var(--u)); max-width:40ch; }
.vfe-temps-un img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }

/* Les pages de série : chacune dans sa palette ; elles se relaient en fondu. */
.vfe-palettes{ display:grid; gap:clamp(.8rem,1.6vw,1.2rem); }
.vfe-pages-serie{ aspect-ratio:1.6; border-radius:var(--rayon); background:#000; }
.vfe-serie{ position:absolute; inset:0; background:var(--fond); color:var(--texte); opacity:0; visibility:hidden; transition:opacity .7s ease, visibility 0s .7s; }
.vfe-serie.est-actif{ opacity:1; visibility:visible; transition:opacity .7s ease; }
.vfe-serie .vfe-chapo{ margin-top:calc(12 * var(--u)); }
.vfe-invite{ margin-top:calc(16 * var(--u)) !important; max-width:44ch; font-size:calc(13 * var(--u)); color:var(--texte-doux); }
.vfe-texte{ margin-top:calc(32 * var(--u)) !important; max-width:52ch; }
.vfe-oeuvres{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:calc(32 * var(--u)); align-items:start; margin-top:calc(40 * var(--u)); }
.vfe-oeuvres img{ display:block; width:100%; height:auto; }
.vfe-nuancier{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; }
.vfe-nuancier button{
  display:inline-flex; align-items:center; gap:.55rem; padding:.42rem .85rem .42rem .55rem; border-radius:6rem;
  font-size:.8rem; font-weight:500; color:var(--gris-texte); background:var(--blanc); box-shadow:var(--ombre-barre); transition:background-color .4s, color .4s;
}
.vfe-nuancier button[aria-current="true"]{ background:var(--noir); color:var(--blanc); }
.vfe-pastilles{ display:inline-flex; }
.vfe-pastilles i{ width:.9rem; height:.9rem; border-radius:50%; box-shadow:0 0 0 1.5px var(--blanc); }
.vfe-pastilles i + i{ margin-left:-.3rem; }

/* Au téléphone : le même bloc, à la place de l'écran. */
.vfe-tel > .vfe-site{ position:absolute; left:2.4%; top:1.11%; width:95.2%; height:97.78%; aspect-ratio:auto; border-radius:13.2% / 5.95%; }
/* La règle des captures (`.tel img`, l'image prend l'écran) ne vaut pas ici. */
.tel.vfe-tel .vfe-site img{ position:static; width:100%; height:auto; border-radius:0; object-position:50% 50%; }
.tel.vfe-tel .vfe-diapo img{ height:100%; }

/* La mise en situation et la commande : de vrais réglages, en rem. */
.vfe-situation > *, .vfe-commande > *{ font-size:1rem; }
.vfe-situation{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(16rem,1fr); gap:clamp(1.4rem,4vw,3.75rem); align-items:start; padding:clamp(1rem,4vw,3.6rem); }
.vfe-scene{ position:relative; overflow:hidden; background:var(--trait); }
.vfe-decor{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .4s ease; }
.vfe-decor.est-actif{ opacity:1; }
.vfe-cadre{
  position:absolute; z-index:2; left:50%; transform:translateX(-50%);
  box-shadow:0 1.1rem 2.5rem rgb(0 0 0 / .22), 0 .2rem .6rem rgb(0 0 0 / .14);
  transition:width .55s cubic-bezier(.22,1,.36,1), bottom .55s cubic-bezier(.22,1,.36,1);
}
.vfe-cadre img{ display:block; width:100%; height:auto; transition:opacity .25s ease; }
.vfe-situation .vfe-etiquette, .vfe-commande .vfe-etiquette{ font-size:.78rem; }
.vfe-panneau .vfe-etiquette{ margin:1.5rem 0 .5rem; }
.vfe-panneau .vfe-etiquette:first-child{ margin-top:0; }
.vfe-puces{ display:flex; flex-wrap:wrap; gap:.5rem; }
.vfe-puces button, .vfe-supports button{ min-height:2.75rem; padding:.5rem .9rem; border:1px solid var(--trait-fort); font-size:.8125rem; transition:border-color .2s, background-color .2s, color .2s; }
.vfe-puces button:hover, .vfe-supports button:hover, .vfe-selecteur:hover{ border-color:var(--texte); }
.vfe-puces button[aria-pressed="true"], .vfe-supports button[aria-pressed="true"]{ background:var(--texte); color:var(--fond); border-color:var(--texte); }
.vfe-selecteur{ display:grid; grid-template-columns:4rem 1fr auto; align-items:center; gap:1rem; width:100%; padding:.5rem; border:1px solid var(--trait-fort); text-align:left; }
.vfe-selecteur img{ display:block; width:4rem; height:4rem; object-fit:cover; }
.vfe-selecteur-titre{ display:block; font-family:"VF Bodoni",Didot,serif; font-size:1.0625rem; line-height:1.3; }
.vfe-selecteur-serie{ display:block; font-size:.8125rem; color:var(--texte-doux); }
.vfe-selecteur svg{ width:1.25rem; height:1.25rem; transition:transform .3s; }
.vfe-choix.ouvert .vfe-selecteur svg{ transform:rotate(180deg); }
.vfe-choix-grille{ display:none; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.4rem; margin-top:.5rem; }
.vfe-choix.ouvert .vfe-choix-grille{ display:grid; }
.vfe-choix-grille button{ aspect-ratio:1; overflow:hidden; }
.vfe-choix-grille img{ display:block; width:100%; height:100%; object-fit:cover; }
.vfe-choix-grille button[aria-pressed="true"]{ outline:2px solid var(--texte); outline-offset:2px; }
.vfe-bouton{
  display:inline-flex; align-items:center; justify-content:center; min-height:3rem; padding:.85rem 1.6rem; border:1px solid var(--texte);
  background:var(--texte); color:var(--fond); font-size:.78rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; transition:background-color .2s, color .2s;
}
.vfe-situation .vfe-bouton{ width:100%; margin-top:1.5rem; }
.vfe-situation .vfe-bouton:hover{ background:transparent; color:var(--texte); }
@media (max-width:900px){ .vfe-situation{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:640px){
  .vfe-puces{ flex-wrap:nowrap; gap:.375rem; }
  .vfe-puces button{ flex:1 1 auto; padding:.4rem .45rem; font-size:.75rem; line-height:1.2; white-space:nowrap; }
}
.vfe-commande-scene{ background:#0C0E0F; }
.vfe-commande{ display:grid; place-items:center; padding:clamp(1.4rem,5vw,3.5rem) clamp(.8rem,3vw,2.5rem); background:transparent; }
.vfe-commande-fond{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(3px); transform:scale(1.04); }
.vfe-commande::before{ content:''; position:absolute; z-index:1; inset:0; background:rgb(9 11 12 / .62); }
.vfe-boite{ position:relative; z-index:2; width:min(100%,34rem); background:var(--fond); color:var(--texte); box-shadow:0 1.5rem 4rem rgb(0 0 0 / .3); }
.vfe-tete{ position:relative; padding:1.5rem 1.5rem 1rem; border-bottom:1px solid var(--trait); }
.vfe-tete .vfe-titre-3{ margin-top:.5rem; padding-right:2.5rem; font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem); }
.vfe-serie-nom{ margin-top:.25rem !important; font-size:.8125rem; color:var(--texte-doux); }
.vfe-fermer{ position:absolute; top:.75rem; right:.75rem; display:grid; place-items:center; width:2.75rem; height:2.75rem; }
.vfe-fermer svg{ width:1.25rem; height:1.25rem; }
.vfe-corps{ display:grid; gap:.5rem; padding:1.5rem; }
.vfe-corps .vfe-etiquette + div{ margin-bottom:.8rem; }
.vfe-supports{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.vfe-formats{ display:grid; border:1px solid var(--trait-fort); }
.vfe-formats button{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:1rem; min-height:3rem; padding:.6rem .9rem; border-top:1px solid var(--trait); font-size:.8125rem; text-align:left; transition:background-color .2s, color .2s; }
.vfe-formats button:first-child{ border-top:0; }
.vfe-formats button[aria-pressed="true"]{ background:var(--texte); color:var(--fond); }
.vfe-formats [data-edition]{ opacity:.7; }
.vfe-prix{ min-width:4.5rem; font-family:"VF Bodoni",Didot,serif; font-size:1rem; text-align:right; }
.vfe-note{ font-size:.8125rem; line-height:1.55; color:var(--texte-doux); }
.vfe-actions{ display:flex; justify-content:flex-end; gap:.5rem; padding:1rem 1.5rem; border-top:1px solid var(--trait); }
.vfe-bouton--fantome{ background:transparent; color:var(--texte); border-color:var(--trait-fort); }
.vfe-payer{ min-width:8rem; font-family:"VF Bodoni",Didot,serif; font-size:1.0625rem; letter-spacing:0; text-transform:none; }
@media (max-width:480px){
  .vfe-tete, .vfe-corps{ padding-inline:1rem; }
  .vfe-formats button{ gap:.5rem; padding-inline:.6rem; font-size:.75rem; }
  .vfe-actions{ padding-inline:1rem; }
}

/* L'index des séries et la biographie : une page chacune, à mi-largeur. */
.vfe-index, .vfe-bio{ --u:calc(100cqw / 1000); aspect-ratio:1.25; }
.vfe-index-corps{ display:grid; grid-template-columns:1.5fr 1fr; gap:calc(48 * var(--u)); margin-top:calc(32 * var(--u)); }
.vfe-index ol{ list-style:none; margin:0; padding:0; }
.vfe-index li button{ display:block; width:100%; padding:calc(13 * var(--u)) 0; border-top:1px solid var(--trait); text-align:left; }
.vfe-index li .vfe-titre-3{ display:block; font-size:calc(28 * var(--u)); color:var(--texte-doux); transition:color .3s; }
.vfe-index li [aria-current="true"] .vfe-titre-3, .vfe-index li button:hover .vfe-titre-3{ color:var(--texte); }
.vfe-index li .vfe-chapo{ display:block; margin-top:calc(4 * var(--u)); font-size:calc(14 * var(--u)); }
.vfe-index-images{ position:relative; aspect-ratio:4/3; }
.vfe-index-images figure{ position:absolute; inset:0; margin:0; opacity:0; transition:opacity .6s ease; }
.vfe-index-images figure.est-actif{ opacity:1; }
.vfe-index-images img{ display:block; width:100%; height:100%; object-fit:cover; }
.vfe-bio-corps{ display:grid; grid-template-columns:1.6fr 1fr; gap:calc(48 * var(--u)); align-items:start; }
.vfe-bio .vfe-texte{ margin:calc(24 * var(--u)) 0 calc(32 * var(--u)) !important; font-size:calc(15 * var(--u)); }
.vfe-jalons{ list-style:none; margin:calc(12 * var(--u)) 0 0; padding:0; }
.vfe-jalons li{ display:grid; grid-template-columns:calc(120 * var(--u)) 1fr; gap:calc(16 * var(--u)); padding:calc(9 * var(--u)) 0; border-top:1px solid var(--trait); font-size:calc(13 * var(--u)); line-height:1.45; }
.vfe-jalons li span:first-child{ font-family:"VF Bodoni",Didot,serif; color:var(--texte-doux); }
.vfe-bio img{ display:block; width:100%; height:auto; margin-top:calc(90 * var(--u)); filter:grayscale(1); }

/* Sous 560 px de large : le site tel qu'il est sur un téléphone. */
@container (max-width:560px){
  .vfe-site > *{ --u:calc(100cqw / 390); --marge:calc(18 * var(--u)); --barre:calc(56 * var(--u)); }
  .vfe-liens{ display:none; }
  .vfe-menu{ display:block; font-size:calc(12 * var(--u)); }
  .vfe-signature{ font-size:calc(20.8 * var(--u)); }
  .vfe-titre-1{ font-size:calc(34 * var(--u)); }
  .vfe-titre-2{ font-size:calc(28 * var(--u)); }
  .vfe-chapo{ font-size:calc(17 * var(--u)); }
  .vfe-etiquette{ font-size:calc(12 * var(--u)); }
  .vfe-page{ padding:calc(32 * var(--u)) var(--marge); }
  .vfe-accueil > .vfe-barre{ position:absolute; top:0; left:0; right:0; background:color-mix(in srgb, var(--fond) 68%, transparent); backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4); }
  .vfe-accueil > .vfe-hero{ grid-row:1 / -1; grid-template-rows:auto 1fr auto; }
  .vfe-hero::after{ background:linear-gradient(to bottom, rgb(9 11 12 / .6) 0%, rgb(9 11 12 / .38) 26%, rgb(9 11 12 / 0) 44%), linear-gradient(to top, rgb(9 11 12 / .72) 0%, rgb(9 11 12 / .3) 24%, rgb(9 11 12 / 0) 42%); }
  .vfe-entete{ grid-row:1; padding:calc(56 * var(--u) + 32 * var(--u)) var(--marge) 0; }
  .vfe-baseline{ font-size:calc(17 * var(--u)); }
  .vfe-commandes{ grid-row:3; padding-top:calc(34 * var(--u)); gap:calc(10 * var(--u)); }
  .vfe-onglets{ gap:calc(6 * var(--u)); }
  .vfe-onglets li{ flex:1; }
  .vfe-onglets button{ width:100%; padding-block:calc(17.6 * var(--u)); font-size:calc(12 * var(--u)); }
  .vfe-onglet-nom{ position:absolute; left:var(--marge); top:calc(8 * var(--u)); opacity:0; transition:opacity .3s; }
  .vfe-onglets [aria-current="true"] .vfe-onglet-nom{ opacity:1; }
  .vfe-progression, .vfe-onglets [aria-current="true"] .vfe-progression{ background:rgb(255 255 255 / .28); }
  .vfe-onglets [aria-current="true"] .vfe-progression{ background:rgb(255 255 255 / .55); }
  .vfe-temps-un{ grid-template-columns:minmax(0,1fr); gap:calc(24 * var(--u)); }
  .vfe-temps-un img{ order:-1; }
  .vfe-manifeste .vfe-titre-2{ margin-bottom:calc(28 * var(--u)) !important; }
  .vfe-oeuvres{ grid-template-columns:minmax(0,1fr); gap:calc(16 * var(--u)); margin-top:calc(28 * var(--u)); }
  .vfe-texte{ margin-top:calc(24 * var(--u)) !important; }
  .vfe-index-corps, .vfe-bio-corps{ grid-template-columns:minmax(0,1fr); gap:calc(24 * var(--u)); }
  .vfe-index-images{ order:-1; }
  .vfe-index li .vfe-titre-3{ font-size:calc(24 * var(--u)); }
  .vfe-bio img{ order:-1; width:60%; margin-top:0; }
  .vfe-jalons li{ grid-template-columns:calc(96 * var(--u)) 1fr; }
}
@media (max-width:560px){
  .vfe-accueil{ aspect-ratio:.78; }
  .vfe-pages-serie{ aspect-ratio:.72; }
  .vfe-index, .vfe-bio{ aspect-ratio:.72; }
}