/* ============================================================
   v2.css — design system du site (référence visuelle : design-system-v2.html)

   Règles (une valeur par rôle, jamais de valeur au cas par cas) :
   1. Typographie par RÔLE : display / h1 / h2 / h3 / lead / body / small / label
   2. Deux largeurs de lecture : --measure (texte, ≈ 65 caractères) et --measure-lead (chapeau)
   3. Un seul rythme vertical : --section entre sections, --stack-* dedans
   4. Grille 12 colonnes, trois compositions : .split (7 + 4), .split-rev (5 + 6),
      étude de cas (titre 4 + contenu 8, build_v2.py) ; une colonne à 900 px et moins
   5. Toute section = label numéroté + titre + contenu (.section-head)
   6. Une page = un seul objet animé qui lui est propre

   Matière : tous les objets sont en PAPIER (fond --s1, même ombre portée,
   détails d'artisan : encoches, pointillés, surpiqûre, œillet).
   Un objet par rôle : .ticket = liste des projets · étiquettes + fil = le
   parcours · .print = tirage d'une capture · .paint-band = information clé ·
   .sketch = bouton principal · .kraft = une pause de lecture par page.
   Le FIL (ocre → bleu, pointillé) = le parcours, du textile à l'UX : un point
   de départ (ocre), un point d'arrivée (bleu) ; passé dans un objet, il arrive
   devant, entre dans l'œillet et repart derrière.
   Mouvement : une seule courbe douce (--ease), pas de rebond, aucun objet en
   boucle (plus inclusif, moins fatigant).
   ============================================================ */

/* ───────────────────── 0. HÉRITAGE ─────────────────────
   Variables de l'ancien système encore utilisées (polices, logos des vignettes, projet.css).
   À remplacer progressivement par l'échelle actuelle (--stack-*, --t-*). */
:root{
  --font-sans: 'Inter', -apple-system, ui-sans-serif, sans-serif;
  --font-serif: 'DM Serif Display', Georgia, ui-serif, serif;
  --fs-xs: clamp(11px, 1.2vw, 13px);
  --fs-xl: clamp(22px, 2.8vw, 28px);
  --fw-regular: 400;
  --fw-bold: 700;
  --lh-snug: 1.3;
  --ls-none: 0em;
  --ls-wide: 0.08em;
  --space-1: 0.471rem;
  --space-2: 0.941rem;
  --space-3: 1.412rem;
  --space-4: 1.882rem;
  --space-5: 2.824rem;
  --nav-h: calc(clamp(44px, 6vw, 56px) + clamp(40px, 5vw, 52px) + 1px);
}

/* ───────────────────── 1. COULEURS ───────────────────── */
/* --ochre = decor (fil, icones, filets : 3.0:1, jamais pour du texte).
   --ochre-ink = ocre pour le TEXTE (5.0:1 sur le fond clair, calcule). */
:root{
  --bg:#F7F6F4; --s1:#FFFFFF; --ink:#0A0A0A; --ink2:#1A1A1A; --mid:#5A5755;
  --faint:#6B6560; --rule:#E8E5E2; --rule2:#D0CCC8; --warm:#4A4540;
  --accent:#2B4C6F; --ochre:#B8862F; --ochre-ink:#8A6320; --paint:#E8C26A; --paint-ink:#0A0A0A;
  --shadow-ink:rgba(43,76,111,.55);
  --elev-1:0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
  --elev-2:0 1px 2px rgba(0,0,0,.06), 0 10px 32px rgba(0,0,0,.07);
  /* Mouvement : une courbe, deux durées, une flottaison */
  --ease:cubic-bezier(.22,1,.36,1);   /* douce, sans rebond */
  --dur:.75s;                         /* déplier, déplacer */
  --dur-float:2.4s;                   /* flottaison unique d'un objet */
  --kraft:#EFE8DC; --kraft-ochre-ink:#7E5B1D;  /* bande kraft (5.1:1 pour l'ocre texte) */
  --ticket-ground:#EFE8DC;  /* fond des vignettes (fenêtre du ticket) */
  --shirt:#B8CBF0;          /* bleu chemise des surlignages ; texte posé dessus = --paint-ink (12:1) */
  /* Couleurs volontairement hors jetons : couleurs de marque des projets (logos, nuanciers),
     #000/#0000 des masques (transparence, pas une couleur vue), valeurs claires du papier en
     mode sombre, bleu du SVG du surlignage (une image en data: ne lit pas les variables CSS). */
}
:root[data-theme="dark"]{
  --bg:#0E0E0F; --s1:#161618; --ink:#F2F2F0; --ink2:#E6E4E1; --mid:#B3AEA8;
  --faint:#9C958E; --rule:#2A2A2A; --rule2:#3A3A3A;
  --accent:#8FB3D9; --ochre:#D9A94A; --ochre-ink:#D9A94A; --shadow-ink:rgba(143,179,217,.45);
  --elev-1:0 0 0 1px #242426; --elev-2:0 0 0 1px #2C2C2F; --kraft:#1A1714; --kraft-ochre-ink:#D9A94A;
    --ticket-ground:#D6C6A8;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E0E0F; --s1:#161618; --ink:#F2F2F0; --ink2:#E6E4E1; --mid:#B3AEA8;
    --faint:#9C958E; --rule:#2A2A2A; --rule2:#3A3A3A;
    --accent:#8FB3D9; --ochre:#D9A94A; --ochre-ink:#D9A94A; --shadow-ink:rgba(143,179,217,.45);
    --elev-1:0 0 0 1px #242426; --elev-2:0 0 0 1px #2C2C2F; --kraft:#1A1714; --kraft-ochre-ink:#D9A94A;
    --ticket-ground:#D6C6A8;
  }
}

/* ───────────────────── 2. TYPOGRAPHIE (rôles) ───────────────────── */
:root{
  --t-display: clamp(44px, 6.4vw, 92px);   /* titre d'accueil, un seul par site */
  --t-h1:      clamp(38px, 4.8vw, 68px);   /* titre de page */
  --t-h2:      clamp(28px, 3vw, 40px);     /* titre de section */
  --t-h3:      clamp(21px, 2vw, 26px);     /* sous-titre, carte, chapitre */
  --t-lead:    clamp(18px, 1.5vw, 20px);   /* chapeau sous un titre */
  --t-body:    17px;                        /* texte courant */
  --t-small:   15px;                        /* légendes, liens secondaires */
  --t-label:   12px;                        /* labels majuscules (plancher lisible) */
  --lh-display:1.04; --lh-heading:1.15; --lh-body:1.7;
  --tracking-label:.08em;

  /* ───────────────────── 3. MESURES & RYTHME ───────────────────── */
  --measure:      34em;   /* texte courant : ≈ 65 caractères RÉELS par ligne (mesuré).
                             62ch donnait 71–76 caractères avec Inter : le « 0 » qui
                             définit le ch est plus large que la lettre moyenne. */
  --measure-lead: 46ch;   /* chapeau : plus court, plus grand */
  --section:  clamp(56px, 7vw, 96px);       /* marge haute et basse d'une section (≈ 2× entre deux contenus) */
  --stack-xs: 8px; --stack-sm: 16px; --stack-md: 24px; --stack-lg: 40px; --stack-xl: 64px;
  /* Grammaire : point = origine · trait = parcours · pointillé = construction */
  --dot: 7px;            /* point d'origine : fil du logo, signature */
  --line: 1.5px;         /* trait fin, au repos */
  --line-strong: 3px;    /* trait au survol / focus */
  --dash: 8 6;           /* rythme des fils dessinés (SVG : trait 8, blanc 6) */
  --seam: 1px dashed;    /* surpiqûres et perforations (bordures pointillées) */

  /* ───────────────────── 4. GRILLE ───────────────────── */
  --container: 1240px;
  --pad-x: clamp(24px, 5vw, 64px);
  --gutter: clamp(24px, 3vw, 48px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--ink2); font-family:var(--font-sans); font-size:var(--t-body); line-height:var(--lh-body); overflow-x:hidden; overflow-x:clip; -webkit-font-smoothing:antialiased; }
/* « clip » coupe sans créer de zone de défilement (la nav collante reste collante) ; « hidden » sur body seul ne suffit pas sur certains navigateurs mobiles (Safari iOS) : le rouleau de la bande « Disponible » dépassait de 18 px */
html{ overflow-x:clip; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
/* text-size-adjust : Safari iOS agrandit le texte quand on tourne le téléphone à l'horizontale ; 100 % garde nos tailles (le zoom au doigt reste possible) — 05/10 */
a{ color:inherit; }
img{ max-width:100%; height:auto; display:block; }   /* height:auto : les attributs width/height réservent la place sans déformer */
:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }   /* 06/10 : UN seul contour partout — bleu, 2 px, angles droits (bords nets) ; seul l'écart s'élargit (6 px) autour des icônes rondes */
.skip{ position:absolute; left:-9999px; top:8px; padding:10px 14px; background:var(--s1); color:var(--ink); z-index:60; } /* au-dessus de la barre collante (.top = 50) : sinon invisible au clavier (05/10) */
.skip:focus{ left:8px; }

