/* ==========================================================================
   SKYNET BUSINESS SERVICES — SYSTÈME DE DESIGN
   Version 1.0 — 03/08/2026
   Couleurs extraites des fichiers vectoriels officiels de la marque.
   RÈGLE D'OR : l'indigo porte le texte. Le cyan porte le dégradé et l'accent —
   il ne porte JAMAIS de texte (2,62:1 sur blanc). Sur une surface cyan, le texte
   est NOIR (8,02:1), exactement comme dans le logo.
   ========================================================================== */

/* ==========================================================================
   TYPOGRAPHIE — POPPINS, AUTO-HÉBERGÉE
   Choix de Yann du 03/08/2026. Même famille de dessin géométrique que la
   police du site Le Bellevue (ITC Avant Garde Gothic), mais sous licence OFL
   libre — et elle monte à 800 là où l'originale s'arrête à 700.
   AUTO-HÉBERGÉE : aucun appel à Google, donc aucune IP de visiteur envoyée
   aux États-Unis. C'est une exigence RGPD, pas une préférence.
   5 graisses = 38,4 Ko au total.
   ========================================================================== */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/poppins-400-latin.woff2)format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/poppins-500-latin.woff2)format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/poppins-600-latin.woff2)format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/poppins-700-latin.woff2)format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:800;font-display:swap;
  src:url(fonts/poppins-800-latin.woff2)format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Repli calé sur les métriques exactes de Poppins (ascendante 105 %,
   descendante 35 %, hauteur d'œil 548/1000 contre 519 pour Arial).
   Sans ça, la page saute visiblement au moment où la police arrive :
   c'est le Cumulative Layout Shift, et Google le sanctionne. */
@font-face{font-family:"Poppins repli";src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans");
  ascent-override:105%;descent-override:35%;line-gap-override:10%;size-adjust:105.6%}

:root{
  /* ── MARQUE ─────────────────────────────────────────────────────────── */
  --indigo-900:#1B1D57;  /* titres profonds, fonds sombres                  */
  --indigo-800:#22245F;
  --indigo-700:#252873;  /* liens, éléments actifs                          */
  --indigo-600:#2A2D85;
  --indigo-500:#2E3192;  /* ◆ OFFICIEL — texte, fonds pleins — 10,66:1      */
  --indigo-400:#5457A8;
  --indigo-300:#6B6DB5;
  --indigo-200:#A9AAD4;
  --indigo-100:#D5D6E9;  /* bordures teintées                               */
  --indigo-50:#EEEEF6;   /* fonds de survol, pastilles                       */

  --cyan-900:#0C3D53;
  --cyan-800:#11536F;
  --cyan-700:#1A7FAB;    /* sur-titres — 4,7:1 sur blanc, seul cyan lisible  */
  --cyan-600:#2196CB;
  --cyan-500:#29ABE2;    /* ◆ OFFICIEL — dégradé & accent — JAMAIS de texte  */
  --cyan-400:#55BDE8;
  --cyan-300:#7CCBEE;
  --cyan-200:#AEDFF5;
  --cyan-100:#D4EEF9;
  --cyan-50:#EDF8FD;

  /* ── LE DÉGRADÉ DE MARQUE — l'élément identitaire ───────────────────── */
  --degrade:linear-gradient(180deg,var(--indigo-500) 0%,var(--cyan-500) 100%);
  --degrade-h:linear-gradient(90deg,var(--indigo-500) 0%,var(--cyan-500) 100%);
  --degrade-d:linear-gradient(135deg,var(--indigo-500) 0%,var(--cyan-500) 100%);
  /* Rampe SÛRE pour tout fond portant du texte blanc : s'arrête avant le cyan pur.
     Le cyan #29ABE2 ne donne que 2,62:1 avec du blanc — il ne porte JAMAIS de texte. */
  --degrade-texte:linear-gradient(135deg,#2E3192 0%,#1B7AA6 100%);

  /* ── CANAUX RGB — pour les rgba(), aucun chiffre en dur ailleurs ────── */
  --rgb-indigo:46,49,146;
  --rgb-cyan:41,171,226;
  --rgb-encre:15,17,21;

  /* ── NEUTRES — le logotype est NOIR, l'encre l'est presque ──────────── */
  --encre:#0F1115;       /* texte fort — 18,4:1                             */
  --gris-800:#2B303B;
  --gris-700:#454A57;    /* corps de texte — 9,2:1                          */
  --gris-600:#585E6C;
  --gris-500:#6A7080;    /* texte secondaire — 5,1:1                        */
  --gris-400:#949AA8;
  --gris-300:#C9CDD6;    /* bordures de champs                              */
  --gris-200:#DDE0E7;
  --gris-100:#E7EAF0;    /* bordures, filets                                */
  --gris-50:#F2F4F8;
  --fond:#F7F8FB;        /* hors-blanc froid — l'identité est froide        */
  --blanc:#FFFFFF;

  /* ── SÉMANTIQUES ────────────────────────────────────────────────────── */
  --succes:#0B5C33;      --succes-bg:#DFF3E7;   --succes-bd:#B9E5D5;
  --alerte:#7A4E07;      --alerte-bg:#FCEFD6;   --alerte-bd:#F2DCA8;
  --erreur:#8A1F16;      --erreur-bg:#FBE3E1;   --erreur-bd:#F5C7C3;
  --info:#11536F;        --info-bg:var(--cyan-50); --info-bd:var(--cyan-200);

  /* ── ESPACEMENT — base 4 ────────────────────────────────────────────── */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.25rem; --s6:1.5rem;
  --s8:2rem; --s10:2.5rem; --s12:3rem; --s16:4rem; --s20:5rem; --s24:6rem;

  /* ── FORMES ─────────────────────────────────────────────────────────── */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --r-full:999px;
  --bd:1px solid var(--gris-100);
  --ombre:0 12px 32px rgba(var(--rgb-indigo),.10);
  --ombre-sm:0 4px 14px rgba(var(--rgb-indigo),.07);

  /* ── GRILLE ─────────────────────────────────────────────────────────── */
  --conteneur:1180px; --conteneur-etroit:760px;

  /* ── TYPOGRAPHIE ────────────────────────────────────────────────────── */
  --police:"Poppins","Poppins repli",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --police-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  /* ── MOUVEMENT ──────────────────────────────────────────────────────── */
  --t:.22s cubic-bezier(.4,0,.2,1);
  --t-lent:.4s cubic-bezier(.4,0,.2,1);
}

/* ==========================================================================
   RÉINITIALISATION
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{
  font-family:var(--police);background:var(--fond);color:var(--encre);
  /* 18px : « facile à lire » est une consigne de Yann. La hauteur d'œil de
     Poppins (0,79 de la hauteur de capitale, contre 0,72 pour Segoe UI) fait
     qu'à 18 px elle se lit comme du 19,5 px. */
  font-size:18px;line-height:1.62;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--indigo-700);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--indigo-500)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--cyan-500);outline-offset:2px;border-radius:4px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
}

