/* =====================================================================
   HOMATIK — assets/css/style.css
   ---------------------------------------------------------------------
   SOMMAIRE (utilise Ctrl+F avec le numéro pour naviguer)
     01. Variables (couleurs, polices, tailles)
     02. Réinitialisation et bases
     03. Fond animé et grille technique
     04. Typographie et titres de section
     05. Boutons et liens
     06. En-tête et navigation
     07. Menu mobile
     08. Hero (grande zone d'accueil) et console d'activité
     09. Cartes, listes, étiquettes
     10. Rail d'étapes, chiffres, protocoles
     11. Tableaux comparatifs
     12. Tarifs
     13. FAQ
     14. Formulaires et messages
     15. Blocs éditoriaux (réalisations, matériel, encarts)
     16. Appel à l'action
     17. Pied de page
     18. Éléments flottants (barre de progression, retour haut)
     19. Animations au scroll et keyframes
     20. Responsive (tablette et mobile)
     21. Accessibilité (mouvement réduit, focus, impression)
   ===================================================================== */


/* =====================================================================
   01. VARIABLES
   Une variable CSS se déclare avec -- et se réutilise avec var().
   Change une couleur ici, elle change partout sur le site.
   ===================================================================== */
:root {
  /* --- Fonds (du plus sombre au plus clair) --- */
  --nuit:          #070A12;   /* fond général, presque noir bleuté */
  --nuit-2:        #0A0F1C;
  --ardoise:       #0F1626;   /* surfaces, cartes */
  --ardoise-clair: #162034;   /* survol, bordures actives */

  /* --- Couleurs d'accent --- */
  --cyan:   #38E1FF;   /* signal, liaison radio : accent principal */
  --violet: #7C5CFF;   /* maillage, intelligence : accent secondaire */
  --ambre:  #FFB84D;   /* énergie, consommation */
  --vert:   #46E3A0;   /* état "en ligne", validation */
  --rouge:  #FF6B7A;   /* alerte, erreur de formulaire */

  /* --- Textes --- */
  --texte:      #E9EFF9;
  --texte-doux: #94A6C0;
  --texte-faible: #6B7C97;

  /* --- Traits et ombres --- */
  --bordure:      rgba(140, 175, 225, 0.14);
  --bordure-vive: rgba(56, 225, 255, 0.45);
  --lueur-cyan:   0 0 40px rgba(56, 225, 255, 0.28);
  --lueur-violet: 0 0 50px rgba(124, 92, 255, 0.30);

  /* --- Dégradé signature (repris sur les titres et boutons) --- */
  --degrade: linear-gradient(120deg, var(--cyan) 0%, #6AA9FF 45%, var(--violet) 100%);

  /* --- Polices --- */
  --police-titre: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --police-texte: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --police-mono:  'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  /* --- Rythme --- */
  --largeur-max: 1180px;
  --rayon:   14px;
  --rayon-l: 22px;
  --transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =====================================================================
   02. RÉINITIALISATION ET BASES
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;      /* défilement doux quand on clique une ancre */
  scroll-padding-top: 110px;    /* évite que l'en-tête cache le titre visé */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--nuit);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: 1.0625rem;         /* 17 px : confortable à lire */
  line-height: 1.7;
  overflow-x: hidden;           /* pas de barre horizontale parasite */
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; display: block; }
a { color: var(--cyan); text-decoration: none; transition: color var(--transition); }
a:hover { color: #9BEEFF; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }

/* Le conteneur centre le contenu et gère les marges latérales. */
.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: 24px;
}

/* Espacement vertical standard entre les grandes sections. */
.section { padding-block: clamp(64px, 8vw, 116px); position: relative; }
.section--serree { padding-block: clamp(44px, 5vw, 72px); }

/* Une section légèrement plus claire, pour créer du rythme. */
.section--fond {
  background:
    radial-gradient(1000px 400px at 50% 0%, rgba(124, 92, 255, 0.10), transparent 70%),
    var(--nuit-2);
  border-block: 1px solid var(--bordure);
}


/* =====================================================================
   03. FOND ANIMÉ ET GRILLE TECHNIQUE
   Deux couches fixes derrière tout le contenu :
   - des halos colorés qui respirent lentement
   - une grille fine, comme un plan de câblage
   ===================================================================== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(680px 460px at 12% -5%,  rgba(56, 225, 255, 0.16), transparent 65%),
    radial-gradient(720px 520px at 88% 10%,  rgba(124, 92, 255, 0.18), transparent 65%),
    radial-gradient(900px 600px at 50% 105%, rgba(70, 227, 160, 0.07), transparent 70%);
  animation: respiration 18s ease-in-out infinite alternate;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(150, 190, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150, 190, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  /* Le masque fait disparaître la grille sur les bords : plus élégant. */
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
  pointer-events: none;
}


