/* M'trix — accueil */

:root {
  --ink:    #0C0C0D;
  --paper:  #FFFFFF;
  --smoke:  #F1F0EC;
  --grey:   #72747A;
  --line:   #E2E1DC;

  /* L'accent, en deux valeurs. Une seule teinte, deux usages :
     --orange      les aplats, et le texte posé sur du noir (7,1:1 sur l'encre)
     --orange-txt  le texte posé sur du blanc — l'orange de marque n'y tient
                   que 2,7:1, il fallait l'assombrir pour rester lisible. */
  --orange:     #E8822B;
  --orange-txt: #A94F08;

  /* L'anneau de focus. Il change de valeur selon le fond de la section :
     les blocs noirs le repassent à --orange un peu plus bas. */
  --focus: var(--orange-txt);

  --gut:    clamp(18px, 5vw, 56px);
  --bar-h:  62px;     /* 10px + 42px + 10px — la hauteur réelle de .bar */

  /* Le type : deux tailles démesurées, le reste est du texte courant.
     C'est tout le propos du dessin — ou c'est énorme, ou c'est discret,
     jamais entre les deux. */
  --type-giant:   clamp(52px, 13vw, 168px);
  --type-huge:    clamp(34px, 8vw, 92px);
  --tracking-tight: -.05em;

  /* L'échelle d'espacement. --sp-xl est la grande respiration entre
     sections : c'est elle qui fait tenir les titres géants. */
  --sp-s:  clamp(12px, 2vw, 20px);
  --sp-m:  clamp(22px, 4vw, 40px);
  --sp-l:  clamp(40px, 7vw, 72px);
  --sp-xl: clamp(64px, 11vw, 128px);
}

