/* Accueil — reproduction du visuel E validé, sans réinterprétation. */
:root:not([data-theme="light"]) body:has(.accueil-hero){
  background:linear-gradient(var(--bg),var(--bg)),var(--bg);
  background-blend-mode:multiply;
}
/* L'en-tête de l'accueil est devenu l'en-tête du site : ses règles ont migré
   dans style.css le 10 août, sans le verrou [data-nav-active=accueil] qui les
   réservait à cette page. Il ne reste rien à régler ici. */

.accueil-hero{
  /* Le héros termine exactement le premier écran sous l'en-tête de 73 px.
     Sa scène conserve son échelle propre sur les écrans peu hauts ; sous
     1100 px, le repli plus bas rend au contenu sa hauteur naturelle. */
  --echelle:1;
  --accueil-position:34%;
  --accueil-couture-position:37.7%;
  position:relative;
  isolation:isolate;
  overflow:clip;
  contain:paint;
  min-height:calc(100svh - 73px);
  display:grid;
  grid-template-columns:minmax(0,28fr) minmax(0,72fr);
  align-items:center;
  gap:clamp(8px,1.4vw,22px);
  padding:22px clamp(28px,4vw,62px) 16px;
  background:var(--bg);
}
:root:not([data-theme="light"]) .accueil-hero{
  background:linear-gradient(var(--bg),var(--bg)),var(--bg);
  background-blend-mode:multiply;
}
.accueil-hero::before{
  content:'';
  position:absolute;
  z-index:1;
  left:0;
  top:0;
  width:48%;
  height:72%;
  pointer-events:none;
  background:radial-gradient(ellipse 86% 82% at 5% 34%,var(--bg) 0 72%,transparent 100%);
}

.accueil-hero__copie{
  position:relative;
  z-index:4;
  align-self:center;
  width:540px;
  max-width:none;
  margin-top:0;
}

.accueil-hero__copie .repere{display:none}
/* Toute la typographie du bandeau — titre ET sous-titre — vient de la règle
   partagée de style.css. Ne restent ici que la couleur, la mise en bloc des
   trois lignes du visuel E et la largeur de la colonne. */
.accueil-hero h1 span,.accueil-hero h1 mark{display:block}
/* La couleur et le filtre du mot surligné sont partagés (style.css). */
.accueil-hero .lede{max-width:390px;margin-bottom:22px}
/* Taille, hauteur, flèche, ombre et saturation du bouton : règle partagée des
   héros, dans style.css. Ne reste ici que la largeur, qui est celle de la
   colonne du visuel E et n'appartient donc qu'à l'accueil. */
.accueil-hero .bouton{min-width:352px;justify-content:space-between}
.accueil-hero__faits{display:none}

.accueil-flux{
  position:absolute;
  z-index:0;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:1;
  filter:brightness(1.45) saturate(1.2);
  mask-image:linear-gradient(90deg,transparent 20%,black 58%);
}

.accueil-preuve{
  --accueil-position:34%;
  position:relative;
  z-index:3;
  align-self:center;
  min-width:0;
  min-height:506px;
  /* origin en haut : la scène rétrécit vers le bas, jamais vers le centre,
     sinon elle décollerait du bord supérieur du héros en se réduisant. */
  transform:scale(var(--echelle));
  transform-origin:top center;
}
/* ⚠️ LA REPRODUCTION DOM EST DEVENUE LA SEULE REPRÉSENTATION — 12 août 2026.
   Ces trois lignes faisaient basculer la scène entre une CAPTURE MATRICIELLE du
   thème sombre (au repos) et la reproduction en jetons (dès qu'on bougeait le
   curseur). Combinées aux trois règles conditionnelles supprimées plus bas, un
   visiteur en thème sombre voyait une photo, un visiteur en thème clair voyait
   la reproduction : les deux thèmes ne montraient pas le même objet. C'est la
   cause de fond du défaut signalé par Raphaël.
   La capture ne servait plus que dans un cas : thème sombre, au-dessus de
   1100 px, au repos. La reproduction servait déjà partout ailleurs — sous
   1100 px, pendant la comparaison, et en thème clair. On garde celle qui est
   faite de jetons : elle se vérifie, elle se corrige, et une capture ne peut
   par construction suivre aucun thème. */

