@layer ancien {
/* Habillage de l'aperçu devenu le site : la version claire (la V2 telle qu'elle est, comme les maquettes). La « version
   sombre » proposée le 18/10 et son bouton clair / sombre sont retirés de la V6 (T16, 31/10/2026) : aucun nouveau
   visiteur de la V5 ne la voyait. */

/* Barre du menu pleine (demande d'Anthony) : toute blanche, dès le haut de la page et pendant le défilement. */
html:root :is(.entete, .entete--defile) {
  border-bottom: 1px solid rgba(11, 20, 80, 0.08);
  background-color: #ffffff;
  box-shadow: 0 2px 16px rgba(11, 20, 80, 0.06);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Le cartouche blanc du logo se fond dans la barre blanche : son liseré bleu disparaît. */
/* (Un pseudo-élément ne compte pas dans :is() : ::before a sa propre règle.) */
html:root .entete__logo--cartouche,
html:root .entete__logo--cartouche::before {
  border-color: transparent;
}

html:root .entete__lien {
  color: #3a4466;
}

html:root :is(.entete__lien:hover, .entete__lien[aria-current="page"], .entete__menu) {
  color: #0b1450;
}

/* La barre pleine se pose AU-DESSUS du contenu, plus par-dessus (Anthony : « le menu coupe les vidéos ») : la page
   commence sous la barre, et les marges hautes qui réservaient sa place quand elle était transparente tombent. Le hero
   garde sa hauteur : image et vidéo entières sous la barre, texte au même endroit sur l'image. */
body {
  padding-top: var(--hauteur-entete);
}

main {
  --hauteur-entete: 0px;
}

/* À propos (Anthony : « le visage est toujours coupé en haut ») : la source touche déjà le bord haut de la tête, donc
   on ne rogne plus jamais en haut. Sur les écrans larges, le surplus de hauteur part en bas (cou), plus au front. */
body[data-page="a-propos"] .hero > :is(.hero__image, video.apercu-video) {
  object-position: 66% 0%;
}

/* Contact (« pareil pour Contact, le bandeau du menu coupe le haut ») : même ancrage en haut, l'espace au-dessus de
   sa tête (dans la source) reste visible à toutes les largeurs. */
body[data-page="contact"] .hero > :is(.hero__image, video.apercu-video) {
  object-position: 60% 0%;
}

/* Contact à l'ordinateur (« il faut descendre plus vers le buste, trop de vide au-dessus de la tête ») : le haut de
   ses cheveux est à 108 px du haut de la vidéo (2200 px de large) et à 82,5 px du haut de l'image (1920) ; on remonte
   le cadre pour le laisser à 28 px sous la barre, quelle que soit la largeur (cqw = largeur du hero), sans jamais
   découvrir le bas (borne : hauteur rendue − 570 px, la hauteur du hero). */
@media (min-width: 1200px) {
  body[data-page="contact"] .hero {
    container-type: inline-size;
  }

  body[data-page="contact"] .hero > video.apercu-video {
    object-position: 60% max(28px - 4.909cqw, 570px - 42.727cqw);
  }

  /* Formations : même règle (« le bandeau du menu coupe le haut ») ; image 1440 × 810, haut des cheveux du formateur à
     178,5 px du haut de la source (mesuré sur capture) → 28 px sous la barre, sans découvrir le bas (hauteur rendue
     − 570 px). */
  body[data-page="formations"] .hero {
    container-type: inline-size;
  }

  body[data-page="formations"] .hero > .hero__image {
    object-position: 50% max(28px - 12.396cqw, 570px - 56.25cqw);
  }

  body[data-page="contact"] .hero > img.hero__image {
    object-position: 60% max(28px - 4.297cqw, 570px - 37.5cqw);
  }
}

/* À propos : le haut de la photo se fond dans le bleu nuit du hero sur 120 px (téléphone et tablette ; à l'ordinateur,
   la règle plus bas pose la vidéo entière). */
body[data-page="a-propos"] .hero > :is(.hero__image, video.apercu-video) {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.55) 48px, #000 120px);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.55) 48px, #000 120px);
}

/* À propos à l'ordinateur (Anthony : « le visage est trop coupé ») : la source touche le haut de la tête, et le hero
   (2,5:1) est plus large qu'elle (2,34:1) ; en le couvrant, elle grossit et le front passe sous la barre. La vidéo
   est donc posée entière (son propre format), calée à droite et en bas, sur 88 % de la hauteur du hero : la tête a de
   l'air au-dessus, son haut et son bord gauche se fondent dans le bleu nuit. */
@media (min-width: 1200px) {
  body[data-page="a-propos"] .hero > :is(.hero__image, video.apercu-video) {
    inset: auto 0 0 auto;
    width: auto;
    height: 88%;
    aspect-ratio: 2200 / 940;
    object-fit: cover;
    object-position: 50% 0%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%), linear-gradient(90deg, transparent 0, #000 32%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, transparent 0, #000 16%), linear-gradient(90deg, transparent 0, #000 32%);
    mask-composite: intersect;
  }

  /* L'image fixe (recadrage plus large de la même source) a son format ; masquée tant que la vidéo est affichée. */
  body[data-page="a-propos"] .hero > img.hero__image {
    aspect-ratio: 1920 / 720;
  }

  body[data-page="a-propos"] .hero:has(> video.apercu-video:not([style*="none"])) > img.hero__image {
    opacity: 0;
  }
}

/* Les hauteurs des heros de la V2 sont celles de la maquette « en-tête comprise » (70-v2.css, T2). La barre étant
   maintenant au-dessus, chaque hero perd la hauteur de la barre : barre + hero = la maquette (Anthony, Contact : « un
   peu trop de marge »). */
html body[data-page="accueil"] .hero { min-height: 900px; }
html body[data-page="a-propos"] .hero { min-height: 570px; }
html body[data-page="nos-solutions"] .hero { min-height: 570px; }
html body[data-page="formations"] .hero { min-height: 570px; }
html body[data-page="contact"] .hero { min-height: 570px; }

@media (max-width: 1199px) {
  html body[data-page="accueil"] .hero { min-height: 796px; }
  html body[data-page="a-propos"] .hero { min-height: 501px; }
  html body[data-page="nos-solutions"] .hero { min-height: 501px; }
  html body[data-page="formations"] .hero { min-height: 501px; }
  html body[data-page="contact"] .hero { min-height: 501px; }
}

@media (max-width: 767px) {
  html body[data-page="accueil"] .hero { min-height: 628px; }
  html body[data-page="a-propos"] .hero { min-height: 447px; }
  html body[data-page="nos-solutions"] .hero { min-height: 447px; }
  html body[data-page="formations"] .hero { min-height: 447px; }
  html body[data-page="contact"] .hero { min-height: 447px; }
}

/* Hauts de page de À propos, Nos solutions, Formations et Contact à la même hauteur, celle d'À propos (Anthony, 17/10) :
   barre + hero = 650 px à l'ordinateur (maquette d'À propos), 581 à la tablette ; au téléphone, 511 (le texte
   d'À propos y est plus long que la hauteur minimale : 447 px de hero pour les quatre). */

/* Accueil, blocs « Nos solutions » : le liseré qui tourne (« lisere », la valeur que la V5 montrait à tout nouveau
   visiteur, figée dans la V6 par T16 ; les essais « lumiere », « survol » et « avant » du panneau Comparer sont retirés).
   Anthony, 17/10 : « l'animation des blocs ne convient pas du tout », puis, une fois retirée : « il n'y a plus aucune
   animation sur les 4 blocs ». Les blocs sont posés d'emblée (pas d'apparition au défilement). */
@property --tour {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@keyframes apercu-tour {
  to { --tour: 360deg; }
}

html:root body[data-page="accueil"] .grille--solutions > .carte--solution {
  opacity: 1 !important;
  translate: none !important;
  transition: none !important;
}

html:root body[data-page="accueil"] .grille--solutions > .carte--solution:hover {
  transform: none !important;
}

/* Défaut de la V2 (capturé à 1920, survol du bloc 2, animation d'origine comprise) : le halo flouté du bloc
   (::before, z-index -1) passe DEVANT le corps du bloc dès que le bloc forme un contexte d'empilement (transform au
   survol, opacité < 1 pendant l'apparition) : le bloc est noyé dans un flou violet. Correction : le bloc est toujours
   un contexte d'empilement ; son corps (dégradés de 10-accueil.css, halo intérieur) passe sur ::after (z-index -1),
   le halo sur ::before (z-index -2) : derrière le corps dans tous les états. La lueur de survol (ombre de ::after,
   20-animations.css) passe d'une transition d'opacité à une transition d'ombre. */
body[data-page="accueil"] .grille--solutions > .carte--solution {
  isolation: isolate;
  background: none;
  box-shadow: none;
}

body[data-page="accueil"] .grille--solutions > .carte--solution::before {
  z-index: -2;
}

body[data-page="accueil"] .grille--solutions > .carte--solution::after {
  inset: -2px;
  z-index: -1;
  border: 2px solid transparent;
  background: radial-gradient(130px 110px at 0 0, var(--corps-hg) 25%, rgba(0, 0, 0, 0) 100%) padding-box,
    radial-gradient(130px 110px at 100% 0, var(--corps-hd) 25%, rgba(0, 0, 0, 0) 100%) padding-box,
    radial-gradient(130px 110px at 0 100%, var(--corps-bg) 25%, rgba(0, 0, 0, 0) 100%) padding-box,
    radial-gradient(130px 110px at 100% 100%, var(--corps-bd) 25%, rgba(0, 0, 0, 0) 100%) padding-box,
    linear-gradient(var(--corps-centre), var(--corps-centre)) padding-box,
    var(--lisere) border-box;
  box-shadow: inset 0 0 8px var(--lisere-halo);
  opacity: 1;
  transition: box-shadow 0.35s ease-out;
}

body[data-page="accueil"] .grille--solutions > .carte--solution:hover::after {
  box-shadow: inset 0 0 8px var(--lisere-halo), 0 14px 36px rgba(117, 80, 255, 0.28);
}

@media (prefers-reduced-motion: no-preference) {
  /* Survol : le bloc monte de 6 px en 350 ms, son halo s'allume, l'icône grossit de 8 %. */
  html:root body[data-page="accueil"] .grille--solutions > .carte--solution {
    transition: transform 0.35s ease-out !important;
  }

  html:root body[data-page="accueil"] .grille--solutions > .carte--solution:hover {
    transform: translateY(-6px) !important;
  }

  html:root body[data-page="accueil"] .carte--solution > .icone {
    transition: transform 0.35s ease-out;
  }

  html:root body[data-page="accueil"] .carte--solution:hover > .icone {
    transform: scale(1.08);
  }

  html:root body[data-page="accueil"] .carte--solution::before {
    transition: opacity 0.35s ease-out, filter 0.35s ease-out;
  }

  html:root body[data-page="accueil"] .carte--solution:hover::before {
    opacity: 1;
    filter: blur(10px);
  }

  /* « lisere » : les couleurs du contour (relevées sur la maquette) tournent lentement autour de chaque bloc, un tour
     en 16 s, décalé d'un quart de tour d'un bloc à l'autre. Mêmes couleurs que 10-accueil.css, départ « from --tour ». */
  html:root body[data-page="accueil"] .carte--solution {
    animation: apercu-tour 16s linear infinite;
  }

  html:root body[data-page="accueil"] .carte--solution[data-bloc="2"] { animation-delay: -4s; }
  html:root body[data-page="accueil"] .carte--solution[data-bloc="3"] { animation-delay: -8s; }
  html:root body[data-page="accueil"] .carte--solution[data-bloc="4"] { animation-delay: -12s; }

  html:root body[data-page="accueil"] .carte--solution[data-bloc="1"] {
    --lisere: conic-gradient(from var(--tour), #4EABE9 -5.9deg, #26A1DB 5.9deg, #2AAEE4 17.2deg, #34A2E2 27.3deg, #2046B1 35.9deg, #1354D0 47.1deg, #005BAF 72.8deg, #0047AA 107.2deg, #2431AF 132.9deg, #2632A0 144.1deg, #7683F4 152.7deg, #3CC1F7 162.8deg, #459DF1 174.1deg, #3EB8F7 185.9deg, #3FD0FD 197.2deg, #0F45A8 207.3deg, #1B3CA6 215.9deg, #004995 227.1deg, #4898D7 252.8deg, #0B267D 287.2deg, #31137D 312.9deg, #9162DC 324.1deg, #896AE1 332.7deg, #7A76E4 342.8deg, #4EABE9 354.1deg, #26A1DB 365.9deg);
  }

  html:root body[data-page="accueil"] .carte--solution[data-bloc="2"] {
    --lisere: conic-gradient(from var(--tour), #6079D8 -5.8deg, #4086D5 5.8deg, #3EB7EB 17deg, #1340AF 27deg, #2A39AB 35.5deg, #526BD7 46.7deg, #0F3186 72.6deg, #796BD0 107.4deg, #8459C6 133.3deg, #411788 144.5deg, #8A66D1 153deg, #291D82 163deg, #121E7D 174.2deg, #0C2B8F 185.8deg, #084099 197deg, #292DA3 207deg, #292CAA 215.5deg, #3842BB 226.7deg, #34389F 252.6deg, #22298C 287.4deg, #3C2095 313.3deg, #321997 324.5deg, #735CD3 333deg, #7269D7 343deg, #6079D8 354.2deg, #4086D5 365.8deg);
  }

  html:root body[data-page="accueil"] .carte--solution[data-bloc="3"] {
    --lisere: conic-gradient(from var(--tour), #7267C1 -5.9deg, #4C56C3 5.9deg, #361F94 17.1deg, #432897 27.2deg, #582B9A 35.7deg, #5A33A4 46.9deg, #422E99 72.7deg, #1A2B92 107.3deg, #342191 133.1deg, #3D1992 144.3deg, #8576E4 152.8deg, #64ADF3 162.9deg, #7974CF 174.1deg, #B0729A 185.9deg, #D87993 197.1deg, #E07892 207.2deg, #DE7993 215.7deg, #CE80A0 226.9deg, #A8668D 252.7deg, #3A0D53 287.3deg, #450E58 313.1deg, #B0509D 324.3deg, #581C6F 332.8deg, #9059B7 342.9deg, #7267C1 354.1deg, #4C56C3 365.9deg);
  }

  html:root body[data-page="accueil"] .carte--solution[data-bloc="4"] {
    --lisere: conic-gradient(from var(--tour), #2FA3E0 -5.8deg, #31A5DC 5.8deg, #1B2792 16.9deg, #3E2799 26.9deg, #4B249A 35.4deg, #7A51C6 46.6deg, #535BC3 72.5deg, #5F54C7 107.5deg, #714CC1 133.4deg, #3C1786 144.6deg, #9078E5 153.1deg, #6F8CF3 163.1deg, #5593E9 174.2deg, #51BBF8 185.8deg, #3FD2FB 196.9deg, #5FBAFA 206.9deg, #4CB9F4 215.4deg, #0041A5 226.6deg, #003E8F 252.5deg, #002C7D 287.5deg, #003DAF 313.4deg, #1047B6 324.6deg, #349DEA 333.1deg, #22A4E1 343.1deg, #2FA3E0 354.2deg, #31A5DC 365.8deg);
  }

  }

/* Plus de zoom lent sur l'image des hauts de page (« hero vivant » A-24 de la V2, 6 % en 24 s) : Anthony, 17/10 :
   « quand j'arrive sur la page, il y a un zoom sur l'image ». */
html .hero > .hero__image {
  animation: none !important;
  transform: none !important;
}

/* Les ancres arrivent toujours 16 px sous la barre fixe (80 px, 64 px au téléphone). #contenu (cible du lien
   « Aller au contenu ») compris : avec la hauteur d'en-tête à 0 dans main, il arrivait 64 px sous la barre (20/10). */
#contenu,
main [id] {
  scroll-margin-top: 96px;
}

@media (max-width: 767px) {
  #contenu,
  main [id] {
    scroll-margin-top: 80px;
  }
}

@media (max-width: 1199px) {
  html:root :is(.entete__panneau, .entete--ouvert) {
    background-color: #ffffff;
  }

  }

/* Lisibilité des hauts de page (Anthony, 17/10 ~20:05 : « À propos et Contact on arrive bien à lire le texte par
   rapport aux autres hauts de page, inspire-toi et adapte ») : la V2 (A-41) ne garde qu'un voile léger à gauche, plus
   dense sur Contact ; avec les vidéos, claires et chargées sous le texte, ce voile ne suffit plus sur Formations, Nos
   solutions et l'Accueil. On y pose le voile de Contact, un peu plus long (le texte va jusqu'à ≈ 52 % de la largeur),
   la vidéo restant libre à droite. */
@media (min-width: 1200px) {
/* Accueil (Anthony, 17/10 ~22:10 : « le voile n'est pas du tout adapté au texte, il ne faut pas que ce soit sur tout » ;
     18/10 ~03:35 : « ce niveau-là n'est pas bien intégré ») : le voile limité au bloc du texte formait un rectangle sombre
     aux bords visibles, les avantages restant sur les nuages clairs. Fondu qui monte du bas sur toute la largeur, sans
     bord : l'image se dissout dans le bleu nuit sous le texte et les avantages (texte à partir de 46 % de la hauteur du
     hero ; « artificielle, » en dégradé mesuré à 2,88 avec un fondu plus doux) ; planète, lune, ciel et tête du
     personnage libres au-dessus (plus rien au-dessus de 29 % depuis le haut). */
  body[data-page="accueil"] .hero--accueil::before {
    background: linear-gradient(0deg, rgba(4, 20, 38, 0.94) 0%, rgba(4, 20, 38, 0.9) 34%, rgba(4, 20, 38, 0.86) 46%,
      rgba(4, 20, 38, 0.78) 54%, rgba(4, 20, 38, 0.56) 58%, rgba(4, 20, 38, 0.28) 63%, rgba(4, 20, 38, 0.1) 67%, rgba(4, 20, 38, 0) 71%);
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Formations, vidéo du haut de page (Anthony, 17/10 ~20:10 : « l'image est coupée ») : la règle ci-dessus vaut pour
   l'image 1440 × 810 ; la vidéo (2200 × 940) a le haut des cheveux du formateur à ≈ 118 px → 28 px sous la barre,
   sans découvrir le bas (hauteur rendue 42,727cqw − 570 px), comme Contact. */
@media (min-width: 1200px) {
  body[data-page="formations"] .hero > video.apercu-video {
    object-position: 50% max(28px - 5.364cqw, 570px - 42.727cqw);
  }
}

/* Voiles des hauts de page UNIFORMES à l'œil (Anthony, 17/10 ~20:25 : « il faut que ce soit uniforme les voiles
   visuellement ») : même dessin partout (sombre sous la colonne du texte, fondu au même endroit vers la droite, sujet
   libre à droite) ; l'intensité --vh est réglée page par page pour que le fond rendu sous le texte ait la même
   luminance (mesure : opacite.py sur les captures du banc à 1920, vidéo par défaut à 5 s). L'Accueil (texte en bas)
   garde son voile montant, réglé sur le même niveau. */
body[data-page] .hero:not(.hero--accueil)::before {
  background: linear-gradient(0deg, rgba(4, 20, 38, 0.5), rgba(4, 20, 38, 0) 140px),
    linear-gradient(90deg, rgb(4 20 38 / var(--vh, 0.85)) 0%, rgb(4 20 38 / calc(var(--vh, 0.85) * 0.95)) 48%, rgb(4 20 38 / calc(var(--vh, 0.85) * 0.45)) 58%, rgba(4, 20, 38, 0) 76%);
}
body[data-page="a-propos"] .hero { --vh: 0.85; }
body[data-page="contact"] .hero { --vh: 0.99; }
body[data-page="formations"] .hero { --vh: 0.99; }
body[data-page="nos-solutions"] .hero { --vh: 0.99; }

/* Formations, voile adapté à son image (Anthony : « l'opacité n'est pas pareille encore… il faut adapter en fonction de
   l'image ») : l'hologramme du cerveau, très clair, commence au bout du mot « entreprendre » (x ≈ 1000 à 1920), là où
   le voile commun s'éclaircit ; la partie sombre va jusqu'à 54 %, puis fondu rapide, nul à 68 % avant le visage du
   formateur (x ≈ 1290). */
body[data-page="formations"] .hero:not(.hero--accueil)::before {
  background: linear-gradient(0deg, rgba(4, 20, 38, 0.5), rgba(4, 20, 38, 0) 140px),
    linear-gradient(90deg, rgb(4 20 38 / var(--vh, 0.85)) 0%, rgb(4 20 38 / calc(var(--vh, 0.85) * 0.95)) 54%, rgb(4 20 38 / calc(var(--vh, 0.85) * 0.45)) 61%, rgba(4, 20, 38, 0) 68%);
}

/* Téléphone ET tablette (< 1200 px) : la vidéo en BANDEAU au-dessus du texte, comme le haut de l'Accueil (18/10 ;
   Anthony : « comment les vidéos seront intégrées en version mobile ? », puis « c'est à toi de me dire »). Derrière le
   texte, le téléphone ne montrait qu'une tranche de 25 à 42 % de la largeur de la vidéo (présentateur sous le titre,
   homme du bas de Contact hors du cadre) ; sur tablette, le titre prend toute la largeur et sa fin tombait sur la photo
   (audit du 18/10 : « projet. » à 1,4 sur le visage). Bandeau de 300 px au téléphone, vidéo entière en largeur sur
   tablette (42,7vw = format 2,34:1, au plus 460 px), cadré sur le sujet, fondu en bas dans le bleu nuit ; le texte se
   pose dessous, sur le fond uni, sans voile. Bas de page de même. Cadrages relevés sur la 1re image de chaque vidéo
   (mobile/planche-sujets.jpg, graduée tous les 10 %). */
@media (max-width: 1199px) {
  html body:is([data-page="a-propos"], [data-page="nos-solutions"], [data-page="formations"], [data-page="contact"]) .hero,
  html body[data-page] .cta {
    --bande: clamp(300px, 42.7vw, 460px);
    min-height: 0;
  }

  html body:is([data-page="a-propos"], [data-page="nos-solutions"], [data-page="formations"], [data-page="contact"]) .hero {
    padding-top: calc(var(--bande) - 32px);
  }

  html body[data-page] .cta {
    padding-top: calc(var(--bande) - 24px);
  }

  html body:is([data-page="a-propos"], [data-page="nos-solutions"], [data-page="formations"], [data-page="contact"]) .hero > :is(.hero__image, video.apercu-video),
  html body[data-page] .cta > :is(.cta__image, video.apercu-video) {
    inset: 0 0 auto;
    width: 100%;
    height: var(--bande);
    aspect-ratio: auto;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(180deg, #000 72%, rgba(0, 0, 0, 0) 100%);
  }

  /* :not(.hero--accueil) : même poids que le voile commun des heros (« voiles uniformes », écrit pour toutes les
     largeurs), qui sinon l'emportait et laissait le bandeau assombri à gauche (Anthony, 18/10 : « tu as laissé
     l'opacité sur le côté gauche de l'écran »). L'Accueil perd aussi son voile léger de gauche (0,35, V2). */
  html body:is([data-page="a-propos"], [data-page="nos-solutions"], [data-page="formations"], [data-page="contact"]) .hero:not(.hero--accueil)::before,
  html body[data-page="accueil"] .hero.hero--accueil::before,
  html body[data-page] .cta::before {
    background: none;
  }

  html body[data-page="a-propos"] .hero > video.apercu-video { object-position: 90% 0%; }
  html body[data-page="nos-solutions"] .hero > video.apercu-video { object-position: 85% 50%; }
  html body[data-page="formations"] .hero > video.apercu-video { object-position: 85% 50%; }
  html body[data-page="contact"] .hero > video.apercu-video { object-position: 100% 50%; }
  html body:is([data-page="contact"], [data-page="formations"]) .cta > video.apercu-video { object-position: 100% 50%; }
  html body[data-page="a-propos"] .cta > video.apercu-video { object-position: 60% 50%; }
  html body[data-page="nos-solutions"] .cta > video.apercu-video { object-position: 40% 50%; }

  /* Titres : lignes équilibrées, plus de mot seul en fin de titre (audit : 11 à 31 veuves par largeur). L'ordinateur
     garde les coupures relevées sur la maquette. */
  body[data-page] :is(h1, h2, h3, h4) {
    text-wrap: balance;
  }

  /* Menu ouvert : le panneau défile s'il est plus haut que l'écran (téléphone en paysage : « Nous contacter » coupé de
     13 px) et se détache de la page par une ombre. */
  .js .entete__panneau {
    max-height: calc(100vh - 81px);
    max-height: calc(100dvh - 81px);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.35);
  }

  /* Le panneau est une colonne flexible : sans cela, ses éléments rétrécissent pour tenir dans la hauteur (bouton
     « Nous contacter » écrasé en paysage) au lieu de faire défiler le panneau. */
  .js .entete__panneau > * {
    flex-shrink: 0;
  }
}

@media (max-width: 767px) {
  .js .entete__panneau {
    max-height: calc(100vh - 65px);
    max-height: calc(100dvh - 65px);
  }
}

/* Accueil sur tablette : sa photo occupe déjà le haut du hero (70-v2.css : max(41,7vw, 360px)), mais le texte commençait
   dedans (audit : « artificielle, » à 1,2 sur le lever de soleil). Il se pose sous la photo, comme au téléphone (texte à
   50 px du bas de la photo, sur son fondu). */
@media (min-width: 768px) and (max-width: 1199px) {
  html body[data-page="accueil"] .hero--accueil {
    min-height: 0;
    padding-top: calc(max(41.7vw, 360px) - 50px);
  }
}

/* Bas de page à l'ordinateur (audit du 18/10) : le voile uniforme (0,5) laissait des mots en dégradé sur les zones claires
   des images (« vos compétences ? » à 2,97 en bas de Formations, soleil derrière le texte en bas d'À propos, « solution
   idéale. » sur les nuages). Voile plus dense derrière le bloc de texte seulement, l'image reste vive autour ; un même
   dessin pour les trois bas de page centrés. */
@media (min-width: 1200px) {
  html body[data-page] .cta--centre::before {
    background: radial-gradient(ellipse 44% 64% at 50% 50%, rgba(4, 20, 38, 0.82) 0%, rgba(4, 20, 38, 0.72) 60%, rgba(4, 20, 38, 0.38) 100%);
  }

  html body[data-page] .cta--gauche::before {
    background: linear-gradient(90deg, rgba(4, 20, 38, 0.88) 0%, rgba(4, 20, 38, 0.8) 46%, rgba(4, 20, 38, 0.3) 66%, rgba(4, 20, 38, 0.15) 100%);
  }
}

/* Page d'erreur, téléphone et tablette : même bandeau que les autres hauts de page (2e passage de l'audit, 18/10 :
   « introuvable » à 2,9 sur l'image à 360). Sa hauteur minimale est gardée : la page ne doit pas être plus courte que
   l'écran. */
@media (max-width: 1199px) {
  html body[data-page="erreur"] .hero {
    --bande: clamp(300px, 42.7vw, 460px);
    padding-top: calc(var(--bande) - 32px);
  }

  html body[data-page="erreur"] .hero > .hero__image {
    inset: 0 0 auto;
    width: 100%;
    height: var(--bande);
    -webkit-mask-image: linear-gradient(180deg, #000 72%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(180deg, #000 72%, rgba(0, 0, 0, 0) 100%);
  }

  html body[data-page="erreur"] .hero:not(.hero--accueil)::before {
    background: none;
  }
}

/* Nos solutions, surtitre « IA générative » sur le fond lavande : 4,44 pour un seuil de 4,5 (audit) ; un ton plus
   sombre du même gris bleu. */
html:root body[data-page="nos-solutions"] [data-section="generative"] .surtitre {
  color: #4a5470;
}

/* Accueil à la hauteur des autres hauts de page (Anthony, 18/10 : « faire en sorte que l'accueil fasse la même taille
   que À propos et les autres hauts de page ») : barre + hero = 650 px au lieu de 980 (maquette). La photo ne peut plus
   être posée au-dessus du texte (A-28 levé) : elle couvre tout le hero comme ailleurs, cadrée sur la planète et le
   lever de soleil ; contenu centré verticalement ; voile sur toute la largeur, plus dense sous le texte (les
   avantages vont jusqu'à 84 % de la largeur à 1920, 96 % à 1440). */
@media (min-width: 1200px) {
  html body[data-page="accueil"] .hero--accueil {
    min-height: 570px;
    padding: 48px 0;
    justify-content: center;
  }

  html body[data-page="accueil"] .hero--accueil > :is(.hero__image, video.apercu-video) {
    inset: 0;
    height: 100%;
    object-position: 50% 12%;
    -webkit-mask-image: none;
    mask-image: none;
  }

  html body[data-page="accueil"] .hero--accueil::before {
    background: linear-gradient(0deg, rgba(4, 20, 38, 0.5), rgba(4, 20, 38, 0) 140px),
      linear-gradient(90deg, rgba(4, 20, 38, 0.9) 0%, rgba(4, 20, 38, 0.84) 46%, rgba(4, 20, 38, 0.66) 62%, rgba(4, 20, 38, 0.58) 100%);
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Bouton flottant « Tester notre avatar » (Anthony, 18/10 : « comme celui de HUMANOVA, on prend celui-là en attendant ») :
   le dessin du bouton de humanova-ia.com (pastille en dégradé, point blanc lumineux, pulsation douce toutes les 2,4 s,
   texte sombre), aux couleurs d'accent du site (#7776FF → #00C8FF), en bas à droite de toutes les pages ; « Avatar » au
   téléphone.
   20/10 (Anthony : « le texte de la bulle est un peu trop long ») : le visage de Nova (image de sa vidéo de veille, point
   vert « en ligne ») à la place du point blanc, et le texte sur deux lignes : « Discuter avec Nova » en gras, « Votre
   agent vidéo IA dédié » plus petit dessous (première ligne seule sur tablette et téléphone). */
.apercu-avatar {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 58px;
  padding: 0 24px 0 8px;
  border-radius: 999px;
  background: linear-gradient(100deg, #7776ff, #00c8ff);
  color: #0b1226;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  animation: apercu-avatar-pulse 2.4s ease-in-out infinite;
  transition: transform 0.25s, filter 0.25s;
}

.apercu-avatar:hover {
  transform: translateY(-2px);
  filter: brightness(1.09);
}

.apercu-avatar:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.apercu-avatar__visage {
  position: relative;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #0b1226 url("/assets/video/nova-visage-katya-4.webp") center / cover no-repeat;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}

.apercu-avatar__visage::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 0 2px #ffffff;
}

.apercu-avatar__textes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
}

.apercu-avatar__titre {
  font-size: 16px;
  font-weight: 700;
}

.apercu-avatar__sous {
  font-size: 12.5px;
  font-weight: 600;
  opacity: 0.8;
}

@keyframes apercu-avatar-pulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(30, 140, 255, 0.35), 0 0 0 0 rgba(0, 200, 255, 0.5); }
  50% { box-shadow: 0 6px 18px rgba(30, 140, 255, 0.35), 0 0 0 10px rgba(0, 200, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .apercu-avatar {
    animation: none;
  }
}

@media (max-width: 767px), (max-height: 500px) {
  .apercu-avatar {
    right: 10px;
    bottom: 10px;
    height: 44px;
    padding: 0 16px 0 6px;
    font-size: 14px;
    gap: 8px;
  }

  .apercu-avatar__visage {
    width: 32px;
    height: 32px;
  }

  .apercu-avatar__titre {
    font-size: 14px;
  }

  .apercu-avatar__sous {
    display: none;
  }
}

/* Logos « Ils nous font confiance » (Anthony, 18/10 : « rendre animés les boutons comme HUMANOVA ») : comme sur
   humanova-ia.com, une seule ligne qui défile en continu (34 s pour un tour, arrêt au survol), fondue aux deux bords ;
   chaque tuile flotte doucement, décalée de ses voisines ; au survol, elle se soulève, s'éclaire d'une lueur violette et
   le logo grossit un peu. Écart porté par la marge droite de chaque tuile (pas par gap) : la boucle retombe exactement
   sur la copie, sans saut. Logos gardés en couleur. Règle aussi l'audit (7e logo seul sur sa ligne en tablette). */
.logos-defile {
  overflow: hidden;
  padding: 14px 0 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.logos.logos--defile {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0;
  width: max-content;
  animation: apercu-logos-defile 34s linear infinite;
}

.logos-defile:hover .logos--defile {
  animation-play-state: paused;
}

.logos--defile > li {
  margin-right: 24px;
}

.logos--defile .logo-client {
  transition: transform 0.3s, box-shadow 0.3s;
  animation: apercu-logos-flotte 5.8s ease-in-out infinite;
}

.logos--defile > li:nth-child(odd) .logo-client {
  animation-delay: -2.9s;
}

.logos--defile > li:nth-child(3n) .logo-client {
  animation-delay: -1.6s;
}

.logos--defile .logo-client img {
  transition: transform 0.3s;
}

.logos--defile .logo-client:hover {
  animation-play-state: paused;
  transform: translateY(-6px);
  box-shadow: 0 10px 26px rgba(80, 90, 255, 0.28), 0 0 0 1px rgba(124, 150, 255, 0.4);
}

.logos--defile .logo-client:hover img {
  transform: scale(1.06);
}

@keyframes apercu-logos-defile {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes apercu-logos-flotte {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@media (max-width: 767px) {
  .logos--defile .logo-client {
    width: 112px;
    height: 99px;
  }

  .logos--defile > li {
    margin-right: 16px;
  }
}

/* Pictos uniformes (Anthony, 18/10 : « que tout soit bien uniformisé » ; « quand je passe d'une page à une autre, ce
   ne sont pas les mêmes pictos ») : une couleur (dégradé commun), un trait réel constant, quatre tailles par rôle, une
   seule pastille (pictos posés sur une photo). Relevé : scratchpad/apercu-video/pictos/rapport-pictos.md. */

/* Trait réel constant : l'épaisseur ne grossit plus avec la taille du picto. */
html body .icone :is(path, circle, rect, line, polyline, polygon, ellipse) {
  vector-effect: non-scaling-stroke;
}

html body[data-page] .icone {
  stroke-width: 3px;
}

html body[data-page] :is(.bouton, .fleche, .puces, .champ__saisie, .pied__contact, .reseau) .icone {
  stroke-width: 2px;
}

/* Une seule couleur : le dégradé commun, à la place des couleurs relevées carte par carte. */
html body[data-page] :is(.hero__carte, .carte--solution, .benefice, .carte--engagement, .mission__point, .carte--valeur,
  .carte--agent, .tuile-icone, .pastille, .chiffre-bloc, .champ__saisie, .coordonnee__pastille,
  .formulaire__confidentialite, .cta__carte) > .icone,
html body[data-page] :is(.puces, .pied__contact) .icone {
  stroke: url(#degrade-icone) !important;
  fill: none !important;
}

/* Quatre tailles par rôle. */
html body[data-page] :is(.hero__carte, .carte--solution, .benefice, .mission__point, .carte--valeur, .carte--agent,
  .tuile-icone, .chiffre-bloc) > .icone {
  width: 64px;
  height: 64px;
}

html body[data-page] :is(.carte--engagement, .cta__carte, .coordonnee__pastille, .formulaire__confidentialite, .pastille) > .icone {
  width: 44px;
  height: 44px;
}

html body[data-page] :is(.champ__saisie, .pied__contact, .reseau) > .icone,
html body[data-page] .puces .icone,
html body[data-page] .pied__contact .icone {
  width: 24px;
  height: 24px;
}

html body[data-page] .bouton .icone {
  width: 20px;
  height: 20px;
}

/* Champs du formulaire : picto de 24 px centré sur les 60 px du champ (il était à 30 px, top 15). */
html body[data-page="contact"] .champ__saisie > .icone {
  top: 18px;
  left: 24px;
}

/* Pastilles : aucune, sauf sur les cartes de Formations, où le picto chevauche la photo. */
html body[data-page] :is(.tuile-icone, .tuile-icone--clair, .coordonnee__pastille) {
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

html body[data-page="formations"] .pastille {
  width: 72px;
  height: 72px;
  border: 1px solid rgba(119, 118, 255, 0.45);
  border-radius: 16px;
  background: rgba(7, 27, 60, 0.85);
  box-shadow: none;
}

/* Bouton « Envoyer ma demande » : un seul picto (l'envoi), à 20 px comme les flèches des autres boutons. */
html body[data-page="contact"] .bouton:has(.icone--send) .icone--arrow-right {
  display: none;
}

/* Formations : les règles de la V1 posent la couleur sur les formes du picto (coches : rond plein violet #7880EA dans les
   cartes, rond filaire #A9AEFA dans les conférences, trait blanc) et la pastille carte par carte (dégradés, 88 / 64 px,
   spécificité jusqu'à 0,4,0) : ramenées à la règle commune. Coches filaires en dégradé ; une seule pastille, de 72 px,
   là où le picto chevauche la photo (cartes entreprise) ; à côté du titre des conférences, picto seul, sans pastille. */
html body[data-page="formations"] .puces .icone :is(path, circle) {
  fill: none !important;
  stroke: url(#degrade-icone) !important;
}

html body[data-page="formations"] .carte--formation .pastille {
  width: 72px !important;
  height: 72px !important;
  border: 1px solid rgba(119, 118, 255, 0.45) !important;
  border-radius: 16px !important;
  background: rgba(7, 27, 60, 0.85) !important;
  box-shadow: none !important;
}

html body[data-page="formations"] .carte--conference .pastille {
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}

html body[data-page="formations"] .pastille > .icone {
  width: 44px !important;
  height: 44px !important;
  stroke: url(#degrade-icone) !important;
}

/* Animations passives (Anthony, 18/10 : « plus d'animation passive, pas forcément quand on passe la souris, des choses
   minimalistes mais qui rajoutent de la vie ») : quatre mouvements lents et continus ; rien sous « mouvement réduit ».
   1. Le reflet des H1 (V2, § 11.1) passe sur tous les mots en dégradé, toutes les 8 s (H2 décalés de 3 s).
   2. Les pictos des cartes et blocs flottent de 3 px sur 6 s, décalés d'une carte à l'autre (pas les blocs « Nos
      solutions » de l'Accueil, qui ont leur animation au choix et un picto qui grossit au survol).
   3. (Reflet des boutons retiré le 18/10 : c’était celui de humanova-ia.com ; voir « satellite » plus bas.)
   4. Le trait des surtitres fait couler son dégradé (pas sur Nos solutions : double trait dessiné par deux fonds). */
@media (prefers-reduced-motion: no-preference) {
  .js .degrade {
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 70%),
      var(--degrade-accent);
    background-size: 50% 100%, 100% 100%;
    background-repeat: no-repeat;
    animation: reflet 8s linear infinite;
  }

  .js :is(.section--clair, .section--blanc, .section--legal) .degrade {
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 70%),
      var(--degrade-accent-clair);
  }

  .js h2 .degrade {
    animation-delay: -3s;
  }

  html body[data-page] :is(.hero__carte, .benefice, .carte--engagement, .mission__point, .carte--valeur, .carte--agent,
    .tuile-icone, .chiffre-bloc, .cta__carte, .coordonnee__pastille, .pastille) > .icone {
    animation: apercu-picto-flotte 6s ease-in-out infinite;
  }

  html body[data-page] :is(.hero__carte, .benefice, .carte--engagement, .mission__point, .carte--valeur, .carte--agent,
    .tuile-icone, .chiffre-bloc, .cta__carte, .coordonnee__pastille, .pastille):nth-child(2n) > .icone {
    animation-delay: -2s;
  }

  html body[data-page] :is(.hero__carte, .benefice, .carte--engagement, .mission__point, .carte--valeur, .carte--agent,
    .tuile-icone, .chiffre-bloc, .cta__carte, .coordonnee__pastille, .pastille):nth-child(3n) > .icone {
    animation-delay: -4s;
  }

  .js body:not([data-page="nos-solutions"]) .surtitre::before,
  .js body:not([data-page="nos-solutions"]) .surtitre--apres::after {
    background-size: 200% 100%;
    animation: apercu-trait-coule 5s ease-in-out infinite alternate;
  }
}

@keyframes apercu-picto-flotte {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes apercu-trait-coule {
  from { background-position: 0% 0; }
  to { background-position: 100% 0; }
}

/* Menu ouvert (téléphone, tablette) : la bulle Nova s'efface le temps du menu (20/10 ; les autres boutons flottants
   de l'aperçu sont retirés de la V6, T16). */
.entete--ouvert ~ .apercu-avatar {
  visibility: hidden;
}

/* ==== Téléphone : tout centré (Anthony, 18/10 : « sur la version mobile, c'est important que les textes, titres, etc.
   soient tous pareils, soit centrés, soit sur le côté ; je pense que centré est le mieux »). Avant : heros, sections à
   image, Formations et Contact à gauche ; sections « centrées » et bas de page au centre.
   Exceptions de lecture : les listes à coches et les champs du formulaire gardent leurs lignes alignées entre elles
   (coches en zigzag, libellés décollés de leur champ sinon) ; le bloc est posé au centre. ==== */
@media (max-width: 767px) {
  html body[data-page] :is(main, .pied) :is(h1, h2, h3, h4, h5, p, li, dt, dd, blockquote, figcaption, .h4) {
    text-align: center;
  }

  /* Surtitres (trait + mot), rangées de boutons, boutons seuls dans une colonne flex. */
  html body[data-page] main .surtitre {
    justify-content: center;
    text-align: center;
  }

  /* Trait au-dessus du mot : le surtitre tombe pile dans l'axe du titre, sur une ligne comme sur deux (« Les bénéfices
     d'une équipe formée à l'IA »), au lieu d'un trait collé à gauche d'un bloc centré. */
  html body[data-page] main .surtitre {
    flex-direction: column;
    gap: 10px;
  }

  html body[data-page] main .surtitre--apres::after {
    order: -1;
  }

  html body[data-page] main :is(.boutons, .formulaire__actions) {
    justify-content: center;
  }

  html body[data-page] main :is(.cta__actions, .carte--agent, .carte--outil, .coordonnee, .cta__carte) {
    align-items: center;
  }

  html body[data-page] main :is(.carte--formation, .carte--conference) .bouton {
    align-self: center;
  }

  /* Cartes à picto sur le côté : picto au-dessus, texte centré (comme les cartes « Nos solutions »). */
  html body[data-page] main :is(.hero__carte, .carte--engagement, .mission__point, .carte--generative, .chiffre-bloc,
    .formulaire__confidentialite) {
    flex-direction: column;
    align-items: center;
  }

  html body[data-page] main :is(.carte--formation, .carte--conference) .carte__titre {
    justify-content: center;
  }

  html body[data-page] main .carte--formation .pastille {
    left: calc(50% - 36px);
  }

  /* Étapes numérotées (Accueil 01-04, Sécurité 01-02) : rond au-dessus, texte centré, petit trait entre deux étapes. */
  html body[data-page] main :is(.etape, .etape-securite) {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    row-gap: 14px;
  }

  html body[data-page] main .etape {
    padding-bottom: 56px;
  }

  html body[data-page] main .etape:last-child {
    padding-bottom: 0;
  }

  html body[data-page] main .etape:not(:last-child)::before {
    left: calc(50% - 1px);
    top: auto;
    bottom: 14px;
    height: 28px;
  }

  html body[data-page] main .etapes-securite {
    row-gap: 40px;
  }

  /* Exceptions : listes à coches et formulaire, lignes alignées entre elles, bloc au centre. */
  html body[data-page] main .puces {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
  }

  html body[data-page] main :is(.puces, .formulaire__champs) :is(li, p, label, .champ) {
    text-align: left;
  }

  /* Pied de page : logo, réseaux, titres et leur trait, coordonnées, mentions au centre. */
  html body[data-page] .pied :is(.pied__logo, .pied__reseaux, .pied__legal) {
    justify-content: center;
  }

  html body[data-page] .pied .pied__logo {
    margin-inline: auto;
  }

  html body[data-page] .pied .pied__titre {
    text-align: center;
  }

  html body[data-page] .pied .pied__titre::after {
    left: calc(50% - 18px);
  }

  html body[data-page] .pied .pied__contact li {
    flex-direction: column;
    align-items: center;
  }

  html body[data-page] .pied .pied__barre {
    align-items: center;
  }
}

/* Bas de Contact entre 768 et 1199 px : les 4 petites cartes tiennent sur une ligne, et à 1024 px le mot « Accompagnement »
   (159 px de colonne, 24 px de marge de chaque côté) dépassait de 5 px le bord de sa carte (relevé du 18/10, equilibre/).
   Marges ramenées à 16 px : le mot tient, la disposition ne change pas. */
@media (min-width: 768px) and (max-width: 1199px) {
  .cta--contact .cta__carte {
    padding: 0 16px;
  }

  .cta--contact .cta__carte:first-child {
    padding-left: 0;
  }
}

/* Téléphone, chiffres de Formations (audit indépendant du 18/10, formations-2) : le chiffre est un bloc à largeur ajustée
   (width: fit-content) ; le centrage du texte ne le déplaçait pas : « + 40 % » restait calé à gauche de sa légende, sous
   un picto centré, et le bord gauche zigzaguait d'un chiffre à l'autre. */
@media (max-width: 767px) {
  html body[data-page] main .chiffre {
    margin-inline: auto;
  }
}

/* Téléphone, pages légales (audit indépendant du 18/10) : le centrage général donnait des paragraphes centrés de 17 lignes
   (« Mesure d'audience… ») ; un texte juridique se lit aligné à gauche. Titres toujours centrés. */
@media (max-width: 767px) {
  html body[data-page] :is(main, .pied) .section--legal :is(p, li, dd, dt, .h4) {
    text-align: left;
  }
}

/* === Retouches du 18/10 après-midi === */

/* Pictos du haut de l'Accueil (Anthony, 18/10 : « j'ai énormément de mal à lire les pictos sur le haut de page ») : posés
   sur la vidéo, les traits en dégradé se perdaient dans l'image ; « encore un peu de mal à lire […] léger bug d'affichage
   sur l'un d'eux ») : chaque picto, en BLANC, dans un cercle bleu nuit cerclé du dégradé de la charte, qui le détache
   quel que soit l'instant de la vidéo. overflow: visible : sur un élément remplacé, l'arrondi rogne le contenu au rayon
   de sa boîte de contenu (40 − 2 − 19 = 19 px) ; les coins du dessin (pied du graphique, pointe de la fusée) étaient
   coupés en biais. */
html body[data-page] .hero__carte > .icone {
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  padding: 19px;
  overflow: visible;
  border: 2px solid transparent;
  border-radius: 50%;
  background: linear-gradient(rgba(4, 20, 38, 0.92), rgba(4, 20, 38, 0.92)) padding-box,
    linear-gradient(135deg, #00C8FF, #7776FF 50%, #C34BEE) border-box;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  stroke: currentColor !important;
  color: #fff;
}

/* Boutons pleins : « marée de couleurs » (Anthony, 18/10 : le reflet était celui de humanova-ia.com, « il faut que ça
   change » ; la comète « pas fan » ; sur 6 animations montrées en vrai, « go pour B ») : les couleurs du dégradé (bleu,
   violet, cyan) coulent doucement d'un bord à l'autre, 9 s aller, 9 s retour. Rien sous « mouvement réduit ». */
@media (prefers-reduced-motion: no-preference) {
  .js .bouton--primaire {
    background-image: linear-gradient(90deg, #075BFF, #A443E9, #00C8FF, #075BFF);
    background-size: 300% 100%;
    animation: apercu-maree 9s ease-in-out infinite alternate;
  }

  .js .bouton--primaire:nth-of-type(2n) {
    animation-delay: -4.5s;
  }
}

@keyframes apercu-maree {
  from { background-position: 0% 0; }
  to { background-position: 100% 0; }
}

/* Méthode de l'Accueil, numéros 01 à 04 animés en passif (Anthony, 18/10 : « essaye d'animer les chiffres à ce niveau-là
   en passif ») : la même comète que les boutons descend le trait d'une étape à la suivante ; à son arrivée, le cercle
   s'allume du dégradé et le numéro grossit un instant. Cycle de 9 s : 01 à 0 s, 02 à 1,4 s, 03 à 2,8 s, 04 à 4,2 s, puis
   repos. Au téléphone (trait court sous le texte), la comète est plus courte et part du bas du texte. */
@media (prefers-reduced-motion: no-preference) {
  html body[data-page] .etape {
    --apercu-sat-longueur: 26px;
    --apercu-sat-depart: 58px;
    --apercu-sat-arrivee: calc(100% - 26px);
    --apercu-sat-gauche: 26px;
  }

  html body[data-page] .etape__numero {
    position: relative;
    isolation: isolate;
    animation: apercu-etape-numero 9s ease-in-out infinite;
  }

  html body[data-page] .etape__numero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    background: var(--degrade-accent);
    opacity: 0;
    animation: apercu-etape-allume 9s ease-in-out infinite;
  }

  html body[data-page] .etape:not(:last-child)::after {
    content: "";
    position: absolute;
    left: var(--apercu-sat-gauche);
    top: var(--apercu-sat-depart);
    width: 4px;
    height: var(--apercu-sat-longueur);
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(0, 200, 255, 0), rgba(0, 200, 255, 0.9) 60%, #fff);
    filter: drop-shadow(0 0 3px rgba(0, 200, 255, 0.95)) drop-shadow(0 0 7px rgba(195, 75, 238, 0.7));
    opacity: 0;
    pointer-events: none;
    animation: apercu-etape-satellite 9s ease-in-out infinite;
  }

  html body[data-page] .etape:nth-child(2) .etape__numero,
  html body[data-page] .etape:nth-child(2) .etape__numero::before { animation-delay: 1.4s; }
  html body[data-page] .etape:nth-child(3) .etape__numero,
  html body[data-page] .etape:nth-child(3) .etape__numero::before { animation-delay: 2.8s; }
  html body[data-page] .etape:nth-child(4) .etape__numero,
  html body[data-page] .etape:nth-child(4) .etape__numero::before { animation-delay: 4.2s; }
  html body[data-page] .etape:nth-child(1)::after { animation-delay: 0.3s; }
  html body[data-page] .etape:nth-child(2)::after { animation-delay: 1.7s; }
  html body[data-page] .etape:nth-child(3)::after { animation-delay: 3.1s; }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  html body[data-page] main .etape {
    --apercu-sat-longueur: 14px;
    --apercu-sat-depart: calc(100% - 46px);
    --apercu-sat-arrivee: calc(100% - 14px);
    --apercu-sat-gauche: calc(50% - 2px);
  }
}

@keyframes apercu-etape-allume {
  0% { opacity: 0; }
  5% { opacity: 0.6; }
  16% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes apercu-etape-numero {
  0%, 16%, 100% { transform: scale(1); }
  5% { transform: scale(1.1); }
}

@keyframes apercu-etape-satellite {
  0% { top: var(--apercu-sat-depart); opacity: 0; }
  2% { opacity: 1; }
  11% { opacity: 1; }
  12.5% { top: var(--apercu-sat-arrivee); opacity: 0; }
  100% { top: var(--apercu-sat-arrivee); opacity: 0; }
}
/* === fin des retouches du 18/10 après-midi === */

/* === Mise à jour du 18/10 au soir === */

/* 1. À propos, mission (audit APR-1) : paragraphes sur 760 px au plus, centrés, sans mot seul en fin de ligne. */
html body[data-page="a-propos"] #mission .conteneur > p:not(.surtitre) {
  max-width: 760px;
  margin-inline: auto;
  text-wrap: pretty;
}

/* 2. À propos, piliers (audit APR-4) : picto au-dessus du titre, tout centré sur un même axe, à partir de 768 px ; sur
   tablette (768 à 999 px), les trois piliers en RANGÉE (Anthony, 18/10 : « 820 px : rangée »). */
@media (min-width: 768px) and (max-width: 999px) {
  html body[data-page="a-propos"] .grille--mission {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 0;
  }

  html body[data-page="a-propos"] .mission__point + .mission__point::before {
    left: -14px;
  }
}

@media (min-width: 768px) {
  html body[data-page="a-propos"] .mission__point {
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
  }

  html body[data-page="a-propos"] .mission__point :is(h3, p, .mission__texte) {
    text-align: center;
  }
}

/* 3. Nos solutions, cartes Outils métier (audit, carte « Automation » posée sur l'illustration) : verre bleu nuit plus
   dense, l'image ne transparaît plus derrière le texte. */
html body[data-page="nos-solutions"] .carte--outil {
  background-color: rgba(7, 15, 40, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* 4. Formations sur tablette (768 à 1100 px) : une carte par rangée, image à gauche (38 %), texte à droite, au lieu de
   trois colonnes étroites. */
@media (min-width: 768px) and (max-width: 1100px) {
  html body[data-page="formations"] .grille--formations {
    grid-template-columns: minmax(0, 1fr);
  }

  html body[data-page="formations"] .carte--formation {
    display: grid;
    grid-template-columns: 38% minmax(0, 1fr);
  }

  html body[data-page="formations"] .carte--formation .carte__media {
    height: 100%;
  }

  html body[data-page="formations"] .carte--formation .carte__image {
    width: 100%;
    height: 100%;
    border-radius: 12px 0 0 12px;
  }
}

/* 5. Accueil sur tablette paysage (1000 à 1199 px) : message et bouton dans le premier écran, image en bandeau
   au-dessus, les trois avantages en rangée sous le texte. */
@media (min-width: 1000px) and (max-width: 1199px) {
  html body[data-page="accueil"] .hero.hero--accueil {
    padding-top: 210px !important;
  }

  html body[data-page="accueil"] .hero.hero--accueil > .hero__image {
    height: 280px !important;
    bottom: auto !important;
  }

  html body[data-page="accueil"] .hero--accueil .hero__contenu {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 24px !important;
  }

  html body[data-page="accueil"] .hero--accueil .hero__texte {
    max-width: none !important;
  }

  html body[data-page="accueil"] .hero--accueil .hero__cartes {
    flex-direction: row !important;
    justify-content: space-between;
    gap: 24px;
    border: 0 !important;
    padding: 20px 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
  }

  html body[data-page="accueil"] .hero--accueil .hero__carte {
    gap: 16px;
  }

  html body[data-page="accueil"] .hero--accueil .hero__carte > .icone {
    width: 64px;
    height: 64px;
    padding: 15px;
  }

  html body[data-page="accueil"] .hero--accueil .hero__cartes::before,
  html body[data-page="accueil"] .hero--accueil .hero__contenu::after {
    display: none !important;
  }
}

/* 6. Téléphone : les textes longs des cartes alignés à gauche (audit, quatre juges) ; titres et sous-titres restent
   centrés. */
@media (max-width: 767px) {
  html body[data-page] main .carte__corps > p.texte-carte {
    text-align: left;
  }
}

/* 7. Pied de page en 14 px (audit : 12 px). */
html body[data-page] .pied :is(.pied__barre, .pied__barre *, .pied__legal, .pied__legal a) {
  font-size: 14px;
}

/* 8. Place du bouton avatar : il ne cache plus le bas du pied de page. */
@media (max-width: 1199px) {
  html body[data-page] .pied {
    padding-bottom: 84px;
  }
}

@media (min-width: 1200px) {
  html body[data-page] .pied {
    padding-bottom: 84px;
  }
}

/* 8 bis. Bouton avatar sur tablette (audit : il cachait des fins de ligne) : version courte « Avatar », plus petite et
   plus près du coin, comme au téléphone. */
@media (min-width: 768px) and (max-width: 1199px) {
  html body .apercu-avatar {
    right: 12px;
    bottom: 12px;
    height: 44px;
    padding: 0 14px 0 6px;
    font-size: 14px;
    gap: 8px;
  }

  html body .apercu-avatar__visage {
    width: 32px;
    height: 32px;
  }

  html body .apercu-avatar__titre {
    font-size: 14px;
  }

  html body .apercu-avatar__sous {
    display: none;
  }
}

/* 9. Plus de mot seul en fin de paragraphe (audit : « ouvre. », « entreprise. »…). */
html body[data-page] main :is(p, li) {
  text-wrap: pretty;
}

/* 10. Contact : la carte des coordonnées accompagne le formulaire au défilement, plus de grand vide sous elle. */
@media (min-width: 1000px) {
  html body[data-page="contact"] .contact__carte--coordonnees {
    align-self: start;
    position: sticky;
    top: 104px;
  }
}

/* 11. Pages légales (audit CON-MENTIONS-1) : intertitres de 24 à 32 px (au lieu de ≈ 52, presque la taille du titre),
    un vrai écart sous le titre de page, lignes de 70 signes au plus. */
html body:is([data-page="mentions-legales"], [data-page="confidentialite"]) #contenu .section--legal h2 {
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.25;
}

html body:is([data-page="mentions-legales"], [data-page="confidentialite"]) #contenu .section--legal .conteneur > h1 + h2 {
  margin-top: 56px;
}

html body:is([data-page="mentions-legales"], [data-page="confidentialite"]) #contenu .section--legal .conteneur > :is(p, ul, ol) {
  max-width: 70ch;
}

/* 12. Formulaire sur petit téléphone (audit RXT-CONTACT-1 : « Sélectionnez un su » coupé à 360 px) : picto plus près du
    bord, plus de place pour le texte. */
@media (max-width: 420px) {
  html body[data-page="contact"] .champ__saisie > .icone {
    left: 14px;
    width: 24px;
    height: 24px;
    top: 18px;
  }

  html body[data-page="contact"] .champ__controle {
    padding-left: 48px;
  }
}

/* 13. Un seul surtitre sur tout le site (audit TRV-site-1 : 6 variantes) : 14 px (13 au téléphone), capitales espacées,
    trait en dégradé de 40 px avant le mot (au-dessus au téléphone), bleu nuit sur fond clair, gris clair sur fond
    sombre. Plus de double trait, de trait après le mot, de trait long ni de surtitre cyan. */
html body[data-page] #contenu .surtitre {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--texte-discret);
}

html body[data-page] #contenu :is(.section--clair, .section--blanc, .section--legal) .surtitre {
  color: var(--surtitre-sur-clair);
}

html body[data-page] #contenu .surtitre::before {
  content: "";
  flex: none;
  width: 40px;
  height: 2px;
  margin: 0;
  border: 0;
  background: var(--degrade-accent);
  background-size: 200% 100%;
  box-shadow: none;
}

html body[data-page] #contenu .surtitre::after {
  content: none;
}

@media (min-width: 768px) {
  html body[data-page] #contenu .surtitre {
    gap: 14px;
  }
}

@media (max-width: 767px) {
  html body[data-page] #contenu .surtitre {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .js body[data-page] #contenu .surtitre::before {
    animation: apercu-trait-coule 5s ease-in-out infinite alternate;
  }
}

/* 14. Logos « Ils nous font confiance » à la même taille visuelle (mesure de l'encre de chaque fichier : Emprotec et
    Val d'Arly touchaient les bords de leur tuile, Profil Motos en occupait la moitié). */
html body[data-page] .logo-client img[src*="client-emprotec"] { scale: 0.76; }
html body[data-page] .logo-client img[src*="client-val-darly"] { scale: 0.84; }
html body[data-page] .logo-client img[src*="client-humanova"] { scale: 0.9; }
html body[data-page] .logo-client img[src*="client-monkey-tunes"] { scale: 0.95; }
html body[data-page] .logo-client img[src*="client-profil-motos"] { scale: 1.55; }

/* 15. Formations, « Comprendre l'IA » (Anthony : « la main humaine et la main robot bien centrées au milieu du cadre ») :
    le point de contact des deux mains (57 % de la largeur de l'image) au milieu du cadre. */
html body[data-page="formations"] img[src*="formations-comprendre"] {
  object-position: 66% 50%;
}

/* 15 bis. Formations, cartes de conférences (Anthony, 18/10 : « OK pour le bandeau pour conférence ») : l'image passe en
    bandeau en haut de la carte, comme les trois cartes de formation au-dessus ; la scène se voit en entier (dans la
    colonne étroite de 32 %, on n'en voyait qu'une tranche). */
@media (min-width: 1000px) {
  html body[data-page="formations"] .carte--conference {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  html body[data-page="formations"] .carte--conference .carte__image {
    height: 240px;
    border-radius: 11px 11px 0 0;
  }
}

html body[data-page="formations"] img[src*="formations-conferences"] {
  object-position: 50% 38%;
}

html body[data-page="formations"] img[src*="formations-sensibilisation"] {
  object-position: 50% 30%;
}

/* 16. Formations, vidéo du haut de page sur tablette et téléphone : un faux texte généré par l'IA apparaît pendant la
    vidéo sur l'écran derrière le formateur (« 2U2SG SEIECEF », audit), dans les 13 % de droite. Vidéo agrandie de 18 %
    depuis son bord gauche : cette zone sort du cadre, le formateur reste entier. (#contenu : plus fort que la règle des
    outils de l'aperçu qui retire toute transformation des vidéos.) */
@media (max-width: 1199px) {
  html body[data-page="formations"] #contenu .hero > video.apercu-video {
    transform: scale(1.18) !important;
    transform-origin: 0% 50% !important;
  }
}

/* Nos solutions (Anthony : « un défilement latéral en plein écran ») : les images des sections vont jusqu'au bord droit
   de la fenêtre en 100vw, largeur qui compte la barre de défilement verticale (17 px sous Windows) ; la page défilait
   donc de 17 px en largeur, sur ordinateur seulement. Les sections rognent ce qui dépasse en largeur (clip : sans
   barre, et le haut de l'image de l'IA générative, qui remonte au-dessus de sa section, reste visible). */
html body[data-page="nos-solutions"] .section--media {
  overflow-x: clip;
}

/* Contact, « Un projet ? » (Anthony : « les pictos de cette partie ne sont pas visibles comme le haut de page de
   l'Accueil ») : la même pastille que les pictos du haut de l'Accueil (picto blanc, cercle bleu nuit cerclé du dégradé
   de la charte), qui détache le picto de la photo. overflow: visible : sinon l'arrondi rogne les coins du dessin. */
/* Lisibilité des textes posés sur une photo (Anthony, 18/10 : « on a du mal à lire ce texte [Un projet ?], et peut-être
   à d'autres endroits ? ») : relevé sur les 5 pages, le défaut est partout le même — texte blanc sur une photo sombre
   traversée d'une zone claire (horizon, soleil, nuages, planète éclairée), sous un voile uniforme (0,55 sur les
   bandeaux de fin de page, 0,72 sur les sections à photo). Le voile devient plus dense là où est le texte (au centre
   pour un texte centré, à gauche pour un texte à gauche) et plus léger vers les bords, où la photo reste vivante ; une
   ombre douce détache les lettres. Les mots en dégradé n'ont pas d'ombre (elle salirait leur dégradé). */
@media (min-width: 1200px) {
  html body[data-page] .cta.cta--centre::before {
    background: radial-gradient(ellipse 62% 78% at 50% 50%, rgba(4, 20, 38, 0.84) 0%, rgba(4, 20, 38, 0.66) 55%,
      rgba(4, 20, 38, 0.42) 100%);
  }

  html body[data-page] .cta:is(.cta--gauche, .cta--contact)::before {
    background: linear-gradient(90deg, rgba(4, 20, 38, 0.9) 0%, rgba(4, 20, 38, 0.78) 38%, rgba(4, 20, 38, 0.45) 62%,
      rgba(4, 20, 38, 0.18) 85%);
  }
}

html body[data-page] .section--fond::before {
  background: radial-gradient(ellipse 70% 80% at 50% 45%, rgba(4, 20, 38, 0.86) 0%, rgba(4, 20, 38, 0.77) 55%,
    rgba(4, 20, 38, 0.66) 100%);
}

html body[data-page] :is(.cta, .section--fond, .hero) :is(h1, h2, h3, p, li, .surtitre) {
  text-shadow: 0 1px 2px rgba(4, 20, 38, 0.55), 0 0 24px rgba(4, 20, 38, 0.6);
}

html body[data-page] :is(.cta, .section--fond, .hero) :is(.degrade, .bouton, .bouton *) {
  text-shadow: none;
}

html body[data-page] #contenu .cta__carte > .icone {
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  padding: 19px;
  overflow: visible;
  border: 2px solid transparent;
  border-radius: 50%;
  background: linear-gradient(rgba(4, 20, 38, 0.92), rgba(4, 20, 38, 0.92)) padding-box,
    linear-gradient(135deg, #00C8FF, #7776FF 50%, #C34BEE) border-box;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  stroke: currentColor !important;
  color: #fff;
}

/* Pictos vivants (Anthony, 18/10 : « que les pictos osent s'animer de manière passive » ; sur 7 rangées montrées en vrai,
   « j'aime bien Marée et Halo, peut-être un mix des 2 sur tous les pictos »). Remplace le flottement de 3 px, que
   personne ne voyait. Pastilles sombres (haut de l'Accueil, « Un projet ? ») : le trait blanc coule vers le cyan puis
   le lilas, et une onde sort de la pastille deux fois par cycle. Pictos en trait dégradé (cartes) : les couleurs du
   dégradé coulent dans la gamme de la charte, avec une lueur qui pulse. Décalés d'une carte à l'autre. Les pictos des
   boutons, du menu, du pied de page et du formulaire ne bougent pas ; rien pour qui demande moins de mouvement. */
@media (prefers-reduced-motion: no-preference) {
  html body[data-page] #contenu :is(.hero__carte, .cta__carte) > .icone {
    animation: apercu-pastille-vie 9s ease-in-out infinite;
  }

  html body[data-page] #contenu :is(.carte--solution, .benefice, .carte--engagement, .mission__point, .carte--valeur,
    .carte--agent, .tuile-icone, .chiffre-bloc, .coordonnee__pastille, .pastille) > .icone {
    animation: apercu-picto-vie 9s ease-in-out infinite;
  }

  html body[data-page] #contenu :is(.hero__carte, .cta__carte, .carte--solution, .benefice, .carte--engagement,
    .mission__point, .carte--valeur, .carte--agent, .tuile-icone, .chiffre-bloc, .coordonnee__pastille,
    .pastille):nth-child(2n) > .icone {
    animation-delay: -3s;
  }

  html body[data-page] #contenu :is(.hero__carte, .cta__carte, .carte--solution, .benefice, .carte--engagement,
    .mission__point, .carte--valeur, .carte--agent, .tuile-icone, .chiffre-bloc, .coordonnee__pastille,
    .pastille):nth-child(3n) > .icone {
    animation-delay: -6s;
  }

  html body[data-page] #contenu :is(.hero__carte, .cta__carte, .carte--solution, .benefice, .carte--engagement,
    .mission__point, .carte--valeur, .carte--agent, .tuile-icone, .chiffre-bloc, .coordonnee__pastille,
    .pastille):nth-child(4n) > .icone {
    animation-delay: -4.5s;
  }
}

@keyframes apercu-pastille-vie {
  0%, 100% { color: #ffffff; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(0, 200, 255, 0.6); transform: scale(1); }
  16% { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 0 16px rgba(0, 200, 255, 0); }
  30% { color: #7fe6ff; transform: scale(1.06); }
  50% { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(164, 67, 233, 0.55); }
  66% { color: #cdb8ff; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 0 16px rgba(164, 67, 233, 0); transform: scale(1); }
}

@keyframes apercu-picto-vie {
  0%, 100% { filter: hue-rotate(-25deg) drop-shadow(0 0 0 rgba(119, 118, 255, 0)); transform: scale(1); }
  14% { filter: hue-rotate(-12deg) drop-shadow(0 0 9px rgba(0, 200, 255, 0.55)); transform: scale(1.06); }
  32% { filter: hue-rotate(5deg) drop-shadow(0 0 0 rgba(119, 118, 255, 0)); transform: scale(1); }
  64% { filter: hue-rotate(38deg) drop-shadow(0 0 9px rgba(164, 67, 233, 0.5)); transform: scale(1.06); }
  82% { filter: hue-rotate(10deg) drop-shadow(0 0 0 rgba(119, 118, 255, 0)); transform: scale(1); }
}


/* 16 ter. Téléphone tenu en paysage (validé par Anthony le 18/10, à la place de la solution refusée qui coupait la tête
   du personnage) : texte à gauche, image ou vidéo ENTIÈRE à droite, cadrée sur le sujet, fondue sur son bord gauche ;
   le titre se lit dès l'arrivée. */
@media (max-width: 1199px) and (max-height: 500px) and (orientation: landscape) {
  html body[data-page] .hero {
    min-height: calc(100svh - 80px) !important;
    padding: 20px 0 24px !important;
    justify-content: center !important;
  }

  html body[data-page] #contenu .hero > :is(.hero__image, video.apercu-video) {
    inset: 0 0 0 auto !important;
    width: 50% !important;
    height: 100% !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28%) !important;
    mask-image: linear-gradient(90deg, transparent 0, #000 28%) !important;
    transform: none !important;
  }

  html body[data-page] .hero .hero__contenu {
    display: block !important;
  }

  html body[data-page] .hero .hero__texte {
    max-width: 56% !important;
  }

  html body[data-page] .hero h1 {
    font-size: 34px !important;
    line-height: 1.15 !important;
  }

  html body[data-page] .hero .lead {
    margin-top: 12px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  html body[data-page] .hero .boutons {
    margin-top: 16px !important;
  }

  html body[data-page] .hero--accueil .hero__cartes {
    display: none !important;
  }
}

/* === fin de la mise à jour du 18/10 au soir === */

/* === Galerie d’exemples de Nos solutions === */
/* Galerie d'exemples sous les cartes de chaque section de Nos solutions (Anthony, 18/10 : « le mieux, c'est clairement
   galerie ») : une rangée de grandes images légendées de leur service, cliquables (agrandies dans une fenêtre) ; au
   téléphone, la rangée défile du doigt. Images provisoires : dégradés de la charte. Dans les sections à image (Outils
   métier, IA générative), la galerie prend une 3e rangée de la grille de la section (sinon elle recouvrait les cartes). */
html body[data-page="nos-solutions"] .ex-galerie {
  margin-top: 48px;
}

html body[data-page="nos-solutions"] #contenu .ex-galerie__titre {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.75;
}

.ex-galerie__piste {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}

.ex-image {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 4px;
  aspect-ratio: 16 / 10;
  padding: 14px;
  border-radius: 14px;
  overflow: hidden;
  scroll-snap-align: start;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 40%), radial-gradient(120% 90% at 80% 10%, rgba(0, 200, 255, 0.55), transparent 55%), radial-gradient(110% 90% at 10% 100%, rgba(195, 75, 238, 0.6), transparent 55%), #0a1f4a;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(11, 20, 80, 0.22);
  transition: transform 0.25s, box-shadow 0.25s;
}

.ex-image > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.ex-image::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%272%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7%27/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.9;
}

.ex-image:hover,
.ex-image:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(80, 90, 255, 0.3), 0 0 0 1px rgba(124, 150, 255, 0.45);
}

.ex-image:focus-visible {
  outline: 2px solid #00c8ff;
  outline-offset: 3px;
}

.ex-image__tag {
  padding: 3px 9px;
  border-radius: 99px;
  background: rgba(4, 20, 38, 0.55);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.ex-image__titre {
  font-size: 16px;
  font-weight: 600;
}

@media (min-width: 1000px) {
  html body[data-page="nos-solutions"] .section--media:has(.ex-galerie) {
    grid-template-rows: auto auto auto;
  }

  html body[data-page="nos-solutions"] .section--media .ex-galerie {
    grid-row: 3;
  }
}

@media (max-width: 767px) {
  .ex-galerie__piste {
    grid-auto-columns: 78%;
  }

  html body[data-page="nos-solutions"] .ex-galerie {
    margin-top: 36px;
  }
}

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

/* Fenêtre d'agrandissement. */
.ex-visionneuse {
  width: min(1100px, 92vw);
  max-width: none;
  padding: 0;
  border: 1px solid rgba(119, 118, 255, 0.4);
  border-radius: 16px;
  background: #041426;
  color: #ffffff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.ex-visionneuse::backdrop {
  background: rgba(4, 20, 38, 0.82);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.ex-visionneuse__cadre {
  margin: 0;
}

.ex-visionneuse__cadre > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
}

.ex-visionneuse__attente {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 8px;
  aspect-ratio: 16 / 10;
  max-height: 75vh;
  padding: 32px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 40%), radial-gradient(120% 90% at 80% 10%, rgba(0, 200, 255, 0.55), transparent 55%), radial-gradient(110% 90% at 10% 100%, rgba(195, 75, 238, 0.6), transparent 55%), #0a1f4a;
}

.ex-visionneuse__attente span {
  padding: 4px 12px;
  border-radius: 99px;
  background: rgba(4, 20, 38, 0.55);
  font-size: 13px;
  font-weight: 600;
}

.ex-visionneuse__attente strong {
  font-size: 28px;
}

.ex-visionneuse__attente em {
  font-style: normal;
  opacity: 0.75;
}

.ex-visionneuse__cadre > figcaption {
  padding: 14px 20px;
  font-size: 15px;
  color: #e7ebf5;
}

.ex-visionneuse__fermer {
  all: unset;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(4, 20, 38, 0.75);
  color: #ffffff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.ex-visionneuse__fermer:focus-visible {
  outline: 2px solid #00c8ff;
  outline-offset: 2px;
}

/* T7 (30/10/2026) : huit démonstrations vidéo. Une carte vidéo montre son aperçu en haut, au format réel des clips
   (960 × 604 : image entière, mention de la marge du bas comprise, jamais recadré en 16:9 couvrant), puis ses textes
   dessous : étiquette, titre et nature (la mention incrustée devient trop petite dans une carte de 250 px).
   T15c (01/11/2026) : plus de commande de pause (« Enleve le bouton mettre en pause ») : un aperçu ne joue qu'au
   survol ou au focus clavier (apercu-exemples.js) ; l'en-tête de la galerie ne porte plus que son titre. */
.ex-galerie__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 0 0 14px;
}

html body[data-page="nos-solutions"] #contenu .ex-galerie__entete .ex-galerie__titre {
  margin: 0;
}

.ex-image:has(> .ex-image__apercu) {
  justify-content: flex-start;
  align-items: stretch;
  gap: 0;
  aspect-ratio: auto;
  padding: 0;
  background: #0a1f4a;
}

.ex-image:has(> .ex-image__apercu)::after {
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%272%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7%27/%3E%3C/svg%3E") center / 15px no-repeat, rgba(4, 20, 38, 0.7);
}

.ex-image__apercu {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 960 / 604;
  object-fit: contain;
  background: #041426;
}

.ex-image__texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 14px 16px;
}

/* Étiquette qui passe sur deux lignes dans une carte étroite (1024 px, téléphone) : rectangle arrondi, pas pastille. */
.ex-image__texte .ex-image__tag {
  padding: 4px 10px;
  border-radius: 10px;
  letter-spacing: 0.01em;
  line-height: 1.35;
}

.ex-image__texte .ex-image__titre {
  line-height: var(--b-h4-interligne, 1.4);
}

.ex-image__nature {
  font-size: var(--b-petit-taille, 14px);
  line-height: 1.35;
  color: #cdd6ec;
}

.ex-visionneuse__garde {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.ex-visionneuse__cadre > video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 960 / 604;
  max-height: 75vh;
  object-fit: contain;
  background: #000000;
}
/* === fin de la galerie d’exemples === */

/* === Rendez-vous de Contact === */
/* Prise de rendez-vous en tête de la section du formulaire de Contact (Anthony, 18/10, « au même titre que
   HUMANOVA ») : titre, agenda dans une carte blanche, puis « ou » avant le formulaire. Tant que
   l'agenda n'a pas parlé, la carte garde 640 px (comme humanova-ia.com) et le cadre reste invisible. */
html body[data-page="contact"] .rdv {
  max-width: 1000px;
  margin: 0 auto 8px;
  text-align: center;
}

html body[data-page="contact"] .rdv .surtitre {
  justify-content: center;
}

html body[data-page="contact"] .rdv__intro {
  max-width: 620px;
  margin: 16px auto 0;
}

/* Carte resserrée autour de l'agenda, sans double cadre (sa bordure intérieure prend la couleur du fond). Pas moins de
   880 px : sous environ 800 px de large, l'agenda de Cal.com passe à sa disposition téléphone (cases géantes, créneaux
   dessous), vu à 760 px. */
html body[data-page="contact"] .rdv__agenda {
  max-width: 880px;
  margin: 40px auto 0;
  overflow: hidden;
  border: 1px solid rgba(7, 91, 255, 0.14);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(11, 20, 80, 0.14);
}

html body[data-page="contact"] .rdv__cadre {
  display: block;
  width: 100%;
  height: 640px;
  border: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}

html body[data-page="contact"] .rdv__cadre--pret {
  opacity: 1;
}

/* Avant que l'agenda ait parlé : 640 px réservés (pas de saut de page) ; ensuite, la hauteur qu'il annonce. */
html body[data-page="contact"] .rdv__agenda:not(:has(.rdv__cadre--pret)) {
  min-height: 640px;
}

html body[data-page="contact"] .rdv__ou {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 56px 0 48px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
}

html body[data-page="contact"] .rdv__ou::before,
html body[data-page="contact"] .rdv__ou::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(7, 91, 255, 0.45), rgba(164, 67, 233, 0.45), transparent);
}

@media (max-width: 767px) {
  html body[data-page="contact"] .rdv__agenda {
    margin-top: 28px;
    border-radius: 16px;
  }

  html body[data-page="contact"] .rdv__ou {
    margin: 40px 0 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body[data-page="contact"] .rdv__cadre {
    transition: none;
  }
}
/* === fin du rendez-vous de Contact === */

/* === Agent vidéo Nova === */
/* Agent vidéo « Nova » (voir agent-video.py) : la fenêtre du site actuel de ianovation.ai (au-dessus du bouton, en-tête
   coloré, « En ligne », compte à rebours, flux recadré en portrait), aux couleurs de la V2. Le bouton du bas devient un
   vrai bouton (il ouvrait humanova-ia.com). */
button.apercu-avatar {
  border: 0;
  font: inherit;
  cursor: pointer;
}

.nova {
  position: fixed;
  right: 20px;
  bottom: 84px;
  z-index: 9997;
  display: flex;
  flex-direction: column;
  width: 320px;
  height: min(540px, calc(100dvh - 120px));
  overflow: hidden;
  border: 1.5px solid transparent;
  border-radius: 24px;
  background: linear-gradient(#041426, #041426) padding-box,
    linear-gradient(135deg, #00C8FF, #7776FF 50%, #C34BEE) border-box;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 34px rgba(119, 118, 255, 0.3);
  color: #ffffff;
  font-family: inherit;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.95);
  transform-origin: 100% 100%;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, width 0.3s ease, height 0.3s ease;
}

.nova--ouverte {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nova--plein {
  width: min(560px, calc(100vw - 40px));
  height: calc(100dvh - 120px);
}

.nova__tete {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas: "portrait nom agrandir fermer" "etat etat minuteur minuteur";
  align-items: center;
  gap: 8px 10px;
  padding: 12px 12px 10px 14px;
  background: linear-gradient(110deg, #075BFF, #7776FF 55%, #A443E9);
}

.nova__portrait {
  grid-area: portrait;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: #041426 url("/assets/video/nova-visage-katya-4.webp") center / cover no-repeat;
  color: transparent; /* le visage de Nova à la place du « N » (20/10) */
  font-weight: 700;
}

.nova__nom {
  grid-area: nom;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.nova__nom strong {
  font-size: 16px;
}

.nova__nom span {
  font-size: 12px;
  opacity: 0.88;
}

.nova__action {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(4, 20, 38, 0.28);
  color: #ffffff;
  cursor: pointer;
}

.nova__action:hover,
.nova__action:focus-visible {
  background: rgba(4, 20, 38, 0.5);
}

.nova__agrandir { grid-area: agrandir; }
.nova__fermer { grid-area: fermer; }

.nova__action svg,
.nova__parler svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nova__etat {
  grid-area: etat;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.nova__etat i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.6);
  animation: nova-pouls 2s ease-out infinite;
}

.nova__minuteur {
  grid-area: minuteur;
  justify-self: end;
  padding: 2px 10px;
  border-radius: 99px;
  background: rgba(4, 20, 38, 0.32);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.nova__ecran {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: radial-gradient(120% 80% at 50% 0%, #10306a 0%, #071a33 55%, #041426 100%);
}

.nova__vue {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 22px;
  text-align: center;
}

.nova[data-vue="accueil"] .nova__vue--accueil,
.nova[data-vue="direct"] .nova__vue--direct,
.nova[data-vue="fin"] .nova__vue--fin,
.nova[data-vue="erreur"] .nova__vue--erreur {
  display: flex;
}

.nova__vue--direct {
  justify-content: flex-end;
  padding: 0 0 26px; /* « Connexion à Nova… » en bas, pas sur le visage */
}

/* Veille de Nova (20/10, « comme d'hab » sur humanova-ia.com) : sa vidéo de veille remplit l'écran dès l'ouverture,
   le titre, « Parler à Nova » et la note posés en bas sur un fondu sombre ; elle reste pendant la connexion (le cadre de
   Nova est invisible tant qu'il charge), puis s'efface quand Nova est là. */
.nova__veille {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  background: #041426;
}

.nova[data-vue="accueil"] .nova__veille,
.nova[data-vue="direct"]:not(.nova--direct) .nova__veille {
  display: block;
}

.nova__vue--accueil {
  justify-content: flex-end;
  gap: 8px;
  padding: 24px 18px 18px;
  background: linear-gradient(180deg, rgba(4, 20, 38, 0) 48%, rgba(4, 20, 38, 0.6) 68%, rgba(4, 20, 38, 0.94) 100%);
}

.nova:not(.nova--direct) .nova__recadre {
  background: transparent;
}

.nova:not(.nova--direct) .nova__recadre iframe {
  opacity: 0;
}

.nova__titre {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
}

.nova__texte {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #c9d4ee;
}

.nova__parler,
.nova__rdv {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 12px 22px;
  border: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #075BFF, #A443E9);
  color: #ffffff;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(7, 91, 255, 0.35);
}

.nova__secondaire {
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 99px;
  background: transparent;
  color: #ffffff;
  font: inherit;
  cursor: pointer;
}

.nova__recadre {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000000;
}

/* Le cadre de Nova occupe toute la fenêtre et recadre lui-même son flux. */
.nova__recadre iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000000;
}

.nova__chargement {
  position: relative;
  margin: 0;
  padding: 8px 16px;
  border-radius: 99px;
  background: rgba(4, 20, 38, 0.78);
  font-size: 14px;
  color: #ffffff;
}

.nova--direct .nova__chargement {
  display: none;
}

.nova__toast {
  position: absolute;
  left: 50%;
  bottom: 14px;
  margin: 0;
  padding: 8px 14px;
  border-radius: 99px;
  background: rgba(4, 20, 38, 0.85);
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}

.nova__toast--vu {
  opacity: 1;
  transform: translate(-50%, 0);
}

@keyframes nova-pouls {
  70% { box-shadow: 0 0 0 8px rgba(61, 220, 132, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); }
}

@media (max-width: 560px) {
  .nova,
  .nova--plein {
    right: 8px;
    left: 8px;
    bottom: 76px;
    width: auto;
    height: min(560px, calc(100dvh - 96px));
  }
}

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

  .nova__etat i {
    animation: none;
  }
}
/* === fin de l’agent vidéo Nova === */

}