/* FICHIER GÉNÉRÉ par tools/v2-heriter-css.py — NE PAS MODIFIER ICI.
   Copie exacte des règles de nav, pied et accessibilité de wotg.css.
   Les couleurs se changent dans v2.css, en redéfinissant les jetons. */

/* ⇣ wotg.css, lignes 2638–2645 */
/* Lu par une synthèse vocale, jamais par l'œil. Le site n'en avait pas —
   `.chip-in` fait la même chose mais appartient aux filtres, et une classe
   empruntée finit par être modifiée pour son premier usage. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ⇣ wotg.css, lignes 372–376 */
.wrap {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto; padding-inline: var(--pad);
}

/* ⇣ wotg.css, lignes 361–367 */
.body-s {
  margin: 0;
  font-size: clamp(12.5px, .86vw, 13.5px);
  font-weight: 300; line-height: 1.7; color: var(--dim);
  text-wrap: pretty;
}

/* ⇣ wotg.css, lignes 474–977 */
/* ---- Navigation --------------------------------------------------------- */
.nav {
  position: fixed; top: clamp(14px, 2.2vw, 26px); left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  padding-inline: var(--pad); pointer-events: none;
}
.nav > * { pointer-events: auto; }

/* La barre flotte au-dessus de la page : une fois qu'on défile, le texte
   passe sous les commandes et se heurte à elles. Un dégradé l'estompe au
   lieu de le laisser cogner. Invisible en haut de page, où le fond est déjà
   noir — il ne se voit que là où il sert. */
/* Le voile vaut à TOUTES les largeurs depuis le 29/08 : les cartes et le
   bento posent des captures quasi blanches pleine largeur sous la barre, et
   le wordmark y tombait à 1,45:1 de contraste. */
.nav::before {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: 108px;
  background: linear-gradient(180deg, rgb(var(--bg-rgb)) 0%, rgba(var(--bg-rgb),.88) 40%, rgba(var(--bg-rgb),0) 100%);
  pointer-events: none; z-index: -1;
}

/* Verrou de marque : symbole + logotype. L'ecart vaut la moitie de la hauteur
   du symbole — assez pour qu'ils se lisent separement, assez peu pour qu'ils
   forment un seul objet. */
.wordmark {
  position: absolute; left: var(--pad); top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 125; font-weight: 880;
  font-size: clamp(15px, 1.15vw, 18px);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--white); text-decoration: none;
}
.wordmark .glyph { flex: 0 0 auto; width: 22px; height: 22px; }

/* Panier et sélecteur de langue : un seul groupe, calé à droite. Les poser
   séparément en absolu obligeait à recalculer leurs décalages à chaque
   changement de taille. */
.nav-right {
  position: absolute; right: var(--pad); top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 8px;
}