/* Ces trois règles étaient conditionnées à :root[data-theme="light"]. La
   condition est retirée : ce qu'elles décrivent vaut désormais dans les deux
   thèmes, ce qui EST l'objectif. Le repère matriciel disparaît partout — son
   fond noir est cuit dans le fichier, les découpes sont en rgb24 sans couche
   alpha, il ne pouvait donc se fondre dans aucun thème clair (bloc noir signalé
   le 10 août). Les appareils, eux, sont visibles en permanence. */
.accueil-preuve .accueil-appareil{opacity:1}
.accueil-preuve .accueil-couture{opacity:1}
.accueil-preuve .accueil-appareil{transition:opacity .22s ease}

.accueil-etapes{
  position:absolute;
  z-index:8;
  left:12.2%;
  right:12.8%;
  top:3px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  list-style:none;
  margin:0;
  padding:0;
}
.accueil-etapes li{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  color:var(--muted);
  font:600 10px var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.accueil-etapes b{color:var(--amber);font-size:17px}
.accueil-etapes li:nth-child(n+2) b{color:var(--cyan)}
.accueil-etapes li::after{
  content:'';
  position:absolute;
  top:58px;
  width:1px;
  height:45px;
  background:linear-gradient(var(--cyan),transparent);
  box-shadow:0 0 12px color-mix(in srgb,var(--cyan) 65%,transparent);
}
.accueil-etapes li:first-child::after{
  background:linear-gradient(var(--amber),transparent);
  box-shadow:0 0 12px color-mix(in srgb,var(--amber) 65%,transparent);
}

.accueil-appareil{
  position:absolute;
  background:var(--surface);
  /* ⚠️ color, et ce n'est pas un doublon de la classe « nuit » posée sur ces
     trois éléments dans le balisage. « nuit » repose les JETONS ; mais `color`
     s'HÉRITE, et un descendant qui ne le redéclare pas garde la valeur déjà
     calculée sur <body> avec le --text de la page. Résultat de la première
     tentative : les fonds étaient gelés, les textes non — 15 éléments
     basculaient encore. Redéclarer ici force la résolution sur le jeton gelé,
     et tout le sous-arbre en hérite. */
  color:var(--text);
  border:1px solid var(--border2);
  box-shadow:0 28px 70px color-mix(in srgb,var(--bg) 78%,transparent),0 0 28px color-mix(in srgb,var(--cyan) 10%,transparent);
}
.accueil-appareil--principal{
  z-index:5;
  left:12.2%;
  right:12.8%;
  top:76px;
  height:430px;
  overflow:hidden;
  border-radius:15px;
  transform:perspective(1200px) rotateX(.8deg) rotateY(-1.2deg);
  transform-origin:center bottom;
}
.accueil-navigateur__barre{
  position:absolute;
  z-index:12;
  inset:0 0 auto;
  height:33px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 12px;
  background:color-mix(in srgb,var(--raised) 92%,transparent);
  border-bottom:1px solid var(--border);
}
.accueil-navigateur__barre i{width:6px;height:6px;border-radius:50%;background:var(--faint);opacity:.45}
.accueil-navigateur__barre span{margin:auto;color:var(--muted);font:500 8px var(--mono)}

.accueil-site{position:absolute;inset:33px 0 0;overflow:hidden}
.accueil-site--avant{
  z-index:2;
  clip-path:inset(0 calc(100% - var(--accueil-position)) 0 0);
  background:color-mix(in srgb,var(--text) 66%,var(--surface));
  color:var(--bg);
  filter:saturate(.62);
}
.accueil-site--avant .ancien-menu,
.accueil-site--avant .ancien-colonnes span{background:color-mix(in srgb,var(--text) 58%,var(--surface));color:var(--bg);border-color:color-mix(in srgb,var(--bg) 34%,transparent)}
.accueil-site--apres{
  z-index:3;
  clip-path:inset(0 0 0 var(--accueil-position));
  background:var(--bg);
  color:var(--text);
}
/* ⚠️ CES SIX RÈGLES NE S'APPLIQUAIENT PAS — 12 août 2026, défaut silencieux.
   Elles écrivaient `font: … var(--body)`. Or --body N'EST DÉFINI NULLE PART :
   ni dans style.css, ni dans tokens.json. En CSS, une variable indéfinie dans
   un raccourci rend la déclaration entière « invalide au moment du calcul »,
   et la propriété retombe sur la valeur héritée. Les six textes du faux ancien
   site s'affichaient donc à 17 px — la taille du corps de page — au lieu des
   5 à 9 px écrits ici. Aucune erreur nulle part : le navigateur applique la
   règle du langage, le fichier a l'air correct, et le rendu est faux.
   Trouvé en cherchant pourquoi Raphaël ne voyait pas un texte pourtant publié.

   Les tailles ci-dessous ne rétablissent PAS les 5 à 9 px d'origine. À cette
   taille le faux site imite bien une capture d'écran, mais plus personne ne
   peut le LIRE — or son rôle est de faire comprendre en un regard qu'il est
   obsolète. Un texte qu'on ne peut pas lire ne porte aucun message. Les
   valeurs retenues sont donc choisies pour être lues, en gardant la
   hiérarchie : le titre domine, le menu reste une texture. */
.ancien-marque{position:absolute;left:14px;top:12px;display:flex;flex-direction:column;color:var(--text);font:600 15px var(--titre)}
.ancien-marque small{font:500 10px var(--titre)}
.ancien-menu{position:absolute;left:12px;right:12px;top:39px;padding:7px;background:var(--raised);border:1px solid var(--border);font:500 8px var(--titre);white-space:nowrap}
.ancien-bienvenue{position:absolute;left:14px;top:74px;z-index:2;margin:0;font:600 17px var(--titre)}
.ancien-photo{position:absolute;left:12px;right:12px;top:67px;height:122px;display:block;overflow:hidden;border:1px solid var(--border)}
.ancien-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(.45) brightness(.9);opacity:.78}
/* ⚠️ Les colonnes s'arrêtent au-dessus de la note de bas de page, quelle que
   soit la hauteur de la vue. Une hauteur figée à 105 px était calée sur la vue
   de bureau : à 375 px la vue ne fait plus que 275 px, les colonnes finissaient
   à 307 et recouvraient « dernière mise à jour ». On décrit la RELATION — du
   haut du bloc au bas de la vue — plutôt qu'une valeur qui n'est vraie qu'à une
   largeur. */
