/*
  Motion Design (site A) — style.css — version 3 (refonte du 19/09/2026)
  ------------------------------------------------------------------------------------------------
  Pourquoi une refonte : ouverte dans le vrai Chrome à la taille d'écran de l'utilisateur, la version 2 se
  chevauchait, laissait des écrans vides et empilait trop de décors. Cette version applique ce qui a marché
  sur les sites de rétro-ingénierie : une grille stricte, une échelle typographique franche, des cartes de
  verre sur un teal profond, une seule couleur d'action (jaune-vert), des sections qui tiennent dans l'écran.
  Direction artistique inchangée (images d'inspiration du client) : obscurité teal, verre dépoli, lumière
  franche, un seul accent chaud. L'ancienne feuille est archivée : archives/motion-design-pro-v2-19-09/.

  Contenu : jetons · polices · base · composants · en-tête · accueil (ouverture, film, savoir-faire, projets,
  chiffres, processus, capot, témoignages, offres, guide, portail) · pages intérieures (éditorial, tableaux,
  questions, estimateur, formulaire) · pied de page. État final lisible sans JavaScript.
*/

/* ============================================================================================
   Polices (OFL, auto-hébergées) : Mona Sans (titres), Geist (texte), Geist Mono (repères)
   ============================================================================================ */

@font-face {
  font-family: "Mona Sans";
  src: url("../assets/fonts/display.woff2?v=ad0fc5a90a") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/text.woff2?v=702c16b557") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../assets/fonts/mono.woff2?v=55ac1fa2f6") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================================================
   Jetons
   ============================================================================================ */

:root {
  /* Teal profond (fonds) — rampe d'une seule teinte */
  --fond-0: #01100f;
  --fond-1: #021419;
  --fond-2: #04212a;
  --fond-3: #073039;
  --fond-4: #0b3f4a;

  /* Verre et filets */
  --verre: rgba(170, 232, 240, 0.055);
  --verre-fort: rgba(170, 232, 240, 0.1);
  --filet: rgba(170, 232, 240, 0.13);
  --filet-fort: rgba(170, 232, 240, 0.24);

  /* Texte */
  --texte: #eef9fa;
  --texte-doux: rgba(222, 243, 246, 0.76);
  --texte-pale: rgba(222, 243, 246, 0.52);

  /* Lumière et action */
  --teal: #12b5c9;
  --teal-clair: #74dce8;
  --vif: #e4e135;
  --vif-clair: #eeec6a;
  --encre-vif: #121606;
  /* Section claire « Nos derniers travaux » (28/09/2026) : blanc verté vers gris verté, encre vert sombre.
     Contrastes : --encre 15,6:1, --encre-douce 7,3:1, --teal-fonce 4,8:1 sur le plus foncé des deux fonds. */
  --clair-0: #f1f7f5;
  --clair-1: #e2ece8;
  --encre: #0a2227;
  --encre-douce: #3f5559;
  --teal-fonce: #0b6f7c;
  --filet-sombre: rgba(10, 34, 39, 0.14);
  /* Fond de « Ce qui sort du studio » (28/09/2026) : un peu plus clair que les fonds sombres du site */
  --sarcelle-0: #0e4550;
  --sarcelle-1: #135866;
  /* Héros en dégradé sarcelle (28/09/2026) : milieu plus clair, haut et bords plus foncés */
  --sarcelle-clair: #1d6d7b;
  /* Section « Commandez la vôtre » (28/09/2026) : gris verté, trait blanc épais entre les cases */
  --gris-verte: #d5e3de;
  /* Blanc cassé (28/09/2026) : les textes blancs sur les fonds très sombres des cartes de tarifs ne « flashent » plus */
  --blanc-casse: #e4ebe7;
  --trait-mosaique: clamp(8px, 0.75vw, 14px);
  /* Arrondi au pixel (navigateurs récents) : traits entre les cases et bordures haut et bas exactement égaux */
  --trait-mosaique: round(nearest, clamp(8px, 0.75vw, 14px), 1px);
  --sarcelle-fonce: #0a3640;

  /* Typographie */
  --f-titre: "Mona Sans", "Segoe UI", system-ui, sans-serif;
  --f-texte: "Geist", "Segoe UI", system-ui, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Mise en page */
  --largeur: 1240px;
  --gouttiere: clamp(20px, 4.2vw, 64px);
  /* Marge du haut de la barre d'en-tête ; colonne du sommaire du guide et écart avec la lecture. La barre se
     décale de la colonne + l'écart dans la zone du guide (même calcul que la grille : alignement exact). */
  --entete-haut: 14px;
  --sommaire-largeur: 292px;
  --guide-ecart: clamp(32px, 5vw, 80px);
  --decalage-guide: calc(var(--sommaire-largeur) + var(--guide-ecart));
  --espace-section: clamp(64px, 7vw, 108px);
  --r-petit: 12px;
  --r-carte: 22px;
  --r-grand: 30px;
  --r-pilule: 999px;

  /* Mouvement */
  --ease-sortie: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-doux: cubic-bezier(0.4, 0, 0.2, 1);
  /* « sine.out » de GSAP : l'entrée de l'anneau d'aeline (« Ce qui sort du studio », 30/09/2026) */
  --ease-sinus-sortie: cubic-bezier(0.61, 1, 0.88, 1);

  /* Plans d'empilement */
  --z-deco: 0;
  --z-contenu: 1;
  --z-entete: 60;
  --z-whatsapp: 65;
  --z-menu: 70;

  color-scheme: dark;
}

/* ============================================================================================
   Base
   ============================================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--fond-1);
  scroll-padding-top: 96px;
  /* Mise en ligne (01/10/2026) : aucun défilement horizontal sur téléphone. Avec « clip » ici, celui de body s'applique à
     body lui-même : les lettres des titres qui arrivent de la droite et la lueur du héros sont coupées au bord de la
     page au lieu de l'élargir (« clip » ne crée pas de zone de défilement : les éléments collants restent collants). */
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--f-texte);
  font-size: clamp(16px, 0.95rem + 0.2vw, 18px);
  line-height: 1.6;
  color: var(--texte);
  background: var(--fond-1);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

strong {
  font-weight: 600;
  color: #fff;
}

code,
.mono {
  font-family: var(--f-mono);
}

:focus-visible {
  outline: 2px solid var(--vif);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  background: var(--vif);
  color: var(--encre-vif);
}

.visuellement-cache,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lien-evitement,
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: var(--r-pilule);
  background: var(--vif);
  color: var(--encre-vif);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease-sortie);
}

.lien-evitement:focus-visible,
.skip-link:focus-visible {
  transform: none;
}

/* ============================================================================================
   Composants communs
   ============================================================================================ */

.conteneur,
.container {
  width: min(100% - 2 * var(--gouttiere), var(--largeur));
  margin-inline: auto;
}

.surtitre,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-clair);
}

/* Plus de tiret devant les surtitres, sur tout le site (demande de l'utilisateur, 25/09/2026). */

/* Titres de section */
.tete-section {
  max-width: 820px;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.tete-section h2,
.guide__tete h2 {
  font-family: var(--f-titre);
  font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.75rem);
  font-weight: 650;
  font-stretch: 104%;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.tete-section__intro {
  margin-top: 20px;
  max-width: 640px;
  font-size: 1.08rem;
  color: var(--texte-doux);
}

.tete-section__intro a {
  color: var(--vif);
  text-underline-offset: 3px;
}

.tete-section--centre {
  margin-inline: auto;
  text-align: center;
}

.tete-section--centre .surtitre {
  justify-content: center;
}

.tete-section--centre .tete-section__intro {
  margin-inline: auto;
}

.tete-section--ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
  max-width: none;
}

.tete-section--ligne .surtitre {
  flex-basis: 100%;
  margin-bottom: 0;
}

/* Boutons (pilules) : icône de sens à gauche, flèche à droite */
.bouton,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--r-pilule);
  font-family: var(--f-texte);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.25s var(--ease-doux),
    border-color 0.25s var(--ease-doux),
    color 0.25s var(--ease-doux),
    transform 0.25s var(--ease-sortie),
    box-shadow 0.25s var(--ease-doux);
}

.bouton__icone,
.btn-icon-left {
  width: 16px;
  height: 16px;
  flex: none;
  fill: currentColor;
}

.bouton__fleche,
.btn-icon-right {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s var(--ease-sortie);
}

@media (hover: hover) and (pointer: fine) {
  .bouton:hover .bouton__fleche,
  .btn:hover .btn-icon-right {
    transform: translateX(3px);
  }
}

.bouton--vif,
.btn-primary {
  background: var(--vif);
  color: var(--encre-vif);
  box-shadow: 0 10px 30px -12px rgba(228, 225, 53, 0.55);
}

@media (hover: hover) and (pointer: fine) {
  .bouton--vif:hover,
  .btn-primary:hover {
    background: var(--vif-clair);
    box-shadow: 0 14px 34px -12px rgba(228, 225, 53, 0.7);
  }
}

.bouton--verre,
.btn-secondary {
  border-color: var(--filet-fort);
  background: rgba(170, 232, 240, 0.07);
  color: var(--texte);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

@media (hover: hover) and (pointer: fine) {
  .bouton--verre:hover,
  .btn-secondary:hover {
    border-color: rgba(170, 232, 240, 0.4);
    background: rgba(170, 232, 240, 0.13);
  }
}

.bouton--petit {
  min-height: 42px;
  padding: 0 18px;
  font-size: 0.9rem;
}

.bouton--grand,
.btn-lg {
  min-height: 58px;
  padding: 0 30px;
  font-size: 1.05rem;
}

.bouton--plein {
  width: 100%;
}

.concept-notice {
  font-size: 0.8rem;
  color: var(--texte-pale);
}

.concept-notice a {
  color: inherit;
}

.note-illustration {
  margin-top: 22px;
  font-size: 0.82rem;
  color: var(--texte-pale);
}

/* Sections : un rythme vertical unique */
main > section {
  position: relative;
  padding-block: var(--espace-section);
}

/* ============================================================================================
   En-tête : barre de verre fixe, marque, navigation, actions, menu complet
   ============================================================================================ */

.entete {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-entete);
  padding: var(--entete-haut) var(--gouttiere);
  /* Toujours visible pendant le défilement (exigence de l'utilisateur, 25/09/2026) */
}

.entete__barre {
  display: flex;
  align-items: center;
  gap: 28px;
  /* Même largeur que les sections de la page (demande de l'utilisateur, 25/09/2026) */
  max-width: var(--largeur);
  margin-inline: auto;
  /* Même marge intérieure à gauche et à droite : l'icône ronde et le bouton du menu, de même taille,
     répondent aux deux bouts arrondis de la barre */
  padding: 10px;
  border: 1px solid var(--filet);
  border-radius: var(--r-pilule);
  background: rgba(3, 26, 32, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.6);
}

/* Logo (25/09/2026) : disque jaune où une balle trace le « m » puis se pose en point final, en boucle,
   nom en deux mots (« Motion Design »), slogan animé dessous. Le disque répond aux bouts arrondis de la
   barre. Toutes les tailles suivent la taille de police du lien : un seul réglage pour l'en-tête, le
   pied et le téléphone. */
.entete__marque {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.62em;
  font-size: 1.05rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}

.marque__tuile {
  flex: none;
  /* 2,5 em : 42 px dans la barre, la taille du bouton du menu */
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  background: var(--vif);
  box-shadow: 0 0.35em 0.9em -0.45em rgba(228, 225, 53, 0.55);
  overflow: hidden;
}

.marque__dessin {
  display: block;
  width: 100%;
  height: 100%;
}

.marque__trace {
  fill: none;
  stroke: var(--encre-vif);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Longueur du tracé ramenée à 100 (pathLength) : l'animation le dessine de 100 à 0 */
  stroke-dasharray: 100;
}

.marque__balle {
  fill: var(--encre-vif);
}

/* Crayon posé au-dessus du point (demande de l'utilisateur, 25/09/2026) : il se dessine une fois la balle
   posée (animations.css) ; sans animation, il est simplement là */
.marque__crayon {
  fill: none;
  stroke: var(--encre-vif);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
}

.marque__balle {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.marque__texte {
  display: flex;
  flex-direction: column;
  gap: 0.34em;
}

.marque__nom {
  font-family: var(--f-titre);
  font-size: 1.12em;
  font-weight: 750;
  font-stretch: 104%;
  letter-spacing: -0.01em;
}

/* Slogan : la police du nom, en fin (demande de l'utilisateur, 25/09/2026), couleur sarcelle claire */
.marque__slogan {
  font-family: var(--f-titre);
  font-size: 0.7em;
  font-weight: 380;
  font-stretch: 104%;
  letter-spacing: 0.015em;
  color: var(--teal-clair);
}

.marque__slogan span {
  display: inline-block;
}

.entete__nav {
  flex: 1;
}

.entete__nav ul {
  display: flex;
  gap: 6px;
}

.entete__nav a {
  display: block;
  padding: 9px 14px;
  border-radius: var(--r-pilule);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--texte-doux);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .entete__nav a:hover {
    color: #fff;
    background: rgba(170, 232, 240, 0.08);
  }
}

.entete__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.entete__menu {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--filet-fort);
  border-radius: 50%;
  background: rgba(170, 232, 240, 0.06);
}

.entete__menu-trait,
.entete__menu-trait::before,
.entete__menu-trait::after {
  display: block;
  width: 16px;
  height: 1.6px;
  border-radius: 2px;
  background: var(--texte);
  transition: transform 0.3s var(--ease-sortie), background-color 0.2s ease;
}

.entete__menu-trait {
  position: relative;
}

.entete__menu-trait::before,
.entete__menu-trait::after {
  content: "";
  position: absolute;
  left: 0;
}

.entete__menu-trait::before {
  top: -5px;
}

.entete__menu-trait::after {
  top: 5px;
}

.entete__menu[aria-expanded="true"] .entete__menu-trait {
  background: transparent;
}

.entete__menu[aria-expanded="true"] .entete__menu-trait::before {
  transform: translateY(5px) rotate(45deg);
}

.entete__menu[aria-expanded="true"] .entete__menu-trait::after {
  transform: translateY(-5px) rotate(-45deg);
}

/* Menu complet (toutes les pages) */
.menu:not([hidden]) {
  display: block;
  max-width: 1320px;
  margin: 10px auto 0;
  padding: 30px 32px;
  border: 1px solid var(--filet);
  border-radius: var(--r-grand);
  background: rgba(3, 26, 32, 0.94);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}

.menu__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr);
  gap: 28px;
}

.menu__titre {
  margin-bottom: 12px;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-pale);
}

.menu ul {
  display: grid;
  gap: 4px;
}

.menu ul a {
  display: block;
  padding: 6px 0;
  font-size: 0.98rem;
  color: var(--texte-doux);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .menu ul a:hover {
    color: var(--vif);
  }
}

.menu__action {
  display: grid;
  align-content: start;
  gap: 10px;
}

/* ============================================================================================
   ACCUEIL · Ouverture — titre à gauche, trois films finis à droite (le produit d'abord)
   ============================================================================================ */

.ouverture {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding-block: 120px 70px !important;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 60% 70% at 78% 38%, rgba(18, 181, 201, 0.22) 0%, rgba(18, 181, 201, 0) 62%),
    radial-gradient(ellipse 70% 55% at 10% 100%, rgba(11, 63, 74, 0.9) 0%, rgba(4, 33, 42, 0) 70%),
    linear-gradient(180deg, var(--fond-1) 0%, var(--fond-2) 100%);
}

/* Lumière franche venue d'en haut à droite (comme sur les images d'inspiration) */
.ouverture__lumiere {
  position: absolute;
  top: -20%;
  right: -10%;
  z-index: var(--z-deco);
  width: 70vw;
  height: 80vh;
  background: radial-gradient(ellipse at 60% 30%, rgba(116, 220, 232, 0.16) 0%, rgba(116, 220, 232, 0) 60%);
  pointer-events: none;
}

.ouverture__grille {
  position: relative;
  z-index: var(--z-contenu);
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}

.ouverture__titre {
  font-family: var(--f-titre);
  /* Titres H1 réduits de 10 % (demande de l'utilisateur, 25/09/2026), puis encore d'environ 15 % avec le titre
     raccourci à « Agence Motion Design qui crée vos vidéos. » (28/09/2026) : deux lignes sur un écran d'ordinateur. */
  font-size: clamp(2rem, 1rem + 2.75vw, 3.8rem);
  font-size: min(clamp(2rem, 1rem + 2.75vw, 3.8rem), 7.2svh);
  font-weight: 700;
  font-stretch: 106%;
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.ouverture__accent {
  color: var(--vif);
}

.ouverture__chapeau {
  max-width: 560px;
  margin-top: clamp(18px, 2.6svh, 28px);
  font-size: clamp(1rem, 0.9rem + 0.35vw, 1.15rem);
  line-height: 1.6;
  color: var(--texte-doux);
}

.ouverture__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(22px, 3.4svh, 36px);
}

.ouverture__preuves {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: clamp(18px, 2.8svh, 30px);
  font-size: 0.86rem;
  color: var(--texte-doux);
}

.ouverture__preuves li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ouverture__preuves li::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.3 2.3 2.2 4.7-5' fill='none' stroke='%23e4e135' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat,
    rgba(228, 225, 53, 0.12);
}

/* Vitrine : trois films finis qui jouent dès le premier affichage (règle P1).
   Composition en grille : aucun cadre n'en recouvre un autre, chaque étiquette reste lisible
   (le montage superposé de la v3 masquait deux étiquettes sur trois — vu dans Chrome le 20/09/2026). */