.iconbtn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding-inline: 12px;
  border: 1px solid var(--hair); border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  color: var(--dim); text-decoration: none;
  transition: color .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease);
}
.iconbtn:hover { color: var(--white); border-color: var(--white); background: var(--glass-hover); }
.iconbtn .count {
  font-size: 11px; font-weight: 500; letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

/* Au-dessus de 620px il n'y a pas de menu : le conteneur s'efface et la
   pilule redevient un simple enfant de la barre. Un <details> fermé masque
   son contenu ; forcer l'affichage de l'enfant ne suffit pas, il faut lever
   le `content-visibility` que le navigateur pose sur ::details-content —
   sans quoi la pilule se calcule à zéro et ses liens débordent. */
@media (min-width: 901px) {
  .menu, .menu-sheet { display: contents; }
  .menu > summary { display: none; }
  .menu::details-content { content-visibility: visible; }

  /* Le panneau n'en ouvre qu'un : la tabulation doit suivre ce que l'oeil voit.
     Sans cette règle, Tab sortait du menu affiché pour entrer dans les liens des
     deux autres — invisibles (opacité 0) : neuf arrêts d'affilée sans un seul
     repère visible. La visibilité bascule avec l'opacité, comme le panneau
     lui-même, donc le menu sortant s'efface avant de disparaître. Ce bloc ne
     vaut que pour le bureau : sous 901 px la feuille liste les trois menus. */
  .nav-panel.is-open .nav-menu:not(.is-on) {
    visibility: hidden;
    transition: opacity .22s var(--ease), visibility 0s linear .22s;
  }
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::marker { content: ""; }

/* LA LARGEUR DE LA PILULE (Theo, 22/09) : « on peut étendre un peu la nav
   bar en prévision des images qu'on ajoutera ». Elle est portée d'environ
   390 à 556 px à 1440 par la marge intérieure des entrées (--pill-pad) et
   l'écart entre elles : de quoi loger plus tard un pictogramme de 24 px à
   gauche de chaque mot sans rien réserver de visible aujourd'hui, et de quoi
   tenir les panneaux à leur largeur naturelle, descriptions sur une ligne.
   La pilule reste centrée, son bord droit borne toujours le panneau. */
/* La rampe (22/09, seconde passe) : à 1280 il manquait 22 px pour que le
   panneau Support tienne à sa largeur naturelle, 2,88vw n'y donnait que
   36,9 px. Un plancher fixe à 41 px faisait déborder la pilule sur le groupe
   de droite au point de bascule (901 px). D'où une seconde droite, plus
   raide, plafonnée à 41 px : 34 px à 901, 41 px dès 1280 ; au-dessus, 2,88vw
   reprend la main (41,47 px à 1440 : rien ne change là ni plus haut). */
.pill {
  --pill-pad: min(44px, max(2.88vw, min(41px, calc(1.85vw + 17.3px))));
  position: relative;
  display: flex; align-items: center; gap: clamp(6px, .85vw, 12px);
  padding: 6px;
  border: 1px solid var(--hair); border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 12px 40px var(--shadow-color-cast), inset 0 1px 0 var(--bevel-strong);
}
.pill a {
  display: block; padding: 9px var(--pill-pad);
  border-radius: 999px; color: var(--dim); text-decoration: none;
  font-size: clamp(12px, .84vw, 13.5px); font-weight: 500; white-space: nowrap;
  transition: color .4s var(--ease), background-color .4s var(--ease);
}
/* Une entrée à menu : le chevron vit DANS la marge droite, 7 px après le
   mot ; la marge est décalée de 14 px vers la droite pour que l'ensemble
   mot + chevron reste centré dans la pastille. */
.pill-entry[data-menu] > a { padding-inline: calc(var(--pill-pad) - 14px) calc(var(--pill-pad) + 14px); }
/* Au survol le blanc plein vient de la copie qui tourne (ci-dessous) ; le
   fond, lui, est la pastille qui glisse, jamais un fond posé sur chaque
   entrée. */
/* ── Le mot qui tourne (22/09/2026, vidéo de Theo) ────────────────────────
   Deux copies du mot, superposées, sous une perspective. Au repos : la copie
   grise, droite. Au survol : elle bascule vers l'arrière en montant, pendant
   que la copie blanche arrive d'en bas en se redressant — rotateX, deux mots
   en rotation 3D, l'un qui part derrière, l'autre qui monte devant.
   Mesuré par Griffith le 22/09 : en 180 ms sur la courbe du site, 75 % du
   mouvement tenait dans 27 ms, et la copie grise s'effaçait EN MÊME TEMPS
   qu'elle tournait — à 44° elle n'était plus qu'à 0,33 : l'œil ne voyait
   rien. D'où : 260 ms, ease-in-out sur la transformation (le mouvement
   s'étale), et l'opacité DÉCOUPLÉE — la copie qui tourne reste pleine et
   ne s'efface que sur les 120 dernières millisecondes, la copie blanche la
   couvre de toute façon. Au retour, symétrique : la grise redevient pleine
   tout de suite, la blanche s'efface en fin de course.
   L'ACCROCHE EST L'ENTRÉE, PAS LE LIEN (22/09 au soir, vidéo de Theo) : le
   chevron est un bouton frère POSÉ SUR le lien. Accrochée au lien, la
   rotation se défaisait dès que le pointeur touchait le chevron — on était
   pourtant toujours dans la même entrée — puis rejouait au retour sur le
   mot. Mesuré dans Chromium : sur le chevron, `a:hover` = faux et
   `.pill-entry:hover` = vrai. La pastille glissante et le panneau, eux, ne
   bougeaient pas : seul le mot rejouait. */
.pill-word { position: relative; display: block; perspective: 600px; }
.pill-word-rest, .pill-word-lit { display: block; backface-visibility: hidden; transform-origin: 50% 50%; }
.pill-word-rest { transition: transform .26s ease-in-out, opacity .1s ease-out; }
.pill-word-lit {
  position: absolute; inset: 0; color: var(--white);
  opacity: 0; transform: translateY(60%) rotateX(-75deg);
  transition: transform .26s ease-in-out, opacity .12s ease-in .14s;
}
.pill-entry:hover .pill-word-rest {
  opacity: 0; transform: translateY(-60%) rotateX(75deg);
  transition: transform .26s ease-in-out, opacity .12s ease-in .14s;
}
.pill-entry:hover .pill-word-lit { opacity: 1; transform: none; transition: transform .26s ease-in-out, opacity .1s ease-out; }
/* ── La pastille de survol (22/09/2026, vidéo de Theo) ────────────────────
   UN SEUL élément, en absolu dans la pilule : le script lui écrit la place
   (--lit-x) et la taille (--lit-w, --lit-h) de l'entrée survolée, et elle
   GLISSE de l'une à l'autre — transform et width, 220 ms, la courbe du
   site. Elle s'efface quand la souris quitte la pilule (et son panneau).
   Verre sombre de la maison : le fond de survol et le biseau du haut. */
.pill-hover {
  position: absolute; top: 0; left: 0; z-index: 0;
  width: var(--lit-w, 0px); height: var(--lit-h, 0px);
  transform: translate(var(--lit-x, 0px), var(--lit-y, 0px));
  border-radius: 999px;
  background: var(--nav-hover);
  box-shadow: inset 0 1px 0 var(--bevel);
  opacity: 0; pointer-events: none;
  transition: transform .22s var(--ease), width .22s var(--ease), opacity .22s var(--ease);
}
.pill.is-lit .pill-hover { opacity: 1; }
/* « page » : c'est la page où l'on est. « true » : la page est rangée dans
   cette entrée ($NAV_COURANTE) sans être elle. Même tenue pour les deux — la
   distinction est pour les lecteurs d'écran, pas pour l'œil. */
.pill a[aria-current="page"], .pill a[aria-current="true"] { color: var(--white); background: var(--nav-current); }

/* ── Les entrées à menu et le panneau (brief 6, 21/09/2026) ──────────────
   Quatre entrées, trois menus, UN panneau. L'entrée reste un lien vers sa
   page ; son chevron est un bouton (clavier, clic, aria-expanded). Le panneau
   est le prolongement de la pilule : même verre, même filet, la couche dense
   du menu dépliant dessous parce qu'il passe sur du contenu. Il glisse en
   transform sous l'entrée active (--nav-x écrit par le script) pendant que
   sa taille suit le menu montré (--nav-w, --nav-h) et que les contenus se
   fondent — quatre transitions de même durée, 220 ms, la courbe du site. */
.pill-entry { position: relative; display: inline-flex; align-items: center; }
.pill-entry.is-open > a { color: var(--white); background: var(--nav-hover); }
/* Tant que la pastille est là, elle EST la marque de l'entrée ouverte : le
   fond de l'entrée s'efface, sinon les deux se superposent. Le fond revient
   quand la souris est partie et que le panneau reste ouvert (clavier). */
.pill.is-lit .pill-entry.is-open > a, .pill.is-lit .pill-entry:hover > a { background: transparent; }
.pill-caret {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  /* Rentré dans la marge droite du lien : 7 px après le mot, et l'entrée
     garde exactement la largeur du lien (la pastille le couvre). */
  margin: 0 calc(var(--pill-pad) - 15px) 0 calc(-7px - var(--pill-pad));
  border: 0; border-radius: 999px; background: transparent;
  color: var(--faint); cursor: pointer;
  transition: color .4s var(--ease), background-color .4s var(--ease);
}
.pill-caret svg { transition: transform .22s var(--ease); }
.pill-caret:hover, .pill-caret[aria-expanded="true"] { color: var(--white); }
.pill-caret[aria-expanded="true"] svg { transform: rotate(180deg); }
.pill-caret:focus-visible { outline: 1px solid var(--white); outline-offset: 2px; }

.nav-panel {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 40;
  width: var(--nav-w, auto); height: var(--nav-h, auto);
  transform: translateX(var(--nav-x, 0px));
  padding: 8px; box-sizing: content-box;
  border: 1px solid var(--hair); border-radius: 20px;
  background: var(--surface-overlay);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 30px 70px var(--shadow-color), inset 0 1px 0 var(--bevel-strong);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .22s var(--ease), width .22s var(--ease), height .22s var(--ease),
              opacity .22s var(--ease), visibility 0s linear .22s;
}
.nav-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
/* Les trois menus sont empilés au même endroit : seul celui de l'entrée
   active est visible, les autres se fondent. */
.nav-menu {
  position: absolute; top: 8px; left: 8px;
  display: flex; gap: 8px; width: max-content;
  opacity: 0; pointer-events: none;
  transition: opacity .22s var(--ease), width .22s var(--ease);
}
.nav-menu.is-on { opacity: 1; pointer-events: auto; }
.nav-group { display: grid; gap: 2px; align-content: start; min-width: 212px; }
/* LE BORNAGE (Theo, 22/09) : le bord droit du panneau ne dépasse jamais le
   bord droit de la pilule. Le script ramène le décalage ; et quand le menu
   est plus large que la pilule, il pose is-tight et --nav-w vaut la largeur
   qui tient : le menu prend cette largeur, les colonnes se partagent la
   place au prorata de leur contenu, les lignes de description se plient. */
.nav-panel.is-tight .nav-menu { width: var(--nav-w); }
.nav-panel.is-tight .nav-group { min-width: 0; flex: 1 1 auto; }
.nav-group + .nav-group { padding-left: 8px; border-left: 1px solid var(--hair-2); }
.nav-group-t {
  margin: 8px 12px 6px; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--faint);
}
/* Une entrée : le titre, et une ligne dessous quand elle apporte quelque
   chose. Rien à gauche, aucune place réservée : la typographie et l'espace
   font le travail. */
.nav-item {
  display: grid; gap: 3px; padding: 9px 12px; border-radius: 12px;
  text-decoration: none; color: var(--dim);
  transition: color .3s var(--ease), background-color .3s var(--ease);
}
.nav-item:hover, .nav-item:focus-visible { background: var(--nav-hover); }
.nav-item:focus-visible { outline: 1px solid var(--white); outline-offset: -1px; }
.nav-item[aria-current="page"] { background: var(--nav-current); }
.nav-item-t { font-size: 13px; font-weight: 500; color: var(--white); letter-spacing: .01em; }
.nav-item-d { font-size: 11px; line-height: 1.35; color: var(--faint); letter-spacing: .02em; }
.nav-item:hover .nav-item-d { color: var(--dim); }
/* Pas de pointeur fin, pas de survol : le panneau n'existe pas au tactile,
   le chevron non plus. Les pages restent au pied. */
@media (hover: none), (pointer: coarse) {
  .pill-caret { display: none; }
  .nav-panel { display: none; }
  .pill-hover { display: none; }
  .pill-word-lit { display: none; }
  .pill a:hover .pill-word-rest { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-panel, .nav-menu, .pill-caret svg, .pill-hover,
  .nav-panel.is-open .nav-menu:not(.is-on) { transition: none; }
  /* Pas de rotation : le mot passe au blanc, sans bouger. */
  .pill-word-rest, .pill-word-lit { transition: none; }
  .pill-word-lit { display: none; }
  .pill-entry:hover .pill-word-rest { opacity: 1; transform: none; color: var(--white); }
}

/* ── La barre « Aller à » ─────────────────────────────────────────────────
   Un champ nu sur la grille, à droite de la navigation. Pas une modale, pas
   un chatbot : une destination qu'on tape. Sans JavaScript, [hidden] la
   retire entièrement — le CSS n'a pas à connaître ce cas. */
.find {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  margin-left: clamp(10px, 1.4vw, 22px);
}
.find-field {
  width: clamp(150px, 15vw, 230px); height: 34px;
  padding: 0 12px;
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--hair); border-radius: 999px;
  color: var(--white);
  font-family: var(--font-body); font-size: 12px; letter-spacing: .06em;
  transition: border-color .4s var(--ease), background-color .4s var(--ease);
}
.find-field::placeholder { color: var(--faint); letter-spacing: .14em; text-transform: uppercase; font-size: 10.5px; }
.find-field:focus {
  outline: none; border-color: var(--hair); background: var(--glass-hover);
  animation: halo-prisme 4.5s ease-in-out infinite;
}
/* Le halo du prisme : la lumière tourne autour de la pilule et la forme
   blanche ondule à peine — l'indicateur de focus de la maison, sans le
   double anneau blanc + cyan qui faisait bug (retour de Theo du 28/08). */
@keyframes halo-prisme {
  0%, 100% {
    box-shadow: -12px 2px 24px -12px var(--violet), 12px -2px 24px -12px var(--cyan), 0 0 16px -9px var(--bleu);
    border-radius: 999px;
  }
  33% {
    box-shadow: 0 -9px 24px -12px var(--bleu), 8px 7px 24px -12px var(--violet), -9px 0 18px -10px var(--cyan);
    border-radius: 47% 53% 51% 49% / 999px 999px 999px 999px;
  }
  66% {
    box-shadow: 12px 0 24px -12px var(--cyan), -12px 5px 24px -12px var(--bleu), 0 7px 18px -10px var(--violet);
    border-radius: 53% 47% 49% 51% / 999px 999px 999px 999px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .find-field:focus { animation: none; box-shadow: 0 0 20px -9px var(--bleu); }
}
.find-kbd {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-body); font-size: 9.5px; letter-spacing: .06em;
  color: var(--faint); border: 1px solid var(--hair); border-radius: 999px; padding: 1px 6px;
  pointer-events: none;
}
.find-field:focus ~ .find-kbd { display: none; }
.find-list {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  width: min(430px, 92vw); max-height: 60vh; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: 18px;
  box-shadow: 0 30px 70px var(--shadow-color);
}
.find-list [role="option"] {
  display: grid; grid-template-columns: 1fr auto; column-gap: 12px;
  padding: 10px 12px; cursor: pointer;
}
.find-list .find-t { color: var(--white); font-size: 13px; }
.find-list .find-d { grid-column: 1; color: var(--faint); font-size: 11px; letter-spacing: .04em; }
.find-list .find-g {
  grid-column: 2; grid-row: 1; align-self: start;
  color: var(--faint); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
}
.find-list [aria-selected="true"] { background: var(--surface-2); outline: 1px solid var(--trait); }
.find-list [aria-selected="true"] .find-t { color: var(--cyan); }
.find-list .find-vide { padding: 12px; color: var(--faint); font-size: 12px; }
/* La recherche prend LA PLACE de la pilule de navigation (retour de Theo du
   28/08, photo à l'appui : le bandeau sous la pilule cassait la mise en
   page). Loupe ou ⌘K : la pilule s'efface, le champ s'ouvre au même
   endroit, la croix referme et la nav revient. */
.find-toggle { display: inline-flex; }
.find-toggle[hidden] { display: none; }
.find { display: none; align-items: center; gap: 10px; margin: 0; }
/* visibility, pas display : la pilule garde sa boîte exacte, donc la rangée
   ne bouge pas d'un pixel — le logo et les icônes restaient à niveau. */
.nav.cherche .menu { visibility: hidden; }
.nav.cherche .find {
  display: flex;
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.find-field {
  width: min(560px, 56vw); height: 44px; font-size: 14px;
  padding-inline: 18px; border-radius: 999px;
}
.find-kbd { display: none; }
.find-fermer { flex: none; }
.find-list {
  position: fixed; top: calc(clamp(14px, 2.2vw, 26px) + 62px);
  left: 50%; transform: translateX(-50%);
  width: min(640px, 92vw);
}
@media (max-width: 620px) {
  /* Au téléphone, le champ centré passait SOUS les icônes de droite : la
     loupe, le panier et la langue restaient posés par-dessus, et il ne
     restait qu'une centaine de pixels pour taper. La rangée de droite
     s'efface pendant la recherche, comme la navigation — `visibility`,
     donc la barre ne bouge pas d'un pixel. La croix du champ rouvre tout. */
  .nav.cherche .nav-right { visibility: hidden; }
  .find-field { width: calc(100vw - 116px); }
}

/* Une ligne coupée net en bas du panneau se lit comme un défaut, pas comme
   « il y en a d'autres ». Le dernier rang s'efface donc dans le fond du
   panneau : la coupure devient une invitation à faire défiler.

   Une opacité dégressive aurait été plus simple à écrire et fausse à
   regarder — le panneau devenait transparent et le bouton du hero
   apparaissait au travers. L'ombre intérieure, elle, peint la couleur du
   panneau par-dessus son propre contenu : il reste opaque. */
.find-list {
  max-height: min(60vh, calc(100dvh - 150px));
  overscroll-behavior: contain;
  box-shadow: 0 30px 70px var(--shadow-color),
              inset 0 -34px 26px -24px var(--surface);
}
@media (prefers-reduced-motion: no-preference) {
  .nav.cherche .find { animation: find-descend .2s var(--ease); }
}
@keyframes find-descend {
  from { opacity: 0; translate: 0 -5px; }
  to   { opacity: 1; translate: 0 0; }
}

/* Sélecteur de langue — la détection ne doit jamais enfermer le visiteur */
.lang {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 34px; padding-inline: 11px;
  border: 1px solid var(--hair); border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  color: var(--dim); text-decoration: none;
  font-size: 11px; font-weight: 500; letter-spacing: .14em;
  transition: color .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease);
}
.lang:hover { color: var(--white); border-color: var(--white); background: var(--glass-hover); }

/* Lien d'évitement — visible seulement au clavier */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--white); color: var(--on-solid); text-decoration: none;
  padding: 12px 18px; border-radius: 0 0 12px 0;
  font-size: 13px; font-weight: 500;
}
.skip:focus { left: 0; }