.ancien-colonnes{position:absolute;left:12px;right:12px;top:202px;bottom:26px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* Pas de min-height : la piste de grille étire déjà les colonnes du haut du bloc
   au bas de la vue. Un minimum en pixels ne ferait que se battre contre elle et
   redéborder sur la note, ce qui était exactement le défaut. */
.ancien-colonnes span{padding:8px;background:var(--raised);border:1px solid var(--border);font:600 11px var(--titre)}
.accueil-site--avant>small{position:absolute;left:14px;bottom:10px;font:500 10px var(--mono)}

.nouveau-nav{
  position:absolute;
  z-index:4;
  left:calc(var(--accueil-position) + 27px);
  right:14px;
  top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font:600 6px var(--mono);
}
.nouveau-nav span{color:var(--muted);white-space:nowrap}
/* ⚠️ UNE COLONNE QUI COULE, PAS TROIS BLOCS POSÉS À DES « TOP » FIXES.
   Le titre est fluide : sa hauteur dépend du nombre de lignes, donc de la
   langue et de la largeur. Les trois éléments étaient posés en absolu à 66,
   144 et 190 px — valeurs justes pour un titre de deux lignes. À 375 px il en
   fait quatre, finit à 152 px, et recouvrait le texte posé à 128. Signalé le
   10 août, capture à l'appui.
   Une colonne en flux ne peut pas se chevaucher elle-même : c'est la classe
   entière de défaut qui disparaît, pas cette occurrence. */
.nouveau-colonne{
  position:absolute;
  z-index:5;
  left:calc(var(--accueil-position) + 27px);
  top:66px;
  right:38%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}
.nouveau-titre{
  max-width:10.5ch;
  margin:0;
  color:var(--text);
  font:400 28px/1.04 Georgia,'Times New Roman',serif;
  letter-spacing:-.03em;
}
.nouveau-texte{
  max-width:28ch;
  margin:0;
  color:var(--muted);
  font-size:8px;
  line-height:1.45;
}
.nouveau-action{
  display:inline-flex;
  align-items:center;
  min-height:29px;
  padding:0 12px;
  border-radius:5px;
  background:var(--green);
  color:var(--on-green);
  font:600 7px var(--mono);
}
.nouveau-image{position:absolute;z-index:1;right:0;top:33px;width:34%;height:220px;display:block;overflow:hidden}
.nouveau-image::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--bg),transparent 55%),linear-gradient(0deg,var(--bg),transparent 42%)}
.nouveau-image img{width:100%;height:100%;object-fit:cover;object-position:65% center;filter:saturate(.82) contrast(1.05) brightness(.82)}
.nouveau-blocs{position:absolute;z-index:6;left:calc(var(--accueil-position) + 27px);right:14px;bottom:14px;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border)}
.nouveau-blocs span{min-height:116px;display:flex;align-items:center;gap:8px;padding:12px;color:var(--muted);border-right:1px solid var(--border);font:500 7px var(--mono)}
.nouveau-blocs span:last-child{border-right:0}
.nouveau-blocs b{color:var(--green)}

