/* ═══════════════════════════════════════════════════════════════════
   LE SITE WEB DE VIGIE — dans le dessin du site de référence que le
   directeur a montré (20/10/2026 : « c'est ce design que je veux »),
   avec les couleurs et les polices de Vigie.

   CE QUI VIENT DE LA RÉFÉRENCE : l'en-tête sombre plein écran, le menu
   en pilule au centre, les grands titres, le radar annoté, l'entonnoir,
   les tarifs en éventail, les questions numérotées, le pied sombre au
   nom géant.

   CE QUI VIENT DE VIGIE : le vert #88c73b, le noir, Nexa Pro pour les
   titres, Inter pour le reste, et les icônes du logiciel.

   REVU LE 20/10/2026 avec le directeur : fonds noirs et blanc cassé, mots
   en vert sans cadre, plus d'étiquettes « (01) », les écrans en onglets,
   « avant, après » en deux matinées ; le panneau à points, la glissière,
   la bande des chiffres et son bandeau retirés.

   Le site se lit sans script ; site.js ne fait qu'animer (compteurs,
   entonnoir, textes qui apparaissent).
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Nexa Pro";
  src: url("polices/NexaPro-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("polices/Inter-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --vert: #88c73b;
  --vert-clair: #b4e07a;
  --vert-texte: #457a18;
  --encre: #090909;
  /* NOIR, PLUS VERT SOMBRE (directeur, 20/10/2026 : « les fonds vert
     sombre des arrière-plans, en noir »). */
  --nuit: #0a0a0a;
  --nuit-2: #141414;
  --nuit-3: #1c1c1c;
  --sur-nuit: #eef3e8;
  --gris-nuit: rgba(238, 243, 232, .64);
  /* UN BLANC CASSÉ, NEUTRE, pour les fonds clairs (directeur, 20/10/2026 :
     « la couleur blanche, pas totalement blanche, comme la plupart des
     sites ») ; les cartes, elles, sont blanches. */
  --creme: #f7f7f5;
  --creme-2: #f1f1ee;
  --gris-texte: rgba(9, 9, 9, .64);
  --trait: rgba(9, 9, 9, .1);
  --trait-nuit: rgba(238, 243, 232, .12);
  --rayon: 10px;
  --rayon-grand: 28px;
  --marge: clamp(20px, 4vw, 56px);
  --largeur: 1320px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--creme); color: var(--encre);
  font: 400 17px/1.55 "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3, .prix, .grand-nombre {
  font-family: "Nexa Pro", "Inter", sans-serif; font-weight: 800;
  letter-spacing: -.025em; line-height: 1; margin: 0;
}
/* Réduits le 20/10/2026 (directeur : « réduis les grands titres, c'est
   trop gros ») : un bon tiers de moins. */
h1 { font-size: clamp(40px, 6vw, 88px); }
h2 { font-size: clamp(32px, 4.2vw, 60px); }
h3 { font-size: 22px; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
a { color: inherit; }
img { max-width: 100%; display: block; }
.contenu { max-width: var(--largeur); margin: 0 auto; padding-inline: var(--marge); }
:focus-visible { outline: 3px solid var(--vert); outline-offset: 3px; border-radius: 6px; }

/* LES MOTS EN VERT, sans cadre (directeur, 20/10/2026 : « enlève les
   contours, mets le texte en vert »). Sur le clair, le vert d'écriture,
   plus foncé, pour se lire ; sur le noir, le vert de la marque. */
mark { background: none; color: var(--vert-texte); padding: 0; }
.nuit mark, .heros mark, .appel-final mark, .pied mark { color: var(--vert); }

/* L'ÉTIQUETTE « (01) … » au-dessus des titres. */

/* ── les boutons ─────────────────────────────────────────────────── */
.bouton {
  display: inline-flex; align-items: center; gap: 14px; min-height: 52px;
  padding: 6px 6px 6px 22px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--encre); color: #fff; font: 600 15px/1 "Inter", sans-serif;
  text-decoration: none; white-space: nowrap; transition: transform .2s;
}
.bouton:hover { transform: translateY(-1px); }
.bouton .rond {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px;
  background: var(--vert); color: var(--encre); flex: none;
}
.bouton .rond svg { width: 18px; height: 18px; }
.bouton.vert { background: var(--vert); color: var(--encre); }
.bouton.vert .rond { background: var(--encre); color: var(--vert); }
.bouton.verre { background: rgba(238, 243, 232, .12); color: var(--sur-nuit); backdrop-filter: blur(8px); }
.bouton.verre .rond { background: rgba(238, 243, 232, .18); color: var(--sur-nuit); }