/* ==========================================================================
   TYPOGRAPHIE
   ========================================================================== */
h1,h2,h3,h4,h5{line-height:1.15;letter-spacing:-.02em;color:var(--indigo-900);
  text-wrap:balance}
h1{font-size:clamp(2.1rem,1.55rem + 2.4vw,3.5rem);font-weight:800}
h2{font-size:clamp(1.7rem,1.4rem + 1.4vw,2.4rem);font-weight:800}
h3{font-size:clamp(1.2rem,1.08rem + .5vw,1.5rem);font-weight:700}
h4{font-size:1.05rem;font-weight:700}
h5{font-size:.95rem;font-weight:700}
p{color:var(--gris-700);text-wrap:pretty}
strong,b{color:var(--encre);font-weight:650}
.chapo{font-size:clamp(1.05rem,1rem + .35vw,1.25rem);color:var(--gris-600);max-width:60ch}
.petit{font-size:.88rem}
.mini{font-size:.78rem;color:var(--gris-500)}

/* Le sur-titre — cyan-700, le seul cyan qui porte du texte */
.sur-titre{display:block;font-size:.75rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan-700);margin-bottom:var(--s3)}

/* ◆ LE GESTE SIGNATURE — le filet en dégradé, répété partout */
.filet{width:40px;height:3px;border-radius:2px;background:var(--degrade-h);
  margin-bottom:var(--s5)}