.accueil-appareil--ancien-mobile{
  z-index:7;
  left:18px;
  bottom:16px;
  width:98px;
  height:178px;
  overflow:hidden;
  padding:20px 8px 9px;
  border-radius:18px;
  transform:perspective(900px) rotateY(8deg) rotateZ(-2deg);
  color:var(--bg);
  background:color-mix(in srgb,var(--text) 45%,var(--surface));
}
.accueil-appareil__ecouteur{position:absolute;left:50%;top:8px;width:28px;height:3px;translate:-50% 0;border-radius:99px;background:var(--border2)}
.ancien-mobile__menu{margin-bottom:16px;padding:3px;border:1px solid var(--border);font:500 8px var(--mono);text-align:center}
.accueil-appareil--ancien-mobile b{display:block;margin-bottom:10px;font:600 11px var(--titre)}
.accueil-appareil--ancien-mobile>i{display:block;height:19px;margin:4px 0;border:1px solid color-mix(in srgb,var(--bg) 35%,transparent);background:color-mix(in srgb,var(--text) 52%,var(--surface))}

.accueil-appareil--moderne-mobile{
  z-index:9;
  right:14%;
  bottom:-6px;
  width:150px;
  height:228px;
  overflow:hidden;
  padding:22px 10px 10px;
  border-radius:20px;
  transform:perspective(900px) rotateY(-7deg) rotateZ(1.5deg);
}
.moderne-mobile__nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px;font:600 7px var(--mono)}
.moderne-mobile__nav i{width:13px;height:1px;background:var(--muted)}
.accueil-appareil--moderne-mobile strong{position:relative;z-index:3;display:block;max-width:8ch;font:400 17px/1.04 Georgia,'Times New Roman',serif}
.accueil-appareil--moderne-mobile>span{position:relative;z-index:3;display:block;margin-top:8px;color:var(--muted);font-size:7px}
.accueil-appareil--moderne-mobile em{position:relative;z-index:3;display:block;margin-top:13px;padding:8px 4px;border-radius:4px;background:var(--green);color:var(--on-green);font:600 6px var(--mono);font-style:normal;text-align:center}
.moderne-mobile__image{position:absolute;z-index:1;inset:48px 0 auto 38%;height:92px;display:block;opacity:.68}
.moderne-mobile__image::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--surface),transparent 45%),linear-gradient(0deg,var(--surface),transparent 48%)}
.moderne-mobile__image img{width:100%;height:100%;object-fit:cover}
.accueil-appareil--moderne-mobile>i{position:relative;z-index:3;display:inline-block;width:38px;height:32px;margin:16px 4px 0 0;border:1px solid var(--border);background:color-mix(in srgb,var(--raised) 74%,transparent)}

