/* AIRKOOL SUD — feuille construite depuis ui/ ; ne pas modifier à la main.
   Régénérer avec : node ui/scripts/construire.mjs */

/* ===== styles/polices.css ===== */
/* ===== Polices hébergées par nos soins (licence OFL) =====
   Générées par outils/polices.py : ne pas modifier à la main.
   Un seul fichier variable par famille couvre toutes les graisses. */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/figtree-variable.woff2') format('woff2-variations');
  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: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/manrope-variable.woff2') format('woff2-variations');
  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;
}


/* ===== tokens/tokens.css ===== */
/* ============================================================
   AIRKOOL SUD — jetons de design (source unique)
   Toute valeur de couleur, de typographie, d'espacement, de rayon,
   de calque ou de durée utilisée sur le site vient d'ici.
   Les pages et Storybook chargent ce même fichier.
   ============================================================ */
:root {
  /* ---------- Couleurs de marque ----------
     Contrastes vérifiés (WCAG 2.1, texte normal ≥ 4,5:1) :
       #FAFAF7 sur #064BD8 = 6,8:1   ✔
       #FFE52C sur #064BD8 = 7,7:1   ✔ (accents et gros titres)
       #071735 sur #FFE52C = 13,0:1  ✔ (bouton principal)
       #071735 sur #F7F7F2 = 15,6:1  ✔
       #4A5568 sur #F7F7F2 = 6,4:1   ✔ (texte secondaire) */
  --c-cobalt: #064BD8;
  --c-cobalt-fonce: #0A3AA8;   /* survol, bordures sur fond cobalt */
  --c-cobalt-clair: #2B6AF0;   /* séparateurs discrets sur cobalt */
  --c-profond: #071735;        /* texte principal sur fond clair, pied de page */
  --c-jaune: #FFE52C;
  --c-jaune-fonce: #F2D400;    /* survol du bouton principal */
  --c-clair: #F7F7F2;          /* fond des sections claires */
  --c-clair-2: #EFEEE6;        /* alternance douce */
  --c-texte-clair: #FAFAF7;    /* texte sur cobalt */
  --c-texte-doux: #4A5568;     /* texte secondaire sur fond clair */
  --c-texte-doux-inv: rgba(250, 250, 247, .78); /* texte secondaire sur cobalt */
  --c-ligne: #DCDAD0;          /* filets sur fond clair */
  --c-ligne-inv: rgba(250, 250, 247, .28);
  --c-blanc: #FFFFFF;
  --c-erreur: #B3261E;
  --c-erreur-fond: #FCEDEC;
  --c-succes: #1B6B3A;
  --c-succes-fond: #E8F4EC;

  /* ---------- Typographie ----------
     Titres : Figtree (géométrique, très grasse, grande hauteur d'x).
     Texte et interface : Manrope. Les deux sont sous licence OFL.
     Choix arrêté après comparaison visuelle avec la maquette validée
     (Bricolage Grotesque testée : trop étroite et trop maniérée). */
  --f-titre: 'Figtree', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --f-texte: 'Manrope', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;

  --t-display: clamp(3rem, 6.2vw, 5.5rem);     /* 48 px sur mobile → 88 px sur grand écran */
  --t-h1: clamp(2.5rem, 7.5vw, 4.5rem);
  --t-h2: clamp(2rem, 5vw, 3.25rem);
  --t-h3: clamp(1.25rem, 2.4vw, 1.625rem);
  --t-h4: clamp(1.0625rem, 1.6vw, 1.25rem);
  --t-corps: clamp(1rem, .6vw + .85rem, 1.125rem);   /* 16 → 18 px */
  --t-petit: .9375rem;
  --t-micro: .8125rem;
  --t-etiquette: .75rem;

  --i-display: .95;    /* interlignes */
  --i-titre: 1.04;
  --i-corps: 1.62;
  --l-display: -.035em;  /* approches */
  --l-titre: -.02em;
  --l-etiquette: .16em;

  /* ---------- Espacements (échelle 4 px) ---------- */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px; --e-5: 20px;
  --e-6: 24px; --e-8: 32px; --e-10: 40px; --e-12: 48px; --e-16: 64px;
  --e-20: 80px; --e-24: 96px; --e-30: 120px;
  --section-y: clamp(56px, 8vw, 112px);   /* respiration verticale des sections */

  /* ---------- Grille ---------- */
  --largeur-max: 1280px;
  --gouttiere: clamp(20px, 4vw, 40px);
  --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px;

  /* ---------- Rayons ----------
     La direction artistique est à angles vifs : le rayon reste l'exception. */
  --r-0: 0;
  --r-1: 3px;      /* champs de formulaire */
  --r-2: 6px;
  --r-rond: 999px; /* pastilles uniquement */

  /* ---------- Calques ---------- */
  --z-decor: 0;
  --z-contenu: 1;
  --z-entete: 50;
  --z-menu: 60;
  --z-barre: 70;
  --z-cookies: 100;

  /* ---------- Mouvement ---------- */
  --d-court: 140ms;
  --d-moyen: 240ms;
  --d-long: 420ms;
  --courbe: cubic-bezier(.2, .7, .3, 1);

  /* ---------- Ombres (rares, jamais décoratives) ---------- */
  --ombre-1: 0 2px 8px rgba(7, 23, 53, .08);
  --ombre-2: 0 18px 44px rgba(7, 23, 53, .16);

  /* ---------- Cibles tactiles ---------- */
  --cible: 44px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-court: 0ms; --d-moyen: 0ms; --d-long: 0ms; }
}


/* ===== styles/base.css ===== */
/* ============================================================
   AIRKOOL SUD — base : remise à zéro, typographie, utilitaires
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--f-texte);
  font-size: var(--t-corps);
  line-height: var(--i-corps);
  color: var(--c-profond);
  background: var(--c-clair);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;           /* garde-fou : aucun débordement horizontal */
}

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Focus visible et homogène partout, y compris sur fond cobalt */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--c-jaune);
  outline-offset: 2px;
  border-radius: var(--r-1);
}
.sur-cobalt :where(a, button, summary):focus-visible { outline-color: var(--c-blanc); }

/* Accès clavier : lien d'évitement */
.saut-contenu {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--c-jaune); color: var(--c-profond);
  padding: var(--e-3) var(--e-5); font-weight: 700; text-decoration: none;
}
.saut-contenu:focus { left: var(--e-4); top: var(--e-4); }

