/* =====================================================================
   ShieldOne — landing publique (LOT LANDING v2)
   CSS pur, aucune dépendance. Palette et typographie FIXES (mandat §3).
   ===================================================================== */

/* ---------- Palette (non négociable) ---------- */
:root {
  --encre: #141D28;
  --encre-2: #3D4854;
  --fond: #F7F8F8;
  --blanc: #FFFFFF;
  --ligne: #E2E5E8;
  --accent: #24466B;        /* Bleu Sûreté */
  --accent-fonce: #1A3450;
  --accent-pale: #EDF1F6;
  --bande: #16283C;
  --bande-texte: #D9E2EC;
  --vert-couvert: #2F7D52;
  --vert-couvert-pale: #E8F3ED;
  --orange-attention: #E8700A;
  --orange-attention-pale: #FDF0E3;
  --erreur: #B3261E;        /* rouge : erreurs de formulaire UNIQUEMENT */
}

/* ---------- Fonts (Inter self-hostée, woff2, latin) ---------- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/inter-800.woff2') format('woff2'); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--encre);
  background: var(--blanc);
}
h1, h2, h3, p, ul, figure { margin: 0; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
img, svg { display: block; max-width: 100%; }
ul { padding: 0; list-style: none; }

/* Focus clavier visible partout (mandat §5) */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.conteneur { max-width: 1120px; margin: 0 auto; padding: 0 36px; }
@media (max-width: 640px) { .conteneur { padding: 0 20px; } }

/* Ancres sous l'en-tête sticky */
section[id] { scroll-margin-top: 80px; }

/* ---------- Typographie ---------- */
.h1 { font-size: clamp(30px, 5.4vw, 46px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; }
.h2 { font-size: clamp(24px, 4vw, 34px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.chapeau { color: var(--encre-2); max-width: 680px; margin-top: 14px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px; border-radius: 10px;
  font: inherit; font-size: 16px; font-weight: 600; text-decoration: none;
  cursor: pointer; border: 1.5px solid transparent;
}
.btn-plein { background: var(--accent); color: var(--blanc); }
.btn-plein:hover { background: var(--accent-fonce); }
.btn-contour { background: var(--blanc); color: var(--accent); border-color: var(--accent); }
.btn-contour:hover { background: var(--accent-pale); }
.btn[disabled] { opacity: 0.65; cursor: default; }

/* ---------- En-tête sticky ---------- */
.entete {
  position: sticky; top: 0; z-index: 20; height: 64px;
  background: var(--blanc); border-bottom: 1px solid var(--ligne);
}
.entete-int { display: flex; align-items: center; gap: 28px; height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--encre); min-height: 44px; }
/* Écusson du logo : dimensionné par la HAUTEUR (le max-width 180px du mandat
   supposait un logo horizontal, impossible dans un en-tête de 64px).
   aspect-ratio + object-fit contain + flex none : Safari iOS déformait
   l'image en flex (constat mobile du 16.08) — le ratio est désormais verrouillé
   quel que soit le calcul de largeur du moteur. */
.logo picture { flex: none; display: block; }
.logo-main {
  height: 40px; width: auto;
  aspect-ratio: 73 / 96; object-fit: contain; flex: none;
}
@media (max-width: 768px) { .logo-main { height: 34px; } }
.logo-nom { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.nav-principale { display: flex; gap: 6px; margin-left: auto; }
.nav-principale a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  color: var(--encre-2); text-decoration: none; font-size: 15px; font-weight: 600; border-radius: 8px;
}
.nav-principale a:hover { color: var(--accent); background: var(--accent-pale); }
/* nowrap : sur iPhone (texte agrandi, largeur 375px), le libellé se repliait
   sur deux lignes et « déformait » le bouton (constat mobile du 16.08). */
.entete .btn { min-height: 44px; padding: 8px 18px; font-size: 15px; white-space: nowrap; }
@media (max-width: 860px) {
  .nav-principale { display: none; }
  .entete .btn { margin-left: auto; }
}
@media (max-width: 480px) {
  .entete-int { gap: 12px; }
  .entete .btn { padding: 8px 14px; font-size: 14px; }
  .logo-nom { font-size: 17px; }
  /* Les CTA du héro passent pleine largeur : tactiles et sans repli disgracieux. */
  .hero-actions .btn { width: 100%; }
}
/* ≤360px (iPhone SE, plis) : le nowrap du CTA déborderait de ~9px à 320px
   (mesure de revue) — le nom cède, l'écusson reste (l'aria-label du lien
   porte toujours « ShieldOne »). */
@media (max-width: 360px) {
  .logo-nom { display: none; }
}

/* ---------- Héro ---------- */
.hero { background: var(--blanc); padding: 56px 0 64px; position: relative; overflow: hidden; }
/* Fond héro (mandat prod 16.08.2026) : image à opacity .4 (valeur du mandat)
   + VOILE blanc dégradé par-dessus, plus dense sous la colonne de texte.
   Motif MESURÉ (revue du 16.08.2026) : sans voile, le fond effectif sous le
   texte descend à ~rgb(155) — --encre-2 y tombait à 3.3:1, sous l'AA de 4.5:1.
   Avec le voile (≥ 0.35 de blanc sur la moitié texte), le fond remonte à
   ~rgb(190+) : --encre-2 ≥ 5:1, --encre ≥ 9:1. */
.hero-fond { position: absolute; inset: 0; z-index: 0; }
.hero-fond img, .hero-fond picture { width: 100%; height: 100%; }
.hero-fond img { object-fit: cover; opacity: 0.4; }
.hero-fond::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.60) 0%,
    rgba(255, 255, 255, 0.40) 48%,
    rgba(255, 255, 255, 0.10) 100%);
}
/* Mobile : une seule colonne, le texte couvre toute la largeur → voile uniforme. */
@media (max-width: 960px) {
  .hero-fond::after { background: rgba(255, 255, 255, 0.50); }
}
.hero > .conteneur { position: relative; z-index: 1; }
.hero-grille { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 36px; align-items: start; }
@media (max-width: 960px) { .hero-grille { grid-template-columns: minmax(0, 1fr); } }