/* Sous 900px la pilule ne tient plus : logo, six libellés, panier et langue
   demandent environ 765px de large et se chevauchaient en silence. Elle
   devient un menu dépliant, et la barre repasse en simple rangée. */
@media (max-width: 900px) {
  .nav { justify-content: flex-start; gap: 8px; }
  .wordmark { position: static; transform: none; margin-right: auto; }

  /* Le groupe de droite s'efface comme boîte pour que ses deux boutons
     deviennent des enfants directs de la barre : sans cela, le menu et la
     langue vivent dans des conteneurs différents et ne peuvent pas être
     rangés l'un par rapport à l'autre. L'espacement vient alors du `gap`
     de la barre, identique. */
  .nav-right { display: contents; }
  .lang    { order: 2; }
  .iconbtn { order: 3; }

  /* Le menu ferme la rangée, à l'extrême droite */
  .menu { display: block; position: static; order: 4; }
  .menu > summary {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; cursor: pointer; list-style: none;
    border: 1px solid var(--hair); border-radius: 999px;
    background: var(--glass);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    color: var(--dim);
    transition: color .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease);
  }
  .menu[open] > summary { color: var(--white); border-color: var(--white); }
  .menu > summary .i-shut,
  .menu[open] > summary .i-open { display: none; }
  .menu[open] > summary .i-shut { display: block; }

  /* Le panneau se cale sous la barre, qui est fixe : il suit donc l'écran.
     Fond nettement plus dense que la pilule : le flou seul ne suffit pas,
     un bouton blanc de la page passait au travers et effaçait le dernier
     lien. On dépose donc une couche opaque sous le verre. La feuille porte
     la pilule (les quatre entrées) et, dessous, les quatorze liens des
     trois menus sur deux colonnes, titres seuls : rien ne disparaît. */
  .menu-sheet {
    position: absolute; top: calc(100% + 10px); left: var(--pad); right: var(--pad);
    padding: 8px; border-radius: 20px;
    border: 1px solid var(--hair);
    background: var(--surface-overlay);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 12px 40px var(--shadow-color-cast), inset 0 1px 0 var(--bevel-strong);
    max-height: calc(100dvh - 90px); overflow-y: auto; overscroll-behavior: contain;
  }
  .menu > .menu-sheet > .pill {
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .pill-entry { display: block; }
  .pill-entry > a { display: block; padding: 13px 16px; border-radius: 14px; font-size: 14px; }
  .pill-caret { display: none; }
  .pill-hover { display: none; }
  .pill-word-lit { display: none; }
  .pill-word { perspective: none; }
  .pill a:hover .pill-word-rest { opacity: 1; transform: none; }
  .nav-panel {
    position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px;
    width: auto; height: auto; transform: none; padding: 8px 0 0; margin-top: 8px;
    border: 0; border-top: 1px solid var(--hair-2); border-radius: 0; background: none;
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    opacity: 1; visibility: visible; pointer-events: auto; transition: none;
  }
  .nav-menu, .nav-group { display: contents; opacity: 1; pointer-events: auto; }
  .nav-group-t { display: none; }
  .nav-item { min-height: 44px; padding: 12px 16px; border-radius: 12px; align-content: center; }
  .nav-item-d { display: none; }
}
/* Le logotype ne part qu'au plus étroit : le symbole seul suffit à tenir la
   marque quand la rangée devient dense. */