/* ---------- Titres ---------- */
h1, h2, h3, h4 {
  font-family: var(--f-titre);
  font-weight: 800;
  margin: 0 0 .5em;
  letter-spacing: var(--l-titre);
  line-height: var(--i-titre);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* Le grand titre de la page d'accueil */
.display {
  font-family: var(--f-titre);
  font-weight: 900;
  font-size: var(--t-display);
  line-height: var(--i-display);
  letter-spacing: var(--l-display);
  margin: 0;
  text-wrap: balance;
}

/* ---------- Utilitaires de mise en page ---------- */
.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.conteneur-etroit { max-width: 820px; }

/* L'attribut hidden doit gagner sur les display: grid / flex des composants,
   sans quoi un bloc masqué en HTML s'affiche quand même. */
[hidden] { display: none !important; }

.section { padding-block: var(--section-y); }
.section-claire { background: var(--c-clair); color: var(--c-profond); }
.section-alt { background: var(--c-clair-2); color: var(--c-profond); }
.section-cobalt { background: var(--c-cobalt); color: var(--c-texte-clair); }
.section-profond { background: var(--c-profond); color: var(--c-texte-clair); }

.mesure { max-width: 62ch; }
.doux { color: var(--c-texte-doux); }
.sur-cobalt .doux, .section-cobalt .doux { color: var(--c-texte-doux-inv); }
.centre { text-align: center; }

/* Sur-titre : petite capitale espacée, présente dans toute la maquette */
.surtitre {
  font-family: var(--f-texte);
  font-size: var(--t-etiquette);
  font-weight: 700;
  letter-spacing: var(--l-etiquette);
  text-transform: uppercase;
  color: var(--c-cobalt);
  margin: 0 0 var(--e-4);
}
.section-cobalt .surtitre, .sur-cobalt .surtitre { color: var(--c-jaune); }

/* Intertitre d'introduction sous un h2 */
.intro { font-size: clamp(1.0625rem, 1.2vw, 1.25rem); max-width: 58ch; }

/* Filet fin, motif récurrent de la maquette */
.filet { height: 1px; background: var(--c-ligne); border: 0; margin: 0; }
.section-cobalt .filet, .sur-cobalt .filet { background: var(--c-ligne-inv); }

/* Visible uniquement par les lecteurs d'écran */
.hors-ecran {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Apparition discrète au défilement (désactivée si mouvement réduit) */
.apparait { opacity: 0; transform: translateY(14px); }
.apparait.vu { opacity: 1; transform: none; transition: opacity var(--d-long) var(--courbe), transform var(--d-long) var(--courbe); }
@media (prefers-reduced-motion: reduce) {
  .apparait, .apparait.vu { opacity: 1; transform: none; transition: none; }
}

/* Détail visible seulement à partir de la tablette (densité de lecture) */
.hors-mobile { display: none; }
@media (min-width: 768px) { .hors-mobile { display: flex; } }


/* ===== styles/composants.css ===== */
/* ============================================================
   AIRKOOL SUD — composants
   Un bloc par composant, dans l'ordre du catalogue Storybook.
   Aucune valeur brute : tout vient de tokens.css.
   ============================================================ */

/* ---------------------------------------------------------- 1. Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-3);
  min-height: var(--cible);
  padding: var(--e-4) var(--e-6);
  font-family: var(--f-texte); font-size: var(--t-petit); font-weight: 800;
  letter-spacing: .01em; text-decoration: none; text-align: center;
  border: 2px solid transparent; border-radius: var(--r-0);
  cursor: pointer;
  transition: background var(--d-court) var(--courbe), color var(--d-court) var(--courbe),
              border-color var(--d-court) var(--courbe), transform var(--d-court) var(--courbe);
}
.btn:active { transform: translateY(1px); }
.btn[aria-disabled="true"], .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn .fleche { transition: transform var(--d-court) var(--courbe); }
.btn:hover .fleche { transform: translateX(3px); }

.btn-primaire { background: var(--c-jaune); color: var(--c-profond); }
.btn-primaire:hover { background: var(--c-jaune-fonce); }

.btn-cobalt { background: var(--c-cobalt); color: var(--c-texte-clair); }
.btn-cobalt:hover { background: var(--c-cobalt-fonce); }

.btn-contour { background: transparent; color: var(--c-profond); border-color: var(--c-profond); }
.btn-contour:hover { background: var(--c-profond); color: var(--c-texte-clair); }
.sur-cobalt .btn-contour, .section-cobalt .btn-contour { color: var(--c-texte-clair); border-color: var(--c-ligne-inv); }
.sur-cobalt .btn-contour:hover, .section-cobalt .btn-contour:hover { background: var(--c-texte-clair); color: var(--c-cobalt); border-color: var(--c-texte-clair); }

.btn-pleine-largeur { width: 100%; }

/* état « envoi en cours » */
.btn[data-etat="chargement"] { pointer-events: none; }
.btn[data-etat="chargement"] .btn-texte { opacity: .55; }
.btn .rondache {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: rotation .8s linear infinite;
}
@keyframes rotation { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn .rondache { animation-duration: 2.4s; } }

/* ---------------------------------------------------------- 2. Lien fléché */
.lien-fleche {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: var(--cible);
  font-weight: 800; font-size: var(--t-petit); text-decoration: none;
  color: var(--c-cobalt);
  border-bottom: 2px solid transparent;
}
.lien-fleche:hover { border-bottom-color: currentColor; }
.lien-fleche .fleche { transition: transform var(--d-court) var(--courbe); }
.lien-fleche:hover .fleche { transform: translateX(4px); }
.sur-cobalt .lien-fleche, .section-cobalt .lien-fleche { color: var(--c-jaune); }

/* ---------------------------------------------------------- 3. Logo
   Symbole + mot-symbole en un seul SVG monochrome : il prend la couleur du
   texte environnant (blanc sur cobalt, bleu profond sur fond clair), donc
   aucune pastille blanche n'est nécessaire. */
/* le logo est un lien vers l'accueil : il garde une cible tactile de 44 px */
.logo { display: inline-flex; align-items: center; min-height: var(--cible); text-decoration: none; color: inherit; }
.logo .logo-svg { display: block; height: 30px; width: auto; }
.logo-symbole .logo-svg { height: 30px; }
@media (min-width: 768px) { .logo .logo-svg { height: 36px; } }
/* Les lettres suivent la couleur du texte ; la boucle a sa propre couleur :
   cobalt sur fond clair, jaune sur cobalt, blanche sur bleu profond. */
.logo .logo-accent { stroke: var(--c-cobalt); }
.entete .logo { color: var(--c-texte-clair); }
.entete .logo .logo-accent { stroke: var(--c-jaune); }
.entete-clair .logo { color: var(--c-profond); }
.entete-clair .logo .logo-accent { stroke: var(--c-cobalt); }
.menu-mobile .logo { color: var(--c-texte-clair); }
.menu-mobile .logo .logo-accent { stroke: var(--c-jaune); }
.pied .logo { color: var(--c-texte-clair); }
.pied .logo .logo-accent { stroke: var(--c-texte-clair); }

/* ---------------------------------------------------------- 4. En-tête */
.entete {
  position: sticky; top: 0; z-index: var(--z-entete);
  background: var(--c-cobalt); color: var(--c-texte-clair);
}
.entete-clair { background: var(--c-clair); color: var(--c-profond); border-bottom: 1px solid var(--c-ligne); }
.entete .conteneur {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-5);
  min-height: 64px; padding-block: var(--e-3);
}
@media (min-width: 1024px) { .entete .conteneur { min-height: 78px; } }

.nav-principale { display: none; }
@media (min-width: 1024px) {
  .nav-principale { display: flex; align-items: center; gap: var(--e-6); }
  .nav-principale a {
    text-decoration: none; font-size: var(--t-petit); font-weight: 600;
    padding-block: var(--e-2); border-bottom: 2px solid transparent;
  }
  .nav-principale a:hover { border-bottom-color: currentColor; }
  .nav-principale a[aria-current="page"] { border-bottom-color: var(--c-jaune); font-weight: 800; }
  .entete-clair .nav-principale a[aria-current="page"] { border-bottom-color: var(--c-cobalt); }
}
.entete-actions { display: flex; align-items: center; gap: var(--e-3); }
.entete .tel-entete { display: none; }
@media (min-width: 768px) {
  .entete .tel-entete {
    display: inline-flex; align-items: center; gap: var(--e-2);
    min-height: var(--cible); padding-inline: var(--e-2);
    font-weight: 800; font-size: var(--t-petit); text-decoration: none; white-space: nowrap;
  }
}
.entete .btn { padding: var(--e-3) var(--e-5); white-space: nowrap; }
/* Sur les très petits écrans, l'action reste portée par la barre fixe et le
   menu : on libère l'en-tête plutôt que de casser le libellé sur deux lignes. */
@media (max-width: 479px) { .entete .entete-actions .btn { display: none; } }

.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--cible); height: var(--cible);
  background: transparent; border: 0; cursor: pointer; color: inherit;
}
@media (min-width: 1024px) { .burger { display: none; } }
.burger span { display: block; width: 24px; height: 2px; background: currentColor; position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 24px; height: 2px; background: currentColor;
  transition: transform var(--d-court) var(--courbe), top var(--d-court) var(--courbe);
}
.burger span::before { top: -7px; } .burger span::after { top: 7px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* ---------------------------------------------------------- 5. Menu mobile */
.menu-mobile {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--c-cobalt); color: var(--c-texte-clair);
  display: flex; flex-direction: column;
  padding: var(--e-4) 0 calc(var(--e-6) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto; overscroll-behavior: contain;
}
.menu-mobile[hidden] { display: none; }
.menu-mobile .tete { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); }
.menu-mobile .fermer {
  width: var(--cible); height: var(--cible); display: grid; place-items: center;
  background: transparent; border: 0; color: inherit; cursor: pointer; font-size: 1.5rem; line-height: 1;
}
.menu-mobile nav { display: flex; flex-direction: column; margin-top: var(--e-6); }
.menu-mobile nav a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  min-height: 60px; padding-block: var(--e-3);
  font-family: var(--f-titre); font-weight: 800; font-size: clamp(1.5rem, 6vw, 2rem);
  letter-spacing: var(--l-titre); text-decoration: none;
  border-bottom: 1px solid var(--c-ligne-inv);
}
.menu-mobile nav a[aria-current="page"] { color: var(--c-jaune); }
.menu-mobile .pied-menu { margin-top: auto; padding-top: var(--e-8); display: grid; gap: var(--e-3); }
.menu-mobile .pied-menu .btn { width: 100%; }
body.menu-ouvert { overflow: hidden; }