.vitrine {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(10px, 1.1vw, 16px);
  width: 100%;
  margin-inline: auto;
}

.vitrine__film {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 7px;
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-grand);
  background: rgba(170, 232, 240, 0.07);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8);
}

.vitrine__film video {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--r-grand) - 7px);
  object-fit: cover;
  background: var(--fond-3);
}

.vitrine__film figcaption {
  position: absolute;
  left: 18px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 28px);
  padding: 6px 11px;
  border-radius: var(--r-pilule);
  /* Fond plein, sans flou d'arrière-plan : un flou posé sur une vidéo qui tourne se recalcule à chaque
     image (trace du 21/09/2026). */
  background: rgba(2, 20, 25, 0.84);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
}

.point-lecture {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vif);
  box-shadow: 0 0 0 4px rgba(228, 225, 53, 0.18);
}

/* Bento (27/09/2026, demande de l'utilisateur) : deux films 16:9 superposés à gauche, un film 9:16 à droite qui
   tient les deux rangées. La colonne de droite vaut 0,69 de celle de gauche : avec le cadre de 7 px, le film vertical
   garde son 9:16 à 2 % près (image recadrée au centre, jamais déformée). */
.vitrine {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.69fr);
}

.vitrine__film--gauche-haut {
  grid-area: 1 / 1 / 2 / 2;
}

.vitrine__film--gauche-bas {
  grid-area: 2 / 1 / 3 / 2;
}

.vitrine__film--droite {
  grid-area: 1 / 2 / 3 / 3;
}

.vitrine__film--gauche-haut video,
.vitrine__film--gauche-bas video {
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Vidéo de vente dans le héros (30/09/2026, demande de l'utilisateur) : un seul grand film 16:9 dans le même cadre de verre
   arrondi que les films de l'ancienne vitrine (marge intérieure, bordure claire, fond translucide), « Voir la vidéo » au
   centre. Le bento des trois films est passé dans la section de la vidéo de vente (classe vitrine--vente). */
.heros-vente {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
}

.heros-vente__film {
  padding: 9px;
}

.heros-vente__film video {
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--r-grand) - 9px);
}

.heros-vente__lecture {
  --coquille: 7px;
}

/* ============================================================================================
   Boutons de lecture des films (27/09/2026, demande de l'utilisateur) — forme reprise de sa page iraao : un
   bouton plein, rond ou en gélule (« Voir la vidéo »), logé dans une coquille de verre blanc qui lui donne sa
   marge et le détache de l'image, et une onde qui bat (animations.css). Couleurs du site : cœur jaune, encre
   sombre. La coquille est un aplat peint, sans flou d'arrière-plan (un flou posé sur une vidéo qui tourne se
   recalcule à chaque image). Au survol, rien ne bouge : seule la lumière change. Tout le cadre du film est
   cliquable (data-film-zone, js/main.js). Places : au centre des films du héros (la convention d'une vidéo qui
   joue), en bas à droite des cartes des réalisations.
   ============================================================================================ */
.vitrine__film,
.client__media {
  cursor: pointer;
}

.lecture-coquille {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  padding: var(--coquille, 8px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-pilule);
  background-color: rgba(255, 255, 255, 0.2);
  background-image: linear-gradient(158deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 18px 40px -14px rgba(0, 0, 0, 0.72);
  transition: background-color 0.35s var(--ease-doux), border-color 0.35s var(--ease-doux);
}

.lecture {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--r-pilule);
  background: linear-gradient(155deg, #f4f283 0%, var(--vif) 46%, #cfcc22 100%);
  color: var(--encre-vif);
  cursor: pointer;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.6);
  transition: box-shadow 0.35s var(--ease-doux);
}

.lecture__icone {
  flex: none;
  fill: currentColor;
}

/* Rond : le triangle arrondi porte déjà son décalage vers la droite (son centre optique, pas sa boîte). */
.lecture--ronde {
  width: var(--lecture-rond, 52px);
  height: var(--lecture-rond, 52px);
  padding: 0;
}

.lecture--ronde .lecture__icone {
  width: 50%;
  height: 50%;
}

/* Gélule : le triangle, plus gros que le libellé, est le signal qu'on reconnaît d'un coup d'œil. */
.lecture--gelule {
  gap: 8px;
  padding: 9px 18px 9px 12px;
  font-family: var(--f-titre);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.lecture--gelule .lecture__icone {
  width: 20px;
  height: 20px;
}

.lecture__onde {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .lecture-coquille:hover,
  .vitrine__film:hover .lecture-coquille,
  .client__media:hover .lecture-coquille {
    border-color: #fff;
    background-color: rgba(255, 255, 255, 0.3);
  }
}

.lecture-coquille:focus-within {
  border-color: #fff;
  background-color: rgba(255, 255, 255, 0.3);
}

@media (hover: hover) and (pointer: fine) {
  .vitrine__film:hover .lecture,
  .client__media:hover .lecture {
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.6), 0 0 26px rgba(228, 225, 53, 0.55);
  }
}

.lecture:focus-visible {
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.6), 0 0 26px rgba(228, 225, 53, 0.55);
}

.lecture:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.vitrine__lecture {
  --coquille: 7px;
  --lecture-rond: 46px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.client__lecture {
  --coquille: 6px;
  right: 12px;
  bottom: 12px;
}

/* « Cinq démonstrations » et « Projets » (28/09/2026) : chaque carte montre un vrai film, son nom en haut à gauche et son
   bouton de lecture — gélule en bas à droite sur un film large, rond au centre sur un cadre étroit (vertical, carré). */
.carte__media,
.projet__media,
.vente__media {
  position: relative;
  cursor: pointer;
}

.media-lecture {
  --coquille: 6px;
  right: 12px;
  bottom: 12px;
}

.media-lecture--centre {
  --lecture-rond: 44px;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  transform: translate(-50%, -50%);
}

.media-nom {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  max-width: calc(100% - 24px);
  overflow: hidden;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: var(--r-pilule);
  background: rgba(2, 20, 25, 0.74);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #fff;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .carte__media:hover .lecture-coquille,
  .projet__media:hover .lecture-coquille,
  .vente__media:hover .lecture-coquille {
    border-color: #fff;
    background-color: rgba(255, 255, 255, 0.3);
  }
}

@media (hover: hover) and (pointer: fine) {
  .carte__media:hover .lecture,
  .projet__media:hover .lecture,
  .vente__media:hover .lecture {
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.6), 0 0 26px rgba(228, 225, 53, 0.55);
  }
}

/* ============================================================================================
   ACCUEIL · Film au défilement (js/scrub.js) et éclatement des six films
   ============================================================================================ */

main > section.cine {
  padding-block: 0;
  background: var(--fond-0);
}

.cine__piste {
  position: relative;
  height: 100vh;
}

/* Avec JavaScript, la piste a sa hauteur définitive dès le premier affichage (scrub.js la recalcule ensuite,
   à l'identique) : quand elle n'arrivait qu'au démarrage du film, la page grandissait de 6 000 px et les
   images « paresseuses » des sections suivantes, crues proches, partaient toutes au chargement (21/09/2026). */
.js .cine__piste,
.cine[data-pret="1"] .cine__piste {
  /* 6,6 écrans de plans + 1 écran pour la scène collante (la grille et sa tenue sont passées dans la section
     « Ce qui sort du studio » le 28/09/2026) */
  height: var(--cine-hauteur, 760vh);
}

.cine__scene {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: clip;
  background: var(--fond-0);
  isolation: isolate;
}

.cine__plan {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity;
}

.cine__plan[data-premier] {
  opacity: 1;
}

.cine__image,
.cine__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cine__video {
  opacity: 0;
  transition: opacity 260ms ease;
}

.cine__plan[data-peint="1"] .cine__video {
  opacity: 1;
}

/* Voile de lecture : bas et gauche assombris pour le texte, centre laissé au film */
.cine__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 14;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(1, 16, 15, 0.78) 0%, rgba(1, 16, 15, 0.35) 34%, rgba(1, 16, 15, 0) 56%),
    linear-gradient(0deg, rgba(1, 16, 15, 0.7) 0%, rgba(1, 16, 15, 0) 36%);
}

.cine__textes {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  align-items: end;
  padding: 0 var(--gouttiere) clamp(56px, 10vh, 110px);
  pointer-events: none;
}

.cine__texte {
  grid-area: 1 / 1;
  max-width: 560px;
  padding: 28px 30px;
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  background: rgba(2, 20, 25, 0.5);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  will-change: opacity, transform;
}

.cine__texte[data-premier] {
  opacity: 1;
}

.cine[data-pret="1"] .cine__texte {
  opacity: 0;
}

.cine__etiquette {
  margin-bottom: 12px;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vif);
}

.cine__phrase {
  font-family: var(--f-titre);
  font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.8rem);
  font-weight: 650;
  font-stretch: 104%;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.cine__detail {
  margin-top: 14px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--texte-doux);
}

.cine__reperes {
  position: absolute;
  z-index: 22;
  right: var(--gouttiere);
  top: 50%;
  translate: 0 -50%;
  display: grid;
  gap: 12px;
  pointer-events: none;
}

.cine__repere {
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: rgba(238, 249, 250, 0.35);
  transition: width 0.25s ease, background-color 0.25s ease;
}

.cine__repere[data-actif="1"] {
  width: 42px;
  background: var(--vif);
}

.cine__invite {
  position: absolute;
  z-index: 22;
  right: var(--gouttiere);
  bottom: clamp(24px, 4vh, 40px);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texte-pale);
  pointer-events: none;
}

.cine__grille {
  position: absolute;
  inset: 0;
  z-index: 18;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(16px, 3vh, 34px);
  padding: clamp(48px, 9vh, 84px) var(--gouttiere);
  background: rgba(1, 16, 15, 0.84);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

.cine__grille-titre {
  font-family: var(--f-titre);
  font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem);
  font-weight: 650;
  font-stretch: 104%;
  letter-spacing: -0.03em;
  text-align: center;
}

.cine__vignettes {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 16px);
  width: min(100%, 1240px);
}

.cine__vignette {
  position: relative;
  overflow: hidden;
  /* Films verticaux réels (28/09/2026) : le cadre suit leur format 9:16 */
  aspect-ratio: 9 / 16;
  max-height: 46vh;
  border: 1px solid var(--filet-fort);
  border-radius: 16px;
  background: var(--fond-3);
  transform: translateY(calc(24px - var(--part, 0) * 24px)) scale(calc(0.92 + var(--part, 0) * 0.08));
  opacity: var(--part, 0);
}

.cine__vignette video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cine__vignette-nom {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: calc(100% - 20px);
  padding: 5px 9px;
  border-radius: 10px;
  background: rgba(2, 20, 25, 0.74);
  font-size: 0.75rem;
  line-height: 1.15;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Secteur au-dessus du nom de la marque (28/09/2026) ; seul le nom reste sur les écrans étroits (responsive.css). */
.cine__vignette-secteur {
  font-size: 0.75rem;
  color: var(--vif);
}

/* Bouton de lecture de chaque film de la grille (28/09/2026) : rond au centre, comme dans le héros ; tout le cadre du
   film ouvre le film entier avec le son (data-film-zone). Cliquable seulement quand la grille est là (js/scrub.js). */
.cine__lecture {
  --coquille: 6px;
  --lecture-rond: 42px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cine__grille[data-actif="1"] .cine__vignette {
  cursor: pointer;
  pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
  .cine__vignette:hover .lecture-coquille {
    border-color: #fff;
    background-color: rgba(255, 255, 255, 0.3);
  }
}

@media (hover: hover) and (pointer: fine) {
  .cine__vignette:hover .lecture {
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.6), 0 0 26px rgba(228, 225, 53, 0.55);
  }
}

.cine__grille-action {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  pointer-events: auto;
}

.cine__grille[style*="opacity: 0"] .cine__grille-action {
  pointer-events: none;
}

/* ============================================================================================
   ACCUEIL · Ce qui sort du studio (section à part depuis le 28/09/2026, demande de l'utilisateur) — six films verticaux
   de nos clients, chacun avec son bouton de lecture. Défilement normal (le retardateur a été retiré le même jour, à sa
   demande) ; fond un peu plus clair que le reste de la page : sarcelle moyen (texte blanc : contraste de 8:1 au moins).
   ============================================================================================ */
main > section.studio {
  padding-block: 0;
  background: linear-gradient(180deg, var(--sarcelle-1), var(--sarcelle-0));
}

.studio__contenu {
  display: grid;
  justify-items: center;
  gap: clamp(16px, 3vh, 34px);
  /* Bas plus aéré sous les boutons (28/09/2026, demande de l'utilisateur) */
  padding: clamp(48px, 9vh, 84px) var(--gouttiere) clamp(76px, 12vh, 124px);
}

.studio__titre {
  font-family: var(--f-titre);
  font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem);
  font-weight: 650;
  font-stretch: 104%;
  letter-spacing: -0.03em;
  text-align: center;
}

.studio__vignettes {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 16px);
  width: min(100%, 1240px);
  /* Centrée dans la scène de l'anneau (sans script, la rangée reste au milieu) */
  margin-inline: auto;
}

.studio__vignette {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  max-height: 46vh;
  border: 1px solid var(--filet-fort);
  border-radius: 16px;
  background: var(--fond-3);
  cursor: pointer;
}

.studio__vignette video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio__nom {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: calc(100% - 20px);
  padding: 5px 9px;
  border-radius: 10px;
  background: rgba(2, 20, 25, 0.74);
  font-size: 0.75rem;
  line-height: 1.15;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.studio__secteur {
  font-size: 0.75rem;
  color: var(--vif);
}

@media (hover: hover) and (pointer: fine) {
  .studio__vignette:hover .lecture-coquille {
    border-color: #fff;
    background-color: rgba(255, 255, 255, 0.3);
  }
}

@media (hover: hover) and (pointer: fine) {
  .studio__vignette:hover .lecture {
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.6), 0 0 26px rgba(228, 225, 53, 0.55);
  }
}

.studio__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(14px, 3.4vh, 34px);
}

/* --------------------------------------------------------------------------------------------
   L'anneau 3D (30/09/2026, demande de l'utilisateur) — le carrousel sans fin du héros d'aeline.webflow.io,
   relevé dans son code : cartes debout sur le bord d'un disque penché à −77°, vues sous une perspective de
   2 000 px pour un rayon de 576 px, disque reculé de 320 px et descendu de 128 px sous le point de fuite ;
   un tour en 40 s (js/main.js) ; entrée : zoom de 0 à 1 et fondu, 1,25 s, courbe sine.out. Toutes ces
   mesures sont gardées en proportion du rayon (--rayon) : l'anneau a la même allure à toutes les tailles.
   Ici 18 cartes au format 9:16 (les six vidéos trois fois, une tous les 20° ; aeline : 24 carrés, un tous
   les 15°), même vide entre deux cartes. Actif seulement quand le script a construit l'anneau (.est-anneau) :
   sans lui, la rangée de six vidéos ci-dessus reste.
   -------------------------------------------------------------------------------------------- */
main > section.studio {
  /* Les côtés de l'anneau dépassent l'écran au téléphone : coupés au bord de la section (pas de défilement de côté) */
  overflow-x: clip;
}

.studio__scene {
  width: 100%;
}

.studio__scene.est-anneau {
  /* Rayon du cercle des cartes (centre des cartes) : 540 px au plus, 330 px au moins, jamais plus des trois
     quarts de la hauteur d'écran */
  --rayon: min(max(330px, 34vw), 540px, 72vh);
  --carte-l: calc(var(--rayon) * 0.296);
  --carte-h: calc(var(--carte-l) * 16 / 9);
  /* Point de fuite : à la hauteur du centre de la carte de face */
  --origine-y: calc(var(--rayon) * 0.32);
  position: relative;
  height: calc(var(--rayon) * 0.76);
}

.est-anneau .studio__perspective {
  position: absolute;
  inset: 0;
  perspective: calc(var(--rayon) * 3.472);
  perspective-origin: 50% var(--origine-y);
  /* L'entrée grandit depuis le point de fuite, comme chez aeline */
  transform-origin: 50% var(--origine-y);
  transition:
    transform 1.25s var(--ease-sinus-sortie),
    opacity 1.25s var(--ease-sinus-sortie);
}

.est-anneau.est-attente .studio__perspective {
  opacity: 0;
  transform: scale(0);
}

.est-anneau .studio__plateau {
  position: absolute;
  top: var(--origine-y);
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translateY(calc(var(--rayon) * 0.2222)) translateZ(calc(var(--rayon) * -0.5556)) rotateX(-77deg);
}

.est-anneau .studio__vignettes {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  /* La rotation (transform: rotate(…)) est posée à chaque image par js/main.js */
  will-change: transform;
}

.est-anneau .studio__vignette {
  position: absolute;
  top: calc(var(--carte-h) / -2);
  left: calc(var(--carte-l) / -2);
  width: var(--carte-l);
  height: var(--carte-h);
  max-height: none;
  border-radius: calc(var(--carte-l) * 0.075);
  /* Debout sur le bord du disque, face tournée vers l'extérieur : le dos des cartes de l'autre côté ne se voit pas */
  transform: rotate(var(--angle, 0deg)) translateY(calc(var(--rayon) * -1)) rotateX(90deg);
  backface-visibility: hidden;
}

.est-anneau .studio__vignette video,
.est-anneau .studio__vignette .lecture-coquille,
.est-anneau .studio__nom {
  backface-visibility: hidden;
}

/* Cartes passées derrière le disque : plus rien à peindre (posé par js/main.js) */
.est-anneau .studio__vignette.est-dos {
  visibility: hidden;
}

