/* =========================================================================
   Site Protect — Audit IA : design v2.

   ⚠ CETTE FEUILLE NE TOUCHE A AUCUN TEXTE. Elle est chargee APRES
   style.css et ne fait que recomposer : alternance des fonds, largeurs
   de section, en-tetes, numerotation. La retirer de inc/header.php rend
   exactement le site d'avant.

   Ce qui faisait « genere » dans la v1, et ce qui le remplace :

   · TOUT ETAIT SOMBRE, avec une alternance quasi invisible (#05070E /
     #080B15). → Les sections alternent franchement : papier blanc, nuit,
     et une bande pleine de la couleur de marque. Le rythme est le meme en
     theme sombre et en theme clair ; seuls l'en-tete, le hero, le rapport
     de scan et le pied de page suivent le bouton de theme.

   · UNE SEULE LARGEUR (1240 px) partout. → Trois : etroite (920),
     normale (1120), large (1320), selon ce que la section contient.

   · DES EN-TETES IDENTIQUES, empiles au-dessus de grilles de cartes. →
     Le titre a gauche et son texte d'appui a droite, cale en bas ; la FAQ
     en deux colonnes ; les surtitres numerotes (01 / Le constat).

   Technique : les « tons » redefinissent les JETONS sur la section
   elle-meme (--nuit, --carte, --texte, --trait…). Tout ce qui vit dedans
   suit sans une regle de plus. Ne jamais les poser sur :root — ils
   s'appliqueraient a la page entiere.
   ========================================================================= */


/* ------------------------------------------------------------------ TONS */