/* ---------------------------------------------------------- 6. Hero */
.hero { position: relative; background: var(--c-cobalt); color: var(--c-texte-clair); overflow: hidden; isolation: isolate; }
.hero-decor {
  position: absolute; inset: 0; z-index: var(--z-decor);
  pointer-events: none;                 /* jamais au-dessus d'une zone cliquable */
  background: var(--c-cobalt);
}
.hero-decor img, .hero-decor video { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.hero-decor video { position: absolute; inset: 0; opacity: 0; transition: opacity var(--d-long) var(--courbe); }
.hero-decor video[data-visible="true"] { opacity: 1; }
@media (min-width: 1024px) { .hero-decor img, .hero-decor video { object-position: 60% 50%; } }

.hero .conteneur { position: relative; z-index: var(--z-contenu); }
.hero-grille {
  display: grid; gap: var(--e-6);
  padding-block: clamp(var(--e-8), 5vw, var(--e-20));
}
@media (min-width: 1024px) {
  /* la colonne de texte est bornée en pixels : « Moins de pertes. » tient sur une ligne */
  .hero-grille { grid-template-columns: minmax(0, 720px) minmax(0, 1fr); align-items: center; gap: var(--e-10); }
}
.hero-texte { max-width: none; }
.hero .display + .hero-sous { margin-top: var(--e-5); }
.hero-sous { font-size: clamp(1.125rem, 2.4vw, 1.5rem); font-weight: 500; max-width: 26ch; margin: 0; }
.hero-precision { margin: var(--e-3) 0 0; font-size: var(--t-petit); color: var(--c-texte-doux-inv); max-width: 34ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-8); }
.hero-micro { margin: var(--e-3) 0 0; font-size: var(--t-micro); color: var(--c-texte-doux-inv); }
.hero-liste {
  margin: var(--e-8) 0 0; padding: 0 0 0 var(--e-5); list-style: none;
  border-left: 1px solid var(--c-ligne-inv);
  display: grid; gap: var(--e-2);
  font-size: var(--t-micro); letter-spacing: var(--l-etiquette); text-transform: uppercase; font-weight: 600;
}
.hero-produit { position: relative; display: none; }
@media (min-width: 1024px) {
  .hero-produit { display: block; }
  .hero-produit img { width: 100%; max-width: 430px; margin-inline: auto; filter: drop-shadow(0 30px 60px rgba(7, 23, 53, .35)); }
}
/* Sur mobile le produit reste visible mais compact, sous le bouton */
.hero-produit-mobile { margin-top: var(--e-6); }
.hero-produit-mobile img { width: min(56%, 240px); margin-left: auto; filter: drop-shadow(0 18px 34px rgba(7, 23, 53, .35)); }
@media (min-width: 1024px) { .hero-produit-mobile { display: none; } }

/* Bouton de pause de l'animation (discret, en bas du hero) */
.hero-pause {
  position: absolute; right: var(--gouttiere); bottom: var(--e-4); z-index: var(--z-contenu);
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: 36px; padding: var(--e-2) var(--e-3);
  background: rgba(7, 23, 53, .42); color: var(--c-texte-clair);
  border: 1px solid var(--c-ligne-inv); cursor: pointer;
  font-size: var(--t-micro); font-weight: 700;
}
.hero-pause:hover { background: rgba(7, 23, 53, .62); }
.hero-pause[hidden] { display: none; }

/* ---------------------------------------------------------- 7. Choix du besoin */
.choix-besoin { display: grid; gap: 0; margin-top: var(--e-8); border-top: 1px solid var(--c-ligne); }
.choix {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-5);
  min-height: 84px; padding-block: var(--e-5);
  border-bottom: 1px solid var(--c-ligne);
  text-decoration: none; color: inherit;
  transition: padding-inline var(--d-moyen) var(--courbe), background var(--d-court) var(--courbe);
}
.choix:hover { background: var(--c-clair-2); padding-inline: var(--e-4); }
.choix .intitule { font-family: var(--f-titre); font-weight: 800; font-size: clamp(1.25rem, 3.4vw, 1.75rem); letter-spacing: var(--l-titre); }
.choix .detail { display: block; font-family: var(--f-texte); font-weight: 500; font-size: var(--t-micro); color: var(--c-texte-doux); letter-spacing: 0; margin-top: 2px; }
.choix .fleche { flex: 0 0 auto; transition: transform var(--d-court) var(--courbe); }
.choix:hover .fleche { transform: translateX(6px); }
.note-pied {
  display: flex; align-items: center; gap: var(--e-3);
  margin-top: var(--e-6); font-size: var(--t-micro); color: var(--c-texte-doux);
}
.note-pied svg { flex: 0 0 auto; }

/* ---------------------------------------------------------- 8. Carte solution */
.grille-solutions { display: grid; gap: var(--e-6); margin-top: var(--e-10); }
@media (min-width: 768px) { .grille-solutions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-8); } }
@media (min-width: 1024px) { .grille-solutions-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.solution {
  display: flex; flex-direction: column;
  background: var(--c-blanc); border: 1px solid var(--c-ligne);
  text-decoration: none; color: inherit;
  transition: border-color var(--d-court) var(--courbe), transform var(--d-court) var(--courbe);
}
.solution:hover { border-color: var(--c-cobalt); transform: translateY(-2px); }
.solution .visuel { position: relative; aspect-ratio: 4 / 3; background: var(--c-clair-2); overflow: hidden; }
.solution .visuel img { width: 100%; height: 100%; object-fit: cover; }
.solution .visuel img.detoure { object-fit: contain; padding: var(--e-6); }
.solution .corps { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-6); flex: 1; }
.solution h3 { margin: 0; font-size: var(--t-h3); }
.solution p { margin: 0; color: var(--c-texte-doux); font-size: var(--t-petit); flex: 1; }
.solution .lien-fleche { margin-top: var(--e-2); }