/* Titres — DM Serif italique : rôle « éditorial » du système */
h1, h2, h3, .t-display, .t-h1, .t-h2, .t-h3{ font-family:var(--font-serif); font-style:italic; font-weight:400; color:var(--ink); letter-spacing:-.005em; }
.t-display{ font-size:var(--t-display); line-height:var(--lh-display); letter-spacing:-.01em; }
h1, .t-h1{ font-size:var(--t-h1); line-height:var(--lh-display); }
h2, .t-h2{ font-size:var(--t-h2); line-height:var(--lh-heading); }
h3, .t-h3{ font-size:var(--t-h3); line-height:var(--lh-heading); }
.lead{ font-size:var(--t-lead); line-height:1.6; max-width:var(--measure-lead); color:var(--ink2); }
.label{ font-size:var(--t-label); font-weight:700; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--ochre-ink); } /* ocre texte : le bleu est réservé aux liens */
.label-num{ color:var(--ochre-ink); margin-right:10px; font-variant-numeric:tabular-nums; }
.small{ font-size:var(--t-small); }
.prose > * + *{ margin-top:var(--stack-md); } /* 24px : un vrai blanc entre paragraphes (WCAG 1.4.8 : ≥ 1,5 × l'interligne) */
.prose p, .prose li{ max-width:var(--measure); }
.prose h3{ margin-top:var(--stack-lg); }
/* « Ce qui me guide » : une idée par phrase ; la conclusion se détache (encre + graisse) ;
   fins de ligne équilibrées (text-wrap:pretty, ignoré sans support). */
.guide-prose p{ text-wrap:pretty; }
.guide-prose .guide-key{ color:var(--ink); font-weight:600; }
.guide-prose abbr{ text-decoration:none; }

/* ───────────────────── 5. MISE EN PAGE ───────────────────── */
.wrap{ max-width:calc(var(--container) + 2 * var(--pad-x)); margin:0 auto; padding-inline:var(--pad-x); }
.grid{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gutter); }
.split > :first-child{ grid-column:1 / span 7; }  .split > :last-child{ grid-column:9 / span 4; }
.split-rev > :first-child{ grid-column:1 / span 5; } .split-rev > :last-child{ grid-column:7 / span 6; }

/* Section : filet limité à la zone de contenu (aligné sur le texte) + rythme unique */
.section{ padding-block:var(--section); background:linear-gradient(var(--rule), var(--rule)) content-box top / 100% 1px no-repeat; }
.section-head{ margin-bottom:var(--stack-lg); }
.section-head .label{ display:block; margin-bottom:var(--stack-sm); }
.section-head p{ margin-top:var(--stack-sm); }

/* ───────────────────── 6. EN-TÊTE / PIED ───────────────────── */
/* Barre de navigation : collante, cachée quand on descend (on lit), de retour
   dès qu'on remonte (on veut aller ailleurs). Elle revient aussi quand un de ses
   liens reçoit le focus, et scroll-padding-top l'empêche de masquer l'élément
   focalisé ou une ancre (WCAG 2.2, 2.4.11 ; technique W3C C43). */
.top{ position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:1px solid var(--rule);
  transition:translate .35s var(--ease), background-color .3s ease, box-shadow .3s ease; }
.top.is-scrolled{ background:color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 6px 20px #0000000d; }
.top.is-hidden:not(:focus-within){ translate:0 -100%; }
html{ scroll-padding-top:calc(var(--header-h, 80px) + 16px); }
.top .wrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px var(--stack-sm); padding-block:18px; }
.wm{ line-height:1; color:var(--ink); text-decoration:none; white-space:nowrap; }
.wm .b{ font-weight:900; font-size:22px; letter-spacing:.1em; }
.wm .d{ display:inline-block; font-weight:300; font-size:22px; color:var(--mid); margin:0 2px; transition:color .25s ease, scale .3s var(--ease); }
/* Logo = retour à l'accueil. Au survol, le point devient le point ocre du fil
   et grossit (le départ du parcours) ; « VDW » passe en encre. */
.wm:hover .d, .wm:focus-visible .d{ color:var(--ochre); scale:1.9; }
.wm .a{ transition:color .25s ease; } .wm:hover .a, .wm:focus-visible .a{ color:var(--ink); }
.wm:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; }
.wm{ padding-block:1px; } /* zone cliquable ≥ 24 px (WCAG 2.5.8) */
/* Pied de page signé : deux zones, deux fonctions.
   Ligne 1, à gauche : qui (signature grise, pas un lien, + « © · tagline »).
   Ligne 2, à droite : où aller (liens « S'informer », puis « Haut de page »).
   Mobile : tout empilé. */
.foot-id--sig{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap:var(--stack-lg); row-gap:var(--stack-sm); }
.foot-sig .b, .foot-sig .d, .foot-sig .a{ font-size:18px; }
.foot-sig .b, .foot-sig .a{ color:var(--ink); }
@media (min-width: 641px){
  /* liens et « Haut de page » séparés par un écart fixe, pas repoussés au milieu : la proximité dit le groupe */
  .site-foot .foot-bar.foot-bar--sig{ display:grid; grid-template-columns:1fr auto auto; column-gap:var(--stack-xl); row-gap:var(--stack-sm);
    align-items:center; }
  .foot-bar--sig .foot-id{ padding-top:var(--stack-md); }   /* l'air sous le filet ; entre les deux lignes : --stack-sm */
  .site-foot .foot-bar--sig :is(.foot-links, .to-top){ padding-top:0; }   /* le filet est tracé en haut du bloc : l'air se met sur les éléments */
  .foot-bar--sig .foot-info{ display:contents; }
  .site-foot .foot-bar--sig .to-top{ margin-left:0; }
  .foot-bar--sig .foot-id{ grid-column:1 / -1; }
  .foot-bar--sig .foot-links{ grid-column:2; } .site-foot .foot-bar--sig .to-top{ grid-column:3; }
}
/* 03/10 : sans le fil, la signature tient sur une ligne : sur grand écran, qui (à gauche) et où aller
   (à droite) partagent la même ligne, le pied de page perd une rangée. En dessous de 1200 px, deux lignes. */
@media (min-width: 1200px){
  .site-foot .foot-bar.foot-bar--sig{ align-items:baseline; }
  .foot-bar--sig .foot-id{ grid-column:1; }
  .site-foot .foot-bar--sig :is(.foot-links, .to-top){ padding-top:var(--stack-md); }
}

@media (max-width: 640px){
  .foot-id--sig{ flex-direction:column; align-items:flex-start; }
  /* « © · tagline » sur une ligne ; si la place manque (petit écran, zoom), la tagline
     passe entière à la ligne, jamais de défilement horizontal */
  .foot-id--sig .foot-copy{ display:flex; flex-wrap:wrap; align-items:baseline; }
  .foot-id--sig .foot-sep{ display:inline-block; margin:0 var(--stack-xs); }
  .foot-id--sig .foot-tag{ display:inline; margin-top:0; }
}
@media (max-width: 360px){ .foot-id--sig .foot-sep{ display:none; } .foot-id--sig .foot-copy{ column-gap:var(--stack-xs); } }   /* 320 px : la ligne ne tient pas ; la tagline passe dessous, sans « · » orphelin */
.foot-id .foot-sig:is(:hover, :active) .d{ color:var(--mid); scale:1; }   /* pas un lien : aucune réaction au survol */
.foot-sig, .foot-sig *{ transition:none; cursor:default; }   /* signature ≠ lien : rien ne bouge, rien ne change, curseur normal */

/* Le fil du logo : le logo est l'arrivée du parcours. Point + trait devant le nom, gris au
   repos, ocre et plus gras au survol / focus. Empilé (fil sous le nom) quand le menu est
   replié (même seuil de 640 px que v2.js) et en signature (.wm--stack). */