.filet-sm{width:28px;height:3px;border-radius:2px;background:var(--degrade-h);
  margin-bottom:var(--s3)}

/* ==========================================================================
   MISE EN PAGE
   ========================================================================== */
.wrap{max-width:var(--conteneur);margin-inline:auto;padding-inline:var(--s6)}
.wrap-etroit{max-width:var(--conteneur-etroit);margin-inline:auto;padding-inline:var(--s6)}
.section{padding-block:var(--s20)}
.section-sm{padding-block:var(--s12)}
.section-tete{max-width:64ch;margin-bottom:var(--s12)}
.section-tete p{margin-top:var(--s4)}
.centre{text-align:center}
.centre .filet,.centre .filet-sm{margin-inline:auto}
.centre .section-tete{margin-inline:auto}

.grille{display:grid;gap:var(--s6)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g-2-1{grid-template-columns:2fr 1fr}
.g-1-2{grid-template-columns:1fr 2fr}
.flex{display:flex;gap:var(--s4);flex-wrap:wrap}
.flex-centre{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap}

/* ==========================================================================
   EN-TÊTE
   ========================================================================== */
.entete{position:sticky;top:0;z-index:100;background:rgba(247,248,251,.92);
  backdrop-filter:blur(12px);border-bottom:var(--bd)}
/* ══════════════════════════════════════════════════════════════════════════
   L'EN-TÊTE — RECALIBRÉ LE 04/08/2026, APRÈS AVOIR ÉCRASÉ LE LOGO.

   CE QUI S'EST PASSÉ. L'ajout de « Contact » puis de « Actualités » a porté le
   menu à HUIT entrées. Dans une barre en flex, l'élément qui n'a pas de taille
   imposée absorbe tout le manque de place — et c'était le logo.
   MESURÉ à cinq largeurs, de 1120 à 1600 px : **logo = 0 à 4 px de large.**
   La marque avait purement et simplement disparu de l'en-tête, et ça ne se
   voyait pas au code : seulement au rendu.
     nav 797 px + actions 283 px + logo 89 px = 1169 px minimum,
     pour 1132 px disponibles dans un conteneur de 1180. Il manquait 37 px.

   TROIS CORRECTIONS, ET AUCUNE N'EST COSMÉTIQUE :
   1. « flex-shrink:0 » sur le logo — la marque ne se comprime JAMAIS. Si la
      place manque, c'est autre chose qui cède, ou on passe au menu burger.
   2. L'en-tête a droit à un conteneur PLUS LARGE que le contenu des pages.
      C'est courant et justifié : une barre de navigation n'a pas la même
      contrainte de confort de lecture qu'un paragraphe.
   3. Un cran d'espacement en moins entre les entrées au-delà de 1100 px.

   ⚠️ RÈGLE POUR LA SUITE, apprise deux fois en une journée : **toute entrée
   ajoutée au menu oblige à re-mesurer l'en-tête**, largeur du logo comprise.
   Le seuil du burger et la largeur du conteneur sont des CONSÉQUENCES du
   contenu de la barre, jamais des valeurs qu'on choisit une fois pour toutes.
   ══════════════════════════════════════════════════════════════════════════ */
.entete-inner{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s5);min-height:72px;max-width:1400px}
.logo{flex-shrink:0}
.logo img{height:32px;width:auto}
.nav{display:flex;gap:var(--s5);align-items:center;flex-wrap:nowrap}
.nav a{color:var(--gris-700);text-decoration:none;font-size:.94rem;font-weight:550;
  padding-block:var(--s2);position:relative;transition:color var(--t)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--indigo-500)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;
  height:3px;border-radius:2px;background:var(--degrade-h)}