/* ---------------------------------------------------------- 9. Étiquette */
.etiquette {
  display: inline-block; align-self: flex-start;
  padding: 5px var(--e-3);
  background: var(--c-cobalt); color: var(--c-texte-clair);
  font-size: var(--t-etiquette); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.etiquette-jaune { background: var(--c-jaune); color: var(--c-profond); }
.etiquette-contour { background: transparent; color: var(--c-cobalt); border: 1px solid currentColor; }

/* ---------------------------------------------------------- 10. Exemples chiffrés */
.grille-exemples { display: grid; gap: var(--e-5); margin-top: var(--e-10); }
@media (min-width: 768px) { .grille-exemples { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) {
  .grille-exemples[data-nombre="1"] { grid-template-columns: minmax(0, 420px); }
  .grille-exemples[data-nombre="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.exemple { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-6); background: var(--c-blanc); border: 1px solid var(--c-ligne); }
.exemple h3 { margin: 0; font-size: var(--t-h4); }
.exemple dl { display: grid; gap: var(--e-2); margin: 0; }
.exemple .ligne { display: flex; justify-content: space-between; gap: var(--e-4); border-bottom: 1px dotted var(--c-ligne); padding-bottom: var(--e-2); font-size: var(--t-petit); }
.exemple dt { color: var(--c-texte-doux); margin: 0; }
.exemple dd { margin: 0; font-weight: 800; white-space: nowrap; }
.exemple .resultat { margin-top: auto; padding-top: var(--e-3); font-family: var(--f-titre); font-weight: 800; font-size: var(--t-h4); color: var(--c-cobalt); }

/* ---------------------------------------------------------- 11. Étapes */
.etapes { display: grid; gap: var(--e-6); margin-top: var(--e-10); counter-reset: etape; }
@media (min-width: 768px) { .etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-8); } }
.etape { display: flex; flex-direction: column; gap: var(--e-3); padding-top: var(--e-5); border-top: 3px solid var(--c-jaune); counter-increment: etape; }
.etape::before { content: counter(etape, decimal-leading-zero); font-family: var(--f-titre); font-weight: 900; font-size: var(--t-h3); color: var(--c-cobalt); line-height: 1; }
.section-cobalt .etape::before { color: var(--c-jaune); }
.etape h3 { margin: 0; font-size: var(--t-h4); }
.etape p { margin: 0; font-size: var(--t-petit); color: var(--c-texte-doux); }
.section-cobalt .etape p { color: var(--c-texte-doux-inv); }

/* ---------------------------------------------------------- 12. Accordéon (FAQ) */
.accordeon { border-top: 1px solid var(--c-ligne); }
.accordeon details { border-bottom: 1px solid var(--c-ligne); }
.accordeon summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-5);
  min-height: 64px; padding-block: var(--e-4);
  font-family: var(--f-titre); font-weight: 700; font-size: var(--t-h4);
  cursor: pointer; list-style: none;
}
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon summary .signe { position: relative; flex: 0 0 auto; width: 18px; height: 18px; }
.accordeon summary .signe::before, .accordeon summary .signe::after {
  content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; background: var(--c-cobalt);
  transition: transform var(--d-court) var(--courbe);
}
.accordeon summary .signe::after { transform: rotate(90deg); }
.accordeon details[open] summary .signe::after { transform: rotate(0); }
.accordeon .reponse { padding-bottom: var(--e-5); max-width: 68ch; color: var(--c-texte-doux); }
.accordeon .reponse > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- 13. Champs de formulaire */
.champ { display: grid; gap: var(--e-2); margin-bottom: var(--e-5); }
.champ label { font-size: var(--t-petit); font-weight: 700; }
.champ .aide { font-size: var(--t-micro); color: var(--c-texte-doux); font-weight: 500; }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: var(--cible); padding: var(--e-3) var(--e-4);
  font-size: 1rem;                                /* 16 px : pas de zoom iOS */
  background: var(--c-blanc); color: var(--c-profond);
  border: 1px solid var(--c-texte-doux); border-radius: var(--r-1);
  transition: border-color var(--d-court) var(--courbe), box-shadow var(--d-court) var(--courbe);
}
.champ textarea { min-height: 120px; resize: vertical; }
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--c-profond); }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--c-cobalt); box-shadow: 0 0 0 3px rgba(6, 75, 216, .18); outline: none; }
.champ[data-erreur="true"] input, .champ[data-erreur="true"] select, .champ[data-erreur="true"] textarea { border-color: var(--c-erreur); }
.champ .message-erreur { display: flex; align-items: flex-start; gap: var(--e-2); font-size: var(--t-micro); font-weight: 700; color: var(--c-erreur); }
.champ input:disabled, .champ select:disabled, .champ textarea:disabled { background: var(--c-clair-2); color: var(--c-texte-doux); cursor: not-allowed; }
.requis { color: var(--c-erreur); }

/* Le formulaire vit sur fond clair, même à l'intérieur d'une section cobalt */
.carte-formulaire { background: var(--c-clair); color: var(--c-profond); padding: var(--e-6); border: 1px solid var(--c-ligne); }
@media (min-width: 768px) { .carte-formulaire { padding: var(--e-8); } }
.mention-rgpd { font-size: var(--t-micro); color: var(--c-texte-doux); margin: var(--e-4) 0; }

/* ---------------------------------------------------------- 14. Messages */
.message { display: flex; gap: var(--e-3); padding: var(--e-4); border-left: 4px solid; font-size: var(--t-petit); }
.message-info { background: var(--c-clair-2); border-color: var(--c-cobalt); color: var(--c-profond); }
.message-succes { background: var(--c-succes-fond); border-color: var(--c-succes); color: var(--c-succes); }
.message-erreur { background: var(--c-erreur-fond); border-color: var(--c-erreur); color: var(--c-erreur); }
.message a { color: inherit; }
.message[hidden] { display: none; }

/* ---------------------------------------------------------- 15. Bloc contact */
.grille-contact { display: grid; gap: var(--e-8); }
@media (min-width: 900px) { .grille-contact { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--e-12); align-items: start; } }
.coordonnees { display: grid; gap: var(--e-4); }
.coordonnees a { font-weight: 800; text-decoration: none; }
.coordonnees a:hover { text-decoration: underline; }
.coordonnees .gros { font-family: var(--f-titre); font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800; letter-spacing: var(--l-titre); }

/* ---------------------------------------------------------- 16. Barre de contact mobile */
.barre-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-barre);
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--gouttiere) calc(var(--e-3) + env(safe-area-inset-bottom, 0px));
  background: var(--c-cobalt); color: var(--c-texte-clair);
  border-top: 1px solid var(--c-cobalt-clair);
  text-decoration: none;
}
.barre-mobile .intitule { font-weight: 800; font-size: var(--t-petit); }
.barre-mobile .fleche { margin-left: auto; }
.barre-mobile[hidden] { display: none; }
@media (min-width: 1024px) { .barre-mobile { display: none; } }
/* la barre ne doit jamais masquer la fin du contenu ni le bandeau cookies */
body.avec-barre-mobile { padding-bottom: 68px; }
@media (min-width: 1024px) { body.avec-barre-mobile { padding-bottom: 0; } }

/* ---------------------------------------------------------- 17. Pied de page */
.pied { background: var(--c-profond); color: var(--c-texte-clair); padding-top: var(--section-y); }
.pied a { color: inherit; text-decoration: none; }
.pied a:hover { text-decoration: underline; }
.pied-haut { display: grid; gap: var(--e-10); padding-bottom: var(--e-12); }
@media (min-width: 768px) { .pied-haut { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pied-haut { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: var(--e-8); } }
.pied h2 { font-size: var(--t-etiquette); letter-spacing: var(--l-etiquette); text-transform: uppercase; color: var(--c-jaune); margin: 0 0 var(--e-4); font-family: var(--f-texte); font-weight: 800; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); font-size: var(--t-petit); }
.pied .marque p { color: var(--c-texte-doux-inv); font-size: var(--t-petit); max-width: 42ch; }
.pied .partenaire { display: flex; align-items: center; gap: var(--e-3); margin-top: var(--e-5); }
.pied .partenaire img { height: 34px; width: auto; background: var(--c-blanc); padding: 4px 7px; }
.pied .partenaire span { font-size: var(--t-micro); color: var(--c-texte-doux-inv); }
.pied .youtube { display: inline-flex; align-items: center; gap: var(--e-3); margin-top: var(--e-5); padding: var(--e-3) var(--e-4); border: 1px solid var(--c-ligne-inv); min-height: var(--cible); }
.pied .youtube:hover { background: rgba(250, 250, 247, .08); text-decoration: none; }
.pied .youtube strong { font-size: var(--t-petit); }
.pied .youtube small { display: block; font-size: var(--t-micro); color: var(--c-texte-doux-inv); }
.pied-bas { border-top: 1px solid var(--c-ligne-inv); padding-block: var(--e-5) var(--e-8); display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-6); justify-content: space-between; font-size: var(--t-micro); color: var(--c-texte-doux-inv); }
.pied-bas nav { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-5); }

/* ---------------------------------------------------------- 18. Bandeau cookies */
.cookies {
  position: fixed; left: var(--e-4); right: var(--e-4); bottom: var(--e-4); z-index: var(--z-cookies);
  display: none; gap: var(--e-4); flex-wrap: wrap; align-items: center;
  max-width: 760px; margin-inline: auto; padding: var(--e-5);
  background: var(--c-blanc); color: var(--c-profond); border: 1px solid var(--c-ligne); box-shadow: var(--ombre-2);
}
.cookies.visible { display: flex; }
.cookies p { margin: 0; flex: 1 1 240px; font-size: var(--t-petit); }
.cookies .btn { padding: var(--e-3) var(--e-5); }
/* remontée au-dessus de la barre de contact mobile */
@media (max-width: 1023px) { body.avec-barre-mobile .cookies { bottom: 76px; } }