/* PAPIER — les jetons du theme clair, poses section par section. */
.section--constat,
.section--niveaux,
.section--tarifs,
.section--humain,
.section--contact {
  --nuit:       #FFFFFF;
  --nuit-2:     #FFFFFF;
  --carte:      #F7F7F4;
  --carte-2:    #EFEFE9;
  --trait:      rgba(16, 22, 34, .12);
  --trait-fort: rgba(16, 22, 34, .24);
  --texte:      #0C1019;
  --texte-2:    #4A505C;
  --texte-3:    #5E6472;
  --marque-vif: color-mix(in srgb, var(--marque) 82%, #000);
  --marque-texte: var(--marque);
  --crit: #D42A4E;
  --warn: #9A6300;
  --ok:   #10784F;
  background: var(--nuit);
  color: var(--texte);
}
/* Le second papier, un cran plus soutenu : deux sections claires
   voisines (niveaux apres controles, humain apres publics) ne doivent
   pas se fondre l'une dans l'autre. */
.section--niveaux,
.section--humain {
  --nuit:   #F4F3EE;
  --nuit-2: #F4F3EE;
  --carte:  #FFFFFF;
  --carte-2:#FAFAF7;
}

/* NUIT — les jetons du theme sombre, poses section par section : en
   theme clair, ces bandes restent sombres. C'est l'alternance. */
.section--controles,
.section--publics,
.section--faq {
  --nuit:       #05070E;
  --nuit-2:     #05070E;
  --carte:      #0C1020;
  --carte-2:    #111731;
  --trait:      rgba(142, 156, 210, .14);
  --trait-fort: rgba(142, 156, 210, .30);
  --texte:      #E8ECF9;
  --texte-2:    #A3ADCC;
  --texte-3:    #8A95B8;
  --marque-vif: color-mix(in srgb, var(--marque) 68%, #fff);
  --marque-texte: var(--marque-2);
  --crit: #FF5470;
  --warn: #FFB13D;
  --ok:   #34E5A0;
  background: var(--nuit);
  color: var(--texte);
}

/* MARQUE — une bande pleine de la couleur de marque, en APLAT (la charte
   interdit les degrades). L'encre est --marque-encre, choisie sur la
   luminance de la couleur : noire sur le teal, blanche sur un bleu
   sombre. Tous les jetons de texte et de filet en derivent. */
.section--parcours {
  --nuit:       var(--marque);
  --nuit-2:     var(--marque);
  --carte:      color-mix(in srgb, var(--marque-encre) 8%, var(--marque));
  --trait:      color-mix(in srgb, var(--marque-encre) 22%, transparent);
  --trait-fort: color-mix(in srgb, var(--marque-encre) 40%, transparent);
  --texte:      var(--marque-encre);
  --texte-2:    color-mix(in srgb, var(--marque-encre) 82%, var(--marque));
  --texte-3:    color-mix(in srgb, var(--marque-encre) 70%, var(--marque));
  --marque-texte: var(--marque-encre);
  background: var(--marque);
  color: var(--texte);
}
/* Sur la bande, ce qui etait « couleur de marque » devient l'encre :
   la marque sur elle-meme ne se verrait pas. */
.section--parcours .accent { color: var(--marque-encre); }
.section--parcours .surtitre__puce { background: var(--marque-encre); }
.section--parcours .surtitre::before { color: var(--marque-encre); }
.section--parcours .etape__num {
  background: var(--marque-encre);
  border-color: transparent;
  color: var(--marque);
}

/* Ce qui ne passe PAS par les jetons et doit donc etre repris a la main,
   faute de quoi un champ reste gris fonce sur du papier blanc. */
.section--constat code, .section--niveaux code, .section--tarifs code,
.section--humain code, .section--contact code {
  background: color-mix(in srgb, var(--marque) 10%, transparent);
  border-color: color-mix(in srgb, var(--marque) 30%, transparent);
}
.section--controles code, .section--publics code, .section--faq code {
  background: color-mix(in srgb, var(--marque) 8%, transparent);
  border-color: color-mix(in srgb, var(--marque) 16%, transparent);
}
.section--niveaux .bouton--trait,
.section--tarifs .bouton--trait,
.section--contact .bouton--trait { background: rgba(16, 22, 34, .04); }
.section--contact .champ input,
.section--contact .champ select,
.section--contact .champ textarea { background: #F7F7F4; }
.section--contact .champ input:focus,
.section--contact .champ select:focus,
.section--contact .champ textarea:focus { background: #FFFFFF; }


/* ------------------------------------------------------------ LARGEURS */
/* Trois largeurs au lieu d'une. La largeur suit ce que la section porte :
   un texte d'auteur se lit etroit, cinq formules de prix ont besoin de
   place. */
.section--humain   .enveloppe,
.section--niveaux  .enveloppe { width: min(980px, 100% - var(--gouttiere) * 2); }

.section--constat  .enveloppe,
.section--parcours .enveloppe,
.section--faq      .enveloppe,
.section--contact  .enveloppe { width: min(1120px, 100% - var(--gouttiere) * 2); }

.section--controles .enveloppe,
.section--tarifs    .enveloppe,
.section--publics   .enveloppe { width: min(1320px, 100% - var(--gouttiere) * 2); }


/* --------------------------------------------------- SURTITRES NUMEROTES */
/* Le numero est pose par CSS : aucun gabarit n'est touche, et l'ordre
   suit celui des sections tout seul si on en deplace une. */
main { counter-reset: section; }

.section .surtitre {
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--texte-2);
  gap: .8em;
}
.section .surtitre::before {
  counter-increment: section;
  content: counter(section, decimal-leading-zero);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--marque-texte);
}
/* Sur papier, la marque peut tomber a 2,5:1 : le numero passe en encre
   pleine, la barre oblique garde la couleur. */
.section--constat .surtitre::before, .section--niveaux .surtitre::before,
.section--tarifs .surtitre::before, .section--humain .surtitre::before,
.section--contact .surtitre::before { color: var(--texte); }
.section .surtitre__puce { width: 5px; height: 12px; }


/* ------------------------------------------------------------- EN-TETES */
/* Titre a gauche, texte d'appui a droite, cale sur la derniere ligne du
   titre. Les trois enfants sont deja la (surtitre, h2, texte) : la grille
   les place, rien n'est deplace dans le HTML. */
@media (min-width: 980px) {
  .section__tete:not(.section__tete--centree):has(> .texte) {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    column-gap: clamp(40px, 6vw, 110px);
    align-items: end;
  }
  .section__tete:not(.section__tete--centree):has(> .texte) > .surtitre { grid-column: 1; grid-row: 1; }
  .section__tete:not(.section__tete--centree):has(> .texte) > .titre-section {
    grid-column: 1; grid-row: 2; margin-bottom: 0;
  }
  .section__tete:not(.section__tete--centree):has(> .texte) > .texte {
    grid-column: 2; grid-row: 1 / span 2;
    margin: 0; padding-bottom: .4em;
  }
}
.section__tete { max-width: 72ch; }


/* -------------------------------------------------------------- SECTIONS */

/* Le constat : le duo d'ouverture reste, les chiffres passent en
   bandeau sans cartes — des valeurs separees par des filets. */
.section--constat .chiffres {
  background: transparent;
  border: 0; border-radius: 0;
  border-top: 1px solid var(--trait-fort);
  gap: 0;
}
.section--constat .chiffre {
  background: transparent;
  padding: clamp(26px, 3vw, 38px) clamp(18px, 2vw, 28px) 0 0;
}
@media (min-width: 1080px) {
  .section--constat .chiffre + .chiffre { border-left: 1px solid var(--trait); padding-left: clamp(18px, 2vw, 28px); }
}

/* Les controles : large, trois colonnes, sur nuit. */
.section--controles .grille-controles { border-radius: var(--rayon); }

/* Les niveaux : etroit, deux offres cote a cote. L'offre forte prend
   la couleur pleine au lieu d'un voile : c'est la qu'on veut l'oeil. */
.section--niveaux .niveau { box-shadow: 0 1px 2px rgba(16, 22, 34, .04), 0 18px 40px -26px rgba(16, 22, 34, .3); }
.section--niveaux .niveau--fort {
  background: var(--nuit-2);
  border: 2px solid var(--marque);
}

/* Le parcours : la bande de couleur. Les etapes se lisent comme une
   frise, le trait qui les relie prend l'encre. */
.section--parcours { padding-block: clamp(80px, 9vw, 128px); }
@media (min-width: 860px) {
  .section--parcours .parcours::before { background: var(--trait-fort); }
}

/* Les tarifs : large, et la formule forte en couleur pleine. */
.section--tarifs .formule { background: var(--carte); }
.section--tarifs .formule--fort {
  background: var(--marque);
  border-color: var(--marque);
  --texte:   var(--marque-encre);
  --texte-2: color-mix(in srgb, var(--marque-encre) 82%, var(--marque));
  --texte-3: color-mix(in srgb, var(--marque-encre) 72%, var(--marque));
  --trait-fort: color-mix(in srgb, var(--marque-encre) 40%, transparent);
  color: var(--texte);
}
.section--tarifs .formule--fort .formule__liste li::before { color: var(--marque-encre); }
/* Le badge chevauche le bord de la carte : une moitie sur la carte bleue,
   l autre sur la page BLANCHE. En blanc (l encre posee sur la profonde),
   il disparaissait a moitie. La teinte claire avec une encre sombre se lit
   sur les deux fonds (10:1). */
.section--tarifs .formule--fort .formule__badge { background: var(--marque-2); color: #05070E; }
.section--tarifs .formule--fort .bouton--plein {
  background: var(--marque-encre); color: var(--marque);
}

/* Pour qui : large, quatre situations sur une seule rangee. */
@media (min-width: 1100px) {
  .section--publics .publics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.section--publics .public { border-radius: var(--rayon); }

/* Qui verifie : etroit, un texte d'auteur. Le symbole passe au-dessus
   plutot qu'a cote — a cette largeur, une colonne de 150 px manger
   le tiers de la ligne. */
.section--humain .humain { grid-template-columns: minmax(0, 1fr); }
.section--humain .humain__symbole { width: clamp(64px, 8vw, 96px); }

/* La FAQ : titre a gauche, colle pendant qu'on lit ; questions a droite. */
@media (min-width: 980px) {
  .section--faq .enveloppe {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    column-gap: clamp(40px, 6vw, 96px);
    align-items: start;
  }
  .section--faq .section__tete { position: sticky; top: 120px; margin-bottom: 0; }
  .section--faq .faq { max-width: none; }
}

/* Le contact : sur papier, le formulaire en carte posee. */
.section--contact .duo__droite > * {
  background: #FFFFFF;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-lg);
  padding: clamp(22px, 3vw, 40px);
  box-shadow: 0 1px 2px rgba(16, 22, 34, .04), 0 22px 50px -30px rgba(16, 22, 34, .35);
}

/* Theme clair : le hero et la premiere section claire se touchent, un
   filet les separe. */
[data-theme="light"] .section--constat { border-top: 1px solid rgba(16, 22, 34, .10); }


/* ------------------------------------------------- PANNEAU DE COULEURS */
/* Un essayage, pas un reglage : il disparait avec PALETTE_VISIBLE. Ses
   couleurs sont FIXES — il ne doit pas changer d'aspect selon la teinte
   qu'on essaie ni selon le theme. */
/* En bas a GAUCHE : le bas droit est deja pris par le bouton de retour
   en haut. */
.pal { position: fixed; left: 18px; bottom: 18px; z-index: 110; font-family: 'Inter', system-ui, sans-serif; }
.pal__b {
  display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 18px 0 13px;
  border: 1px solid rgba(16, 22, 34, .16); border-radius: 999px;
  background: #FFFFFF; color: #0C1019;
  font: 600 14px/1 'Instrument Sans', system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 8px 26px -10px rgba(0, 0, 0, .45);
}
.pal__b i { display: block; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--marque) 50%, var(--marque-2) 50%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.pal__p {
  position: absolute; left: 0; bottom: 58px;
  width: min(330px, calc(100vw - 36px));
  background: #FFFFFF; color: #0C1019;
  border: 1px solid rgba(16, 22, 34, .14); border-radius: 14px;
  padding: 18px;
  box-shadow: 0 28px 60px -20px rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.pal.est-ouvert .pal__p { opacity: 1; visibility: visible; transform: none; }
.pal__t { margin: 0 0 4px; font: 600 16px/1.2 'Instrument Sans', system-ui, sans-serif; letter-spacing: -.01em; }
.pal__s { margin: 0 0 14px; font-size: 12.6px; line-height: 1.45; color: #5E6472; }
.pal__grille { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin-bottom: 14px; }
.pal__c { aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: 8px; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.pal__c.est-actif { border-color: #0C1019; box-shadow: inset 0 0 0 2px #FFFFFF; }
.pal__bas { display: flex; align-items: center; gap: 8px; }
.pal__bas input[type="color"] { width: 40px; height: 40px; padding: 0; border: 1px solid rgba(16,22,34,.16); border-radius: 8px; background: none; cursor: pointer; }
.pal__bas input[type="text"] {
  flex: 1; min-width: 0; height: 40px; padding: 0 12px;
  border: 1px solid rgba(16,22,34,.16); border-radius: 8px;
  background: #F4F5F7; color: #0C1019;
  font: 500 14px/1 'IBM Plex Mono', ui-monospace, monospace; text-transform: uppercase;
}
.pal__raz { height: 40px; padding: 0 12px; border: 1px solid rgba(16,22,34,.16); border-radius: 8px; background: #FFFFFF; color: #4A505C; font: 500 13px/1 'Inter', system-ui, sans-serif; cursor: pointer; }
.pal__raz:hover { border-color: #0C1019; color: #0C1019; }
@media print { .pal { display: none; } }

/* Le panneau a deux teintes : les duos, puis une ligne par teinte. */
.pal__grille--duos { grid-template-columns: repeat(8, 1fr); gap: 6px; margin-bottom: 12px; }
.pal__famille { margin: 0 0 7px; font: 600 11px/1 'Inter', system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #5E6472; }
.pal__p { width: min(360px, calc(100vw - 36px)); }
.pal__c--duo { border-radius: 50%; }
.pal__ligne { display: grid; grid-template-columns: 64px 40px 1fr; align-items: center; gap: 8px; margin-bottom: 8px; }
.pal__lib { font: 600 12px/1 'Inter', system-ui, sans-serif; color: #4A505C; }
.pal__ligne input[type="color"] { width: 40px; height: 40px; padding: 0; border: 1px solid rgba(16,22,34,.16); border-radius: 8px; background: none; cursor: pointer; }
.pal__ligne input[type="text"] {
  min-width: 0; height: 40px; padding: 0 12px;
  border: 1px solid rgba(16,22,34,.16); border-radius: 8px;
  background: #F4F5F7; color: #0C1019;
  font: 500 14px/1 'IBM Plex Mono', ui-monospace, monospace; text-transform: uppercase;
}
.pal__p .pal__raz { width: 100%; margin-top: 6px; }