.entete-actions{display:flex;gap:var(--s3);align-items:center}
/* ⚠️ 04/08 — CIBLES TACTILES. Mesuré au navigateur par six ninjas
   indépendants : sous 640 px, le libellé « Nous appeler » est masqué et il ne
   reste que le picto — le lien d'appel tombait à 17 × 17 px. C'est le lien de
   conversion principal sur mobile, et le plus petit élément du site. Le bouton
   burger faisait 40 px de haut. Le minimum de confort est 44 × 44 px
   (WCAG 2.5.5), le minimum exigible 24 × 24 px (WCAG 2.2 AA, critère 2.5.8).
   min-height/min-width + place-items règlent les deux sans changer le dessin. */
.tel-entete{display:inline-flex;align-items:center;justify-content:center;
  gap:var(--s2);font-weight:700;min-height:44px;min-width:44px;
  color:var(--indigo-700);text-decoration:none;font-size:.94rem;white-space:nowrap}
.tel-entete svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
.burger{display:none;background:none;border:var(--bd);border-radius:var(--r-sm);
  min-width:44px;min-height:44px;align-items:center;justify-content:center;
  padding:var(--s2) var(--s3);cursor:pointer;color:var(--indigo-900)}
.burger svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}

/* ==========================================================================
   BOUTONS — 3 variantes, pas une de plus
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:.72rem 1.35rem;border-radius:var(--r-full);font-size:.95rem;font-weight:650;
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:transform var(--t),box-shadow var(--t),background var(--t),color var(--t);
  white-space:nowrap;line-height:1.3}
.btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

/* Primaire — dégradé de marque, texte blanc (10,66:1 sur l'indigo) */
.btn-1{background:var(--degrade-texte);color:var(--blanc);
  box-shadow:0 6px 20px rgba(41,171,226,.30),0 1px 2px rgba(0,0,0,.30)}
.btn-1:hover{color:var(--blanc);
  box-shadow:0 12px 34px rgba(41,171,226,.45),0 2px 6px rgba(0,0,0,.35)}

/* Secondaire — contour indigo */
.btn-2{background:transparent;color:var(--indigo-700);border-color:var(--indigo-200)}
.btn-2:hover{background:var(--indigo-50);color:var(--indigo-700);border-color:var(--indigo-300)}

/* Sur fond sombre */
.btn-3{background:var(--blanc);color:var(--indigo-700)}
.btn-3:hover{background:var(--cyan-50);color:var(--indigo-700)}
.btn-contour-clair{background:transparent;color:var(--blanc);
  border-color:rgba(255,255,255,.35)}
.btn-contour-clair:hover{background:rgba(255,255,255,.1);color:var(--blanc)}

.btn-lg{padding:.9rem 1.7rem;font-size:1.02rem}

/* ==========================================================================
   CARTES
   ========================================================================== */
.carte{background:var(--blanc);border:var(--bd);border-radius:var(--r-lg);
  padding:var(--s6);transition:border-color var(--t),box-shadow var(--t)}
.carte:hover{border-color:var(--indigo-100);box-shadow:var(--ombre-sm)}
.carte h3,.carte h4{margin-bottom:var(--s2)}
.carte p{font-size:.94rem}
.carte-lien{text-decoration:none;display:block;color:inherit}
.carte-lien:hover{color:inherit}

/* Carte à filet — le geste signature */
.carte-filet{position:relative;overflow:hidden}
.carte-filet::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--degrade)}