.wm{ display:inline-flex; align-items:center; }
.wm-name{ display:inline-block; }
.wm-fil{ display:inline-flex; align-items:center; margin-right:10px; }
.wm-dot{ flex:none; width:var(--dot); height:var(--dot); border-radius:50%; background:var(--mid); transition:background-color .25s ease, scale .3s var(--ease); }
.wm-line{ width:35px; height:var(--line); background:var(--mid); transition:background-color .25s ease, height .25s ease; }
.wm:is(:hover, :focus-visible, :active) .wm-dot{ background:var(--ochre); scale:1.25; }
.wm:is(:hover, :focus-visible, :active) .wm-line{ background:var(--ochre); height:var(--line-strong); }
.wm--stack{ flex-direction:column; align-items:stretch; gap:6px; }
.wm--stack .wm-fil{ order:2; margin-right:0; }
.wm--stack .wm-line{ flex:1; width:auto; }
@media (max-width: 640px){   /* même seuil que le menu replié (v2.js) */
  .top.has-menu .wm{ flex-direction:column; align-items:stretch; gap:6px; }
  .top.has-menu .wm-fil{ order:2; margin-right:0; }
  .top.has-menu .wm-line{ flex:1; width:auto; }
}
.grammar-demo{ display:grid; gap:14px; margin-top:var(--stack-sm); }   /* démonstration du design system */
.g-row{ display:flex; align-items:center; gap:10px; }
.g-dot{ flex:none; width:var(--dot); height:var(--dot); border-radius:50%; background:var(--ochre); }
.g-line{ width:120px; height:var(--line); background:var(--ochre); }
.g-dash{ width:120px; border-top:var(--line) dashed var(--ochre); }
.g-seam{ width:137px; height:22px; border:var(--seam) var(--rule2); border-radius:2px; }
.g-lab{ font-size:var(--t-small); color:var(--mid); }
.ds-logos{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--stack-md) 48px; margin-top:var(--stack-sm); }
.wm .a{ font-weight:300; font-style:italic; font-size:22px; letter-spacing:-.03em; }
.nav{ display:flex; align-items:center; gap:clamp(12px,3vw,32px); }
.nav a{ font-size:13px; font-weight:600; letter-spacing:var(--tracking-label); text-transform:uppercase; text-decoration:none; color:var(--mid); padding-block:6px; border-bottom:2px solid transparent; }
.nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--accent); }
.nav a:hover, .nav a:focus-visible{ color:var(--ink); border-bottom-color:var(--rule2); }
/* Un lien de navigation ne se coupe jamais sur deux lignes */
.nav a{ white-space:nowrap; }
/* Thème : l'icône du geste (lune / soleil) dans le cercle bleu, comme les autres outils */
.theme{ all:unset; cursor:pointer; display:inline-flex; }
.theme .action-ico{ width:18px; height:18px; padding:7px; }
.theme:hover .action-ico, .theme:focus-visible .action-ico{ background:var(--accent); stroke:var(--bg); }
.theme:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; }
.theme-label{ display:none; }   /* libellé visible seulement dans le menu mobile */
/* ── MENU MOBILE ─────────────────────────────────────────────
   Au-delà de 4 éléments, l'en-tête ne tient plus à 320 px (WCAG 1.4.10) : sur mobile,
   un bouton « Menu » déplie un panneau non modal (les pages en grand, ≥ 48 px, puis
   « Mode sombre », une préférence et non une destination). Sur ordinateur, rien n'est
   caché (NN/g : pas de navigation cachée sur ordinateur). Sans JS : pas de bouton, la
   navigation reste visible (règles plus bas). */
.top .menu-btn{ display:none; }
.menu-btn{ all:unset; cursor:pointer; align-items:center; gap:10px; font-size:var(--t-small); font-weight:700; color:var(--accent); }
.menu-btn[hidden]{ display:none !important; }
.menu-btn .action-ico{ width:18px; height:18px; padding:7px; }
.menu-btn .m-close{ display:none; }
.top.is-open .menu-btn .m-open{ display:none; } .top.is-open .menu-btn .m-close{ display:inline; }
.top.is-open .menu-btn .action-ico{ background:var(--accent); stroke:var(--bg); }
.menu-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; }
@media (max-width: 640px){
  .top.has-menu .wrap{ flex-wrap:nowrap; }
  .top.has-menu .menu-btn{ display:inline-flex; margin-left:auto; }
  .top.has-menu .nav{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0;
    padding:4px var(--pad-x) 20px; background:var(--bg); border-bottom:1px solid var(--rule); box-shadow:0 18px 30px #00000014; }
  .top.has-menu.is-open .nav{ display:flex; animation:menu-in .22s var(--ease); }
  .top.has-menu .nav a{ display:flex; align-items:center; min-height:48px; padding:0; font-size:14px; letter-spacing:var(--tracking-label);
    border-bottom:1px solid var(--rule); color:var(--ink2); }
  .top.has-menu .nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--rule); box-shadow:inset 3px 0 0 var(--accent); padding-left:14px; }
  .top.has-menu .nav a:hover, .top.has-menu .nav a:focus-visible{ color:var(--accent); border-bottom-color:var(--rule); }
  .top.has-menu .theme{ gap:10px; align-items:center; margin-top:var(--stack-sm); font-size:var(--t-small); font-weight:700; color:var(--accent); }
  .top.has-menu .theme-label{ display:inline; }
  .top.has-menu .theme[aria-pressed="true"] .action-ico{ background:var(--accent); stroke:var(--bg); } /* cercle rempli = activé : l'état se voit, pas seulement annoncé */
  .top.has-menu .theme:focus-visible{ outline-offset:6px; }
}
@media (max-width: 380px){ .top.has-menu .wm .b, .top.has-menu .wm .d, .top.has-menu .wm .a{ font-size:18px; } .top.has-menu .wm{ padding-block:3px; } } /* logo réduit : zone cliquable gardée ≥ 24 px (WCAG 2.5.8) */
@keyframes menu-in{ from{ opacity:0; translate:0 -6px; } to{ opacity:1; translate:0 0; } }
@media (prefers-reduced-motion: reduce){ .top.has-menu.is-open .nav{ animation:none; } }
/* Pied de page = une seule clôture : « La suite » (propre à la page) puis une ligne
   identique partout. Tout est dans <footer> (repère « contentinfo ») : le contact
   est là où les lecteurs d'écran le cherchent. */
.site-foot .foot-bar{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:var(--stack-md) var(--stack-lg);
  padding-block:var(--stack-md) var(--stack-lg); background:linear-gradient(var(--rule), var(--rule)) content-box top / 100% 1px no-repeat; }
.site-foot .foot-bar > *{ padding-top:var(--stack-md); }
.foot-id{ font-size:var(--t-label); font-weight:700; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--mid); }
/* séparateur : le point ocre du logo */
.foot-sep{ display:inline-block; margin:0 12px; color:var(--ochre); font-weight:700; font-size:1.4em; line-height:0; vertical-align:-.12em; }
@media (max-width: 640px){ .foot-sep{ display:none; } .foot-tag{ display:block; margin-top:4px; } } /* mobile : la tagline sur sa propre ligne, entière */
.foot-tag{ white-space:nowrap; margin-left:0; font-family:var(--font-serif); font-style:italic; font-weight:400; font-size:var(--t-small); letter-spacing:0; text-transform:none; }
/* Liens « S'informer » (légal, coulisses) : discrets mais toujours bleus et soulignés
   (ce sont des liens, WCAG 1.4.1). Zone cliquable ≥ 24 px (WCAG 2.5.8). */
.foot-info{ display:flex; flex-direction:column; gap:var(--stack-sm); }
.foot-links{ display:flex; flex-wrap:wrap; gap:4px 20px; font-size:var(--t-small); font-weight:500; letter-spacing:0; text-transform:none; color:var(--mid); }
.foot-links a{ color:var(--accent); font-weight:500; display:inline-block; padding-block:4px; }
/* OUTIL (agit sur la page : haut de page, thème, copier, agrandir) : libellé court +
   icône du geste dans le cercle bleu, jamais souligné au repos (le cercle dit
   « bouton ») ; au survol, le cercle se remplit et le libellé se souligne.
   « Haut de page » en bas à droite (NN/g, Back-to-Top). */
.tool{ display:inline-flex; align-items:center; gap:10px; font-size:var(--t-small); font-weight:700; color:var(--accent); text-decoration:none; }
.tool .action-ico{ width:18px; height:18px; padding:7px; transition:background-color .2s ease, stroke .2s ease, translate .25s var(--ease); }
.tool:hover .action-ico, .tool:focus-visible .action-ico{ background:var(--accent); stroke:var(--bg); }
.tool:hover span, .tool:focus-visible span{ text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px; }
.tool:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; }
footer .tool:hover{ color:var(--accent); }
.to-top{ margin-left:auto; }
.to-top:hover .action-ico, .to-top:focus-visible .action-ico{ translate:0 -3px; }
@media (prefers-reduced-motion: reduce){ .tool .action-ico{ transition:none; } .to-top:hover .action-ico{ translate:none; } }

footer a{ text-decoration:none; } footer a:hover{ color:var(--ink); }

/* En-tête de page standard (toutes les pages sauf l'accueil) */
.page-head{ padding-block:clamp(56px, 8vw, 112px) var(--stack-xl); }

.page-head .label{ display:block; margin-top:var(--stack-lg); }
.page-head h1{ margin-top:var(--stack-sm); max-width:18ch; }
.page-head .lead{ margin-top:var(--stack-md); }

/* ───────────────────── 7. COMPOSANTS ───────────────────── */
/* Bande « disponible » peinte au rouleau (un seul passage) */
.paint-band{ position:relative; display:inline-block; isolation:isolate; padding:9px 18px var(--stack-xs); rotate:-1.5deg;
  font-size:13px; font-weight:700; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--paint-ink); }