/* =====================================================================
   04. TYPOGRAPHIE ET TITRES DE SECTION
   ===================================================================== */
h1, h2, h3, h4 {
  font-family: var(--police-titre);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  color: #FFFFFF;
}

.titre-page  { font-size: clamp(2.2rem, 5.2vw, 3.9rem); font-weight: 800; margin-bottom: 0.3em; }
.titre-section { font-size: clamp(1.75rem, 3.4vw, 2.7rem); }

/* Le mot mis en avant dans un titre, coloré par le dégradé signature. */
.accent {
  background: var(--degrade);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Surtitre : petite ligne technique au-dessus des titres.
   Elle porte toujours une information réelle (protocole, étape, lieu). */
.surtitre {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--police-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 18px;
  padding: 6px 14px 6px 12px;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  background: rgba(56, 225, 255, 0.05);
}
.surtitre__point {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  animation: pulsation 2.4s ease-in-out infinite;
}

.chapo {
  color: var(--texte-doux);
  font-size: 1.08rem;
  max-width: 62ch;
}
.chapo--large { font-size: clamp(1.05rem, 2vw, 1.3rem); max-width: 66ch; }

.entete-section { margin-bottom: 48px; max-width: 780px; }
.entete-section--centre { margin-inline: auto; text-align: center; }
.entete-section--centre .chapo { margin-inline: auto; }

/* Grilles de contenu réutilisables. */
.grille { display: grid; gap: 22px; }
.grille--2 { grid-template-columns: repeat(2, 1fr); }
.grille--3 { grid-template-columns: repeat(3, 1fr); }
.grille--4 { grid-template-columns: repeat(4, 1fr); }


/* =====================================================================
   05. BOUTONS ET LIENS
   ===================================================================== */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--police-texte);
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition),
              background var(--transition), border-color var(--transition);
}

/* Bouton principal : dégradé lumineux, texte sombre pour le contraste. */
.bouton--principal {
  background: var(--degrade);
  color: #05070E;
  box-shadow: 0 10px 30px rgba(56, 225, 255, 0.22);
}
.bouton--principal:hover {
  color: #05070E;
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(56, 225, 255, 0.40), var(--lueur-violet);
}

/* Effet de "balayage" lumineux au survol. */
.bouton--principal::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
.bouton--principal:hover::after { left: 130%; }

/* Bouton secondaire : contour seulement. */
.bouton--fantome {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--bordure);
  color: var(--texte);
  backdrop-filter: blur(8px);
}
.bouton--fantome:hover {
  border-color: var(--bordure-vive);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: var(--lueur-cyan);
}

.bouton--compact { padding: 10px 20px; font-size: 0.9rem; }
.bouton--pleine-largeur { width: 100%; justify-content: center; margin-top: 24px; }

.rangee-boutons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* Lien avec flèche qui avance au survol. */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  font-weight: 600;
  font-size: 0.95rem;
}
.lien-fleche .icone { transition: transform var(--transition); }
.lien-fleche:hover .icone { transform: translateX(5px); }

/* Tailles d'icônes. */
.icone { width: 24px; height: 24px; flex-shrink: 0; }
.icone--bouton { width: 18px; height: 18px; }
.icone--mini { width: 17px; height: 17px; color: var(--cyan); }
.icone--coche { width: 17px; height: 17px; color: var(--vert); margin-top: 5px; }
.icone--protocole { width: 30px; height: 30px; }


/* =====================================================================
   06. EN-TÊTE ET NAVIGATION
   ===================================================================== */
.entete {
  position: sticky;   /* la barre reste collée en haut au défilement */
  top: 0;
  z-index: 900;
  border-bottom: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition), backdrop-filter var(--transition);
}
/* La classe .est-reduit est ajoutée par le JavaScript après 40 px de scroll. */
.entete.est-reduit {
  background: rgba(7, 10, 18, 0.82);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--bordure);
}

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

