/* KommIA : accueil (version E2 depuis le 2026-10-05), chargé après home.css. Les règles des maquettes abandonnées (variantes A
   à D du haut de page, sélecteurs, section en cartes) ont été retirées le 2026-10-05 ; l'ancienne feuille complète est dans
   _archives/maquettes-accueil-v2 (2026-10-05)/css/. Origine : accueil V2 (2026-09-30).
   Le haut de page montre l'app qui tourne (boucle muette des captures des démos), en quatre variantes à comparer :
   A « Perspective », B « Île dynamique », C « Orbite », D « Éventail » (une page chacune, sélecteur en bas de l'écran).
   Base commune : halo en dégradé, image fixe puis vidéo, une étape visible à la fois, barre fine, preuve du cas Gaby. */

/* La colonne de texte à sa largeur utile (titre et introduction tiennent en 34 rem). Depuis le 2026-10-02 (Bruno), le haut de page
   occupe la même largeur que le menu et les sections : le texte part du bord du logo, les téléphones finissent au bord du bouton
   « Essai gratuit », l'espace libre passe entre les deux (avant : bloc centré, 80 px plus étroit de chaque côté à 1440 px) */
@media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 34rem) auto; justify-content: space-between; gap: clamp(32px, 5vw, 96px); } }
/* La colonne du visuel prend la largeur de la pastille « 24 000 vues », un peu plus large que les téléphones : elle ne dépasse plus le bord */

/* La preuve : le cas Gaby (en notification sur le coin du téléphone en A, en ligne sous le téléphone ailleurs) */

.happ__proof-text { font-size: 13px; line-height: 1.3; color: var(--ink-70); }
.happ__proof-text strong { color: var(--ink); font-weight: 650; }
.happ__proof-who { margin-top: 2px; font-size: 11.5px; color: var(--ink-60); }

/* Légende sous le téléphone, une ligne par étape (D ; C sur mobile) */

/* Les captures des téléphones de côté portent déjà l'île de l'iPhone : l'île dessinée s'y superposait, décalée (2026-10-02) */