/* ── le menu ─────────────────────────────────────────────────────── */
.menu {
  position: absolute; z-index: 20; top: 0; left: 0; right: 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
  max-width: var(--largeur); margin: 0 auto; padding: 22px var(--marge);
}
.menu .marque { display: inline-flex; align-items: center; justify-self: start; }
.menu .marque img { height: 34px; width: auto; }
.menu .liens {
  display: flex; gap: 4px; padding: 6px; border-radius: 999px;
  background: rgba(238, 243, 232, .1); backdrop-filter: blur(10px);
  border: 1px solid var(--trait-nuit);
}
.menu .liens a {
  padding: 9px 18px; border-radius: 999px; color: var(--sur-nuit); text-decoration: none;
  font: 500 14px/1 "Inter", sans-serif;
}
.menu .liens a:hover { background: rgba(238, 243, 232, .1); }
.menu .liens a[aria-current="page"] { background: var(--vert); color: var(--encre); }
.menu .droite { justify-self: end; display: flex; align-items: center; gap: 10px; }
.menu .bouton { min-height: 46px; }
/* LE CHANGEMENT DE LANGUE : un simple cercle, le drapeau de la langue
   d'arrivée dedans, APRÈS le bouton (directeur, 20/10/2026). Son nom est
   dit aux lecteurs d'écran (aria-label). */
.menu .langue {
  display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 50%;
  overflow: hidden; border: 2px solid var(--trait-nuit); flex: none;
}
.menu .langue img { width: 100%; height: 100%; object-fit: cover; }
.menu .langue:hover { border-color: var(--vert); }
.menu .bouton .rond { width: 34px; height: 34px; }

/* ── l'en-tête sombre ────────────────────────────────────────────── */
.nuit { background: var(--nuit); color: var(--sur-nuit); }
.heros {
  position: relative; overflow: hidden; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center; padding: 130px 0 0;
  background: var(--nuit);
  color: var(--sur-nuit);
}
/* LES EN-TÊTES, CENTRÉS ; LE RADAR, DERRIÈRE ET TRÈS DISCRET (directeur,
   20/10/2026 : « centrer les éléments, et diminuer considérablement
   l'opacité des radars en arrière-plan »). */
.heros .fond-radar {
  position: absolute; left: 50%; top: 50%; width: min(1100px, 110vw); height: auto;
  transform: translate(-50%, -50%); pointer-events: none; opacity: .18;
}
.heros .contenu { position: relative; z-index: 2; width: 100%; text-align: center; }
.heros h1 { max-width: 11.5ch; margin-inline: auto; }
.heros.accueil h1 { max-width: 15ch; }
.heros .chapeau { font-size: clamp(17px, 1.5vw, 20px); color: var(--gris-nuit); max-width: 560px; margin: 30px auto 34px; }
.heros .boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* L'en-tête des pages intérieures : plus court, même nuit. */
.heros.court { min-height: 0; padding: 170px 0 100px; }
.heros.court h1 { max-width: 16ch; font-size: clamp(38px, 5.4vw, 80px); }
.heros.court .fond-radar { width: min(820px, 96vw); opacity: .16; }

/* ── les sections ────────────────────────────────────────────────── */
.section { padding: clamp(80px, 10vw, 140px) 0; }
.tete-section { display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: 40px; align-items: end; margin-bottom: 56px; }
.tete-section p { color: var(--gris-texte); font-size: 17px; margin: 0 0 18px; }
.nuit .tete-section p { color: var(--gris-nuit); }

/* (01) Le radar annoté */
.deux-radar { display: grid; grid-template-columns: 1fr 1.05fr; gap: 50px; align-items: center; }
.deux-radar .texte p { font-size: 18px; color: var(--gris-texte); max-width: 470px; margin-top: 26px; }
.radar-clair { width: 100%; height: auto; }
.radar-clair .disque { fill: #fff; stroke: var(--trait); }
.radar-clair .anneau { fill: none; stroke: rgba(9, 9, 9, .12); }
.radar-clair .croix { stroke: rgba(9, 9, 9, .08); }
.radar-clair .graduation { fill: rgba(9, 9, 9, .45); font: 500 6px "Inter", sans-serif; letter-spacing: .08em; }
.radar-clair .cercle-nom { fill: rgba(9, 9, 9, .45); font: 600 5px "Inter", sans-serif; letter-spacing: .14em; }
.radar-clair .point { fill: var(--encre); }
.radar-clair .point.fort { fill: var(--vert); stroke: var(--encre); stroke-width: .8; }
.radar-clair .nom { fill: var(--encre); font: 600 6.4px "Inter", sans-serif; }
.radar-clair .nom.leger { fill: rgba(9, 9, 9, .55); font-weight: 500; }
.radar-clair .etiq-note { fill: var(--vert); }
.radar-clair .etiq-texte { fill: var(--encre); font: 700 5.4px "Inter", sans-serif; }
.radar-clair .balai { transform-origin: 160px 160px; animation: tour 7s linear infinite; }
@keyframes tour { to { transform: rotate(360deg); } }

/* Le panneau sombre aux points : « 1 signal sur 40 » */

@keyframes ouvrir { from { opacity: 0; transform: translateX(14px); } }

/* (03) Avant / avec Vigie : la glissière */

/* (04) L'entonnoir */
.entonnoir-deux { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 60px; align-items: center; }
.entonnoir-deux .texte > p { color: var(--gris-texte); font-size: 17px; max-width: 440px; margin-top: 24px; }
.pas-liste { list-style: none; padding: 0; margin: 36px 0 0; border-top: 1px solid var(--trait); }
.pas-liste li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--trait); transition: opacity .4s; }
.anime .pas-liste li { opacity: .38; }
.anime .pas-liste li.allume { opacity: 1; }
.pas-liste .num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: var(--vert); font: 600 12px "Inter", sans-serif; }
.anime .pas-liste li .num { background: var(--creme-2); }
.anime .pas-liste li.allume .num { background: var(--vert); }
.pas-liste h3 { font-size: 22px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pas-liste h3 small { font: 600 11px "Inter", sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; background: var(--creme-2); color: var(--gris-texte); }
.pas-liste p { margin: 6px 0 0; color: var(--gris-texte); font-size: 15px; }
.entonnoir { display: grid; gap: 10px; justify-items: center; }
.etage {
  position: relative; width: var(--l); height: 108px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--vert-clair); clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 26px 100%);
  transition: background .5s;
}
.etage:last-child { background: var(--vert); }
.anime .etage { background: var(--creme-2); }
.anime .etage.allume { background: var(--vert-clair); }
.anime .etage:last-child.allume { background: var(--vert); }
.etage .nom-etage { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border-radius: 999px; background: #fff; font: 600 11px "Inter", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.etage .nom-etage i { font-style: normal; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 999px; background: var(--encre); color: var(--vert); font-size: 9px; }
.etage b { font: 800 40px/1.1 "Nexa Pro", sans-serif; font-variant-numeric: tabular-nums; margin-top: 4px; }
.legende-entonnoir { margin-top: 16px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-texte); text-align: center; }