@media (max-width: 620px) { .wordmark span { display: none; } }

/* ⇣ wotg.css, lignes 1201–1604 */
/* ---- Pied de page ------------------------------------------------------- */
.foot { position: relative; z-index: 3; border-top: 1px solid var(--hair-2); padding-block: clamp(56px, 9vh, 104px) 28px; }
.foot > .wrap { position: relative; z-index: 1; }

/* ── La grille : deux lignes, quatre colonnes (brief pied de page 2, 22/09) ──
   Quatre groupes naturels — Products, Resources, Legal, License — donc quatre
   cases par ligne ; la marque garde la première colonne sur les deux lignes,
   réseaux compris. La seconde ligne n'a que la licence pour l'instant : les
   deux cases suivantes sont la place des produits à venir. Sous 900 px, deux
   colonnes : la marque sur sa rangée, puis les quatre groupes deux par deux. */
.foot-grid {
  display: grid; gap: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 56px);
  grid-template-columns: 1fr 1fr;
  padding-bottom: clamp(40px, 6vh, 72px);
}
.foot-brand { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; grid-template-rows: auto auto; }
  .foot-brand { grid-column: 1; grid-row: 1 / 3; }
}

.foot-brand .mark {
  font-family: var(--font-display); font-variation-settings: "wdth" 118;
  font-weight: 700;
  font-size: clamp(24px, 2.8vw, 38px); letter-spacing: -.02em; line-height: 1;
  margin: 0 0 14px; text-transform: uppercase;
}
.foot-brand .body-s { max-width: 32ch; margin-bottom: 20px; }
/* ── Les réseaux : le logo nu, UNE carte qui se métamorphose (Theo, 22/09
   soir) ──────────────────────────────────────────────────────────────────
   Cinq logos posés sur le fond, sans cercle ni fond ; cible de 44 px,
   invisible, côte à côte : 24 px entre deux logos de 20 px. Gris du pied au
   repos, blanc plein au survol et au focus. Une SEULE carte, sœur des cinq
   boutons, pilotée par les sélecteurs de frère : tant que le pointeur est
   dans la rangée elle reste ouverte, elle GLISSE du logo quitté vers le logo
   survolé (280 ms, ease-in-out) pendant que les volets se croisent en fondu
   (200 ms, ease-in à la sortie, ease-out à l'entrée) — plus lente que le
   croisement, c'est ce décalage qui fait la métamorphose. Au premier survol
   depuis l'extérieur : fondu et montée de 6 px en 200 ms ; en sortant de la
   rangée : fondu en 160 ms. La carte est un aperçu, elle ne prend pas le
   pointeur : le clic va sur le logo. Centrée sur le bouton, calée au bord
   gauche de la rangée quand elle en sortirait (décalages connus, 44 px par
   bouton). Au doigt (pas de survol) elle n'existe pas. Au clavier, le focus
   sur un logo ouvre le même volet ; le focus dans la carte le garde. */