/* ---------------------------------------------------------- 19. Tableau de caractéristiques */
.specs { width: 100%; border-collapse: collapse; font-size: var(--t-petit); }
.specs th, .specs td { text-align: left; padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--c-ligne); vertical-align: top; }
.specs th { width: 42%; color: var(--c-texte-doux); font-weight: 700; }
.specs tr:last-child th, .specs tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------- 20. Bandeau de page intérieure */
.bandeau { background: var(--c-cobalt); color: var(--c-texte-clair); position: relative; overflow: hidden; }
.bandeau .conteneur { position: relative; z-index: var(--z-contenu); padding-block: clamp(var(--e-10), 6vw, var(--e-20)); }
.bandeau h1 { max-width: 20ch; }
.bandeau .intro { color: var(--c-texte-doux-inv); }
/* rappel discret du ruban, en filigrane et jamais sous du texte */
.bandeau-ruban { position: absolute; inset: 0; z-index: var(--z-decor); pointer-events: none; }
/* le ruban garde sa couleur : il est simplement fondu vers la gauche, là où
   se trouve le texte. Un voile semi-transparent virerait au kaki sur le cobalt. */
.bandeau-ruban img {
  width: 100%; height: 100%; object-fit: cover; object-position: 92% 45%;
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 6%, transparent 42%);
  mask-image: linear-gradient(to left, #000 0%, #000 6%, transparent 42%);
}
@media (min-width: 900px) {
  .bandeau-ruban img {
    -webkit-mask-image: linear-gradient(to left, #000 0%, #000 22%, transparent 62%);
    mask-image: linear-gradient(to left, #000 0%, #000 22%, transparent 62%);
  }
}

.fil-ariane { display: flex; flex-wrap: wrap; gap: var(--e-2); font-size: var(--t-micro); margin-bottom: var(--e-4); }
.fil-ariane a { text-decoration: none; opacity: .82; }
.fil-ariane a:hover { opacity: 1; text-decoration: underline; }
.fil-ariane span { opacity: .8; }   /* 4,8:1 sur cobalt ; à .5 on tombait à 2,8:1 */

/* ---------------------------------------------------------- 21. Fiche produit */
.fiche { display: grid; gap: var(--e-8); }
@media (min-width: 900px) { .fiche { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-12); align-items: start; } }
.fiche-visuel { background: var(--c-blanc); border: 1px solid var(--c-ligne); display: grid; place-items: center; padding: var(--e-8); aspect-ratio: 1 / 1; }
.fiche-visuel picture { display: contents; }
.fiche-visuel img { width: 100%; height: 100%; object-fit: contain; }
.fiche-infos > * + * { margin-top: var(--e-5); }
.liste-benefices { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.liste-benefices li { display: flex; gap: var(--e-3); font-size: var(--t-petit); }
.liste-benefices li::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin-top: 7px; background: var(--c-jaune); }

/* ---------------------------------------------------------- 22. Vidéo à la demande */
.video-facade { position: relative; aspect-ratio: 16 / 9; background: var(--c-profond); overflow: hidden; }
.video-facade img { width: 100%; height: 100%; object-fit: cover; }
.video-facade button {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: transparent; border: 0; cursor: pointer; padding: 0;
}
.video-facade .lecture {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 74px; height: 52px;
  background: var(--c-jaune); color: var(--c-profond);
  transition: transform var(--d-court) var(--courbe);
}
.video-facade button:hover .lecture { transform: translate(-50%, -50%) scale(1.06); }
.video-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-legende { font-size: var(--t-micro); color: var(--c-texte-doux); margin-top: var(--e-3); }

/* ---------------------------------------------------------- 23. Solution mise en avant */
.solution-vedette { display: grid; gap: var(--e-8); margin-top: var(--e-10); align-items: center; }
@media (min-width: 900px) { .solution-vedette { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--e-12); } }
.solution-vedette .visuel { position: relative; }
.solution-vedette .visuel > picture > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* la photo du matériel détourée chevauche la photo de contexte, comme dans la maquette */
.solution-vedette .visuel .produit { position: absolute; right: -4%; bottom: -8%; width: 46%; }
.solution-vedette .visuel .produit img { width: 100%; filter: drop-shadow(0 18px 34px rgba(7, 23, 53, .3)); }
.solution-vedette .texte > * + * { margin-top: var(--e-4); }
.solution-vedette h3 { font-size: var(--t-h2); margin: 0; }
.solution-vedette p { margin: 0; color: var(--c-texte-doux); }
@media (max-width: 899px) { .solution-vedette .visuel .produit { width: 40%; right: 0; bottom: -6%; } }

/* ---------------------------------------------------------- 24. Financement (grille de points) */
.grille-financement { display: grid; gap: var(--e-6); margin-top: var(--e-10); }
@media (min-width: 700px) { .grille-financement { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-8); } }
.grille-financement .point { padding-top: var(--e-4); border-top: 1px solid var(--c-ligne-inv); }
.grille-financement h3 { font-size: var(--t-h4); margin: 0 0 var(--e-2); color: var(--c-jaune); }
.grille-financement p { margin: 0; color: var(--c-texte-doux-inv); font-size: var(--t-petit); }

/* ---------------------------------------------------------- 25. Page de confirmation */
.confirmation { display: grid; gap: var(--e-6); max-width: 60ch; }
.confirmation .coche { display: grid; place-items: center; width: 64px; height: 64px; background: var(--c-jaune); color: var(--c-profond); }

/* ---------------------------------------------------------- 26. Catalogue /produits
   Grille comparable d'un coup d'œil : quatre cartes de même hauteur, chiffre
   clé et lien alignés en bas. Maquette : design/maquettes/maquette-solutions.png */
.barre-filtres {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e-3); margin-bottom: var(--e-6);
}
.barre-filtres > div[role="group"] { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.barre-filtres .compte { margin: 0; font-size: var(--t-micro); color: var(--c-texte-doux); }
.puce-filtre {
  min-height: var(--cible); padding: 0 var(--e-4);
  border: 1px solid var(--c-ligne); background: var(--c-blanc); color: var(--c-profond);
  font: inherit; font-size: var(--t-petit); font-weight: 700; cursor: pointer;
  transition: background var(--d-court) var(--courbe), border-color var(--d-court) var(--courbe);
}
.puce-filtre:hover { border-color: var(--c-cobalt); }
.puce-filtre.active { background: var(--c-cobalt); border-color: var(--c-cobalt); color: var(--c-texte-clair); }

.grille-catalogue { display: grid; gap: var(--e-6); }
@media (min-width: 860px) { .grille-catalogue { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-8); } }

.carte-catalogue {
  display: flex; flex-direction: column; background: var(--c-blanc);
  border: 1px solid var(--c-ligne); border-top: 4px solid var(--c-jaune);
  /* l'en-tête est collant : l'ancre /produits#destratification ne doit pas passer dessous */
  scroll-margin-top: calc(72px + var(--e-6));
}
.carte-catalogue .visuel { display: block; background: var(--c-clair-2); overflow: hidden; }
.carte-catalogue .visuel img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  transition: transform var(--d-moyen) var(--courbe);
}
.carte-catalogue .visuel img.detoure { object-fit: contain; padding: var(--e-6); }
.carte-catalogue:hover .visuel img { transform: scale(1.02); }
.carte-catalogue .corps { padding: var(--e-5) var(--e-5) var(--e-4); flex: 1; }
.carte-catalogue .categorie {
  margin: 0 0 var(--e-2); font-size: var(--t-micro); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-cobalt);
}
.carte-catalogue h2 { font-size: var(--t-h3); margin: 0 0 var(--e-2); }
.carte-catalogue h2 a { text-decoration: none; }
.carte-catalogue h2 a:hover { text-decoration: underline; }
.carte-catalogue .resume { margin: 0; color: var(--c-texte-doux); }
.carte-catalogue .points { list-style: none; margin: var(--e-4) 0 0; padding: 0; }
.carte-catalogue .points li {
  position: relative; padding-left: var(--e-5); margin-top: var(--e-2);
  font-size: var(--t-petit); color: var(--c-texte-doux);
}
.carte-catalogue .points li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 10px; height: 3px; background: var(--c-jaune);
}
.carte-catalogue .bilan {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  padding: var(--e-4) var(--e-5); border-top: 1px solid var(--c-ligne);
}
.carte-catalogue .chiffre { margin: 0; display: flex; flex-direction: column; }
.carte-catalogue .chiffre .valeur {
  font-family: var(--f-titre); font-weight: 800; font-size: var(--t-h4);
  color: var(--c-cobalt); letter-spacing: -.02em; line-height: 1.1;
}
.carte-catalogue .chiffre .legende { font-size: var(--t-micro); color: var(--c-texte-doux); }
.carte-catalogue[hidden] { display: none; }