.accueil-couture{
  position:absolute;
  z-index:10;
  left:var(--accueil-couture-position);
  top:-20px;
  width:2px;
  height:550px;
  background:linear-gradient(transparent,var(--amber) 9%,var(--amber) 90%,transparent);
  box-shadow:0 0 10px var(--amber),0 0 30px color-mix(in srgb,var(--amber) 78%,transparent),0 0 64px color-mix(in srgb,var(--amber) 48%,transparent);
  transform:rotate(10deg);
  transform-origin:50% 50%;
  pointer-events:none;
}
.accueil-couture i{position:absolute;left:50%;top:44%;width:8px;height:8px;translate:-50% -50%;border-radius:50%;background:var(--text);box-shadow:0 0 8px var(--text),0 0 22px var(--amber),0 0 46px var(--amber)}

.accueil-annotations{position:absolute;z-index:11;inset:0;list-style:none;margin:0;padding:0;pointer-events:none}
.accueil-annotation{position:absolute;right:30px;color:var(--muted);font:500 10px var(--mono)}
.accueil-annotation::before{content:'';display:inline-block;width:43px;height:1px;margin:0 9px 3px 0;background:var(--cyan);box-shadow:0 0 9px var(--cyan)}
.accueil-annotation:nth-child(1){top:24%}
.accueil-annotation:nth-child(2){top:38%}
.accueil-annotation:nth-child(3){top:55%}
.accueil-annotation:nth-child(4){top:70%}
.accueil-comparaison{position:absolute;z-index:12;left:16%;bottom:-52px;width:34%;min-height:calc(44px / var(--echelle));margin:0;accent-color:var(--amber);cursor:ew-resize}
.accueil-scene__ia{position:absolute;z-index:12;right:9%;bottom:2px;color:var(--faint);font:500 7px var(--mono);text-transform:uppercase;letter-spacing:.05em}

:root:not([data-theme="light"]) .accueil-fondateur{background:color-mix(in srgb,var(--surface) 38%,transparent)}
.accueil-fondateur-section > .accueil-fondateur{grid-column:1/-1}
.accueil-fondateur{display:grid;grid-template-columns:110px 1fr auto;gap:clamp(24px,4vw,52px);align-items:center;margin:22px clamp(20px,3vw,46px) 0;padding:28px;border:1px solid var(--border2);border-radius:11px}
.accueil-fondateur__signe{width:100px;height:100px;display:grid;place-items:center;border:1px solid var(--border2);border-radius:50%;font-size:32px;font-weight:700;background:radial-gradient(circle,color-mix(in srgb,var(--amber) 17%,transparent),transparent 68%)}
.accueil-fondateur h2{font-size:clamp(1.6rem,3vw,2.8rem);margin:5px 0;max-width:17ch}
.accueil-fondateur p:last-child{color:var(--muted);margin:0;max-width:62ch}