/* Icône dans une pastille */
.ico{width:44px;height:44px;border-radius:var(--r);background:var(--indigo-50);
  display:grid;place-items:center;margin-bottom:var(--s4);flex-shrink:0}
.ico svg{width:22px;height:22px;stroke:var(--indigo-500);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.ico-degrade{background:var(--degrade-d)}
.ico-degrade svg{stroke:var(--blanc)}

/* ==========================================================================
   BLOCS SOMBRES
   ========================================================================== */
.sombre{background:var(--indigo-900);color:#E4E6F3;border-radius:var(--r-xl);
  padding:var(--s16) var(--s8)}
.sombre h1,.sombre h2,.sombre h3,.sombre h4{color:var(--blanc)}
.sombre p{color:#B9BDDA}
.sombre .sur-titre{color:var(--cyan-300)}
.sombre a{color:var(--cyan-300)}
.section-sombre{background:var(--indigo-900);color:#E4E6F3;padding-block:var(--s20)}
.section-sombre h1,.section-sombre h2,.section-sombre h3{color:var(--blanc)}
.section-sombre p{color:#B9BDDA}
.section-sombre .sur-titre{color:var(--cyan-300)}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;overflow:hidden;padding-block:var(--s24) var(--s20)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(56rem 30rem at 84% -18%,var(--cyan-50) 0%,transparent 68%)}
.hero .wrap{position:relative}
.hero h1{max-width:19ch}
.hero .chapo{margin-top:var(--s5)}
.hero-actions{display:flex;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s8)}
.hero-reassurance{display:flex;gap:var(--s6);flex-wrap:wrap;margin-top:var(--s8);
  padding-top:var(--s6);border-top:var(--bd)}
.hero-reassurance li{list-style:none;display:flex;align-items:center;gap:var(--s2);
  font-size:.88rem;color:var(--gris-600)}
.hero-reassurance svg{width:16px;height:16px;stroke:var(--cyan-700);fill:none;stroke-width:2;
  flex-shrink:0}

/* Bandeau de fil d'Ariane + titre de page intérieure */
.page-tete{padding-block:var(--s12) var(--s8);position:relative;overflow:hidden}
.page-tete::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(46rem 22rem at 88% -30%,var(--cyan-50) 0%,transparent 65%)}
.page-tete .wrap{position:relative}
.fil{display:flex;gap:var(--s2);flex-wrap:wrap;font-size:.82rem;color:var(--gris-500);
  margin-bottom:var(--s5);list-style:none}
.fil a{color:var(--gris-500);text-decoration:none}
.fil a:hover{color:var(--indigo-500)}
.fil li+li::before{content:"›";margin-right:var(--s2);color:var(--gris-400)}

/* ==========================================================================
   CHIFFRES CLÉS
   ========================================================================== */
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6)}
.chiffre b{display:block;font-size:clamp(1.9rem,1.6rem + 1.1vw,2.6rem);font-weight:800;
  color:var(--indigo-500);line-height:1.1;letter-spacing:-.03em}
.chiffre span{display:block;font-size:.88rem;color:var(--gris-600);margin-top:var(--s2)}
.chiffre em{display:block;font-size:.72rem;color:var(--gris-400);font-style:normal;
  margin-top:var(--s1)}