/* ============================================================================================
   ACCUEIL · Savoir-faire — bento de cinq cartes de verre
   ============================================================================================ */

.savoir {
  background:
    radial-gradient(ellipse 50% 40% at 90% 0%, rgba(18, 181, 201, 0.12) 0%, rgba(18, 181, 201, 0) 70%),
    var(--fond-1);
}

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}

.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--filet);
  border-radius: var(--r-grand);
  background: linear-gradient(180deg, rgba(170, 232, 240, 0.075) 0%, rgba(170, 232, 240, 0.03) 100%);
  transition: border-color 0.3s ease, transform 0.4s var(--ease-sortie);
}

@media (hover: hover) and (pointer: fine) {
  .carte:hover {
    border-color: var(--filet-fort);
  }
}

.carte__media {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 10px 10px 0;
  overflow: hidden;
  border-radius: calc(var(--r-grand) - 10px);
  background: var(--fond-3);
}

.carte__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carte__corps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 28px 30px;
}

.carte__corps .surtitre {
  margin-bottom: 0;
  font-size: 0.75rem;
}

.carte h3 {
  font-family: var(--f-titre);
  font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.9rem);
  font-weight: 650;
  font-stretch: 104%;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.carte p {
  color: var(--texte-doux);
}

.carte__pieces {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  margin-top: 4px;
  font-size: 0.92rem;
  color: var(--texte-doux);
}

.carte__pieces span {
  margin-right: 6px;
  font-size: 0.76rem;
  color: var(--vif);
}

.carte__meta {
  margin-top: auto;
  padding-top: 6px;
  font-size: 0.78rem !important;
  color: var(--teal-clair) !important;
}

.carte__etapes {
  font-size: 0.8rem !important;
  line-height: 1.8;
}

.carte__equipe {
  font-size: 0.92rem;
}

/* Placement dans la grille de 12 colonnes */
.carte--explicative {
  grid-column: 1 / 8;
  grid-row: span 2;
}

.carte--explicative .carte__media {
  aspect-ratio: 16 / 9;
}

.carte--interface {
  grid-column: 8 / 13;
  flex-direction: row;
  align-items: stretch;
}

.carte--interface .carte__media--vertical {
  flex: none;
  width: 38%;
  aspect-ratio: auto;
  margin: 10px 0 10px 10px;
}

.carte--objet {
  grid-column: 8 / 13;
  flex-direction: row;
  align-items: stretch;
}

.carte--objet .carte__media--carre {
  flex: none;
  width: 38%;
  aspect-ratio: auto;
  margin: 10px 0 10px 10px;
}

/* Film iraao (28/09/2026) : l'empilement 3D est à 64 % de la largeur de l'image ; le cadre étroit se centre sur lui. */
.carte--objet .carte__media--carre video {
  object-position: 64% 50%;
}

.carte--demo {
  grid-column: 1 / 6;
}

.carte--labo {
  grid-column: 6 / 13;
  background:
    radial-gradient(ellipse 70% 80% at 100% 100%, rgba(228, 225, 53, 0.09) 0%, rgba(228, 225, 53, 0) 70%),
    linear-gradient(180deg, rgba(170, 232, 240, 0.075) 0%, rgba(170, 232, 240, 0.03) 100%);
}

/* Courbe d'animation du laboratoire */
.courbe {
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 6px 0;
}

.courbe__grille {
  fill: none;
  stroke: rgba(170, 232, 240, 0.12);
  stroke-width: 1;
}

.courbe__lineaire {
  fill: none;
  stroke: rgba(170, 232, 240, 0.35);
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
}

.courbe__trace {
  fill: none;
  stroke: var(--vif);
  stroke-width: 3;
  stroke-linecap: round;
}

.courbe__point {
  fill: var(--vif);
  filter: drop-shadow(0 0 8px rgba(228, 225, 53, 0.7));
}

/* ============================================================================================
   ACCUEIL · Projets — trois études de cas
   ============================================================================================ */

.projets {
  background: var(--fond-2);
}

.projets__liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.projet {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.projet__media {
  /* 16:9 comme les vidéos : elles se voient en entier, rien n'est coupé (28/09/2026, demande de l'utilisateur) */
  aspect-ratio: 16 / 9;
  margin-bottom: 8px;
  overflow: hidden;
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  background: var(--fond-3);
}

.projet__media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.projet__type {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-clair);
}

.projet h3 {
  font-family: var(--f-titre);
  font-size: 1.55rem;
  font-weight: 650;
  font-stretch: 104%;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.projet__resultat {
  font-size: 1.05rem;
  color: var(--texte);
}

.projet__resultat strong {
  color: var(--vif);
}

.projet p:last-child {
  color: var(--texte-doux);
}

/* ============================================================================================
   ACCUEIL · Rappel de commande — bande de conversion placée juste après la preuve
   ============================================================================================ */

main > section.rappel {
  padding-block: clamp(20px, 2.5vw, 40px);
}

.rappel__bande {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(26px, 3.2vw, 44px) clamp(24px, 3.4vw, 48px);
  border: 1px solid rgba(228, 225, 53, 0.3);
  border-radius: var(--r-grand);
  background:
    radial-gradient(120% 180% at 100% 0%, rgba(228, 225, 53, 0.1) 0%, rgba(228, 225, 53, 0) 58%),
    rgba(170, 232, 240, 0.05);
}

.rappel__texte h2 {
  margin-top: 10px;
  font-family: var(--f-titre);
  font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.1rem);
  font-weight: 650;
  font-stretch: 104%;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.rappel__prix {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin-top: 18px;
}

.rappel__prix li {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.rappel__prix strong {
  font-family: var(--f-titre);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--vif);
}

.rappel__prix span {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-pale);
}

.rappel__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rappel__actions .bouton {
  justify-content: center;
}

/* ============================================================================================
   ACCUEIL · Chiffres
   ============================================================================================ */

.chiffres {
  background: var(--fond-1);
}

.chiffres__liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--filet);
  border-radius: var(--r-grand);
  background: var(--verre);
}

.chiffre {
  display: grid;
  gap: 10px;
  padding: 34px 30px;
}

.chiffre + .chiffre {
  border-left: 1px solid var(--filet);
}

.chiffre__valeur {
  font-family: var(--f-titre);
  font-size: clamp(2.8rem, 1.8rem + 3vw, 4.6rem);
  font-weight: 700;
  font-stretch: 108%;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.chiffre__libelle {
  color: var(--texte-doux);
}

/* ============================================================================================
   ACCUEIL · Processus — six étapes
   ============================================================================================ */

.processus {
  background:
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(18, 181, 201, 0.1) 0%, rgba(18, 181, 201, 0) 70%),
    var(--fond-2);
}

.processus__etapes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  counter-reset: etape;
}

.etape {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 28px 28px 30px;
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  background: var(--verre);
}

.etape__numero {
  font-size: 0.78rem;
  color: var(--vif);
}

.etape h3 {
  font-family: var(--f-titre);
  font-size: 1.45rem;
  font-weight: 650;
  font-stretch: 104%;
  letter-spacing: -0.02em;
}

.etape p {
  color: var(--texte-doux);
}

.etape__livrable {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--filet);
  font-size: 0.78rem;
  color: var(--teal-clair) !important;
}

/* ============================================================================================
   ACCUEIL · Sous le capot
   ============================================================================================ */

.capot {
  background: var(--fond-1);
}

.capot__outils {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.outil {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 26px 26px 24px;
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  background: var(--verre);
}

.outil__nom {
  font-family: var(--f-titre);
  font-size: 1.3rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.outil p {
  color: var(--texte-doux);
}

.outil code {
  display: block;
  margin-top: 8px;
  padding: 12px 14px;
  overflow-x: auto;
  border-radius: 10px;
  background: rgba(1, 16, 15, 0.7);
  font-size: 0.76rem;
  white-space: nowrap;
  color: var(--teal-clair);
}

.capot__preuve {
  margin-top: 26px;
  font-size: 0.82rem;
  color: var(--texte-pale);
}

/* ============================================================================================
   ACCUEIL · Témoignages
   ============================================================================================ */

.temoignages {
  background: var(--fond-2);
}

.temoignages__grille {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}

.temoignage {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 30px;
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  background: var(--verre);
}

.temoignage--large {
  grid-column: span 3;
}

.temoignage blockquote p {
  font-family: var(--f-titre);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #fff;
}

.temoignage--large blockquote p {
  font-size: 1.45rem;
}

.temoignage figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  font-size: 0.9rem;
  color: var(--texte-doux);
}

/* Portrait du client a la place des initiales : une photographie vaut mieux qu'un monogramme
   (regle R4 du plan de finalisation). Meme gabarit que l'ancienne pastille : rien ne bouge. */
.temoignage__portrait {
  display: block;
  width: 46px;
  height: 46px;
  flex: none;
}
.temoignage__portrait img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--filet-fort);
}

.temoignage__initiale {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--fond-4));
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: #fff;
}

.temoignage__resultat {
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: var(--r-pilule);
  background: rgba(228, 225, 53, 0.1);
  font-size: 0.75rem;
  color: var(--vif);
}

/* ============================================================================================
   ACCUEIL · Offres — prix affichés, commande directe
   ============================================================================================ */

.offres {
  background:
    radial-gradient(ellipse 60% 60% at 50% 110%, rgba(18, 181, 201, 0.16) 0%, rgba(18, 181, 201, 0) 70%),
    var(--fond-1);
}

.offres__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 20px;
}

.offre {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 34px 32px 32px;
  border: 1px solid var(--filet);
  border-radius: var(--r-grand);
  background: var(--verre);
}

.offre--vedette {
  border-color: rgba(228, 225, 53, 0.45);
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(228, 225, 53, 0.1) 0%, rgba(228, 225, 53, 0) 70%),
    rgba(170, 232, 240, 0.07);
  box-shadow: 0 40px 70px -40px rgba(228, 225, 53, 0.35);
}

.offre__drapeau {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 5px 11px;
  border-radius: var(--r-pilule);
  background: var(--vif);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-vif);
}

.offre__nom {
  font-family: var(--f-titre);
  font-size: 1.6rem;
  font-weight: 650;
  font-stretch: 104%;
  letter-spacing: -0.025em;
}

.offre__phrase {
  /* Deux lignes réservées : sinon le prix d'une carte remonte et les trois ne s'alignent plus. */
  min-height: calc(2 * 1.55em);
  color: var(--texte-doux);
}

.offre__prix {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 14px;
  font-family: var(--f-titre);
  font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3rem);
  font-weight: 700;
  font-stretch: 106%;
  line-height: 1;
  letter-spacing: -0.035em;
  color: #fff;
}

/* Prix barré : le tarif normal, rappelé à côté du prix de lancement. */
.offre__barre {
  font-family: var(--f-texte);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--texte-pale);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

/* Bandeau d'offre limitée, au-dessus des trois cartes. */
.offres__bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  width: fit-content;
  margin: 0 auto clamp(26px, 3vw, 40px);
  padding: 12px 22px;
  border: 1px solid rgba(228, 225, 53, 0.34);
  border-radius: var(--r-pilule);
  background: rgba(228, 225, 53, 0.08);
  font-size: 0.95rem;
  color: var(--texte-doux);
  text-align: center;
}

.offres__bandeau .mono {
  padding: 4px 10px;
  border-radius: var(--r-pilule);
  background: var(--vif);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-vif);
}

.offre__depuis {
  display: block;
  margin-bottom: 8px;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-pale);
}

.offre__detail {
  font-size: 0.8rem;
  color: var(--teal-clair);
}

.offre__liste {
  display: grid;
  gap: 10px;
  margin: 18px 0 26px;
  padding-top: 18px;
  border-top: 1px solid var(--filet);
}

.offre__liste li {
  display: flex;
  gap: 10px;
  color: var(--texte-doux);
}

.offre__liste li::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.3 2.3 2.2 4.7-5' fill='none' stroke='%23e4e135' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat,
    rgba(228, 225, 53, 0.12);
}

.offre .bouton {
  margin-top: auto;
}

.offres__mention {
  max-width: 760px;
  margin: 30px auto 0;
  text-align: center;
  font-size: 0.92rem;
  color: var(--texte-pale);
}

.offres__mention a {
  color: var(--vif);
}

/* ============================================================================================
   ACCUEIL · Comment ça marche ? (30/09/2026, demande de l'utilisateur) — juste au-dessus des tarifs : le parcours de
   commande en trois étapes (choisir et payer, remplir le brief, recevoir la vidéo). Scène sombre profonde entre la
   mosaïque et les tarifs sarcelle ; trois cartes de verre, une icône jaune par étape ; un fil jaune → sarcelle relie les
   icônes et se trace à l'arrivée (animations.js). Sans script, tout est affiché (fil compris).
   ============================================================================================ */
main > section.marche {
  --marche-haut: clamp(26px, 2.8vw, 38px);
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse 58% 62% at 50% 46%, rgba(29, 109, 123, 0.36) 0%, rgba(29, 109, 123, 0) 72%),
    radial-gradient(ellipse 30% 36% at 6% 8%, rgba(228, 225, 53, 0.07) 0%, rgba(228, 225, 53, 0) 70%),
    linear-gradient(180deg, var(--fond-1) 0%, var(--fond-2) 100%);
}

.marche__tete {
  max-width: 760px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  text-align: center;
}

.marche__tete .surtitre {
  color: var(--teal-clair);
}

.marche__tete h2 {
  font-family: var(--f-titre);
  font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.75rem);
  font-weight: 650;
  font-stretch: 104%;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--texte);
}

.marche__intro {
  margin: 18px auto 0;
  max-width: 60ch;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--texte-doux);
}

.marche__parcours {
  position: relative;
}

/* Le fil qui relie les trois icônes : du centre de la première carte au centre de la dernière */
.marche__fil {
  position: absolute;
  top: calc(var(--marche-haut) + 32px - 1px);
  left: calc(100% / 6);
  right: calc(100% / 6);
  z-index: 0;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(170, 232, 240, 0.14);
}

.marche__fil-trace {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--vif), var(--teal-clair));
  transform-origin: left center;
}

.marche__etapes {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.marche__etape {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 12px;
  padding: var(--marche-haut) clamp(20px, 2.2vw, 32px) clamp(28px, 3vw, 40px);
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  background: linear-gradient(180deg, rgba(170, 232, 240, 0.075) 0%, rgba(170, 232, 240, 0.025) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 30px 60px -40px rgba(0, 0, 0, 0.8);
  text-align: center;
}

/* L'icône en tête de carte (le fil passe par son centre), le numéro juste dessous */
.marche__icone {
  order: -1;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #f4f283 0%, var(--vif) 55%, #cfcc22 100%);
  color: var(--encre-vif);
  box-shadow:
    0 0 0 8px rgba(228, 225, 53, 0.12),
    0 14px 30px -12px rgba(228, 225, 53, 0.5);
}

.marche__icone svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Numéro d'étape EN GRAND (30/09/2026, demande de l'utilisateur : « presque à la taille des titres H2 », pour qu'on
   sache d'un coup d'œil que c'est l'étape 1, puis 2, puis 3). Police des titres, chiffres proportionnels (en chiffres
   tabulaires, Mona Sans pointe le zéro : moins lisible) ; dégradé jaune → sarcelle claire, celui du fil qui relie les
   étapes (couleurs de la charte). */
.marche__numero {
  margin-top: 10px;
  font-family: var(--f-titre);
  font-size: clamp(2rem, 1.2rem + 2.3vw, 3.25rem);
  font-weight: 700;
  font-stretch: 104%;
  font-variant-numeric: lining-nums proportional-nums;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--vif);
  background: linear-gradient(180deg, var(--vif) 25%, var(--teal-clair) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Contraste forcé de Windows : le dégradé disparaît, le chiffre reste lisible dans la couleur du système */
@media (forced-colors: active) {
  .marche__numero {
    background: none;
    -webkit-text-fill-color: currentColor;
  }
}

.marche__titre {
  font-family: var(--f-titre);
  font-size: clamp(1.18rem, 1rem + 0.55vw, 1.45rem);
  font-weight: 650;
  font-stretch: 104%;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--texte);
  text-wrap: balance;
}

.marche__texte {
  max-width: 34ch;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--texte-doux);
}

.marche__actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 4vw, 48px);
}

/* ============================================================================================
   ACCUEIL · Tarifs (28/09/2026, décisions de l'utilisateur ; design d'après le modèle de la page des tarifs de Higgsfield,
   avec la charte du site) — trois formules puis, juste en dessous, trois packs ; tout compris, aucune option. Carte : nom
   en capitales et remise, public visé, encadré « volume », prix barré, bouton pleine largeur, économie, encadré
   « Compris » (coches, croix grisées). Business est la carte vedette (liseré jaune qui tourne : animations.css), Premium
   porte la voix off (teinte sarcelle claire). Au-dessous de 901 px, les cartes défilent de gauche à droite.
   ============================================================================================ */
.tarifs.theme-sarcelle {
  /* Bandeau blanc entre « Ce qui sort du studio » et les Tarifs (28/09/2026, demande de l'utilisateur) : le même trait
     épais que celui de « Commandez la vôtre » */
  border-top: var(--trait-mosaique) solid #fff;
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(116, 220, 232, 0.16) 0%, rgba(116, 220, 232, 0) 72%),
    radial-gradient(ellipse 55% 35% at 50% 100%, rgba(228, 225, 53, 0.07) 0%, rgba(228, 225, 53, 0) 70%),
    linear-gradient(180deg, var(--sarcelle-0), var(--sarcelle-1) 55%, var(--sarcelle-0));
}