/* (05) La bande verte des chiffres */

/* ── les pages intérieures ───────────────────────────────────────── */
.ecrans { display: grid; gap: clamp(60px, 8vw, 110px); }
.ecran { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
.ecran.inverse { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.ecran.inverse .visuel { order: -1; }
.ecran .num-ecran { font: 600 13px "Inter", sans-serif; color: var(--gris-texte); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.ecran h2 { font-size: clamp(30px, 3.2vw, 46px); margin-bottom: 22px; }
.ecran p { font-size: 18px; color: var(--gris-texte); max-width: 470px; }
.ecran ul { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.ecran li { display: flex; gap: 10px; align-items: center; }
.ecran li::before { content: "✓"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: var(--vert); color: var(--encre); font-size: 12px; font-weight: 700; flex: none; }
.visuel { position: relative; padding: clamp(20px, 3vw, 40px); border-radius: var(--rayon-grand); background: var(--nuit); overflow: hidden; }
.visuel img { position: relative; border-radius: 14px; box-shadow: 0 30px 60px rgba(0, 0, 0, .4); }
.visuel .duo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 20px; align-items: end; }
.visuel .duo img:last-child { border-radius: 22px; }

/* Les tarifs, en éventail sur la nuit */
.eventail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; padding-top: 30px; }
.tarif {
  position: relative; display: flex; flex-direction: column; padding: 30px; border-radius: 24px;
  background: var(--nuit-2); border: 1px solid var(--trait-nuit); color: var(--sur-nuit); min-height: 540px;
}
.tarif:nth-child(1) { transform: rotate(-3deg) translateX(18px); }
.tarif:nth-child(3) { transform: rotate(3deg) translateX(-18px); }
.tarif.mis { z-index: 2; background: linear-gradient(180deg, #1f1f1f, var(--nuit-2)); border: 2px solid var(--vert); min-height: 590px; box-shadow: 0 0 80px rgba(136, 199, 59, .18); }
.tarif .haut-tarif { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--gris-nuit); font-variant-numeric: tabular-nums; }
.tarif .favori { padding: 5px 10px; border-radius: 999px; background: var(--sur-nuit); color: var(--encre); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tarif h3 { font-size: 32px; margin: 22px 0 6px; }
.tarif .pour { color: var(--gris-nuit); font-size: 15px; margin: 0; }
.prix { display: block; font-size: clamp(42px, 4vw, 56px); margin: 28px 0 4px; }
.prix-unite { color: var(--gris-nuit); font-size: 14px; }
.tarif ul { list-style: none; padding: 22px 0 0; margin: 22px 0 28px; border-top: 1px solid var(--trait-nuit); display: grid; gap: 12px; flex: 1; font-size: 15px; align-content: start; }
.tarif li { display: flex; gap: 10px; }
.tarif li::before { content: "✓"; color: var(--vert); font-weight: 700; }
.tarif .bouton { justify-content: space-between; width: 100%; }
.tarif:not(.mis) .bouton { background: rgba(238, 243, 232, .1); color: var(--sur-nuit); }
.tarif:not(.mis) .bouton .rond { background: rgba(238, 243, 232, .14); color: var(--sur-nuit); }
.note-tarifs { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 46px; font-size: 13px; color: var(--gris-nuit); }
.note-tarifs > span::before { content: "● "; color: var(--vert); }

/* Les questions : une carte sombre à gauche, la liste numérotée à droite */
.questions-deux { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 50px; align-items: start; }
.carte-appel { position: sticky; top: 30px; padding: 32px; border-radius: 24px; background: var(--nuit); color: var(--sur-nuit); }
.carte-appel h3 { font-size: 34px; margin-bottom: 14px; line-height: 1.05; }
.carte-appel p { color: var(--gris-nuit); font-size: 15px; }
.carte-appel .ecrire { margin-top: 18px; font-size: 14px; color: var(--gris-nuit); }
.carte-appel .ecrire a { color: var(--sur-nuit); font-weight: 600; text-decoration-color: var(--vert); text-underline-offset: 3px; }
.carte-appel .delai { margin-top: 10px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-nuit); }
.carte-appel .delai::before { content: "● "; color: var(--vert); }
.liste-questions details { border-bottom: 1px solid var(--trait); }
.liste-questions summary {
  display: grid; grid-template-columns: 40px 1fr auto 40px; gap: 14px; align-items: center;
  padding: 22px 0; cursor: pointer; list-style: none;
}
.liste-questions summary::-webkit-details-marker { display: none; }
.liste-questions .num-q { font-size: 12px; color: var(--gris-texte); font-variant-numeric: tabular-nums; }
.liste-questions .q { font: 800 clamp(19px, 1.8vw, 24px)/1.25 "Nexa Pro", sans-serif; letter-spacing: -.01em; }
.liste-questions .categorie { padding: 4px 9px; border-radius: 6px; background: var(--creme-2); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-texte); }
.liste-questions .ouvre { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--trait); font-size: 18px; transition: transform .3s, background .3s; }
.liste-questions details[open] .ouvre { transform: rotate(45deg); background: var(--vert); border-color: var(--vert); }
.liste-questions .reponse { padding: 0 54px 24px; color: var(--gris-texte); max-width: 680px; margin: 0; }

/* Le contact */
.contact-deux { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 50px; align-items: start; }
.coordonnees h2 { font-size: clamp(36px, 4vw, 56px); margin-bottom: 26px; }
.coordonnees .ligne-coord { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--trait); font-size: 16px; }
.coordonnees .ligne-coord span { color: var(--gris-texte); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; padding-top: 2px; }
.coordonnees a { font-weight: 600; text-decoration-color: var(--vert); text-underline-offset: 3px; }
.formulaire { padding: clamp(24px, 3vw, 40px); border-radius: 24px; background: var(--nuit); color: var(--sur-nuit); }
.formulaire h3 { font-size: 30px; margin-bottom: 8px; }
.formulaire > p { color: var(--gris-nuit); }
.contact { display: grid; gap: 16px; margin-top: 24px; }
.contact .rangee { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact label { display: block; font-size: 13px; color: var(--gris-nuit); margin-bottom: 8px; }
.contact input, .contact textarea {
  width: 100%; min-height: 52px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--trait-nuit);
  background: rgba(238, 243, 232, .06); color: var(--sur-nuit); font: inherit;
}
.contact textarea { min-height: 130px; resize: vertical; }
.contact input:focus, .contact textarea:focus { outline: 0; border-color: var(--vert); background: rgba(238, 243, 232, .1); }
.contact ::placeholder { color: rgba(238, 243, 232, .42); }
.contact .bouton { justify-self: start; }
.contact .aide { font-size: 13px; color: var(--gris-nuit); margin: 0; }