.logo { display: flex; align-items: center; gap: 12px; color: var(--texte); }
.logo-marque { width: 38px; height: 38px; filter: drop-shadow(0 0 12px rgba(56, 225, 255, 0.45)); }
.logo__texte { display: flex; flex-direction: column; line-height: 1.1; }
.logo__texte strong {
  font-family: var(--police-titre);
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.logo__texte em {
  font-family: var(--police-mono);
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texte-faible);
}

.navigation__liste { display: flex; align-items: center; gap: 4px; }
.navigation__item { position: relative; }

.navigation__lien {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--texte-doux);
  font-family: var(--police-texte);
  font-size: 0.94rem;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.navigation__lien:hover,
.navigation__lien.est-actif { color: #FFFFFF; background: rgba(255, 255, 255, 0.05); }
.navigation__chevron { width: 15px; height: 15px; transition: transform var(--transition); }
.navigation__item--deroulant[aria-ouvert="true"] .navigation__chevron { transform: rotate(180deg); }

/* Sous-menu déroulant. */
.sous-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 330px;
  padding: 10px;
  background: rgba(15, 22, 38, 0.96);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), var(--lueur-violet);
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.navigation__item--deroulant:hover .sous-menu,
.navigation__item--deroulant:focus-within .sous-menu,
.navigation__item--deroulant[aria-ouvert="true"] .sous-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}

.sous-menu__lien {
  display: block;
  padding: 11px 14px;
  border-radius: 12px;
  color: var(--texte);
  transition: background var(--transition);
}
.sous-menu__lien:hover, .sous-menu__lien.est-actif { background: rgba(56, 225, 255, 0.09); color: #FFFFFF; }
.sous-menu__titre { display: block; font-weight: 600; font-size: 0.95rem; }
.sous-menu__desc {
  display: block;
  font-size: 0.78rem;
  color: var(--texte-faible);
  line-height: 1.45;
  margin-top: 2px;
}

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

/* Bouton hamburger (masqué sur ordinateur). */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  cursor: pointer;
}
.burger span {
  display: block;
  height: 2px;
  background: var(--texte);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.burger.est-ouvert span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.est-ouvert span:nth-child(2) { opacity: 0; }
.burger.est-ouvert span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* =====================================================================
   07. MENU MOBILE
   ===================================================================== */
.menu-mobile {
  position: fixed;
  inset: 76px 0 0 0;
  z-index: 890;
  padding-block: 28px 60px;
  background: rgba(7, 10, 18, 0.97);
  backdrop-filter: blur(18px);
  overflow-y: auto;
  animation: apparition-douce 0.3s ease;
}
.menu-mobile__groupe {
  font-family: var(--police-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 26px 0 10px;
}
.menu-mobile__liste li + li { border-top: 1px solid var(--bordure); }
.menu-mobile__liste a {
  display: block;
  padding: 14px 2px;
  color: var(--texte);
  font-size: 1.08rem;
  font-weight: 500;
}
.menu-mobile__liste a[aria-current="page"] { color: var(--cyan); }


/* =====================================================================
   08. HERO ET CONSOLE D'ACTIVITÉ
   Le hero est la signature du site : un vrai maillage animé en <canvas>,
   comme la carte des appareils d'une maison connectée.
   ===================================================================== */
.hero {
  position: relative;
  min-height: min(94vh, 900px);
  display: flex;
  align-items: center;
  padding-block: 70px 90px;
  overflow: hidden;
}
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0.85;
}
/* Dégradé qui fond le canvas dans la page. */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 220px;
  background: linear-gradient(to bottom, transparent, var(--nuit));
  pointer-events: none;
}
.hero .conteneur { position: relative; z-index: 2; }

.hero__grille {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}

.hero__titre {
  font-size: clamp(2.4rem, 6vw, 4.35rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-bottom: 22px;
}
.hero__accroche {
  font-size: clamp(1.05rem, 1.9vw, 1.28rem);
  color: var(--texte-doux);
  max-width: 54ch;
}

/* Petite ligne de réassurance sous les boutons. */
.hero__preuves {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 34px;
  font-family: var(--police-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--texte-faible);
}
.hero__preuves li { display: flex; align-items: center; gap: 8px; }

/* --- La console : le journal d'activité d'une maison, en direct --- */
.console {
  background: rgba(10, 15, 28, 0.85);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px);
  overflow: hidden;
}
.console__entete {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--bordure);
  background: rgba(255, 255, 255, 0.025);
  font-family: var(--police-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.console__lignes {
  padding: 16px 18px 20px;
  font-family: var(--police-mono);
  font-size: 0.79rem;
  line-height: 1.9;
  min-height: 230px;
}
.console__ligne {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  color: var(--texte-doux);
  animation: ligne-entre 0.45s ease both;
}
.console__heure { color: var(--texte-faible); }
.console__ligne b { color: var(--cyan); font-weight: 500; }
.console__ligne .ok { color: var(--vert); }
.console__ligne .energie { color: var(--ambre); }

/* Voyant d'état (petit rond lumineux). */
.voyant {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--vert);
  box-shadow: 0 0 10px var(--vert);
  animation: pulsation 2s ease-in-out infinite;
  display: inline-block;
}
.voyant--ok { background: var(--vert); box-shadow: 0 0 10px var(--vert); }