/* ---------------------------------------------------------- 27. Bloc contexte d'une fiche */
.contexte-solution { display: grid; gap: var(--e-8); align-items: center; }
@media (min-width: 900px) { .contexte-solution { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--e-12); } }
.contexte-solution img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------------------------------------------------------- 28. Pages de texte légal */
.texte-legal h2 { font-size: var(--t-h3); margin-top: var(--e-10); }
.texte-legal h2:first-child { margin-top: 0; }
.texte-legal p { color: var(--c-texte-doux); max-width: 70ch; }
.texte-legal a { color: var(--c-cobalt); }

/* ---------------------------------------------------------- 29. Page contact
   Deux chemins de poids égal : réserver un appel, ou décrire son projet.
   Maquette : design/maquettes/maquette-contact.png */
.grille-deux-chemins { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-6); }
@media (min-width: 900px) { .grille-deux-chemins { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-8); align-items: start; } }

.carte-contact {
  background: var(--c-blanc); border: 1px solid var(--c-ligne);
  border-top: 4px solid var(--c-jaune); padding: var(--e-6);
  min-width: 0;   /* sinon le ruban de jours élargit la page entière */
}
@media (min-width: 600px) { .carte-contact { padding: var(--e-8); } }
.carte-contact > h2 { font-size: var(--t-h2); margin: var(--e-2) 0 var(--e-3); }
.carte-contact > .doux { margin: 0 0 var(--e-6); }
.carte-contact .surtitre { color: var(--c-cobalt); margin: 0; }

/* --- Agenda --- */
.rdv-etape + .rdv-etape { margin-top: var(--e-6); }
.rdv-legende {
  margin: 0 0 var(--e-3); font-size: var(--t-micro); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-texte-doux);
}
/* Les jours défilent horizontalement : au doigt sur mobile, sans rien couper. */
.rdv-jours {
  display: flex; gap: var(--e-2); overflow-x: auto; min-width: 0; max-width: 100%;
  padding-bottom: var(--e-2); scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.rdv-jours .rdv-puce { flex: none; scroll-snap-align: start; min-width: 62px; flex-direction: column; gap: 2px; }
.rdv-heures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-2); }
@media (min-width: 420px) { .rdv-heures { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) { .rdv-heures { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.rdv-puce {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--cible); padding: var(--e-2) var(--e-3);
  border: 1px solid var(--c-ligne); background: var(--c-blanc); color: var(--c-profond);
  font: inherit; font-size: var(--t-petit); font-weight: 700; cursor: pointer;
  transition: border-color var(--d-court) var(--courbe), background var(--d-court) var(--courbe);
}
.rdv-puce:hover { border-color: var(--c-cobalt); }
.rdv-puce.active { background: var(--c-cobalt); border-color: var(--c-cobalt); color: var(--c-texte-clair); }
.rdv-puce .j { font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.rdv-puce.active .j { opacity: 1; }   /* blanc à 75 % sur cobalt : contraste insuffisant */
.rdv-puce .n { font-family: var(--f-titre); font-size: var(--t-h4); font-weight: 800; line-height: 1; }

.rdv-recap { margin: var(--e-5) 0 var(--e-3); font-size: var(--t-petit); font-weight: 700; color: var(--c-cobalt); min-height: 1.4em; }
.rdv-recap.erreur { color: var(--c-erreur); }
.rdv-note { margin: var(--e-3) 0 0; font-size: var(--t-micro); }
.rdv-secours { margin: 0; }
.rdv-confirme { font-size: var(--t-h4); color: var(--c-profond); margin: 0 0 var(--e-2); }

/* --- Bande « nous joindre » --- */
.joindre { display: grid; gap: var(--e-6); }
@media (min-width: 760px) { .joindre { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-8); } }
.joindre p { margin: 0 0 var(--e-1); }
.joindre .surtitre { color: var(--c-jaune); }
.joindre .numero { font-family: var(--f-titre); font-size: var(--t-h2); font-weight: 800; letter-spacing: -.02em; }
.joindre .numero a { color: var(--c-jaune); text-decoration: none; }
.joindre .numero a:hover { text-decoration: underline; }

/* --- Appel à l'action des autres pages --- */
.appel-contact { display: grid; gap: var(--e-6); align-items: center; }
@media (min-width: 860px) { .appel-contact { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: var(--e-10); } }
.appel-contact .texte > * + * { margin-top: var(--e-3); }
.appel-contact .texte h2 { margin: 0; }
.appel-contact .gros { font-family: var(--f-titre); font-size: var(--t-h3); font-weight: 800; letter-spacing: -.02em; }
.appel-contact .gros a { color: var(--c-jaune); text-decoration: none; }
.appel-contact .gros a:hover { text-decoration: underline; }
.appel-contact .actions { display: grid; gap: var(--e-3); }

/* ---------------------------------------------------------- 30. Blog
   Index en cartes, article en colonne étroite : le texte reste lisible,
   la mesure ne dépasse pas la longueur de ligne confortable. */
.grille-articles { display: grid; gap: var(--e-6); }
@media (min-width: 760px) { .grille-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-8); } }

.carte-article {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--c-blanc); border: 1px solid var(--c-ligne);
  border-top: 4px solid var(--c-jaune); padding: var(--e-6);
}
.carte-article .meta { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; margin: 0 0 var(--e-4); }
.carte-article .duree { font-size: var(--t-micro); color: var(--c-texte-doux); }
.carte-article h2 { font-size: var(--t-h4); margin: 0 0 var(--e-3); }
.carte-article h2 a { text-decoration: none; }
.carte-article h2 a:hover { text-decoration: underline; }
.carte-article .chapeau { margin: 0 0 var(--e-5); color: var(--c-texte-doux); flex: 1; }
.carte-article .bas {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  margin: 0; padding-top: var(--e-4); border-top: 1px solid var(--c-ligne);
  font-size: var(--t-micro); color: var(--c-texte-doux);
}

.article > * + * { margin-top: var(--e-5); }
.article h2 { font-size: var(--t-h3); margin-top: var(--e-10); }
.article p { max-width: 68ch; }
.article .meta-article {
  display: flex; gap: var(--e-4); flex-wrap: wrap;
  font-size: var(--t-micro); color: var(--c-texte-doux);
  padding-bottom: var(--e-5); border-bottom: 1px solid var(--c-ligne);
}
.article .liste-points { list-style: none; margin: 0; padding: 0; max-width: 68ch; }
.article .liste-points li { position: relative; padding-left: var(--e-5); margin-top: var(--e-3); }
.article .liste-points li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 10px; height: 3px; background: var(--c-jaune);
}
.encadre-article { background: var(--c-clair-2); border-left: 4px solid var(--c-cobalt); padding: var(--e-5); }
.encadre-article .titre { font-weight: 800; color: var(--c-profond); margin: 0 0 var(--e-2); }
.encadre-article p:last-child { margin: 0; }
.source-article { font-size: var(--t-micro); color: var(--c-texte-doux); }
.source-article a { color: var(--c-cobalt); }
.mention-article {
  font-size: var(--t-micro); color: var(--c-texte-doux);
  border-top: 1px solid var(--c-ligne); padding-top: var(--e-4); max-width: 68ch;
}
.lien-suite { margin-top: var(--e-6); }