.badge-surtitre {
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  background: var(--accent-pale); color: var(--accent);
  font-size: 14px; font-weight: 600; margin-bottom: 18px;
}
.hero .h1 { margin-bottom: 16px; }
.sous-titre { font-size: clamp(17px, 2vw, 20px); color: var(--encre-2); max-width: 560px; }

/* Ligne créneaux — fond orange pâle, signal porté par le filet et l'icône.
   Écart assumé au mandat (§1.2 demandait le TEXTE en --orange-attention) :
   #E8700A sur #FDF0E3 mesure 2.8:1, sous le seuil AA de 4.5:1 exigé au §5.
   Le texte reste en --encre ; l'orange porte le fond, le filet et l'icône. */
.ligne-creneaux {
  display: flex; align-items: center; gap: 10px;
  margin-top: 20px; padding: 12px 16px; border-radius: 10px;
  background: var(--orange-attention-pale);
  border-left: 3px solid var(--orange-attention);
  font-size: 15.5px; color: var(--encre); max-width: 560px;
  /* Hauteur réservée AVANT l'injection JS de la valeur : 1 ligne en desktop,
     2 lignes en étroit — sinon le remplissage décale les CTA (CLS mesuré). */
  min-height: 48px;
}
@media (max-width: 640px) { .ligne-creneaux { min-height: 72px; } }
.ligne-creneaux[hidden] { display: none; }
.ligne-creneaux svg { flex: none; color: var(--orange-attention); }
.ligne-creneaux strong { font-weight: 700; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero-actions .btn { min-height: 52px; }

/* .preuve-sociale-vide : encore utilisée par la bande de preuve d'usage
   (constante vidée = bande masquée). La bande de stats du HÉRO a été retirée
   (mandat urgent « héro pur »). */
.preuve-sociale-vide { display: none; }

/* ---------- Capture produit (grille de couverture fictive) ---------- */
.capture-produit {
  background: var(--blanc); border: 1px solid var(--ligne); border-radius: 12px;
  overflow: hidden; font-size: 12px; min-width: 0;
  /* La table défile DANS la carte (capture-defile) : la page, elle, ne
     déborde jamais horizontalement (mandat §5 via l'invariant grid min-width). */
}
.capture-entete {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px;
  padding: 14px 16px; border-bottom: 1px solid var(--ligne);
}
.capture-societe { font-size: 13.5px; font-weight: 700; }
.capture-periode { font-size: 12px; color: var(--encre-2); }
.capture-defile { overflow-x: auto; }
.capture-table { border-collapse: collapse; width: 100%; min-width: 430px; }
.capture-table th, .capture-table td { border-top: 1px solid var(--ligne); padding: 0; }
.capture-table thead th {
  border-top: 0; font-size: 10.5px; font-weight: 600; color: var(--encre-2);
  padding: 8px 2px; text-align: center;
}
.capture-table .site {
  font-size: 11px; font-weight: 600; color: var(--encre);
  text-align: left; padding: 10px 8px 10px 16px; white-space: nowrap;
}
.capture-cellule { padding: 4px 2px; text-align: center; }
/* Texte des pastilles en --encre-2 (AA : le vert sur vert pâle mesure 4.4:1,
   insuffisant à cette taille) ; l'état couvert/non couvert est porté par la
   couleur de fond, le filet et la légende. */
.pastille {
  display: block; margin: 2px; padding: 7px 3px 6px; border-radius: 6px;
  background: var(--vert-couvert-pale); color: var(--encre-2);
  font-size: 9.5px; font-weight: 600; line-height: 1.25; white-space: nowrap;
}
.pastille-trou {
  background: var(--orange-attention-pale); color: var(--encre);
  border: 1px solid var(--orange-attention);
}
.pastille-trou .trou-libelle { display: block; font-weight: 700; }
.capture-legende {
  display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--ligne);
  font-size: 11px; color: var(--encre-2);
}
.legende-point { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: baseline; }
.legende-point.vert { background: var(--vert-couvert); }
.legende-point.orange { background: var(--orange-attention); }