.foot-social { position: relative; display: flex; flex-wrap: wrap; gap: 0; }
.foot-net { display: inline-block; }
.foot-net-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; color: var(--dim); text-decoration: none;
  transition: color .2s ease;
}
.foot-net-link svg { display: block; }
.foot-net:hover .foot-net-link, .foot-net-link:focus-visible { color: var(--white); }
/* ── LA BULLE (vidéo de Theo, 22/09, mission BULLE-2209) ─────────────────
   Mesuré sur la référence : elle s'ouvre en ~0,20 s, ne se ferme JAMAIS
   entre deux icônes — la boîte glisse vers la voisine et prend sa forme
   pendant que les contenus se croisent (~0,15 s) — et se referme sans coupe.
   LA GÉOMÉTRIE, une par icône : --card-i (rang du bouton), --card-w et
   --card-h (la taille exacte du volet : contenu + 32 px de marge + le
   filet ; tous les textes sont sur une ligne, les tailles sont les mêmes en
   français et en anglais, mesurées le 22/09 et refaites le 24/09 pour les
   cartes par plateforme). La place : centrée sur l'icône (i × 44 + 22 −
   w/2), serrée entre les deux bords de la rangée quand elle y tient ; les
   cartes plus larges que la rangée (305 px à 1440) partent de son bord
   gauche et débordent à droite, dans le vide avant la première colonne
   (mesuré : aucune intersection, BULLE-2409-D).
   La carte est en absolu : sa forme change, la rangée ne bouge pas.
   LES TROIS DURÉES : ouverture 200 ms en courbe sortante ; métamorphose
   220 ms (place, largeur, hauteur) ; fermeture 200 ms en courbe douce des
   deux côtés — l'ancienne (.4, 0, 1, 1) finissait à pleine vitesse, c'était
   la coupe. CSS seul, sans script :
   - fermée, la bulle est en display: none (après son fondu, grâce à
     transition-behavior: allow-discrete) ; à l'ouverture elle n'a donc
     aucun style précédent : sa place et sa taille s'appliquent d'emblée,
     elle NAÎT à sa place — seuls l'opacité et la montée partent de
     @starting-style. Un script qui aurait posé un verrou arrivait trop
     tard : Chromium applique le survol avant l'événement (mesuré le 22/09) ;
   - pendant la fermeture, la géométrie ne change qu'avec 200 ms de délai,
     une fois la bulle invisible : elle se ferme à sa place.
   --card-g est la durée de la métamorphose (0 en mouvement réduit). */
.foot-card {
  --card-i: 0; --card-w: 216px; --card-h: 102px; --card-g: .22s;
  --card-close: cubic-bezier(.4, 0, .6, 1);
  /* Sous la rangée (BAS-2209, variante A choisie par Theo) : la carte ne
     recouvre plus le mot-symbole ni la présentation, rien ne bouge dans la
     page. Elle descend des icônes : la petite course de 6 px part du haut. */
  position: absolute; top: calc(100% + 10px); bottom: auto; z-index: 5;
  left: clamp(0px, calc(var(--card-i) * 44px + 22px - var(--card-w) / 2), calc(100% - var(--card-w)));
  width: var(--card-w); height: var(--card-h); box-sizing: border-box; overflow: hidden;
  padding: 16px; border-radius: 16px;
  border: 1px solid var(--hair);
  background: rgba(14,14,14,.975);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 18px 40px var(--shadow-color-cast), inset 0 1px 0 var(--bevel-strong);
  text-align: left;
  display: none; opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .2s var(--card-close), transform .2s var(--card-close), display .2s allow-discrete,
    left 0s .2s, width 0s .2s, height 0s .2s;
}
.foot-social[data-open] .foot-card, .foot-social:not([data-open]):focus-within .foot-card {
  display: grid; opacity: 1; transform: none;
  /* Ouverte, elle reçoit le pointeur sur tous les appareils : on doit pouvoir
     la survoler et cliquer son lien (BULLE-2309-C). */
  pointer-events: auto;
  transition: opacity .2s cubic-bezier(0, 0, .2, 1), transform .2s cubic-bezier(0, 0, .2, 1), display 0s allow-discrete,
    left var(--card-g) cubic-bezier(.4, 0, .2, 1), width var(--card-g) cubic-bezier(.4, 0, .2, 1), height var(--card-g) cubic-bezier(.4, 0, .2, 1);
}
@media (hover: hover) {
  .foot-social:not([data-open]):hover .foot-card {
    display: grid; opacity: 1; transform: none;
    pointer-events: auto;
    transition: opacity .2s cubic-bezier(0, 0, .2, 1), transform .2s cubic-bezier(0, 0, .2, 1), display 0s allow-discrete,
      left var(--card-g) cubic-bezier(.4, 0, .2, 1), width var(--card-g) cubic-bezier(.4, 0, .2, 1), height var(--card-g) cubic-bezier(.4, 0, .2, 1);
  }
}
@starting-style {
  .foot-social[data-open] .foot-card, .foot-social:not([data-open]):focus-within .foot-card { opacity: 0; transform: translateY(-6px); }
}
@media (hover: hover) {
  @starting-style {
    .foot-social:not([data-open]):hover .foot-card { opacity: 0; transform: translateY(-6px); }
  }
}
/* UNE SEULE CARTE, QUEL QUE SOIT LE CHEMIN (BULLE-2409-F, iPhone de Theo,
   23/09) : l'état ouvert, le survol et le focus s'additionnaient — une icône
   touchée gardait son survol simulé pendant que data-open ouvrait la
   suivante, et Safari avalait le clic d'un appui dont le survol changeait la
   page : deux volets pleins l'un sur l'autre. Désormais les chemins
   s'excluent : data-open, posé par wotg.js (souris, doigt, et clavier au
   focus visible), gouverne seul dès qu'il existe ; sans lui, le focus puis
   le survol servent de filet sans script, et le survol n'existe que sous
   (hover: hover).
   Cinq géométries : l'état ouvert, le clavier sur l'icône, le clavier entré
   dans un volet. :focus-within et non :has(:focus-visible) : mesuré le
   24/09 (BULLE-2409-D2), Chromium saute alors le lien de la carte dans
   l'ordre de tabulation — Tab sur l'icône ouvrait bien, le Tab suivant
   sortait de la rangée. Le focus qu'un clic souris laisse sur un lien est
   retiré par wotg.js (bloc de la grâce) : la carte se referme en sortant. */
.foot-social:is([data-open="1"], :not([data-open]):not(:has(> .foot-net:hover)):has(> .foot-net:nth-child(1):focus-within, .foot-card-pane:nth-child(1):focus-within)) .foot-card { --card-i: 0; --card-w: 304px; --card-h: 129px; }
.foot-social:is([data-open="2"], :not([data-open]):not(:has(> .foot-net:hover)):has(> .foot-net:nth-child(2):focus-within, .foot-card-pane:nth-child(2):focus-within)) .foot-card { --card-i: 1; --card-w: 346px; --card-h: 167px; }
.foot-social:is([data-open="3"], :not([data-open]):not(:has(> .foot-net:hover)):has(> .foot-net:nth-child(3):focus-within, .foot-card-pane:nth-child(3):focus-within)) .foot-card { --card-i: 2; --card-w: 340px; --card-h: 156px; }
.foot-social:is([data-open="4"], :not([data-open]):not(:has(> .foot-net:hover)):has(> .foot-net:nth-child(4):focus-within, .foot-card-pane:nth-child(4):focus-within)) .foot-card { --card-i: 3; --card-w: 346px; --card-h: 166px; }
.foot-social:is([data-open="5"], :not([data-open]):not(:has(> .foot-net:hover)):has(> .foot-net:nth-child(5):focus-within, .foot-card-pane:nth-child(5):focus-within)) .foot-card { --card-i: 4; --card-w: 341px; --card-h: 142px; }
/* Le format compact (901-1179 px) : 262 px de large, hauteurs mesurées le
   23/09 (BULLE-2409-E) ; le courriel anglais tient en deux lignes. */