/* En-tête : titre et promesse à gauche, offre de lancement et conseil à droite */
.tarifs__tete {
  margin-bottom: clamp(22px, 2.6vw, 32px);
}

.tarifs__intro h2 {
  font-family: var(--f-titre);
  font-size: clamp(2rem, 1.25rem + 2.2vw, 3.2rem);
  font-weight: 650;
  font-stretch: 104%;
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: var(--blanc-casse);
}

.tarifs__chapeau {
  max-width: 860px;
  margin-top: 16px;
  font-size: 1.02rem;
  color: var(--texte-doux);
}

/* Trois éléments sur une ligne, en trois colonnes égales (LC20, demande de l'utilisateur) : offre de lancement,
   « Tester avec une seule vidéo », conseil WhatsApp */
.tarifs__infos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 clamp(40px, 4.6vw, 62px);
  padding: 0;
  list-style: none;
}

.tarifs__infos li {
  display: flex;
}

.tarifs__infos .tarifs__lancement,
.tarifs__infos .tarifs__conseil {
  flex: 1;
  justify-content: center;
  min-height: 52px;
}

.tarifs__lancement {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 7px 16px 7px 7px;
  border: 1px solid rgba(228, 225, 53, 0.4);
  border-radius: var(--r-pilule);
  background: rgba(228, 225, 53, 0.08);
  font-size: 0.88rem;
  color: var(--texte-doux);
}

.tarifs__jusqua {
  padding: 5px 11px;
  border-radius: var(--r-pilule);
  background: var(--vif);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-vif);
}

.tarifs__conseil {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-pilule);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--texte);
  text-decoration: none;
  transition:
    border-color 0.25s var(--ease-doux),
    color 0.25s var(--ease-doux);
}

.tarifs__conseil svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

@media (hover: hover) and (pointer: fine) {
  .tarifs__conseil:hover {
    border-color: var(--vif);
    color: var(--vif);
  }
}

/* « Que voulez-vous créer ? » : met en avant les cartes conseillées, sans rien cocher ni imposer. Retours de l'utilisateur
   (28/09/2026) : la question en titre au-dessus, les types de vidéo alignés dessous en vrais boutons ; le conteneur sur
   fond clair (blanc verté), titre en encre pour le contraste ; les boutons en sarcelle dégradé comme ceux des tarifs,
   sans bordure (bordure jaune au survol seulement), chevron sur pastille jaune ; le type choisi passe en jaune. */
.tarifs__guide {
  display: grid;
  gap: 14px;
  margin-bottom: clamp(34px, 4vw, 50px);
  padding: 18px 20px 20px;
  border-radius: var(--r-carte);
  background: linear-gradient(180deg, var(--clair-0), var(--clair-1));
  box-shadow: 0 24px 50px -34px rgba(0, 0, 0, 0.6);
}

.tarifs__guide-titre {
  margin: 0;
  font-family: var(--f-titre);
  font-size: 1.15rem;
  font-weight: 650;
  font-stretch: 104%;
  color: var(--encre);
}

.tarifs__types {
  /* Trois colonnes sur deux lignes (28/09/2026, demande de l'utilisateur : « 5 + 1 faisait désordre ») */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tarifs__type {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 0 6px 0 18px;
  border: 1.5px solid transparent;
  border-radius: var(--r-pilule);
  background: linear-gradient(180deg, #1f7c8a 0%, var(--sarcelle-1) 100%);
  box-shadow: 0 10px 22px -14px rgba(4, 33, 42, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--blanc-casse);
  cursor: pointer;
  transition:
    background-color 0.25s var(--ease-doux),
    border-color 0.25s var(--ease-doux),
    color 0.25s var(--ease-doux),
    transform 0.25s var(--ease-sortie);
}

.tarifs__chevron {
  box-sizing: content-box;
  width: 16px;
  height: 16px;
  flex: none;
  padding: 7px;
  border-radius: 50%;
  background: var(--vif);
  color: var(--encre-vif);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s var(--ease-sortie);
}

@media (hover: hover) and (pointer: fine) {
  .tarifs__type:hover {
    border-color: var(--vif);
    transform: translateY(-1px);
  }
}

.tarifs__type:focus-visible {
  border-color: var(--vif);
  transform: translateY(-1px);
}

@media (hover: hover) and (pointer: fine) {
  .tarifs__type:hover .tarifs__chevron {
    transform: translateX(2px);
  }
}

.tarifs__type[aria-pressed="true"] {
  border-color: var(--vif);
  background: var(--vif);
  color: var(--encre-vif);
}

.tarifs__type[aria-pressed="true"] .tarifs__chevron {
  background: var(--encre-vif);
  color: var(--vif);
  transform: rotate(90deg);
}

.tarifs__guide-note {
  margin: 0;
  font-size: 0.84rem;
  color: var(--encre-douce);
}

/* Titre de groupe (« Formules », puis « Packs ») prolongé d'un filet */
/* Sous-titres des groupes (28/09/2026, demande de l'utilisateur : « ça doit être visible ») : police des titres, plus
   grands, en italique, un peu de gras, soulignés en jaune */
.tarifs__groupe {
  margin: 0 0 24px;
  font-family: var(--f-titre);
  font-size: clamp(1.3rem, 1.02rem + 0.85vw, 1.8rem);
  font-style: italic;
  font-weight: 620;
  font-stretch: 104%;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--vif);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.tarifs__groupe--packs {
  margin-top: clamp(52px, 5vw, 76px);
}

/* Offres d'essai (28/09/2026, demande de l'utilisateur) : une seule vidéo avec voix off, pour tester le studio avant une
   formule. Lien jaune en tête de section (#essai) ; liseré sarcelle léger (la voix off) ; le « s » des secondes reste en
   minuscule dans le nom en capitales ; note sous la rangée (une par client, puis les formules). */
.tarifs__essai-lien {
  border-color: rgba(228, 225, 53, 0.45);
  color: var(--vif);
}

@media (hover: hover) and (pointer: fine) {
  .tarifs__essai-lien:hover {
    background: rgba(228, 225, 53, 0.1);
  }
}

.tarif--essai {
  border-color: rgba(116, 220, 232, 0.3);
}

.tarif--essai .tarif__etincelle {
  fill: var(--teal-clair);
}

.tarif__unite {
  text-transform: none;
}

.tarifs__guide--formules {
  margin-top: clamp(52px, 5vw, 76px);
}

.tarifs__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  /* Même espace entre les cartes des formules et entre celles des packs, plus large pour aérer (28/09/2026) */
  gap: clamp(26px, 2.4vw, 36px);
}

.tarifs__glisser {
  display: none;
  margin-top: 10px;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-pale);
}

/* La carte */
.tarif {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 22px 24px;
  border: 1px solid var(--filet-fort);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(3, 30, 37, 0.8) 0%, rgba(2, 20, 25, 0.92) 100%);
  box-shadow: 0 30px 60px -42px rgba(0, 0, 0, 0.75);
  transition: box-shadow 0.35s var(--ease-doux);
  --texte-doux: rgba(222, 236, 231, 0.8);
  --texte-pale: rgba(222, 236, 231, 0.6);
}

.tarif--vedette {
  border-color: rgba(228, 225, 53, 0.5);
  background:
    radial-gradient(120% 60% at 50% -8%, rgba(228, 225, 53, 0.2) 0%, rgba(228, 225, 53, 0) 62%),
    linear-gradient(180deg, rgba(3, 30, 37, 0.82) 0%, rgba(2, 20, 25, 0.94) 100%);
  box-shadow: 0 40px 80px -46px rgba(228, 225, 53, 0.5);
}

.tarif--voix {
  border-color: rgba(116, 220, 232, 0.5);
  background:
    radial-gradient(120% 60% at 50% -8%, rgba(116, 220, 232, 0.2) 0%, rgba(116, 220, 232, 0) 62%),
    linear-gradient(180deg, rgba(3, 30, 37, 0.82) 0%, rgba(2, 20, 25, 0.94) 100%);
}

.tarif__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.tarif__nom {
  margin-right: 4px;
  font-family: var(--f-titre);
  font-size: 1.42rem;
  font-weight: 700;
  font-stretch: 108%;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--blanc-casse);
}

.tarif__remise {
  padding: 4px 8px;
  border-radius: 7px;
  background: var(--vif);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--encre-vif);
}

.tarif__badge {
  padding: 3px 8px;
  border: 1px solid currentColor;
  border-radius: 7px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vif);
}

.tarif--voix .tarif__badge {
  color: var(--teal-clair);
}

.tarif__pour {
  margin-top: -6px;
  font-size: 0.92rem;
  color: var(--texte-doux);
}

/* Encadré « volume » : ce que la formule contient, en un coup d'œil */
.tarif__volume {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--filet);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.22);
}

.tarif__quantite {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1.06rem;
  font-weight: 650;
  color: var(--blanc-casse);
}

.tarif__etincelle {
  width: 18px;
  height: 18px;
  flex: none;
  fill: var(--vif);
}

.tarif--voix .tarif__etincelle,
.tarif--pack .tarif__etincelle {
  fill: var(--teal-clair);
}

.tarif__equivalences,
.tarif__videos {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.86rem;
  color: var(--texte-doux);
}

.tarif__equivalences li {
  padding-left: 27px;
}

.tarif__videos li {
  display: flex;
  align-items: center;
  gap: 9px;
}

.tarif__film {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: var(--teal-clair);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.tarif__fixe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
  padding-top: 9px;
  border-top: 1px dashed var(--filet-fort);
  font-size: 0.82rem;
  text-align: center;
  color: var(--texte-pale);
}

.tarif__fixe::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.3 2.3 2.2 4.7-5' fill='none' stroke='%2374dce8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* Prix : l'ancien, barré (le trait se trace à l'arrivée, animations.css), puis le prix de lancement */
.tarif__prix {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 4px;
}

.tarif__barre {
  position: relative;
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--texte-pale);
}

.tarif__barre::after {
  content: "";
  position: absolute;
  top: 52%;
  right: -3px;
  left: -3px;
  height: 2px;
  border-radius: 2px;
  background: var(--vif);
  transform-origin: left center;
}

.tarif__montant {
  font-family: var(--f-titre);
  font-size: clamp(2.3rem, 1.7rem + 1.4vw, 3rem);
  font-weight: 700;
  font-stretch: 106%;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--blanc-casse);
}

.tarif__ht {
  font-size: 0.85rem;
  color: var(--texte-pale);
}

/* Bouton sarcelle (28/09/2026, demande de l'utilisateur) : les cartes des côtés ; texte blanc cassé, flèche sur pastille
   jaune. Le bouton jaune reste celui de la carte du centre. Contraste du texte : 4,9:1. */
.bouton--sarcelle {
  padding-right: 5px;
  border-color: rgba(116, 220, 232, 0.36);
  background: linear-gradient(180deg, #1f7c8a 0%, var(--sarcelle-1) 100%);
  color: var(--blanc-casse);
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (hover: hover) and (pointer: fine) {
  .bouton--sarcelle:hover {
    border-color: rgba(116, 220, 232, 0.62);
    background: linear-gradient(180deg, #24899a 0%, #166474 100%);
  }
}

.bouton--sarcelle .bouton__icone,
.bouton--sarcelle .bouton__fleche {
  margin-left: auto;
}

.bouton--sarcelle .bouton__fleche {
  box-sizing: content-box;
  width: 16px;
  height: 16px;
  padding: 11px;
  border-radius: 50%;
  background: var(--vif);
  color: var(--encre-vif);
}

/* Bouton blanc (formules et packs hors vedette) : même dessin que le bouton principal, pastille sombre */
.bouton--blanc {
  padding-right: 5px;
  background: #fff;
  color: var(--encre);
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.7);
}

@media (hover: hover) and (pointer: fine) {
  .bouton--blanc:hover {
    background: var(--vif-clair);
  }
}

.bouton--blanc .bouton__icone,
.bouton--blanc .bouton__fleche {
  margin-left: auto;
}

.bouton--blanc .bouton__fleche {
  box-sizing: content-box;
  width: 16px;
  height: 16px;
  padding: 11px;
  border-radius: 50%;
  background: var(--encre);
  color: var(--blanc-casse);
}

.tarif__economie {
  margin-top: -6px;
  text-align: center;
  font-size: 0.84rem;
  color: var(--texte-pale);
}

.tarif__economie strong {
  font-weight: 650;
  color: var(--vif);
}

/* Encadré « Compris dans le prix » */
.tarif__compris {
  display: grid;
  gap: 10px;
  padding: 14px 16px 16px;
  border: 1px solid var(--filet);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.16);
}

.tarif__compris-titre {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texte-pale);
}

.tarif__lignes {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tarif__ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--texte-doux);
}

.tarif__ligne::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.3 2.3 2.2 4.7-5' fill='none' stroke='%23e4e135' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat, rgba(228, 225, 53, 0.14);
}

.tarif__texte {
  flex: 1;
  min-width: 0;
}

.tarif__ligne--non {
  color: var(--texte-pale);
}

.tarif__ligne--non::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m5.6 5.6 4.8 4.8m0-4.8-4.8 4.8' fill='none' stroke='%239fc3c8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat, rgba(170, 232, 240, 0.08);
}

.tarif__pastille {
  flex: none;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(228, 225, 53, 0.13);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--vif);
}

/* Carte conseillée par « Que voulez-vous créer ? » */
.tarif--conseille {
  outline: 2px solid var(--vif);
  outline-offset: 4px;
}

.tarif--conseille::after {
  content: "Conseillé";
  position: absolute;
  top: -13px;
  right: 22px;
  padding: 4px 10px;
  border-radius: var(--r-pilule);
  background: var(--vif);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-vif);
}

/* Premium : « Écouter les voix » ouvre, juste au-dessus, les quatre vidéos avec voix off (lecteur avec le son).
   Élément <details> : il s'ouvre aussi sans JavaScript ; main.js le referme au clic ailleurs et à Échap. */
.voix-exemples {
  position: relative;
  flex: none;
}

.voix-exemples__lien {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(116, 220, 232, 0.16);
  font-size: 0.75rem;
  font-weight: 650;
  white-space: nowrap;
  color: var(--teal-clair);
  list-style: none;
  cursor: pointer;
  transition:
    background-color 0.25s var(--ease-doux),
    color 0.25s var(--ease-doux);
}

.voix-exemples__lien::-webkit-details-marker {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .voix-exemples__lien:hover {
    background: var(--teal-clair);
    color: var(--encre);
  }
}

.voix-exemples[open] .voix-exemples__lien {
  background: var(--teal-clair);
  color: var(--encre);
}

.voix-exemples__onde {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.voix-exemples__panneau {
  position: absolute;
  right: -14px;
  bottom: calc(100% + 12px);
  z-index: 6;
  width: min(356px, calc(100vw - 48px));
  padding: 16px;
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-carte);
  background: var(--fond-2);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.65);
}

.voix-exemples__titre {
  margin: 0 0 12px;
  font-size: 0.8rem;
  color: var(--texte-doux);
}

.voix-exemples__liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.voix-exemple {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  color: var(--texte);
  cursor: pointer;
}

.voix-exemple img {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-petit);
  transition:
    transform 0.25s var(--ease-sortie),
    border-color 0.25s var(--ease-doux);
}

@media (hover: hover) and (pointer: fine) {
  .voix-exemple:hover img {
    border-color: var(--vif);
    transform: translateY(-2px);
  }
}

.voix-exemple:focus-visible img {
  border-color: var(--vif);
  transform: translateY(-2px);
}

.voix-exemple__nom {
  margin-top: 4px;
  font-size: 0.82rem;
  font-weight: 600;
}

.voix-exemple__ton {
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--texte-pale);
}

/* Comment ça se passe : le paiement d'abord, le brief ensuite (décision de l'utilisateur) */
.tarifs__etapes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  list-style: none;
}

.tarifs__etapes li {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 20px 22px;
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  background: rgba(170, 232, 240, 0.05);
}

.tarifs__numero {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--vif);
  font-size: 0.8rem;
  color: var(--encre-vif);
}

.tarifs__etapes strong {
  font-size: 1rem;
  color: var(--blanc-casse);
}

.tarifs__etape-texte {
  font-size: 0.88rem;
  color: var(--texte-doux);
}

/* ============================================================================================
   ACCUEIL · Guide — sommaire collant + lecture (réutilise les sections éditoriales)
   ============================================================================================ */

/* Zone du guide (28/09/2026, demande de l'utilisateur : « du mal à lire ») : fond sarcelle, comme « Ce qui sort du
   studio » (sa teinte « claire » préférée), cartes de lecture un peu plus sombres, textes blanc cassé moins gras. */
.guide {
  --texte: #eef5f2;
  --texte-doux: rgba(232, 243, 240, 0.9);
  --texte-pale: rgba(232, 243, 240, 0.74);
  background: linear-gradient(180deg, var(--sarcelle-0) 0%, var(--sarcelle-1) 12%, var(--sarcelle-1) 88%, var(--sarcelle-0) 100%);
}

.guide__contenu .edito p,
.guide__contenu .edito li,
.guide__contenu .edito td,
.guide__contenu .edito__chapeau {
  font-weight: 350;
}

.guide__contenu .edito strong {
  font-weight: 560;
}

.guide__contenu .edito h2 {
  font-weight: 600;
}

.guide__contenu .edito h3,
.guide__contenu .edito-question summary,
.guide__contenu .edito__tableau tbody th {
  font-weight: 520;
}

.guide__tete {
  margin-bottom: clamp(40px, 5vw, 70px);
}

.guide__tete h2 {
  max-width: 900px;
}

.guide__grille {
  display: grid;
  grid-template-columns: var(--sommaire-largeur) minmax(0, 1fr);
  align-items: start;
  gap: var(--guide-ecart);
}