/* ── l'appel final et le pied ────────────────────────────────────── */
.appel-final { position: relative; overflow: hidden; text-align: center; padding: clamp(110px, 13vw, 180px) 0 clamp(90px, 10vw, 140px); }
.appel-final .anneaux { position: absolute; left: 50%; top: 50%; width: min(1400px, 150vw); transform: translate(-50%, -50%); pointer-events: none; }
.appel-final .anneaux circle { fill: none; stroke: rgba(136, 199, 59, .22); }
.appel-final .contenu { position: relative; }
.appel-final h2 { font-size: clamp(44px, 6.6vw, 100px); margin: 0 auto 26px; }
.appel-final p { color: var(--gris-nuit); max-width: 520px; margin: 0 auto 34px; font-size: 18px; }
.appel-final .boutons { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
.pied { position: relative; overflow: hidden; background: var(--nuit); color: var(--sur-nuit); border-top: 1px solid var(--trait-nuit); padding-top: 60px; }
.pied .colonnes { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 30px; }
.pied .marque img { height: 36px; width: auto; margin-bottom: 18px; }
.pied p { color: var(--gris-nuit); font-size: 15px; max-width: 320px; }
.pied h4 { margin: 0 0 16px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-nuit); font-weight: 600; }
.pied .colonnes a { display: block; margin-bottom: 10px; text-decoration: none; font-size: 15px; }
.pied .colonnes a:hover { color: var(--vert); }
.pied .disponible { display: inline-flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 13px; color: var(--gris-nuit); }
.pied .disponible::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--vert); }
.nom-geant {
  display: block; margin: 50px 0 -0.16em; text-align: center; white-space: nowrap;
  font: 800 clamp(100px, 20vw, 320px)/.8 "Nexa Pro", sans-serif; letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(238, 243, 232, .2);
  background: linear-gradient(180deg, rgba(238, 243, 232, .14), rgba(238, 243, 232, 0) 80%);
  -webkit-background-clip: text; background-clip: text;
}
.pied .ligne-basse {
  position: relative; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 18px 0 26px; border-top: 1px solid var(--trait-nuit);
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-nuit);
}
.pied .ligne-basse a { text-decoration: none; margin-left: 18px; }