@media (min-width: 901px) and (max-width: 1179px) {
  .foot-social:is([data-open="1"], :not([data-open]):not(:has(> .foot-net:hover)):has(> .foot-net:nth-child(1):focus-within, .foot-card-pane:nth-child(1):focus-within)) .foot-card { --card-w: 262px; --card-h: 146px; }
  .foot-social:is([data-open="2"], :not([data-open]):not(:has(> .foot-net:hover)):has(> .foot-net:nth-child(2):focus-within, .foot-card-pane:nth-child(2):focus-within)) .foot-card { --card-w: 262px; --card-h: 167px; }
  .foot-social:is([data-open="3"], :not([data-open]):not(:has(> .foot-net:hover)):has(> .foot-net:nth-child(3):focus-within, .foot-card-pane:nth-child(3):focus-within)) .foot-card { --card-w: 262px; --card-h: 156px; }
  .foot-social:is([data-open="4"], :not([data-open]):not(:has(> .foot-net:hover)):has(> .foot-net:nth-child(4):focus-within, .foot-card-pane:nth-child(4):focus-within)) .foot-card { --card-w: 262px; --card-h: 186px; }
  .foot-social:is([data-open="5"], :not([data-open]):not(:has(> .foot-net:hover)):has(> .foot-net:nth-child(5):focus-within, .foot-card-pane:nth-child(5):focus-within)) .foot-card { --card-w: 262px; --card-h: 142px; }
  html:lang(en) .foot-social:is([data-open="1"], :not([data-open]):not(:has(> .foot-net:hover)):has(> .foot-net:nth-child(1):focus-within, .foot-card-pane:nth-child(1):focus-within)) .foot-card { --card-h: 129px; }
}
/* Le survol, filet sans script : seulement là où il existe vraiment (un
   doigt n'a pas de survol, et celui que Safari simule ne se relâche pas),
   et jamais avec data-open, que le script pose dès qu'il tourne. */
@media (hover: hover) {
  .foot-social:not([data-open]):has(> .foot-net:nth-child(1):hover) .foot-card { --card-i: 0; --card-w: 304px; --card-h: 129px; }
  .foot-social:not([data-open]):has(> .foot-net:nth-child(2):hover) .foot-card { --card-i: 1; --card-w: 346px; --card-h: 167px; }
  .foot-social:not([data-open]):has(> .foot-net:nth-child(3):hover) .foot-card { --card-i: 2; --card-w: 340px; --card-h: 156px; }
  .foot-social:not([data-open]):has(> .foot-net:nth-child(4):hover) .foot-card { --card-i: 3; --card-w: 346px; --card-h: 166px; }
  .foot-social:not([data-open]):has(> .foot-net:nth-child(5):hover) .foot-card { --card-i: 4; --card-w: 341px; --card-h: 142px; }
}
@media (hover: hover) and (min-width: 901px) and (max-width: 1179px) {
  .foot-social:not([data-open]):has(> .foot-net:nth-child(1):hover) .foot-card { --card-w: 262px; --card-h: 146px; }
  .foot-social:not([data-open]):has(> .foot-net:nth-child(2):hover) .foot-card { --card-w: 262px; --card-h: 167px; }
  .foot-social:not([data-open]):has(> .foot-net:nth-child(3):hover) .foot-card { --card-w: 262px; --card-h: 156px; }
  .foot-social:not([data-open]):has(> .foot-net:nth-child(4):hover) .foot-card { --card-w: 262px; --card-h: 186px; }
  .foot-social:not([data-open]):has(> .foot-net:nth-child(5):hover) .foot-card { --card-w: 262px; --card-h: 142px; }
  html:lang(en) .foot-social:not([data-open]):has(> .foot-net:nth-child(1):hover) .foot-card { --card-h: 129px; }
}
/* Les volets : empilés dans la même case, un seul visible. L'ancien se
   dissout en 150 ms (fondu et léger flou, comme la référence), le nouveau
   s'écrit en 220 ms, au rythme de la boîte. Ils sont posés à leur taille
   propre, en haut à gauche : la boîte qui se déforme les découvre, elle ne
   les réagence pas. */
.foot-card-pane {
  grid-area: 1 / 1; display: grid; gap: 4px; align-content: start; width: max-content;
  opacity: 0; visibility: hidden; filter: blur(3px);
  transition: opacity .15s cubic-bezier(.4, 0, 1, 1), filter .15s cubic-bezier(.4, 0, 1, 1), visibility 0s linear .15s;
}
.foot-social:is([data-open="1"], :not([data-open]):not(:has(> .foot-net:hover)):has(> .foot-net:nth-child(1):focus-within, .foot-card-pane:nth-child(1):focus-within)) .foot-card-pane:nth-child(1),
.foot-social:is([data-open="2"], :not([data-open]):not(:has(> .foot-net:hover)):has(> .foot-net:nth-child(2):focus-within, .foot-card-pane:nth-child(2):focus-within)) .foot-card-pane:nth-child(2),
.foot-social:is([data-open="3"], :not([data-open]):not(:has(> .foot-net:hover)):has(> .foot-net:nth-child(3):focus-within, .foot-card-pane:nth-child(3):focus-within)) .foot-card-pane:nth-child(3),
.foot-social:is([data-open="4"], :not([data-open]):not(:has(> .foot-net:hover)):has(> .foot-net:nth-child(4):focus-within, .foot-card-pane:nth-child(4):focus-within)) .foot-card-pane:nth-child(4),
.foot-social:is([data-open="5"], :not([data-open]):not(:has(> .foot-net:hover)):has(> .foot-net:nth-child(5):focus-within, .foot-card-pane:nth-child(5):focus-within)) .foot-card-pane:nth-child(5) {
  opacity: 1; visibility: visible; filter: none;
  transition: opacity .22s cubic-bezier(0, 0, .2, 1), filter .22s cubic-bezier(0, 0, .2, 1), visibility 0s linear 0s;
}
@media (hover: hover) {
  .foot-social:not([data-open]):has(> .foot-net:nth-child(1):hover) .foot-card-pane:nth-child(1),
  .foot-social:not([data-open]):has(> .foot-net:nth-child(2):hover) .foot-card-pane:nth-child(2),
  .foot-social:not([data-open]):has(> .foot-net:nth-child(3):hover) .foot-card-pane:nth-child(3),
  .foot-social:not([data-open]):has(> .foot-net:nth-child(4):hover) .foot-card-pane:nth-child(4),
  .foot-social:not([data-open]):has(> .foot-net:nth-child(5):hover) .foot-card-pane:nth-child(5) {
    opacity: 1; visibility: visible; filter: none;
    transition: opacity .22s cubic-bezier(0, 0, .2, 1), filter .22s cubic-bezier(0, 0, .2, 1), visibility 0s linear 0s;
  }
}
/* Le courriel (BULLE-2409-E, sur la capture de Theo) : WOTG TEAM et la
   flèche-lien sur la même ligne, l'adresse dessous, une respiration, le
   texte. Notre police : c'est la seule carte qui est nous. En haut de sa
   case : les volets partagent une case haute comme le plus haut. */
.foot-card-pane--mail { align-self: start; display: block; width: 270px; }
.foot-card-mail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.foot-card-pane--mail .foot-card-t { font-size: 13.5px; font-weight: 500; letter-spacing: .04em; }
.foot-card-mail-a {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: -6px -6px -6px 0;
  border-radius: 8px; color: var(--dim); transition: color .3s var(--ease), background-color .3s var(--ease);
}
/* UN SEUL LIEN PAR CARTE (Theo, 23/09) : il porte tout le volet, et son
   calque couvre la carte entière, marges comprises — aucun clic ne tombe
   dans le vide. Le calque des volets cachés est caché avec eux (visibility
   héritée) : seul le volet visible reçoit le clic. Survol de la carte :
   « Voir le profil » (ou la flèche du courriel) s'éclaire ; au clavier,
   l'anneau suit le contour de la carte. */