.paint-band::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--paint); border-radius:3px;
  filter:url(#handDrawn); clip-path:inset(0 100% 0 0); animation:paint-reveal 1.3s cubic-bezier(.5,.05,.3,1) .4s forwards; }
.band-text{ display:inline-block; clip-path:inset(0 100% 0 0); animation:paint-reveal 1.3s cubic-bezier(.5,.05,.3,1) .4s forwards; }
@keyframes paint-reveal{ to{ clip-path:inset(0 0 0 0); } }
.roller{ position:absolute; top:50%; left:0; width:46px; height:64px; translate:-30% -46%; pointer-events:none; overflow:visible;
  animation:roll 1.3s cubic-bezier(.5,.05,.3,1) .4s forwards, roller-out .35s ease 1.8s forwards; }
@keyframes roll{ to{ left:100%; } }
@keyframes roller-out{ to{ opacity:0; translate:-10% -60%; } }
.paint-band.is-static::before, .paint-band.is-static .band-text{ animation:none; clip-path:none; }

/* Bouton principal dessiné à la main : un seul par page */
.sketch{ position:relative; isolation:isolate; display:inline-flex; align-items:center; padding:.9em 1.4em; margin-left:34px;
  font-size:17px; font-weight:700; color:var(--ink); text-decoration:none; transition:rotate .3s ease-in-out; }
.sketch::before{ content:""; position:absolute; inset:0; z-index:-2; background:var(--s1); border-radius:2rem;
  box-shadow:var(--shadow-ink) 4px 4px 0 1px; }   /* bords nets : du papier posé de travers */
.sk-mark{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; fill:none; stroke:var(--ochre); stroke-opacity:.45;
  stroke-width:10; stroke-linecap:round; stroke-dasharray:1000; stroke-dashoffset:1000; transition:stroke-dashoffset .5s ease-in-out; }
.sk-thread{ position:absolute; left:0; top:50%; width:64px; height:64px; translate:-80% -34%; fill:var(--ochre); opacity:.85;
  transition:rotate .3s ease-out, translate .3s ease-out; }
.sketch:hover, .sketch:focus-visible{ rotate:-2.5deg; }
.sketch:hover .sk-mark, .sketch:focus-visible .sk-mark{ stroke-dashoffset:0; }
.sketch:hover .sk-thread, .sketch:focus-visible .sk-thread{ rotate:-15deg; translate:-82% -22%; }
.sketch:focus-visible{ outline-offset:6px; }

/* ── LIENS : une seule règle, partout. Le bleu ne fait que 1,96:1 contre le texte, or
   WCAG 1.4.1 / G183 demande ≥ 3:1 si la couleur seule distingue un lien : tout lien
   texte est donc bleu ET souligné. Au survol / focus, le trait s'épaissit et la flèche
   avance dans le sens du geste. Le bleu n'est utilisé que pour ce qui est cliquable. */
.link, .link-arrow, .link-back, .page-head p a, .proj-toc a, .proj-toc-live, .foot-links a{
  color:var(--accent); font-weight:700; text-decoration-line:underline; text-decoration-thickness:1.5px; text-underline-offset:5px;
  transition:text-decoration-thickness .2s ease; } /* pas de transition de couleur : le changement de thème doit être immédiat */
.link:hover, .link-arrow:hover, .page-head p a:hover, .proj-toc a:hover, .proj-toc-live:hover, .foot-links a:hover,
.link:focus-visible, .link-arrow:focus-visible, .page-head p a:focus-visible, .proj-toc a:focus-visible, .proj-toc-live:focus-visible, .foot-links a:focus-visible{
  text-decoration-thickness:3px; color:var(--accent); }
.link{ font-size:var(--t-small); }
/* Lien isolé (hors phrase) : zone cliquable ≥ 24 px. Le padding vertical d'un élément
   en ligne agrandit la zone sans décaler le texte ni le trait. */
.link:not(:has(> .arr)), .page-head p a{ padding-block:3px; }
.link-arrow{ font-size:var(--t-body); }
/* Un lien « étape suivante » (→) s'aligne à droite : on avance comme on tourne
   une page. Le retour (←) reste à gauche. */
.link-arrow{ display:table; margin-left:auto; }
/* la flèche : plus grande, et elle mime le geste */
.arr{ display:inline-block; margin-left:.2em; font-size:1.3em; line-height:0; vertical-align:-.06em; text-decoration:none; transition:translate .25s var(--ease); }
a:hover .arr, a:focus-visible .arr{ translate:5px 0; }
a:hover .arr-up, a:focus-visible .arr-up{ translate:0 -4px; }
a:hover .arr-out, a:focus-visible .arr-out{ translate:3px -3px; }
a:hover .arr-down, a:focus-visible .arr-down{ translate:0 4px; }
/* Lien + flèche (.arr) : text-decoration ne passe pas sous un inline-block, donc le
   trait est dessiné par le lien (box-shadow, ne décale rien) sous le texte ET la flèche.
   Sans :has() (anciens navigateurs) : soulignement classique. */
a:has(> .arr){ display:inline-flex; align-items:center; gap:.35em; text-decoration:none !important; line-height:1.25; padding-bottom:1px;
  box-shadow:inset 0 -1.5px 0 currentColor; transition:box-shadow .2s ease; }
a:has(> .arr):hover, a:has(> .arr):focus-visible{ box-shadow:inset 0 -3px 0 currentColor; }
a:has(> .arr) > .arr{ margin-left:0; line-height:1; vertical-align:0; font-size:1.15em; }
/* Zone cliquable ≥ 24 px sans déplacer le trait (WCAG 2.5.8) */
a:has(> .arr){ position:relative; } a:has(> .arr)::before{ content:""; position:absolute; inset:-5px -3px; }
/* Retour (études de cas) : un seul lien, à gauche. Pas de fil d'Ariane : inutile sur
   un site à deux niveaux (NN/g). */
.page-head .back{ margin-bottom:var(--stack-md); font-size:var(--t-small); }
a:hover .arr-back, a:focus-visible .arr-back{ translate:-5px 0; }
.proj-toc{ align-items:baseline !important; } /* ancres et lien externe sur la même ligne de base */

/* Liste d'actions (CV, e-mail, LinkedIn…) */
.actions{ display:flex; flex-direction:column; }
.action{ display:flex; justify-content:space-between; align-items:center; gap:var(--stack-sm); padding:var(--stack-sm) 0; border-bottom:1px solid var(--rule);
  text-decoration:none; font-weight:600; color:var(--ink); transition:padding .2s ease; }
.action:first-child{ border-top:1px solid var(--rule); }
/* l'icône dans un cercle bleu bien visible (cible claire), rempli au survol */
.action-ico{ flex:none; box-sizing:content-box; width:22px; height:22px; padding:9px; border:1.5px solid var(--accent); border-radius:50%;
  fill:none; stroke:var(--accent); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
  transition:translate .25s var(--ease), background-color .2s ease, stroke .2s ease; }
.action:hover .action-ico, .action:focus-visible .action-ico{ background:var(--accent); stroke:var(--bg); }
.action-linkedin:hover .action-ico circle, .action-linkedin:focus-visible .action-ico circle{ fill:var(--bg); }
.action-linkedin .action-ico circle{ fill:var(--accent); }
/* l'icône mime le geste au survol / focus */
.action-arrow:hover .action-ico, .action-arrow:focus-visible .action-ico{ translate:4px 0; }
.action-download:hover .action-ico, .action-download:focus-visible .action-ico{ translate:0 3px; }
.action-mail:hover .action-ico, .action-mail:focus-visible .action-ico,
.action-linkedin:hover .action-ico, .action-linkedin:focus-visible .action-ico{ translate:0 -2px; }
/* Texte réservé aux lecteurs d'écran (la précision que l'icône montre) */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.action:hover, .action:focus-visible{ color:var(--accent); padding-left:6px; text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:5px; }

/* Bloc « agir » en fin de page : la liste d'actions démarre à la hauteur du titre */
.next .actions{ align-self:start; margin-top:calc(var(--t-label) * 1.5 + var(--stack-sm)); }
@media (max-width: 900px){ .next .actions{ margin-top:var(--stack-lg); } }

/* Tirage papier (études de cas) : la capture posée sur une feuille, même anatomie
   que le ticket de Travaux (bord papier, pointillé, légende). */
.print{ margin:0; background:var(--s1); padding:14px 14px 0; border-radius:4px;
  filter:drop-shadow(0 1px 1px #0000001a) drop-shadow(0 10px 18px #00000014); }
.print img{ display:block; width:100%; height:auto; border-radius:2px; }

/* Carton photo : la seule photo du site, toujours le même objet. Œillet (anneau +
   vrai trou), bord blanc mat, surpiqûre ocre. À poser avec .print (crème en mode
   sombre). --pe = hauteur de l'œillet. */
.photo-tag{ position:relative; z-index:1; width:100%; margin:0; padding:calc(var(--pe, 22px) + 18px) 12px 12px; background:none; }
.photo-tag::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:4px;
  background:radial-gradient(circle 11px at 50% var(--pe, 22px), #0000 6.5px, var(--rule2) 7px 9.5px, #0000 10px), var(--s1);
  -webkit-mask:radial-gradient(circle 6.5px at 50% var(--pe, 22px), #0000 96%, #000); mask:radial-gradient(circle 6.5px at 50% var(--pe, 22px), #0000 96%, #000); }
.photo-tag::after{ content:""; position:absolute; inset:6px; border:var(--seam) var(--ochre); border-radius:2px; pointer-events:none; }
.photo-tag img{ aspect-ratio:4 / 5; object-fit:cover; background:var(--rule); }
/* Fil de présentoir : pointillé ocre, sans ombre (du gris apparaissait dans les
   vides), dessiné une fois quand son conteneur reçoit .is-threaded. */
.hg-thread{ position:relative; z-index:3; flex:none; width:0; height:var(--len); border-left:3px dashed var(--ochre); clip-path:inset(0 0 100% 0); }
.is-threaded .hg-thread{ clip-path:inset(0); transition:clip-path 1s cubic-bezier(.45,.05,.35,1) var(--wait, 0s); }
@media (prefers-reduced-motion: reduce){ .hg-thread{ clip-path:none; transition:none; } }
.print figcaption, .print .print-cap{ margin:14px -14px 0; padding:12px 14px 14px; border-top:var(--seam) var(--rule2);
  font-size:var(--t-label); font-weight:700; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--mid); text-align:left; }

/* Matières chromatiques : chaque couleur est un échantillon posé sur une carte papier
   (la carte de coloris du textile). Texte clair ou foncé choisi selon le contraste,
   calculé au build (AA minimum). */
.matieres{ margin:var(--stack-lg) 0 0; padding:14px; background:var(--s1); border-radius:4px; list-style:none;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:14px;
  filter:drop-shadow(0 1px 1px #0000001a) drop-shadow(0 10px 18px #00000014); max-width:none !important; }
.matieres li{ margin:0 !important; max-width:none !important; display:flex; flex-direction:column; }
/* projet.css impose ses marges aux listes des case studies : on reprend la main */
.proj-section .matieres, .proj-section ul.matieres{ padding:14px; margin:var(--stack-lg) 0 0; }
.mat-chip{ aspect-ratio:4 / 3; border-radius:2px; padding:12px 14px; display:flex; flex-direction:column; justify-content:flex-end; gap:4px;
  box-shadow:inset 0 0 0 1px #0000000f; }
.mat-name{ font-family:var(--font-serif); font-style:italic; font-size:clamp(18px, 1.6vw, 22px); line-height:1.1; }
.mat-role{ font-size:var(--t-label); font-weight:700; letter-spacing:var(--tracking-label); text-transform:uppercase; opacity:.85; }
.mat-sens{ margin-top:10px !important; font-size:var(--t-small) !important; line-height:1.45 !important; color:var(--ink2); }
.mat-below{ margin-top:10px; display:flex; flex-direction:column; gap:2px; color:var(--ink); }
.mat-hex{ margin-top:4px; font-size:var(--t-label); letter-spacing:.04em; color:var(--mid); font-variant-numeric:tabular-nums; }

/* Leçons du textile (À propos) : étiquettes papier avec un dessin technique. Même
   éventail que les tickets (3 + 2 centrées). Ce ne sont pas des liens : aucun effet
   de survol (pas de fausse affordance). */
.lessons{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:calc(var(--gutter) * 1.3) calc(var(--gutter) * 1.1); }
.lesson{ grid-column:span 2; position:relative; padding:18px 20px 22px; background:var(--s1); border-radius:4px; rotate:var(--tilt, 0deg);
  filter:drop-shadow(0 1px 1px #0000001a) drop-shadow(0 8px 14px #00000014); }
.lesson::after{ content:""; position:absolute; inset:8px; border:var(--seam) var(--rule2); border-radius:2px; pointer-events:none; } /* surpiqûre */
.lesson:nth-child(1){ --tilt:1.2deg; } .lesson:nth-child(2){ --tilt:-.6deg; } .lesson:nth-child(3){ --tilt:-1.2deg; }
.lesson:nth-child(4){ grid-column:2 / span 2; --tilt:.8deg; } .lesson:nth-child(5){ grid-column:4 / span 2; --tilt:-.8deg; }
.lesson-sketch{ display:block; width:100%; max-width:150px; height:auto; margin:0 auto 12px; fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.lesson-sketch .c{ stroke:var(--ochre); stroke-dasharray:4 3; } .lesson-sketch circle.c{ fill:var(--ochre); stroke:none; }
.lesson-sketch .f{ fill:var(--ochre); stroke:none; }
.lesson h3{ font-family:var(--font-serif); font-style:italic; font-weight:400; font-size:var(--t-h3); line-height:1.15; color:var(--ink); }
.lesson p{ margin-top:var(--stack-xs); font-size:var(--t-small); line-height:1.5; color:var(--ink2); }
.lesson .lesson-ux{ margin-top:12px; padding-top:10px; border-top:var(--seam) var(--rule2); font-weight:600; color:var(--ink); }
.lesson-ux span{ display:block; margin-bottom:2px; font-size:var(--t-label); font-weight:700; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--ochre-ink); }
@media (max-width: 1000px){ .lessons{ grid-template-columns:repeat(2, minmax(0,1fr)); } .lesson:nth-child(n){ grid-column:auto; } .lesson:last-child{ grid-column:1 / -1; justify-self:center; width:calc(50% - var(--gutter) / 2); } }
@media (max-width: 640px){ .lessons{ grid-template-columns:minmax(0,1fr); } .lesson:last-child{ width:auto; } }

/* « + » des étiquettes du parcours, dans un cercle (le titre de l'étiquette est le
   libellé visible) ; rempli au survol / focus. */
.chap-open .action-ico{ width:18px; height:18px; padding:7px; transform-origin:0 50%; transition:background-color .3s ease, stroke .3s ease, scale .3s var(--ease); }
.chap-open{ padding:6px 0 6px 1px; } /* place pour le + agrandi (le conteneur coupe ce qui dépasse) */
/* Le + se remplit et grossit, puis l'étiquette s'ouvre avec un léger retard :
   on voit le geste avant le résultat. */
.chap-btn:hover .chap-open .action-ico, .chap-btn:focus-visible .chap-open .action-ico{ background:var(--accent); stroke:var(--bg); scale:1.2; }
.chap.is-open .chap-peek{ transition:grid-template-rows var(--dur) var(--ease) .15s, opacity .35s ease .15s; }
@media (prefers-reduced-motion: reduce){ .chap-open .action-ico{ transition:none; scale:1 !important; } }

/* Étiquettes d'outils (chips) : pas des liens, donc en ocre, sans survol.
   Contraste : 4,89:1 (clair), 6,5:1 (sombre). */
.chips{ list-style:none; padding:0; margin:var(--stack-sm) 0 0; display:flex; flex-wrap:wrap; gap:6px; }
.chips li{ margin:0 !important; padding:4px 10px; font-size:var(--t-label); font-weight:700; letter-spacing:.02em; color:var(--ochre-ink);
  background:color-mix(in srgb, var(--ochre) 10%, var(--s1)); border:var(--seam) color-mix(in srgb, var(--ochre) 55%, transparent); border-radius:3px; line-height:1.4; max-width:none !important; }

/* Citation « En une phrase » : le parti pris, en serif italique (la voix réservée
   aux citations), relié au parcours par le fil ocre. Une citation par page au plus. */
.citation{ position:relative; margin:0; padding-left:34px; max-width:var(--measure); }
.citation::before{ content:""; position:absolute; left:7px; top:.55em; bottom:.3em; width:2px;
  background:repeating-linear-gradient(var(--ochre) 0 7px, transparent 7px 13px); }
.citation::after{ content:""; position:absolute; left:0; top:.35em; width:16px; height:16px; border-radius:50%; box-sizing:border-box;
  border:3px solid var(--ochre); background:var(--bg); }
/* Chute de « La suite » (accueil) : dernière phrase peinte d'une bande bleu chemise
   (texte noir 12,1:1, aussi en mode sombre). Même geste que la bande « Disponible »,
   autre couleur = autre rôle, sans rouleau. Bords irréguliers et légère inclinaison :
   on lit « peinture », jamais « texte sélectionné » ni « lien ». La peinture dépasse un
   peu et revient, une seule fois, puis le texte apparaît. */
.next-key{ display:block; margin-top:var(--stack-sm); font-family:var(--font-serif); font-style:italic; font-size:var(--t-h3); line-height:1.25; }
.next-key .nk-text{ position:relative; display:inline-block; isolation:isolate; padding:4px 12px 5px; rotate:-1deg; color:var(--paint-ink); }
.next-key .nk-text::before{ content:""; position:absolute; inset:0 -7% 0 0; z-index:-1; background:var(--shirt); border-radius:3px; filter:url(#handDrawn); clip-path:inset(0 6.54% 0 0); } /* 7 % plus longue que le texte, masquée au repos : la réserve du dépassement */
.nk-arm .nk-text::before{ clip-path:inset(0 100% 0 0); }
.nk-arm .nk-ink{ display:inline-block; clip-path:inset(0 100% 0 0); }
.nk-arm.is-shown .nk-text::before{ animation:nk-paint 1.1s cubic-bezier(.45,.05,.3,1) forwards; }
.nk-arm.is-shown .nk-ink{ clip-path:inset(0); transition:clip-path .9s cubic-bezier(.5,.05,.3,1) .5s; }
@keyframes nk-paint{ 0%{ clip-path:inset(0 100% 0 0); } 76%{ clip-path:inset(0 0 0 0); } 100%{ clip-path:inset(0 6.54% 0 0); } }   /* un masque qui se découvre : robuste dans Chrome avec le filtre peint */
/* Découpe du titre (Travaux) : une sinusoïde part du point final du titre ; les ciseaux
   la suivent une fois en coupant et s'arrêtent ouverts aux 2/3 (le travail continue).
   Tracé calculé dans le navigateur. Mouvement réduit : état final directement. */
.head-cut{ position:relative; padding-top:calc(clamp(56px, 8vw, 112px) + 28px); padding-bottom:calc(var(--stack-xl) + 36px); }   /* de l'air autour de la découpe */
.cut-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; color:var(--ink); }
.cut-svg .sk-ink{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cut-svg .sc-move .sk-ink{ stroke-width:2.4; vector-effect:non-scaling-stroke; }   /* ciseaux agrandis, trait net */
.cut-svg .sk-cote{ fill:none; stroke:var(--ochre); }
.cut-svg .sc-guide{ stroke-width:2.5; stroke-dasharray:var(--dash); }
.cut-svg .sc-cut{ stroke-width:1.6; stroke-dasharray:1; stroke-dashoffset:1; }
.cut-svg .sc-blade, .cut-svg .sc-pivot{ fill:var(--bg); }
.head-cut.is-cutting .sc-a{ animation:sc-snip-a 1.9s ease-in-out both; }
.head-cut.is-cutting .sc-b{ animation:sc-snip-b 1.9s ease-in-out both; }
.head-cut.is-cut .sc-a{ transform:rotate(-16deg); } .head-cut.is-cut .sc-b{ transform:rotate(16deg); }
@keyframes sc-snip-a{ 0%{ transform:rotate(0); } 12.5%{ transform:rotate(-16deg); } 25%{ transform:rotate(0); } 37.5%{ transform:rotate(-16deg); } 50%{ transform:rotate(0); } 62.5%{ transform:rotate(-16deg); } 75%{ transform:rotate(0); } 100%{ transform:rotate(-16deg); } }
@keyframes sc-snip-b{ 0%{ transform:rotate(0); } 12.5%{ transform:rotate(16deg); } 25%{ transform:rotate(0); } 37.5%{ transform:rotate(16deg); } 50%{ transform:rotate(0); } 62.5%{ transform:rotate(16deg); } 75%{ transform:rotate(0); } 100%{ transform:rotate(16deg); } }
@media (max-width: 900px){ .head-cut{ padding-top:clamp(56px, 8vw, 112px); padding-bottom:var(--stack-xl); } .head-cut .lead{ margin-top:116px; } }   /* téléphone : la découpe ENTRE le titre et le sous-titre */

/* Tickets : un seul fond crème pour tous (des fonds de marque différents faisaient
   disparate), chaque logo par-dessus dans la version foncée officielle de sa marque.
   Logos décoratifs (le nom est dans le titre), contrastes ≥ 3:1 sur le crème. */
.ticket-img .trav-card-img{ background:var(--ticket-ground); }
/* en mode sombre, --ticket-ground est plus soutenu : la « fenêtre » ressort du papier crème */
/* Au repos, une seule encre ; au survol / focus, la marque. Le ticket se déchire et le
   logo retrouve ses couleurs au même moment (la déchirure dit « j'entre », la couleur
   dit « voici la marque »). Sur téléphone (pas de survol) : encre. */
.ticket{ --logo-ink:#1C1A17; }
.ticket-img :is(.logo-bodam-card .b, .logo-bodam-card .d, .logo-bodam-card .a){
  color:var(--logo-ink); transition:color .5s ease .1s, background-color .5s ease .1s, border-color .5s ease .1s, filter .5s ease .1s; }

.ticket-img .trav-card-img img{ filter:brightness(0) opacity(.9); transition:filter .5s ease .1s; }   /* Coach : silhouette à l'encre */
/* au survol : les couleurs de la marque (versions foncées officielles sur le crème) */

.ticket:is(:hover, :focus-visible) .ticket-img .logo-bodam-card :is(.b, .a){ color:#0A0A0A; }          /* 16:1 */
.ticket:is(:hover, :focus-visible) .ticket-img .logo-bodam-card .d{ color:#8A847D; }                   /* 3,0:1 */
.ticket-img .trav-card-img.ticket-shot{ display:flex; align-items:center; justify-content:center; padding:9% 8%; }   /* la capture, posée sur le fond crème */
.ticket-img .trav-card-img.ticket-shot img{ width:100%; height:auto; border-radius:2px;
  box-shadow:0 1px 2px rgb(40 28 12 / .14), 0 8px 16px -8px rgb(40 28 12 / .3); filter:grayscale(1) sepia(.18) opacity(.94); }   /* au repos : tons crème/encre, comme les logos */
.ticket:is(:hover, :focus-visible) .ticket-img .trav-card-img img{ filter:none; }
/* Deux contextes, deux états : sur Travaux, les projets sont le sujet → couleurs au
   repos (.works--lit) ; sur l'accueil, ils ne doivent pas dominer la présentation →
   encre au repos, couleurs au survol. */
.works--lit .ticket-img .trav-card-img.ticket-shot img{ filter:none; }
.works--lit .ticket-img .logo-bodam-card :is(.b, .a){ color:#0A0A0A; }
.works--lit .ticket-img .logo-bodam-card .d{ color:#8A847D; }
@media (prefers-reduced-motion: reduce){ .ticket-img *{ transition:none !important; } }

/* Surlignage : la peinture bleu chemise de .next-key, sur une phrase par page au plus
   (celle qui porte la voix). Jaune = l'info clé, bleu = la voix. Une bande par ligne,
   bords irréguliers. Texte noir sur le bleu (12:1), en clair comme en sombre. */
.hl{ padding:0 .18em; margin:0 -.18em; color:var(--paint-ink); -webkit-box-decoration-break:clone; box-decoration-break:clone;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath fill='%23B8CBF0' d='M1.2 3.4 L22 2.2 L47 3.1 L73 1.7 L99 2.8 L98.6 17.3 L74 18.5 L46 17.1 L19 18.6 L0.7 17.2 Z'/%3E%3C/svg%3E") no-repeat -.18em 50% / calc(100% + .2em) 88%; background-origin:content-box; }
.hl-arm{ background-size:0% 88%; color:inherit; }
.hl-arm.is-shown{ animation:hl-paint 1.1s cubic-bezier(.45,.05,.3,1) forwards; color:var(--paint-ink); transition:color .3s ease .35s; }
@keyframes hl-paint{ 0%{ background-size:0% 88%; } 76%{ background-size:calc(100% + .36em) 88%; } 100%{ background-size:calc(100% + .2em) 88%; } }
.citation p{ font-family:var(--font-serif); font-style:italic; font-size:clamp(24px, 2.6vw, 34px); line-height:1.22; color:var(--ink); text-wrap:balance; }
/* Parole extérieure (cliente, école) : mot pour mot, en entier, attribution dessous (qui · quand).
   Courte (une phrase) : serif italique ; longue (--long) : Inter, l'italique long fatigue la lecture.
   Témoignages : données dans case_short.TEMOIGNAGES (06/10/2026). */
.proj-recog{ margin:var(--stack-lg) 0 0; padding-left:20px; border-left:3px solid var(--ochre); max-width:var(--measure); }
.proj-recog blockquote{ margin:0; font-family:var(--font-serif); font-style:italic; font-size:var(--t-body); color:var(--ink); }   /* 06/10 : taille réelle (t-lead était écrasé par .proj-section p) */
.proj-recog figcaption{ margin-top:var(--stack-xs); font-size:var(--t-small); color:var(--mid); }
.proj-recog + .proj-recog{ margin-top:var(--stack-md); }
.proj-recog-label{ display:block; margin-bottom:var(--stack-xs); font-size:var(--t-label); font-weight:700; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--ochre-ink); }   /* même étiquette que « Le réflexe du textile, ici » : on sait qui parle avant de lire */
/* Accueil (06/10, ajusté par Amandine : « trop grand, on perd le côté chic ») : sans contour, sans fond,
   sans « Projet / Résultat ». Tampon de la cliente (son vrai logo) · guillemet fin · citation en Inter
   Medium · nom à gauche, « Lire l'avis complet → » en bas à droite. Largeur de lecture, centrée.
   L'étiquette entre deux filets SÉPARE la section (le filet habituel de .section est retiré ici).
   Plusieurs avis (--multi) : côte à côte. Jamais de diaporama. */
.temoignages{ background:none; display:grid; grid-template-columns:repeat(var(--n, 1), minmax(0, 1fr)); column-gap:var(--gutter); row-gap:var(--stack-lg); }
.temoignages > .proj-recog-label{ grid-column:1 / -1; display:flex; align-items:center; gap:var(--stack-sm); margin:0; }
.temoignages > .proj-recog-label::before, .temoignages > .proj-recog-label::after{ content:""; flex:1; height:1px; background:var(--rule2); }
.avis-carte{ display:grid; grid-template-columns:auto minmax(0, 1fr); column-gap:clamp(24px, 3.5vw, 48px); align-items:start;
  width:100%; max-width:46rem; justify-self:center; padding-block:var(--stack-md); }
.avis-tampon{ display:block; width:clamp(64px, 7vw, 88px); aspect-ratio:1; rotate:-8deg; margin-top:var(--stack-sm);
  background:var(--ochre-ink); -webkit-mask:var(--tampon) center / contain no-repeat; mask:var(--tampon) center / contain no-repeat; }
/* Tampon encreur : UNE encre, celle du site (--ochre-ink, comme le guillemet) — la grue et le cercle du logo
   de la cliente en masque (version monochrome) ; suit le mode sombre ; se pose de travers (fait main). */
.avis-citation{ margin:0; }
.avis-guillemet{ display:block; height:.45em; font-family:var(--font-serif); font-style:normal; font-size:clamp(56px, 6vw, 72px); line-height:1; color:var(--ochre-ink); }
.avis-citation blockquote{ margin:0; font-family:var(--font-sans); font-weight:500; font-size:var(--t-lead); line-height:var(--lh-body); color:var(--ink); }
.avis-citation figcaption{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:var(--stack-xs) var(--stack-md); margin-top:var(--stack-md); font-size:var(--t-small); color:var(--mid); }
.avis-citation figcaption strong{ display:block; font-weight:600; color:var(--ink); }
.avis-citation .link-arrow{ margin-left:auto; }
@media (max-width: 900px){ .temoignages{ grid-template-columns:minmax(0, 1fr); } }
/* Étude de cas (06/10, Amandine : « trop de texte condensé, indigeste ») : la MÊME carte légère, texte complet :
   la 1re phrase en accroche (celle de l'accueil), puis des paragraphes courts, découpés par idée, avec de l'air. */
.avis-complet{ max-width:46rem; }
.proj-section .avis-complet{ margin-top:var(--stack-xl); }   /* deux voix, deux blocs bien séparés (la marge des études de cas l'écrasait) */
.avis-complet .avis-carte{ margin-top:var(--stack-sm); padding-top:0; }   /* l'étiquette reste collée à son avis */
.avis-complet .avis-citation blockquote{ font-size:var(--t-body); font-weight:400; line-height:var(--lh-body); color:var(--ink2); }
.avis-complet .avis-citation .avis-accroche{ font-size:var(--t-lead); font-weight:500; color:var(--ink); }
.avis-complet .avis-citation blockquote p + p{ margin-top:var(--stack-md); }
@media (max-width: 640px){ .avis-carte{ grid-template-columns:minmax(0, 1fr); row-gap:var(--stack-sm); } }
.citation-label{ display:block; margin-bottom:var(--stack-sm); padding-left:34px; font-size:var(--t-label); font-weight:700; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--ochre-ink); }

/* Action d'un tirage (« Page complète », « 8 planches ») : icône du geste + libellé
   court, sous l'image, à droite de la légende. Tout le tirage est cliquable (v2.js). */
.print .proj-img-expand, .print .proj-gallery-cover{ overflow:visible; }
.print .proj-gallery-cover-badge.go{ position:absolute; top:calc(100% + 17px); right:0; left:auto; bottom:auto; display:flex; align-items:center; gap:10px;
  padding:0; background:none; border:0; font-size:var(--t-small); font-weight:700; letter-spacing:0; text-transform:none; color:var(--accent); cursor:pointer; }
.print:has(button[aria-haspopup="dialog"]){ cursor:pointer; }
/* Diaporama des planches piloté par v2.js (fondu enchaîné) : l'animation de projet.css est coupée */
.proj-gallery-cover-slide:not(:first-child){ animation:none !important; opacity:0; transition:opacity .9s ease-in-out; }
.proj-gallery-cover-slide.is-on{ opacity:1; }
.print .proj-gallery-cover-badge.go .action-ico{ width:18px; height:18px; padding:6px; }
.print .proj-img-expand:hover .action-ico, .print .proj-img-expand:focus-visible .action-ico,
.print .proj-gallery-cover:hover .action-ico, .print .proj-gallery-cover:focus-visible .action-ico{ background:var(--accent); stroke:var(--bg); }
.print .proj-img-expand:hover .go > span:first-child, .print .proj-gallery-cover:hover .go > span:first-child{ text-decoration:underline; text-underline-offset:4px; }
.print.proj-gallery-group{ margin:0; }
/* La place du bouton est réservée dans la bande de légende : la légende se replie
   à gauche au lieu de passer dessous. */
.print:has(.go) > figcaption, .print:has(.go) > .print-cap{ padding-right:calc(14px + 150px); min-height:48px; }
/* le brandboard : sans l'ancien cadre gris, au format exact des planches (1000 × 707) */
.print .proj-gallery-cover{ border:0; aspect-ratio:1000 / 707; border-radius:2px; }
.print .proj-gallery-cover:focus-visible{ border-radius:0; } /* 06/10 : le contour suit l'arrondi de l'élément ; un seul contour partout, angles droits */

/* Bande kraft : UNE pause de lecture par page, sur une section de texte
   (jamais derrière des cartes blanches). Pleine largeur même depuis un
   conteneur étroit (box-shadow + clip-path). L'ocre texte y est plus
   foncé pour garder AA (5.1:1). */
.kraft{ --ochre-ink:var(--kraft-ochre-ink); background:var(--kraft); box-shadow:0 0 0 100vmax var(--kraft); clip-path:inset(0 -100vmax); }

/* Carte ticket (liste des projets) : seuls les éléments qui ont un sens, les encoches
   et la découpe (« ticket »), le talon qui se déchire au survol / focus (« entrer »).
   Sans masques CSS ni unités de conteneur : carte simple. */
.ticket-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:calc(var(--gutter) * 1.3) var(--gutter); }
.ticket{ --pad:14px; --notch:9px; position:relative; display:block; container-type:inline-size; padding:var(--pad) var(--pad) 18px;
  text-decoration:none; color:var(--ink); filter:drop-shadow(0 1px 1px #0000001a) drop-shadow(0 8px 14px #00000014);
  transition:transform .35s cubic-bezier(.34,1.4,.64,1); }
.ticket{ --tear:calc(var(--pad) + 100cqi * .75 + 13px); } /* 100cqi = largeur de l'image (4/3) */
.ticket-bg{ position:absolute; inset:0; z-index:0; background:var(--s1);
  -webkit-mask:radial-gradient(circle var(--notch) at 0 var(--tear), #0000 98%, #000) , radial-gradient(circle var(--notch) at 100% var(--tear), #0000 98%, #000);
  -webkit-mask-composite:source-in; mask:radial-gradient(circle var(--notch) at 0 var(--tear), #0000 98%, #000), radial-gradient(circle var(--notch) at 100% var(--tear), #0000 98%, #000);
  mask-composite:intersect; }
.ticket-top{ clip-path:inset(0 0 calc(100% - var(--tear)) 0); }
.ticket-stub{ clip-path:inset(var(--tear) 0 0 0); transform-origin:100% var(--tear); }
.ticket-img, .ticket-body{ position:relative; z-index:1; display:block; }
.ticket-body{ margin-top:26px; padding:0 4px 4px; transform-origin:100% -13px; }
.ticket-body::before{ content:""; position:absolute; left:6px; right:6px; top:-14px; border-top:2px dashed var(--rule2); }
.ticket-stub, .ticket-body{ transition:transform .45s cubic-bezier(.34,1.4,.64,1); }
.ticket-title{ display:block; font-family:var(--font-serif); font-style:italic; font-size:var(--t-h3); line-height:1.15; }
.ticket-label{ display:block; margin-top:6px; font-size:var(--t-label); font-weight:700; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--mid); }

/* « Voir le projet » : une flèche dans un cercle, à droite (on avance). Une flèche seule
   n'est pas universelle (NN/g) : le libellé visible est la carte elle-même (image +
   titre) ; « Voir le projet » reste pour les lecteurs d'écran. */
.ticket-go{ display:flex; justify-content:flex-end; margin-top:12px; }
.ticket:hover .action-ico, .ticket:focus-visible .action-ico{ background:var(--accent); stroke:var(--bg); translate:4px 0; }
.ticket:hover, .ticket:focus-visible{ transform:translateY(-6px); }
.ticket:hover .ticket-stub, .ticket:hover .ticket-body, .ticket:focus-visible .ticket-stub, .ticket:focus-visible .ticket-body{ transform:translate(6px, 12px) rotate(4deg); }
.ticket:hover .ticket-title, .ticket:focus-visible .ticket-title{ color:var(--accent); }

.ticket:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; }
@supports not (width: 1cqi){ .ticket-bg{ -webkit-mask:none; mask:none; } .ticket-top{ clip-path:none; } .ticket-stub{ display:none; } }
/* Quinconce : la chaleur de l'imparfait, même geste que les étiquettes d'À propos.
   L'ordre de lecture ne change pas. */
.ticket-grid{ align-items:start; grid-template-columns:repeat(6, minmax(0,1fr)); gap:calc(var(--gutter) * 1.6) calc(var(--gutter) * 1.1); padding-bottom:var(--stack-lg); }
/* Éventail inversé : comme des cartes suspendues à un même point. Les cartes du bord
   penchent vers l'extérieur et restent hautes, celle du centre descend (arc ∪).
   rotate/translate séparés de transform (déchirure et soulèvement intacts) ;
   au survol / focus, le ticket se redresse et passe au-dessus. */
.ticket{ grid-column:span 2; position:relative; z-index:1; rotate:var(--tilt, 0deg); translate:0 var(--dy, 0); transform-origin:50% 0;
  transition:transform .35s cubic-bezier(.34,1.4,.64,1), rotate var(--dur) var(--ease), translate var(--dur) var(--ease); }
.ticket:hover, .ticket:focus-visible{ z-index:5; rotate:0deg; }
.ticket-grid > .ticket:nth-child(1){ --tilt:2.6deg; }
.ticket-grid > .ticket:nth-child(2){ --tilt:0deg; --dy:44px; }
.ticket-grid > .ticket:nth-child(3){ --tilt:-2.6deg; }
.ticket-grid > .ticket:nth-child(4){ grid-column:2 / span 2; --tilt:1.6deg; --dy:24px; }
.ticket-grid > .ticket:nth-child(5){ grid-column:4 / span 2; --tilt:-1.6deg; --dy:24px; }
@media (max-width: 1000px){
  .ticket-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .ticket-grid > .ticket:nth-child(n){ grid-column:auto; --dy:0px; }
  .ticket-grid > .ticket:nth-child(2n+1){ --tilt:1.8deg; }
  .ticket-grid > .ticket:nth-child(2n){ --tilt:-1.8deg; --dy:28px; }
  .ticket-grid > .ticket:last-child:nth-child(2n+1){ grid-column:1 / -1; justify-self:center; width:calc(50% - var(--gutter) / 2); --tilt:0deg; }
}
@media (max-width: 640px){
  .ticket-grid{ grid-template-columns:minmax(0,1fr); padding-bottom:0; }
  .ticket-grid > .ticket:nth-child(n){ --dy:0px; }
  .ticket-grid > .ticket:last-child:nth-child(2n+1){ width:auto; justify-self:stretch; } /* sans stretch, le dernier ticket se réduisait à la largeur d'un mot */
  .ticket-grid > .ticket:nth-child(2n+1){ --tilt:1.2deg; }
  .ticket-grid > .ticket:nth-child(2n){ --tilt:-1.2deg; }
}

/* ───────────────────── 8. RESPONSIVE ───────────────────── */
@media (max-width: 900px){
  .split > :first-child, .split > :last-child, .split-rev > :first-child, .split-rev > :last-child{ grid-column:1 / -1; }
  .split > :last-child, .split-rev > :last-child{ margin-top:var(--stack-lg); }
  .split > :first-child > .section-head:last-child, .split-rev > :first-child > .section-head:last-child{ margin-bottom:0; } /* empilé, l'écart titre → texte serait compté deux fois */
}
@media (max-width: 640px){
  /* sommaire des études de cas en 2 colonnes ; le lien externe (on sort du site) sur sa ligne */
  .proj-toc{ display:grid !important; grid-template-columns:repeat(2, max-content); gap:12px 28px !important; justify-content:start; }
  .proj-toc .proj-toc-live{ grid-column:1 / -1; justify-self:start; margin-left:0; }
  /* Sans JavaScript seulement (sinon le menu mobile prend le relais) : la nav reste visible
     sous le logo. Ne pas supprimer : c'est le filet de sécurité. */
  .top:not(.has-menu) .nav{ width:100%; justify-content:space-between; gap:10px; } .top:not(.has-menu) .nav a{ font-size:12px; }
}
@media (max-width: 380px){
  /* Sans JavaScript seulement : on resserre l'espacement, jamais la taille (12 px min.) */
  .top:not(.has-menu) .nav{ gap:6px; flex-wrap:wrap; row-gap:var(--stack-xs); } .top:not(.has-menu) .nav a{ letter-spacing:.04em; }
  .proj-toc{ grid-template-columns:1fr; } /* sommaire des case studies, très étroit : une seule colonne */
}

/* Papier en mode sombre : le vrai papier ne devient pas noir la nuit. Les objets restent
   en papier clair et chaud (ni ocre saturé qui concurrencerait le fil, ni blanc pur qui
   éblouit) ; à l'intérieur, les jetons reprennent leurs valeurs claires. Contrastes sur
   #EFE6D6 : texte 14,1:1 · secondaire 5,8:1 · bleu 7,2:1 · ocre texte 5,0:1 ·
   surpiqûre 2,6:1. */
:root[data-theme="dark"] :is(.ticket, .care-tag, .chap, .lesson, .print, .env, .matieres, .demo-tag){
  --s1:#EFE6D6; --bg:#EFE6D6; --ink:#0A0A0A; --ink2:#1A1A1A; --mid:#5A5755; --rule:#D3C8B5; --rule2:#9C8E75;
  --accent:#2B4C6F; --ochre:#B8862F; --ochre-ink:#7E5B1D; color:var(--ink2); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) :is(.ticket, .care-tag, .chap, .lesson, .print, .env, .matieres, .demo-tag){
    --s1:#EFE6D6; --bg:#EFE6D6; --ink:#0A0A0A; --ink2:#1A1A1A; --mid:#5A5755; --rule:#D3C8B5; --rule2:#9C8E75;
    --accent:#2B4C6F; --ochre:#B8862F; --ochre-ink:#7E5B1D; color:var(--ink2); }
}

/* Capitales : seulement pour les libellés de 1 à 3 mots. Au-delà, casse normale (les
   capitales ralentissent la lecture d'environ 10 % : Nielsen, Tinker). Exceptions voulues, qui imitent de vrais objets :
   la bande « Disponible », l'étiquette de composition, les logos des projets. */
.ticket-label{ text-transform:none; letter-spacing:.01em; font-size:13px; font-weight:600; }
.print figcaption, .print .print-cap{ text-transform:none; letter-spacing:.01em; font-size:13px; font-weight:600; }
.foot-id{ text-transform:none; letter-spacing:0; font-size:var(--t-small); font-weight:600; }
.label-cat{ text-transform:none; letter-spacing:0; font-size:var(--t-small); font-weight:700; }

/* ───────────────────── 9. MOUVEMENT RÉDUIT ───────────────────── */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .top{ transition:none; } /* elle apparaît / disparaît sans glisser */
  .paint-band::before, .band-text{ animation:none; clip-path:none; }
  .roller{ display:none; }
  .sketch, .sketch:hover, .sketch:focus-visible{ rotate:0deg; transition:none; }
  .sketch::before, .sketch .sk-mark{ animation:none !important; }
  .sk-mark, .sk-thread, .action{ transition:none; }

  .ticket, .ticket-stub, .ticket-body{ transition:none; }
  .ticket:hover, .ticket:focus-visible, .ticket:hover .ticket-stub, .ticket:hover .ticket-body, .ticket:focus-visible .ticket-stub, .ticket:focus-visible .ticket-body{ transform:none; }
}

/* ───────────────────── LOGOS CODÉS DES VIGNETTES ─────────────────────
   Placés en fin de fichier : ils doivent passer après les règles des tickets dans la cascade. */

/* Carte : toutes ont la même construction (cadre autour d'une image de ratio fixe,
   bande de texte dessous), aucune n'a de règle de hauteur propre. */
.trav-card {
  background: var(--s1);
  display: flex;
  flex-direction: column;
  padding: var(--space-2) var(--space-2) 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 16px rgba(0, 0, 0, .04);
}
/* Cartes cliquables */
.trav-card[role="link"] {
  cursor: pointer;
}
.trav-card[role="link"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Image figée : même ratio partout ; container-type pour que les logos se dimensionnent
   en cqi (largeur de la carte) et non en vw : la composition grandit ou rétrécit en bloc. */
.trav-card-img {
  aspect-ratio: 4 / 3;
  flex: none;
  background: var(--warm);
  width: 100%;
  overflow: hidden;
  container-type: inline-size;
}

.trav-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* BOD|am : couleurs fixes de la marque, pas les jetons du thème (identique en clair et en sombre) */
.trav-card-img-bodam {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0A0A0A;
}
.logo-bodam-card {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13cqi;
}
.logo-bodam-card .b { font-weight: 900; letter-spacing: .12em; color: #F2F2F0; }
.logo-bodam-card .d { font-weight: 300; color: #9B948D; margin: 0 .08em; }
.logo-bodam-card .a { font-weight: 300; font-style: italic; letter-spacing: -.04em; color: #F2F2F0; }

/* Chargement d'image = le logo : le fil se trace du point jusqu'au nom (le parcours arrive
   au nom). Apparaît après 0,25 s seulement (rien si l'image est en cache) ; mouvement
   réduit : immobile. */
.img-loader{ position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:2; display:flex; align-items:center;
  padding:18px 24px; background:var(--s1); border-radius:4px; box-shadow:var(--elev-1); pointer-events:none;
  opacity:0; animation:il-appear .3s var(--ease) .25s forwards; }
.img-loader .wm-dot{ background:var(--ochre); }
.img-loader .wm-line{ width:35px; height:var(--line-strong); background:var(--ochre); transform-origin:left center;
  animation:il-trace 1.6s var(--ease) .25s infinite; }
@keyframes il-appear{ to{ opacity:1; } }
@keyframes il-trace{ 0%{ transform:scaleX(0); } 55%, 80%{ transform:scaleX(1); } 100%{ transform:scaleX(1); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .img-loader, .img-loader .wm-line{ animation:none; opacity:1; } }
.ds-loader{ position:relative; min-height:96px; margin-top:var(--stack-sm); background:var(--bg); border-radius:4px; }
.ds-loader .img-loader{ animation-delay:0s; }
.ds-loader .img-loader .wm-line{ animation-delay:0s; }

/* Page 404 : le fil qui suit la souris (v2.js). Fixe, sous le contenu, ne capte aucun clic. */
.e404-trail{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.e404 .page-head, .e404 .page-head > *{ position:relative; z-index:1; }

/* Groupe insécable (03/10) : une période (« février à avril 2027 ») ne se coupe jamais au milieu ; la ligne passe en entier à la suivante. */
.nw{ white-space:nowrap; }