/* ============================================================================================
   Sommaire du guide (27/09/2026) — forme inspirée de l'image fournie par l'utilisateur (le conteneur, pas ses
   couleurs) : cadre épais aux coins très arrondis, écran intérieur, bandeau, pastille et nom, filet pointillé,
   entrées à icône sur une seule ligne avec chevron, raccourcis carrés, grand bouton de commande. Plus de barre
   jaune à gauche des entrées, plus de barre de défilement : sur un écran bas, seule la liste défile (fondu en bas),
   et l'entrée en cours reste toujours visible (js/main.js).
   ============================================================================================ */
.guide__sommaire {
  position: sticky;
  top: 96px;
}

.sommaire__carte {
  display: flex;
  max-height: calc(100vh - 116px);
  padding: 7px;
  border-radius: 34px;
  background: linear-gradient(180deg, #0a262c, #03151a);
  box-shadow:
    0 0 0 1px var(--filet-fort),
    inset 0 1px 0 rgba(170, 232, 240, 0.14),
    0 44px 80px -44px rgba(0, 0, 0, 0.9);
}

.sommaire__ecran {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 27px;
  background: linear-gradient(180deg, #0c2c33, #082127 60%);
  box-shadow: inset 0 0 0 1px rgba(170, 232, 240, 0.08);
}

.sommaire__bandeau {
  flex: none;
  height: 62px;
  background:
    radial-gradient(90% 150% at 18% -10%, rgba(228, 225, 53, 0.42), rgba(228, 225, 53, 0) 58%),
    radial-gradient(120% 160% at 92% 110%, rgba(18, 181, 201, 0.62), rgba(18, 181, 201, 0) 62%),
    linear-gradient(120deg, #0b3f4a, #06252c);
}

.sommaire__identite {
  display: flex;
  flex: none;
  align-items: flex-end;
  gap: 12px;
  margin-top: -24px;
  padding: 0 18px;
}

.sommaire__pastille {
  display: grid;
  flex: none;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--vif);
  box-shadow: 0 0 0 5px #0c2c33, 0 10px 24px -10px rgba(0, 0, 0, 0.8);
}

.sommaire__pastille svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #121606;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sommaire__qui {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding-bottom: 3px;
}

.sommaire__nom {
  font-family: var(--f-titre);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

.sommaire__role {
  padding: 3px 10px;
  border-radius: var(--r-pilule);
  background: rgba(170, 232, 240, 0.1);
  box-shadow: inset 0 0 0 1px var(--filet);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.sommaire__filet {
  flex: none;
  margin: 16px 18px 12px;
  border: 0;
  border-top: 1px dashed rgba(170, 232, 240, 0.24);
}

.sommaire__intro {
  flex: none;
  margin: 0 18px 8px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--texte-doux);
}

.sommaire__liste {
  position: relative;
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: 2px;
  min-height: 0;
  margin: 0;
  padding: 6px 10px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 26px), transparent 100%);
}

.sommaire__liste::-webkit-scrollbar {
  display: none;
}

.sommaire__liste a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--texte-doux);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.sommaire__liste a span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sommaire__icone,
.sommaire__chevron {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sommaire__icone {
  width: 18px;
  height: 18px;
  opacity: 0.85;
}

.sommaire__chevron {
  width: 15px;
  height: 15px;
  opacity: 0.4;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .sommaire__liste a:hover {
    background: rgba(170, 232, 240, 0.07);
    color: #fff;
  }
}

@media (hover: hover) and (pointer: fine) {
  .sommaire__liste a:hover .sommaire__chevron {
    opacity: 0.9;
    transform: translateX(2px);
  }
}

.sommaire__liste a[aria-current="true"] {
  background: rgba(228, 225, 53, 0.1);
  color: #fff;
}

.sommaire__liste a[aria-current="true"] .sommaire__icone,
.sommaire__liste a[aria-current="true"] .sommaire__chevron {
  color: var(--vif);
  opacity: 1;
}

.sommaire__liste a:focus-visible,
.sommaire__raccourci:focus-visible {
  outline: 2px solid var(--vif);
  outline-offset: 2px;
}

.sommaire__pied {
  display: grid;
  flex: none;
  /* Colonne tenue à la place disponible : le bouton, plus large que la carte, l'élargissait et poussait la
     quatrième icône et le bouton contre le bord droit (signalé par l'utilisateur, 27/09/2026) */
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px 12px;
}

.sommaire__raccourcis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.sommaire__raccourci {
  display: grid;
  place-items: center;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(170, 232, 240, 0.1), rgba(170, 232, 240, 0.035));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px var(--filet);
  color: #fff;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.sommaire__raccourci svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) and (pointer: fine) {
  .sommaire__raccourci:hover {
    background: rgba(228, 225, 53, 0.14);
    color: var(--vif);
  }
}

.sommaire__cta {
  justify-content: center;
  width: 100%;
  /* Bouton resserré pour la carte (254 px utiles) : 240 px au naturel au lieu de 266 */
  gap: 8px;
  padding-left: 18px;
  font-size: 0.92rem;
}

/* Écrans bas (portables) : la présentation se resserre pour laisser la place aux chapitres. */
@media (max-height: 820px) {
  .sommaire__bandeau {
    height: 46px;
  }

  .sommaire__intro {
    display: none;
  }

  .sommaire__filet {
    margin-block: 12px 6px;
  }
}

/* Sans JavaScript : ni carte collante ni liste qui défile seule — le sommaire s'affiche en entier en tête du
   guide (le contrôle sans JavaScript relevait la dernière entrée coupée en bas de la liste, 27/09/2026). */
html:not([data-js-pret]) .guide__sommaire {
  position: static;
}

html:not([data-js-pret]) .sommaire__carte {
  max-height: none;
}

html:not([data-js-pret]) .sommaire__liste {
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}

/* ============================================================================================
   Zone du guide (27/09/2026, demande de l'utilisateur) — écrans larges, là où le sommaire est collant. Quand le
   haut du guide atteint le haut de l'écran, js/main.js pose data-zone-guide sur <html> :
   1. la barre d'en-tête glisse vers la droite et se pose au-dessus de la colonne de lecture (les cinq liens, qui
      n'y tiennent plus, s'effacent : ils restent dans le menu ☰) ;
   2. un instant après, le sommaire monte au niveau de la barre et se déploie jusqu'en bas de l'écran, collant
      pendant toute la lecture. À la fin du guide, la grille le pousse : il repart avec la page, puis la barre
      reprend sa place. En remontant, tout se rejoue à l'envers (le sommaire redescend d'abord, puis la barre).
   Géométrie de la barre écrite en largeur + marge (et non margin: auto) pour que le glissement se transitionne.
   ============================================================================================ */
@media (min-width: 1101px) {
  .entete__barre {
    width: min(var(--largeur), 100%);
    max-width: none;
    margin-right: 0;
    margin-left: calc((100% - min(var(--largeur), 100%)) / 2);
    /* 0,4 s, accélération puis freinage (déplacement à l'écran), audit apple-design B7 (30/09/2026) */
    transition:
      width 0.4s var(--ease-doux) 0.1s,
      margin-left 0.4s var(--ease-doux) 0.1s;
  }

  /* Les liens peuvent céder leur place pendant le glissement (ils sont alors invisibles), sans jamais passer sur
     deux lignes : comprimés, « Savoir-faire » se coupait et la barre grandissait de 22 px (vu dans Chrome). */
  .entete__nav a {
    white-space: nowrap;
  }

  .entete__nav {
    min-width: 0;
    transition:
      opacity 0.3s var(--ease-doux) 0.55s,
      visibility 0s linear 0.55s;
  }

  .guide__sommaire {
    transition: top 0.4s var(--ease-doux);
  }

  .sommaire__carte {
    transition: max-height 0.4s var(--ease-doux);
  }

  [data-zone-guide] .entete__barre {
    width: calc(min(var(--largeur), 100%) - var(--decalage-guide));
    margin-left: calc((100% - min(var(--largeur), 100%)) / 2 + var(--decalage-guide));
    transition-delay: 0s;
  }

  [data-zone-guide] .entete__nav {
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.18s var(--ease-doux),
      visibility 0s linear 0.18s;
  }

  [data-zone-guide] .guide__sommaire {
    top: var(--entete-haut);
    transition-delay: 0.22s;
  }

  [data-zone-guide] .sommaire__carte {
    height: calc(100vh - 2 * var(--entete-haut));
    max-height: calc(100vh - 2 * var(--entete-haut));
    transition-delay: 0.22s;
  }
}

/* Entre 1101 et 1279 px, la barre décalée n'a pas la place des deux boutons : « Créer ma vidéo » s'efface
   (il reste dans le menu ☰), « Commander ma vidéo » demeure. */
@media (min-width: 1101px) and (max-width: 1279px) {
  [data-zone-guide] .entete__outil {
    display: none;
  }
}

.guide__contenu {
  display: grid;
  /* Colonne limitée à la place disponible : sans cela, elle prenait la largeur du contenu le plus
     large et les sections du guide dépassaient de l'écran sur téléphone (corrigé le 25/09/2026). */
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

/* Dans le guide, chaque section éditoriale devient une carte de lecture */
.guide__contenu .edito {
  padding: clamp(28px, 3.4vw, 46px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-grand);
  background: rgba(3, 30, 37, 0.3);
  scroll-margin-top: 110px;
}

.guide__contenu .edito .container {
  width: auto;
  margin: 0;
}

/* ============================================================================================
   ÉDITORIAL — sections de contenu (guide de l'accueil et pages intérieures)
   ============================================================================================ */

.edito h1 {
  font-family: var(--f-titre);
  /* Réduit de 10 % (demande de l'utilisateur, 25/09/2026) */
  font-size: clamp(2.15rem, 1.26rem + 2.7vw, 3.95rem);
  font-weight: 700;
  font-stretch: 106%;
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.edito h2 {
  font-family: var(--f-titre);
  font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.4rem);
  font-weight: 650;
  font-stretch: 104%;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.edito h3 {
  margin-top: 26px;
  font-family: var(--f-titre);
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.edito__corps > * + * {
  margin-top: 16px;
}

.edito__corps > h2 + * {
  margin-top: 20px;
}

.edito p,
.edito li {
  color: var(--texte-doux);
}

/* Les liens de texte sont jaunes — mais pas les boutons, dont le libellé devenait invisible
   sur le fond jaune (bouton vide en haut des pages intérieures, vu le 20/09/2026). */
.edito a:not(.bouton):not(.btn) {
  color: var(--vif);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

@media (hover: hover) and (pointer: fine) {
  .edito a:not(.bouton):not(.btn):hover {
    color: var(--vif-clair);
  }
}

.edito__chapeau {
  font-size: clamp(1.08rem, 0.98rem + 0.4vw, 1.3rem);
  line-height: 1.55;
  color: var(--texte) !important;
}

.edito__liste {
  display: grid;
  gap: 10px;
}

.edito__liste li {
  position: relative;
  padding-left: 22px;
}

.edito__liste li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--vif);
}

.edito__etapes {
  display: grid;
  gap: 12px;
  counter-reset: pas;
}

.edito__etapes li {
  position: relative;
  padding: 16px 18px 16px 58px;
  border: 1px solid var(--filet);
  border-radius: var(--r-petit);
  background: var(--verre);
  counter-increment: pas;
}

.edito__etapes li::before {
  content: counter(pas, decimal-leading-zero);
  position: absolute;
  left: 18px;
  top: 16px;
  font-family: var(--f-mono);
  font-size: 0.8rem;
  color: var(--vif);
}

.edito__mention {
  font-size: 0.86rem;
  color: var(--texte-pale) !important;
}

/* Tableaux */
.edito__tableau-cadre {
  overflow-x: auto;
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  background: rgba(1, 16, 15, 0.4);
}

.edito__tableau {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.93rem;
}

.edito__tableau caption {
  padding: 16px 20px 6px;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-align: left;
  color: var(--texte-pale);
}

.edito__tableau th,
.edito__tableau td {
  /* 16 px minimum en vertical : en dessous, les lignes se touchent à la lecture. */
  padding: 16px 22px;
  border-bottom: 1px solid var(--filet);
  text-align: left;
  vertical-align: top;
}

.edito__tableau thead th {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-clair);
}

.edito__tableau tbody th {
  font-weight: 600;
  color: #fff;
}

.edito__tableau td {
  color: var(--texte-doux);
}

.edito__tableau tbody tr:last-child th,
.edito__tableau tbody tr:last-child td {
  border-bottom: 0;
}

@media (hover: hover) and (pointer: fine) {
  .edito__tableau tbody tr:hover {
    background: rgba(170, 232, 240, 0.04);
  }
}

/* Questions (FAQ) */
.edito__faq {
  display: grid;
  gap: 10px;
}

.edito-question {
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  background: var(--verre);
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.edito-question[open] {
  border-color: rgba(228, 225, 53, 0.35);
  background: rgba(170, 232, 240, 0.08);
}

.edito-question summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-family: var(--f-titre);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  cursor: pointer;
  list-style: none;
}

.edito-question summary::-webkit-details-marker {
  display: none;
}

.edito-question summary::after {
  content: "+";
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--filet-fort);
  border-radius: 50%;
  font-family: var(--f-texte);
  font-size: 1.1rem;
  font-weight: 400;
  transition: transform 0.3s var(--ease-sortie), background-color 0.25s ease, color 0.25s ease;
}

.edito-question[open] summary::after {
  transform: rotate(45deg);
  background: var(--vif);
  color: var(--encre-vif);
  border-color: var(--vif);
}

.edito-question > p,
.edito-question > div,
.edito-question > ul {
  padding: 0 22px 20px;
}

/* Liens du silo */
.edito__silo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}

.edito__silo li {
  padding: 14px 16px;
  border: 1px solid var(--filet);
  border-radius: var(--r-petit);
  background: var(--verre);
  font-size: 0.92rem;
}

.edito__silo a {
  font-weight: 600;
}

/* Estimateur (outil de budget) */
.edito__outil {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 26px;
  padding: 26px;
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  background: rgba(1, 16, 15, 0.45);
}

.guide__contenu .edito__outil {
  width: auto !important;
}

.edito-outil__reglage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.edito-outil__question {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-pale) !important;
}

.edito-outil__choix {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.edito-outil__bouton {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-pilule);
  background: transparent;
  font-size: 0.9rem;
  color: var(--texte-doux);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .edito-outil__bouton:hover {
    border-color: rgba(170, 232, 240, 0.45);
    color: #fff;
  }
}

.edito-outil__bouton[aria-checked="true"],
.edito-outil__bouton[aria-pressed="true"] {
  border-color: var(--vif);
  background: var(--vif);
  color: var(--encre-vif);
  font-weight: 600;
}

.edito-outil__resultat {
  display: grid;
  gap: 6px;
  padding: 20px 22px;
  border-radius: var(--r-petit);
  background: rgba(228, 225, 53, 0.08);
  border: 1px solid rgba(228, 225, 53, 0.28);
}

.edito-outil__montant {
  font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem) !important;
  font-weight: 500;
  color: #fff !important;
}

.edito-outil__delai {
  color: var(--texte-doux);
}

.edito-outil__note {
  font-size: 0.84rem;
  color: var(--texte-pale) !important;
}

/* ============================================================================================
   PAGES INTÉRIEURES — fil d'Ariane, en-tête de page, sections éditoriales
   ============================================================================================ */

.fil {
  padding: 118px 0 0;
  background: var(--fond-1);
}

.fil__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--texte-pale);
}

.fil__liste li + li::before {
  content: "/";
  margin-right: 6px;
  color: var(--vif);
}

.fil__liste a {
  color: var(--texte-doux);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .fil__liste a:hover {
    color: #fff;
  }
}

/* Sections éditoriales des pages intérieures : une colonne de lecture large et aérée */
main > section.edito {
  padding-block: clamp(48px, 6vw, 84px);
  background: var(--fond-1);
}

main > section.edito:nth-of-type(even) {
  background: var(--fond-2);
}

main > section.edito .edito__corps {
  max-width: 880px;
}

main > section.edito--tete {
  padding-block: clamp(36px, 5vw, 60px) clamp(56px, 7vw, 96px);
  background:
    radial-gradient(ellipse 55% 80% at 88% 0%, rgba(18, 181, 201, 0.2) 0%, rgba(18, 181, 201, 0) 65%),
    var(--fond-1);
}

main > section.edito--tete .edito__corps {
  max-width: 980px;
}

.edito__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px !important;
}

.edito__preuves {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 20px !important;
  font-size: 0.86rem;
}

.edito__preuves li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--texte-doux);
}

.edito__preuves li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vif);
}

/* Formulaire de la page de commande (seul formulaire du site) */
.contact-form {
  display: grid;
  gap: 18px;
  margin-top: 28px;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--filet);
  border-radius: var(--r-grand);
  background: var(--verre);
}

.contact-form__ligne {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.contact-form__groupe,
.contact-form__champ {
  display: grid;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--texte);
}

.contact-form__champ--large {
  grid-column: 1 / -1;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border: 1px solid var(--filet-fort);
  border-radius: 14px;
  background: rgba(1, 16, 15, 0.55);
  font: inherit;
  font-weight: 400;
  color: #fff;
}

.contact-form textarea {
  min-height: 150px;
  resize: vertical;
}

.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--vif);
  outline-offset: 1px;
}

.contact-form__choix {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contact-form__choix label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-pilule);
  font-weight: 400;
  cursor: pointer;
}

.contact-form__choix input {
  width: auto;
  min-height: 0;
  accent-color: var(--vif);
}