.foot-card-lien { display: block; color: inherit; text-decoration: none; outline: none; }
.foot-card-lien::after { content: ""; position: absolute; inset: 0; }
/* Sans arrondi propre : le calque couvre toute la surface intérieure, et
   c'est la carte (overflow: hidden) qui lui donne ses coins ronds — un
   calque arrondi à 15 px laissait des coins morts (BULLE-2409-E, relevé du
   coordinateur). L'anneau du clavier est donc porté par la carte. */
.foot-card:has(.foot-card-lien:focus-visible) { outline: 2px solid var(--white); outline-offset: -4px; }
.foot-card-lien:hover .foot-card-a, .foot-card-lien:focus-visible .foot-card-a { color: var(--white); }
.foot-card-lien:hover .foot-card-mail-a, .foot-card-lien:focus-visible .foot-card-mail-a { color: var(--white); background: var(--hair-2); }
.foot-card-pane--mail .foot-card-h { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 300; color: var(--faint); }
.foot-card-pane--mail .foot-card-d { display: block; margin-top: 14px; font-size: 11.5px; font-weight: 300; line-height: 1.5; color: var(--dim); }
.foot-card-t { font-size: 13.5px; font-weight: 600; color: var(--white); letter-spacing: -.01em; }
.foot-card-d { font-size: 11.5px; line-height: 1.4; color: var(--faint); }
.foot-card-a {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; width: max-content;
  font-size: 12px; font-weight: 500; color: var(--dim); text-decoration: none;
  transition: color .3s var(--ease);
}
/* .foot-card-a n'est plus un lien : son éclairage vient de .foot-card-lien. */
.foot-card-arrow { flex: none; }
/* ── Les volets de profil (BULLE-2409-D, puis -E le 23/09) ─────────────────
   « La police doit être celle de la plateforme » (Theo, 23/09) : l'inverse
   de la consigne précédente, assumé. Chaque volet prend la police, les
   tailles, les écarts et la forme du bouton de son application ; nos
   couleurs de texte restent (contraste mesuré). Polices :
   - YouTube : Roboto, embarquée (woff2 latin variable, 42 Ko, OFL 1.1) ;
   - TikTok  : TikTok Sans, embarquée (woff2 latin variable, 44 Ko, OFL 1.1,
     publiée par TikTok) ;
   - X et Instagram : leur pile officielle (Chirp et Instagram Sans ne sont
     pas redistribuables : aucun fichier propriétaire dans le dépôt). Chirp
     est citée en tête : si le visiteur l'a, elle sert ; sinon la pile tombe
     sur la police du système, comme sur leur propre site. Sur Android et
     Linux, c'est notre Roboto embarquée qui répond au nom « Roboto ».
   Les deux fichiers ne se chargent qu'à l'ouverture d'une carte qui les
   emploie : rien ne change au chargement de la page.
   Aucun chiffre (comptes neufs). La coche bleue sur X et Instagram
   seulement. L'action est une pastille de plateforme qui ne fait rien ; le
   seul lien reste « Voir le profil ».
   HAUTEURS INDÉPENDANTES DE LA POLICE : X et Instagram prennent la police
   du système (SF sur Mac, Segoe sur Windows, Roboto ailleurs) ; la bio a
   donc un nombre de lignes FIXE (--bio-l), une hauteur réservée et une
   coupe au-delà — la carte garde sa taille sur toutes les machines. */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/roboto-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "TikTok Sans"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(/assets/fonts/tiktok-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
.foot-card-pane--profile {
  display: block;
  --nom: 15px; --nom-g: 700; --pseudo: 15px; --bio: 15px; --bio-lh: 20px; --bio-l: 2; --av: 40px;
}
.foot-card-pane--x {
  width: 306px; font-family: TwitterChirp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.foot-card-pane--instagram {
  width: 312px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --nom: 14px; --nom-g: 600; --pseudo: 14px; --bio: 14px; --bio-lh: 18px; --bio-l: 2; --av: 55px;
}
.foot-card-pane--youtube {
  width: 312px; font-family: "Roboto", Arial, sans-serif;
  --nom: 16px; --nom-g: 500; --pseudo: 14px; --bio: 14px; --bio-lh: 20px; --bio-l: 1; --av: 48px;
}
.foot-card-pane--tiktok {
  width: 307px; font-family: "TikTok Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --nom: 16px; --nom-g: 700; --pseudo: 14px; --bio: 14px; --bio-lh: 18px; --bio-l: 1; --av: 48px;
}
.foot-card-head { display: grid; grid-template-columns: var(--av) 1fr auto; column-gap: 12px; align-items: center; }
.foot-card-avatar { display: block; width: var(--av); height: var(--av); border-radius: 50%; overflow: hidden; }
.foot-card-who { display: grid; gap: 1px; align-content: center; min-width: 0; }
.foot-card-pane--profile .foot-card-t {
  display: flex; align-items: center; gap: 4px;
  font-size: var(--nom); font-weight: var(--nom-g); line-height: 1.3; letter-spacing: 0; white-space: nowrap;
}
.foot-card-coche { flex: none; width: 18px; height: 18px; }
.foot-card-pane--x .foot-card-coche { color: #1D9BF0; }
.foot-card-pane--instagram .foot-card-coche { color: #0095F6; width: 16px; height: 16px; }
.foot-card-pane--profile .foot-card-h { font-size: var(--pseudo); font-weight: 400; line-height: 1.3; color: var(--faint); white-space: nowrap; }
.foot-card-pane--profile .foot-card-d {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--bio-l); line-clamp: var(--bio-l); overflow: hidden;
  height: calc(var(--bio-l) * var(--bio-lh)); margin-top: 12px;
  font-size: var(--bio); font-weight: 400; line-height: var(--bio-lh); color: var(--dim);
}
.foot-card-pane--profile .foot-card-a { display: flex; margin-top: 12px; font-size: 14px; font-weight: 500; line-height: 18px; }
/* Les pastilles d'action, à la forme de leur plateforme (thème sombre). */
.foot-card-act { justify-self: end; display: inline-flex; align-items: center; white-space: nowrap; }
.foot-card-pane--x .foot-card-act { height: 32px; padding: 0 16px; border-radius: 999px; background: #EFF3F4; color: #0F1419; font-size: 14px; font-weight: 700; }
.foot-card-pane--instagram .foot-card-act { height: 32px; padding: 0 16px; border-radius: 8px; background: #0095F6; color: #FFFFFF; font-size: 14px; font-weight: 600; }
.foot-card-pane--youtube .foot-card-act { height: 36px; padding: 0 16px; border-radius: 18px; background: #F1F1F1; color: #0F0F0F; font-size: 14px; font-weight: 500; }
.foot-card-pane--tiktok .foot-card-act { height: 36px; padding: 0 16px; border-radius: 4px; background: #FE2C55; color: #FFFFFF; font-size: 15px; font-weight: 600; }
/* Instagram : l'anneau dégradé de la plateforme autour d'un avatar de 46 px,
   séparé par un liseré d'encre de 2 px (couleurs d'Instagram, ici seulement). */
.foot-card-ring { display: block; box-sizing: border-box; width: var(--av); height: var(--av); padding: 2.5px; border-radius: 50%; }
.foot-card-ring .foot-card-avatar { width: 100%; height: 100%; box-sizing: border-box; border: 2px solid #131210; }
.foot-card-pane--instagram .foot-card-ring { background: conic-gradient(from 200deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5, #FEDA75); }
.foot-card-pane--instagram .foot-card-d { white-space: pre-line; }
/* YouTube : la bannière en tête, à fond perdu (le voile du brand book et les
   filets du site ; la pièce en grand : tools/banniere-youtube.py) ; l'avatar
   seul remonte de moitié dessus. */
.foot-card-banner {
  position: relative; display: block; height: 44px; margin: -16px -16px 0; overflow: hidden;
  background: linear-gradient(135deg, #2A1840 0%, #131210 46%, #0F2A22 100%);
}
.foot-card-banner::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(90deg, var(--hair) 1px, transparent 1px), linear-gradient(180deg, var(--hair-2) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px;
}
.foot-card-pane--youtube .foot-card-head { margin-top: 2px; }
.foot-card-pane--youtube .foot-card-avatar { position: relative; margin-top: -24px; border: 2px solid #131210; box-sizing: border-box; box-shadow: 0 0 0 1px var(--hair); }
/* TikTok : le liseré duo cyan → rose en haut de la carte, un anneau sobre. */
.foot-card-pane--tiktok::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, #25F4EE, #131210 50%, #FE2C55);
}
.foot-card-pane--tiktok .foot-card-avatar { box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }
/* LE FORMAT COMPACT, de 901 à 1179 px : la carte part du bord gauche de la
   rangée et ne doit pas atteindre la colonne Licence (265 px de place à 901,
   347 à 1179). Les cartes de profil y font 262 px, la pastille s'efface
   (tête trop large) et la bio passe à deux lignes au plus. */
@media (min-width: 901px) and (max-width: 1179px) {
  .foot-card-pane--x, .foot-card-pane--instagram, .foot-card-pane--youtube, .foot-card-pane--tiktok { width: 228px; }
  .foot-card-pane--x, .foot-card-pane--instagram, .foot-card-pane--youtube { --bio-l: 2; }
  .foot-card-pane--profile .foot-card-act { display: none; }
  .foot-card-pane--profile .foot-card-head { grid-template-columns: var(--av) 1fr; }
  .foot-card-pane--mail { width: 228px; }
}
/* AU DOIGT (BAS-2209) : la carte ne s'ouvre que sur l'appui, que wotg.js
   traduit en data-open sur la rangée (premier appui = aperçu, le lien DANS
   la carte ouvre le réseau). Sans script, data-open n'existe jamais : pas de
   carte, les cinq icônes restent des liens directs. Le :hover et le :focus
   qu'un doigt laisse collés n'ouvrent rien — !important, parce que les
   règles d'ouverture sont plus spécifiques. Ouverte, la carte reçoit les
   appuis comme sur ordinateur (règle d'ouverture, pointer-events: auto). */
@media (hover: none) {
  .foot-social:not([data-open]) .foot-card { display: none !important; opacity: 0 !important; transform: translateY(-6px) !important; }
}
@media (prefers-reduced-motion: reduce) {
  /* Pas de glissement ni de montée : les fondus seuls. */
  .foot-card { --card-g: 0s; }
  .foot-card, .foot-social:hover .foot-card, .foot-social:focus-within .foot-card { transform: none; }
  .foot-card-pane { filter: none !important; }
}

.foot-col h2 { font-size: 10.5px; font-weight: 500; letter-spacing: .24em;
  text-transform: uppercase; color: var(--faint); margin: 0 0 16px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.foot-col a {
  color: var(--dim); text-decoration: none; font-size: clamp(13px, .92vw, 14.5px);
  transition: color .35s var(--ease);
}
.foot-col a:hover { color: var(--white); }
.foot-col .soon { color: var(--faint); font-size: clamp(13px, .92vw, 14.5px); }
.foot-col .soon::after {
  content: "bientôt"; margin-left: 8px; font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; border: 1px solid var(--hair-2); border-radius: 999px; padding: 2px 7px;
}

.foot-legal {
  border-top: 1px solid var(--hair-2); padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; align-items: center;
}
.foot-legal p, .foot-legal a {
  margin: 0; font-size: 11.5px; color: var(--faint); text-decoration: none;
  transition: color .35s var(--ease);
}
.foot-legal a:hover { color: var(--dim); }

/* Retour en haut : une commande, pas une mention légale. Sans bordure ni
   flèche, elle se confondait avec le copyright — et une fois la barre empilée
   sur téléphone, plus rien ne la distinguait du reste. */
.foot-top {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border: 1px solid var(--hair-2); border-radius: 999px;
  transition: color .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
}
.foot-top::after { content: "↑"; font-size: 12px; line-height: 1; }
.foot-top:hover { color: var(--white); border-color: var(--hair); background: var(--wash-hover-soft); }

.foot-switch { display: inline-flex; align-items: center; gap: 12px; }
.foot-switch a { position: relative; }
.foot-switch a[aria-current="true"] { color: var(--white); }
.foot-switch a[aria-current="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px; background: currentColor;
}

/* ⇣ wotg.css, lignes 1639–1679 */
/* ---- Cibles tactiles ----------------------------------------------------
   Au doigt, un lien de 17px de haut se rate. On agrandit ce qu'on touche
   sans toucher à ce qu'on voit : les colonnes du pied de page passent en
   rangées de 44px, et les liens en ligne reçoivent une zone de clic posée
   par-dessus, qui ne déplace rien. Rien de tout ceci ne s'applique à la
   souris, dont la précision n'a pas ce besoin. */
@media (pointer: coarse) {
  /* Les commandes de la barre et l'achat des cartes : 34px suffisent à la
     souris, pas au pouce. On les monte à 42 sans changer leur dessin. */
  .iconbtn, .lang, .menu > summary { height: 42px; }
  .lang { min-width: 46px; }
  .buy { padding-block: 12px; }

  /* La rangée porte l'espacement, la liste n'en ajoute plus */
  .foot-col ul { gap: 0; }
  .foot-col li > a,
  .foot-col li > .soon { display: flex; align-items: center; min-height: 44px; }

  /* Le trait du lien reste où il est : seule la zone sensible grandit */
  .link::before { content: ""; position: absolute; inset: -10px -8px; }

  /* Barre légale : le bouton de retour est déjà assez grand, les autres non */
  .foot-legal a:not(.foot-top) { position: relative; }
  .foot-legal a:not(.foot-top)::before { content: ""; position: absolute; inset: -13px -4px; }
}

/* Le logo n'est plein format qu'une fois la barre en rangée simple : au-delà
   il est calé en absolu, et l'agrandir le décalerait. « Accueil » reste de
   toute façon dans le menu, la destination n'est donc jamais perdue. */
@media (max-width: 900px) and (pointer: coarse) {
  .wordmark { position: relative; padding: 11px; margin-left: -11px; }
}

/* Encoches et bords arrondis des téléphones récents */
@supports (padding: max(0px)) {
  .wrap, .nav, .home-hero {
    padding-left:  max(var(--pad), env(safe-area-inset-left));
    padding-right: max(var(--pad), env(safe-area-inset-right));
  }
}