/* ==========================================================================
   ICOLYS : Système de design V2
   Palette bleu / blanc validée par Mohamed
   Créé le 25/08/2026 : Claude Code pour AZIA SOLUTIONS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons de design
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs */
  --bleu:            #1554F0;
  --bleu-fonce:      #0A2A6B;
  --bleu-nuit:       #071B45;
  --bleu-clair:      #E9F0FF;
  --bleu-voile:      #F6F9FE;

  --encre:           #0B1B33;
  --encre-2:         #33445F;
  --gris:            #5A6B84;
  --gris-clair:      #6E7E96;
  --trait:           #E4E9F2;
  --trait-fort:      #CBD5E6;
  --blanc:           #FFFFFF;

  --vert:            #0E9F6E;
  --ambre:           #B26A00;

  /* Typographie */
  --titre: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --texte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Rythme */
  --largeur: 1180px;
  --gouttiere: 24px;
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;
  --r-xl: 32px;

  /* Ombres */
  --ombre-s: 0 1px 2px rgba(11, 27, 51, .05);
  --ombre-m: 0 4px 16px rgba(11, 27, 51, .07);
  --ombre-l: 0 18px 48px rgba(11, 27, 51, .10);
  --ombre-bleu: 0 12px 32px rgba(21, 84, 240, .22);

  /* Transitions */
  --t: 220ms cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   2. Réinitialisation
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.65;
  color: var(--encre-2);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. Typographie
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--titre);
  color: var(--encre);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.025em;
}

h1 { font-size: clamp(2.15rem, 4.1vw, 3.35rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); line-height: 1.3; letter-spacing: -.015em; }
h4 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }

p + p { margin-top: 1em; }
strong { color: var(--encre); font-weight: 650; }

.surtitre {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--titre);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bleu);
  margin-bottom: 18px;
}
.surtitre::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--bleu);
  border-radius: 2px;
}

.chapo {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  color: var(--gris);
  line-height: 1.6;
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   4. Structure
   -------------------------------------------------------------------------- */
.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: clamp(64px, 9vw, 116px); }
.section--voile { background: var(--bleu-voile); }
.section--nuit { background: var(--bleu-nuit); color: #C3D0E8; }
.section--nuit h2, .section--nuit h3 { color: var(--blanc); }
.section--nuit .surtitre { color: #7FA5FF; }
.section--nuit .surtitre::before { background: #7FA5FF; }

.entete-section { max-width: 720px; margin-bottom: clamp(38px, 5vw, 56px); }
.entete-section--centre { margin-inline: auto; text-align: center; }
.entete-section--centre .surtitre { justify-content: center; }
.entete-section h2 + .chapo { margin-top: 16px; }

.grille { display: grid; gap: 22px; }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* --------------------------------------------------------------------------
   5. Boutons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--titre);
  font-weight: 700;
  font-size: .97rem;
  letter-spacing: -.01em;
  padding: 15px 26px;
  border-radius: var(--r-s);
  transition: transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--principal {
  background: var(--bleu);
  color: var(--blanc);
  box-shadow: var(--ombre-bleu);
}
.btn--principal:hover { background: #0E44CF; transform: translateY(-2px); }

.btn--secondaire {
  background: var(--blanc);
  color: var(--encre);
  border: 1.5px solid var(--trait-fort);
}
.btn--secondaire:hover { border-color: var(--bleu); color: var(--bleu); transform: translateY(-2px); }

.btn--fantome {
  background: rgba(255,255,255,.08);
  color: var(--blanc);
  border: 1.5px solid rgba(255,255,255,.28);
}
.btn--fantome:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }

.btn--large { padding: 17px 32px; font-size: 1.03rem; }
.btn--plein { width: 100%; }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--titre);
  font-weight: 700;
  font-size: .93rem;
  color: var(--bleu);
  transition: gap var(--t);
}
.lien-fleche:hover { gap: 12px; }
.lien-fleche svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   6. En-tête
   -------------------------------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), box-shadow var(--t);
}
.entete.est-defile { border-bottom-color: var(--trait); box-shadow: var(--ombre-s); }

.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 74px;
}

.logo { display: inline-flex; align-items: center; gap: 11px; }
.logo__marque {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--bleu) 0%, var(--bleu-fonce) 100%);
  display: grid; place-items: center;
  flex: none;
}
.logo__marque svg { width: 21px; height: 21px; }
.logo__texte { font-family: var(--titre); font-weight: 800; font-size: 1.22rem; color: var(--encre); letter-spacing: -.03em; }
.logo__texte span { color: var(--bleu); }

.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  font-family: var(--titre);
  font-weight: 600;
  font-size: .92rem;
  color: var(--encre-2);
  white-space: nowrap;
  transition: color var(--t);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--bleu); }

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

.burger { display: none; width: 44px; height: 44px; place-items: center; border-radius: var(--r-s); }
.burger svg { width: 24px; height: 24px; }

.nav__rappel { display: none; }

@media (max-width: 1040px) {
  .nav { display: none; }
  .btn-rappel-entete { display: none; }
  .nav.est-ouvert .nav__rappel { display: block; color: var(--bleu); font-weight: 700; }
  .burger { display: grid; }
  .nav.est-ouvert {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 74px; left: 0; right: 0;
    background: var(--blanc);
    border-bottom: 1px solid var(--trait);
    padding: 18px var(--gouttiere) 26px;
    box-shadow: var(--ombre-m);
  }
  .nav.est-ouvert a { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--trait); font-size: 1.02rem; }
}

/* --------------------------------------------------------------------------
   7. Héros
   -------------------------------------------------------------------------- */
.heros {
  position: relative;
  padding-block: clamp(56px, 8vw, 96px) clamp(56px, 8vw, 92px);
  background:
    radial-gradient(900px 480px at 82% -8%, var(--bleu-clair) 0%, transparent 62%),
    radial-gradient(560px 380px at 96% 62%, rgba(21,84,240,.10) 0%, transparent 65%),
    radial-gradient(700px 400px at 8% 108%, #F0F5FF 0%, transparent 60%),
    conic-gradient(from 210deg at 78% 22%, rgba(21,84,240,.05), transparent 32%),
    var(--blanc);
  overflow: hidden;
}
.heros__grille {
  display: grid;
  grid-template-columns: 1.14fr .86fr;
  gap: clamp(36px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 940px) { .heros__grille { grid-template-columns: 1fr; } }

.pastille {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 15px 8px 11px;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: 100px;
  font-size: .84rem; font-weight: 600; color: var(--encre-2);
  box-shadow: var(--ombre-s);
  margin-bottom: 24px;
}
.pastille__point {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--vert);
  box-shadow: 0 0 0 3px rgba(14,159,110,.16);
  flex: none;
}

.heros h1 { margin-bottom: 22px; }
.heros h1 em { font-style: normal; color: var(--bleu); }
.heros__actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 32px; }