/* =====================================================================
   09. CARTES, LISTES, ÉTIQUETTES
   ===================================================================== */
.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
/* Halo qui suit la souris : les variables --mx et --my sont mises à jour
   par le JavaScript (voir main.js, section "lueur au survol"). */
.carte::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%),
              rgba(56, 225, 255, 0.14), transparent 62%);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}
.carte:hover {
  transform: translateY(-6px);
  border-color: var(--bordure-vive);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 34px rgba(56, 225, 255, 0.12);
}
.carte:hover::before { opacity: 1; }

.carte__haut { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.carte__icone {
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  border-radius: 14px;
  color: var(--cyan);
  background: linear-gradient(150deg, rgba(56, 225, 255, 0.16), rgba(124, 92, 255, 0.10));
  border: 1px solid rgba(56, 225, 255, 0.22);
  box-shadow: inset 0 0 22px rgba(56, 225, 255, 0.10);
}
.carte__titre { font-size: 1.22rem; margin-bottom: 10px; }
.carte__texte { color: var(--texte-doux); font-size: 0.98rem; margin-bottom: 16px; }

/* Étiquette technique (mono, en majuscules). */
.etiquette {
  font-family: var(--police-mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-faible);
  padding: 5px 10px;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  white-space: nowrap;
}
.etiquette--vert  { color: var(--vert);  border-color: rgba(70, 227, 160, 0.32); }
.etiquette--ambre { color: var(--ambre); border-color: rgba(255, 184, 77, 0.32); }

/* Listes à coches. */
.liste-coches li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.94rem;
  color: var(--texte-doux);
  padding-block: 5px;
}
.liste-simple li {
  position: relative;
  padding-left: 20px;
  color: var(--texte-doux);
  padding-block: 4px;
}
.liste-simple li::before {
  content: "";
  position: absolute;
  left: 0; top: 14px;
  width: 7px; height: 1px;
  background: var(--cyan);
}

/* Bloc « duo » : du texte à gauche, un visuel à droite. */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.duo--inverse .duo__visuel { order: -1; }


/* =====================================================================
   10. RAIL D'ÉTAPES, CHIFFRES, PROTOCOLES
   ===================================================================== */
.rail { position: relative; padding-left: 30px; }
/* Le trait vertical, comme un rail DIN de tableau électrique. */
.rail::before {
  content: "";
  position: absolute;
  left: 15px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, var(--cyan), var(--violet), transparent);
  opacity: 0.45;
}
.rail__etape { position: relative; display: flex; gap: 26px; padding-bottom: 40px; }
.rail__marqueur {
  position: absolute;
  left: -30px; top: 2px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--nuit);
  border: 1px solid var(--bordure-vive);
  box-shadow: 0 0 18px rgba(56, 225, 255, 0.28);
  font-family: var(--police-mono);
  font-size: 0.7rem;
  color: var(--cyan);
}
.rail__contenu { padding-left: 26px; }
.rail__duree {
  font-family: var(--police-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-faible);
  margin-bottom: 6px;
}
.rail__titre { font-size: 1.18rem; margin-bottom: 8px; }
.rail__contenu p { color: var(--texte-doux); margin: 0; font-size: 0.97rem; }

/* Chiffres clés. */
.chiffres {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 34px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
}
.chiffre { text-align: center; }
.chiffre__valeur {
  display: block;
  font-family: var(--police-titre);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  background: var(--degrade);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}
.chiffre__label {
  display: block;
  margin-top: 10px;
  font-family: var(--police-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texte-faible);
}