/* Les sections noires : l'anneau de focus y reprend l'orange de marque. */
.bar, .appel { --focus: var(--orange); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Tout ce qui se clique se voit au clavier. Une seule règle pour tout le
   site : avant, seuls trois éléments sur une trentaine avaient un anneau. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* Le texte que seuls les lecteurs d'écran lisent. Sert à nommer les
   pastilles de coloris, qui ne portaient leur nom que dans un title. */
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ==========================================================
   Arrivée du contenu
   ========================================================== */
.anim {
  animation: montee .85s cubic-bezier(.16,1,.3,1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes montee { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.anim--1 { --i: 0; } .anim--2 { --i: 1; } .anim--3 { --i: 2; } .anim--4 { --i: 3; }
.anim--5 { --i: 4; } .anim--6 { --i: 5; } .anim--7 { --i: 6; }

.ln { display: block; overflow: hidden; }
.ln > span { display: block; }
.ln > span {
  animation: ligne 1s cubic-bezier(.16,1,.3,1) both;
  animation-delay: calc(var(--i, 0) * 90ms + 60ms);
}
@keyframes ligne { from { transform: translateY(105%); } to { transform: none; } }

/* ---------- Barre ---------- */
.bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 10px var(--gut);
  background: var(--ink);
}
.bar__logo {
  display: block; width: clamp(136px, 24vw, 184px); height: 42px;
  overflow: hidden;   /* le logo est un carre avec du noir autour : on recadre sur le texte */
}
.bar__logo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  /* Le JPEG a un fond #000000 pur ; la barre est à #0C0C0D. Sans fondu,
     on voyait le rectangle de recadrage se détacher sur la barre. En
     screen, le noir pur laisse passer le fond et les lettres blanches
     restent intactes — plus de cadre, à toutes les largeurs. */
  mix-blend-mode: screen;
  transition: transform .35s ease;
}
.bar__logo:hover img { transform: scale(1.06); }
.bar__nav { display: flex; gap: clamp(14px, 3vw, 28px); }
.bar__nav a {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: #F4F3F0; text-decoration: none; padding: 4px 0;
  border-bottom: 1px solid transparent; transition: border-color .25s, color .25s;
}
.bar__nav a:hover, .bar__nav a:focus-visible { color: var(--orange); border-bottom-color: var(--orange); }

/* ==========================================================
   La scène : les paires en orbite
   ----------------------------------------------------------
   Les paires sont posées sur un arc. Le curseur les fait
   avancer : la paire de droite, petite et lointaine, vient au
   centre en grand, celle du centre part à gauche en basculant.
   orbite.js calcule les positions, le CSS ne porte que la mise
   en scène.
   ========================================================== */
.orbite { --w: clamp(200px, 26vw, 420px); position: relative; }

.orbite__scene {
  position: relative;
  height: 100svh; min-height: 560px;
  overflow: hidden; isolation: isolate; touch-action: pan-y;
  /* Un blanc pur, sans trame ni décor : les paires et la forme orange
     suffisent à remplir la scène. */
  background: var(--paper);
}

/* La forme orange : elle change de silhouette d'une paire à l'autre, et le
   texte en suit le bord. */
.orbite__forme {
  position: absolute; z-index: 1; left: 50%; bottom: -3%;
  width: min(70vw, 920px); height: auto; overflow: visible;
  transform: translate3d(calc(-50% + var(--px, 0px)), var(--py, 0px), 0);
}
.orbite__bord { fill: var(--orange); }
/* Le texte pend sous le bord : il reste dans la forme, ton sur ton. */
.orbite__texte {
  font-family: 'Archivo Black', 'Archivo', sans-serif; font-size: 34px;
  letter-spacing: .1em; fill: #C45F12; dominant-baseline: hanging;
}

.orbite__paires { position: absolute; inset: 0; z-index: 2; perspective: 1400px; }
.orbite__paire {
  position: absolute; left: 50%; top: 46%;
  width: var(--w); aspect-ratio: 1.6;
  margin-left: calc(var(--w) / -2); margin-top: calc(var(--w) / -3.2);
  will-change: transform, opacity; cursor: pointer;
}
.orbite__paire.est-actif { cursor: default; }
.orbite__paire img {
  width: 100%; height: 100%; object-fit: contain; user-select: none;
  /* drop-shadow suit la silhouette ; box-shadow dessinerait un rectangle. */
  filter: drop-shadow(0 28px 24px rgba(12,12,13,.26));
  animation: plane 5.5s ease-in-out infinite alternate;
  animation-delay: calc(var(--f, 0) * -1.3s);
}
@keyframes plane {
  from { transform: translateY(-7px) rotate(-1.4deg); }
  to   { transform: translateY(7px)  rotate(1.4deg); }
}
/* Sans le script, une seule paire, posée au centre. */
.orbite:not(.est-pret) .orbite__paire:not(.est-actif) { display: none; }

.orbite__bulle {
  position: absolute; z-index: 5; left: calc(50% + var(--w) * .36); top: calc(46% - var(--w) * .2);
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 15px 8px 11px; border-radius: 99px;
  background: var(--paper); color: var(--ink); text-decoration: none;
  font-family: 'Chakra Petch', sans-serif; font-size: 11.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(12,12,13,.12);
  transition: opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.orbite__bulle i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--orange);
  box-shadow: 0 0 0 4px rgba(232,130,43,.22);
}
.orbite__bulle:hover { transform: translateY(-2px); }
.orbite__bulle.est-cache { opacity: 0; transform: translateY(8px); pointer-events: none; }

/* Le bas de la scène est posé sur l'orange : le texte y passe à l'encre
   (7,1:1), le gris n'y tiendrait pas. */
.orbite__bas {
  position: absolute; z-index: 5; left: 0; right: 0; bottom: clamp(18px, 4vh, 40px);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
/* Le nom de la paire, en grand dans la forme : c'est lui qu'on lit
   après les lunettes. */
.orbite__nom {
  margin: 0; min-height: 1em; text-align: center; color: var(--ink);
  font-family: 'Archivo Black', 'Archivo', sans-serif;
  font-size: clamp(24px, 3vw, 42px); line-height: 1; letter-spacing: -.02em;
  text-transform: uppercase;
}
.orbite__aide {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-family: 'Chakra Petch', sans-serif; font-size: 10.5px; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--ink);
  transition: opacity .5s ease;
}
/* Un trait qui va et vient : le geste à faire, sans phrase de plus. */
.orbite__fleche { position: relative; width: 30px; height: 1px; background: rgba(12,12,13,.35); }
.orbite__fleche::after {
  content: ''; position: absolute; top: -2px; left: 0;
  width: 5px; height: 5px; border-radius: 50%; background: var(--ink);
  animation: vaetvient 1.8s ease-in-out infinite alternate;
}
@keyframes vaetvient { from { transform: translateX(0); } to { transform: translateX(25px); } }
.orbite__aide-doigt { display: none; }
@media (hover: none), (pointer: coarse) {
  .orbite__aide-souris { display: none; }
  .orbite__aide-doigt { display: inline; }
}
.orbite__aide.est-vu { opacity: 0; }

/* Le cadre de focus reste à l'intérieur de la scène, sous la barre. */
.orbite__scene:focus-visible { outline-offset: -6px; }

@media (max-width: 720px) {
  .orbite { --w: 66vw; }
  .orbite__forme { width: 150vw; bottom: 6%; }
  .orbite__texte { font-size: 32px; }
  .orbite__paire { top: 50%; }
  /* Sur téléphone, le bas de la forme reçoit le nom, la bulle et
     l'indication, dans cet ordre : plus de grand aplat vide. */
  .orbite__bas { bottom: auto; top: 72%; }
  .orbite__nom { font-size: clamp(26px, 8vw, 34px); }
  .orbite__bulle { left: 50%; top: auto; bottom: clamp(22px, 5vh, 44px); translate: -50% 0; }
}

/* ---------- Pied ---------- */
.foot {
  padding: clamp(40px, 6vw, 64px) var(--gut) 0;
  font-family: 'Chakra Petch', sans-serif;
  color: var(--grey); border-top: 1px solid var(--line);
}
.foot a { text-decoration: none; transition: color .25s ease; }
.foot a:hover { color: var(--orange-txt); }

/* Page utilitaire (commander.php) : juste une ligne simple, pas de colonnes. */
.foot:has(> span:first-child) {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 12px; padding: 22px var(--gut);
  font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
}

/* ---------- Apparition au défilement ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .75s ease, transform .75s cubic-bezier(.16,1,.3,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================
   En-tête de l'accueil : sans bande, posé sur la scène
   ========================================================== */
.tete {
  position: absolute; z-index: 40; top: 0; left: 0; right: 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: clamp(14px, 2.4vh, 24px) var(--gut);
}
/* Le logo au centre, comme une signature. La boîte ne fixe qu'un plafond
   de largeur et de hauteur : un logo large (le mot seul) ou haut (un
   emblème au-dessus du mot) y tient sans être déformé. Le fichier par
   défaut, mtrix-logo-encre.png, est le logo blanc sur noir repassé en
   encre sur fond transparent, apostrophe orange gardée. */
.tete__logo { display: block; justify-self: center; }
.tete__logo img {
  display: block; width: auto; height: auto;
  max-width: clamp(110px, 13vw, 180px); max-height: clamp(36px, 7vh, 72px);
  transition: transform .35s ease;
}
.tete__logo:hover img { transform: scale(1.04); }

.tete__lien, .tete__ecrire {
  font-family: 'Chakra Petch', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink); text-decoration: none;
}
.tete__nav { justify-self: end; display: flex; align-items: center; gap: clamp(16px, 2.6vw, 30px); }
.tete__nav--g { justify-self: start; }
.tete__lien {
  display: inline-flex; align-items: center; min-height: 44px;
  border-bottom: 1px solid transparent; transition: border-color .25s, color .25s;
}
.tete__lien:hover { color: var(--orange-txt); border-bottom-color: var(--orange-txt); }
/* Le contact est le seul bouton plein : 44 px de haut, on vise juste au doigt. */
.tete__ecrire {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border-radius: 99px; background: var(--ink); color: var(--paper);
  transition: background .25s ease;
}
.tete__ecrire:hover { background: #2A2A2F; }

@media (max-width: 720px) {
  .tete { gap: 8px; padding-inline: clamp(12px, 4vw, 20px); }
  .tete__lien[href="#portee"] { display: none; }
  .tete__lien, .tete__ecrire { font-size: 10.5px; letter-spacing: .1em; }
  .tete__ecrire { padding: 0 14px; }
  .tete__logo img { max-width: clamp(88px, 26vw, 120px); max-height: 48px; }
}

/* ---------- L'en-tête sur téléphone ----------
   Quatre éléments ne rentrent pas dans 390 px : « nous écrire » se cassait
   en deux lignes et faisait grossir toute la barre. On garde ce qui fait
   vendre (le rappel de prévente, le contact) et on laisse tomber le lien
   coloris, qui n'est qu'un raccourci vers une section plus bas. */
.bar__nav a { white-space: nowrap; }

@media (max-width: 720px) {
  .bar { gap: 10px; padding-inline: clamp(12px, 4vw, 20px); }
  .bar__logo { width: clamp(104px, 30vw, 136px); height: 34px; }
  .bar__nav { gap: 14px; }
  .bar__nav a { font-size: 11px; letter-spacing: .1em; }
}

@media (max-width: 560px) {
  .bar__nav a[href="#coloris"] { display: none; }
  .bar__logo { width: 96px; height: 30px; }
}

/* ==========================================================
   Sous la scène
   ----------------------------------------------------------
   Tout se calme : la scène est la seule grande animation du
   site. Fond clair qui alterne blanc et gris doux, une seule
   section sombre (l'appel), une seule teinte d'accent, des
   titres d'affiche et beaucoup d'air. Chaque bloc entre une
   fois, en douceur, puis ne bouge plus.
   ========================================================== */
.bloc {
  padding-block: var(--sp-xl);
  padding-inline: max(var(--gut), calc((100% - 1240px) / 2));
}

/* L'étiquette de section : « 01 —— Le modèle ». */
.etiquette {
  display: flex; align-items: center; gap: 12px; margin: 0 0 var(--sp-m);
  font-family: 'Chakra Petch', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--grey);
}
.etiquette span { display: inline-flex; align-items: center; gap: 12px; color: var(--orange-txt); }
.etiquette span::after { content: ''; width: 28px; height: 1px; background: currentColor; }
.etiquette--clair { justify-content: center; color: #A8A9AC; }

.manif__titre, .forces__titre, .vitrine__titre, .portee__titre, .avis-clients__titre, .appel__titre {
  margin: 0; font-family: 'Archivo Black', 'Archivo', sans-serif; text-transform: uppercase;
  line-height: .92; letter-spacing: -.04em; text-wrap: balance;
}

/* ---------- 01 · Le modèle ---------- */
.manif { display: grid; gap: var(--sp-s); }
@media (min-width: 900px) {
  .manif { grid-template-columns: 1fr 3fr; align-items: start; }
  .manif .etiquette { margin-top: 1.4em; }
}
.manif__titre { font-size: clamp(44px, 8.5vw, 128px); }
.manif__titre em { font-style: normal; color: var(--orange-txt); }
.manif__txt {
  margin: var(--sp-m) 0 0; max-width: 40ch;
  font-size: clamp(16px, 1.6vw, 20px); line-height: 1.55; color: #45474C;
}

/* ---------- 02 · La forme ---------- */
.forces { display: grid; gap: var(--sp-l); background: var(--smoke); }
@media (min-width: 900px) { .forces { grid-template-columns: 5fr 6fr; align-items: center; } }
.forces__photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--line); }
.forces__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s cubic-bezier(.16,1,.3,1);
}
.forces__photo:hover img { transform: scale(1.03); }
.forces__titre { margin-bottom: var(--sp-m); font-size: var(--type-huge); }
.forces__liste { list-style: none; margin: 0; padding: 0; }
.force {
  display: grid; grid-template-columns: 52px 1fr; column-gap: 14px;
  padding: 22px 0; border-top: 1px solid rgba(12,12,13,.12);
}
.force:last-child { border-bottom: 1px solid rgba(12,12,13,.12); }
.force__titre {
  margin: 0 0 6px; font-family: 'Archivo Black', 'Archivo', sans-serif;
  font-size: clamp(20px, 2.2vw, 28px); line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase;
}
.force p { margin: 0; max-width: 46ch; color: #45474C; }

/* ---------- 04 · Portée ---------- */
.portee { background: var(--smoke); }
.portee__tete { margin-bottom: var(--sp-l); }
.portee__titre { font-size: var(--type-huge); }
/* La galerie : une bande de photos entières, toutes à la même hauteur.
   Chaque case prend le format exact de sa photo (--r = largeur / hauteur),
   donc rien n'est recadré ; une photo en largeur trop large pour l'écran
   rétrécit en entier plutôt que d'être coupée. La bande déborde à droite
   jusqu'au bord de l'écran : la photo suivante dépasse, et invite à
   glisser. Le défilement reste dans la bande : la page, elle, ne bouge
   jamais de côté. */
.portee { overflow-x: clip; }
.galerie { position: relative; }
.galerie__piste {
  --h: min(112vw, 70vh, 720px);
  --bord: calc((100vw - 100%) / 2);
  display: flex; align-items: center; gap: clamp(10px, 1.4vw, 18px);
  margin: 0 calc(var(--bord) * -1) 0 0; padding: 0 var(--bord) 4px 0; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.galerie__piste::-webkit-scrollbar { display: none; }
.galerie__piste:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; border-radius: 24px; }
@media (min-width: 900px) { .galerie__piste { --h: min(74vh, 760px); } }
.galerie__diapo {
  --l: min(calc(var(--h) * var(--r)), 86vw);
  flex: 0 0 auto; width: var(--l); height: calc(var(--l) / var(--r));
  scroll-snap-align: start; border-radius: 20px; overflow: hidden; background: var(--line);
  transition: opacity .6s ease;
}
.galerie__diapo picture, .galerie__diapo img { display: block; width: 100%; height: 100%; }
.galerie__diapo img { object-fit: cover; user-select: none; -webkit-user-drag: none; }
/* Une fois le script en route, la photo en cours ressort et les autres
   s'effacent un peu : l'œil sait où il en est. */
.galerie.est-pilotee .galerie__diapo:not(.est-active) { opacity: .45; }
.galerie.est-pilotee .galerie__diapo:not(.est-active):hover { opacity: .8; }

/* Les commandes : le numéro de la photo, une barre unique où le chemin
   parcouru est à l'encre et la photo en cours se remplit en orange pendant
   son temps d'affichage, puis précédente, suivante et pause. Une seule
   barre plutôt qu'un point par photo : elle reste lisible à 6 comme à 40
   photos. Boutons de 46 px, la taille d'un doigt. Le script pose --i
   (la photo en cours, à partir de 0) ; --n est le nombre de photos. */
.galerie { --i: 0; }
/* Lue par les lecteurs d'écran quand le visiteur change de photo à la main. */
.galerie__annonce {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.galerie__commandes { display: flex; align-items: center; gap: 10px; margin-top: 24px; }
.galerie__commandes[hidden] { display: none; }
.galerie__progression { flex: 1; display: flex; align-items: center; gap: 18px; min-width: 0; margin-right: 10px; }
.galerie__compte {
  flex: 0 0 auto; font-family: 'Chakra Petch', sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--grey);
}
.galerie__compte b { color: var(--ink); font-weight: 700; }
.galerie__barre { position: relative; flex: 1; height: 3px; border-radius: 3px; background: rgba(12,12,13,.12); overflow: hidden; }
.galerie__fait, .galerie__cours { position: absolute; inset: 0 auto 0 0; height: 100%; }
.galerie__fait {
  width: 100%; background: var(--ink); transform-origin: left center;
  transform: scaleX(calc(var(--i) / var(--n)));
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.galerie__cours {
  width: calc(100% / var(--n)); transform: translateX(calc(var(--i) * 100%));
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.galerie__cours i {
  display: block; width: 100%; height: 100%; background: var(--orange);
  transform: scaleX(1); transform-origin: left center;
}
.galerie__cours i.est-lance { animation: galerieRemplir var(--duree, 5s) linear forwards; }
.galerie.est-en-pause .galerie__cours i { animation-play-state: paused; }
.galerie.est-arretee .galerie__cours i { animation: none; }
@keyframes galerieRemplir { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Sur un téléphone, la barre prend toute la ligne, au-dessus du numéro et
   des boutons : elle garderait sinon à peine 80 px. */
@media (max-width: 560px) {
  .galerie__commandes { flex-wrap: wrap; row-gap: 18px; }
  .galerie__progression { display: contents; }
  .galerie__barre { order: -1; flex: 1 0 100%; }
  .galerie__compte { margin-right: auto; }
}
.galerie__btn {
  flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
  border: 1px solid rgba(12,12,13,.16); border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.galerie__btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.galerie__btn:active { transform: scale(.94); }
.galerie__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.galerie__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.galerie__btn--lecture { margin-left: 6px; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.galerie__btn--lecture:hover { background: #2A2A2F; border-color: #2A2A2F; }
.galerie__btn .galerie__lire { fill: currentColor; stroke: none; display: none; }
.galerie.est-arretee .galerie__btn--lecture .galerie__pause { display: none; }
.galerie.est-arretee .galerie__btn--lecture .galerie__lire { display: block; }

/* ---------- Les avis des clients ----------
   Après les photos portées : la preuve en mots. Fond blanc pour trancher
   avec le gris de la galerie ; les étoiles sont décoratives, la note est
   dite en toutes lettres aux lecteurs d'écran. */
.avis-clients { background: var(--paper); }
.avis-clients__tete {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 12px 24px; margin-bottom: var(--sp-l);
}
.avis-clients__titre { font-size: var(--type-huge); }
.avis-clients__moyenne {
  margin: 0; font-family: 'Chakra Petch', sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--orange-txt);
}
.avis-clients__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(10px, 1.4vw, 18px); grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px)  { .avis-clients__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .avis-clients__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.avis-carte { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 18px; background: var(--smoke); }
.avis-carte__note { margin: 0; font-size: 18px; letter-spacing: 3px; color: var(--orange); }
.avis-carte__texte { margin: 0; font-size: 16px; line-height: 1.55; color: #2A2B2F; }
.avis-carte__qui {
  margin: auto 0 0; font-family: 'Chakra Petch', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--grey);
}

/* ---------- L'appel : la seule section sombre ---------- */
.appel { padding: var(--sp-xl) var(--gut); background: var(--ink); color: #F4F3F0; text-align: center; }
.appel__point {
  width: 8px; height: 8px; border-radius: 50%; background: var(--orange);
  box-shadow: 0 0 0 4px rgba(232,130,43,.22);
}
.appel__titre {
  margin: 0; font-family: 'Archivo Black', 'Archivo', sans-serif; text-transform: uppercase;
  font-size: clamp(44px, 9vw, 140px); line-height: .9; letter-spacing: var(--tracking-tight); text-wrap: balance;
}
.appel__txt { margin: var(--sp-s) auto var(--sp-m); max-width: 38ch; color: #A8A9AC; font-size: clamp(15px, 1.5vw, 18px); }
.appel__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; }
.appel__lien {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: 'Chakra Petch', sans-serif; font-size: 12.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #F4F3F0; text-decoration: none;
  border-bottom: 1px solid rgba(244,243,240,.35); transition: border-color .25s, color .25s;
}
.appel__lien:hover { color: var(--orange); border-bottom-color: var(--orange); }
/* L'encre sur l'orange tient à 7,1:1. */
.appel__btn {
  display: inline-flex; align-items: center; min-height: 56px; padding: 0 30px;
  border-radius: 99px; background: var(--orange); color: var(--ink); text-decoration: none;
  font-family: 'Chakra Petch', sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  transition: transform .25s ease, filter .25s ease;
}
.appel__btn:hover { transform: translateY(-2px); filter: brightness(1.06); }

/* ---------- Pied de page de l'accueil ---------- */
.pied {
  padding-top: clamp(44px, 6vw, 72px);
  padding-inline: max(var(--gut), calc((100% - 1240px) / 2));
  font-family: 'Chakra Petch', sans-serif; color: var(--grey);
}
.pied__haut { display: grid; gap: 34px; padding-bottom: clamp(30px, 5vw, 48px); }
@media (min-width: 640px) { .pied__haut { grid-template-columns: 2fr 1fr 1fr; } }
.pied__marque { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.pied__logo { display: block; width: auto; height: auto; max-width: 120px; max-height: 78px; }
.pied__marque p { margin: 0; font-family: 'Archivo', sans-serif; font-size: 14px; color: var(--grey); }
.pied__col { display: flex; flex-direction: column; align-items: flex-start; }
.pied__titre { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.pied__col a {
  display: inline-flex; align-items: center; min-height: 40px;
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; transition: color .25s ease;
}
.pied__col a:hover { color: var(--orange-txt); }
.pied__bas {
  display: flex; justify-content: space-between; gap: 10px; padding: 18px 0;
  border-top: 1px solid var(--line);
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}


/* ==========================================================
   01 · La vitrine
   ----------------------------------------------------------
   Une narration au défilement : chaque paire est un chapitre,
   avec sa teinte et son bouton. Par défaut (téléphone, sans
   script, mouvement réduit), les chapitres se lisent l'un sous
   l'autre ; sur grand écran, site.js ajoute .est-prete et la
   scène se fixe à gauche pendant que la liste défile à droite.
   ========================================================== */
@property --fa { syntax: '<color>'; inherits: true; initial-value: #E9E9EC; }
@property --fb { syntax: '<color>'; inherits: true; initial-value: #CBCBD1; }

.vitrine { padding-top: var(--sp-xl); }
.vitrine__tete {
  margin-bottom: var(--sp-l);
  padding-inline: max(var(--gut), calc((100% - 1240px) / 2));
}
.vitrine__titre { font-size: var(--type-huge); }

.vitrine__scene { display: none; }
.vitrine__liste {
  list-style: none; margin: 0; display: grid; gap: clamp(36px, 6vw, 64px);
  padding: 0 max(var(--gut), calc((100% - 1240px) / 2)) var(--sp-xl);
}

.chap { display: grid; gap: 20px; }
@media (min-width: 640px) {
  .chap { grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(20px, 4vw, 56px); }
  .chap:nth-child(even) .chap__visuel { order: 2; }
}
.chap__visuel {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: radial-gradient(ellipse 75% 70% at 50% 45%, var(--fa), var(--fb));
}
.chap__visuel img {
  position: absolute; inset: 0; margin: auto; width: 82%; height: 82%; object-fit: contain;
  filter: drop-shadow(0 26px 22px rgba(12,12,13,.25));
  animation: plane 5.5s ease-in-out infinite alternate;
  animation-delay: calc(var(--f, 0) * -1.3s);
}
.chap__modele {
  margin: 0; font-family: 'Chakra Petch', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--grey);
}
.chap__nom {
  margin: 4px 0 10px; font-family: 'Archivo Black', 'Archivo', sans-serif;
  font-size: clamp(32px, 5vw, 64px); line-height: .92; letter-spacing: -.03em; text-transform: uppercase;
}
.chap__desc { margin: 0 0 24px; max-width: 34ch; color: #45474C; }
.chap__btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border-radius: 99px; background: var(--ink); color: var(--paper); text-decoration: none;
  font-family: 'Chakra Petch', sans-serif; font-size: 12.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  transition: background .25s ease, gap .25s ease;
}
.chap__btn:hover { background: #2A2A2F; gap: 16px; }
.chap__btn i { font-style: normal; color: var(--orange); }

/* Grand écran, script prêt : la scène fixée, les chapitres qui défilent. */
@media (min-width: 900px) {
  .vitrine.est-prete .vitrine__corps { display: grid; grid-template-columns: 7fr 5fr; }
  .vitrine.est-prete .vitrine__scene {
    display: block; position: sticky; top: 0; height: 100svh; overflow: hidden;
    container-type: inline-size;
    background: radial-gradient(ellipse 70% 65% at 50% 44%, var(--fa), var(--fb));
    transition: --fa .9s cubic-bezier(.65,0,.35,1), --fb .9s cubic-bezier(.65,0,.35,1);
  }
  .vitrine.est-prete .vitrine__liste {
    gap: 0; padding: 0 var(--gut) 0 clamp(32px, 5vw, 80px);
  }
  .vitrine.est-prete .chap {
    display: flex; flex-direction: column; justify-content: center;
    min-height: 82svh; padding-block: 8svh;
  }
  .vitrine.est-prete .chap__visuel { display: none; }
  .vitrine.est-prete .chap__texte {
    opacity: .26; transform: translateX(14px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1);
  }
  .vitrine.est-prete .chap.est-actif .chap__texte { opacity: 1; transform: none; }
}


/* Le plateau : les paires entrent par le bas en tournant, sortent par le
   haut. --tilt les fait pivoter au fil du chapitre en cours. */
.vitrine__plateau {
  position: absolute; inset: 9% 7% 26%; perspective: 1400px;
  animation: plane 6s ease-in-out infinite alternate;
}
.vitrine__img {
  position: absolute; inset: 0; margin: auto; width: 92%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 40px 34px rgba(12,12,13,.28));
  transform: rotateY(var(--tilt, 0deg)) rotate(calc(var(--tilt, 0deg) * -.3));
  transition: transform .9s cubic-bezier(.65,0,.35,1), opacity .6s ease;
}
.vitrine__img.est-avant { opacity: 0; transform: translate3d(-16%, -28%, 0) rotate(-16deg) scale(.84); }
.vitrine__img.est-apres { opacity: 0; transform: translate3d(16%, 30%, 0) rotate(12deg) scale(.84); }

.vitrine__grand {
  position: absolute; z-index: 2; left: clamp(20px, 3vw, 44px); right: clamp(20px, 3vw, 44px);
  bottom: clamp(18px, 4vh, 40px); margin: 0; overflow: hidden;
  font-family: 'Archivo Black', 'Archivo', sans-serif; font-size: clamp(40px, 9.5cqi, 128px);
  line-height: .95; letter-spacing: -.04em; text-transform: uppercase; color: var(--ink);
  white-space: nowrap;
}
.vitrine__grand span { display: block; }
.vitrine__grand span.est-neuf { animation: grandMonte .75s cubic-bezier(.16,1,.3,1); }
@keyframes grandMonte { from { transform: translateY(105%); } to { transform: none; } }

/* L'indicateur de progression, à droite de la scène. */
.vitrine__piste {
  position: absolute; z-index: 2; right: clamp(20px, 3vw, 44px); top: 50%; translate: 0 -50%;
  width: 2px; height: 34%; background: rgba(12,12,13,.14);
}
.vitrine__piste span {
  display: block; width: 100%; height: 100%; background: var(--ink);
  transform-origin: top; transform: scaleY(var(--prog, 0));
}

/* ==========================================================
   Les animations du bas de page
   ----------------------------------------------------------
   Toutes partent une fois, quand le bloc arrive à l'écran.
   Sans script ou en mouvement réduit, tout est déjà en place.
   ========================================================== */

/* Les titres courts montent mot par mot depuis un cache. */
.est-decoupe .mot {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-block: .14em; margin-block: -.14em;
}
.est-decoupe .mot > span {
  display: inline-block; transform: translateY(112%);
  transition: transform 1s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--k, 0) * 80ms);
}
.est-decoupe.est-vu .mot > span { transform: none; }

/* Les filets des points forts se tracent de gauche à droite. */
.force { position: relative; border-top: 0; }
.force::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(12,12,13,.12); transform-origin: left;
}
.force.reveal::before { transform: scaleX(0); transition: transform 1.1s cubic-bezier(.65,0,.35,1) .1s; }
.force.reveal.is-in::before { transform: scaleX(1); }

/* La photo du buste glisse un peu moins vite que la page. */
.forces__photo img { transform: translateY(var(--para, 0px)) scale(1.1); transition: none; }
.forces__photo:hover img { transform: translateY(var(--para, 0px)) scale(1.13); }

/* Portée : la bande de photos glisse depuis la droite, une seule fois. */
.galerie.reveal { opacity: 0; transform: translateX(48px); transition: opacity .9s ease, transform 1.1s cubic-bezier(.16,1,.3,1); }
.galerie.reveal.is-in { opacity: 1; transform: none; }

/* Le logo chromé : un reflet passe sur le métal, de temps en temps. */
.appel__marque {
  position: relative; display: block; width: clamp(150px, 20vw, 260px); margin: 0 auto var(--sp-l);
}
.appel__marque picture { display: block; }
.appel__marque img { display: block; width: 100%; height: auto; }
.appel__marque::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.9) 50%, transparent 62%) 160% 0 / 260% 100% no-repeat;
  -webkit-mask: url(logo-chrome.webp) center / contain no-repeat;
          mask: url(logo-chrome.webp) center / contain no-repeat;
  animation: refletChrome 5s ease-in-out infinite;
}
@keyframes refletChrome { 0%, 55% { background-position: 160% 0; } 100% { background-position: -60% 0; } }

/* La vitrine laisse assez de place sous le dernier chapitre pour que la
   scène reste fixée jusqu'à lui, sans vide blanc. */
@media (min-width: 900px) {
  .vitrine.est-prete .vitrine__liste { padding-bottom: 14svh; }
}

/* La MtrixShades dans la vitrine : la scène passe au noir, une lumière
   tombe d'en haut, les textes passent au clair. */
.vitrine__scene::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 38% 62% at 50% -6%, rgba(255,255,255,.34), rgba(255,255,255,.06) 55%, transparent 75%);
  transition: opacity .9s ease;
}
.vitrine__scene.est-vedette::before { opacity: 1; }
.vitrine__grand { transition: color .6s ease; }
.vitrine__scene.est-vedette .vitrine__grand { color: #F4F3F0; }
.vitrine__scene.est-vedette .vitrine__piste { background: rgba(244,243,240,.18); }
.vitrine__scene.est-vedette .vitrine__piste span { background: #F4F3F0; }
.vitrine__plateau { z-index: 1; }
/* Au téléphone, le visuel de la MtrixShades garde le même éclairage. */
.chap[data-vedette] .chap__visuel::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 40% 70% at 50% -10%, rgba(255,255,255,.32), transparent 70%);
}

/* ==========================================================
   Sous le projecteur : la MtrixShades
   ----------------------------------------------------------
   La salle est noire. Quand la section arrive (site.js pose
   .est-allume), le faisceau apparaît, la visière s'éclaire et
   son reflet se dessine sur le sol brillant. Le faisceau balaie
   ensuite lentement ; la visière suit le curseur.
   ========================================================== */
.projo {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100svh; padding: var(--sp-xl) var(--gut);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #F4F3F0;
  background:
    radial-gradient(ellipse 70% 40% at 50% 100%, #1C1E22, transparent 70%),
    #08080A;
  --focus: var(--orange);
}
.projo__faisceau {
  position: absolute; z-index: -1; left: 50%; top: -12%;
  width: min(1200px, 160vw); height: 118%; translate: -50% 0;
  background: conic-gradient(from 180deg at 50% 0%,
    transparent 158deg, rgba(255,255,255,.10) 170deg, rgba(255,255,255,.24) 180deg,
    rgba(255,255,255,.10) 190deg, transparent 202deg);
  filter: blur(14px); transform-origin: 50% 0; opacity: 0;
  transition: opacity 1.8s ease;
}
.projo.est-allume .projo__faisceau { opacity: 1; animation: balaye 10s ease-in-out 1.8s infinite alternate; }
@keyframes balaye { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }

.projo__etiquette { margin-bottom: var(--sp-s); }
/* Le nom en chrome, comme le logo. */
.projo__titre {
  margin: 0; font-family: 'Archivo Black', 'Archivo', sans-serif; text-transform: uppercase;
  font-size: clamp(52px, 12vw, 196px); line-height: .9; letter-spacing: -.045em;
  background: linear-gradient(180deg, #FFFFFF 18%, #B9BDC4 55%, #6E737B 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: .12; filter: blur(6px);
  transition: opacity 1.6s ease .2s, filter 1.6s ease .2s;
}
.projo.est-allume .projo__titre { opacity: 1; filter: none; }

.projo__scene {
  position: relative; width: min(640px, 88vw); margin: clamp(-60px, -5vw, -24px) auto clamp(40px, 7vh, 80px);
  perspective: 1200px;
}
.projo__objet { position: relative; animation: plane 6s ease-in-out infinite alternate; }
.projo__img, .projo__reflet {
  display: block; width: 100%; height: auto; user-select: none;
  transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg));
  transition: transform .7s cubic-bezier(.16,1,.3,1);
}
.projo__img {
  position: relative; z-index: 1;
  filter: drop-shadow(0 34px 40px rgba(0,0,0,.7)) brightness(.18);
  transition: transform .7s cubic-bezier(.16,1,.3,1), filter 1.8s ease .25s;
}
.projo.est-allume .projo__img { filter: drop-shadow(0 34px 40px rgba(0,0,0,.7)) brightness(1.08) contrast(1.05); }
/* Le reflet sur le sol : la visière retournée, qui s'efface vers le bas. */
.projo__reflet {
  position: absolute; left: 0; top: 96%;
  transform: scaleY(-1) rotateY(var(--ry, 0deg));
  opacity: 0; filter: blur(1.5px);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.55), transparent 62%);
          mask-image: linear-gradient(to top, rgba(0,0,0,.55), transparent 62%);
  transition: opacity 1.6s ease .9s, transform .7s cubic-bezier(.16,1,.3,1);
}
.projo.est-allume .projo__reflet { opacity: .5; }