.section-sombre .chiffre b{color:var(--cyan-300)}
.section-sombre .chiffre span{color:#B9BDDA}
.section-sombre .chiffre em{color:#8A8FB5}

/* ==========================================================================
   LISTES
   ========================================================================== */
.liste{list-style:none;display:grid;gap:var(--s3)}
.liste li{position:relative;padding-left:1.6rem;color:var(--gris-700);font-size:.96rem}
.liste li::before{content:"";position:absolute;left:0;top:.58em;width:7px;height:7px;
  border-radius:2px;background:var(--degrade-h)}
.liste li strong{color:var(--encre)}
.liste-check li::before{content:"";left:3px;top:.28em;width:7px;height:13px;border-radius:0;
  background:none;border-style:solid;border-color:var(--cyan-700);
  border-width:0 2.4px 2.4px 0;transform:rotate(45deg);transform-origin:center}
.section-sombre .liste li{color:#C8CBE4}
.section-sombre .liste li strong{color:var(--blanc)}

/* ==========================================================================
   PASTILLES & BADGES
   ========================================================================== */
.pastille{display:inline-flex;align-items:center;gap:var(--s2);font-size:.78rem;
  font-weight:650;padding:.25rem .7rem;border-radius:var(--r-full);
  background:var(--indigo-50);color:var(--indigo-700);border:1px solid var(--indigo-100)}
.pastille-cyan{background:var(--cyan-50);color:var(--cyan-800);border-color:var(--cyan-200)}
.pastille-succes{background:var(--succes-bg);color:var(--succes);border-color:var(--succes-bd)}
.pastilles{display:flex;flex-wrap:wrap;gap:var(--s2)}

/* ==========================================================================
   TABLEAUX
   ========================================================================== */
.tableau-wrap{overflow-x:auto;border:var(--bd);border-radius:var(--r-lg);
  background:var(--blanc)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.94rem}
th,td{text-align:left;padding:.85rem 1.1rem;border-bottom:var(--bd);vertical-align:top}
th{background:var(--indigo-50);color:var(--indigo-900);font-weight:700;font-size:.8rem;
  letter-spacing:.05em;text-transform:uppercase}
tbody tr:last-child td{border-bottom:none}
td strong{color:var(--encre)}

/* Tableau « couvert / pas couvert » — le signal de confiance */
.t-oui{color:var(--succes);font-weight:700}
.t-non{color:var(--gris-500)}

/* ==========================================================================
   ENCADRÉS
   ========================================================================== */
.note{border-left:3px solid var(--cyan-500);background:var(--cyan-50);
  border-radius:0 var(--r) var(--r) 0;padding:var(--s5) var(--s6)}
.note p{color:var(--gris-700)}
.note strong{color:var(--indigo-900)}
.note-alerte{border-left-color:#C4463A;background:var(--erreur-bg)}
.note-alerte strong{color:var(--erreur)}

/* ==========================================================================
   FAQ — <details> natif, aucune animation de hauteur (elle ne marche pas)
   ========================================================================== */
.faq{display:grid;gap:var(--s3)}
.faq details{background:var(--blanc);border:var(--bd);border-radius:var(--r);
  overflow:hidden}
.faq summary{cursor:pointer;padding:var(--s5) var(--s6);font-weight:650;
  color:var(--indigo-900);list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:var(--s4);font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:9px;height:9px;flex-shrink:0;
  border-right:2px solid var(--cyan-700);border-bottom:2px solid var(--cyan-700);
  transform:rotate(45deg);transition:transform var(--t);margin-top:-4px}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.faq details[open] summary{border-bottom:var(--bd)}
.faq .reponse{padding:var(--s5) var(--s6);color:var(--gris-700);font-size:.96rem}
.faq .reponse p+p{margin-top:var(--s4)}

/* ==========================================================================
   FORMULAIRE
   ========================================================================== */
.champ{display:grid;gap:var(--s2);margin-bottom:var(--s5)}
.champ label{font-size:.88rem;font-weight:650;color:var(--indigo-900)}
.champ label .requis{color:var(--erreur)}
.champ input,.champ select,.champ textarea{
  width:100%;padding:.72rem .9rem;border:1px solid var(--gris-300);
  border-radius:var(--r-sm);background:var(--blanc);color:var(--encre);
  transition:border-color var(--t),box-shadow var(--t)}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--indigo-500);
  box-shadow:0 0 0 3px rgba(var(--rgb-indigo),.14)}
.champ textarea{min-height:130px;resize:vertical}
.champ .aide{font-size:.8rem;color:var(--gris-500)}
.pot-de-miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */
.pied{background:var(--indigo-900);color:#B9BDDA;padding-block:var(--s16) var(--s8);
  margin-top:var(--s20)}
.pied-grille{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s10)}
.pied h4{color:var(--blanc);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:var(--s5)}
.pied ul{list-style:none;display:grid;gap:var(--s3)}
/* Les liens du pied faisaient 20 à 21 px de haut — mesuré sur huit pages par
   des ninjas différents, à 1440 comme à 390 px. Sous les 24 px du critère
   WCAG 2.2 AA (2.5.8) et très loin des 44 px de confort. Deux liens côte à
   côte sur mobile, c'est une cible qu'on rate une fois sur trois. Le padding
   vertical suffit : il agrandit la zone cliquable sans rien changer au dessin,
   et la marge négative compense pour que l'espacement visuel reste identique. */
.pied a{color:#B9BDDA;text-decoration:none;font-size:.92rem;transition:color var(--t);
  display:inline-block;padding-block:var(--s2);margin-block:calc(var(--s2) * -1)}
.pied a:hover{color:var(--blanc)}
.pied img{height:30px;width:auto;margin-bottom:var(--s5)}
.pied p{color:#8A8FB5;font-size:.88rem}
.pied-bas{margin-top:var(--s12);padding-top:var(--s6);
  border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;
  gap:var(--s6);flex-wrap:wrap}
.pied-bas p,.pied-bas a{font-size:.82rem;color:#8A8FB5}
.pied-legal{display:flex;gap:var(--s5);flex-wrap:wrap}

/* ==========================================================================
   BARRE D'ACTION MOBILE — concept repris du projet Laverie
   ========================================================================== */
.barre-mobile{display:none;position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:var(--blanc);border-top:var(--bd);padding:var(--s3);gap:var(--s3);
  box-shadow:0 -6px 24px rgba(var(--rgb-encre),.1)}
.barre-mobile .btn{flex:1}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:1080px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .chiffres{grid-template-columns:repeat(2,1fr)}
  .pied-grille{grid-template-columns:repeat(2,1fr)}
}
/* ══════════════════════════════════════════════════════════════════════════
   LE BURGER PASSE DE 900 À 1000 px — corrigé le 04/08/2026.

   DÉFAUT MESURÉ, ET IL TOUCHAIT LES 20 PAGES. Le menu de bureau était encore
   affiché jusqu'à 900 px alors qu'il a besoin d'environ 985 px pour tenir.
   Entre les deux, la PAGE ENTIÈRE débordait horizontalement. Relevé par moi
   au navigateur, sonde scrollWidth − clientWidth sur l'accueil :
        890 px → 0        905 px → 0
        940 px → 46 px de débordement   (DIV.entete-actions et A.btn à x=955)
        960 px → 26 px                  985 px → 1 px
       1010 px → 0
   C'est exactement la largeur d'un petit portable ou d'une tablette en
   paysage : la fenêtre défilait latéralement sur tout le site.
   Trouvé par un ninja sur telecom-reseau-wifi, re-mesuré par moi sur
   l'accueil avant correction — un témoignage n'est pas une preuve.

   Les règles de NAVIGATION passent donc à 1100 px. Les règles de MISE EN PAGE
   (.g3, .sombre) restent à 900 px : elles n'ont rien à voir avec l'en-tête, et
   les déplacer changerait la composition de toutes les pages sans raison.

   ⚠️ SECONDE HAUSSE, LE MÊME JOUR — 1000 px NE SUFFISAIT PLUS.
   Yann a demandé l'ajout d'un lien « Contact » dans le menu. Une septième
   entrée élargit la barre, et le défaut est revenu aussitôt : 20 px de
   débordement mesurés à 1060 px, avec les mêmes coupables (DIV.entete-actions
   et le bouton d'appel à l'action).
   LA LEÇON, à retenir pour toute évolution du menu : **le seuil du burger est
   une conséquence du CONTENU de la barre, pas une valeur qu'on choisit une
   fois.** Chaque entrée ajoutée oblige à re-mesurer la plage 900-1300 px au
   pas de 20 px. L'outil est là : une sonde qui lit scrollWidth − clientWidth.
   ══════════════════════════════════════════════════════════════════════════ */
/* ⚠️ TROISIÈME HAUSSE DU SEUIL EN UNE JOURNÉE, et c'est logique : 900 px
   suffisait à SIX entrées, 1000 à sept, 1100 à huit — sauf que la huitième a
   fait sauter le logo. Avec le logo protégé, la barre complète réclame
   environ 1 220 px. En dessous, le menu burger. */
@media(max-width:1240px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--blanc);
    flex-direction:column;align-items:stretch;gap:0;padding:var(--s4);
    border-bottom:var(--bd);box-shadow:var(--ombre)}
  .nav.ouvert{display:flex}
  .nav a{padding:var(--s4);border-radius:var(--r-sm)}
  .nav a:hover{background:var(--indigo-50)}
  .nav a[aria-current="page"]::after{display:none}
  .nav a[aria-current="page"]{background:var(--indigo-50)}
  .burger{display:inline-flex}
  .entete{position:relative}
}
@media(max-width:900px){
  .g3,.g-2-1,.g-1-2{grid-template-columns:1fr}
  .sombre{padding:var(--s12) var(--s6)}
}
@media(max-width:640px){
  body{font-size:16px;padding-bottom:76px}
  .section{padding-block:var(--s12)}
  .hero{padding-block:var(--s16) var(--s12)}
  .g2,.g4{grid-template-columns:1fr}
  .chiffres{grid-template-columns:1fr 1fr;gap:var(--s5)}
  .pied-grille{grid-template-columns:1fr;gap:var(--s8)}
  .wrap,.wrap-etroit{padding-inline:var(--s5)}
  .barre-mobile{display:flex}
  .tel-entete span{display:none}
}
@media print{
  .entete,.barre-mobile,.pied{display:none}
  body{background:#fff;font-size:12pt}
  .section{padding-block:1rem}
}

/* ==========================================================================
   CALAGE OPTIQUE DE POPPINS — 03/08/2026
   Poppins est une géométrique : lettres larges, cercles parfaits, hauteur d'œil
   très élevée (0,79 de la capitale). Trois conséquences mesurées :
   1. À taille égale elle occupe ~8 % de largeur en plus qu'une grotesque —
      les titres partent sur une ligne de plus si on ne resserre pas.
   2. Ses métriques verticales totalisent 150 % de la taille de police
      (Arial : 115 %) — sans interlignage explicite, les titres respirent trop.
   3. Elle se lit plus gros qu'elle n'est : 18 px se lisent comme 19,5 px.
   ========================================================================== */

/* Titres : resserrage optique progressif — plus c'est gros, plus on resserre. */
h1,.display{letter-spacing:-.035em}
h2,.titre-xl{letter-spacing:-.028em}
h3{letter-spacing:-.018em}
h4,h5{letter-spacing:-.01em}
.display,h1{line-height:1.04}
h2,.titre-xl{line-height:1.12}

/* Micro-libellés : à l'inverse, en capitales et en petit, il faut ÉCARTER. */
.kicker,.bande-tech-titre,.pied h4{letter-spacing:.14em}

/* Corps de texte : longueur de ligne tenue, césure française autorisée pour
   éviter les trous dans les colonnes étroites. */
p{text-wrap:pretty}
h1,h2,h3,.display,.titre-xl{text-wrap:balance}

/* Les chiffres clés : Poppins n'embarque pas de chiffres tabulaires, donc on
   ne les demande pas — on aligne à la place. */
.stat-xl b,.stat b{font-feature-settings:"lnum" 1;letter-spacing:-.03em}