.tableau-defilant { overflow-x: auto; }
.tableau-article { width: 100%; border-collapse: collapse; font-size: var(--t-petit); }
.tableau-article th, .tableau-article td {
  text-align: left; padding: var(--e-3); border-bottom: 1px solid var(--c-ligne); white-space: nowrap;
}
.tableau-article thead th {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-texte-doux); border-bottom: 2px solid var(--c-profond);
}
.tableau-article tbody th { font-weight: 700; color: var(--c-profond); }

.villes-article { margin-top: var(--e-10); background: var(--c-clair-2); padding: var(--e-6); border-top: 4px solid var(--c-cobalt); }
.villes-article .titre {
  margin: 0 0 var(--e-4); font-size: var(--t-micro); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-cobalt);
}
.villes-article ul { list-style: none; margin: 0 0 var(--e-4); padding: 0; display: grid; gap: var(--e-3); }
@media (min-width: 640px) { .villes-article ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .villes-article ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.villes-article li { display: flex; flex-direction: column; }
.villes-article li span { font-size: var(--t-micro); color: var(--c-texte-doux); }
.villes-article .doux { margin: 0; font-size: var(--t-micro); }

.suite-blog { margin-top: var(--e-10); padding-top: var(--e-6); border-top: 1px solid var(--c-ligne); }
.suite-blog h2 { font-size: var(--t-h4); margin: 0 0 var(--e-4); }
.suite-blog ul { list-style: none; margin: 0 0 var(--e-5); padding: 0; display: grid; gap: var(--e-3); }
.suite-blog a { color: var(--c-cobalt); }

/* ---------------------------------------------------------- 31. Pages par type de bâtiment */
.grille-chiffres-segment { display: grid; gap: var(--e-5); margin-bottom: var(--e-10); }
@media (min-width: 720px) { .grille-chiffres-segment { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-8); } }
.chiffre-segment { display: flex; flex-direction: column; gap: var(--e-1); margin: 0; padding-top: var(--e-3); border-top: 4px solid var(--c-jaune); }
.chiffre-segment .valeur { font-family: var(--f-titre); font-size: var(--t-h2); font-weight: 800; color: var(--c-cobalt); letter-spacing: -.03em; line-height: 1.05; }
.chiffre-segment .legende { font-size: var(--t-petit); color: var(--c-texte-doux); }

.grille-problemes { display: grid; gap: var(--e-6); }
@media (min-width: 820px) { .grille-problemes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-8); } }
.carte-probleme { background: var(--c-blanc); border: 1px solid var(--c-ligne); padding: var(--e-6); min-width: 0; }
.carte-probleme h2 { font-size: var(--t-h4); margin: 0 0 var(--e-3); }
.carte-probleme p { margin: 0; color: var(--c-texte-doux); }
.carte-probleme .reponse { margin-top: var(--e-5); }

.visuel-segment { margin: var(--e-10) 0 0; }
.visuel-segment img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.points-segment { margin-top: var(--e-8); max-width: 74ch; }

.grille-villes { display: grid; gap: var(--e-5); margin-top: var(--e-8); }
@media (min-width: 720px) { .grille-villes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-6); } }
.carte-ville { background: var(--c-blanc); border: 1px solid var(--c-ligne); border-top: 4px solid var(--c-cobalt); padding: var(--e-5); min-width: 0; }
.carte-ville h3 { font-size: var(--t-h4); margin: 0 0 var(--e-2); }
.carte-ville .dep { margin: 0; font-size: var(--t-petit); color: var(--c-texte-doux); }
.carte-ville .zone { margin: var(--e-3) 0 0; font-size: var(--t-petit); }
.carte-ville .zone strong { font-family: var(--f-titre); font-size: var(--t-h4); color: var(--c-cobalt); letter-spacing: -.02em; }
.note-villes { margin-top: var(--e-6); max-width: 74ch; }

/* ---------------------------------------------------------- 32. Bulle d'aide
   Panneau flottant de la page d'accueil. Au-dessus de la barre mobile,
   jamais au-dessus du bandeau cookies : le consentement passe d'abord. */
.bulle { position: fixed; right: var(--e-4); bottom: var(--e-4); z-index: var(--z-entete); display: grid; justify-items: end; gap: var(--e-3); }
@media (max-width: 1023px) {
  .bulle { left: var(--e-3); right: var(--e-3); justify-items: stretch; }
  body.avec-barre-mobile .bulle { bottom: 76px; }
}

.bulle-lanceur {
  position: relative; display: inline-flex; align-items: center; gap: var(--e-3);
  min-height: var(--cible); padding: 0 var(--e-5);
  background: var(--c-cobalt); color: var(--c-texte-clair); border: 0;
  font: inherit; font-size: var(--t-petit); font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 20px rgba(7, 23, 53, .28);
}
.bulle-lanceur:hover { background: var(--c-cobalt-fonce); }
@media (max-width: 767px) { .bulle-lanceur { justify-content: center; } }
.bulle-marque { display: inline-flex; color: var(--c-texte-clair); }
.bulle-marque .logo-accent { stroke: var(--c-jaune); }
.bulle-pastille { position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; background: var(--c-jaune); border: 2px solid var(--c-cobalt); }

.bulle-panneau {
  display: flex; flex-direction: column; width: min(360px, calc(100vw - 2 * var(--e-4)));
  max-height: min(560px, calc(100vh - 140px));
  background: var(--c-blanc); border: 1px solid var(--c-ligne); border-top: 4px solid var(--c-jaune);
  box-shadow: 0 16px 48px rgba(7, 23, 53, .28);
}
@media (max-width: 767px) { .bulle-panneau { width: 100%; max-height: min(70vh, 520px); } }