.contact-form__note {
  font-size: 0.88rem;
  color: var(--texte-pale);
}

/* Page du brief (28/09/2026) : cinq blocs numérotés, cadres doux au lieu du cadre natif des groupes de champs */
.brief {
  /* colonne qui rétrécit avec l'écran : sinon la grille prenait la largeur du menu déroulant le plus long (347 px)
     et les blocs sortaient de la carte au téléphone (vu le 28/09/2026) */
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.brief__bloc {
  display: grid;
  /* un groupe de champs garde par défaut la largeur de son contenu le plus long (menu déroulant de la commande) :
     sans ces deux règles, les blocs dépassaient de leur carte de 20 px au téléphone (vu le 28/09/2026) */
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 14px;
  margin: 0;
  padding: 20px 22px 22px;
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  background: rgba(1, 16, 15, 0.28);
}

.brief__bloc legend {
  padding: 0 10px;
  font-family: var(--f-titre);
  font-size: 1.05rem;
  font-weight: 650;
  color: #fff;
}

.brief__aide {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--texte-doux);
}

.contact-form__question {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 4px 0 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--texte);
}

.brief__ecouter {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--vif);
}

.brief__voix {
  display: grid;
  gap: 8px;
}

.brief__voix[hidden] {
  display: none;
}

/* Offre d'essai : une seule vidéo, les champs des vidéos 2 et 3 sont masqués (js/main.js, formulaireBrief) */
.brief .contact-form__champ[hidden] {
  display: none;
}

.brief__envoi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Statut en tête de page : invitation neutre, puis « Paiement reçu » quand le client arrive de Stripe */
.brief__statut {
  display: grid;
  gap: 4px;
  max-width: 720px;
  margin-top: 22px;
  padding: 16px 20px;
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-carte);
  background: rgba(170, 232, 240, 0.06);
  font-size: 0.95rem;
  color: var(--texte-doux);
}

.brief__statut a {
  color: var(--vif);
}

.brief__statut-titre {
  font-weight: 600;
  color: #fff;
}

.brief__statut--paye {
  border-color: rgba(228, 225, 53, 0.5);
  background: rgba(228, 225, 53, 0.08);
}

.brief__statut--paye .brief__statut-titre {
  color: var(--vif);
}

/* ============================================================================================
   ÉDITORIAL · Cartes et blocs de prix (guide de l'accueil, pages intérieures)
   Ces classes existaient dans le balisage sans aucune règle : le texte se retrouvait collé au
   bord, sans cadre ni respiration (corrigé le 20/09/2026).
   ============================================================================================ */

.edito__cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(16px, 1.6vw, 24px);
  margin-top: clamp(24px, 2.6vw, 38px);
}

.edito-carte {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 2.4vw, 32px);
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  background: var(--fond-2);
}

.edito-carte h3 {
  font-family: var(--f-titre);
  font-size: 1.22rem;
  font-weight: 650;
  font-stretch: 104%;
  line-height: 1.16;
  letter-spacing: -0.02em;
}

.edito-carte h3 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease-doux);
}

@media (hover: hover) and (pointer: fine) {
  .edito-carte h3 a:hover {
    border-bottom-color: var(--vif);
  }
}

.edito-carte p {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--texte-doux);
}

.edito-carte .edito__liste {
  margin: 0;
}

.edito-carte__prix {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--filet);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--vif);
}

.edito__grille-prix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(14px, 1.4vw, 20px);
  margin-top: clamp(22px, 2.4vw, 32px);
}

.edito-prix {
  display: grid;
  gap: 6px;
  padding: clamp(20px, 2vw, 26px);
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  background: var(--fond-2);
}

.edito-prix__libelle {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--texte-doux);
}

.edito-prix__valeur {
  font-family: var(--f-titre);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
}

.edito-prix__note {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--texte-pale);
}

/* ============================================================================================
   Dernier plan (appel final)
   ============================================================================================ */

.portail {
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  background: var(--fond-1);
}

.portail__lumiere {
  position: absolute;
  left: 50%;
  bottom: -60%;
  z-index: var(--z-deco);
  width: 120%;
  height: 120%;
  translate: -50% 0;
  background: radial-gradient(ellipse 45% 45% at 50% 50%, rgba(18, 181, 201, 0.35) 0%, rgba(18, 181, 201, 0.08) 45%, rgba(18, 181, 201, 0) 70%);
  pointer-events: none;
}

.portail__contenu {
  position: relative;
  z-index: var(--z-contenu);
  display: grid;
  justify-items: center;
}

.portail h2 {
  max-width: 900px;
  font-family: var(--f-titre);
  font-size: clamp(2.6rem, 1.4rem + 4vw, 5.6rem);
  font-weight: 700;
  font-stretch: 106%;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.portail__texte {
  max-width: 560px;
  margin-top: 22px;
  font-size: 1.1rem;
  color: var(--texte-doux);
}

.portail__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
}

/* ============================================================================================
   Pied de page
   ============================================================================================ */

.pied {
  position: relative;
  overflow: hidden;
  /* De l'air sous le filigrane : sans lui, les capitales et la barre oblique sont rognées. */
  padding-block: clamp(64px, 8vw, 110px) 0;
  border-top: 1px solid var(--filet);
  background: var(--fond-0);
}

.pied__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 48px;
}

.pied__marque {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 16px;
}

.pied__marque .entete__marque {
  font-size: 1.4rem;
}

.pied__signature {
  max-width: 320px;
  color: var(--texte-doux);
}

.pied__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.pied__titre {
  margin-bottom: 14px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-pale);
}

.pied__nav ul {
  display: grid;
  gap: 10px;
}

.pied__nav a {
  font-size: 0.94rem;
  color: var(--texte-doux);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .pied__nav a:hover {
    color: var(--vif);
  }
}

/* Liens légaux (28/09/2026, demande de l'utilisateur) : sortis de la colonne « Informations », un conteneur à quatre
   colonnes, un lien par colonne (deux colonnes au téléphone) */
.pied__legal {
  margin-top: 48px;
}

.pied__legal ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  overflow: hidden;
}

.pied__legal li + li {
  border-left: 1px solid var(--filet);
}

.pied__legal a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 60px;
  padding: 14px 16px;
  font-size: 0.92rem;
  text-align: center;
  color: var(--texte-doux);
  text-decoration: none;
  transition:
    background-color 0.25s var(--ease-doux),
    color 0.25s var(--ease-doux);
}

@media (hover: hover) and (pointer: fine) {
  .pied__legal a:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--vif);
  }
}

.pied__legal svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--filet);
  font-size: 0.82rem;
  color: var(--texte-pale);
}

.pied__geant {
  margin-top: 30px;
  /* L'air se mesure sur la taille du mot lui-même : sinon il est rogné sur grand écran. */
  padding-bottom: 0.22em;
  font-family: var(--f-titre);
  /* Le mot doit tenir en entier : coupé aux deux bords, il ne se lisait plus (vu le 20/09/2026). */
  font-size: clamp(2.4rem, 10.6vw, 9.2rem);
  font-weight: 800;
  font-stretch: 118%;
  /* La barre oblique descend sous la ligne : un peu d'air, repris en marge négative. */
  line-height: 1;
  letter-spacing: -0.04em;
  text-align: center;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(170, 232, 240, 0.16);
  user-select: none;
}

.pied__geant i {
  font-style: normal;
  -webkit-text-stroke-color: rgba(228, 225, 53, 0.4);
}

/* ================================================================================================
   IMAGES DE CONTENU (regle R3 du plan de finalisation)
   Toute page optimisee porte des images : photographies du studio et de ses clients, avec legende.
   Le ratio est impose en CSS pour qu'aucune image ne decale la mise en page pendant son chargement.
   ================================================================================================ */
.figure-seo {
  margin: clamp(28px, 3.6vw, 52px) 0;
}
.figure-seo__cadre {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-carte);
  border: 1px solid var(--filet);
  background: var(--fond-2);
}
.figure-seo__image {
  display: block;
  width: 100%;
  height: auto;
  /* 16/9 plutot que 3/2 : en 3/2 une image pleine largeur depassait la hauteur de l'ecran et on
     ne voyait plus que le milieu du cadre (defaut vu dans le vrai Chrome le 20/09/2026). */
  aspect-ratio: 16 / 9;
  max-height: 62vh;
  object-fit: cover;
}
.figure-seo--carre .figure-seo__image {
  aspect-ratio: 1 / 1;
}
.figure-seo__legende {
  margin-top: 12px;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--texte-pale);
  line-height: 1.5;
}
/* Deux ou trois images cote a cote : portraits de temoignages, avant/apres. */
.figures-seo {
  display: grid;
  gap: clamp(14px, 1.8vw, 24px);
  margin: clamp(28px, 3.6vw, 52px) 0;
}
@media (min-width: 760px) {
  .figures-seo--trois {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .figures-seo--deux {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.figures-seo .figure-seo {
  margin: 0;
}

/* Image d'en-tete d'une page de silo : posee juste apres le hero, pleine largeur du conteneur. */
.figure-seo--page {
  margin: 0 0 clamp(24px, 3vw, 44px);
}
.figure-seo--page .figure-seo__image {
  aspect-ratio: 21 / 9;
}
@media (max-width: 700px) {
  .figure-seo--page .figure-seo__image {
    aspect-ratio: 3 / 2;
  }
}

/* ============================================================================================
   ACCUEIL · Clients — bandeau en boucle, de droite à gauche, bords fondus et floutés (21/09/2026)
   Une carte par client : image du film livré, logo, mot de satisfaction. Défilement : animations.css.
   ============================================================================================ */

main > section.clients {
  position: relative;
  isolation: isolate;
  padding-block: clamp(48px, 5vw, 76px) clamp(56px, 6vw, 92px);
  /* Bandeaux blancs de séparation en haut et en bas (30/09/2026, demande de l'utilisateur) : le même trait blanc épais
     que la mosaïque « Une vidéo de motion design… dès 33 € HT » */
  border-top: var(--trait-mosaique) solid #fff;
  border-bottom: var(--trait-mosaique) solid #fff;
  /* Fond « scène » (30/09/2026, demande de l'utilisateur : le fond clair ne convainquait pas, « un fond plus design ») :
     sarcelle profond de la charte, halo sarcelle derrière les cartes (elles se détachent), lumière jaune de la marque en
     haut à droite, et une fine grille d'atelier (ci-dessous) qui s'efface vers les bords. Cartes inchangées. */
  background:
    radial-gradient(ellipse 62% 58% at 50% 64%, rgba(29, 109, 123, 0.58) 0%, rgba(29, 109, 123, 0) 72%),
    radial-gradient(ellipse 34% 42% at 92% 6%, rgba(228, 225, 53, 0.1) 0%, rgba(228, 225, 53, 0) 70%),
    radial-gradient(ellipse 40% 50% at 4% 96%, rgba(18, 181, 201, 0.12) 0%, rgba(18, 181, 201, 0) 70%),
    linear-gradient(180deg, #0a2a33 0%, #0b3540 52%, #082b34 100%);
  overflow: hidden;
}

/* La grille d'atelier : lignes fines tous les 56 px, visibles au centre, fondues vers les bords */
main > section.clients::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(170, 232, 240, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(170, 232, 240, 0.055) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 55%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 65% at 50% 55%, #000 0%, transparent 75%);
  pointer-events: none;
}

.clients__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 32px;
  margin-bottom: clamp(26px, 3vw, 40px);
}

.clients__tete .surtitre {
  color: var(--teal-clair);
}

.clients__tete h2 {
  color: var(--texte);
  font-family: var(--f-titre);
  font-size: clamp(1.8rem, 1.1rem + 2vw, 2.8rem);
  font-weight: 650;
  font-stretch: 104%;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* Pause et reprise (visible seulement quand le script tourne) */
.clients__pause {
  display: none;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 12px;
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-pilule);
  /* Fond sombre de la section (30/09/2026) : pastille de verre clair */
  background: rgba(170, 232, 240, 0.07);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-doux);
  cursor: pointer;
  transition: border-color 0.3s var(--ease-doux), color 0.3s var(--ease-doux);
}

.js .clients__pause {
  display: inline-flex;
}

@media (hover: hover) and (pointer: fine) {
  .clients__pause:hover {
    border-color: var(--teal-clair);
    color: var(--texte);
  }
}

.clients__pause:focus-visible {
  outline: 2px solid var(--vif);
  outline-offset: 3px;
}

.clients__icone {
  width: 16px;
  height: 16px;
  fill: var(--teal-clair);
}

.clients__icone--lecture,
.clients__pause[aria-pressed="true"] .clients__icone--pause {
  display: none;
}

.clients__pause[aria-pressed="true"] .clients__icone--lecture {
  display: block;
}

.clients__bandeau {
  position: relative;
  /* Bords fondus : la piste s'efface sur les deux côtés… */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}

/* …et s'y floute : deux voiles de flou d'arrière-plan, eux-mêmes fondus vers l'intérieur. */
.clients__bandeau::before,
.clients__bandeau::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 12%;
  pointer-events: none;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.clients__bandeau::before {
  left: 0;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent);
  mask-image: linear-gradient(90deg, #000, transparent);
}

.clients__bandeau::after {
  right: 0;
  -webkit-mask-image: linear-gradient(270deg, #000, transparent);
  mask-image: linear-gradient(270deg, #000, transparent);
}

.clients__defile {
  display: flex;
  width: max-content;
}

.clients__liste {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 6px 20px 6px 0;
  list-style: none;
}

.client {
  flex: none;
  /* Quatre cartes doivent couvrir tout l'écran pour que la boucle ne laisse jamais de vide (1920 px compris). */
  width: clamp(300px, 26vw, 520px);
}

.client__carte {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  /* Bordure bien visible (30/09/2026, demande de l'utilisateur) : sur le fond « scène » sombre, les cartes sombres se
     confondaient ; un filet sarcelle clair marque la limite de chaque carte (même teinte que la charte). */
  border: 1px solid rgba(116, 220, 232, 0.42);
  border-radius: var(--r-carte);
  /* Carte sombre et pleine sur le fond de la section (28/09/2026) */
  background: var(--fond-2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 22px 44px -30px rgba(4, 33, 42, 0.6);
  transition: border-color 0.35s var(--ease-doux);
}

@media (hover: hover) and (pointer: fine) {
  .client__carte:hover {
    border-color: rgba(116, 220, 232, 0.72);
  }
}

/* Le film livré : extrait réel en boucle (16:9), ou film vertical présenté dans un téléphone. */
.client__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--fond-3);
}

.client__film {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--fond-3);
}

.client__media--vertical {
  background: radial-gradient(90% 120% at 50% 110%, rgba(18, 181, 201, 0.3), rgba(18, 181, 201, 0) 62%), var(--fond-3);
}

/* Téléphone centré, 86 % de la hauteur de la carte (positionné : une hauteur en % ne se calcule pas dans une
   rangée de grille automatique — vu dans Chrome le 27/09/2026, le téléphone débordait). */
.client__telephone {
  position: absolute;
  top: 7%;
  bottom: 7%;
  left: 50%;
  transform: translateX(-50%);
  aspect-ratio: 9 / 16;
  padding: 4px;
  border-radius: 16px;
  background: #040a0b;
  box-shadow: 0 0 0 1px rgba(170, 232, 240, 0.24), 0 20px 40px -18px rgba(0, 0, 0, 0.85);
}

.client__telephone .client__film {
  border-radius: 12px;
}

.client__corps {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px 20px;
}

/* Logos des cartes calés sur la hauteur des LETTRES (30/09/2026, demande de l'utilisateur : Cbiza et JeConduis.fr sont
   les bonnes tailles, les autres étaient trop grands) : chaque logo peut porter sa hauteur (--logo-h, dans le HTML),
   centré dans une rangée de 26 px — les logos restent au même niveau et les boutons ne bougent pas. */
.client__logo {
  width: auto;
  height: var(--logo-h, 26px);
  margin-block: calc((26px - var(--logo-h, 26px)) / 2);
  align-self: flex-start;
}

/* La vidéo, en deux lignes au plus (30/09/2026, demande de l'utilisateur : le site vend des vidéos, la carte ne décrit
   que la vidéo — « Vidéo motion design », sa durée et son format ; l'ancien paragraphe et la ligne sous le bouton,
   trop denses, sont retirés). Chaque ligne tient sur une ligne (nowrap) : tous les boutons restent au même niveau. */
.client__video {
  display: grid;
  gap: 4px;
  margin: 0;
}

.client__video-nom {
  font-family: var(--f-titre);
  font-size: 1.08rem;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
  white-space: nowrap;
}

.client__video-duree {
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--texte-doux);
  white-space: nowrap;
}

/* Films verticaux sur deux colonnes (28/09/2026, demande de l'utilisateur) : le téléphone, agrandi et lisible, à gauche ;
   le texte à droite (pastille du son, logo, ce que montre le film, bouton, format). Toute la carte ouvre le film. Les
   films 16:9 gardent leur carte : film en haut, texte dessous. */
.client--vertical {
  /* Largeur = téléphone + colonne du texte (28/09/2026 : colonne du texte réduite, le téléphone ne change pas) */
  width: auto;
}

.client__carte--vertical {
  flex-direction: row;
  cursor: pointer;
}

.client__carte--vertical .client__media--vertical {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  aspect-ratio: auto;
  padding: 16px;
  /* Colonne du téléphone dans la teinte sarcelle du héros (28/09/2026, demande de l'utilisateur) : centre clair,
     haut plus sombre, comme le fond de la première section. */
  background:
    radial-gradient(ellipse 90% 70% at 50% 56%, rgba(29, 109, 123, 0.95) 0%, rgba(29, 109, 123, 0) 74%),
    linear-gradient(180deg, var(--sarcelle-fonce) 0%, var(--sarcelle-1) 55%, var(--sarcelle-1) 100%);
}

.client__carte--vertical .client__telephone {
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  height: clamp(300px, 24vw, 420px);
  transform: none;
}

.client__carte--vertical .client__corps {
  flex: none;
  /* Contenu centré en hauteur (30/09/2026) : pastille du son, logo, deux lignes, bouton — mêmes hauteurs d'une carte à
     l'autre, donc logos et boutons exactement au même niveau sur toutes les cartes. */
  justify-content: center;
  gap: 18px;
  /* Marge intérieure gauche de 22 px (28/09/2026, demande de l'utilisateur : textes et bouton trop collés au bord) ;
     la colonne s'élargit d'autant, la largeur du texte ne change pas. */
  width: clamp(236px, 18vw, 296px);
  padding: 22px 22px 22px 22px;
}

/* Un logo plus large que la colonne (GoFreelance) se réduit sans se déformer */
.client__carte--vertical .client__logo {
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

.client__carte--vertical .client__son,
.client__carte--vertical .client__lecture {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  align-self: flex-start;
}

@media (hover: hover) and (pointer: fine) {
  .client__carte--vertical:hover .lecture-coquille {
    border-color: #fff;
    background-color: rgba(255, 255, 255, 0.3);
  }
}

@media (hover: hover) and (pointer: fine) {
  .client__carte--vertical:hover .lecture {
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.6), 0 0 26px rgba(228, 225, 53, 0.55);
  }
}

/* Phrase d'invitation sous le titre de la section (28/09/2026) */
.clients__intro {
  max-width: 640px;
  margin-top: 12px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--texte-doux);
}