/* Bandeau des protocoles supportés. */
.protocoles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.protocole {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--texte-doux);
  font-family: var(--police-mono);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  transition: transform var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition);
}
.protocole:hover {
  transform: translateY(-4px);
  color: #FFFFFF;
  border-color: var(--bordure-vive);
  box-shadow: var(--lueur-cyan);
}
.protocole .icone { color: var(--cyan); }


/* =====================================================================
   11. TABLEAUX COMPARATIFS
   ===================================================================== */
.tableau-enveloppe {
  overflow-x: auto;                 /* défilement horizontal sur mobile */
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  background: rgba(15, 22, 38, 0.55);
}
table.comparatif { width: 100%; border-collapse: collapse; min-width: 720px; }
table.comparatif th, table.comparatif td {
  padding: 15px 18px;
  text-align: left;
  border-bottom: 1px solid var(--bordure);
  font-size: 0.93rem;
}
table.comparatif thead th {
  font-family: var(--police-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(56, 225, 255, 0.05);
}
table.comparatif tbody tr { transition: background var(--transition); }
table.comparatif tbody tr:hover { background: rgba(56, 225, 255, 0.045); }
table.comparatif td:first-child { color: #FFFFFF; font-weight: 600; }
table.comparatif td { color: var(--texte-doux); }


/* =====================================================================
   12. TARIFS
   ===================================================================== */
.tarif { position: relative; padding: 32px; }
.tarif--vedette {
  border-color: var(--bordure-vive);
  box-shadow: 0 0 60px rgba(56, 225, 255, 0.14);
  background: linear-gradient(160deg, rgba(56, 225, 255, 0.09), rgba(124, 92, 255, 0.05));
}
.tarif__ruban {
  position: absolute;
  top: 18px; right: -34px;
  transform: rotate(38deg);
  padding: 5px 44px;
  background: var(--degrade);
  color: #05070E;
  font-family: var(--police-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}
.tarif__prix {
  font-family: var(--police-titre);
  font-size: 2.5rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1;
  margin-block: 6px 4px;
}
.tarif__prix small {
  font-family: var(--police-mono);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--texte-faible);
  letter-spacing: 0.1em;
  display: block;
  margin-top: 8px;
}


/* =====================================================================
   13. FAQ
   ===================================================================== */
.faq { max-width: 860px; }
.faq__item {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: rgba(255, 255, 255, 0.025);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color var(--transition), background var(--transition);
}
.faq__item[open] { border-color: var(--bordure-vive); background: rgba(56, 225, 255, 0.045); }
.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  cursor: pointer;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.03rem;
  color: #FFFFFF;
  list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }  /* cache la flèche par défaut */

/* Le signe + qui se transforme en − */
.faq__signe { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.faq__signe::before, .faq__signe::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--cyan);
  transform: translate(-50%, -50%);
  transition: transform var(--transition), opacity var(--transition);
}
.faq__signe::before { width: 16px; height: 2px; }
.faq__signe::after  { width: 2px; height: 16px; }
.faq__item[open] .faq__signe::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.faq__reponse { padding: 0 24px 22px; color: var(--texte-doux); animation: apparition-douce 0.3s ease; }
.faq__reponse p { margin: 0; }


/* =====================================================================
   14. FORMULAIRES ET MESSAGES
   ===================================================================== */
.formulaire {
  padding: 34px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
}
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.champ { display: flex; flex-direction: column; gap: 8px; }
.champ--large { grid-column: 1 / -1; }

.champ label {
  font-family: var(--police-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.champ label .requis { color: var(--cyan); }

.champ input, .champ select, .champ textarea {
  width: 100%;
  padding: 13px 16px;
  background: rgba(7, 10, 18, 0.7);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: 1rem;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.champ textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--cyan);
  background: rgba(7, 10, 18, 0.95);
  box-shadow: 0 0 0 3px rgba(56, 225, 255, 0.14), var(--lueur-cyan);
}
.champ input::placeholder, .champ textarea::placeholder { color: var(--texte-faible); }
.champ .aide { font-size: 0.8rem; color: var(--texte-faible); }

/* Cases à cocher personnalisées (RGPD). */
.case { display: flex; align-items: flex-start; gap: 12px; font-size: 0.9rem; color: var(--texte-doux); }
.case input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--cyan); flex-shrink: 0; }