.gages { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; }
.gage { display: inline-flex; align-items: center; gap: 9px; font-size: .92rem; font-weight: 550; color: var(--encre-2); }
.gage svg { width: 17px; height: 17px; color: var(--vert); flex: none; }

/* Carte « portes d'entrée » du héros */
.portes { display: grid; gap: 12px; }
.porte {
  display: flex; align-items: flex-start; gap: 15px;
  padding: 19px 21px;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  box-shadow: var(--ombre-m);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.porte:hover { transform: translateY(-3px); box-shadow: var(--ombre-l); border-color: var(--trait-fort); }
.porte__icone {
  width: 42px; height: 42px; flex: none;
  border-radius: 11px;
  background: var(--bleu-clair);
  display: grid; place-items: center;
}
.porte__icone svg { width: 20px; height: 20px; color: var(--bleu); }
.porte h3 { font-size: 1rem; margin-bottom: 3px; }
.porte p { font-size: .89rem; color: var(--gris); line-height: 1.5; }

/* --------------------------------------------------------------------------
   8. Cartes
   -------------------------------------------------------------------------- */
.carte {
  position: relative;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r-l);
  padding: 30px;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-l); border-color: var(--trait-fort); }
.carte h3 { margin-bottom: 11px; }
.carte p { font-size: .96rem; color: var(--gris); }
.carte__icone {
  width: 50px; height: 50px;
  border-radius: 14px;
  background: var(--bleu-clair);
  display: grid; place-items: center;
  margin-bottom: 20px;
}
.carte__icone svg { width: 24px; height: 24px; color: var(--bleu); }
.carte__pied { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--trait); }

.etiquettes { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.etiquette {
  font-size: .78rem; font-weight: 600;
  padding: 5px 11px;
  border-radius: 7px;
  background: var(--bleu-voile);
  color: var(--encre-2);
  border: 1px solid var(--trait);
}

/* Carte transparence / honnêteté */
.carte--accent {
  background: linear-gradient(150deg, var(--bleu-nuit) 0%, var(--bleu-fonce) 100%);
  border: 0;
  color: #C3D0E8;
}
.carte--accent h3, .carte--accent h2 { color: var(--blanc); }
.carte--accent .carte__icone { background: rgba(255,255,255,.12); }
.carte--accent .carte__icone svg { color: var(--blanc); }

/* --------------------------------------------------------------------------
   9. Liste à cocher
   -------------------------------------------------------------------------- */
.liste-check { list-style: none; display: grid; gap: 13px; }
.liste-check li { display: flex; align-items: flex-start; gap: 12px; font-size: .97rem; }
.liste-check li::before {
  content: "";
  width: 21px; height: 21px; flex: none; margin-top: 2px;
  border-radius: 50%;
  background: var(--bleu-clair) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231554F0' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.section--nuit .liste-check li::before { background-color: rgba(255,255,255,.14); }

/* --------------------------------------------------------------------------
   10. Étapes numérotées
   -------------------------------------------------------------------------- */
.etapes { counter-reset: etape; display: grid; gap: 20px; }
.etape {
  position: relative;
  padding: 26px 28px 26px 96px;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
}
.etape::before {
  counter-increment: etape;
  content: counter(etape, decimal-leading-zero);
  position: absolute; left: 18px; top: 8px;
  font-family: var(--titre); font-weight: 800;
  font-size: 3.1rem;
  line-height: 1;
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(21, 84, 240, .38);
  pointer-events: none;
}
@supports not (-webkit-text-stroke: 1px black) {
  .etape::before { color: rgba(21, 84, 240, .22); }
}
.etape h3 { font-size: 1.05rem; margin-bottom: 6px; }
.etape p { font-size: .94rem; color: var(--gris); }

/* --------------------------------------------------------------------------
   11. Formulaires
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 17px; }
.form__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
@media (max-width: 620px) { .form__ligne { grid-template-columns: 1fr; } }

.champ { display: grid; gap: 7px; }
.champ label { font-family: var(--titre); font-weight: 650; font-size: .87rem; color: var(--encre); }
.champ label .req { color: var(--bleu); }

.champ input, .champ select, .champ textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--blanc);
  border: 1.5px solid var(--trait);
  border-radius: var(--r-s);
  font-size: .97rem;
  transition: border-color var(--t), box-shadow var(--t);
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--bleu);
  box-shadow: 0 0 0 4px rgba(21,84,240,.12);
}
.champ textarea { resize: vertical; min-height: 128px; }
.champ__aide { font-size: .81rem; color: var(--gris-clair); }

.form__note {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: .82rem; color: var(--gris);
}
.form__note svg { width: 15px; height: 15px; color: var(--gris-clair); flex: none; margin-top: 3px; }

.form__retour {
  display: none;
  padding: 15px 18px;
  border-radius: var(--r-s);
  font-size: .93rem;
  font-weight: 600;
}
.form__retour.est-visible { display: block; }
.form__retour--ok { background: #E7F7F1; color: #07684A; border: 1px solid #B9E7D6; }
.form__retour--ko { background: #FDECEC; color: #96201F; border: 1px solid #F5C6C6; }

/* Recherche SIRET */
.siret { display: flex; gap: 10px; }
.siret input { flex: 1; }
.siret button { flex: none; padding-inline: 20px; }
@media (max-width: 520px) { .siret { flex-direction: column; } }

.siret-resultat {
  display: none;
  margin-top: 14px;
  padding: 17px 19px;
  background: var(--bleu-voile);
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
}
.siret-resultat.est-visible { display: block; }
.siret-resultat__nom { font-family: var(--titre); font-weight: 800; color: var(--encre); font-size: 1.02rem; margin-bottom: 10px; }
.siret-resultat dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: .88rem; }
.siret-resultat dt { color: var(--gris); }
.siret-resultat dd { color: var(--encre); font-weight: 600; }

/* --------------------------------------------------------------------------
   12. Bloc contact / coordonnées
   -------------------------------------------------------------------------- */
.coordonnees { display: grid; gap: 16px; }
.coordonnee {
  display: flex; align-items: flex-start; gap: 15px;
  padding: 19px 21px;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
}
.coordonnee__icone {
  width: 40px; height: 40px; flex: none;
  border-radius: 11px; background: var(--bleu-clair);
  display: grid; place-items: center;
}
.coordonnee__icone svg { width: 19px; height: 19px; color: var(--bleu); }
.coordonnee h4 { margin-bottom: 3px; }
.coordonnee p, .coordonnee a { font-size: .94rem; color: var(--gris); }
.coordonnee a:hover { color: var(--bleu); }

/* --------------------------------------------------------------------------
   13. Fil d'Ariane
   -------------------------------------------------------------------------- */
.ariane {
  padding-block: 18px;
  border-bottom: 1px solid var(--trait);
  background: var(--bleu-voile);
}
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: .85rem; color: var(--gris); }
.ariane li { display: flex; align-items: center; gap: 9px; }
.ariane li + li::before { content: "›"; color: var(--gris-clair); }
.ariane a:hover { color: var(--bleu); }
.ariane [aria-current="page"] { color: var(--encre); font-weight: 600; }