.projo__txt { max-width: 38ch; margin: 0 auto var(--sp-m); color: #A8A9AC; font-size: clamp(15px, 1.5vw, 18px); }
/* Le bouton en métal brossé, pour aller avec le chrome. */
.projo__btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 30px;
  border-radius: 99px; color: var(--ink); text-decoration: none;
  background: linear-gradient(180deg, #FAFAFA, #BFC3C9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 30px rgba(0,0,0,.45);
  font-family: 'Chakra Petch', sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  transition: transform .25s ease, gap .25s ease;
}
.projo__btn:hover { transform: translateY(-2px); gap: 16px; }
.projo__btn i { font-style: normal; color: var(--orange-txt); }

/* ==========================================================
   Les titres de section
   ----------------------------------------------------------
   Pas de numéro, pas d'étiquette : le titre suffit. Centré,
   énorme, un mot en orange que souligne un trait de marqueur
   tracé à la main, après la montée des mots.
   ========================================================== */
.vitrine__tete, .portee__tete { text-align: center; }
.manif { display: block; text-align: center; }
.manif__titre, .forces__titre, .vitrine__titre, .portee__titre, .avis-clients__titre, .appel__titre {
  margin-inline: auto; max-width: 16ch; text-align: center;
  font-size: clamp(40px, 8.4vw, 136px); line-height: .9; letter-spacing: -.045em;
}
.manif__titre em, .forces__titre em, .vitrine__titre em, .portee__titre em, .avis-clients__titre em { font-style: normal; color: var(--orange-txt); }
.appel__titre em { font-style: normal; color: var(--orange); }
.manif__txt { margin-inline: auto; }

.forces { display: block; }
.forces__titre { margin-bottom: var(--sp-l); }
.forces__grille { display: grid; gap: var(--sp-l); }
@media (min-width: 900px) { .forces__grille { grid-template-columns: 5fr 6fr; align-items: center; } }
.force { grid-template-columns: 22px 1fr; }
.force__point {
  grid-row: span 2; width: 8px; height: 8px; margin-top: 11px;
  border-radius: 50%; background: var(--orange);
}

/* Le trait de marqueur, sous le dernier mot mis en avant. */
.mot { position: relative; }
.trait {
  position: absolute; left: -3%; bottom: .03em; width: 106%; height: .2em;
  overflow: visible; pointer-events: none;
}
.trait path {
  fill: none; stroke: var(--orange); stroke-width: 6; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .9s cubic-bezier(.65,0,.35,1) .75s;
}
.est-vu .trait path { stroke-dashoffset: 0; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim, .ln > span { animation: none !important; opacity: 1 !important; transform: none !important; }
  .orbite__paire img, .orbite__fleche::after,
  .chap__visuel img, .vitrine__plateau, .appel__marque::after { animation: none !important; }
  .orbite__bulle, .chap__btn, .galerie__diapo, .galerie__btn, .forces__photo img,
  .appel__btn, .tete__logo img, .bar__logo img { transition: none; }
  .reveal, .galerie.reveal { opacity: 1; transform: none; transition: none; }
  .force.reveal::before { transform: none; }
  .projo__faisceau { opacity: 1; animation: none !important; }
  .projo__titre { opacity: 1; filter: none; transition: none; }
  .projo__img { filter: drop-shadow(0 34px 40px rgba(0,0,0,.7)) brightness(1.08); transition: none; }
  .projo__reflet { opacity: .5; transition: none; }
  .projo__objet { animation: none !important; }
}