/* Le "pot de miel" : un champ invisible que seuls les robots remplissent. */
.pot-de-miel { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Messages de retour. */
.message-alerte {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px;
  border-radius: var(--rayon);
  border: 1px solid;
  margin-bottom: 26px;
  font-size: 0.96rem;
}
.message-alerte--succes { border-color: rgba(70, 227, 160, 0.45); background: rgba(70, 227, 160, 0.08); color: #B8F5DC; }
.message-alerte--erreur { border-color: rgba(255, 107, 122, 0.45); background: rgba(255, 107, 122, 0.08); color: #FFC9CF; }
.message-alerte ul { margin-top: 8px; }
.message-alerte li { padding-left: 16px; position: relative; }
.message-alerte li::before { content: "·"; position: absolute; left: 4px; }


/* =====================================================================
   15. BLOCS ÉDITORIAUX
   ===================================================================== */
/* Fiche de réalisation (étude de cas). */
.realisation { padding: 0; overflow: hidden; }
.realisation__visuel {
  height: 180px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(400px 200px at 50% 120%, rgba(56, 225, 255, 0.22), transparent 70%),
    linear-gradient(150deg, rgba(124, 92, 255, 0.18), rgba(15, 22, 38, 0.9));
  border-bottom: 1px solid var(--bordure);
  position: relative;
}
.realisation__visuel .icone { width: 62px; height: 62px; color: var(--cyan); opacity: 0.9; }
.realisation__corps { padding: 26px 28px 30px; }
.realisation__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

/* Ligne de matériel recommandé (page affiliation). */
.materiel {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 20px 24px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: rgba(255, 255, 255, 0.022);
  margin-bottom: 12px;
  transition: border-color var(--transition), transform var(--transition), background var(--transition);
}
.materiel:hover { border-color: var(--bordure-vive); transform: translateX(5px); background: rgba(56, 225, 255, 0.04); }
.materiel__icone { display: grid; place-items: center; color: var(--cyan); }
.materiel__nom { font-family: var(--police-titre); font-weight: 600; color: #FFFFFF; margin: 0 0 4px; }
.materiel__desc { font-size: 0.9rem; color: var(--texte-doux); margin: 0; }
.materiel__prix { font-family: var(--police-mono); font-size: 0.86rem; color: var(--ambre); white-space: nowrap; }

/* Encart d'information ou d'avertissement. */
.encart {
  display: flex;
  gap: 18px;
  padding: 22px 26px;
  border-left: 3px solid var(--cyan);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  background: rgba(56, 225, 255, 0.055);
  color: var(--texte-doux);
  margin-block: 28px;
}
.encart .icone { color: var(--cyan); }
.encart h3 { font-size: 1.05rem; margin-bottom: 6px; }
.encart p:last-child { margin-bottom: 0; }
.encart--attention { border-left-color: var(--ambre); background: rgba(255, 184, 77, 0.06); }
.encart--attention .icone { color: var(--ambre); }

/* Texte long des pages légales et guides. */
.prose { max-width: 78ch; }
.prose h2 { font-size: 1.5rem; margin-top: 2em; }
.prose h3 { font-size: 1.15rem; margin-top: 1.6em; }
.prose p, .prose li { color: var(--texte-doux); }
.prose ul { margin-bottom: 1.2em; }
.prose li { position: relative; padding-left: 20px; padding-block: 3px; }
.prose li::before { content: "▸"; position: absolute; left: 0; color: var(--cyan); }

/* Fil d'Ariane. */
.fil-ariane {
  padding-top: 18px;
  font-family: var(--police-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--texte-faible);
}
.fil-ariane span[aria-hidden] { margin-inline: 8px; opacity: 0.5; }

/* En-tête de page intérieure. */
.entete-page { position: relative; padding-block: clamp(50px, 7vw, 86px) clamp(30px, 4vw, 50px); }
.entete-page__lueur {
  position: absolute;
  top: -120px; left: 50%;
  transform: translateX(-50%);
  width: 780px; height: 420px;
  background: radial-gradient(circle, rgba(56, 225, 255, 0.16), transparent 65%);
  filter: blur(40px);
  pointer-events: none;
}


/* =====================================================================
   16. APPEL À L'ACTION
   ===================================================================== */
.appel-action__boite {
  position: relative;
  padding: clamp(36px, 5vw, 62px);
  border: 1px solid var(--bordure-vive);
  border-radius: 28px;
  background:
    radial-gradient(600px 300px at 15% 0%, rgba(56, 225, 255, 0.16), transparent 70%),
    radial-gradient(600px 300px at 85% 100%, rgba(124, 92, 255, 0.20), transparent 70%),
    rgba(10, 15, 28, 0.9);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  text-align: center;
}
.appel-action__grille {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(150, 190, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150, 190, 255, 0.06) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 72%);
  mask-image: radial-gradient(circle at 50% 50%, #000, transparent 72%);
}
.appel-action__texte { position: relative; z-index: 1; }
.appel-action__texte h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.appel-action__texte p { color: var(--texte-doux); max-width: 58ch; margin-inline: auto; }
.appel-action .rangee-boutons { position: relative; z-index: 1; justify-content: center; }


/* =====================================================================
   17. PIED DE PAGE
   ===================================================================== */
.pied {
  position: relative;
  margin-top: 40px;
  padding-block: 66px 30px;
  border-top: 1px solid var(--bordure);
  background: linear-gradient(to bottom, rgba(10, 15, 28, 0.4), var(--nuit));
  overflow: hidden;
}
.pied__halo {
  position: absolute;
  top: -160px; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 320px;
  background: radial-gradient(circle, rgba(124, 92, 255, 0.16), transparent 65%);
  filter: blur(50px);
}
.pied .conteneur { position: relative; }
.pied__grille { display: grid; grid-template-columns: 1.9fr 1fr 1fr 1fr 1fr; gap: 38px; }
.pied__accroche { color: var(--texte-doux); font-size: 0.94rem; margin-top: 20px; max-width: 42ch; }
.pied__contact { margin-top: 20px; display: grid; gap: 10px; font-size: 0.9rem; color: var(--texte-doux); }
.pied__contact li { display: flex; align-items: center; gap: 10px; }
.pied__contact a { color: var(--texte-doux); }
.pied__contact a:hover { color: var(--cyan); }

.pied__titre {
  font-family: var(--police-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 16px;
}
.pied__colonne li { margin-bottom: 9px; }
.pied__colonne a { color: var(--texte-doux); font-size: 0.93rem; }
.pied__colonne a:hover { color: #FFFFFF; }

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid var(--bordure);
  font-size: 0.84rem;
  color: var(--texte-faible);
}
.pied__bas p { margin: 0; }
.pied__mono { font-family: var(--police-mono); font-size: 0.75rem; display: flex; align-items: center; gap: 10px; }


/* =====================================================================
   18. ÉLÉMENTS FLOTTANTS
   ===================================================================== */
.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--cyan);
  color: #05070E;
  font-weight: 600;
  border-radius: 0 0 10px 0;
}
.lien-evitement:focus { left: 0; }

.barre-progression {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  z-index: 1000;
  background: var(--degrade);
  box-shadow: 0 0 12px var(--cyan);
  transition: width 0.1s linear;
}

.retour-haut {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 800;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--bordure);
  border-radius: 50%;
  background: rgba(15, 22, 38, 0.9);
  color: var(--cyan);
  backdrop-filter: blur(10px);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--transition), transform var(--transition),
              visibility var(--transition), box-shadow var(--transition);
}
.retour-haut svg { width: 20px; height: 20px; }
.retour-haut.est-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.retour-haut:hover { box-shadow: var(--lueur-cyan); border-color: var(--bordure-vive); }


/* =====================================================================
   19. ANIMATIONS AU SCROLL ET KEYFRAMES
   Les éléments marqués data-anim sont invisibles au départ ; le
   JavaScript leur ajoute la classe .est-visible quand ils entrent
   dans l'écran (voir main.js).
   ===================================================================== */
[data-anim] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-anim="gauche"]  { transform: translateX(-32px); }
[data-anim="droite"]  { transform: translateX(32px); }
[data-anim="zoom"]    { transform: scale(0.94); }
[data-anim].est-visible { opacity: 1; transform: none; }