/* --------------------------------------------------------------------------
   14. Contenu rédactionnel (pages légales et services)
   -------------------------------------------------------------------------- */
.prose { max-width: 74ch; }
.prose h2 { font-size: clamp(1.45rem, 2.4vw, 1.85rem); margin-top: 48px; margin-bottom: 16px; }
.prose h3 { margin-top: 32px; margin-bottom: 10px; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin-bottom: 16px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 7px; }
.prose a { color: var(--bleu); text-decoration: underline; text-underline-offset: 3px; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: .93rem; }
.prose th, .prose td { text-align: left; padding: 11px 14px; border: 1px solid var(--trait); }
.prose th { background: var(--bleu-voile); font-family: var(--titre); font-weight: 700; color: var(--encre); }

.a-completer {
  display: inline-block;
  background: #FFF6E5;
  border: 1px dashed #E0A93B;
  border-radius: 5px;
  padding: 0 7px;
  font-weight: 700;
  color: #8A5A00;
  font-size: .9em;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   15. Appel à l'action final
   -------------------------------------------------------------------------- */
.aac {
  background: linear-gradient(140deg, var(--bleu-nuit) 0%, var(--bleu-fonce) 55%, #123A9E 100%);
  color: #C3D0E8;
  border-radius: var(--r-xl);
  padding: clamp(40px, 6vw, 72px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.aac::after {
  content: "";
  position: absolute; inset: auto -10% -60% auto;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(21,84,240,.5) 0%, transparent 68%);
  pointer-events: none;
}
.aac h2 { color: var(--blanc); margin-bottom: 16px; position: relative; }
.aac p { max-width: 58ch; margin-inline: auto; position: relative; }
.aac__actions { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; margin-top: 32px; position: relative; }

/* --------------------------------------------------------------------------
   16. Pied de page
   -------------------------------------------------------------------------- */
.pied { background: var(--bleu-nuit); color: #93A6C7; padding-block: clamp(48px, 6vw, 72px) 32px; font-size: .92rem; }
.pied__grille { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 900px) { .pied__grille { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .pied__grille { grid-template-columns: 1fr; } }

.pied .logo__texte { color: var(--blanc); }
.pied h4 { color: var(--blanc); font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 16px; }
.pied ul { list-style: none; display: grid; gap: 10px; }
.pied a { transition: color var(--t); }
.pied a:hover { color: var(--blanc); }
.pied__intro { max-width: 34ch; margin-top: 16px; line-height: 1.6; }

.pied__bas {
  margin-top: 44px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: 14px 26px;
  justify-content: space-between; align-items: center;
  font-size: .85rem;
}
.pied__legal { display: flex; flex-wrap: wrap; gap: 18px; }

/* --------------------------------------------------------------------------
   17. Apparition au défilement
   -------------------------------------------------------------------------- */
/* Le contenu est TOUJOURS visible par défaut. L'animation d'apparition est
   pilotée par le défilement, en CSS pur : pas de JavaScript, pas d'écran blanc,
   et l'état suit exactement la position de défilement (aucun retard possible). */
.apparait { opacity: 1; transform: none; }

@supports (animation-timeline: view()) {
  .apparait {
    animation: apparaitre .4s ease-out both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }
}
@keyframes apparaitre {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .apparait { animation: none !important; opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   18. Utilitaires
   -------------------------------------------------------------------------- */
.centre { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mt-s { margin-top: 16px; }
.mt-m { margin-top: 28px; }
.mt-l { margin-top: 44px; }


/* --------------------------------------------------------------------------
   19. FAQ en accordéon (natif <details>, fonctionne sans JavaScript)
   -------------------------------------------------------------------------- */
.faq { max-width: 820px; margin-inline: auto; }
.faq-item {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  overflow: hidden;
}
.faq-item + .faq-item { margin-top: 12px; }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--encre);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--bleu-clair);
  color: var(--bleu);
  font-weight: 800;
  font-size: 1.1rem;
  transition: transform var(--t);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-rep { padding: 0 22px 20px; color: var(--gris); font-size: .96rem; }
.faq-item .faq-rep p + p { margin-top: 10px; }

/* --------------------------------------------------------------------------
   20. Grille bento : hiérarchise les services selon la demande réelle
   -------------------------------------------------------------------------- */
.bento { display: grid; gap: 22px; grid-template-columns: repeat(4, 1fr); }
.bento .carte--large { grid-column: span 2; }
.bento .carte--large h3 { font-size: clamp(1.3rem, 2vw, 1.55rem); }
.bento .carte--large .carte__icone { width: 58px; height: 58px; }
.bento .carte--large .carte__icone svg { width: 28px; height: 28px; }
@media (max-width: 1000px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .bento { grid-template-columns: 1fr; } .bento .carte--large { grid-column: span 1; } }

/* --------------------------------------------------------------------------
   21. « Après votre message » : étapes compactes (section contact)
   -------------------------------------------------------------------------- */
.apres-liste { list-style: none; counter-reset: ap; display: grid; gap: 12px; margin-top: 14px; }
.apres-liste li { position: relative; padding-left: 40px; font-size: .93rem; color: var(--gris); }
.apres-liste li::before {
  counter-increment: ap; content: counter(ap);
  position: absolute; left: 0; top: 0;
  width: 27px; height: 27px;
  border-radius: 8px;
  background: var(--bleu-clair); color: var(--bleu);
  font-family: var(--titre); font-weight: 800; font-size: .85rem;
  display: grid; place-items: center;
}

/* --------------------------------------------------------------------------
   22. Avatar vidéo : bulle flottante + carte (toutes pages hors légales)
   -------------------------------------------------------------------------- */
.avatar-bulle {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bleu) 0%, var(--bleu-fonce) 100%);
  color: var(--blanc);
  box-shadow: var(--ombre-l);
  display: grid; place-items: center;
  border: 3px solid var(--blanc);
  transition: transform var(--t), box-shadow var(--t);
}
.avatar-bulle:hover { transform: scale(1.07); }
.avatar-bulle svg { width: 26px; height: 26px; }
.avatar-bulle__txt {
  position: absolute; bottom: -6px; right: -4px;
  background: var(--vert); color: var(--blanc);
  font-family: var(--titre); font-weight: 800; font-size: .62rem;
  padding: 3px 8px; border-radius: 100px;
  border: 2px solid var(--blanc);
}
.avatar-carte {
  position: fixed; right: 22px; bottom: 22px; z-index: 81;
  width: min(300px, calc(100vw - 32px));
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r-l);
  box-shadow: var(--ombre-l);
  padding: 16px;
}
.avatar-carte__haut { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.avatar-carte__titre { font-family: var(--titre); font-weight: 800; font-size: .98rem; color: var(--encre); }
.avatar-carte__fermer {
  flex: none; width: 32px; height: 32px;
  border-radius: 9px; background: var(--bleu-voile);
  color: var(--encre-2); font-size: 1.15rem; font-weight: 700;
  display: grid; place-items: center;
}
.avatar-carte__fermer:hover { background: var(--bleu-clair); color: var(--bleu); }
.avatar-carte video {
  /* format vertical natif des vidéos avatar (9:16) : aucune coupe */
  width: 100%; aspect-ratio: 9 / 16;
  max-height: calc(100vh - 200px);
  border-radius: var(--r-m);
  background: var(--bleu-nuit);
  object-fit: contain;
}
.avatar-carte__absente {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-m);
  background: linear-gradient(150deg, var(--bleu-nuit) 0%, var(--bleu-fonce) 100%);
  color: #C3D0E8;
  display: grid; place-content: center; gap: 10px;
  text-align: center; padding: 24px; font-size: .92rem;
}
.avatar-carte__absente strong { color: var(--blanc); font-family: var(--titre); }
.avatar-carte .btn { margin-top: 12px; width: 100%; }
@media (max-width: 640px) {
  .avatar-bulle { width: 62px; height: 62px; right: 14px; bottom: 14px; }
  .avatar-carte { right: 14px; bottom: 14px; }
}
@media print { .avatar-bulle, .avatar-carte { display: none; } }


/* --------------------------------------------------------------------------
   23. Grain léger sur le héros (texture, poids quasi nul, aucun fichier)
   -------------------------------------------------------------------------- */
.heros::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.heros > .conteneur { position: relative; }

/* --------------------------------------------------------------------------
   24. Bande défilante (transform uniquement : aucune incidence PageSpeed)
   -------------------------------------------------------------------------- */
/* Cadre du ruban : absorbe le débordement de la rotation sans casser le sticky.
   « hidden » d'abord (compris partout), « clip » ensuite pour les navigateurs
   modernes : sans ce repli, Samsung Internet et les anciens Safari laissaient
   le ruban incliné créer un défilement horizontal. */
.bande-zone { overflow-x: hidden; overflow-x: clip; }

/* Ruban incliné bleu électrique (repris du modèle A de l'Arena) */
.bande {
  overflow: hidden;
  background: var(--bleu);
  padding-block: 16px;
  transform: rotate(-1.6deg) scale(1.04);
  box-shadow: 0 30px 80px -30px rgba(21, 84, 240, .7);
  position: relative;
  z-index: 2;
  margin-block: -14px 18px;
}
.bande__piste {
  display: flex; gap: 30px; width: max-content;
  font-family: var(--titre); font-weight: 700; font-size: .95rem;
  letter-spacing: .01em;
  color: var(--blanc); white-space: nowrap;
  animation: defiler 32s linear infinite;
  will-change: transform;
}
.bande:hover .bande__piste { animation-play-state: paused; }
.bande__piste span[aria-hidden] { color: rgba(255, 255, 255, .5); }
@keyframes defiler { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bande__piste { animation: none; } }

/* --------------------------------------------------------------------------
   25. Démonstration de l'agent IA (animation CSS pure, en boucle)
   -------------------------------------------------------------------------- */
.chat {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-l);
  padding: 22px;
  backdrop-filter: blur(6px);
}
.chat__entete {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.chat__statut {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--vert);
  box-shadow: 0 0 0 3px rgba(14,159,110,.25);
}
.chat__titre { font-family: var(--titre); font-weight: 800; color: #fff; font-size: .98rem; }
.chat__badge {
  margin-left: auto;
  font-size: .72rem; font-weight: 700;
  color: #7FD8BC; background: rgba(14,159,110,.16);
  padding: 4px 10px; border-radius: 100px;
}
.chat__corps { display: grid; gap: 10px; min-height: 216px; align-content: start; }
.chat__msg {
  max-width: 85%;
  padding: 11px 15px;
  border-radius: 14px;
  font-size: .92rem; line-height: 1.5;
  opacity: 0;
}
.chat__msg--client {
  justify-self: end;
  background: var(--bleu); color: #fff;
  border-bottom-right-radius: 4px;
  animation: chat-c1 11s infinite;
}
.chat__msg--agent {
  justify-self: start;
  background: rgba(255,255,255,.10); color: #E4ECFA;
  border-bottom-left-radius: 4px;
  animation: chat-a 11s infinite;
}
.chat__msg--client:last-of-type { animation: chat-c2 11s infinite; }
.chat__msg--typing {
  justify-self: start;
  background: rgba(255,255,255,.10);
  display: flex; gap: 5px; align-items: center;
  animation: chat-t 11s infinite;
}
.chat__msg--typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: #9DB4DC;
  animation: chat-pt 1s infinite alternate;
}
.chat__msg--typing span:nth-child(2) { animation-delay: .2s; }
.chat__msg--typing span:nth-child(3) { animation-delay: .4s; }
.chat__pied {
  margin-top: 14px; font-size: .8rem; color: #93A6C7; text-align: center;
}
@keyframes chat-c1 { 0%,3% { opacity:0; transform:translateY(8px); } 7%,90% { opacity:1; transform:none; } 96%,100% { opacity:0; } }
@keyframes chat-t  { 0%,9% { opacity:0; } 12%,30% { opacity:1; } 33%,100% { opacity:0; } }
@keyframes chat-a  { 0%,32% { opacity:0; transform:translateY(8px); } 37%,90% { opacity:1; transform:none; } 96%,100% { opacity:0; } }
@keyframes chat-c2 { 0%,52% { opacity:0; transform:translateY(8px); } 57%,90% { opacity:1; transform:none; } 96%,100% { opacity:0; } }
@keyframes chat-pt { to { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .chat__msg { animation: none !important; opacity: 1; }
  .chat__msg--typing { display: none; }
}

/* --------------------------------------------------------------------------
   26. Diagnostic express
   -------------------------------------------------------------------------- */
.diag {
  max-width: 860px; margin-inline: auto;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r-l);
  padding: clamp(22px, 4vw, 36px);
  box-shadow: var(--ombre-m);
}
.diag__q + .diag__q { margin-top: 26px; }
.diag__intitule { font-family: var(--titre); font-weight: 800; color: var(--encre); margin-bottom: 12px; }
.diag__opts { display: flex; flex-wrap: wrap; gap: 10px; }
.diag__opts button {
  padding: 11px 18px;
  border: 1.5px solid var(--trait-fort);
  border-radius: 100px;
  background: var(--blanc);
  font-family: var(--titre); font-weight: 650; font-size: .92rem;
  color: var(--encre-2);
  transition: border-color var(--t), background var(--t), color var(--t), transform var(--t);
}
.diag__opts button:hover { border-color: var(--bleu); color: var(--bleu); transform: translateY(-1px); }
.diag__opts button[aria-pressed="true"] {
  background: var(--bleu); border-color: var(--bleu); color: #fff;
}
.diag__verdict {
  margin-top: 30px;
  padding: 24px 26px;
  border-radius: var(--r-m);
  background: var(--bleu-voile);
  border: 1px solid var(--trait);
}
.diag__verdict h3 { margin-bottom: 8px; }
.diag__verdict p { font-size: .96rem; color: var(--encre-2); }
.diag__verdict .btn { margin-top: 18px; }
.diag__alerte {
  margin-top: 12px; padding: 12px 15px;
  border-radius: var(--r-s);
  background: #FFF6E5; border: 1px solid #E8C989;
  color: #7A5000; font-size: .9rem; font-weight: 550;
}


/* --------------------------------------------------------------------------
   27. Aurora : nappes de couleur en mouvement lent dans les héros
   -------------------------------------------------------------------------- */
.heros { isolation: isolate; }
.aurora { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
.aurora i {
  position: absolute;
  width: 46vw; height: 46vw;
  min-width: 420px; min-height: 420px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
  will-change: transform;
}
.aurora i:nth-child(1) {
  background: radial-gradient(circle, rgba(21,84,240,.32) 0%, transparent 65%);
  top: -22%; right: -10%;
  animation: aurora-a 26s ease-in-out infinite alternate;
}
.aurora i:nth-child(2) {
  background: radial-gradient(circle, rgba(14,159,110,.16) 0%, transparent 65%);
  bottom: -30%; left: -12%;
  animation: aurora-b 32s ease-in-out infinite alternate;
}
.aurora i:nth-child(3) {
  background: radial-gradient(circle, rgba(10,42,107,.20) 0%, transparent 65%);
  top: 18%; left: 34%;
  width: 30vw; height: 30vw;
  animation: aurora-c 38s ease-in-out infinite alternate;
}
@keyframes aurora-a { to { transform: translate(-14%, 16%) scale(1.15); } }
@keyframes aurora-b { to { transform: translate(16%, -12%) scale(1.1) rotate(20deg); } }
@keyframes aurora-c { to { transform: translate(-18%, 10%) scale(.9); } }
@media (prefers-reduced-motion: reduce) { .aurora i { animation: none; } }

/* --------------------------------------------------------------------------
   28. Titre du héros : apparition mot à mot
   -------------------------------------------------------------------------- */
.titre-anime .mot { display: inline-block; overflow: hidden; vertical-align: bottom; }
.titre-anime .mot > span {
  display: inline-block;
  transform: translateY(112%);
  animation: mot-monte .65s cubic-bezier(.2, .65, .25, 1) forwards;
  animation-delay: calc(.06s * var(--m, 0) + .1s);
}
.titre-anime .mot:nth-child(1) > span { --m: 0; }
.titre-anime .mot:nth-child(2) > span { --m: 1; }
.titre-anime .mot:nth-child(3) > span { --m: 2; }
.titre-anime .mot:nth-child(4) > span { --m: 4; }
.titre-anime .mot:nth-child(5) > span { --m: 5; }
.titre-anime .mot:nth-child(6) > span { --m: 6; }
.titre-anime .mot:nth-child(7) > span { --m: 7; }
.titre-anime .mot:nth-child(8) > span { --m: 8; }
.titre-anime .mot:nth-child(9) > span { --m: 9; }
@keyframes mot-monte { to { transform: translateY(0); } }

/* Entrée orchestrée du reste du héros */
.entree {
  opacity: 0;
  transform: translateY(16px);
  animation: entree-monte .6s ease-out forwards;
  animation-delay: calc(.14s * var(--e, 0) + .35s);
}
@keyframes entree-monte { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .titre-anime .mot > span { transform: none; animation: none; }
  .entree { opacity: 1; transform: none; animation: none; }
}

/* --------------------------------------------------------------------------
   29. Cartes vivantes : inclinaison 3D + halo qui suit le curseur
        (activé par JS uniquement sur les appareils à souris)
   -------------------------------------------------------------------------- */
.carte-vive {
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0));
  transition: transform .18s ease-out;
  position: relative;
}
.carte-vive::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
              rgba(21,84,240,.10), transparent 65%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.carte-vive:hover::after { opacity: 1; }
.section--nuit .carte-vive::after,
.chat.carte-vive::after {
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255,255,255,.10), transparent 65%);
}