/* ---------- Preuve d'usage (LOT CONVERSION) ---------- */
.social-proof { background: var(--accent-pale); padding: 36px 0; }
/* Colonnes FIGÉES (pas d'auto-fit) : entre deux largeurs, auto-fit changeait
   le nombre de rangées APRÈS l'injection JS → décalage (constat de revue).
   Hauteurs réservées avec marge pour les libellés sur 2 lignes. */
.social-proof-grille {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; text-align: center;
  min-height: 92px;
}
@media (max-width: 640px) {
  .social-proof-grille { grid-template-columns: 1fr; min-height: 272px; }
}
.social-proof-nombre { font-size: 28px; font-weight: 800; color: var(--accent); margin-bottom: 4px; line-height: 1.15; }
.social-proof-libelle { font-size: 14px; color: var(--encre-2); line-height: 1.4; }

/* ---------- « Comment ça marche » (19.08.2026) ----------------------------
   Remplace le calculateur ROI, à son emplacement. Une <ol> en 2×2 : l'ordre
   des étapes EST l'information, et la grille reprend le patron déjà éprouvé
   de la section produit — aucun système de mise en page nouveau.
   AJOUTS SEULEMENT : aucune règle existante n'est modifiée. */
.comment { background: var(--fond); }
.etapes {
  list-style: none; margin: 48px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px;
}
/* Seuil à 1200 px, comme le mandat le fixe : deux colonnes sur desktop, une
   étape après l'autre en dessous. La grille tiendrait à deux colonnes
   jusque vers 800 px — abaisser le seuil est un arbitrage, pas un correctif. */