/* ── le radar de l'en-tête ───────────────────────────────────────── */
.fond-radar .anneau { fill: none; stroke: rgba(136, 199, 59, .2); }
.fond-radar .croix { stroke: rgba(136, 199, 59, .12); }
.fond-radar .balai { transform-origin: 300px 300px; animation: tour 8s linear infinite; }
.fond-radar .echo circle { fill: var(--vert); }
.fond-radar .echo text { fill: var(--sur-nuit); font: 600 11px "Inter", sans-serif; }
.fond-radar .echo { opacity: .25; animation: echo 8s linear infinite; }
.fond-radar .echo .halo { fill: none; stroke: var(--vert); stroke-width: 1.5; opacity: .6; }
@keyframes echo { 0%, 6% { opacity: 1; } 55%, 100% { opacity: .25; } }

/* ── le mouvement, pour qui n'en veut pas ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ic > i, .radar-clair .echo-clair, .radar-clair .halo-clair { animation: none !important; }
  .js-revele .a-reveler { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .fond-radar .echo { opacity: 1; }
  html { scroll-behavior: auto; }
}

/* ── le téléphone ────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .menu { grid-template-columns: 1fr auto; }
  .menu .liens { grid-column: 1 / -1; order: 3; justify-self: stretch; overflow-x: auto; }
  .menu .liens a { white-space: nowrap; }
  .heros { padding-top: 170px; }
  .heros .fond-radar { width: 150vw; opacity: .14; }
  .tete-section, .deux-radar, .entonnoir-deux, .ecran, .ecran.inverse, .questions-deux, .contact-deux { grid-template-columns: minmax(0, 1fr); }
  .ecran.inverse .visuel { order: 0; }
  .heros .fond-radar .echo text { display: none; }
  .eventail { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .tarif, .tarif.mis { transform: none !important; min-height: 0; }
  .carte-appel { position: static; }
  .pied .colonnes { grid-template-columns: 1fr 1fr; }
  .visuel .duo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .menu .bouton .texte-bouton { display: none; }
  .menu .langue { width: 40px; height: 40px; }
  .menu .bouton { padding-left: 6px; }
  .liste-questions summary { grid-template-columns: 30px 1fr 34px; }
  .liste-questions .categorie { display: none; }
  .liste-questions .reponse { padding: 0 0 22px 44px; }
  .contact .rangee { grid-template-columns: minmax(0, 1fr); }
  .pied .colonnes { grid-template-columns: minmax(0, 1fr); }
  .menu .liens a { padding: 8px 11px; font-size: 13px; }
}

/* ── À propos de Deilex ──────────────────────────────────────────── */
.section.creme-2 { background: var(--creme-2); }
.deux-apropos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: start; }
.texte-apropos p { color: var(--gris-texte); font-size: 17px; max-width: 560px; }
.texte-apropos .grand { color: var(--encre); font: 800 clamp(24px, 2.4vw, 32px)/1.2 "Nexa Pro", sans-serif; letter-spacing: -.01em; margin-bottom: 22px; }
.texte-apropos .signature-deilex { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--trait); font-size: 14px; color: var(--encre); font-weight: 600; }
.sous-titre-apropos { color: var(--gris-texte); font-size: 17px; max-width: 460px; margin-top: 24px; }
.piliers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pilier { padding: 28px; border-radius: 22px; background: var(--nuit-2); border: 1px solid var(--trait-nuit); display: flex; flex-direction: column; min-height: 320px; }
.pilier:nth-child(2) { background: var(--vert); color: var(--encre); border-color: var(--vert); }
.pilier .num-pilier { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: rgba(238, 243, 232, .1); font: 700 14px "Inter", sans-serif; margin-bottom: auto; }
.pilier:nth-child(2) .num-pilier { background: var(--encre); color: var(--vert); }
.pilier h3 { font-size: 26px; line-height: 1.05; margin: 40px 0 14px; }
.pilier p { margin: 0; color: var(--gris-nuit); font-size: 15px; }
.pilier:nth-child(2) p { color: rgba(9, 9, 9, .78); }
.publics { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.publics li { display: flex; align-items: center; gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--trait); font: 800 clamp(24px, 2.6vw, 36px)/1.1 "Nexa Pro", sans-serif; letter-spacing: -.015em; }
.publics li:first-child { color: var(--vert-texte); }
.publics .rang { font: 600 13px "Inter", sans-serif; color: var(--gris-texte); letter-spacing: 0; min-width: 26px; }
.zones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.zone { padding: 26px; border-radius: 22px; background: #fff; border: 1px solid var(--trait); }
.zone b { display: block; font: 800 clamp(36px, 3.4vw, 48px)/1 "Nexa Pro", sans-serif; letter-spacing: -.02em; margin-bottom: 14px; }
.zone span { color: var(--gris-texte); font-size: 14px; }
.naissance { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: start; }
.naissance p { color: var(--gris-texte); font-size: 17px; max-width: 540px; }
.naissance .bouton { margin-top: 10px; }
.coordonnees-deilex { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(50px, 6vw, 80px); border-radius: 22px; overflow: hidden; background: var(--nuit); color: var(--sur-nuit); }
.coordonnees-deilex > div { padding: 24px 26px; border-right: 1px solid var(--trait-nuit); }
.coordonnees-deilex > div:last-child { border-right: 0; }
.coordonnees-deilex span { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-nuit); margin-bottom: 10px; }
.coordonnees-deilex b, .coordonnees-deilex a { font-size: 16px; font-weight: 600; color: var(--sur-nuit); text-decoration-color: var(--vert); text-underline-offset: 3px; }
@media (max-width: 980px) {
  .deux-apropos, .naissance { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .piliers, .zones, .coordonnees-deilex { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coordonnees-deilex > div:nth-child(2) { border-right: 0; }
  .coordonnees-deilex > div:nth-child(-n+2) { border-bottom: 1px solid var(--trait-nuit); }
  .pilier { min-height: 0; }
}
@media (max-width: 560px) {
  .piliers, .zones, .coordonnees-deilex { grid-template-columns: minmax(0, 1fr); }
  .coordonnees-deilex > div { border-right: 0; border-bottom: 1px solid var(--trait-nuit); }
  .menu .liens a { padding: 8px; font-size: 12px; }
}

/* TÉLÉCHARGER (20/10/2026) : la carte sombre du téléchargement. */
.carte-telecharger .boutons { margin-top: 24px; }
.carte-telecharger .ecrire { margin-top: 22px; }

/* LES ICÔNES DU LOGICIEL (directeur, 20/10/2026 : « le site doit utiliser
   les mêmes icônes que le logiciel ») : les deux calques de
   static/icones-vigie, vert et encre, posés en masque — comme dans
   Vigie. Sur le vert, le détail passe à l'encre et le vert au blanc. */
.ic { position: relative; display: inline-block; width: 20px; height: 20px; flex: none; }
.ic i { position: absolute; inset: 0; -webkit-mask: var(--p) center / contain no-repeat; mask: var(--p) center / contain no-repeat; }
.ic .v { background: var(--vert); }
.ic .e { background: currentColor; }
.bouton .rond .ic { width: 20px; height: 20px; }
.bouton .rond .ic .v { background: #fff; }
.bouton .rond .ic .e { background: var(--encre); }
.bouton.vert .rond .ic .v, .tarif:not(.mis) .bouton .rond .ic .v { background: var(--vert); }
.bouton.vert .rond .ic .e, .tarif:not(.mis) .bouton .rond .ic .e { background: var(--sur-nuit); }
.bouton.verre .rond .ic .v { background: var(--vert); }
.bouton.verre .rond .ic .e { background: var(--sur-nuit); }

/* « TOUT AU MÊME ENDROIT » (choix « A » du directeur, 20/10/2026) : les onglets
   aux icônes du logiciel, et l'écran choisi en grand, sur fond noir. */
.onglets-ecrans { background: var(--nuit); color: var(--sur-nuit); border-radius: var(--rayon-grand); padding: clamp(18px, 2.4vw, 30px); }
.onglets-ecrans > input { position: absolute; opacity: 0; pointer-events: none; }
.barre-onglets { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.barre-onglets label { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; cursor: pointer;
  background: rgba(238, 243, 232, .07); border: 1px solid var(--trait-nuit); font: 600 15px/1 "Inter", sans-serif; white-space: nowrap; }
.barre-onglets label:hover { border-color: var(--vert); }
.barre-onglets .ic .e { background: var(--sur-nuit); }
.panneau-onglet { display: none; grid-template-columns: minmax(0, .75fr) minmax(0, 1.5fr); gap: clamp(24px, 3vw, 44px); align-items: center; margin-top: clamp(22px, 3vw, 34px); }
.num-onglet { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: var(--vert); color: var(--encre); font: 700 13px "Inter", sans-serif; }
.texte-onglet .bouton { margin-top: 26px; }
.texte-onglet h3 { font-size: clamp(28px, 2.6vw, 38px); margin: 18px 0 14px; line-height: 1.05; }
.texte-onglet p { color: var(--gris-nuit); font-size: 16px; }
.texte-onglet ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; font-size: 15px; }
.texte-onglet li { display: flex; gap: 10px; align-items: center; }
.texte-onglet li::before { content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; background: var(--vert); color: var(--encre); font-size: 11px; font-weight: 700; flex: none; }
.cadre-onglet { position: relative; padding-right: 70px; }
.cadre-onglet img:first-child { width: 100%; border-radius: 14px; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
.cadre-onglet .tel { position: absolute; right: 0; bottom: -20px; width: 150px; border-radius: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, .6); }
.onglets-ecrans:has(> input:nth-of-type(1):checked) .panneau-onglet:nth-child(1) { display: grid; }
.onglets-ecrans:has(> input:nth-of-type(1):checked) .barre-onglets label:nth-child(1) { background: var(--vert); color: var(--encre); border-color: var(--vert); }
.onglets-ecrans:has(> input:nth-of-type(1):checked) .barre-onglets label:nth-child(1) .ic .v { background: #fff; }
.onglets-ecrans:has(> input:nth-of-type(1):checked) .barre-onglets label:nth-child(1) .ic .e { background: var(--encre); }
.onglets-ecrans > input:nth-of-type(1):focus-visible ~ .barre-onglets label:nth-child(1) { outline: 3px solid var(--vert); outline-offset: 3px; }
.onglets-ecrans:has(> input:nth-of-type(2):checked) .panneau-onglet:nth-child(2) { display: grid; }
.onglets-ecrans:has(> input:nth-of-type(2):checked) .barre-onglets label:nth-child(2) { background: var(--vert); color: var(--encre); border-color: var(--vert); }
.onglets-ecrans:has(> input:nth-of-type(2):checked) .barre-onglets label:nth-child(2) .ic .v { background: #fff; }
.onglets-ecrans:has(> input:nth-of-type(2):checked) .barre-onglets label:nth-child(2) .ic .e { background: var(--encre); }
.onglets-ecrans > input:nth-of-type(2):focus-visible ~ .barre-onglets label:nth-child(2) { outline: 3px solid var(--vert); outline-offset: 3px; }
.onglets-ecrans:has(> input:nth-of-type(3):checked) .panneau-onglet:nth-child(3) { display: grid; }
.onglets-ecrans:has(> input:nth-of-type(3):checked) .barre-onglets label:nth-child(3) { background: var(--vert); color: var(--encre); border-color: var(--vert); }
.onglets-ecrans:has(> input:nth-of-type(3):checked) .barre-onglets label:nth-child(3) .ic .v { background: #fff; }
.onglets-ecrans:has(> input:nth-of-type(3):checked) .barre-onglets label:nth-child(3) .ic .e { background: var(--encre); }
.onglets-ecrans > input:nth-of-type(3):focus-visible ~ .barre-onglets label:nth-child(3) { outline: 3px solid var(--vert); outline-offset: 3px; }
.onglets-ecrans:has(> input:nth-of-type(4):checked) .panneau-onglet:nth-child(4) { display: grid; }
.onglets-ecrans:has(> input:nth-of-type(4):checked) .barre-onglets label:nth-child(4) { background: var(--vert); color: var(--encre); border-color: var(--vert); }
.onglets-ecrans:has(> input:nth-of-type(4):checked) .barre-onglets label:nth-child(4) .ic .v { background: #fff; }
.onglets-ecrans:has(> input:nth-of-type(4):checked) .barre-onglets label:nth-child(4) .ic .e { background: var(--encre); }
.onglets-ecrans > input:nth-of-type(4):focus-visible ~ .barre-onglets label:nth-child(4) { outline: 3px solid var(--vert); outline-offset: 3px; }
.onglets-ecrans:has(> input:nth-of-type(5):checked) .panneau-onglet:nth-child(5) { display: grid; }
.onglets-ecrans:has(> input:nth-of-type(5):checked) .barre-onglets label:nth-child(5) { background: var(--vert); color: var(--encre); border-color: var(--vert); }
.onglets-ecrans:has(> input:nth-of-type(5):checked) .barre-onglets label:nth-child(5) .ic .v { background: #fff; }
.onglets-ecrans:has(> input:nth-of-type(5):checked) .barre-onglets label:nth-child(5) .ic .e { background: var(--encre); }
.onglets-ecrans > input:nth-of-type(5):focus-visible ~ .barre-onglets label:nth-child(5) { outline: 3px solid var(--vert); outline-offset: 3px; }
.onglets-ecrans:has(> input:nth-of-type(6):checked) .panneau-onglet:nth-child(6) { display: grid; }
.onglets-ecrans:has(> input:nth-of-type(6):checked) .barre-onglets label:nth-child(6) { background: var(--vert); color: var(--encre); border-color: var(--vert); }
.onglets-ecrans:has(> input:nth-of-type(6):checked) .barre-onglets label:nth-child(6) .ic .v { background: #fff; }
.onglets-ecrans:has(> input:nth-of-type(6):checked) .barre-onglets label:nth-child(6) .ic .e { background: var(--encre); }
.onglets-ecrans > input:nth-of-type(6):focus-visible ~ .barre-onglets label:nth-child(6) { outline: 3px solid var(--vert); outline-offset: 3px; }

@media (max-width: 980px) {
  .panneau-onglet { grid-template-columns: minmax(0, 1fr); }
  /* Sur un petit écran, la capture du téléphone couvrirait la liste :
     celle de l'ordinateur suffit. */
  .cadre-onglet { padding-right: 0; }
  .cadre-onglet .tel { display: none; }
}

/* LE RADAR DE DROITE, VIVANT (20/10/2026) : chaque source s'allume quand
   le balai passe (son instant est écrit dans la page), puis s'éteint. */
.radar-clair .echo-clair { opacity: .5; animation: echo-clair 7s linear infinite; }
.radar-clair .halo-clair { fill: none; stroke: var(--vert); stroke-width: 1.4; opacity: 0;
  transform-box: fill-box; transform-origin: center; animation: halo-clair 7s ease-out infinite; animation-delay: inherit; }
@keyframes echo-clair { 0%, 8% { opacity: 1; } 55%, 100% { opacity: .5; } }
@keyframes halo-clair { 0% { opacity: .9; transform: scale(.4); } 22% { opacity: 0; transform: scale(1.6); } 100% { opacity: 0; } }

/* LES ICÔNES BOUGENT COMME DANS LE LOGICIEL (static/coque.css) : au
   survol, une fois, jamais en boucle — la maison saute, le cachet se
   tamponne, l'avion s'envole, la flèche du téléchargement descend. */
@keyframes ic-sauter { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-10%); } 70% { transform: translateY(2%); } }
@keyframes ic-tamponner { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.22); } }
@keyframes ic-envoler { 0%, 100% { transform: translate(0, 0); } 45% { transform: translate(10%, -10%); } }
@keyframes ic-descendre { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(11%); } }
@keyframes ic-tourner { 0% { transform: rotate(0); } 100% { transform: rotate(90deg); } }
@keyframes ic-ecrire { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-7%, 7%); }
                       55% { transform: translate(3%, -3%); } 80% { transform: translate(-4%, 4%); } }
.ic-appels-offres > .e { transform-origin: 72.5% 72.5%; }
.ic-messages > .e { transform-origin: 34.7% 77%; }
:is(a, label, button):hover .ic-accueil > .e,
:is(a, label, button):hover .ic-document > .e,
:is(a, label, button):hover .ic-publications > .e,
:is(a, label, button):hover .ic-planning > .e,
:is(a, label, button):hover .ic-equipe > .e,
:is(a, label, button):hover .ic-appareils > .e { animation: ic-sauter .7s cubic-bezier(.3, 1.5, .5, 1); }
:is(a, label, button):hover .ic-appels-offres > .e,
:is(a, label, button):hover .ic-messages > .e { animation: ic-tamponner .6s ease-in-out; }
:is(a, label, button):hover .ic-publication > i { animation: ic-envoler .6s ease-in-out; }
:is(a, label, button):hover .ic-telecharger > .v { animation: ic-descendre .6s ease-in-out; }
:is(a, label, button):hover .ic-a-valider > .e { animation: ic-ecrire .8s ease-in-out; }
:is(a, label, button):hover .ic-plus > i { animation: ic-tourner .5s ease-in-out; }
.onglets-ecrans:has(> input:nth-of-type(1):checked) .barre-onglets label:nth-child(1) .ic > .e { animation: ic-sauter .7s cubic-bezier(.3, 1.5, .5, 1); }
.onglets-ecrans:has(> input:nth-of-type(2):checked) .barre-onglets label:nth-child(2) .ic > .e { animation: ic-sauter .7s cubic-bezier(.3, 1.5, .5, 1); }
.onglets-ecrans:has(> input:nth-of-type(3):checked) .barre-onglets label:nth-child(3) .ic > .e { animation: ic-sauter .7s cubic-bezier(.3, 1.5, .5, 1); }
.onglets-ecrans:has(> input:nth-of-type(4):checked) .barre-onglets label:nth-child(4) .ic > .e { animation: ic-sauter .7s cubic-bezier(.3, 1.5, .5, 1); }
.onglets-ecrans:has(> input:nth-of-type(5):checked) .barre-onglets label:nth-child(5) .ic > .e { animation: ic-sauter .7s cubic-bezier(.3, 1.5, .5, 1); }
.onglets-ecrans:has(> input:nth-of-type(6):checked) .barre-onglets label:nth-child(6) .ic > .e { animation: ic-sauter .7s cubic-bezier(.3, 1.5, .5, 1); }

/* LES TEXTES APPARAISSENT EN DOUCEUR (20/10/2026) : c'est site.js qui
   marque ce qui apparaîtra (classe a-reveler, sous html.js-revele) —
   sans script, ou pour qui demande moins de mouvement, tout est là. */
.js-revele .a-reveler { opacity: 0; transform: translateY(22px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--rang, 0) * 90ms); }
.js-revele .a-reveler.vu { opacity: 1; transform: none; }

/* « AVANT, APRÈS » : deux matinées côte à côte (choix « A » du directeur, 20/10/2026). */
.deux-matinees { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 24px); }
.matinee { border-radius: var(--rayon-grand); padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; }
.matinee.sans { background: #fff; border: 1px solid var(--trait); color: var(--gris-texte); }
.matinee.avec { background: var(--nuit); color: var(--sur-nuit); }
.pastille-matinee { align-self: flex-start; padding: 7px 14px; border-radius: 999px; font: 600 13px "Inter", sans-serif; }
.sans .pastille-matinee { background: var(--creme-2); color: var(--encre); }
.avec .pastille-matinee { background: var(--vert); color: var(--encre); }
.matinee .duree { font: 800 clamp(64px, 7vw, 104px)/1 "Nexa Pro", sans-serif; letter-spacing: -.03em; margin-top: 30px; }
.sans .duree { color: rgba(9, 9, 9, .3); text-decoration: line-through; text-decoration-thickness: 4px; }
.avec .duree { color: var(--vert); }
.matinee .sous-duree { margin-top: 8px; font-size: 15px; }
.matinee ul { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 14px; border-top: 1px solid var(--trait); padding-top: 22px; }
.avec ul { border-color: var(--trait-nuit); }
.matinee li { display: flex; gap: 12px; align-items: center; font-size: 16px; }
.sans li::before { content: "✕"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: var(--creme-2); color: rgba(9, 9, 9, .55); font-size: 11px; flex: none; }
.avec li .ic { width: 22px; height: 22px; }
.avec li .ic .e { background: var(--sur-nuit); }
@media (max-width: 980px) {
  .deux-matinees { grid-template-columns: minmax(0, 1fr); }
}