/* --------------------------------------------------------------------------
   30. Boutons : reflet au survol + base magnétique
   -------------------------------------------------------------------------- */
.btn--principal { position: relative; overflow: hidden; }
.btn--principal::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .05s;
}
.btn--principal:hover::before { left: 130%; transition: left .55s ease; }
.magnetique { transition: transform .2s ease-out; will-change: transform; }


/* --------------------------------------------------------------------------
   31. Héros nuit : le basculement 2026 (index uniquement, le site reste clair)
   -------------------------------------------------------------------------- */
.heros--nuit {
  background:
    radial-gradient(1000px 560px at 80% -10%, rgba(21,84,240,.30) 0%, transparent 60%),
    radial-gradient(720px 460px at 6% 110%, rgba(0,140,255,.14) 0%, transparent 60%),
    linear-gradient(180deg, #050F2B 0%, var(--bleu-nuit) 60%, #0A2358 100%);
}
.heros--nuit::before { opacity: .07; }              /* grain, plus présent sur le sombre */
.heros--nuit::after {                                /* grille technique */
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(85% 80% at 50% 30%, #000 30%, transparent 100%);
  mask-image: radial-gradient(85% 80% at 50% 30%, #000 30%, transparent 100%);
}
.heros--nuit .aurora i { opacity: .8; }

.heros--nuit h1 { color: #fff; }
.heros--nuit h1 em,
.heros--nuit .titre-anime .mot:nth-child(3) > span {
  background: linear-gradient(92deg, #6AA5FF 0%, #37E0FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.heros--nuit .chapo { color: #A9BBD9; }
.heros--nuit .pastille {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
  color: #C8D6EE;
  box-shadow: none;
}
.heros--nuit .gage { color: #C8D6EE; }

.heros--nuit .porte {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.13);
  box-shadow: none;
  backdrop-filter: blur(6px);
}
.heros--nuit .porte:hover { border-color: rgba(255,255,255,.28); box-shadow: 0 18px 48px rgba(0,0,0,.35); }
.heros--nuit .porte h3 { color: #fff; }
.heros--nuit .porte p { color: #9FB2D4; }
.heros--nuit .porte__icone { background: rgba(21,84,240,.28); }
.heros--nuit .porte__icone svg { color: #8FB4FF; }
.heros--nuit .carte-vive::after {
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255,255,255,.09), transparent 65%);
}

/* Statistiques honnêtes du héros */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: clamp(34px, 5vw, 54px);
}
.stat {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r-m);
  padding: 20px 22px;
}
.stat__chiffre {
  display: block;
  font-family: var(--titre);
  font-weight: 800;
  font-size: clamp(1.55rem, 2.8vw, 2.15rem);
  letter-spacing: -.02em;
  background: linear-gradient(92deg, #6AA5FF 0%, #37E0FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__libelle { display: block; margin-top: 6px; font-size: .84rem; color: #93A6C7; line-height: 1.45; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------------------------------------------------------
   32. Console incident de l'agent IA (remplace la conversation à bulles)
   -------------------------------------------------------------------------- */
.chat__corps--console { gap: 9px; }
.cons {
  width: 100%; max-width: none;
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  border-left: 3px solid transparent;
  background: rgba(255,255,255,.05);
  color: #DAE4F5;
  font-size: .9rem; line-height: 1.5;
  opacity: 0;
}
.cons__h {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .74rem; color: #7E92B8; flex: none;
}
.cons--alerte  { border-left-color: #FF6B6B; background: rgba(255,107,107,.10); animation: cons-1 12s infinite; }
.cons--analyse { border-left-color: #6AA5FF; animation: cons-2 12s infinite; }
.cons--action  { border-left-color: #23C08B; background: rgba(35,192,139,.10); animation: cons-3 12s infinite; }
.cons--humain  { border-left-color: #E6EDF9; animation: cons-4 12s infinite; }
@keyframes cons-1 { 0%,3%  { opacity:0; transform:translateY(8px); } 8%,88%  { opacity:1; transform:none; } 95%,100% { opacity:0; } }
@keyframes cons-2 { 0%,22% { opacity:0; transform:translateY(8px); } 28%,88% { opacity:1; transform:none; } 95%,100% { opacity:0; } }
@keyframes cons-3 { 0%,44% { opacity:0; transform:translateY(8px); } 50%,88% { opacity:1; transform:none; } 95%,100% { opacity:0; } }
@keyframes cons-4 { 0%,64% { opacity:0; transform:translateY(8px); } 70%,88% { opacity:1; transform:none; } 95%,100% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .cons { animation: none !important; opacity: 1; } }


/* --------------------------------------------------------------------------
   33. Vidéo de présentation dans le héros
   -------------------------------------------------------------------------- */
.hero-video {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-l);
  overflow: hidden;
  background:
    radial-gradient(70% 90% at 70% 20%, rgba(21,84,240,.35) 0%, transparent 60%),
    rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
}
.hero-video__lancer {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: 14px;
  justify-items: center;
  color: #fff;
  width: 100%;
}
.hero-video__play {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bleu) 0%, #37E0FF 100%);
  display: grid; place-items: center;
  box-shadow: 0 18px 48px rgba(21,84,240,.5);
  transition: transform var(--t);
}
.hero-video__play svg { width: 28px; height: 28px; margin-left: 3px; }
.hero-video__lancer:hover .hero-video__play { transform: scale(1.1); }
.hero-video__legende {
  font-family: var(--titre); font-weight: 700; font-size: .95rem;
  color: #C8D6EE;
}
.hero-video video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-video__absente {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: 8px;
  text-align: center; padding: 24px;
  color: #C8D6EE; font-size: .92rem;
}
.hero-video__absente strong { color: #fff; font-family: var(--titre); }

/* --------------------------------------------------------------------------
   34. Portes compactes : l'info ciblée par situation, sans discours
   -------------------------------------------------------------------------- */
.portes-mini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: clamp(26px, 4vw, 40px);
}
.portes-mini a {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r-m);
  color: #9FB2D4; font-size: .88rem; line-height: 1.45;
  transition: transform var(--t), border-color var(--t);
}
.portes-mini a:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.3); }
.portes-mini strong {
  display: block;
  color: #fff; font-family: var(--titre); font-weight: 700; font-size: .95rem;
  margin-bottom: 2px;
}
.portes-mini svg { width: 20px; height: 20px; flex: none; color: #8FB4FF; margin-top: 2px; }
@media (max-width: 900px) { .portes-mini { grid-template-columns: 1fr; } }

.heros--nuit .stats { margin-top: 18px; }


/* --------------------------------------------------------------------------
   35. Cas pratiques : des situations reconnues, pas un argumentaire
   -------------------------------------------------------------------------- */
.cas__contexte {
  font-family: var(--titre);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bleu);
  margin-bottom: 10px;
}
.cas__reponse {
  margin-top: 16px;
  padding: 14px 16px;
  background: #EDF3FF;
  border-left: 3px solid var(--bleu);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  font-size: .93rem;
}
.cas__reponse strong { color: var(--bleu); }

.grille--cas { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .grille--cas { grid-template-columns: 1fr; } }


/* --------------------------------------------------------------------------
   36. Slider des cas pratiques (défilement natif, une vidéo par cas)
   -------------------------------------------------------------------------- */
.cas-slider { max-width: 1040px; margin-inline: auto; }
.cas-piste {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 22px;
  scrollbar-width: none;
  border-radius: var(--r-l);
}
.cas-piste::-webkit-scrollbar { display: none; }
.cas-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(20px, 3vw, 34px);
  align-items: center;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r-l);
  padding: clamp(20px, 3vw, 32px);
  box-shadow: var(--ombre-m);
}
.cas-slide__video {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-m);
  overflow: hidden;
  background:
    radial-gradient(70% 90% at 70% 20%, rgba(21,84,240,.4) 0%, transparent 60%),
    linear-gradient(160deg, #0A1F4D 0%, var(--bleu-nuit) 100%);
}
.cas-slide__video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cas-slide__video .hero-video__absente { position: absolute; inset: 0; }
.cas-slide__texte h3 { margin-bottom: 10px; }
.cas-slide__texte .btn { margin-top: 18px; }
@media (max-width: 860px) { .cas-slide { grid-template-columns: 1fr; } }

.cas-nav {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-top: 20px;
}
.cas-fleche {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--blanc);
  border: 1.5px solid var(--trait-fort);
  font-size: 1.3rem; line-height: 1;
  color: var(--encre);
  transition: border-color var(--t), color var(--t), transform var(--t);
}
.cas-fleche:hover { border-color: var(--bleu); color: var(--bleu); transform: scale(1.06); }
.cas-points { display: flex; gap: 8px; }
.cas-points button {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--trait-fort);
  transition: background var(--t), transform var(--t);
}
.cas-points button[aria-current="true"] { background: var(--bleu); transform: scale(1.3); }


/* Fusion Arena : compteur, onglets nommés, badge et étiquette vidéo */
.cas-slider__haut {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 14px;
}
.cas-compteur {
  font-family: var(--titre); font-weight: 700; font-size: .82rem;
  letter-spacing: .06em;
  color: var(--encre-2);
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: 100px;
  padding: 7px 14px;
}
.cas-compteur b { color: var(--bleu); }
.cas-indice { font-size: .8rem; color: var(--gris-clair); }
@media (max-width: 700px) { .cas-indice { display: none; } }
.cas-fleches { display: flex; gap: 8px; }

.cas-onglets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.cas-onglet {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 14px;
  background: var(--blanc);
  border: 1.5px solid var(--trait);
  border-radius: var(--r-s);
  font-family: var(--titre); font-weight: 650; font-size: .84rem;
  color: var(--encre-2);
  transition: border-color var(--t), transform var(--t);
  text-align: left;
}
.cas-onglet span {
  font-size: .74rem; font-weight: 800;
  color: var(--bleu);
  background: var(--bleu-clair);
  border-radius: 6px;
  padding: 3px 7px;
  flex: none;
}
.cas-onglet:hover { border-color: var(--bleu); transform: translateY(-2px); }
.cas-onglet[aria-current="true"] { border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(21,84,240,.12); }
.cas-onglet[aria-current="true"] span { background: var(--bleu); color: #fff; }
@media (max-width: 860px) { .cas-onglets { grid-template-columns: repeat(2, 1fr); } }

.cas-slide__badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-family: var(--titre); font-weight: 800; font-size: .72rem;
  letter-spacing: .08em;
  color: #C8D6EE;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  padding: 5px 10px;
}
.cas-slide__tag {
  position: absolute; bottom: 14px; left: 14px; z-index: 2;
  font-size: .76rem; font-weight: 600;
  color: #E4ECFA;
  background: rgba(7,27,69,.65);
  border-radius: 100px;
  padding: 5px 12px;
  backdrop-filter: blur(4px);
}


/* --------------------------------------------------------------------------
   37. Carte interactive de la zone (tracés : option A d'Arena, choix d'Aïda)
   -------------------------------------------------------------------------- */
.zone-carte {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(20px, 3vw, 34px);
  align-items: stretch;
  background: linear-gradient(160deg, #0A1F4D 0%, var(--bleu-nuit) 100%);
  border-radius: var(--r-xl);
  padding: clamp(20px, 3vw, 34px);
  box-shadow: var(--ombre-l);
}
@media (max-width: 900px) { .zone-carte { grid-template-columns: 1fr; } }
.zone-carte__svg svg { width: 100%; height: auto; display: block; }

.zdept {
  fill: rgba(255, 255, 255, .06);
  stroke: rgba(255, 255, 255, .28);
  stroke-width: 1.5;
  cursor: pointer;
  transition: fill .2s ease, stroke .2s ease, filter .2s ease;
  outline: none;
}
.zdept:hover, .zdept:focus-visible {
  fill: rgba(21, 84, 240, .35);
  stroke: #37E0FF;
  filter: drop-shadow(0 0 12px rgba(55, 224, 255, .45));
}
.zdept[aria-pressed="true"] {
  fill: rgba(21, 84, 240, .55);
  stroke: #37E0FF;
  stroke-width: 2;
  filter: drop-shadow(0 0 16px rgba(55, 224, 255, .55));
}
.zdept-num {
  font-family: var(--titre); font-weight: 800; font-size: 22px;
  fill: #C8D6EE;
  pointer-events: none;
}
.zsiege-nom { font-family: var(--titre); font-weight: 700; font-size: 13px; fill: #fff; }
.zsiege-role { font-size: 11px; fill: #7FD8BC; letter-spacing: .08em; text-transform: uppercase; }
.zpoint { fill: #37E0FF; stroke: #fff; stroke-width: 2; }
.zonde {
  fill: none; stroke: #37E0FF; stroke-width: 1.5;
  transform-box: fill-box; transform-origin: center;
  animation: zonde 3.2s ease-out infinite;
  opacity: 0;
}
.zonde--2 { animation-delay: 1.05s; }
.zonde--3 { animation-delay: 2.1s; }
@keyframes zonde {
  0% { transform: scale(.4); opacity: .9; }
  100% { transform: scale(3.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .zonde { animation: none; opacity: 0; } }

.zone-panneau {
  display: grid;
  gap: 14px;
  align-content: center;
}
.zone-info {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-m);
  padding: 20px 22px;
  color: #A9BBD9;
}
.zone-info h3 { color: #fff; margin-bottom: 6px; }
.zone-info__villes { font-size: .92rem; }
.zone-info__note { font-size: .85rem; color: #7E92B8; margin-top: 8px; }
.zone-info__siege { font-size: .85rem; color: #7FD8BC; margin-top: 4px; }
.zone-info .btn { margin-top: 16px; }
/* Le mode interactif (posé par le JS) n'affiche que la fiche active ;
   sans JavaScript, les huit fiches restent toutes lisibles. */
.zone-carte.est-interactive .zone-info { display: none; }
.zone-carte.est-interactive .zone-info.est-active { display: block; animation: entree-monte .35s ease-out; }


/* --------------------------------------------------------------------------
   38. Modale de devis localisé
   -------------------------------------------------------------------------- */
.devis-modal {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(560px, calc(100vw - 32px));
  width: 100%;
  margin: auto;
}
.devis-modal::backdrop {
  background: rgba(5, 15, 43, .6);
  backdrop-filter: blur(6px);
}
.devis-modal[open] .devis-modal__carte { animation: modal-entree .28s ease-out; }
@keyframes modal-entree {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .devis-modal[open] .devis-modal__carte { animation: none; }
}
.devis-modal__carte {
  background: var(--blanc);
  border-radius: var(--r-l);
  padding: clamp(20px, 4vw, 30px);
  box-shadow: var(--ombre-l);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.devis-modal__haut {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  margin-bottom: 20px;
}
.devis-modal__haut h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
.devis-modal__haut h3 span { color: var(--bleu); }
.devis-modal__fermer {
  flex: none; width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--bleu-voile);
  color: var(--encre-2);
  font-size: 1.3rem; line-height: 1;
  transition: background var(--t), color var(--t);
}
.devis-modal__fermer:hover { background: var(--bleu-clair); color: var(--bleu); }


/* --------------------------------------------------------------------------
   39. Autocomplétion d'entreprise (modale de devis)
   -------------------------------------------------------------------------- */
.champ--autocompletion { position: relative; }
.autocompletion-boite { position: relative; }
.autocompletion-liste {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 5;
  list-style: none;
  background: var(--blanc);
  border: 1.5px solid var(--trait-fort);
  border-radius: var(--r-s);
  box-shadow: var(--ombre-l);
  max-height: 240px;
  overflow-y: auto;
}
.autocompletion-liste li {
  padding: 11px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--trait);
  transition: background var(--t);
}
.autocompletion-liste li:last-child { border-bottom: 0; }
.autocompletion-liste li:hover,
.autocompletion-liste li[aria-selected="true"] { background: var(--bleu-voile); }
.autocompletion-liste .ac-nom {
  display: block;
  font-family: var(--titre); font-weight: 700; font-size: .9rem;
  color: var(--encre);
}
.autocompletion-liste .ac-detail { display: block; font-size: .78rem; color: var(--gris); margin-top: 2px; }
.autocompletion-liste .ac-vide { cursor: default; color: var(--gris); font-size: .85rem; }


/* --------------------------------------------------------------------------
   40. Services souhaités (modale) : puces à choix multiple
   -------------------------------------------------------------------------- */
.champ--services { border: 0; padding: 0; margin: 0; }
.champ--services legend {
  font-family: var(--titre); font-weight: 650; font-size: .87rem;
  color: var(--encre); margin-bottom: 8px; padding: 0;
}
.services-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-block;
  padding: 9px 15px;
  border: 1.5px solid var(--trait-fort);
  border-radius: 100px;
  background: var(--blanc);
  font-family: var(--titre); font-weight: 650; font-size: .85rem;
  color: var(--encre-2);
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t);
  user-select: none;
}
.chip:hover span { border-color: var(--bleu); color: var(--bleu); transform: translateY(-1px); }
.chip input:checked + span {
  background: var(--bleu);
  border-color: var(--bleu);
  color: #fff;
}
.chip input:focus-visible + span {
  outline: 3px solid var(--bleu);
  outline-offset: 2px;
}


/* Décisions de l'audit Arena (V4.3) */
[id] { scroll-margin-top: 90px; }                 /* les ancres ne passent plus sous le header */
.cas-onglets { margin-top: 0; margin-bottom: 16px; } /* onglets déplacés avant le slider */
@media (max-width: 640px) {
  .avatar-carte { width: min(300px, calc(100vw - 24px)); }
  .avatar-carte video, .avatar-carte .hero-video__absente,
  .avatar-carte .avatar-carte__absente { aspect-ratio: 16 / 10; } /* moins envahissant sur mobile */
}


/* --------------------------------------------------------------------------
   41. « Être rappelé » + barre de défilement aux couleurs du site
   -------------------------------------------------------------------------- */
.btn-rappel-coord { margin-top: 10px; padding: 9px 16px; font-size: .88rem; }

html { scrollbar-color: var(--bleu) #E7EEFB; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #E7EEFB; }
::-webkit-scrollbar-thumb {
  background: var(--bleu);
  border-radius: 99px;
  border: 2px solid #E7EEFB;
}
::-webkit-scrollbar-thumb:hover { background: var(--bleu-nuit); }