.bulle-tete { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-4); background: var(--c-cobalt); color: var(--c-texte-clair); }
.bulle-identite { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.bulle-identite strong { font-family: var(--f-titre); font-size: var(--t-petit); }
.bulle-identite span { font-size: var(--t-micro); color: var(--c-texte-doux-inv); }
.bulle-fermer { display: inline-flex; align-items: center; justify-content: center; width: var(--cible); height: var(--cible); margin: calc(-1 * var(--e-2)) calc(-1 * var(--e-2)) calc(-1 * var(--e-2)) 0; background: none; border: 0; color: inherit; cursor: pointer; }
.bulle-fermer:hover { background: rgba(255, 255, 255, .14); }

.bulle-fil { flex: 1; overflow-y: auto; padding: var(--e-4); display: grid; gap: var(--e-3); align-content: start; }
.bulle-fil .msg { max-width: 92%; padding: var(--e-3) var(--e-4); font-size: var(--t-petit); }
.bulle-fil .msg p { margin: 0; }
.bulle-fil .msg-bot { background: var(--c-clair-2); color: var(--c-profond); justify-self: start; }
.bulle-fil .msg-moi { background: var(--c-cobalt); color: var(--c-texte-clair); justify-self: end; }
.bulle-fil .msg-attente { opacity: .6; }
.bulle-fil .carte-rdv-compacte { max-width: 100%; }

.bulle-suggestions { display: flex; flex-wrap: wrap; gap: var(--e-2); padding: 0 var(--e-4) var(--e-3); }
.bulle-suggestions button {
  min-height: 36px; padding: 0 var(--e-3); border: 1px solid var(--c-ligne);
  background: var(--c-blanc); color: var(--c-profond); font: inherit; font-size: var(--t-micro); cursor: pointer;
}
.bulle-suggestions button:hover { border-color: var(--c-cobalt); }
.bulle-indispo { margin: 0; padding: 0 var(--e-4) var(--e-4); font-size: var(--t-micro); color: var(--c-texte-doux); }

.bulle-saisie { display: flex; gap: var(--e-2); padding: var(--e-3) var(--e-4); border-top: 1px solid var(--c-ligne); }
.bulle-saisie input { flex: 1; min-width: 0; min-height: var(--cible); padding: 0 var(--e-3); border: 1px solid var(--c-ligne); font: inherit; font-size: var(--t-petit); }
.bulle-saisie input:focus { border-color: var(--c-cobalt); outline: none; box-shadow: 0 0 0 3px rgba(6, 75, 216, .18); }
.bulle-saisie button { display: inline-flex; align-items: center; justify-content: center; width: var(--cible); height: var(--cible); flex: none; background: var(--c-cobalt); color: var(--c-texte-clair); border: 0; cursor: pointer; }
.bulle-saisie button:hover { background: var(--c-cobalt-fonce); }

.bulle-pied { display: flex; align-items: center; gap: var(--e-2); margin: 0; padding: 0 var(--e-4) var(--e-3); font-size: var(--t-micro); color: var(--c-texte-doux); }
.bulle-pied a { color: var(--c-cobalt); }

/* L'agenda glissé dans le chat est plus dense que celui de /contact */
.carte-rdv-compacte { padding: var(--e-4); border-top-width: 3px; }
.carte-rdv-compacte .rdv-etape + .rdv-etape { margin-top: var(--e-4); }
.carte-rdv-compacte .rdv-heures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.carte-rdv-compacte .rdv-puce { min-height: 40px; font-size: var(--t-micro); }
.carte-rdv-compacte .rdv-jours .rdv-puce { min-width: 52px; }
.carte-rdv-compacte .rdv-recap { margin: var(--e-4) 0 var(--e-2); font-size: var(--t-micro); }
.carte-rdv-compacte .rdv-note { font-size: var(--t-micro); }


/* ===== styles/conversation.css ===== */
/* ============================================================
   Écran de conversation (/chat)
   Plein écran, même langage visuel que le site : angles vifs,
   cobalt et jaune, aucune bulle arrondie.
   ============================================================ */
html.page-conversation, body.page-conversation { height: 100%; overflow: hidden; overscroll-behavior: none; }
body.page-conversation { background: var(--c-clair); }

/* --app-h et --app-top suivent la hauteur réellement visible sur mobile
   (barre du navigateur, clavier ouvert) : voir js/chat.js. */
.conversation {
  position: fixed; top: var(--app-top, 0px); left: 0; right: 0;
  height: 100vh; height: 100dvh; height: var(--app-h, 100dvh);
  display: flex; flex-direction: column;
  background: var(--c-clair); font-family: var(--f-texte);
}

/* ---------------------------------------------------------- Barre du haut */
.conversation-tete {
  flex: 0 0 auto; display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  padding-top: calc(var(--e-3) + env(safe-area-inset-top, 0px));
  background: var(--c-cobalt); color: var(--c-texte-clair);
}
.conversation-retour, .conversation-appel {
  flex: 0 0 auto; width: var(--cible); height: var(--cible);
  display: grid; place-items: center; color: inherit; text-decoration: none;
}
.conversation-retour:hover, .conversation-appel:hover { background: rgba(250, 250, 247, .14); }
.conversation-marque {
  flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px;
  background: var(--c-jaune); color: var(--c-profond);
}
.conversation-identite { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.conversation-identite strong { font-family: var(--f-titre); font-weight: 800; font-size: 1.125rem; letter-spacing: var(--l-titre); }
.conversation-identite span { font-size: var(--t-micro); color: var(--c-texte-doux-inv); }

/* ---------------------------------------------------------- Avertissement */
.conversation-avis {
  flex: 0 0 auto; margin: 0; padding: var(--e-3) var(--e-4);
  border-left: 5px solid var(--c-jaune); background: var(--c-clair-2);
  font-size: var(--t-micro); line-height: 1.5; color: var(--c-texte-doux);
}
.conversation-avis strong { display: block; color: var(--c-profond); font-size: var(--t-petit); }
.conversation-avis a { color: var(--c-cobalt); font-weight: 700; }

/* ---------------------------------------------------------- Fil */
.conversation-fil {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: var(--e-4);
  padding: var(--e-5) var(--e-4);
  width: 100%; max-width: 820px; margin-inline: auto;
}
.conversation-fil .msg { max-width: 86%; padding: var(--e-4); font-size: var(--t-petit); line-height: 1.55; }
.conversation-fil .msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.conversation-fil .msg time { display: block; margin-top: var(--e-2); font-size: var(--t-micro); opacity: .62; }
.msg-bot { align-self: flex-start; background: var(--c-blanc); color: var(--c-profond); border-left: 4px solid var(--c-cobalt); }
.msg-moi { align-self: flex-end; background: var(--c-cobalt); color: var(--c-texte-clair); font-weight: 600; }
.msg-moi time { opacity: .8; }

/* points d'attente */
.msg.attente { padding: var(--e-4) var(--e-5); }
.msg.attente i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; background: var(--c-cobalt); animation: conv-pts 1.2s infinite ease-in-out; }
.msg.attente i:nth-child(2) { animation-delay: .18s; }
.msg.attente i:nth-child(3) { animation-delay: .36s; }
@keyframes conv-pts { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .msg.attente i { animation: none; } }

/* ---------------------------------------------------------- Indisponible */
.conversation-indispo {
  flex: 0 0 auto; margin: 0; padding: var(--e-4);
  background: var(--c-erreur-fond); color: var(--c-erreur);
  border-left: 5px solid var(--c-erreur); font-size: var(--t-petit); text-align: center;
}
.conversation-indispo[hidden] { display: none; }
.conversation-indispo a { color: inherit; font-weight: 800; white-space: nowrap; }

/* ---------------------------------------------------------- Suggestions */
.conversation-suggestions {
  flex: 0 0 auto; display: flex; gap: var(--e-2);
  padding: var(--e-3) var(--e-4); overflow-x: auto; scrollbar-width: none;
  width: 100%; max-width: 820px; margin-inline: auto;
}
.conversation-suggestions::-webkit-scrollbar { display: none; }
.conversation-suggestions[hidden] { display: none; }
.conversation-suggestions button {
  flex: 0 0 auto; min-height: var(--cible); padding: var(--e-2) var(--e-4);
  background: transparent; color: var(--c-cobalt);
  border: 1px solid var(--c-cobalt); border-radius: var(--r-0);
  font: inherit; font-size: var(--t-micro); font-weight: 700; white-space: nowrap; cursor: pointer;
  transition: background var(--d-court) var(--courbe), color var(--d-court) var(--courbe);
}
.conversation-suggestions button:hover { background: var(--c-cobalt); color: var(--c-texte-clair); }

/* ---------------------------------------------------------- Saisie */
.conversation-saisie {
  flex: 0 0 auto; display: flex; align-items: stretch; gap: var(--e-2);
  padding: var(--e-3) var(--e-4);
  padding-bottom: calc(var(--e-3) + env(safe-area-inset-bottom, 0px));
  background: var(--c-blanc); border-top: 1px solid var(--c-ligne);
  width: 100%; max-width: 820px; margin-inline: auto;
}
.conversation-saisie input {
  flex: 1; min-width: 0; min-height: var(--cible); padding: var(--e-3) var(--e-4);
  font: inherit; font-size: 1rem;              /* 16 px : pas de zoom iOS */
  color: var(--c-profond); background: var(--c-blanc);
  border: 1px solid var(--c-texte-doux); border-radius: var(--r-1);
}
.conversation-saisie input:focus { border-color: var(--c-cobalt); box-shadow: 0 0 0 3px rgba(6, 75, 216, .18); outline: none; }
.conversation-saisie input:disabled { background: var(--c-clair-2); color: var(--c-texte-doux); }
.conversation-saisie button {
  flex: 0 0 auto; width: var(--cible); min-height: var(--cible);
  display: grid; place-items: center;
  background: var(--c-jaune); color: var(--c-profond);
  border: 0; border-radius: var(--r-0); cursor: pointer;
  transition: background var(--d-court) var(--courbe);
}
.conversation-saisie button:hover { background: var(--c-jaune-fonce); }
.conversation-saisie button:disabled { opacity: .5; cursor: not-allowed; }

@media (min-width: 900px) {
  .conversation-tete { padding-inline: max(var(--e-4), calc((100% - 820px) / 2)); }
}