/* Pastille du son, en haut à gauche du film (28/09/2026) : les films avec voix off sont mis en avant (demande de
   l'utilisateur) ; les autres portent « Musique ». Aplat sombre sans flou (posé sur une vidéo qui tourne). */
.client__son {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: var(--r-pilule);
  background: rgba(2, 20, 25, 0.74);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  pointer-events: none;
}

.client__son-icone {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--vif);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================================================
   ACCUEIL · Logos des marques clientes (28/09/2026, demande de l'utilisateur) — dans la section sous le héros,
   entre le titre et les films. Logos monochromes à la couleur du site (tools/logos-marques.mjs), taille écrite dans
   le HTML (surface à peu près égale d'un logo à l'autre), filets fins au-dessus et au-dessous, bords fondus.
   Défilement de gauche à droite (sens inverse des films) : animations.css.
   ============================================================================================ */
.marques {
  position: relative;
  margin-bottom: clamp(44px, 5vw, 76px);
  padding-block: 16px;
  border-block: 1px solid var(--filet-sombre);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.marques__defile {
  display: flex;
  width: max-content;
}

.marques__liste {
  display: flex;
  align-items: center;
  gap: clamp(40px, 4.2vw, 72px);
  margin: 0;
  padding: 0 clamp(40px, 4.2vw, 72px) 0 0;
  list-style: none;
}

.marque {
  display: flex;
  flex: none;
  align-items: center;
  height: 48px;
}

.marque__logo {
  display: block;
  /* Taille écrite dans le HTML, logo par logo (30/09/2026, demande de l'utilisateur) : même hauteur de LETTRES pour
     tous (environ 10,8 px, comme Cbiza, Viobli, Mageti, Création-site.pro et Jardinier.site) — voir
     docs/sites/motion-design-pro/logos-marques.json (« hauteur ») et tools/logos-marques.mjs */
  max-width: none;
  /* Fond clair (28/09/2026) : le logo monochrome clair passe en encre sombre */
  filter: brightness(0);
  opacity: 0.6;
  transition: opacity 0.3s var(--ease-doux);
}

@media (hover: hover) and (pointer: fine) {
  .marque__logo:hover {
    opacity: 0.9;
  }
}

/* ============================================================================================
   ACCUEIL · Témoignages signés par les clients (logo à la place du portrait, 21/09/2026)
   ============================================================================================ */

.temoignage blockquote {
  margin: 0;
}

.temoignage__logo {
  width: auto;
  height: 24px;
  flex: none;
}

.temoignage__role {
  padding-left: 14px;
  border-left: 1px solid var(--filet-fort);
  font-size: 0.86rem;
  color: var(--texte-doux);
}

/* ============================================================================================
   PAGES · Avis clients (tarif, commande, contact — 21/09/2026)
   ============================================================================================ */

.avis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 26px;
}

.avis__carte {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 24px;
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  background: var(--verre);
}

.avis__carte blockquote {
  margin: 0;
}

.avis__carte blockquote p {
  font-family: var(--f-titre);
  font-size: 1.06rem;
  font-weight: 500;
  line-height: 1.45;
  color: #fff;
}

.avis__carte figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  margin-top: auto;
}

.avis__logo {
  width: auto;
  height: 20px;
}

.avis__film {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vif);
}

/* ============================================================================================
   WhatsApp — bouton flottant de toutes les pages (même numéro sur les quatre sites, jamais affiché ;
   style propre au site A : pastille de verre sombre, point jaune-vert « en ligne »). 21/09/2026.
   ============================================================================================ */

.whatsapp {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: var(--z-whatsapp);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 7px 20px 7px 7px;
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-pilule);
  background: rgba(2, 20, 25, 0.92);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9);
  font-family: var(--f-texte);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--texte);
  text-decoration: none;
  transition: border-color 0.3s var(--ease-doux), translate 0.35s var(--ease-sortie);
}

@media (hover: hover) and (pointer: fine) {
  .whatsapp:hover {
    border-color: var(--vif);
    translate: 0 -2px;
  }
}

.whatsapp:focus-visible {
  outline: 2px solid var(--vif);
  outline-offset: 3px;
}

.whatsapp__icone {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: #25d366;
}

.whatsapp__icone svg {
  width: 23px;
  height: 23px;
  fill: #fff;
}

.whatsapp__texte {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  line-height: 1.3;
  white-space: nowrap;
}

.whatsapp__point {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--vif);
  box-shadow: 0 0 0 3px rgba(228, 225, 53, 0.18);
}

/* ============================================================================================
   Boutons principaux (21/09/2026, demande de l'utilisateur) : deux icônes, et la flèche de droite posée
   sur une pastille blanche inscrite à 6 px du bord (bordure transparente de 1 px + 5 px de marge). Sa
   largeur vaut la hauteur du bouton moins 12 px : même centre que l'arrondi du bouton, courbes parallèles.
   ============================================================================================ */

.bouton--vif,
.btn-primary {
  padding-right: 5px;
}

.bouton--vif .bouton__fleche,
.btn-primary .btn-icon-right {
  box-sizing: content-box;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  padding: 11px; /* 16 + 2 × 11 = 38 px = 50 − 12 */
  border-radius: 50%;
  background: #fff;
  color: var(--encre-vif);
}

.bouton--vif.bouton--petit .bouton__fleche {
  width: 14px;
  height: 14px;
  padding: 8px; /* 30 px = 42 − 12 */
}

.bouton--vif.bouton--grand .bouton__fleche,
.btn-primary.btn-lg .btn-icon-right {
  width: 18px;
  height: 18px;
  padding: 14px; /* 46 px = 58 − 12 */
}

/* Bouton plus large que son contenu (pleine largeur, téléphone) : la pastille vient contre l'arrondi droit ;
   icône et texte restent centrés dans l'espace qui reste (les deux marges automatiques se partagent la
   place). Sans place libre, ces marges valent zéro : rien ne bouge. */
.bouton--vif .bouton__icone,
.bouton--vif .bouton__fleche,
.btn-primary .btn-icon-left,
.btn-primary .btn-icon-right {
  margin-left: auto;
}

/* Au survol, la pastille reste en place ; seule la flèche avance. */
@media (hover: hover) and (pointer: fine) {
  .bouton--vif:hover .bouton__fleche,
  .btn-primary:hover .btn-icon-right {
    transform: none;
  }
}

.bouton--vif .bouton__fleche path,
.btn-primary .btn-icon-right path {
  transition: transform 0.25s var(--ease-sortie);
}

@media (hover: hover) and (pointer: fine) {
  .bouton--vif:hover .bouton__fleche path,
  .btn-primary:hover .btn-icon-right path {
    transform: translateX(2px);
  }
}

/* « Ce qui sort du studio » : les boutons respirent sous les vignettes (demande du 21/09/2026). */
.cine__grille-action {
  margin-top: clamp(14px, 3.4vh, 34px);
}

/* ============================================================================================
   Lecteur plein écran des films (27/09/2026) : un seul lecteur pour tous les films du site. Le 1080p n'est demandé
   qu'à l'ouverture ; il s'ouvre avec le son (le visiteur a cliqué pour regarder), choix mémorisé par js/main.js.
   ============================================================================================ */
.lecteur {
  /* Largeur calée sur la hauteur disponible : le film 16:9 remplit son cadre, sans bandes noires */
  width: min(92vw, 1400px, calc(76vh * 16 / 9 + 20px));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: #fff;
}

.lecteur::backdrop {
  background: rgba(1, 10, 11, 0.92);
}

/* Le conteneur du film : cadre épais aux coins très arrondis, titre et bouton de fermeture en tête */
.lecteur__cadre {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border-radius: 34px;
  background: linear-gradient(180deg, #0a262c, #03151a);
  box-shadow:
    0 0 0 1px var(--filet-fort),
    inset 0 1px 0 rgba(170, 232, 240, 0.14),
    0 60px 120px -40px rgba(0, 0, 0, 0.95);
}

.lecteur__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-left: 14px;
}

.lecteur__titre {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}

.lecteur__fermer {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--filet-fort);
  border-radius: 50%;
  background: rgba(2, 20, 25, 0.85);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.25s var(--ease-doux), color 0.25s var(--ease-doux);
}

@media (hover: hover) and (pointer: fine) {
  .lecteur__fermer:hover {
    background: var(--vif);
    color: #121606;
  }
}

.lecteur__fermer:focus-visible {
  background: var(--vif);
  color: #121606;
}

.lecteur__fermer:focus-visible {
  outline: 2px solid var(--vif);
  outline-offset: 3px;
}

.lecteur__fermer svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.lecteur__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 25px;
  background: #000;
}

/* Film vertical : la largeur du lecteur se déduit de la hauteur disponible (le cadre suit le film) */
.lecteur[data-format="9:16"] {
  width: min(92vw, calc(min(76vh, 1100px) * 9 / 16 + 20px));
}

.lecteur[data-format="9:16"] .lecteur__video {
  aspect-ratio: 9 / 16;
}

html:has(.lecteur[open]) {
  overflow: hidden;
}

/* ============================================================================================
   THÈME SARCELLE (28/09/2026, demande de l'utilisateur) — la teinte de « Ce qui sort du studio », un peu plus claire que
   les fonds presque noirs du site : héros (en dégradé : haut et bords plus foncés, milieu plus clair), « Cinq
   démonstrations », « Quatre chiffres » et offres (fond seulement : cartes et textes gardent leur dessin). Sur ce fond
   plus clair, les textes secondaires sont un peu plus opaques pour garder le contraste (4,5:1 au moins).
   ============================================================================================ */
.theme-sarcelle {
  --texte-doux: rgba(226, 245, 247, 0.86);
  --texte-pale: rgba(226, 245, 247, 0.72);
}

/* Lumière du centre gardée telle quelle ; extrémités un peu plus sombres (28/09/2026, demande de l'utilisateur :
   « pas trop sombre, pas noir ») : voile elliptique plus dense et bandes latérales. */
.ouverture.theme-sarcelle {
  background:
    radial-gradient(ellipse 58% 62% at 50% 58%, rgba(29, 109, 123, 0.95) 0%, rgba(29, 109, 123, 0) 72%),
    linear-gradient(90deg, rgba(6, 40, 48, 0.38) 0%, rgba(6, 40, 48, 0) 20%, rgba(6, 40, 48, 0) 80%, rgba(6, 40, 48, 0.38) 100%),
    radial-gradient(ellipse 118% 104% at 50% 58%, rgba(6, 40, 48, 0) 48%, rgba(6, 40, 48, 0.95) 100%),
    linear-gradient(180deg, var(--sarcelle-fonce) 0%, var(--sarcelle-1) 46%, var(--sarcelle-1) 100%);
}

.savoir.theme-sarcelle {
  background:
    radial-gradient(ellipse 50% 40% at 90% 0%, rgba(18, 181, 201, 0.12) 0%, rgba(18, 181, 201, 0) 70%),
    linear-gradient(180deg, var(--sarcelle-0), var(--sarcelle-1));
}

.chiffres.theme-sarcelle {
  background: linear-gradient(180deg, var(--sarcelle-1), var(--sarcelle-0));
}

.offres.theme-sarcelle {
  background:
    radial-gradient(ellipse 60% 60% at 50% 110%, rgba(18, 181, 201, 0.16) 0%, rgba(18, 181, 201, 0) 70%),
    linear-gradient(180deg, var(--sarcelle-0), var(--sarcelle-1));
}

/* ============================================================================================
   ACCUEIL · Commandez la vôtre — mosaïque de quatre films 16:9 (28/09/2026, demande de l'utilisateur) : fond gris
   verté, pleine largeur, deux colonnes sur deux lignes ; le trait blanc épais entre les cases est le fond blanc de la
   grille, vu par l'espace qui les sépare. Section de conversion : promesse, deux appels à l'action, garanties, puis un
   appel dans chaque case. Contrastes sur le gris verté : --encre 13,9:1, --encre-douce 6,5:1, --teal-fonce 4,5:1.
   ============================================================================================ */
main > section.mosaique {
  padding-block: clamp(56px, 6vw, 88px) 0;
  background: var(--gris-verte);
  color: var(--encre);
}

.mosaique__tete {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: end;
  gap: 24px 56px;
  margin-bottom: clamp(36px, 4vw, 56px);
}

.mosaique__tete .surtitre {
  color: var(--teal-fonce);
}

.mosaique__tete h2 {
  font-family: var(--f-titre);
  font-size: clamp(1.9rem, 1.2rem + 2.1vw, 3rem);
  font-weight: 650;
  font-stretch: 104%;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.mosaique__intro {
  max-width: 600px;
  margin-top: 14px;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--encre-douce);
}

.mosaique__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.mosaique__preuves {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 20px;
  width: 100%;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.86rem;
  color: var(--encre-douce);
}

.mosaique__preuves li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mosaique__preuves li::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.3 2.3 2.2 4.7-5' fill='none' stroke='%230b6f7c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat, rgba(11, 111, 124, 0.12);
}

/* Icône dessinée au trait (panier, étiquette) dans un bouton */
.bouton__icone--trait {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Bouton secondaire sur fond clair : contour sombre */
.bouton--contour {
  border-color: rgba(10, 34, 39, 0.28);
  background: rgba(255, 255, 255, 0.55);
  color: var(--encre);
}

@media (hover: hover) and (pointer: fine) {
  .bouton--contour:hover {
    border-color: var(--encre);
    background: #fff;
  }
}

/* Bouton jaune de l'en-tête de la section, sur le gris verté trop clair pour lui : ombre portée sombre tout autour
   (28/09/2026, demande de l'utilisateur) pour qu'il se détache du fond. */
.mosaique__actions .bouton--vif {
  box-shadow:
    0 0 0 1px rgba(10, 34, 39, 0.22),
    0 12px 30px -8px rgba(4, 33, 42, 0.55),
    0 3px 10px rgba(4, 33, 42, 0.28);
}

@media (hover: hover) and (pointer: fine) {
  .mosaique__actions .bouton--vif:hover {
    box-shadow:
      0 0 0 1px rgba(10, 34, 39, 0.3),
      0 16px 36px -8px rgba(4, 33, 42, 0.6),
      0 4px 12px rgba(4, 33, 42, 0.3);
  }
}

/* Bouton sombre (appel dans chaque case) */
.bouton--sombre {
  background: var(--encre);
  color: #fff;
  box-shadow: 0 12px 26px -16px rgba(10, 34, 39, 0.7);
}

@media (hover: hover) and (pointer: fine) {
  .bouton--sombre:hover {
    background: var(--fond-4);
  }
}

/* La grille : l'espace entre les cases laisse voir son fond blanc = le trait blanc épais */
.mosaique__grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--trait-mosaique);
  margin: 0;
  padding: 0;
  border-top: var(--trait-mosaique) solid #fff;
  /* Même trait blanc épais en bas de la section (demande de l'utilisateur, 28/09/2026) */
  border-bottom: var(--trait-mosaique) solid #fff;
  list-style: none;
  background: #fff;
}

.mosaique__case {
  display: flex;
  flex-direction: column;
  /* Aération (28/09/2026, demande de l'utilisateur) : vidéos plus petites (marges intérieures larges : la vidéo occupe
     environ 72 % de la case) et plus d'espace entre la vidéo et le bouton de commande. */
  gap: clamp(24px, 2.6vw, 44px);
  padding: clamp(28px, 4.4vw, 84px) clamp(24px, 7vw, 140px);
  background: var(--gris-verte);
}

.mosaique__film {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  /* Fond transparent : si la vidéo ne couvre pas le cadre au pixel près (largeur fractionnaire), aucun liseré sombre
     n'apparaît sur son bord droit. Pas d'ombre portée (28/09/2026) : son halo débordait à droite et en bas des vidéos,
     comme une bordure sale. */
  background: transparent;
  cursor: pointer;
}