@media (max-width: 1199px) { .etapes { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
.etape {
  background: var(--blanc); border: 1px solid var(--ligne); border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column; height: 100%;
}
/* Hauteur de visuel IDENTIQUE pour les quatre étapes — deux photos, deux
   icônes : sans cela, la frise perd son rythme et la lecture de l'ordre. */
.etape-visuel {
  margin: 0; height: 190px; overflow: hidden; position: relative;
  background: var(--fond); border-bottom: 1px solid var(--ligne);
}
.etape-visuel img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.etape-visuel-icone { display: flex; align-items: center; justify-content: center; color: var(--accent); }
/* Mention « Exemple fictif » posée SUR la capture, comme ailleurs sur le site :
   le nom de la société de démonstration ne doit jamais passer pour un client. */
.etape-visuel .capture-fictif {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 6px 14px;
  font-size: 12px; color: var(--encre-2); background: var(--blanc);
  border-top: 1px solid var(--ligne);
}
.etape-num {
  margin: 18px 20px 0; width: 30px; height: 30px; border-radius: 999px;
  background: var(--accent); color: var(--blanc);
  font-size: 15px; font-weight: 800; line-height: 30px; text-align: center;
}
.etape h3 { margin: 10px 0 0; padding: 0 20px; }
.etape-texte { font-size: 15px; color: var(--encre-2); line-height: 1.6; margin: 8px 0 0; padding: 0 20px 22px; }
.comment-cta { margin-top: 36px; }

/* ---------- Bandeau de témoignages (19.08.2026) --------------------------
   Fond --accent-pale, comme la bande de CHIFFRES d'usage en haut de page :
   les deux preuves appartiennent à la même famille visuelle, l'une
   quantitative, l'autre qualitative. Aucune teinte nouvelle.
   GRILLE STATIQUE : trois citations, trois cartes, aucune animation et aucune
   copie dupliquée. Rien à mettre en pause au survol ou au focus, rien à
   désactiver en mouvement réduit — la lecture au clavier et au lecteur d'écran
   est celle d'une liste ordinaire. Le seuil de 768 px est celui déjà employé
   par .produit-grid : au-dessus les trois cartes tiennent côte à côte, en
   dessous elles s'empilent. */
.bandeau-temoignages { background: var(--accent-pale); padding: 44px 0; }
.temoignages-titre {
  margin: 0 0 24px;
  font-size: 15px; font-weight: 700; color: var(--encre-2);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.temoignages-grille {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  margin: 0; padding: 0; list-style: none;
}
@media (max-width: 768px) { .temoignages-grille { grid-template-columns: minmax(0, 1fr); } }
.temoignage {
  background: var(--blanc); border: 1px solid var(--ligne); border-radius: 12px;
  padding: 22px 24px; display: flex; flex-direction: column; justify-content: space-between;
}
.temoignage blockquote { margin: 0; }
.temoignage blockquote p { font-size: 15.5px; line-height: 1.6; color: var(--encre); font-style: italic; margin: 0; }
.temoignage-source { font-size: 13.5px; color: var(--encre-2); margin: 14px 0 0; font-weight: 600; }

/* ---------- FAQ (LOT CONVERSION) ---------- */
.faq { background: var(--blanc); }
.faq-list { display: flex; flex-direction: column; gap: 12px; margin-top: 36px; max-width: 860px; }
.faq-item { background: var(--fond); border: 1px solid var(--ligne); border-radius: 12px; }
.faq-item summary {
  padding: 18px 20px; font-weight: 600; font-size: 16px; color: var(--encre);
  cursor: pointer; user-select: none; border-radius: 12px; list-style-position: inside;
}
.faq-item summary:hover { background: var(--accent-pale); }
.faq-item[open] summary { background: var(--accent-pale); border-bottom: 1px solid var(--ligne); border-radius: 12px 12px 0 0; }
.faq-answer { padding: 16px 20px 20px; font-size: 15px; color: var(--encre-2); line-height: 1.7; }
.faq-answer p { margin-bottom: 12px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer ul { list-style: disc; margin: 0 0 12px; padding-left: 22px; }
.faq-answer li { margin-bottom: 8px; }
.faq-answer strong { color: var(--encre); }

/* ---------- Sections génériques ---------- */
.section { padding: 72px 0; background: var(--blanc); }
.section-tete { max-width: 720px; margin-bottom: 40px; }

/* ---------- Bande souveraineté ---------- */
.bande-souverainete { background: var(--bande); color: var(--bande-texte); padding: 64px 0; }
.bande-souverainete .h2 { color: var(--blanc); margin-top: 18px; }
.bande-souverainete .intro { margin-top: 14px; max-width: 640px; }
.drapeau-ch { opacity: 0.9; color: var(--blanc); }
.grille-souverainete { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 44px; }
@media (max-width: 860px) { .grille-souverainete { grid-template-columns: minmax(0, 1fr); } }
.grille-souverainete h3 { color: var(--blanc); font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.grille-souverainete p { font-size: 15.5px; line-height: 1.55; }

/* ---------- Tour du produit — OPTION A (mandat 16.08.2026) ---------- */
.produit-section { background: var(--blanc); }
.produit-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px; margin-top: 48px;
}
@media (max-width: 768px) { .produit-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
.produit-card {
  background: var(--fond); border: 1px solid var(--ligne); border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column; height: 100%;
  transition: box-shadow 0.2s;
}
/* Ombre au survol : demandée par le mandat option A — écart assumé au
   « aucune ombre » du mandat v2, très légère (0.08). */
.produit-card:hover { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); }
.produit-card h3 { margin: 0; padding: 20px 20px 0; }
.produit-card p {
  font-size: 15px; color: var(--encre-2); line-height: 1.6;
  margin: 8px 0 0; padding: 0 20px 20px;
}
.produit-card-text-only {
  justify-content: center; min-height: 280px; padding: 32px 24px;
  background: var(--blanc);
}
.produit-card-text-only h3 { padding: 0; margin-bottom: 12px; }
.produit-card-text-only p { padding: 0; margin: 0; }


/* ---------- Ligne de ronde (séparateur signature) ---------- */
.ligne-ronde { height: 56px; display: flex; align-items: center; justify-content: center; background: var(--blanc); }
.ligne-ronde svg { color: var(--ligne); }

/* ---------- Conformité ---------- */
.carte-conformite {
  background: var(--blanc); border: 1px solid var(--ligne); border-radius: 12px; padding: 28px;
  max-width: 860px;
}
.liste-conformite { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.liste-conformite li { display: inline-flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 600; }
.liste-conformite svg { color: var(--vert-couvert); flex: none; }
.carte-conformite .note { margin-top: 14px; font-size: 15px; color: var(--encre-2); }

/* ---------- Section démo (le formulaire vit dans le MODAL, LOT FINAL) ---------- */
.demo-whatsapp { margin-top: 22px; font-size: 15.5px; color: var(--encre-2); }
/* Sans JavaScript, le modal est injoignable : le bouton d'ouverture reste
   masqué tant qu'app.js n'a pas posé la classe `js` (un bouton mort ment). */
.js-ouvrir-demo { display: none; }
.js .js-ouvrir-demo { display: inline-flex; }

/* ---------- Modal de réservation (dialog natif) ---------- */
/* Slide-in à droite sur desktop, pleine largeur sur mobile ; surcouche fixe :
   aucun décalage de mise en page, aucun scroll forcé. */
.modal-demo {
  position: fixed; inset: 0 0 0 auto; margin: 0; z-index: 30;
  width: min(440px, 100%); max-width: 100%;
  height: 100dvh; max-height: 100dvh;
  border: none; border-left: 1px solid var(--ligne);
  background: var(--blanc); color: var(--encre);
  padding: 0;
}
.modal-demo::backdrop { background: rgba(20, 29, 40, 0.45); }
.modal-int { padding: 28px; height: 100%; overflow-y: auto; }
.modal-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.modal-fermer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  background: var(--accent-pale); color: var(--accent);
  border: none; border-radius: 10px; cursor: pointer;
}
.modal-fermer:hover { background: var(--ligne); }
.micro-texte-modal { margin-top: 12px; font-size: 12px; color: var(--encre-2); line-height: 1.55; }
.modal-whatsapp { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--ligne); font-size: 14px; color: var(--encre-2); }

.champ { margin-bottom: 18px; }
.champ label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
/* Bordure des champs en --encre-2, PAS --ligne : WCAG 1.4.11 exige ≥ 3:1 pour
   la frontière d'un composant (#E2E5E8 sur blanc mesure 1.27:1). Constat de la
   relecture design du 15.08.2026 — écart au mandat §1.9, assumé pour l'AA. */
.champ input {
  width: 100%; height: 50px; padding: 0 14px;
  font: inherit; font-size: 16px; color: var(--encre);
  background: var(--blanc); border: 1.5px solid var(--encre-2); border-radius: 10px;
}
/* Focus des inputs : forme du mandat §1.9 (bordure --accent + halo --accent-pale),
   qui PRIME ici sur l'outline générique du §5 — l'indicateur opposable est le
   passage de bordure #E2E5E8 → #24466B (9.7:1 sur blanc), le halo est un renfort. */
.champ input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-pale); }
.champ input[aria-invalid="true"] { border-color: var(--erreur); }
.champ .erreur { display: none; margin-top: 6px; font-size: 14px; color: var(--erreur); }
.champ.en-erreur .erreur { display: block; }

/* Choix du créneau (LOT LP1) : un fieldset qui reprend la forme d'un .champ.
   Les radios échappent à `.champ input` (100 % de large, 50 px de haut) ; la
   ligne entière est la cible tactile, 44 px au moins. */
.champ-creneau { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.champ-creneau legend { padding: 0; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.champ .choix-creneau {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  margin: 0; font-weight: 500; font-size: 15px; cursor: pointer;
}
.champ .choix-creneau input {
  width: 20px; height: 20px; padding: 0; margin: 0; flex: none;
  accent-color: var(--accent); border: none;
}
/* `.champ input:focus` retire l'outline (le repère des champs texte est leur
   bordure) : un radio n'a pas de bordure, son focus clavier redevient VISIBLE
   (WCAG 2.4.7). Spécificité 0,3,1 > 0,2,1. */
.champ .choix-creneau input:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: none;
}
.champ-creneau-libre { margin-top: 8px; }

/* Honeypot : hors écran, hors tabulation, hors lecteurs (rejet serveur silencieux) */
.champ-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bandeau-echec {
  display: none; margin-bottom: 16px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--erreur); background: rgba(179, 38, 30, 0.06);
  font-size: 14.5px; color: var(--encre);
}
.bandeau-echec.visible { display: block; }

.btn-envoi { width: 100%; min-height: 52px; }
.micro-texte { margin-top: 14px; font-size: 14px; color: var(--encre-2); line-height: 1.5; }

.confirmation { text-align: left; }
.confirmation svg { color: var(--vert-couvert); margin-bottom: 16px; }
.confirmation .h3 { margin-bottom: 10px; }
.confirmation p { font-size: 15.5px; color: var(--encre-2); }
.confirmation .relance { margin-top: 14px; }

/* ---------- Pied de page ---------- */
.pied {
  background: var(--bande); color: var(--bande-texte); padding: 44px 0;
}
.pied-int {
  display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 18px;
}
@media (max-width: 860px) { .pied-int { flex-direction: column; align-items: flex-start; } }
.pied-signature { font-weight: 700; color: var(--blanc); letter-spacing: 0.01em; }
.pied-mentions { font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.pied-mentions a { color: var(--bande-texte); min-height: 44px; display: inline-flex; align-items: center; }
/* Ligne des pages légales : sous la signature, avant le copyright (mandat §1.6). */
.pied-legal-liens { margin-top: 10px; font-size: 12px; display: flex; flex-wrap: wrap; gap: 0 10px; align-items: center; }
.pied-legal-liens a { color: var(--bande-texte); text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; }
.pied-copyright { margin-top: 8px; font-size: 13.5px; }

/* =====================================================================
   LOT SEO-1 (16.08.2026) — pages d'intention (/logiciel-*) + pied de page.
   AJOUTS SEULEMENT : aucune règle ci-dessus n'est modifiée — la home garde
   son rendu à l'octet près (le parcours de conversion est intouchable).
   ===================================================================== */

/* Pied de page : formule d'entité en signature, slogan en second, maillage
   « En savoir plus » discret (sous les mentions, avant les liens légaux). */
.pied-slogan { font-weight: 400; color: var(--bande-texte); }
.pied-en-savoir-plus {
  margin-top: 18px; font-size: 13px; display: flex; flex-wrap: wrap;
  gap: 0 10px; align-items: center;
}
.pied-en-savoir-plus-titre { font-weight: 700; color: var(--blanc); margin-right: 4px; }
.pied-en-savoir-plus a {
  color: var(--bande-texte); text-decoration: underline;
  min-height: 44px; display: inline-flex; align-items: center;
}

/* Fil d'Ariane (au-dessus du H1) : liste ordonnée, séparateurs décoratifs. */
.fil-ariane { font-size: 13.5px; color: var(--encre-2); margin-bottom: 16px; }
.fil-ariane ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fil-ariane a { color: var(--accent); min-height: 44px; display: inline-flex; align-items: center; }
.fil-ariane [aria-current="page"] { color: var(--encre-2); }

/* Fiche héro (colonne droite des pages sans grille de couverture) :
   liste de faits, même carte que la capture produit. */
.hero-fiche {
  background: var(--blanc); border: 1px solid var(--ligne); border-radius: 12px;
  padding: 22px 24px; position: relative;
}
.hero-fiche-titre {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.hero-fiche li {
  display: flex; gap: 10px; align-items: flex-start; padding: 9px 0;
  border-top: 1px solid var(--ligne); font-size: 15px; line-height: 1.5; color: var(--encre);
}
.hero-fiche li:first-child { border-top: 0; }
.hero-fiche svg { flex: none; color: var(--vert-couvert); margin-top: 4px; }
.hero-fiche .hero-fiche-note { margin-top: 10px; font-size: 12.5px; color: var(--encre-2); }

/* Mention « exemple fictif » DANS la légende de la grille réutilisée (la légende
   passe en flex-wrap, la mention occupe sa propre ligne). */
.capture-legende-fictif { flex-wrap: wrap; }
.capture-fictif { flex-basis: 100%; font-style: italic; margin-top: 2px; }

/* Prose des sections « problème » et « conformité » (texte long, lisible). */
.prose { max-width: 720px; }
.prose p + p, .prose ul + p, .prose p + ul { margin-top: 14px; }
.prose h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin: 30px 0 8px; }
.prose ul { list-style: disc; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose li:last-child { margin-bottom: 0; }

/* Liste à coches (points de conformité, capacités). */
.liste-coches li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; font-size: 15.5px; line-height: 1.55; }
.liste-coches svg { flex: none; color: var(--vert-couvert); margin-top: 4px; }

/* Grille des modules : 3 colonnes, cartes compactes (sans image). */
.produit-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .produit-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .produit-grid-3 { grid-template-columns: minmax(0, 1fr); } }
.produit-card-compacte { min-height: 0; padding: 26px 24px; justify-content: flex-start; }
.produit-card-compacte h3 { padding: 0; margin-bottom: 10px; }
.produit-card-compacte p { padding: 0; margin: 0; }
.produit-card-compacte .produit-card-lien { margin-top: 12px; font-size: 14.5px; }

/* Maillage « Aller plus loin » : trois cartes-liens (deux autres pages + accueil). */
.liens-pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
@media (max-width: 860px) { .liens-pages { grid-template-columns: minmax(0, 1fr); } }
.lien-page {
  display: block; padding: 20px 22px; border: 1px solid var(--ligne); border-radius: 12px;
  background: var(--fond); text-decoration: none; color: var(--encre);
}
.lien-page:hover { border-color: var(--accent); background: var(--accent-pale); }
.lien-page-titre { display: block; font-weight: 700; margin-bottom: 6px; color: var(--accent); }
.lien-page-texte { display: block; font-size: 14.5px; color: var(--encre-2); line-height: 1.5; }
.produit-suite { margin-top: 28px; }
.aller-plus-loin { margin-top: 48px; }

/* =====================================================================
   LOT SEO-2 (16.08.2026) — comparatif + pages locales (pilier + cantons).
   AJOUTS SEULEMENT : aucune règle ci-dessus n'est modifiée. Aucun rouge
   (réservé aux alertes) ; les valeurs du tableau sont TEXTUELLES, le glyphe
   n'est qu'un renfort — un lecteur d'écran lit « Annoncé », pas une couleur.
   ===================================================================== */

/* Encadré méthodologique (AVANT le tableau : la légende précède la donnée). */
.encadre-methode {
  max-width: 860px; background: var(--accent-pale); border: 1px solid var(--ligne);
  border-radius: 12px; padding: 18px 22px; font-size: 15px; line-height: 1.65; color: var(--encre);
}
.encadre-methode p + p { margin-top: 8px; }
.legende-symboles { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 10px; font-size: 14px; color: var(--encre-2); }
.legende-symboles span { display: inline-flex; align-items: center; gap: 6px; }

/* Tableau : défilement horizontal sur mobile DANS son cadre (jamais la page). */
.tableau-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 8px; border: 1px solid var(--ligne); border-radius: 12px; background: var(--blanc); }
.tableau-comparatif { width: 100%; min-width: 780px; border-collapse: collapse; font-size: 14px; }
.tableau-comparatif caption { caption-side: bottom; text-align: left; padding: 12px 14px; font-size: 13px; color: var(--encre-2); border-top: 1px solid var(--ligne); }
.tableau-comparatif th, .tableau-comparatif td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ligne); line-height: 1.5; }
.tableau-comparatif thead th { background: var(--fond); font-weight: 700; color: var(--encre); border-bottom: 2px solid var(--ligne); }
.tableau-comparatif thead th .col-sous-titre { display: block; font-size: 12px; font-weight: 500; color: var(--encre-2); margin-top: 2px; }
.tableau-comparatif tbody tr:nth-child(even) { background: #FAFBFB; }
.tableau-comparatif tbody th { font-weight: 600; color: var(--encre); min-width: 220px; }
.tableau-comparatif tbody tr:last-child th, .tableau-comparatif tbody tr:last-child td { border-bottom: 0; }
.tableau-comparatif .cellule-note { display: block; font-size: 12.5px; color: var(--encre-2); margin-top: 3px; font-weight: 400; }
.badge-ok, .badge-partiel, .badge-nf, .badge-non { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 600; white-space: nowrap; }
/* Indice de défilement : visible sur les écrans où le tableau (min-width 780px) déborde de son cadre. */
.tableau-indice { display: none; font-size: 13px; color: var(--encre-2); margin: 8px 0 0; }
@media (max-width: 860px) { .tableau-indice { display: block; } }
.badge-ok { color: var(--vert-couvert); }
.badge-partiel { color: var(--encre); }
.badge-nf { color: var(--encre-2); font-weight: 500; }
.badge-non { color: var(--encre-2); }
.tableau-comparatif .glyphe { font-family: system-ui, sans-serif; }

/* Bloc « Données » compact des pages locales (même message que la bande, en court). */
.donnees-compact { max-width: 860px; }
.donnees-compact p + p { margin-top: 10px; }

/* Grille de cartes-liens à 2 ou 4 entrées (par canton, autres cantons). */
.liens-pages-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.liens-pages-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .liens-pages-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .liens-pages-2, .liens-pages-4 { grid-template-columns: minmax(0, 1fr); } }