.accueil-preuves h2{max-width:17ch}
.accueil-preuves__grille{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.accueil-preuves article{padding:30px;border-right:1px solid var(--border)}
.accueil-preuves article:last-child{border-right:0}
.accueil-preuves article>span{color:var(--amber);font:600 11px var(--mono)}
.accueil-preuves h3{margin:28px 0 10px}
.accueil-preuves p{color:var(--muted);font-size:14px}
.accueil-preuves a{color:var(--amber);font-weight:650;text-decoration:none}
.accueil-preuves a{display:inline-flex;align-items:center}
.accueil-preuves a{min-height:44px}

.accueil-afflux-live__invitation{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:clamp(24px,4vw,46px);
  border:1px solid var(--border);
  border-radius:16px;
  background:linear-gradient(145deg,var(--raised),color-mix(in srgb,var(--green) 7%,var(--surface)));
}
.accueil-afflux-live__invitation h3{max-width:18ch;margin:12px 0;font-size:clamp(1.45rem,2.4vw,2.25rem)}
.accueil-afflux-live__invitation>p:not(.repere){max-width:44ch;margin:0 0 24px;color:var(--muted);line-height:1.65}
.accueil-afflux-live__invitation .bouton{align-self:flex-start}
.accueil-afflux-live>noscript{display:block;margin-top:16px;color:var(--muted);font-size:13px}

.accueil-appel{padding-bottom:clamp(90px,11vw,160px)}

/* Une composition 3D réelle : chaque appareil garde son propre plan. */
.accueil-preuve{perspective:1300px;transform-style:preserve-3d;margin-bottom:94px}
.accueil-preuve .accueil-appareil{animation-play-state:var(--scene-play,running)}
.accueil-preuve.accueil-preuve--deployee .accueil-appareil--principal{animation:none;transform:rotateY(-18deg) rotateX(7deg) translateZ(-50px)}
.accueil-preuve.accueil-preuve--deployee .accueil-appareil--ancien-mobile{animation:none;transform:translateX(-18px) rotateY(25deg) rotateZ(-8deg)}
.accueil-preuve.accueil-preuve--deployee .accueil-appareil--moderne-mobile{animation:none;transform:translate(28px,24px) rotateY(-22deg) rotateZ(5deg) translateZ(65px)}
.accueil-preuve .accueil-appareil{transition:transform .8s cubic-bezier(.16,1,.3,1)}
.accueil-scene__commandes{position:absolute;z-index:12;left:16%;right:13%;bottom:-100px;display:flex;align-items:center;justify-content:space-between;gap:20px;font:500 calc(11px / var(--echelle)) var(--mono);color:var(--muted)}
.accueil-scene__commandes button{min-height:calc(44px / var(--echelle));padding:8px 14px;display:flex;align-items:center;gap:18px;border:1px solid var(--border2);border-radius:8px;background:var(--surface);color:var(--text);font:600 calc(12px / var(--echelle)) var(--mono);cursor:pointer}
.accueil-scene__commandes button[aria-pressed=true]{background:var(--amber);color:var(--on-amber);border-color:var(--amber)}
.accueil-scene__commandes span{max-width:26ch}
.portfolio-scene__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding:30px 0 12px;perspective:1600px}
.portfolio-piece{min-width:0;position:relative;display:flex;flex-direction:column;text-decoration:none;border-bottom:1px solid var(--border2);color:var(--text);transform-style:preserve-3d}
.portfolio-piece figure{position:relative;aspect-ratio:3/4;margin:0;overflow:hidden;border-radius:12px;background:var(--surface)}
.portfolio-piece picture,.portfolio-piece img{width:100%;height:100%;display:block;object-fit:cover}
.portfolio-piece figure::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 70%,var(--bg));pointer-events:none}
.portfolio-piece figcaption{position:absolute;z-index:1;left:14px;right:14px;bottom:14px;color:var(--text);background:var(--bg);padding:6px 8px;font:500 9px/1.5 var(--mono)}
.portfolio-piece__title{padding:24px 0;transform:translateZ(22px)}
.portfolio-piece__title>span{font:500 11px var(--mono);color:var(--muted)}
.portfolio-piece h3{margin:10px 0;font-size:clamp(1.3rem,2.3vw,2rem)}
.portfolio-piece p{margin:0 0 20px;color:var(--muted)}
.portfolio-piece b{display:flex;align-items:center;justify-content:space-between;min-height:44px;color:var(--amber);font-size:14px}
.portfolio-piece--artisan{margin-top:48px}
.portfolio-piece--clinique{margin-top:96px}
@media(prefers-reduced-motion:no-preference){
  .portfolio-piece{transform:rotateX(var(--depth-x,0deg)) rotateY(var(--depth-y,0deg));transition:transform .35s ease-out}
  .portfolio-piece img{transition:transform .8s cubic-bezier(.16,1,.3,1)}
  .portfolio-piece:hover img,.portfolio-piece:focus-visible img{transform:scale(1.06)}
  @supports(animation-timeline:view()){
    .portfolio-piece figure{animation:portfolio-emergence linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
  }
}
@keyframes portfolio-emergence{from{clip-path:inset(10% 0 round 12px);transform:translateY(35px) rotateX(8deg)}to{clip-path:inset(0 round 12px);transform:none}}

@media(max-width:1100px){
  /* Le repli de l'en-tête a migré dans style.css avec le reste de sa règle. */
  .accueil-hero{grid-template-columns:1fr;min-height:auto;padding-top:50px}
  .accueil-hero__copie{width:auto;max-width:720px;margin-top:0}
  
  .accueil-preuve{min-height:520px;margin-top:30px}
  .accueil-preuve .accueil-appareil{opacity:1!important}
  .accueil-preuve .accueil-couture{opacity:1}
  .accueil-appareil--principal{left:6%;right:7%}
  .accueil-couture{left:var(--accueil-position)}
  .accueil-annotations{display:none}
}

@media(max-width:720px){
  .accueil-fondateur{margin-inline:0}

  /* Second repli de l'en-tête, parti dans style.css avec le premier. */
  .accueil-hero{padding:42px 20px 24px}
  
  .accueil-preuve{min-height:430px;margin-top:18px}
  .accueil-etapes{left:1%;right:1%}
  .accueil-etapes li{font-size:8px}
  .accueil-etapes li::after{top:52px;height:30px}
  .accueil-appareil--principal{left:0;right:0;top:74px;height:310px;transform:none}
  .accueil-appareil--ancien-mobile{display:none}
  .accueil-appareil--moderne-mobile{right:0;bottom:4px;width:86px;height:180px;padding:20px 7px 7px}
  .accueil-appareil--moderne-mobile strong{font-size:10px}
  .accueil-couture{top:49px;height:335px}
  .nouveau-nav span,.nouveau-blocs{display:none}
  .nouveau-colonne{top:58px;right:34%;gap:7px}
  .nouveau-titre{font-size:1.28rem}
  .nouveau-texte{max-width:21ch;font-size:7px}
  .nouveau-image{width:56%;height:190px}
  .ancien-menu{font-size:8px}
  .accueil-comparaison{left:0;bottom:-32px;width:42%}
  .accueil-scene__commandes{left:0;right:0;bottom:-78px}
  .portfolio-scene__grid{grid-template-columns:1fr;gap:40px}
  .portfolio-piece--artisan,.portfolio-piece--clinique{margin-top:0}
  .portfolio-piece figure{aspect-ratio:4/3}
  .accueil-scene__ia{right:0;font-size:6px}
  
  
  
  .accueil-fondateur{grid-template-columns:72px 1fr}
  .accueil-fondateur__signe{width:68px;height:68px;font-size:22px}
  .accueil-fondateur .bouton-secondaire{grid-column:1/-1}
  .accueil-preuves__grille{grid-template-columns:1fr}
  .accueil-preuves article{border-right:0;border-bottom:1px solid var(--border)}
}

@media(prefers-reduced-motion:no-preference){
  .accueil-scene--animee .accueil-etapes li{
    animation:accueil-etape 760ms cubic-bezier(.2,.75,.25,1) var(--accueil-delai,0ms) both;
  }
  .accueil-scene--animee .accueil-appareil--principal{
    animation:accueil-appareil-principal 7.5s ease-in-out infinite;
  }
  .accueil-scene--animee .accueil-appareil--ancien-mobile{
    animation:accueil-appareil-ancien 8.4s ease-in-out -2.2s infinite;
  }
  .accueil-scene--animee .accueil-appareil--moderne-mobile{
    animation:accueil-appareil-moderne 7.9s ease-in-out -4s infinite;
  }
  .accueil-scene--animee .accueil-couture{
    animation:accueil-couture-respire 3.6s ease-in-out infinite;
  }
}

@keyframes accueil-etape{
  0%{filter:brightness(.72);transform:translateY(3px)}
  55%{filter:brightness(1.75);transform:translateY(0)}
  100%{filter:brightness(1);transform:translateY(0)}
}
@keyframes accueil-appareil-principal{
  0%,100%{transform:perspective(1200px) translate(var(--accueil-parallaxe-x,0),var(--accueil-parallaxe-y,0)) rotateX(.8deg) rotateY(-1.2deg)}
  50%{transform:perspective(1200px) translate(var(--accueil-parallaxe-x,0),calc(var(--accueil-parallaxe-y,0px) - 3px)) rotateX(.8deg) rotateY(-1.2deg)}
}
@keyframes accueil-appareil-ancien{
  0%,100%{transform:perspective(900px) translate(var(--accueil-parallaxe-x,0),var(--accueil-parallaxe-y,0)) rotateY(8deg) rotateZ(-2deg)}
  50%{transform:perspective(900px) translate(var(--accueil-parallaxe-x,0),calc(var(--accueil-parallaxe-y,0px) - 3px)) rotateY(8deg) rotateZ(-2deg)}
}
@keyframes accueil-appareil-moderne{
  0%,100%{transform:perspective(900px) translate(var(--accueil-parallaxe-x,0),var(--accueil-parallaxe-y,0)) rotateY(-7deg) rotateZ(1.5deg)}
  50%{transform:perspective(900px) translate(var(--accueil-parallaxe-x,0),calc(var(--accueil-parallaxe-y,0px) - 4px)) rotateY(-7deg) rotateZ(1.5deg)}
}
@keyframes accueil-couture-respire{
  0%,100%{filter:brightness(.9)}
  50%{filter:brightness(1.55)}
}

@media(prefers-reduced-motion:reduce){
  .accueil-flux,
  .accueil-appareil,
  .accueil-couture,
  .accueil-etapes li{animation:none!important;transition:none!important;transform:none!important}
}

/* Les paliers ci-dessous gardent la scène principale lisible sur les écrans
   d’ordinateur peu hauts. Sous 1100 px la page s’empile et se lit en défilant. */

/* ⚠️ SOUS 740 px, RÉDUIRE LA SCÈNE NE SUFFIT PLUS. La colonne de texte du héros
   — titre, phrase, bouton — mesure 366 px et devient alors plus haute que la
   scène : c'est ELLE qui commande la hauteur, et l'échelle n'y peut plus rien.
   On abaisse donc aussi le cran du titre. C'est le seul endroit du site où la
   taille du titre dépend de la hauteur de fenêtre, et c'est assumé : sur un
   écran court, un titre de 72 px coûte le bandeau qu'on veut rendre visible. */
@media (min-width:1101px) and (max-height:760px){
  .accueil-hero{--t-hero-page:clamp(2.4rem,.9rem + 2.6vw,3.4rem)}
  .accueil-hero .lede{margin-bottom:14px}
  .accueil-hero__copie{margin-top:22px}
}
@media (min-width:1101px) and (max-height:880px){ .accueil-hero{--echelle:.99} }
@media (min-width:1101px) and (max-height:860px){ .accueil-hero{--echelle:.95} }
@media (min-width:1101px) and (max-height:840px){ .accueil-hero{--echelle:.91} }
@media (min-width:1101px) and (max-height:820px){ .accueil-hero{--echelle:.87} }
@media (min-width:1101px) and (max-height:800px){ .accueil-hero{--echelle:.83} }
@media (min-width:1101px) and (max-height:780px){ .accueil-hero{--echelle:.79} }
@media (min-width:1101px) and (max-height:760px){ .accueil-hero{--echelle:.75} }
@media (min-width:1101px) and (max-height:740px){ .accueil-hero{--echelle:.71} }
@media (min-width:1101px) and (max-height:720px){ .accueil-hero{--echelle:.67} }
@media (min-width:1101px) and (max-height:700px){ .accueil-hero{--echelle:.63} }
/* ⚠️ LE PLANCHER, ET IL EST ASSUMÉ. Sous ~685 px de fenêtre, ce n'est plus la
   scène qui commande la hauteur du héros mais sa COLONNE DE TEXTE — titre,
   phrase, bouton — même une fois le titre abaissé. Réduire encore reviendrait à
   rendre l'accroche illisible pour gagner un bandeau : le mauvais échange.
   Mesuré : les deux bandeaux tiennent entièrement de 685 à 1100 px de hauteur,
   ce qui couvre tout portable avec barre de favoris. En dessous, le parcours
   est partiellement visible — et un bloc coupé invite au défilement, il ne le
   décourage pas. */