/* Décalage en cascade pour les grilles de cartes. */
.grille > [data-anim]:nth-child(2) { transition-delay: 0.09s; }
.grille > [data-anim]:nth-child(3) { transition-delay: 0.18s; }
.grille > [data-anim]:nth-child(4) { transition-delay: 0.27s; }
.grille > [data-anim]:nth-child(5) { transition-delay: 0.36s; }
.grille > [data-anim]:nth-child(6) { transition-delay: 0.45s; }

@keyframes respiration {
  0%   { transform: scale(1)    translateY(0); }
  100% { transform: scale(1.09) translateY(-22px); }
}
@keyframes pulsation {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.82); }
}
@keyframes apparition-douce {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ligne-entre {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}


/* =====================================================================
   20. RESPONSIVE
   On part du design ordinateur et on adapte vers le bas.
   ===================================================================== */
@media (max-width: 1080px) {
  .grille--4 { grid-template-columns: repeat(2, 1fr); }
  .pied__grille { grid-template-columns: 1fr 1fr 1fr; }
  .pied__marque { grid-column: 1 / -1; }
}

@media (max-width: 940px) {
  .navigation, .entete__actions .bouton { display: none; }  /* menu remplacé par le burger */
  .burger { display: flex; }
  .hero__grille { grid-template-columns: 1fr; gap: 44px; }
  .duo { grid-template-columns: 1fr; gap: 34px; }
  .duo--inverse .duo__visuel { order: 0; }
  .grille--3 { grid-template-columns: repeat(2, 1fr); }
  .chiffres { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .conteneur { padding-inline: 18px; }
  .grille--2, .grille--3, .grille--4 { grid-template-columns: 1fr; }
  .champs { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding-block: 40px 60px; }
  .carte, .formulaire { padding: 22px; }
  .materiel { grid-template-columns: 40px 1fr; }
  .materiel__prix { grid-column: 2; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
  .rangee-boutons .bouton { flex: 1 1 100%; justify-content: center; }
  .retour-haut { right: 14px; bottom: 14px; }
}


/* =====================================================================
   21. ACCESSIBILITÉ
   ===================================================================== */

/* Contour visible pour la navigation au clavier (touche Tab). */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Si le visiteur a demandé à son système de limiter les animations
   (réglage d'accessibilité), on les désactive toutes. C'est important
   pour les personnes sujettes au mal des transports ou à l'épilepsie. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-anim] { opacity: 1; transform: none; }
}

/* Version imprimable simple et lisible. */
@media print {
  body { background: #FFFFFF; color: #000000; }
  body::before, body::after,
  .entete, .pied, .retour-haut, .barre-progression, .hero__canvas { display: none !important; }
  .carte, .formulaire { border: 1px solid #CCCCCC; }
  a { color: #000000; text-decoration: underline; }
}


/* =====================================================================
   22) BLOCS DES PAGES LOCALES  (Vichy / Clermont-Ferrand)
   ---------------------------------------------------------------------
   Ajoutés pour les pages de référencement géographique.
   ===================================================================== */

/* Liste des communes desservies : des "pastilles" souples qui se
   réorganisent toutes seules selon la largeur de l'écran. */
.liste-communes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
}

.liste-communes li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  background: var(--ardoise);
  color: var(--texte-doux);
  font-size: 0.9rem;
  transition: border-color 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s;
}

/* Micro-interaction : la pastille s'illumine au survol. */
.liste-communes li:hover {
  border-color: color-mix(in srgb, var(--cyan) 55%, transparent);
  color: var(--texte);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -8px var(--cyan);
}

/* La petite icône "point de localisation" devant chaque commune. */
.icone--puce {
  width: 14px;
  height: 14px;
  color: var(--cyan);
  flex-shrink: 0;
}

/* Phrase de renvoi vers l'autre page locale (maillage interne). */
.note-liens {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--bordure);
  color: var(--texte-doux);
  font-size: 0.95rem;
  text-align: center;
}

.note-liens a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent);
  transition: border-color 0.25s;
}

.note-liens a:hover { border-bottom-color: var(--cyan); }

/* État "alerte" dans la console (rouge), pendant de .ok qui est vert. */
.console__ligne .alerte { color: var(--rouge); }

/* Bloc coordonnées du pied de page : le fameux "NAP" du référencement
   local (Nom, Adresse, Téléphone). Il doit être visible sur TOUTES
   les pages, c'est un signal fort pour Google. */
.footer__nap {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--ardoise);
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--texte-doux);
}

.footer__nap strong { color: var(--texte); }

/* Sur mobile, les pastilles de communes restent lisibles. */
@media (max-width: 700px) {
  .liste-communes li { font-size: 0.84rem; padding: 8px 13px; }
}

/* Ligne géographique intégrée au grand titre de la page d'accueil.
   Volontairement discrète à l'oeil, mais bien présente pour Google. */
.hero__titre-lieu {
  display: block;
  margin-top: 18px;
  font-family: var(--police-mono);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-faible);
}

/* Ligne secondaire sous l'adresse, page contact. */
.note-adresse {
  display: block;
  margin-top: 4px;
  font-size: 0.85rem;
  color: var(--texte-faible);
}