.happ .device::after, .igp.phone::after, .final .phone::after {
  content: ""; position: absolute; z-index: -1; left: -3px; right: -3px; top: 17%; height: 16%; pointer-events: none;
  background:
    linear-gradient(to bottom, #A9AEB8 0 12%, transparent 12% 24%, #A9AEB8 24% 57%, transparent 57% 67%, #A9AEB8 67% 100%) left top / 3px 100% no-repeat,
    linear-gradient(to bottom, transparent 0 18%, #A9AEB8 18% 82%, transparent 82%) right top / 3px 100% no-repeat;
}
/* Le téléphone de « Il trouve quoi ? » et celui de l'appel final, au même cadre */
.igp.phone, .final .phone {
  padding: 5px; border-radius: 11.5% / 5.3%; background: #0B0B0F;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 0 1px #8D919B, 0 0 0 2.25px #DDE0E5, 0 40px 70px -34px rgba(40, 24, 90, 0.45);
}
.igp__screen, .final .phone img { border-radius: 10.2% / 4.7%; }
.igp__screen::after { content: ""; position: absolute; z-index: 6; top: 1.4%; left: 50%; width: 31%; height: 3.9%; translate: -50% 0; border-radius: 999px; background: #000; }

/* ────── C · Orbite : téléphone de face au centre d'une orbite fine ; quatre pastilles s'allument tour à tour
   (2026-10-01 : pastilles en verre numérotées, halo qui pulse sur l'étape active, libellé en carte soignée relié à sa pastille) ────── */

/* Un fin anneau qui s'élargit autour de l'étape active */

/* ────── D · Éventail : trois téléphones, la boucle au centre, deux vraies captures de l'app derrière
   (2026-10-01 : téléphones de côté plus petits, plus pâles et désaturés ; légende en carte, grand numéro) ────── */

/* Sans vidéo (mouvement réduit, économie de données) : la première étape reste affichée, sans animation */

/* ────── Tablette et mobile ────── */

/* Mouvement réduit : ni halo qui tourne, ni flottement, ni inclinaison qui suit la souris */

/* ────── Sélecteur de variantes : outil de comparaison, en bas de l'écran ────── */

/* ────── « Il trouve quoi ? » : le profil Instagram tel que le voit un futur client, sans puis avec KommIA ──────
   Schéma d'interface sans photo : les tailles sont en unités du conteneur (cqw), le profil garde ses proportions à toute largeur. */
.igp__screen {
  position: relative; overflow: hidden; aspect-ratio: 1080 / 2347; border-radius: 10.2% / 4.7%; background: #fff; /* coins du cadre actuel, voir plus haut */
  container-type: inline-size;
}
.igp__view {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  background: #fff; color: var(--ink); font-size: 4cqw; line-height: 1.25;
  transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out);
}
.igp[data-state="avant"] .igp__view--apres, .igp[data-state="apres"] .igp__view--avant { opacity: 0; transform: translateY(2.5%); pointer-events: none; }
.igp__bar { display: flex; justify-content: space-between; align-items: center; height: 11cqw; padding: 3cqw 9cqw 0; font-size: 4.4cqw; }
.igp__bar span { width: 15cqw; height: 3.2cqw; border-radius: 2cqw; background: linear-gradient(90deg, var(--ink) 0 30%, transparent 30% 38%, var(--ink) 38% 62%, transparent 62% 70%, var(--ink) 70%); opacity: 0.85; }
.igp__top { display: flex; justify-content: space-between; align-items: center; padding: 2cqw 5cqw 3.5cqw; }
.igp__top b { font-size: 6cqw; font-weight: 700; letter-spacing: -0.02em; }
.igp__top span { display: flex; gap: 4cqw; }
.igp__top svg { width: 6.4cqw; height: 6.4cqw; }
.igp__head { display: flex; align-items: center; gap: 6cqw; padding: 0 5cqw; }
.igp__avatar { flex: none; width: 21cqw; height: 21cqw; padding: 0.9cqw; border-radius: 50%; background: #E3E3EA; }

/* Avec KommIA : une story en cours, l'anneau en dégradé autour de la photo de profil */
.igp__view--apres .igp__avatar { background: conic-gradient(from 210deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5, #FEDA75); }

.igp__stats { flex: 1; display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; text-align: center; font-size: 3.4cqw; color: #3A3A46; }
.igp__stats b { display: block; font-size: 5cqw; font-weight: 700; color: var(--ink); }
.igp__bio { display: grid; gap: 1.8cqw; padding: 3.5cqw 5cqw 0; }
.igp__bio b { font-size: 4.2cqw; font-weight: 650; }
.igp__bio i { display: block; width: 78%; height: 2.4cqw; border-radius: 2cqw; background: #ECECF1; }
.igp__bio i + i { width: 52%; }
.igp__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; padding: 3.5cqw 5cqw 0; }
.igp__btns span { display: grid; place-items: center; height: 8cqw; border-radius: 2.2cqw; background: #EFEFF3; font-size: 3.7cqw; font-weight: 650; }
.igp__btns span:first-child { background: #0095F6; color: #fff; }
.igp__hl { display: flex; gap: 4.4cqw; padding: 4cqw 5cqw 0; }
.igp__hl-item { display: grid; justify-items: center; gap: 1.3cqw; font-size: 3cqw; color: #3A3A46; }

.igp__tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 4cqw; border-top: 1px solid #EFEFF3; }
.igp__tabs span { display: grid; place-items: center; height: 9cqw; color: #A0A0AC; }
.igp__tabs span.is-on { color: var(--ink); box-shadow: inset 0 -0.6cqw 0 var(--ink); }
.igp__tabs svg { width: 5.6cqw; height: 5.6cqw; }
.igp__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5cqw; }
.igp__tile {
  position: relative; overflow: hidden; display: grid; place-items: center; aspect-ratio: 3 / 4; padding: 2cqw;
  text-align: center; font-size: 3.6cqw; font-weight: 700; line-height: 1.1; color: #fff;
}
.igp__kind { position: absolute; z-index: 1; top: 2cqw; right: 2cqw; width: 4.6cqw; height: 4.6cqw; color: #fff; filter: drop-shadow(0 0.3cqw 0.6cqw rgba(0, 0, 0, 0.45)); }
/* Vraies photos (2026-10-01) : chaque vignette remplit sa case au format 3:4 de la grille Instagram */
.igp__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; } /* annule « .phone img » du site */
.igp__avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; border: 1cqw solid #fff; object-fit: cover; }
.igp__hl-item img { width: 14cqw; height: 14cqw; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 0.7cqw #fff, 0 0 0 1.2cqw #DADAE2; }

/* Le constat, posé en bas de l'écran : rouge sans KommIA, vert avec */
.igp__flag {
  position: absolute; left: 5cqw; right: 5cqw; bottom: 7cqw; margin: 0;
  display: flex; align-items: center; gap: 2.4cqw; padding: 3cqw 4cqw; border-radius: 999px;
  background: #fff; box-shadow: 0 2cqw 6cqw -2cqw rgba(40, 28, 96, 0.4), inset 0 0 0 1px rgba(14, 14, 20, 0.06);
  font-size: 3.7cqw; font-weight: 650; line-height: 1.2;
}
.igp__flag i { flex: none; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; }
.igp__flag--bad { color: #BF3434; }
.igp__flag--bad i { background: #D64040; box-shadow: 0 0 0 1cqw rgba(214, 64, 64, 0.18); }
.igp__flag--good { color: #0F7A4F; }
.igp__flag--good i { background: #1FA774; box-shadow: 0 0 0 1cqw rgba(31, 167, 116, 0.18); }
/* Les deux boutons, au-dessus du téléphone */
.igp__switch {
  order: -1; position: relative; z-index: 2; margin-bottom: 22px;
  display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.75); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-panel);
}
.igp__switch button {
  height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-60); white-space: nowrap;
  transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out);
}
.igp__switch button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.igp__switch button[data-igp-show="apres"][aria-pressed="true"] { background: linear-gradient(135deg, #168EFF, #876AFF); }
.igp__switch button:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

/* Mention des photos générées (2026-10-01) : discrète, sous le profil Instagram et sous le carrousel des métiers */
.illus-note { margin: 10px 0 0; font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-60); text-align: center; }
.question__stage .illus-note { order: 2; margin-top: 16px; }
.illus-note--metiers { margin-top: 8px; text-align: right; }
/* Photos de métiers en paysage (2026-10-01) : le téléphone occupe le centre gauche de chaque photo, aucun coin n'est sûr pour une
   pastille posée sur l'image (en bas comme en haut, les noms longs mordaient sur le téléphone). Le nom du métier devient une légende
   sous la photo, à gauche de « Photos d'illustration » ; l'arrondi passe du cadre aux photos pour laisser la légende sortir du cadre */
.toi__photo.carousel { overflow: visible; }
.toi__photo .carousel__slides { overflow: hidden; border-radius: inherit; }
.toi__photo .carousel__label {
  top: calc(100% + 8px); bottom: auto; left: 2px; padding: 0; border-radius: 0; background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  font-size: 12.5px; line-height: 16px; font-weight: 600; color: var(--ink);
}
.illus-note--metiers { line-height: 16px; }

/* ────── Les alternatives (2026-10-02) : « Plus juste que l'IA générique. Moins cher qu'un freelance. » ──────
   Remplace l'avant et après ligne à ligne. Trois colonnes sur un même bandeau, lues d'un coup d'œil sur une ligne de repères
   alignée (les outils, le prix du freelance, le prix de KommIA) ; les deux façons de faire actuelles restent ternes et
   légères, la colonne KommIA est une carte blanche surélevée, au contour en dégradé, qui porte le bouton. */
.duel {
  position: relative; margin-top: clamp(40px, 4.5vw, 64px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.14fr); align-items: stretch;
  border-radius: 26px; background: rgba(255, 255, 255, 0.5); box-shadow: inset 0 0 0 1px rgba(14, 14, 20, 0.06);
}
.duel__col { display: flex; flex-direction: column; padding: clamp(26px, 2.6vw, 36px); }
.duel__col--avant + .duel__col--avant { box-shadow: inset 1px 0 0 rgba(14, 14, 20, 0.07); }
.duel__k { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; line-height: 1.4; text-transform: uppercase; color: var(--ink-60); }
.duel__col--kommia .duel__k { color: var(--ink); }
.duel__k .grad--inline { font-style: normal; letter-spacing: 0.06em; }
/* La ligne de repères : même hauteur dans les trois colonnes, chaque repère calé en bas, son unité dessous */
.duel__fig { margin-top: 18px; min-height: clamp(4.6rem, 3.2rem + 2.4vw, 5.6rem); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 6px; }
.duel__num { font-size: clamp(1.9rem, 1.1rem + 1.7vw, 2.55rem); font-weight: 620; letter-spacing: -0.045em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; color: rgba(14, 14, 20, 0.5); }
.duel__unit { font-size: 13.5px; font-weight: 500; color: var(--ink-60); }
.duel__fig--outils { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; align-content: flex-end; gap: 6px; filter: grayscale(1); opacity: 0.8; }
.duel__fig--outils .chip { padding: 6px 11px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(14, 14, 20, 0.08), 0 6px 14px -10px rgba(14, 14, 20, 0.3); font-size: 13px; font-weight: 600; color: var(--ink-70); }
.duel__fig--outils .plus { font-size: 13px; font-weight: 600; color: rgba(14, 14, 20, 0.35); }
.duel__verdict { margin-top: 18px; display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--ink-60); text-wrap: pretty; }
.duel__verdict .st { width: 18px; height: 18px; margin: 2px 0 0; }
.duel__verdict .st svg { width: 10px; height: 10px; }
/* La carte KommIA : surélevée au-dessus du bandeau */
.duel__col--kommia {
  position: relative; isolation: isolate; margin: -16px -1px -16px 0; padding-top: calc(clamp(26px, 2.6vw, 36px) + 16px); padding-bottom: calc(clamp(26px, 2.6vw, 36px) + 4px);
  border-radius: 24px; background: #fff; box-shadow: 0 36px 70px -40px rgba(52, 36, 130, 0.55), 0 1px 2px rgba(40, 28, 96, 0.06);
}
.duel__col--kommia::before {
  content: ""; position: absolute; z-index: -1; inset: -1.5px; border-radius: 25.5px; padding: 1.5px;
  background: conic-gradient(from var(--edge), #5AD3FF, #168EFF, #876AFF, #B8A5FF, #5AD3FF);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: edge-spin 8s linear infinite;
}
.duel__col--kommia .duel__num { font-size: clamp(2.3rem, 1.3rem + 2.2vw, 3.2rem); font-weight: 650; color: var(--violet); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .duel__col--kommia .duel__num { background-image: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: 0.04em; }
}
.duel__col--kommia .duel__verdict { color: var(--ink); font-weight: 500; }
.duel__cta { margin-top: auto; width: 100%; justify-content: space-between; }
.duel__col--kommia .duel__verdict { margin-bottom: 24px; }
/* Apparition : les deux façons de faire, puis la carte */
.js .duel .duel__col { transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.js .duel:not(.is-in) .duel__col { opacity: 0; transform: translateY(14px); }
.js .duel .duel__col:nth-child(2) { transition-delay: 100ms; }
.js .duel .duel__col:nth-child(3) { transition-delay: 220ms; }

/* Tablette : les deux façons de faire côte à côte, la carte KommIA dessous sur toute la largeur */
@media (max-width: 899px) {
  .duel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duel__col--kommia { grid-column: 1 / -1; margin: 0 -1px -1px; padding-top: clamp(26px, 2.6vw, 36px); }
}
/* Téléphone : une colonne, les deux façons de faire séparées par un filet */
@media (max-width: 639px) {
  .duel { grid-template-columns: minmax(0, 1fr); }
  .duel__col { padding: 24px 20px; }
  .duel__col--avant + .duel__col--avant { box-shadow: inset 0 1px 0 rgba(14, 14, 20, 0.07); }
  .duel__fig { margin-top: 12px; min-height: 0; }
  .duel__verdict { margin-top: 12px; }
  .duel__col--kommia { padding: 26px 20px 22px; }
  .duel__col--kommia .duel__verdict { margin-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) { .duel__col--kommia::before { animation: none; } }

@media (prefers-reduced-motion: reduce) {
  .igp__view { transition: none; }
}

/* ── Audit de conversion du 2026-10-01 ───────────────────────────────────────────────────────────────────────────── */
/* Ce qui se passe après le clic, sous le bouton du haut : sur ordinateur seulement (sur téléphone, le bouton ouvre le store) */
.hero__next { margin-top: 12px; max-width: 31rem; font-size: 13.5px; line-height: 1.5; color: var(--ink-60); animation: fade-up 900ms var(--ease-out) both 900ms; }
/* Colonne allégée (2026-10-02) : une seule ligne sous le bouton, la version ordinateur dit que l'app s'installe sur le téléphone ;
   sur téléphone, où le bouton ouvre directement le store, seule la mention de l'essai reste */
.hero__next-mob { display: none; }
.store-cta .hero__next-desk { display: none; }
.store-cta .hero__next-mob { display: inline; }
@media (hover: none) and (pointer: coarse) { .hero__next-desk { display: none; } .hero__next-mob { display: inline; } }
/* Le badge Meta passe à côté du bouton, sur la même ligne */
.hero__actions .meta-badge { flex: none; }
/* La phrase du haut : la catégorie sur sa ligne, puis ce que fait KommIA (sinon le retour tombait après « qui »). Seulement quand
   la colonne a ses 496 px (seconde ligne : 480 px) : sur une colonne et à partir de 1140 px ; entre 900 et 1140 px, où la colonne
   descend à 290 px, et sur mobile, le texte coule librement */
@media (min-width: 640px) and (max-width: 899px), (min-width: 1140px) { .hero__intro .text-espresso { display: block; } }
/* « Côté humain » : une phrase qui renvoie à la séance, à la place de la liste qui la répétait */
.panel__text { margin-top: 18px; font-size: 15.5px; line-height: 1.55; color: var(--ink-70); text-wrap: pretty; }
.panel__text a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(11, 143, 196, 0.45); text-underline-offset: 3px; }
.panel__text a:hover { text-decoration-color: currentColor; }
/* Écrans d'ordinateur bas (723 px chez Bruno) : la ligne sous le bouton poussait le badge Meta sous la ligne de flottaison,
   les espacements du haut de page se resserrent d'autant */
@media (min-width: 1024px) and (max-height: 820px) {
  .hero__intro { margin-top: 20px; }
  .hero__actions { margin-top: 26px; }
  .hero__next { margin-top: 8px; }
  
}

/* ── Cas client : la seconde preuve, les stories (2026-10-02) ────────────────────────────────────────────────────── */
/* Le chiffre « 13 rendez-vous » n'avait pas de source : la preuve devient « Des rendez-vous », sans chiffre, coiffée de l'avatar
   de Gaby dans un cercle de story ; sa tête a la hauteur du chiffre « 24k » d'à côté pour que les deux preuves pèsent autant */
.gaby__figures { grid-template-columns: repeat(2, max-content); }
.figure__story {
  display: flex; align-items: center; gap: 14px;
  height: clamp(2.6rem, 1.6rem + 2.2vw, 3.8rem);
  font-size: clamp(1.35rem, 1rem + 0.9vw, 1.75rem); font-weight: 620; letter-spacing: -0.03em; line-height: 1.05; color: var(--ink);
  white-space: nowrap;
}
.figure__ring {
  --d: clamp(2.6rem, 1.6rem + 2.2vw, 3.6rem);   /* largeur et hauteur explicites : Safari dessinait l'anneau ovale (2026-10-06) */
  flex: none; display: block; width: var(--d); height: var(--d); padding: 2.5px; border-radius: 50%;
  background: conic-gradient(from 210deg, #168EFF, #876AFF, #5AD3FF, #168EFF);
}
.figure__ring img { display: block; width: 100%; height: 100%; border-radius: 50%; border: 2.5px solid #fff; object-fit: cover; background: #fff; }
.figure--story .figure__label { max-width: 17rem; }
/* Sur mobile, les deux preuves l'une sous l'autre : côte à côte, la colonne de 157 px coupait « rendez-vous » en deux */
@media (max-width: 640px) {
  .gaby__figures { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .gaby__figures .figure + .figure { padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid var(--line); }
  .figure__story { font-size: 1.45rem; }
  .figure__ring { --d: 2.8rem; }
  .figure__label, .figure--story .figure__label { max-width: none; }
}

/* ────── Maquette E (2026-10-02, à comparer avec D) : le haut de page sur le showreel en motion design ──────
   Une scène sombre aux coins arrondis sous le menu, presque bord à bord ; le showreel « Fonctionnalités » sans ses textes y
   tourne en boucle, décalé vers la droite sur ordinateur pour laisser la gauche au texte, qui passe en blanc sur un voile.
   Sur téléphone, la version verticale : les visuels en haut, le texte en bas. Le fond de la scène reprend celui du film. */
.hero.hero--e { display: block; max-width: none; min-height: 0; margin: 0; padding: 0 12px; }
.hstage {
  --stage-bg: #1D1B2C;
  position: relative; isolation: isolate; overflow: hidden;
  height: max(560px, calc(100dvh - var(--nav-h) - 12px)); max-height: 1000px;
  border-radius: 28px; background: var(--stage-bg); color: #fff;
}
.hstage__poster, .hstage__poster img, .hstage__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hstage__poster img { display: block; }
.hstage__video { opacity: 0; transition: opacity 900ms var(--ease-out); }
.hstage.is-playing .hstage__video { opacity: 1; }
.hstage__veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(14, 12, 26, 0.94) 0%, rgba(14, 12, 26, 0.78) 30%, rgba(14, 12, 26, 0.2) 56%, rgba(14, 12, 26, 0) 70%),
    linear-gradient(0deg, rgba(14, 12, 26, 0.55) 0%, rgba(14, 12, 26, 0) 28%);
}
.hstage__inner {
  position: relative; z-index: 1; height: 100%; max-width: calc(1320px - 24px); margin: 0 auto;
  padding: clamp(28px, 5vh, 64px) calc(var(--gutter) - 12px) clamp(72px, 10vh, 104px);
  display: flex; flex-direction: column; justify-content: center;
}
.hero--e .hero__text { max-width: 36rem; }
.hero--e .hero__title { color: #fff; }
.hero--e .hero__intro { color: rgba(255, 255, 255, 0.72); }
.hero--e .hero__intro .text-espresso { color: #fff; }
.hero--e .btn-primary { background: #fff; color: var(--ink); box-shadow: 0 18px 40px -18px rgba(135, 106, 255, 0.7); }
.hero--e .btn-primary:hover { background: #EFECFF; }
.hero--e .btn-primary .btn__icon { background: var(--ink); color: #fff; }
.hero--e .meta-badge { background: rgba(255, 255, 255, 0.09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); color: #fff; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hero--e .meta-badge img { filter: brightness(0) invert(1); }
.hero--e .hero__next { color: rgba(255, 255, 255, 0.58); }
/* Preuve du cas Gaby et bouton de pause, en bas à droite, au bord du bouton « Essai gratuit » du menu */
.hstage__foot { position: absolute; right: calc(var(--gutter) - 12px); bottom: clamp(20px, 3.5vh, 32px); display: flex; align-items: center; gap: 10px; }
.hstage__proof {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 13.5px; line-height: 1.3; color: rgba(255, 255, 255, 0.86); text-decoration: none; white-space: nowrap;
  transition: background-color 300ms var(--ease-out);
}
.hstage__proof:hover { background: rgba(255, 255, 255, 0.15); }
.hstage__proof img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.hstage__proof .happ__proof-text { font-size: 13.5px; color: rgba(255, 255, 255, 0.82); }
.hstage__proof .happ__proof-text strong { color: #fff; font-weight: 650; }
.hstage__proof .happ__proof-who { margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.56); }
.hstage__proof .happ__proof-who::before { content: "·"; margin-right: 8px; color: rgba(255, 255, 255, 0.4); }
.hstage__toggle, .hstage__son {
  display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); color: #fff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.hstage__toggle[hidden], .hstage__son[hidden] { display: none; }
.hstage__icon-play, .hstage.is-paused .hstage__icon-pause { display: none; }
.hstage.is-paused .hstage__icon-play { display: block; }
/* Bouton son (maquette E2) : haut-parleur barré tant que le son est coupé */
.hstage__icon-son, .hstage.has-sound .hstage__icon-muet { display: none; }
.hstage.has-sound .hstage__icon-son { display: block; }
/* Ordinateur et tablette à l'horizontale : le film occupe les deux tiers de droite de la scène, son bord gauche se fond dans le fond de la
   scène (en plein cadre, sur un écran large et bas, il était agrandi et ses cartes passaient sous le titre) */
@media (min-width: 1200px), (min-width: 768px) and (orientation: landscape) {
  .hstage__poster img, .hstage__video {
    left: auto; right: 0; width: 66%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%); mask-image: linear-gradient(90deg, transparent 0, #000 24%);
  }
}
/* Petits ordinateurs et tablettes à l'horizontale : la colonne de texte prend plus de la moitié de la scène, le film se resserre
   sur les six dixièmes de droite (à 1024 px, la carte de la photo passait sous le titre) */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
  .hstage__poster img, .hstage__video { width: 60%; }
  .hero--e .hero__text { max-width: 30rem; }
}
/* Téléphone et tablette en portrait : la version verticale, visuels en haut, texte en bas sur le voile */
@media (max-width: 767px), (max-width: 1199px) and (orientation: portrait) {
  .hero.hero--e { padding: 0 8px; }
  .hstage { height: auto; min-height: calc(100svh - var(--nav-h) - 8px); max-height: none; border-radius: 22px; display: flex; }
  /* les visuels remontent d'un cran : la carte de l'étape ne passe plus sous le titre, le bas de la scène reste sous le voile */
  .hstage__poster img, .hstage__video { object-position: 50% 0; transform: translateY(-9%); }
  .hstage__veil { background: linear-gradient(0deg, rgba(14, 12, 26, 0.96) 0%, rgba(14, 12, 26, 0.9) 42%, rgba(14, 12, 26, 0.35) 62%, rgba(14, 12, 26, 0) 74%); }
  .hstage__inner { height: auto; width: 100%; justify-content: flex-end; padding: 40vh 16px 24px; }
  .hstage__foot { right: 12px; top: 12px; bottom: auto; }
  .hstage__proof { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hstage__video { display: none; } }

/* ────── Maquette E2 (2026-10-02) : la scène de E sur un fond clair, avec les vrais écrans de l'app ──────
   Le film (pour l'instant ses deux images de style) remplit la scène et porte son propre fond, la teinte de la scène ; son
   contenu tient à droite, le titre reste à gauche sur le même fond, en noir comme sur D. */
.hero--e2 .hstage { --stage-bg: #F6F5FC; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(14, 14, 20, 0.05); }
/* Le film garde ses proportions et prend toute la hauteur de la scène, calé à droite : sur un écran large et bas, en plein cadre,
   il était agrandi et ses éléments touchaient les bords ; à gauche, la scène continue sur le même fond */
/* Le film un peu plus petit dans la scène (2026-10-02, Bruno : « la vidéo est grande par rapport à l'écran ») : 86 % de la
   hauteur, centré en hauteur, son contenu calé à droite sur la grille du menu (bord du bouton « Essai gratuit ») ; ses bords
   se fondent dans le fond de la scène, aucun rectangle ne se voit */
.hero--e2 .hstage__poster img, .hero--e2 .hstage__video {
  left: auto; top: 7%; height: 86%; width: auto; max-width: none; aspect-ratio: 16 / 9; object-position: 100% 50%;
  right: max(0px, calc(max(0px, (100% - 1296px) / 2) + var(--gutter) + 12px - 4.4%));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-composite: intersect;
}
/* Boutons son et pause sur fond clair */
.hero--e2 .hstage__toggle, .hero--e2 .hstage__son { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(14, 14, 20, 0.08), 0 8px 18px -10px rgba(40, 28, 96, 0.4); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero--e2 .hstage__veil { background: linear-gradient(90deg, rgba(246, 245, 252, 0.9) 0%, rgba(246, 245, 252, 0.6) 30%, rgba(246, 245, 252, 0) 50%); }
.hero--e2 .hero__title { color: var(--ink); }
.hero--e2 .hero__intro { color: var(--ink-70); }
.hero--e2 .hero__intro .text-espresso { color: var(--ink); }
.hero--e2 .btn-primary { background: var(--ink); color: #fff; box-shadow: none; }
.hero--e2 .btn-primary:hover { background: #26262E; }
.hero--e2 .btn-primary .btn__icon { background: #fff; color: var(--ink); }
.hero--e2 .meta-badge { background: #fff; box-shadow: inset 0 0 0 1px rgba(14, 14, 20, 0.08), 0 10px 24px -14px rgba(40, 28, 96, 0.35); color: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero--e2 .meta-badge img { filter: none; }
.hero--e2 .hero__next { color: var(--ink-60); }
.hero--e2 .hstage__proof { background: #fff; box-shadow: inset 0 0 0 1px rgba(14, 14, 20, 0.07), 0 14px 30px -20px rgba(40, 28, 96, 0.4); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero--e2 .hstage__proof:hover { background: #fff; }
.hero--e2 .hstage__proof .happ__proof-text { color: var(--ink-70); }
.hero--e2 .hstage__proof .happ__proof-text strong { color: var(--ink); }
.hero--e2 .hstage__proof .happ__proof-who { color: var(--ink-60); }
.hero--e2 .hstage__proof .happ__proof-who::before { color: var(--ink-60); }
/* Sélecteur de la maquette : passer d'une image de style à l'autre */

@media (max-width: 767px), (max-width: 1199px) and (orientation: portrait) {
  /* Téléphone et tablette en portrait : le film recadré (720 × 736) en haut de la scène, sur toute sa largeur, le texte dessous */
  .hero--e2 .hstage__poster img, .hero--e2 .hstage__video { left: 50%; right: auto; top: 0; width: min(100%, 560px); height: auto; aspect-ratio: 720 / 736; object-fit: cover; object-position: 50% 0; transform: translateX(-50%); -webkit-mask-image: none; mask-image: none; }
  /* largeur du film plafonnée à 560 px : sur une tablette en portrait, il repoussait le bouton sous la ligne de flottaison */
  .hero--e2 .hstage__inner { padding-top: calc(min(100vw - 16px, 560px) * 1.02 - 10px); }
  .hero--e2 .hstage__veil { background: linear-gradient(0deg, rgba(246, 245, 252, 0.97) 0%, rgba(246, 245, 252, 0.92) 42%, rgba(246, 245, 252, 0) 70%); }
  
}

/* Grandes cartes : le texte à gauche, le téléphone à droite, sorti du bas de la carte depuis son haut */

/* Tablette : deux colonnes, toutes les cartes sur le modèle des petites */

/* Téléphone : les cartes défilent au doigt, la suivante dépasse ; des repères sous la rangée */

/* ────── Variante de E2 : « Tout ton Instagram » à l'ancienne présentation, animée (accueil-v2-e2-piliers, 2026-10-05) ──────
   La mécanique est celle de la section d'origine (home.css, js/site.js) : le téléphone reste en place, l'étape la plus proche du
   milieu de l'écran choisit l'écran. Ce qui change : les écrans bougent (les vidéos des cartes), les titres sont en deux tons à la
   couleur de l'écran, et la pastille de l'écran remplace le numéro de l'étape. */
.piliers--anim .pillar::before { background: linear-gradient(180deg, var(--accent-2), var(--accent)); }
.piliers--anim .pillar h3 { margin-top: 14px; font-size: clamp(1.75rem, 1.1rem + 1.25vw, 2.35rem); font-weight: 650; letter-spacing: -0.04em; line-height: 1.04; }
.piliers--anim .pillar h3 span, .piliers--anim .pillar h3 em { display: block; width: fit-content; }
.piliers--anim .pillar h3 em { font-style: italic; font-weight: 600; letter-spacing: -0.03em; color: var(--accent); padding-right: 0.06em; }
.piliers--anim .pillar p { margin-top: 14px; max-width: 34ch; font-size: 16.5px; line-height: 1.5; color: var(--ink-70); }
.pillar__ecran {
  display: inline-flex; align-items: center; gap: 10px; width: fit-content; padding: 6px 16px 6px 6px; border-radius: 999px; background: #fff;
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(14, 14, 20, 0.06), 0 14px 28px -16px rgba(40, 28, 96, 0.45), 0 3px 8px -5px rgba(40, 28, 96, 0.18);
}
.pillar__ecran i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--accent-2), var(--accent)); }
/* derrière le téléphone, l'aura violet et rose d'origine (home.css), qui tourne en permanence : Bruno la préfère à une lumière
   par écran (2026-10-05) */
/* les écrans : l'image fixe, puis la vidéo par-dessus quand elle tourne */
.piliers--anim .device__view img, .piliers--anim .device__view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.piliers--anim .device__view video { opacity: 0; transition: opacity 400ms var(--ease-out); }
.piliers--anim .device__view.is-playing video { opacity: 1; }
@media (max-width: 1099px) {
  .piliers--anim .pillar h3 { margin-top: 10px; font-size: 1.6rem; }
  .piliers--anim .pillar p { margin-top: 8px; font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) { .piliers--anim .device__view video { display: none; } }
/* Sur téléphone et tablette (2026-10-06, Bruno) : on ne glisse plus le doigt pour voir les écrans, le défilement les fait passer.
   La vitrine (l'étape, le téléphone, les repères) se fixe sous le menu le temps d'une piste de défilement, le ::after de la
   section : trois pas pour passer d'un écran au suivant, puis un demi-pas sur le dernier avant que la page reprenne. js/site.js
   en déduit l'écran actif ; chaque écran arrive par le bas et repart par le haut, comme sur ordinateur (Bruno, 2026-10-06 :
   « ça slide comme sur le site, du haut vers le bas »). Le téléphone se règle sur la hauteur
   de l'écran pour que tout tienne ; la phrase sous le titre de l'étape reste lue par les lecteurs d'écran mais ne s'affiche
   que sur un écran haut. */
@media (max-width: 899px) {
  .piliers--anim { --pas: 46svh; }
  .piliers--anim::after { content: ''; display: block; height: calc(var(--pas) * 3.5); }
  .piliers--anim .showcase {
    position: sticky; top: calc(var(--nav-h) + 10px); row-gap: 10px;
    --device-w: min(62vw, 236px, calc((100svh - var(--nav-h) - 170px) * 0.461));
  }
  .piliers--anim .pillar p { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .piliers--anim .showcase__dots { margin-top: 2px; }
  .piliers--anim .showcase__dots button { height: 30px; }
}
@media (max-width: 899px) and (min-height: 820px) {
  .piliers--anim .showcase { --device-w: min(62vw, 236px, calc((100svh - var(--nav-h) - 226px) * 0.461)); }
  .piliers--anim .pillar p { position: static; width: auto; height: auto; margin: 8px 0 0; overflow: visible; clip: auto; white-space: normal; }
}


/* ────── Section « Montre ton métier, pas ton catalogue » redessinée (E2, 2026-10-05) ──────
   Les deux cartes rejoignent la famille des cartes de l'app : blanches (cyan très clair côté humain), ombre douce, sans liseré.
   Une même jauge continue dans les deux cartes (Bruno : « pas fan des pointillés », les dix segments du premier jet sont
   retirés) : côté KommIA, les 80 % en dégradé et le reste en cyan pâle ; côté humain, les 80 % en violet pâle et ses 20 % en
   cyan. Elle se remplit quand chaque carte arrive (is-compte) : d'un seul geste sur ordinateur, carte par carte sur téléphone.
   Resserrée sur ordinateur (Bruno : « toujours un peu trop aéré… ça fait un peu vide ») : cartes plus proches en largeur,
   32 px entre elles, tâches en plus grand, photo un peu moins haute, pour que la liste ne s'étire plus sur la hauteur. */
@media (min-width: 1100px) { .metier--v2 .metier__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.metier--v2 .metier__grid { gap: clamp(24px, 1.9vw, 32px); }
.metier--v2 .panel { box-shadow: 0 34px 64px -46px rgba(52, 36, 130, 0.5), 0 10px 22px -18px rgba(52, 36, 130, 0.22); padding: clamp(28px, 2.8vw, 40px); }
.metier--v2 .panel--kommia { background: #fff; }
.metier--v2 .panel--toi { background: linear-gradient(165deg, #E6F7FE 0%, #F4FBFF 100%); box-shadow: 0 34px 64px -46px rgba(11, 110, 160, 0.45), 0 10px 22px -18px rgba(11, 110, 160, 0.2); }
.metier--v2 .panel__num span { font-variant-numeric: tabular-nums; }
.metier--v2 .panel__title { margin-top: 20px; font-size: clamp(1.4rem, 1.1rem + 0.6vw, 1.7rem); font-weight: 650; letter-spacing: -0.03em; }
.metier--v2 .panel__sub { font-size: 15px; color: var(--ink-70); }
.jauge { display: flex; height: 10px; margin-top: 20px; border-radius: 10px; overflow: hidden; }
.jauge > span { height: 100%; }
.jauge__k { width: 80%; }
.jauge__toi { width: 20%; }
.jauge--k .jauge__k { background: linear-gradient(90deg, #168EFF, #876AFF); }
.jauge--k .jauge__toi { background: rgba(90, 211, 255, 0.26); }
.jauge--toi .jauge__k { background: rgba(135, 106, 255, 0.14); }
.jauge--toi .jauge__toi { background: linear-gradient(90deg, #5AD3FF, #19B4E8); }
.jauge .on { transform-origin: left center; transition: transform 1100ms var(--ease-out); }
.jauge--toi .on { transition-delay: 480ms; }
.js .metier--v2 .panel:not(.is-compte) .jauge .on { transform: scaleX(0); }
/* Les sept tâches : une icône chacune, dans la couleur de la carte, sur une colonne */
.taches { list-style: none; padding: 0; margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.taches li { display: flex; align-items: flex-start; gap: 14px; font-size: 16.5px; line-height: 1.42; color: var(--ink-70); }
.taches i { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: rgba(135, 106, 255, 0.1); color: var(--violet-ink); }
.taches span { padding-top: 8px; text-wrap: pretty; }
.metier--v2 .panel--kommia .taches { flex: 1; align-content: space-between; }
/* Côté humain : la photo du métier, son nom dans une pastille avec un appareil photo, le guide dans un encart doux */
.metier--v2 .toi__photo { min-height: 230px; margin-top: 22px; border-radius: 22px; box-shadow: 0 24px 44px -30px rgba(11, 90, 140, 0.55); }
.metier--v2 .carousel__label {
  /* sur D, le nom du métier est une légende sous la photo (top: calc(100% + 8px)) ; ici, une pastille posée sur la photo */
  display: inline-flex; align-items: center; gap: 9px; top: auto; left: 14px; bottom: 24px; padding: 5px 15px 5px 5px; border-radius: 999px; background: #fff;
  -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 14px; letter-spacing: -0.01em;
  box-shadow: inset 0 0 0 1px rgba(14, 14, 20, 0.05), 0 14px 28px -14px rgba(20, 30, 60, 0.55);
}
.metier--v2 .carousel__label::before {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.2a1.6 1.6 0 0 1 1.6-1.6h1.6l1.2-1.8h4.2l1.2 1.8h1.6a1.6 1.6 0 0 1 1.6 1.6v6.6a1.6 1.6 0 0 1-1.6 1.6H5.1a1.6 1.6 0 0 1-1.6-1.6z'/%3E%3Ccircle cx='10' cy='10.4' r='2.7'/%3E%3C/svg%3E") center / 15px no-repeat, linear-gradient(135deg, #5AD3FF, #0B8FC4);
}
.metier--v2 .panel__note { margin-top: 16px; padding: 12px 16px 12px 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.78); box-shadow: inset 0 0 0 1px rgba(11, 143, 196, 0.12); }
.metier--v2 .panel__note svg { background: linear-gradient(135deg, #5AD3FF, #0B8FC4); color: #fff; box-shadow: none; }
/* Une colonne (899 px et moins, comme sur D) : la photo garde son rapport 4/3 ; une hauteur minimale lui imposait 347 px de large
   et élargissait toute la grille sur téléphone */
@media (max-width: 899px) {
  .metier--v2 .toi__photo { min-height: 0; }
  .metier--v2 .panel { padding: 24px 22px; }
  /* cartes compactes, comme sur D : le « 20 % » doit arriver vite après le « 80 % » */
  .metier--v2 .panel__title { margin-top: 16px; }
  .jauge { margin-top: 14px; height: 8px; }
  .taches { margin-top: 18px; gap: 10px; }
  .taches li { gap: 11px; font-size: 15px; }
  .taches i { width: 32px; height: 32px; border-radius: 10px; }
  .taches span { padding-top: 5px; }
  .metier--v2 .toi__photo { margin-top: 18px; }
}
/* Téléphone : défilement latéral accroché (2026-10-05, Bruno : « quand on descend, ça fasse défiler à droite le 20 %, et
   qu'ensuite on descende dans la section en dessous »). Le cadre reste accroché sous le menu le temps que les cartes glissent ; le
   défilement reste celui de la page (aucun geste capturé), le script ne fait que traduire la descente en glissement (--x). Actif
   seulement si les deux cartes tiennent dans la hauteur de l'écran et sans demande de moins d'animations (classe is-pin). */
@media (max-width: 767px) {
  .metier__pin.is-pin { position: relative; margin-inline: calc(-1 * var(--gutter)); }
  .metier__pin.is-pin .metier__sticky {
    position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); overflow: hidden;
    display: flex; flex-direction: column; justify-content: center;
  }
  .metier__pin.is-pin .metier__grid {
    display: flex; align-items: stretch; gap: 16px; padding-inline: var(--gutter);
    transform: translate3d(var(--x, 0px), 0, 0); will-change: transform;
  }
  .metier__pin.is-pin .panel { flex: 0 0 84%; }
}
@media (prefers-reduced-motion: reduce) { .jauge .on, .js .metier--v2 .panel:not(.is-compte) .jauge .on { transition: none; transform: none; } }

/* ────── Haut de page sur téléphone (2026-10-05, Bruno : « d'abord des clients qui te trouvent sur Instagram en 30 minutes par
   semaine, avec le CTA en dessous, et la vidéo ensuite ») : la promesse et le bouton tiennent dans le premier écran, même sur un
   petit téléphone (le bouton tombait à 739 px sur un iPhone 14, sous les barres de Safari, hors écran sur un iPhone SE). Le film
   passe dessous, son haut fondu dans le fond de la scène ; les boutons son et pause sur son coin bas ────── */
@media (max-width: 767px) {
  .hero--e2 .hstage { min-height: 0; }
  /* un espace franc entre le texte et le film (2026-10-05, Bruno : « ça fait coller ») : la dernière ligne mordait de 14 px sur son haut */
  .hero--e2 .hstage__inner { justify-content: flex-start; padding: 0 16px calc(min(100vw - 16px, 560px) * 1.02 + 46px); }
  /* Le premier écran pour la promesse seule (2026-10-05, Bruno : « un pavé relativement vers le haut, puis un bout de la vidéo
     qui apparaît ») : le texte remplit la hauteur visible sous le menu, centré, en plus grand ; le film commence sous le pli et
     n'arrive qu'au défilement. Taille du titre bornée par la hauteur : sur un iPhone SE, le bouton reste dans le premier écran */
  .hero--e2 .hero__text { min-height: calc(100svh - var(--nav-h)); display: flex; flex-direction: column; justify-content: center; padding: 16px 0 calc(20px + 3svh); }   /* un peu plus de marge en bas : le bloc se pose au centre optique, légèrement au-dessus du milieu */
  .hero--e2 .hero__title--long { font-size: clamp(2.25rem, min(11.4vw, 6.8svh), 3rem); }
  .hero--e2 .hero__intro { margin-top: 24px; font-size: clamp(1.0625rem, 4.8vw, 1.1875rem); line-height: 1.55; }
  .hero--e2 .hero__actions { margin-top: 32px; gap: 14px; }
  .hero--e2 .btn-primary { height: 60px; font-size: 17px; }
  .hero--e2 .meta-badge { font-size: 14.5px; }
  .hero--e2 .hero__next { font-size: 14.5px; }
  .hero--e2 .hstage__poster img, .hero--e2 .hstage__video {
    top: auto; bottom: 0;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%); mask-image: linear-gradient(180deg, transparent 0, #000 7%);   /* fondu court : les étiquettes du film, tout en haut, restent nettes */
  }
  .hero--e2 .hstage__veil { display: none; }
  .hero--e2 .hstage__foot { top: auto; bottom: 12px; right: 12px; }
}
/* Halos et preuve du premier écran (2026-10-05, Bruno : « ça manque de peps, c'est un peu plat et vide ») : sur téléphone, la
   scène prend le motif du site, trois halos qui dérivent comme dans l'appel final, et s'ouvre en même temps que le titre ;
   la preuve de Gaby ferme le premier écran, après le reste. Sur tablette et ordinateur, rien ne change */
.hstage__halo, .hstage__proof--texte { display: none; }
@media (max-width: 767px) {
  .hero--e2 .hstage__halo { display: block; animation: drift 26s ease-in-out infinite alternate, halo-in 1600ms var(--ease-out) both; }
  .hero--e2 .hstage__halo--violet { top: -22vw; right: -46vw; width: 118vw; background: radial-gradient(closest-side, rgba(135, 106, 255, 0.62), rgba(135, 106, 255, 0.24) 50%, rgba(135, 106, 255, 0) 100%); }
  .hero--e2 .hstage__halo--cyan { top: calc(30svh - 20vw); left: -50vw; width: 104vw; background: radial-gradient(closest-side, rgba(90, 211, 255, 0.5), rgba(90, 211, 255, 0.17) 50%, rgba(90, 211, 255, 0) 100%); animation-duration: 30s, 1600ms; animation-delay: -10s, 200ms; }
  .hero--e2 .hstage__halo--bleu { top: calc(68svh - 30vw); right: -52vw; width: 104vw; background: radial-gradient(closest-side, rgba(22, 142, 255, 0.32), rgba(22, 142, 255, 0.11) 50%, rgba(22, 142, 255, 0) 100%); animation-duration: 34s, 1600ms; animation-delay: -4s, 400ms; }
  .hero--e2 .hero__title--long { font-size: clamp(2.25rem, min(12.2vw, 6.9svh), 3.25rem); }
  .hero--e2 .hero__intro { margin-top: 20px; }
  .hero--e2 .hero__actions { margin-top: 28px; }
  .hero--e2 .hstage__proof--texte {
    display: grid; grid-template-columns: 37.5px auto; column-gap: 12px; align-items: center; align-self: flex-start;
    margin-top: 22px; padding: 0; background: none; box-shadow: none; border-radius: 0;
    animation: fade-up 900ms var(--ease-out) both 1150ms;
  }
  .hero--e2 .hstage__proof--texte:hover { background: none; }
  .hero--e2 .hstage__proof--texte img { grid-row: span 2; width: 34px; height: 34px; margin-left: 3.5px; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(135, 106, 255, 0.45); }
  .hero--e2 .hstage__proof--texte .happ__proof-text { font-size: 14px; line-height: 1.35; }
  .hero--e2 .hstage__proof--texte .happ__proof-who { font-size: 13px; line-height: 1.35; }
  .hero--e2 .hstage__proof--texte .happ__proof-who::before { content: none; }
}
/* écran bas (iPhone SE dans Safari) : la preuve tomberait à cheval sur le bas de l'écran, elle reste au cas de Gaby plus bas */
@media (max-width: 767px) and (max-height: 620px) { .hero--e2 .hstage__proof--texte { display: none; } }
@keyframes halo-in { from { opacity: 0; } }

/* Le film entre au défilement : il monte et apparaît quand un cinquième en est visible (classe is-film-vu posée par
   accueil-v2-e.js), puis la vidéo démarre ; sans JavaScript ou avec moins d'animations, il est là d'emblée */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .js .hero--e2 .hstage__poster img, .js .hero--e2 .hstage__video { translate: 0 36px; scale: 0.96; }
  .js .hero--e2 .hstage__poster img { opacity: 0; }
  /* la transition n'est posée qu'à l'entrée : au chargement, le film se cache d'un coup, sans fondu inverse */
  .js .hero--e2 .hstage.is-film-vu .hstage__poster img, .js .hero--e2 .hstage.is-film-vu .hstage__video { translate: none; scale: none; transition: opacity 900ms var(--ease-out), translate 1100ms var(--ease-out), scale 1100ms var(--ease-out); }
  .js .hero--e2 .hstage.is-film-vu .hstage__poster img { opacity: 1; }
}

/* Liens vers les guides Instagram par métier du blog, sous les deux panneaux (maillage interne, validé par Bruno le 2026-10-06) */
.metier__guides { max-width: 46rem; margin: clamp(28px, 3vw, 40px) auto 0; text-align: center; font-size: 15.5px; line-height: 1.7; color: var(--ink-70); text-wrap: balance; }
.metier__guides a { color: var(--violet-ink); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(91, 63, 224, 0.4); text-underline-offset: 3px; }
.metier__guides a:hover { text-decoration-color: currentColor; }