.mosaique__film video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (hover: hover) and (pointer: fine) {
  .mosaique__film:hover .lecture-coquille {
    border-color: #fff;
    background-color: rgba(255, 255, 255, 0.3);
  }
}

@media (hover: hover) and (pointer: fine) {
  .mosaique__film:hover .lecture {
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.6), 0 0 26px rgba(228, 225, 53, 0.55);
  }
}

.mosaique__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* 30/09/2026 (demande de l'utilisateur) : ce sont nos propres vidéos, plus de logo ni de nom ; le bouton de commande
     seul, centré sous la vidéo */
  justify-content: center;
  gap: 14px 24px;
  min-height: 44px;
}

/* Logo monochrome clair passé en encre sombre sur le gris verté */
.mosaique__logo {
  width: auto;
  height: 24px;
  max-width: 100%;
  filter: brightness(0);
  opacity: 0.78;
}

/* Cases Cbiza et Architectzone (28/09/2026, demande de l'utilisateur) : sarcelle dégradé, du clair au sombre ; le logo
   reste clair (couleur d'origine du fichier) et l'appel à l'action passe au jaune. */
.mosaique__case--sarcelle {
  background: linear-gradient(145deg, var(--sarcelle-clair) 0%, var(--sarcelle-1) 46%, var(--sarcelle-fonce) 100%);
}

.mosaique__case--sarcelle .mosaique__logo {
  filter: none;
  opacity: 0.94;
}

/* ============================================================================================
   ANIMATION D'ENTRÉE (28/09/2026, demande de l'utilisateur) — accueil seulement, à chaque chargement (rechargement compris). Couche au-dessus de
   tout (le menu compris) : fond sarcelle en dégradé et lumière jaune, mot de bienvenue, logo en grand, infographie du
   chargement. Le logo est une copie de celui de l'en-tête (mêmes tailles en em) : main.js le déplace jusqu'à sa place,
   puis la couche disparaît. Le logo de l'en-tête reste caché pendant ce temps (même animation en boucle, même phase :
   l'échange ne se voit pas). Secours : si le script manque, la couche s'efface seule (animations.css).
   ============================================================================================ */
.intro {
  display: none;
}

.intro-en-cours {
  overflow: hidden;
}

.intro-en-cours .intro {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: block;
  --echelle: 3;
  --demi: calc(2.5 * 1.05rem * var(--echelle) / 2);
}

.intro-en-cours .entete .entete__marque {
  visibility: hidden;
}

.intro__fond {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 55% at 50% 46%, rgba(29, 109, 123, 0.95) 0%, rgba(29, 109, 123, 0) 72%),
    radial-gradient(ellipse 125% 105% at 50% 48%, rgba(6, 40, 48, 0) 46%, rgba(6, 40, 48, 0.96) 100%),
    linear-gradient(180deg, var(--sarcelle-fonce) 0%, var(--sarcelle-1) 60%, var(--sarcelle-0) 100%);
}

/* La lumière jaune, sous le logo, qui respire lentement ; un reflet sarcelle clair plus haut */
.intro__fond::before,
.intro__fond::after {
  content: "";
  position: absolute;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
}

.intro__fond::before {
  top: 60%;
  width: 70vmax;
  height: 46vmax;
  background: radial-gradient(closest-side, rgba(228, 225, 53, 0.26), rgba(228, 225, 53, 0.08) 45%, rgba(228, 225, 53, 0) 100%);
  transform: translate(-50%, -50%);
}

.intro__fond::after {
  top: 28%;
  width: 60vmax;
  height: 30vmax;
  background: radial-gradient(closest-side, rgba(116, 220, 232, 0.16), rgba(116, 220, 232, 0) 100%);
  transform: translate(-50%, -50%);
}

.intro__scene {
  position: absolute;
  inset: 0;
}

.intro__bienvenue {
  position: absolute;
  top: calc(44% - var(--demi) - 58px);
  left: 0;
  right: 0;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-align: center;
  text-transform: uppercase;
  color: var(--teal-clair);
}

/* Le logo en grand : même dessin que dans la barre, agrandi (main.js le ramène à sa taille et à sa place) */
.intro__marque {
  position: absolute;
  top: 44%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%) scale(var(--echelle));
  transform-origin: 50% 50%;
}

/* Infographie du chargement : une ligne de temps de montage */
.intro__chargement {
  position: absolute;
  top: calc(44% + var(--demi) + 44px);
  left: 50%;
  width: min(460px, 82vw);
  transform: translateX(-50%);
}

.intro__piste {
  position: relative;
  height: 4px;
  margin: 0 7px;
  border-radius: 4px;
  background: rgba(226, 245, 247, 0.16);
}

.intro__rempli {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(228, 225, 53, 0.55), var(--vif));
  box-shadow: 0 0 14px rgba(228, 225, 53, 0.45);
}

.intro__cle {
  position: absolute;
  top: 50%;
  left: calc(var(--p) * 100%);
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--teal-clair);
  border-radius: 2px;
  background: var(--sarcelle-fonce);
  transform: translate(-50%, -50%) rotate(45deg);
  transition:
    background-color 0.3s var(--ease-doux),
    border-color 0.3s var(--ease-doux),
    box-shadow 0.3s var(--ease-doux);
}

.intro__cle.est-passee {
  border-color: var(--vif);
  background: var(--vif);
  box-shadow: 0 0 14px rgba(228, 225, 53, 0.7);
}

.intro__tete-lecture {
  position: absolute;
  top: -14px;
  bottom: -14px;
  left: 0;
  width: 2px;
  background: #fff;
  transform: translateX(-1px);
}

.intro__tete-lecture::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  border: 6px solid transparent;
  border-top-color: #fff;
  transform: translateX(-50%);
}

.intro__etapes {
  display: flex;
  justify-content: space-between;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(226, 245, 247, 0.45);
}

.intro__etapes li {
  transition: color 0.3s var(--ease-doux);
}

.intro__etapes li.est-passee {
  color: #fff;
}

.intro__compteur {
  margin-top: 16px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--vif);
}

.intro__timecode {
  margin-left: 12px;
  color: rgba(226, 245, 247, 0.55);
}

/* ============================================================================================
   NAVIGATION VERTICALE À DROITE (28/09/2026, demande de l'utilisateur) — à la place de la barre de défilement : une
   capsule de verre sombre (lisible sur les fonds clairs comme sombres), un point par section ; la section à l'écran est
   en surbrillance (point allongé jaune, nom affiché, filet rempli jusqu'à lui) ; le nom de chaque section au survol ;
   un clic y mène (défilement fluide, scroll.js). Construite par main.js (reperes) : sans JavaScript, la barre native reste.
   Écrans de 1180 px et plus : en dessous, les points couvriraient le bord du texte (la barre native reste).
   ============================================================================================ */
.reperes {
  display: none;
}

@media (min-width: 1180px) {
  html.js {
    scrollbar-width: none;
  }

  html.js::-webkit-scrollbar {
    display: none;
  }

  .reperes {
    position: fixed;
    top: 50%;
    right: 16px;
    z-index: 55;
    display: block;
    padding: 12px 8px;
    border: 1px solid var(--filet-fort);
    border-radius: var(--r-pilule);
    background: rgba(3, 26, 32, 0.62);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.7);
    transform: translateY(-50%);
  }
}

.reperes__liste {
  position: relative;
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Le filet : il relie les points et se remplit jusqu'à la section à l'écran */
.reperes__liste::before,
.reperes__liste::after {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
}

.reperes__liste::before {
  background: rgba(226, 245, 247, 0.14);
}

.reperes__liste::after {
  background: var(--vif);
  transform: scaleY(var(--progres, 0));
  transform-origin: top center;
  transition: transform 0.5s var(--ease-sortie);
}

.reperes__lien {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  text-decoration: none;
}

.reperes__point {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pilule);
  background: rgba(226, 245, 247, 0.5);
  box-shadow: 0 0 0 3px rgba(3, 26, 32, 0.9);
  transition:
    height 0.35s var(--ease-sortie),
    background-color 0.3s var(--ease-doux);
}

@media (hover: hover) and (pointer: fine) {
  .reperes__lien:hover .reperes__point {
    background: #fff;
  }
}

.reperes__lien:focus-visible .reperes__point {
  background: #fff;
}

.reperes__lien[aria-current="true"] .reperes__point {
  height: 18px;
  background: var(--vif);
}

/* Nom de la section : au survol et au focus, et toujours pour la section à l'écran */
.reperes__nom {
  position: absolute;
  top: 50%;
  right: calc(100% + 14px);
  padding: 5px 10px;
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-pilule);
  background: rgba(3, 26, 32, 0.86);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transform: translate(6px, -50%);
  transition:
    opacity 0.25s var(--ease-doux),
    transform 0.3s var(--ease-sortie);
}

@media (hover: hover) and (pointer: fine) {
  .reperes__lien:hover .reperes__nom {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

.reperes__lien:focus-visible .reperes__nom {
  opacity: 1;
  transform: translate(0, -50%);
}

.reperes__lien[aria-current="true"] .reperes__nom {
  border-color: rgba(228, 225, 53, 0.5);
  color: var(--vif);
}

.reperes.est-en-mouvement .reperes__lien[aria-current="true"] .reperes__nom {
  opacity: 1;
  transform: translate(0, -50%);
}

/* ============================================================================================
   ACCUEIL · La vidéo du studio (LC21, 28/09/2026, décision 9 de CONVERSION.md) — juste sous le héros : la ligne des
   logos qui défile, puis la vidéo de vente (provisoirement le film de l'agence ; la vidéo de vente 16:9 la remplace dès
   qu'elle est produite, tâche LC9b). Fond clair comme « Nos derniers travaux » : les logos sont dessinés pour lui.
   ============================================================================================ */
main > section.vente {
  padding-block: clamp(18px, 2vw, 30px) clamp(56px, 6vw, 92px);
  /* Fond sombre en dégradé (28/09/2026, demande de l'utilisateur) : sarcelle profond, lueur douce derrière la vidéo,
     pointe de lumière jaune en haut à droite */
  background:
    radial-gradient(ellipse 55% 70% at 26% 58%, rgba(29, 109, 123, 0.42) 0%, rgba(29, 109, 123, 0) 70%),
    radial-gradient(ellipse 40% 45% at 88% 18%, rgba(228, 225, 53, 0.06) 0%, rgba(228, 225, 53, 0) 70%),
    linear-gradient(160deg, #0b2c35 0%, #0d3a45 46%, #0a2a33 100%);
  overflow: hidden;
}

/* Logos du bandeau sur fond sombre : leur couleur claire d'origine (le filtre sombre sert au fond clair) */
.vente .marques {
  border-block-color: var(--filet);
}

.vente .marque__logo {
  filter: none;
  opacity: 0.72;
}

@media (hover: hover) and (pointer: fine) {
  .vente .marque__logo:hover {
    opacity: 1;
  }
}

/* Vidéo à gauche, textes et boutons à droite (28/09/2026, demande de l'utilisateur) */
.vente__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
}

.vente__texte .surtitre {
  color: var(--teal-clair);
}

.vente__texte h2 {
  color: var(--texte);
}

.vente__intro {
  margin-top: 14px;
  font-size: 1.05rem;
  color: var(--texte-doux);
}

.vente__points {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  color: var(--texte);
}

.vente__points li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vente__points li::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.3 2.3 2.2 4.7-5' fill='none' stroke='%2374dce8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat, rgba(116, 220, 232, 0.14);
}

.vente__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

/* La vidéo entière, jamais recadrée */
.vente__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-grand);
  background: var(--fond-1);
  box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.vente__media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ============================================================================================
   AUDIT « APPLE-DESIGN » (30/09/2026, accord de l'utilisateur) — réglages visuels transverses.
   Rapport : docs/sites/motion-design-pro/AUDIT-DESIGN-APPLE.md (numéros entre crochets).
   ============================================================================================ */

/* [F1] Une échelle d'espaces (grille de 8) ; sections un peu plus aérées (72 à 112 px au lieu de 64 à 108 px) */
:root {
  --espace-1: 4px;
  --espace-2: 8px;
  --espace-3: 12px;
  --espace-4: 16px;
  --espace-5: 24px;
  --espace-6: 32px;
  --espace-7: 48px;
  --espace-8: 64px;
  --espace-9: 96px;
  --espace-10: 128px;
  --espace-section: clamp(72px, 7.5vw, 112px);
  --espace-bande: clamp(40px, 4.5vw, 64px);
}

.processus__etapes,
.capot__outils,
.temoignages__grille,
.bento {
  gap: var(--espace-5);
}

/* [A2] Plus de rectangle gris au toucher : le retour d'appui [A1] le remplace. [A3] Commandes : pas de zoom au double
   toucher, pas de sélection du libellé à l'appui long (le texte courant, lui, reste sélectionnable). */
html {
  -webkit-tap-highlight-color: transparent;
}

a,
button,
summary,
label,
[role="button"] {
  touch-action: manipulation;
}

.bouton,
.btn,
button,
summary,
.whatsapp,
.tarifs__type,
.tarifs__conseil {
  -webkit-user-select: none;
  user-select: none;
}

/* [§ 4] Polices de la charte gardées (le skill le permet pour une raison de marque) ; le dessin optique suit la taille */
body {
  font-optical-sizing: auto;
}

/* [G1] Sections sarcelle : textes secondaires assez contrastés (texte pâle 4,65:1, texte doux 5,8:1 sur sarcelle-1) */
.theme-sarcelle,
main > section.studio,
main > section.guide,
.mosaique__case--sarcelle {
  --texte-doux: rgba(226, 245, 247, 0.88);
  --texte-pale: rgba(226, 245, 247, 0.74);
}

/* [E1] Titres de section sur trois niveaux : chapitre 60 px (tête de section), bande 44 px, titre final 84 px.
   [E2] Interligne des titres : 1,05 (deux titres prenaient celui du texte courant, 1,6). */
.vente__texte h2,
.clients__tete h2,
.mosaique__tete h2,
.studio__titre {
  font-family: var(--f-titre);
  font-size: clamp(1.9rem, 1.25rem + 1.7vw, 2.75rem);
  font-weight: 650;
  font-stretch: 104%;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.tarifs__intro h2 {
  font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.75rem);
  line-height: 1.04;
}

/* [E4] Lignes confortables : 68 caractères au plus pour les paragraphes longs (colonne inchangée) */
.edito__corps > p,
.edito__suite > p,
.edito__chapeau,
.tarifs__chapeau,
.mosaique__intro,
.clients__intro {
  max-inline-size: 68ch;
}

/* [E5] retiré le 30/09/2026 (demande de l'utilisateur) : la marge en em écrasait la marge droite de 5 px qui cale la
   pastille blanche des boutons jaunes à 6 px du bord (haut, bas et droite égaux) ; les boutons gardent leur géométrie
   d'origine (50 px, petits 42 px, grands 58 px, pastille = hauteur − 12 px). */

/* [H1] Cibles élargies sans toucher au dessin : ronds de lecture (zone de toucher invisible), repères */
.lecture--ronde::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
}

.reperes__lien::before {
  content: "";
  position: absolute;
  inset: -2px -13px;
}

/* [D1] Pas de verre sur du verre : dans la barre du haut, déjà floutée, le bouton « Voir les tarifs » garde son dessin
   sans flou propre */
.entete .bouton--verre {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(170, 232, 240, 0.08);
}

/* [D2] Arête haute éclairée des surfaces flottantes : la lumière accroche la matière */
.entete__barre {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 18px 40px -24px rgba(0, 0, 0, 0.6);
}

.menu:not([hidden]) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 30px 60px -30px rgba(0, 0, 0, 0.7);
}

.whatsapp {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 18px 40px -18px rgba(0, 0, 0, 0.9);
}

/* [D4] Préférences du système : transparence réduite (surfaces pleines, sans flou) et contraste renforcé */
@media (prefers-reduced-transparency: reduce) {
  .entete__barre,
  .menu:not([hidden]),
  .bouton--verre,
  .reperes {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .entete__barre {
    background: #04222a;
  }

  .menu:not([hidden]) {
    background: #03202a;
  }

  .bouton--verre {
    background: #0b3a44;
  }
}

@media (prefers-contrast: more) {
  :root {
    --filet: rgba(170, 232, 240, 0.42);
    --filet-fort: rgba(170, 232, 240, 0.62);
    --texte-doux: rgba(226, 245, 247, 0.95);
    --texte-pale: rgba(226, 245, 247, 0.86);
  }
}

/* [H3] Zone du guide : le sommaire y suffit, les repères de droite se retirent */
[data-zone-guide] .reperes {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s var(--ease-doux),
    visibility 0s linear 0.25s;
}

/* [F3] Guide replié par chapitres (js/main.js, guideReplie) : bouton « Lire le chapitre » */
.edito__lire {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 18px;
  padding: 0 16px 0 14px;
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-pilule);
  background: rgba(170, 232, 240, 0.06);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--texte);
  cursor: pointer;
}

.edito__lire svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.edito__lire-chevron {
  transition: transform 0.25s var(--ease-sortie);
}

.edito__lire[aria-expanded="true"] .edito__lire-chevron {
  transform: rotate(180deg);
}

.edito__lire:focus-visible {
  outline: 2px solid var(--vif);
  outline-offset: 3px;
}

.edito__suite > * + * {
  margin-top: 16px;
}

/* [F2] « Six salles, un seul plan » en sarcelle : l'accueil alterne sombre et sarcelle jusqu'au guide */
.processus.theme-sarcelle {
  background:
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(18, 181, 201, 0.14) 0%, rgba(18, 181, 201, 0) 70%),
    linear-gradient(180deg, var(--sarcelle-0), var(--sarcelle-1));
}