/* ═══════════════════════════════════════════════════════════════════════
   PILOTIS · Feuille de style principale
   ═══════════════════════════════════════════════════════════════════════
   Sous-étape 1.B — Maquettes visuelles
   Approche CSS natif avec custom properties (D-32, choix CSS vs SCSS validé)
   
   Section 1   ─ Variables (palette, typo, espacements, transitions)
   Section 2   ─ Reset et bases
   Section 3   ─ Conteneur et layout
   Section 4   ─ Header
   Section 5   ─ Hero
   Section 6   ─ Section Principe (3 piliers)
   Section 7   ─ Section Modules (4 niveaux)
   Section 8   ─ Section Formules (4 paliers)
   Section 9   ─ Section Pourquoi Pilotis
   Section 10  ─ Appel final
   Section 11  ─ Footer
   Section 12  ─ Boutons
   Section 13  ─ Logo et ligne signature
   Section 14  ─ Responsive
   ═══════════════════════════════════════════════════════════════════════ */


/* ─── 1. VARIABLES ─────────────────────────────────────────────────────── */

:root {
  /* Palette validée (Pilotis BOOK v1.1) */
  --bleu-profond:      #0F2847;
  --bleu-profond-2:    #163558;
  --bleu-nuit:         #0A1B30;
  --cuivre:            #C9924C;
  --cuivre-clair:      #DDA76A;
  --cuivre-fonce:      #A37432;
  --creme:             #F8F5EE;
  --creme-2:           #F1ECDF;
  --noir-charbon:      #1A1A1A;
  --gris-doux:         #6B6862;
  --gris-tres-doux:    #B0AAA0;
  --blanc-pur:         #FFFFFF;

  /* Typographies signature */
  --serif-editorial:   'Fraunces', 'Georgia', serif;
  --sans-corps:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono-tech:         'JetBrains Mono', 'Consolas', monospace;

  /* Espacements (échelle 4) */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4rem;
  --esp-9: 6rem;
  --esp-10: 8rem;

  /* Largeurs et rythme */
  --largeur-max: 1200px;
  --rayon-petit: 4px;
  --rayon-moyen: 8px;
  --rayon-grand: 16px;

  /* Transitions */
  --transit-rapide: 0.15s ease-out;
  --transit-douce:  0.3s ease-out;
  --transit-lente:  0.5s ease-out;

  /* Ombres */
  --ombre-douce:    0 2px 8px rgba(15, 40, 71, 0.06);
  --ombre-moyenne:  0 6px 20px rgba(15, 40, 71, 0.1);
  --ombre-forte:    0 12px 40px rgba(15, 40, 71, 0.15);
  --ombre-cuivre:   0 4px 14px rgba(201, 146, 76, 0.25);
}


/* ─── 2. RESET ET BASES ────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

/* Compatibilité attribut HTML [hidden] vs display CSS explicite */
[hidden] {
  display: none !important;
}

body {
  font-family: var(--sans-corps);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--noir-charbon);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transit-rapide);
}

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

ul {
  list-style: none;
}

em {
  font-style: italic;
  color: var(--cuivre);
  font-family: var(--serif-editorial);
  font-weight: 400;
}


/* ─── 3. CONTENEUR ET LAYOUT ───────────────────────────────────────────── */

.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 var(--esp-5);
}

.section-titre {
  font-family: var(--serif-editorial);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  color: var(--bleu-profond);
  text-align: center;
  margin-bottom: var(--esp-5);
  letter-spacing: -0.01em;
}

.section-baseline {
  text-align: center;
  font-size: 1.05rem;
  color: var(--gris-doux);
  margin-bottom: var(--esp-8);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}


/* ─── 4. HEADER ────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(248, 245, 238, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(15, 40, 71, 0.08);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--esp-4);
  padding-bottom: var(--esp-4);
}

.nav-principale {
  display: flex;
  align-items: center;
  gap: var(--esp-6);
}

.nav-principale a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--bleu-profond);
  position: relative;
  padding: var(--esp-2) 0;
}

.nav-principale a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--cuivre);
  transition: width var(--transit-douce);
}

.nav-principale a:hover::after {
  width: 100%;
}

.nav-principale .lien-action {
  background: var(--bleu-profond);
  color: var(--creme);
  padding: var(--esp-3) var(--esp-5);
  border-radius: var(--rayon-petit);
  transition: background var(--transit-rapide), transform var(--transit-rapide);
}

.nav-principale .lien-action::after {
  display: none;
}

.nav-principale .lien-action:hover {
  background: var(--cuivre);
  transform: translateY(-1px);
}


/* ─── 5. HERO ──────────────────────────────────────────────────────────── */

.hero {
  padding: var(--esp-10) 0 var(--esp-9);
  background:
    radial-gradient(ellipse at top right, rgba(201, 146, 76, 0.08), transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(15, 40, 71, 0.04), transparent 50%),
    var(--creme);
  text-align: center;
  position: relative;
}

.hero-surtitre {
  font-family: var(--mono-tech);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cuivre);
  margin-bottom: var(--esp-5);
}

.hero-titre {
  font-family: var(--serif-editorial);
  font-weight: 300;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.05;
  color: var(--bleu-profond);
  margin-bottom: var(--esp-5);
  letter-spacing: -0.02em;
}

.hero-baseline {
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--gris-doux);
  max-width: 600px;
  margin: 0 auto var(--esp-6);
}

.hero-fondation {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--esp-7) auto;
  height: 12px;
}

.hero-fondation .ligne {
  flex: 0 1 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cuivre), transparent);
}

.hero-fondation .point {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cuivre);
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(201, 146, 76, 0.12);
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: var(--esp-4);
  flex-wrap: wrap;
}


/* ─── 6. PRINCIPE ──────────────────────────────────────────────────────── */

.principe {
  padding: var(--esp-9) 0;
  background: var(--blanc-pur);
}

.principe-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-7);
  margin-top: var(--esp-7);
}

.principe-bloc {
  text-align: left;
}

.principe-numero {
  font-family: var(--mono-tech);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--cuivre);
  display: block;
  margin-bottom: var(--esp-4);
}

.principe-bloc h3 {
  font-family: var(--serif-editorial);
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--bleu-profond);
  margin-bottom: var(--esp-3);
  line-height: 1.25;
}

.principe-bloc p {
  font-size: 0.95rem;
  color: var(--gris-doux);
  line-height: 1.65;
}


/* ─── 7. MODULES ───────────────────────────────────────────────────────── */

.modules {
  padding: var(--esp-9) 0;
  background: var(--creme);
}

.niveau-bloc {
  margin-bottom: var(--esp-9);
}

.niveau-bloc:last-child {
  margin-bottom: 0;
}

.niveau-entete {
  text-align: center;
  margin-bottom: var(--esp-6);
}

.niveau-titre {
  font-family: var(--serif-editorial);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--bleu-profond);
  margin-bottom: var(--esp-2);
}

.niveau-sous-titre {
  font-size: 0.95rem;
  color: var(--gris-doux);
  font-style: italic;
}

.modules-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-4);
}

.modules-grille-base {
  grid-template-columns: repeat(3, 1fr);
}

.modules-grille-premium {
  grid-template-columns: repeat(3, 1fr);
}

.module-carte {
  background: var(--blanc-pur);
  border: 1px solid rgba(15, 40, 71, 0.08);
  border-radius: var(--rayon-moyen);
  padding: var(--esp-5);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--transit-douce),
              box-shadow var(--transit-douce),
              border-color var(--transit-douce);
}

.module-carte:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombre-moyenne);
  border-color: var(--cuivre-clair);
}

.module-carte.module-base {
  background: linear-gradient(135deg, var(--bleu-profond) 0%, var(--bleu-profond-2) 100%);
  border-color: var(--bleu-profond);
  color: var(--creme);
}

.module-carte.module-base .module-nom { color: var(--creme); }
.module-carte.module-base .module-desc { color: rgba(248, 245, 238, 0.78); }
.module-carte.module-base .module-prix {
  color: var(--cuivre-clair);
  font-family: var(--mono-tech);
  font-weight: 600;
}

.module-carte.module-recommande {
  border-color: var(--cuivre);
  border-width: 2px;
}

/* ─── Module signature Pilotis (Géo & Mobilité) ─────────────────── */
/* Halo cuivre + bordure renforcée pour signaler le module phare    */
.module-carte.module-signature {
  border-color: var(--cuivre);
  border-width: 2px;
  background:
    linear-gradient(135deg, rgba(201, 146, 76, 0.04) 0%, transparent 60%),
    var(--blanc-pur);
  box-shadow: 0 0 0 4px rgba(201, 146, 76, 0.08);
  position: relative;
}

.module-carte.module-signature::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cuivre-clair), var(--cuivre), var(--cuivre-fonce));
  border-radius: var(--rayon-moyen) var(--rayon-moyen) 0 0;
}

.module-carte.module-signature:hover {
  box-shadow:
    0 0 0 4px rgba(201, 146, 76, 0.15),
    var(--ombre-moyenne);
  transform: translateY(-3px);
}

.recommande-tag {
  position: absolute;
  top: -10px;
  right: var(--esp-4);
  background: var(--cuivre);
  color: var(--creme);
  font-family: var(--mono-tech);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: var(--esp-1) var(--esp-3);
  border-radius: var(--rayon-petit);
}

/* Tag Signature : version "renforcée" du tag standard      */
/* Gradient cuivre + ombre douce pour le distinguer         */
.recommande-tag.tag-signature {
  background: linear-gradient(135deg, var(--cuivre) 0%, var(--cuivre-fonce) 100%);
  box-shadow: 0 2px 8px rgba(201, 146, 76, 0.35);
  font-weight: 600;
  padding: var(--esp-1) var(--esp-4);
}

.recommande-tag.tag-signature::before {
  content: '⭐ ';
  margin-right: 2px;
}

.module-icone {
  font-size: 1.8rem;
  margin-bottom: var(--esp-3);
}

.module-nom {
  font-family: var(--serif-editorial);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--bleu-profond);
  margin-bottom: var(--esp-2);
  line-height: 1.3;
}

.module-nom small {
  font-family: var(--sans-corps);
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--gris-doux);
}

.module-desc {
  font-size: 0.88rem;
  color: var(--gris-doux);
  line-height: 1.6;
  margin-bottom: var(--esp-4);
  flex-grow: 1;
}

.module-prix {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2em;
  font-family: var(--mono-tech);
  color: var(--bleu-profond);
}

.module-prix .prix-chiffre {
  font-size: 1.4rem;
  font-weight: 600;
}

.module-prix .prix-unite {
  font-size: 0.85rem;
  color: var(--gris-doux);
  font-weight: 400;
}

.module-premium .module-prix {
  font-family: var(--serif-editorial);
  font-style: italic;
  color: var(--cuivre);
  font-size: 1rem;
}


/* ─── 8. FORMULES ──────────────────────────────────────────────────────── */

.formules {
  padding: var(--esp-9) 0;
  background: var(--bleu-profond);
  color: var(--creme);
  position: relative;
  overflow: hidden;
}

.formules::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cuivre), transparent);
}

.formules .section-titre { color: var(--creme); }
.formules .section-baseline { color: rgba(248, 245, 238, 0.7); }

.formules-grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--esp-4);
  margin-top: var(--esp-7);
}

.formule {
  background: rgba(248, 245, 238, 0.05);
  border: 1px solid rgba(248, 245, 238, 0.12);
  border-radius: var(--rayon-moyen);
  padding: var(--esp-6) var(--esp-5);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--transit-douce),
              border-color var(--transit-douce);
}

.formule:hover {
  transform: translateY(-3px);
  border-color: rgba(201, 146, 76, 0.4);
}

.formule.formule-recommande {
  background: rgba(201, 146, 76, 0.08);
  border-color: var(--cuivre);
  border-width: 2px;
}

.formule-recommande-bandeau {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cuivre);
  color: var(--creme);
  font-family: var(--mono-tech);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--esp-1) var(--esp-4);
  border-radius: var(--rayon-petit);
  white-space: nowrap;
}

.formule-tag {
  font-family: var(--mono-tech);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cuivre-clair);
  display: inline-block;
  margin-bottom: var(--esp-3);
}

.formule-nom {
  font-family: var(--serif-editorial);
  font-weight: 400;
  font-size: 1.8rem;
  color: var(--creme);
  margin-bottom: var(--esp-1);
}

.formule-cible {
  font-size: 0.85rem;
  color: rgba(248, 245, 238, 0.55);
  margin-bottom: var(--esp-5);
  font-style: italic;
}

.formule-prix {
  display: flex;
  align-items: baseline;
  gap: 0.15em;
  margin-bottom: var(--esp-5);
  font-family: var(--mono-tech);
  color: var(--creme);
}

.formule-prix .prix-monnaie {
  font-size: 1rem;
  color: var(--cuivre-clair);
  font-weight: 400;
  align-self: flex-start;
  margin-top: 0.4em;
}

.formule-prix .prix-chiffre {
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
}

.formule-prix .prix-periode {
  font-size: 0.8rem;
  color: rgba(248, 245, 238, 0.55);
  font-weight: 400;
}

.formule-prix .prix-devis {
  font-family: var(--serif-editorial);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--cuivre-clair);
}

.formule-inclusions {
  margin-bottom: var(--esp-5);
  flex-grow: 1;
}

.formule-inclusions li {
  padding: var(--esp-2) 0;
  font-size: 0.9rem;
  color: rgba(248, 245, 238, 0.78);
  border-bottom: 1px solid rgba(248, 245, 238, 0.06);
  position: relative;
  padding-left: var(--esp-4);
}

.formule-inclusions li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--cuivre);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1;
}

.formule-inclusions li:last-child {
  border-bottom: none;
}

.formule-inclusions li strong {
  color: var(--creme);
  font-weight: 600;
}

.formules-note {
  text-align: center;
  margin-top: var(--esp-7);
  font-size: 0.9rem;
  color: rgba(248, 245, 238, 0.6);
}

.note-economie {
  background: var(--cuivre);
  color: var(--bleu-profond);
  padding: var(--esp-1) var(--esp-3);
  border-radius: var(--rayon-petit);
  font-family: var(--mono-tech);
  font-weight: 600;
  font-size: 0.85rem;
  margin-right: var(--esp-2);
}


/* ─── 9. POURQUOI PILOTIS ──────────────────────────────────────────────── */

.pourquoi {
  padding: var(--esp-9) 0;
  background: var(--blanc-pur);
}

.pourquoi-grille {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--esp-5);
  margin-top: var(--esp-7);
}

.pourquoi-bloc {
  text-align: center;
  padding: var(--esp-4) var(--esp-3);
}

.pourquoi-icone {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--esp-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--creme);
  border-radius: 50%;
  font-size: 1.5rem;
  border: 1px solid rgba(201, 146, 76, 0.25);
}

.pourquoi-bloc h3 {
  font-family: var(--serif-editorial);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--bleu-profond);
  margin-bottom: var(--esp-2);
  line-height: 1.3;
}

.pourquoi-bloc p {
  font-size: 0.85rem;
  color: var(--gris-doux);
  line-height: 1.55;
}


/* ─── 10. APPEL FINAL ──────────────────────────────────────────────────── */

.appel-final {
  padding: var(--esp-9) 0;
  background:
    radial-gradient(ellipse at center, rgba(201, 146, 76, 0.08), transparent 70%),
    var(--creme);
  text-align: center;
}

.appel-titre {
  font-family: var(--serif-editorial);
  font-weight: 300;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.15;
  color: var(--bleu-profond);
  margin-bottom: var(--esp-4);
  letter-spacing: -0.01em;
}

.appel-baseline {
  font-size: 1.05rem;
  color: var(--gris-doux);
  margin-bottom: var(--esp-6);
}


/* ─── 11. FOOTER ───────────────────────────────────────────────────────── */

.site-footer {
  background: var(--bleu-nuit);
  color: rgba(248, 245, 238, 0.7);
  padding: var(--esp-8) 0 var(--esp-5);
}

.footer-haut {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--esp-7);
  padding-bottom: var(--esp-7);
  border-bottom: 1px solid rgba(248, 245, 238, 0.08);
}

.footer-marque .logo-mot {
  color: var(--creme);
  font-size: 1.4rem;
  display: block;
  margin-bottom: var(--esp-2);
}

.footer-baseline {
  font-size: 0.9rem;
  margin-top: var(--esp-3);
  color: rgba(248, 245, 238, 0.55);
  font-style: italic;
  max-width: 280px;
}

.footer-colonne h4 {
  font-family: var(--mono-tech);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cuivre);
  margin-bottom: var(--esp-4);
}

.footer-colonne ul li {
  margin-bottom: var(--esp-2);
}

.footer-colonne a {
  font-size: 0.9rem;
  color: rgba(248, 245, 238, 0.7);
  transition: color var(--transit-rapide);
}

.footer-colonne a:hover {
  color: var(--cuivre-clair);
}

.footer-edite {
  font-size: 0.9rem;
  color: rgba(248, 245, 238, 0.7);
}

.footer-edite small {
  display: block;
  margin-top: var(--esp-1);
  color: rgba(248, 245, 238, 0.45);
  font-size: 0.8rem;
}

.footer-bas {
  text-align: center;
  margin-top: var(--esp-6);
}

.footer-bas .logo-fondation-large {
  color: var(--cuivre);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  display: block;
  margin-bottom: var(--esp-3);
  opacity: 0.7;
}

.footer-copyright {
  font-size: 0.85rem;
  color: rgba(248, 245, 238, 0.45);
}


/* ─── 12. BOUTONS ──────────────────────────────────────────────────────── */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--esp-3) var(--esp-6);
  font-family: var(--sans-corps);
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: var(--rayon-petit);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transit-douce);
  text-align: center;
  letter-spacing: 0.01em;
  min-height: 48px;
}

.bouton-primaire {
  background: var(--bleu-profond);
  color: var(--creme);
  border-color: var(--bleu-profond);
}

.bouton-primaire:hover {
  background: var(--cuivre);
  border-color: var(--cuivre);
  transform: translateY(-1px);
  box-shadow: var(--ombre-cuivre);
}

.bouton-secondaire {
  background: transparent;
  color: var(--bleu-profond);
  border-color: var(--bleu-profond);
}

.bouton-secondaire:hover {
  background: var(--bleu-profond);
  color: var(--creme);
  transform: translateY(-1px);
}

.bouton-formule {
  width: 100%;
  background: transparent;
  color: var(--creme);
  border-color: rgba(248, 245, 238, 0.3);
}

.bouton-formule:hover {
  background: var(--creme);
  color: var(--bleu-profond);
  border-color: var(--creme);
}

.bouton-formule-primaire {
  background: var(--cuivre);
  color: var(--bleu-profond);
  border-color: var(--cuivre);
  font-weight: 600;
}

.bouton-formule-primaire:hover {
  background: var(--cuivre-clair);
  border-color: var(--cuivre-clair);
}

.bouton-appel {
  background: var(--bleu-profond);
  color: var(--creme);
  padding: var(--esp-4) var(--esp-7);
  font-size: 1.05rem;
  border-color: var(--bleu-profond);
}

.bouton-appel:hover {
  background: var(--cuivre);
  border-color: var(--cuivre);
  transform: translateY(-2px);
  box-shadow: var(--ombre-forte);
}


/* ─── 13. LOGO ET LIGNE SIGNATURE ──────────────────────────────────────── */

.logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}

.logo-mot {
  font-family: var(--serif-editorial);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--bleu-profond);
  letter-spacing: 0.08em;
}

.logo-fondation {
  font-family: var(--mono-tech);
  font-size: 0.75rem;
  color: var(--cuivre);
  letter-spacing: 0.05em;
  margin-top: 2px;
}


/* ─── 14. RESPONSIVE ───────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .modules-grille,
  .modules-grille-base,
  .modules-grille-premium {
    grid-template-columns: repeat(2, 1fr);
  }
  .formules-grille {
    grid-template-columns: repeat(2, 1fr);
  }
  .pourquoi-grille {
    grid-template-columns: repeat(3, 1fr);
  }
  .principe-grille {
    grid-template-columns: 1fr;
    gap: var(--esp-5);
  }
}

@media (max-width: 720px) {
  .header-inner {
    flex-direction: column;
    gap: var(--esp-4);
  }
  .nav-principale {
    gap: var(--esp-4);
  }
  .modules-grille,
  .modules-grille-base,
  .modules-grille-premium {
    grid-template-columns: 1fr;
  }
  .formules-grille {
    grid-template-columns: 1fr;
  }
  .pourquoi-grille {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-haut {
    grid-template-columns: 1fr;
    gap: var(--esp-5);
  }
  .hero {
    padding: var(--esp-8) 0 var(--esp-7);
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .bouton {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .pourquoi-grille {
    grid-template-columns: 1fr;
  }
  :root {
    --esp-9: 4rem;
    --esp-10: 5rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PAGE MODULES — Catalogue détaillé
   Section ajoutée pour modules.php
   ═══════════════════════════════════════════════════════════════════════ */


/* ─── 15. SOUS-HERO ÉDITORIAL (pages internes) ─────────────────────────── */

.sous-hero {
  padding: var(--esp-8) 0 var(--esp-6);
  background:
    radial-gradient(ellipse at top right, rgba(201, 146, 76, 0.06), transparent 50%),
    var(--creme);
  border-bottom: 1px solid rgba(15, 40, 71, 0.06);
}

.fil-ariane {
  font-family: var(--mono-tech);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris-doux);
  margin-bottom: var(--esp-5);
  display: flex;
  align-items: center;
  gap: var(--esp-3);
}

.fil-ariane a {
  color: var(--cuivre);
  text-decoration: none;
}

.fil-ariane a:hover {
  color: var(--cuivre-fonce);
}

.fil-ariane-sep {
  color: var(--cuivre);
  opacity: 0.5;
  font-size: 0.6rem;
}

.sous-hero-titre {
  font-family: var(--serif-editorial);
  font-weight: 300;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.1;
  color: var(--bleu-profond);
  margin-bottom: var(--esp-4);
  letter-spacing: -0.02em;
  max-width: 800px;
}

.sous-hero-baseline {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--gris-doux);
  max-width: 640px;
}


/* ─── 16. BARRE DE FILTRES STICKY ──────────────────────────────────────── */

.barre-filtres {
  position: sticky;
  top: 73px; /* hauteur du header */
  z-index: 40;
  background: rgba(248, 245, 238, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(15, 40, 71, 0.08);
  padding: var(--esp-3) 0;
}

.barre-filtres-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-5);
  flex-wrap: wrap;
}

.filtres-pills {
  display: flex;
  gap: var(--esp-2);
  flex-wrap: wrap;
}

.pill {
  background: transparent;
  border: 1px solid rgba(15, 40, 71, 0.15);
  color: var(--bleu-profond);
  font-family: var(--sans-corps);
  font-size: 0.85rem;
  font-weight: 500;
  padding: var(--esp-2) var(--esp-4);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--transit-rapide);
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
}

.pill:hover {
  border-color: var(--cuivre);
  color: var(--cuivre);
}

.pill-actif {
  background: var(--bleu-profond);
  color: var(--creme);
  border-color: var(--bleu-profond);
}

.pill-actif:hover {
  background: var(--bleu-profond-2);
  border-color: var(--bleu-profond-2);
  color: var(--creme);
}

.pill-compteur {
  font-family: var(--mono-tech);
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(15, 40, 71, 0.08);
  padding: 1px var(--esp-2);
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
}

.pill-actif .pill-compteur {
  background: rgba(201, 146, 76, 0.3);
  color: var(--cuivre-clair);
}

.filtres-recherche {
  flex-shrink: 0;
}

.champ-recherche {
  background: var(--blanc-pur);
  border: 1px solid rgba(15, 40, 71, 0.15);
  border-radius: 999px;
  padding: var(--esp-2) var(--esp-4);
  font-family: var(--sans-corps);
  font-size: 0.9rem;
  color: var(--noir-charbon);
  width: 280px;
  transition: border-color var(--transit-rapide), box-shadow var(--transit-rapide);
}

.champ-recherche:focus {
  outline: none;
  border-color: var(--cuivre);
  box-shadow: 0 0 0 3px rgba(201, 146, 76, 0.15);
}

.champ-recherche::placeholder {
  color: var(--gris-tres-doux);
}


/* ─── 17. CATALOGUE DÉTAILLÉ ───────────────────────────────────────────── */

.catalogue {
  padding: var(--esp-7) 0 var(--esp-9);
  background: var(--creme);
}

.catalogue-niveau {
  margin-bottom: var(--esp-9);
}

.catalogue-niveau:last-child {
  margin-bottom: 0;
}

.catalogue-niveau-entete {
  margin-bottom: var(--esp-5);
  padding-bottom: var(--esp-4);
  border-bottom: 1px solid rgba(15, 40, 71, 0.1);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--esp-3);
}

.catalogue-niveau-titre {
  font-family: var(--serif-editorial);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--bleu-profond);
}

.catalogue-niveau-sous {
  font-size: 0.95rem;
  color: var(--gris-doux);
  font-style: italic;
}

.catalogue-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-5);
}


/* ─── 18. FICHE MODULE DÉTAILLÉE ───────────────────────────────────────── */

.module-fiche {
  background: var(--blanc-pur);
  border: 1px solid rgba(15, 40, 71, 0.08);
  border-radius: var(--rayon-moyen);
  padding: var(--esp-6);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform var(--transit-douce),
              box-shadow var(--transit-douce),
              border-color var(--transit-douce);
}

.module-fiche:hover {
  transform: translateY(-2px);
  box-shadow: var(--ombre-moyenne);
  border-color: var(--cuivre-clair);
}

.module-fiche-signature {
  border-color: var(--cuivre);
  border-width: 2px;
  background:
    linear-gradient(135deg, rgba(201, 146, 76, 0.04) 0%, transparent 60%),
    var(--blanc-pur);
  box-shadow: 0 0 0 4px rgba(201, 146, 76, 0.08);
}

.module-fiche-signature::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cuivre-clair), var(--cuivre), var(--cuivre-fonce));
  border-radius: var(--rayon-moyen) var(--rayon-moyen) 0 0;
}

.module-fiche-entete {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-4);
  margin-bottom: var(--esp-4);
  padding-bottom: var(--esp-4);
  border-bottom: 1px solid rgba(15, 40, 71, 0.06);
}

.module-fiche-icone {
  font-size: 2.2rem;
  flex-shrink: 0;
  line-height: 1;
}

.module-fiche-nom {
  font-family: var(--serif-editorial);
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--bleu-profond);
  margin: 0 0 var(--esp-1);
  line-height: 1.25;
}

.module-fiche-prix {
  font-family: var(--mono-tech);
  display: inline-flex;
  align-items: baseline;
  gap: 0.15em;
  margin: 0;
}

.module-fiche-prix .prix-chiffre {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--bleu-profond);
}

.module-fiche-prix .prix-unite {
  font-size: 0.8rem;
  color: var(--gris-doux);
  font-weight: 400;
}

.module-fiche-prix .prix-inclus {
  font-family: var(--mono-tech);
  color: var(--cuivre);
  font-weight: 600;
  font-size: 0.95rem;
}

.module-fiche-prix .prix-devis {
  font-family: var(--serif-editorial);
  font-style: italic;
  color: var(--cuivre);
  font-size: 1rem;
}

.module-fiche-desc {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--noir-charbon);
  margin-bottom: var(--esp-4);
}

.module-fiche-cles {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--esp-5);
  flex-grow: 1;
}

.module-fiche-cles li {
  font-size: 0.88rem;
  color: var(--gris-doux);
  padding: var(--esp-2) 0 var(--esp-2) var(--esp-5);
  position: relative;
  line-height: 1.5;
}

.module-fiche-cles li::before {
  content: '●';
  position: absolute;
  left: 0;
  top: var(--esp-2);
  color: var(--cuivre);
  font-size: 0.5rem;
  line-height: 1.5;
}

.module-fiche-footer {
  padding-top: var(--esp-3);
  border-top: 1px solid rgba(15, 40, 71, 0.06);
}

.bouton-fiche {
  width: 100%;
  background: transparent;
  color: var(--bleu-profond);
  border: 1px solid var(--bleu-profond);
  padding: var(--esp-3);
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: var(--rayon-petit);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all var(--transit-douce);
}

.bouton-fiche:hover {
  background: var(--bleu-profond);
  color: var(--creme);
}

.module-fiche-signature .bouton-fiche {
  background: var(--cuivre);
  color: var(--bleu-profond);
  border-color: var(--cuivre);
  font-weight: 600;
}

.module-fiche-signature .bouton-fiche:hover {
  background: var(--cuivre-fonce);
  border-color: var(--cuivre-fonce);
  color: var(--creme);
}

/* Badge informatif pour les modules du socle (non cliquable) */
.module-fiche-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  width: 100%;
  justify-content: center;
  padding: var(--esp-3);
  background: rgba(56, 168, 119, 0.08);
  color: #2d8260;
  border: 1px dashed rgba(56, 168, 119, 0.4);
  border-radius: var(--rayon-petit);
  font-family: var(--mono-tech);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.module-fiche-badge::before {
  content: '✓';
  font-weight: 700;
  font-size: 0.95rem;
}

/* Tag conforme (fin) — alternative au tag signature */
.recommande-tag.tag-conforme {
  background: rgba(15, 40, 71, 0.08);
  color: var(--bleu-profond);
  border: 1px solid rgba(15, 40, 71, 0.2);
}


/* ─── 19. ÉTAT VIDE (recherche sans résultat) ──────────────────────────── */

.catalogue-vide {
  text-align: center;
  padding: var(--esp-8) var(--esp-5);
  background: var(--blanc-pur);
  border: 1px dashed rgba(15, 40, 71, 0.2);
  border-radius: var(--rayon-moyen);
}

.catalogue-vide p {
  font-size: 1rem;
  color: var(--gris-doux);
  margin-bottom: var(--esp-5);
  font-style: italic;
}


/* ─── 20. NAVIGATION : élément actif ───────────────────────────────────── */

.nav-principale a.actif {
  color: var(--cuivre);
}

.nav-principale a.actif::after {
  width: 100%;
  background: var(--cuivre);
}


/* ─── 21. RESPONSIVE catalogue ─────────────────────────────────────────── */

@media (max-width: 1024px) {
  .catalogue-grille {
    grid-template-columns: 1fr;
  }
  .barre-filtres {
    top: 0;
    position: sticky;
  }
  .barre-filtres-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .champ-recherche {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .pill {
    font-size: 0.8rem;
    padding: var(--esp-2) var(--esp-3);
  }
  .module-fiche {
    padding: var(--esp-5);
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PAGE CONFIGURATEUR — Calculateur interactif
   Section ajoutée pour configurer.php
   ═══════════════════════════════════════════════════════════════════════ */


/* ─── 22. LAYOUT 2 COLONNES ────────────────────────────────────────────── */

.configurateur {
  padding: var(--esp-7) 0 var(--esp-9);
  background: var(--creme);
}

.configurateur-inner {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--esp-7);
  align-items: flex-start;
}

.config-form {
  display: flex;
  flex-direction: column;
  gap: var(--esp-7);
}


/* ─── 23. ÉTAPE NUMÉROTÉE ──────────────────────────────────────────────── */

.config-etape {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--esp-5);
  background: var(--blanc-pur);
  border: 1px solid rgba(15, 40, 71, 0.08);
  border-radius: var(--rayon-moyen);
  padding: var(--esp-6);
}

.config-etape-num {
  font-family: var(--mono-tech);
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--cuivre);
  letter-spacing: 0.05em;
  line-height: 1;
  padding-top: 4px;
}

.config-etape-titre {
  font-family: var(--serif-editorial);
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--bleu-profond);
  margin: 0 0 var(--esp-2);
  line-height: 1.25;
}

.config-etape-desc {
  font-size: 0.9rem;
  color: var(--gris-doux);
  margin-bottom: var(--esp-5);
  line-height: 1.6;
}

.config-etape-aide {
  margin-top: var(--esp-3);
  font-size: 0.85rem;
  color: var(--gris-doux);
  font-style: italic;
}

.config-etape-extra {
  display: inline-block;
  margin-left: var(--esp-2);
  color: var(--cuivre);
  font-style: normal;
  font-weight: 500;
}

.lien-discret {
  color: var(--cuivre);
  text-decoration: underline;
  text-decoration-color: rgba(201, 146, 76, 0.3);
  text-underline-offset: 3px;
  font-size: 0.85rem;
}

.lien-discret:hover { color: var(--cuivre-fonce); }


/* ─── 24. CHOIX DE FORMULE ─────────────────────────────────────────────── */

.formules-choix {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-3);
}

.formule-choix {
  cursor: pointer;
  position: relative;
}

.formule-choix input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.formule-choix-inner {
  background: var(--creme);
  border: 2px solid rgba(15, 40, 71, 0.1);
  border-radius: var(--rayon-moyen);
  padding: var(--esp-4) var(--esp-5);
  transition: all var(--transit-rapide);
}

.formule-choix:hover .formule-choix-inner {
  border-color: var(--cuivre-clair);
  background: var(--blanc-pur);
}

.formule-choix-actif .formule-choix-inner {
  border-color: var(--cuivre);
  background: var(--blanc-pur);
  box-shadow: 0 0 0 4px rgba(201, 146, 76, 0.1);
}

.formule-choix-nom {
  font-family: var(--serif-editorial);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--bleu-profond);
  display: block;
  margin-bottom: var(--esp-2);
}

.formule-choix-prix {
  font-family: var(--mono-tech);
  display: flex;
  align-items: baseline;
  gap: 0.15em;
  margin-bottom: var(--esp-3);
}

.formule-choix-prix .prix-chiffre {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--bleu-profond);
}

.formule-choix-prix .prix-unite {
  font-size: 0.8rem;
  color: var(--gris-doux);
}

.formule-choix-prix .prix-devis {
  font-family: var(--serif-editorial);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--cuivre);
}

.formule-choix-inclus {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
  color: var(--gris-doux);
}

.formule-choix-inclus li {
  padding: 2px 0;
}

.formule-choix-inclus strong {
  color: var(--bleu-profond);
  font-weight: 600;
}


/* ─── 25. CORPS DE MÉTIER (cases à cocher en pills) ────────────────────── */

.corps-metiers-grille {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}

.corps-metier {
  cursor: pointer;
  position: relative;
}

.corps-metier input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.corps-metier-nom {
  display: inline-block;
  background: var(--creme);
  border: 1px solid rgba(15, 40, 71, 0.15);
  border-radius: 999px;
  padding: var(--esp-2) var(--esp-4);
  font-size: 0.85rem;
  color: var(--bleu-profond);
  transition: all var(--transit-rapide);
}

.corps-metier:hover .corps-metier-nom {
  border-color: var(--cuivre);
  color: var(--cuivre);
}

.corps-metier input:checked + .corps-metier-nom {
  background: var(--bleu-profond);
  color: var(--creme);
  border-color: var(--bleu-profond);
  font-weight: 500;
}


/* ─── 26. MODULES (config — version compacte) ─────────────────────────── */

.modules-sous-titre {
  font-family: var(--serif-editorial);
  font-weight: 400;
  font-size: 1rem;
  color: var(--bleu-profond);
  margin: var(--esp-5) 0 var(--esp-3);
  display: flex;
  align-items: baseline;
  gap: var(--esp-3);
}

.modules-sous-titre small {
  font-family: var(--sans-corps);
  font-size: 0.8rem;
  color: var(--gris-doux);
  font-weight: 400;
}

.modules-grille-config {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-2);
}

.module-config {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  background: var(--creme);
  border: 1px solid rgba(15, 40, 71, 0.1);
  border-radius: var(--rayon-petit);
  transition: all var(--transit-rapide);
}

.module-config input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--cuivre);
  flex-shrink: 0;
}

.module-config:hover {
  border-color: var(--cuivre-clair);
  background: var(--blanc-pur);
}

.module-config:has(input:checked) {
  background: var(--blanc-pur);
  border-color: var(--cuivre);
  box-shadow: 0 0 0 2px rgba(201, 146, 76, 0.1);
}

.module-config-icone {
  font-size: 1.15rem;
  flex-shrink: 0;
}

.module-config-nom {
  flex-grow: 1;
  font-size: 0.9rem;
  color: var(--bleu-profond);
  font-weight: 500;
}

.module-config-tag {
  display: block;
  font-size: 0.7rem;
  color: var(--cuivre);
  font-family: var(--mono-tech);
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: 0.03em;
}

.module-config-prix {
  font-family: var(--mono-tech);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cuivre);
  flex-shrink: 0;
}

.module-config-signature {
  border-color: var(--cuivre-clair);
}


/* ─── 27. PROTECTIONS (radios verticaux) ─────────────────────────────── */

.protections-choix {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

.protection-choix {
  cursor: pointer;
  position: relative;
}

.protection-choix input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.protection-choix-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  padding: var(--esp-3) var(--esp-4);
  background: var(--creme);
  border: 2px solid rgba(15, 40, 71, 0.1);
  border-radius: var(--rayon-petit);
  transition: all var(--transit-rapide);
}

.protection-choix:hover .protection-choix-inner {
  border-color: var(--cuivre-clair);
  background: var(--blanc-pur);
}

.protection-choix-actif .protection-choix-inner {
  border-color: var(--cuivre);
  background: var(--blanc-pur);
}

.protection-choix-nom {
  font-size: 0.92rem;
  color: var(--bleu-profond);
  font-weight: 500;
}

.protection-choix-prix {
  font-family: var(--mono-tech);
  font-size: 0.85rem;
  color: var(--cuivre);
  font-weight: 600;
  white-space: nowrap;
}

.protection-choix-indispo {
  opacity: 0.4;
  pointer-events: none;
}

.protection-choix-indispo .protection-choix-inner {
  background: rgba(15, 40, 71, 0.03);
}


/* ─── 28. COMPTEUR UTILISATEURS ───────────────────────────────────────── */

.compteur-users {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  flex-wrap: wrap;
}

.bouton-compteur {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(15, 40, 71, 0.2);
  background: var(--blanc-pur);
  color: var(--bleu-profond);
  font-size: 1.4rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transit-rapide);
  font-family: var(--sans-corps);
  line-height: 1;
}

.bouton-compteur:hover {
  border-color: var(--cuivre);
  color: var(--cuivre);
}

.compteur-users input[type="number"] {
  width: 80px;
  text-align: center;
  font-family: var(--mono-tech);
  font-size: 1.2rem;
  font-weight: 600;
  border: 1px solid rgba(15, 40, 71, 0.15);
  border-radius: var(--rayon-petit);
  padding: var(--esp-2) var(--esp-3);
  color: var(--bleu-profond);
  background: var(--creme);
  -moz-appearance: textfield;
}

.compteur-users input[type="number"]::-webkit-outer-spin-button,
.compteur-users input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.compteur-users-aide {
  margin-left: var(--esp-3);
  font-size: 0.85rem;
  color: var(--cuivre);
  font-style: italic;
}


/* ─── 29. FRÉQUENCE DE PAIEMENT ───────────────────────────────────────── */

.frequence-choix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-3);
}

.frequence-option {
  cursor: pointer;
  position: relative;
}

.frequence-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.frequence-option-inner {
  display: block;
  padding: var(--esp-5);
  background: var(--creme);
  border: 2px solid rgba(15, 40, 71, 0.1);
  border-radius: var(--rayon-moyen);
  transition: all var(--transit-rapide);
  position: relative;
}

.frequence-option:hover .frequence-option-inner {
  border-color: var(--cuivre-clair);
  background: var(--blanc-pur);
}

.frequence-option input:checked + .frequence-option-inner {
  border-color: var(--cuivre);
  background: var(--blanc-pur);
  box-shadow: 0 0 0 4px rgba(201, 146, 76, 0.1);
}

.frequence-bandeau {
  position: absolute;
  top: -10px;
  right: var(--esp-3);
  background: var(--cuivre);
  color: var(--creme);
  font-family: var(--mono-tech);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px var(--esp-3);
  border-radius: var(--rayon-petit);
}

.frequence-nom {
  font-family: var(--serif-editorial);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--bleu-profond);
  display: block;
  margin-bottom: var(--esp-2);
}

.frequence-detail {
  font-size: 0.85rem;
  color: var(--gris-doux);
  display: block;
  line-height: 1.5;
}


/* ─── 30. RÉCAPITULATIF STICKY ────────────────────────────────────────── */

.config-recap {
  position: sticky;
  top: 90px;
  background: var(--bleu-profond);
  color: var(--creme);
  border-radius: var(--rayon-moyen);
  padding: var(--esp-6);
  align-self: flex-start;
  box-shadow: var(--ombre-forte);
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}

.recap-titre {
  font-family: var(--serif-editorial);
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--creme);
  margin-bottom: var(--esp-1);
}

.recap-baseline {
  font-size: 0.85rem;
  color: rgba(248, 245, 238, 0.6);
  margin-bottom: var(--esp-5);
  font-style: italic;
}

.recap-bloc {
  padding: var(--esp-3) 0;
  border-bottom: 1px solid rgba(248, 245, 238, 0.1);
}

.recap-bloc-titre {
  font-family: var(--mono-tech);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cuivre-clair);
  margin-bottom: var(--esp-3);
}

.recap-ligne {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--esp-2);
  align-items: baseline;
  padding: var(--esp-2) 0;
}

.recap-ligne-formule {
  padding: var(--esp-3) 0;
  border-bottom: 1px solid rgba(248, 245, 238, 0.1);
  margin-bottom: var(--esp-2);
}

.recap-label {
  font-family: var(--mono-tech);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cuivre-clair);
  grid-column: 1 / -1;
  margin-bottom: 2px;
}

.recap-valeur {
  font-size: 0.92rem;
  color: var(--creme);
  font-weight: 500;
}

.recap-prix {
  font-family: var(--mono-tech);
  font-size: 0.92rem;
  color: var(--cuivre-clair);
  font-weight: 600;
  text-align: right;
}

.recap-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

.recap-liste li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--esp-3);
  font-size: 0.85rem;
  color: rgba(248, 245, 238, 0.85);
}

.recap-liste li.recap-vide {
  color: rgba(248, 245, 238, 0.4);
  font-style: italic;
  justify-content: center;
}

.recap-liste li.recap-module-inclus span:not(.recap-module-prix) {
  color: rgba(248, 245, 238, 0.6);
}

.recap-liste li.recap-module-inclus .recap-module-prix {
  color: var(--cuivre-clair);
  font-style: italic;
}

.recap-module-prix {
  font-family: var(--mono-tech);
  font-weight: 600;
  color: var(--cuivre-clair);
  white-space: nowrap;
  font-size: 0.82rem;
}


/* ─── 31. TOTAL RÉCAP ─────────────────────────────────────────────────── */

.recap-total {
  margin-top: var(--esp-5);
  padding-top: var(--esp-5);
  border-top: 2px solid var(--cuivre);
}

.recap-total-mensuel {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--esp-3);
}

.recap-total-label {
  font-family: var(--serif-editorial);
  font-size: 1.1rem;
  color: var(--creme);
  font-weight: 500;
}

.recap-total-prix {
  font-family: var(--mono-tech);
  display: flex;
  align-items: baseline;
  gap: 0.2em;
  color: var(--cuivre-clair);
}

.recap-total-prix .prix-chiffre {
  font-size: 1.8rem;
  font-weight: 700;
}

.recap-total-prix .prix-unite {
  font-size: 0.85rem;
  color: rgba(248, 245, 238, 0.6);
  font-weight: 400;
}

.recap-total-annuel {
  margin-top: var(--esp-3);
  font-size: 0.85rem;
  color: rgba(248, 245, 238, 0.7);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--esp-2);
  flex-wrap: wrap;
}

.recap-total-annuel strong {
  color: var(--creme);
  font-family: var(--mono-tech);
}

.recap-economie {
  background: var(--cuivre);
  color: var(--bleu-profond);
  font-family: var(--mono-tech);
  font-weight: 600;
  font-size: 0.75rem;
  padding: 1px var(--esp-2);
  border-radius: var(--rayon-petit);
}

.bouton-recap {
  display: block;
  width: 100%;
  margin-top: var(--esp-5);
  padding: var(--esp-4);
  background: var(--cuivre);
  color: var(--bleu-profond);
  border: none;
  border-radius: var(--rayon-petit);
  font-family: var(--sans-corps);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transit-rapide);
}

.bouton-recap:hover {
  background: var(--cuivre-clair);
  transform: translateY(-1px);
}

.recap-rassurance {
  margin-top: var(--esp-4);
  font-size: 0.78rem;
  color: rgba(248, 245, 238, 0.55);
  text-align: center;
  line-height: 1.5;
}


/* ─── 32. RÉCAP MODE SUR-MESURE ────────────────────────────────────────── */

.recap-surmesure {
  text-align: center;
}

.recap-surmesure h3 {
  font-family: var(--serif-editorial);
  color: var(--cuivre-clair);
  font-size: 1.3rem;
  margin-bottom: var(--esp-3);
  font-weight: 400;
}

.recap-surmesure p {
  font-size: 0.9rem;
  color: rgba(248, 245, 238, 0.8);
  margin-bottom: var(--esp-4);
  line-height: 1.6;
}

.recap-surmesure ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--esp-5);
  text-align: left;
}

.recap-surmesure li {
  font-size: 0.85rem;
  color: rgba(248, 245, 238, 0.7);
  padding: var(--esp-2) 0 var(--esp-2) var(--esp-5);
  position: relative;
}

.recap-surmesure li::before {
  content: '●';
  position: absolute;
  left: 0;
  color: var(--cuivre);
  font-size: 0.5rem;
  top: var(--esp-3);
}


/* ─── 33. RESPONSIVE configurateur ─────────────────────────────────────── */

@media (max-width: 1024px) {
  .configurateur-inner {
    grid-template-columns: 1fr;
  }
  .config-recap {
    position: static;
    max-height: none;
  }
  .formules-choix {
    grid-template-columns: 1fr;
  }
  .modules-grille-config {
    grid-template-columns: 1fr;
  }
  .frequence-choix {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .config-etape {
    grid-template-columns: 1fr;
    gap: var(--esp-3);
    padding: var(--esp-5);
  }
  .config-etape-num {
    font-size: 1.2rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PAGES COMMANDER + CONFIRMATION + LEGAL
   Sections ajoutées pour les 3 dernières pages
   ═══════════════════════════════════════════════════════════════════════ */


/* ─── 34. LAYOUT 2 COLONNES (commander) ────────────────────────────────── */

.commander {
  padding: var(--esp-7) 0 var(--esp-9);
  background: var(--creme);
}

.commander-inner {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--esp-7);
  align-items: flex-start;
}

.commander-form {
  display: flex;
  flex-direction: column;
  gap: var(--esp-6);
}


/* ─── 35. CHAMPS DE FORMULAIRE ─────────────────────────────────────────── */

.form-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-4);
}

.form-champ {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
}

.form-champ-large {
  grid-column: 1 / -1;
}

.form-champ-petit {
  max-width: 140px;
}

.form-champ label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--bleu-profond);
  margin-bottom: 2px;
}

.champ-requis {
  color: var(--cuivre);
  font-weight: 700;
}

.form-optionnel {
  font-weight: 400;
  color: var(--gris-doux);
  font-style: italic;
  font-size: 0.78rem;
}

.form-champ input[type="text"],
.form-champ input[type="email"],
.form-champ input[type="tel"],
.form-champ input[type="number"],
.form-champ select {
  background: var(--blanc-pur);
  border: 1px solid rgba(15, 40, 71, 0.15);
  border-radius: var(--rayon-petit);
  padding: var(--esp-3) var(--esp-4);
  font-family: var(--sans-corps);
  font-size: 0.92rem;
  color: var(--noir-charbon);
  transition: border-color var(--transit-rapide), box-shadow var(--transit-rapide);
}

.form-champ input:focus,
.form-champ select:focus {
  outline: none;
  border-color: var(--cuivre);
  box-shadow: 0 0 0 3px rgba(201, 146, 76, 0.12);
}

.form-champ input:invalid:not(:placeholder-shown):not(:focus) {
  border-color: rgba(255, 107, 107, 0.5);
}

.form-champ input.form-champ-valide {
  border-color: rgba(56, 168, 119, 0.5);
}

.form-champ select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230F2847' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--esp-4) center;
  padding-right: var(--esp-7);
}

.form-aide {
  font-size: 0.78rem;
  color: var(--gris-doux);
  font-style: italic;
  margin-top: 2px;
}


/* ─── 36. CHECKBOX (admin idem, CGV, RGPD) ─────────────────────────────── */

.form-champ-checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-3) 0;
}

.form-champ-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--cuivre);
  cursor: pointer;
  flex-shrink: 0;
}

.form-champ-checkbox label {
  font-size: 0.92rem;
  color: var(--noir-charbon);
  font-weight: 400;
  cursor: pointer;
  line-height: 1.5;
}

.form-champ-checkbox label small {
  font-size: 0.85rem;
  color: var(--gris-doux);
}

.form-champ-checkbox a {
  color: var(--cuivre);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-champ-checkbox a:hover { color: var(--cuivre-fonce); }

.admin-champs {
  margin-top: var(--esp-4);
  padding-top: var(--esp-4);
  border-top: 1px dashed rgba(15, 40, 71, 0.1);
}


/* ─── 37. CHOIX MODE DE PAIEMENT ───────────────────────────────────────── */

.paiements-choix {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}

.paiement-option {
  cursor: pointer;
  position: relative;
}

.paiement-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.paiement-option-inner {
  position: relative;
  background: var(--creme);
  border: 2px solid rgba(15, 40, 71, 0.1);
  border-radius: var(--rayon-moyen);
  padding: var(--esp-5);
  transition: all var(--transit-rapide);
}

.paiement-option:hover .paiement-option-inner {
  border-color: var(--cuivre-clair);
  background: var(--blanc-pur);
}

.paiement-option-actif .paiement-option-inner {
  border-color: var(--cuivre);
  background: var(--blanc-pur);
  box-shadow: 0 0 0 4px rgba(201, 146, 76, 0.1);
}

.paiement-bandeau {
  position: absolute;
  top: -10px;
  right: var(--esp-4);
  background: var(--cuivre);
  color: var(--creme);
  font-family: var(--mono-tech);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px var(--esp-3);
  border-radius: var(--rayon-petit);
}

.paiement-entete {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  flex-wrap: wrap;
  margin-bottom: var(--esp-3);
}

.paiement-icone {
  font-size: 1.6rem;
}

.paiement-nom {
  font-family: var(--serif-editorial);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--bleu-profond);
}

.paiement-tag {
  font-family: var(--mono-tech);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px var(--esp-3);
  border-radius: var(--rayon-petit);
  margin-left: auto;
}

.paiement-tag-rapide {
  background: rgba(168, 114, 255, 0.12);
  color: #8a5cd6;
  border: 1px solid rgba(168, 114, 255, 0.3);
}

.paiement-tag-gratuit {
  background: rgba(56, 168, 119, 0.12);
  color: #2d8260;
  border: 1px solid rgba(56, 168, 119, 0.3);
}

.paiement-tag-recurrent {
  background: rgba(201, 146, 76, 0.12);
  color: var(--cuivre-fonce);
  border: 1px solid rgba(201, 146, 76, 0.3);
}

.paiement-detail {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--gris-doux);
  margin: 0;
}

.paiement-frais {
  display: block;
  margin-top: var(--esp-2);
  font-size: 0.82rem;
  color: var(--bleu-profond);
  font-style: italic;
}

.paiement-detail em {
  color: var(--cuivre);
  font-style: italic;
}


/* ─── 38. ACTIONS DE COMMANDE ──────────────────────────────────────────── */

.commander-actions {
  background: var(--blanc-pur);
  border: 1px solid rgba(15, 40, 71, 0.08);
  border-radius: var(--rayon-moyen);
  padding: var(--esp-6);
  text-align: center;
}

.bouton-valider {
  display: inline-block;
  background: var(--cuivre);
  color: var(--bleu-profond);
  border: none;
  padding: var(--esp-4) var(--esp-7);
  font-family: var(--sans-corps);
  font-size: 1.05rem;
  font-weight: 600;
  border-radius: var(--rayon-petit);
  cursor: pointer;
  transition: all var(--transit-rapide);
  text-decoration: none;
}

.bouton-valider:hover {
  background: var(--cuivre-clair);
  transform: translateY(-1px);
  box-shadow: var(--ombre-moyenne);
}

.commander-rassurance {
  margin-top: var(--esp-3);
  font-size: 0.85rem;
  color: var(--gris-doux);
  font-style: italic;
}


/* ─── 39. RÉCAP COMMANDE (sticky) ──────────────────────────────────────── */

.commander-recap {
  position: sticky;
  top: 90px;
  background: var(--bleu-profond);
  color: var(--creme);
  border-radius: var(--rayon-moyen);
  padding: var(--esp-6);
  align-self: flex-start;
  box-shadow: var(--ombre-forte);
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}

.lien-discret-clair {
  color: var(--cuivre-clair);
  font-size: 0.82rem;
  text-decoration: none;
  font-style: italic;
}

.lien-discret-clair:hover { color: var(--creme); }

.recap-surmesure-texte {
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(248, 245, 238, 0.85);
  margin: 0;
}

.prix-devis-clair {
  font-family: var(--serif-editorial);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--cuivre-clair);
  font-weight: 400;
}


/* ═══════════════════════════════════════════════════════════════════════
   PAGE CONFIRMATION
   ═══════════════════════════════════════════════════════════════════════ */

.confirmation {
  padding: var(--esp-9) 0 var(--esp-9);
  background:
    radial-gradient(ellipse at top, rgba(201, 146, 76, 0.08), transparent 60%),
    var(--creme);
  min-height: 70vh;
}

.confirmation-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.confirmation-icone {
  width: 96px;
  height: 96px;
  margin: 0 auto var(--esp-5);
  background: var(--cuivre);
  color: var(--creme);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  line-height: 1;
  box-shadow: 0 0 0 12px rgba(201, 146, 76, 0.12);
}

.confirmation-titre {
  font-family: var(--serif-editorial);
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--bleu-profond);
  margin-bottom: var(--esp-3);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.confirmation-titre em {
  color: var(--cuivre);
  font-style: italic;
}

.confirmation-baseline {
  font-size: 1.1rem;
  color: var(--gris-doux);
  margin-bottom: var(--esp-7);
  line-height: 1.6;
}

.confirmation-numero {
  display: inline-block;
  font-family: var(--mono-tech);
  font-size: 0.95rem;
  background: var(--blanc-pur);
  border: 1px solid rgba(15, 40, 71, 0.15);
  padding: var(--esp-3) var(--esp-5);
  border-radius: var(--rayon-petit);
  color: var(--bleu-profond);
  margin-bottom: var(--esp-7);
}

.confirmation-numero strong {
  color: var(--cuivre);
  font-weight: 700;
}

.confirmation-etapes {
  background: var(--blanc-pur);
  border: 1px solid rgba(15, 40, 71, 0.08);
  border-radius: var(--rayon-moyen);
  padding: var(--esp-6) var(--esp-6) var(--esp-6) var(--esp-6);
  text-align: left;
  margin-bottom: var(--esp-6);
}

.confirmation-etapes h2 {
  font-family: var(--serif-editorial);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--bleu-profond);
  margin: 0 0 var(--esp-5);
}

.confirmation-etapes ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: etapes;
}

.confirmation-etapes li {
  counter-increment: etapes;
  padding: var(--esp-4) 0 var(--esp-4) var(--esp-8);
  position: relative;
  border-bottom: 1px solid rgba(15, 40, 71, 0.06);
  line-height: 1.6;
}

.confirmation-etapes li:last-child { border-bottom: none; }

.confirmation-etapes li::before {
  content: counter(etapes);
  position: absolute;
  left: 0;
  top: var(--esp-4);
  width: 36px;
  height: 36px;
  background: rgba(201, 146, 76, 0.15);
  color: var(--cuivre);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono-tech);
  font-weight: 600;
  font-size: 0.9rem;
}

.confirmation-etapes li strong {
  color: var(--bleu-profond);
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}

.confirmation-etapes li small {
  display: block;
  margin-top: var(--esp-2);
  font-size: 0.85rem;
  color: var(--gris-doux);
  font-style: italic;
}

.confirmation-actions {
  display: flex;
  justify-content: center;
  gap: var(--esp-3);
  flex-wrap: wrap;
  margin-top: var(--esp-5);
}


/* ═══════════════════════════════════════════════════════════════════════
   PAGE LEGAL (mentions / CGV / RGPD)
   ═══════════════════════════════════════════════════════════════════════ */

.legal {
  padding: var(--esp-7) 0 var(--esp-9);
  background: var(--creme);
}

.legal-inner {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--esp-7);
  align-items: flex-start;
}

.legal-nav {
  position: sticky;
  top: 90px;
  background: var(--blanc-pur);
  border: 1px solid rgba(15, 40, 71, 0.08);
  border-radius: var(--rayon-moyen);
  padding: var(--esp-5);
}

.legal-nav h3 {
  font-family: var(--mono-tech);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris-doux);
  margin: 0 0 var(--esp-3);
}

.legal-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.legal-nav li {
  padding: var(--esp-2) 0;
}

.legal-nav a {
  color: var(--bleu-profond);
  text-decoration: none;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  transition: color var(--transit-rapide);
}

.legal-nav a::before {
  content: '●';
  color: var(--cuivre);
  font-size: 0.5rem;
  opacity: 0.4;
  transition: opacity var(--transit-rapide);
}

.legal-nav a:hover {
  color: var(--cuivre);
}

.legal-nav a:hover::before {
  opacity: 1;
}

.legal-section {
  background: var(--blanc-pur);
  border: 1px solid rgba(15, 40, 71, 0.08);
  border-radius: var(--rayon-moyen);
  padding: var(--esp-7);
  margin-bottom: var(--esp-5);
  scroll-margin-top: 100px;
}

.legal-section h2 {
  font-family: var(--serif-editorial);
  font-weight: 300;
  font-size: 2rem;
  color: var(--bleu-profond);
  margin: 0 0 var(--esp-2);
  letter-spacing: -0.01em;
}

.legal-section h2 em {
  color: var(--cuivre);
  font-style: italic;
}

.legal-section-meta {
  font-family: var(--mono-tech);
  font-size: 0.78rem;
  color: var(--gris-doux);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--esp-5);
  padding-bottom: var(--esp-3);
  border-bottom: 1px solid rgba(15, 40, 71, 0.08);
}

.legal-section h3 {
  font-family: var(--serif-editorial);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--bleu-profond);
  margin: var(--esp-5) 0 var(--esp-3);
}

.legal-section p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--noir-charbon);
  margin-bottom: var(--esp-3);
}

.legal-section ul {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--noir-charbon);
  padding-left: var(--esp-5);
  margin-bottom: var(--esp-3);
}

.legal-section li {
  padding: var(--esp-1) 0;
}

.legal-info-bloc {
  background: var(--creme);
  border-left: 3px solid var(--cuivre);
  padding: var(--esp-4) var(--esp-5);
  margin: var(--esp-4) 0;
  border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
}

.legal-info-bloc p {
  margin: 0;
  font-size: 0.9rem;
}

.legal-placeholder {
  background: rgba(255, 159, 67, 0.08);
  border: 1px dashed rgba(255, 159, 67, 0.4);
  padding: var(--esp-4) var(--esp-5);
  border-radius: var(--rayon-petit);
  font-size: 0.88rem;
  color: #c47222;
  font-style: italic;
  margin: var(--esp-3) 0;
}

.legal-placeholder strong {
  color: #a8550c;
  font-style: normal;
  font-weight: 600;
}


/* ─── 40. RESPONSIVE pages 4-6 ─────────────────────────────────────────── */

@media (max-width: 1024px) {
  .commander-inner,
  .legal-inner {
    grid-template-columns: 1fr;
  }
  .commander-recap,
  .legal-nav {
    position: static;
    max-height: none;
  }
  .form-grille {
    grid-template-columns: 1fr;
  }
  .paiement-tag {
    margin-left: 0;
  }
}

@media (max-width: 720px) {
  .legal-section {
    padding: var(--esp-5);
  }
  .confirmation-etapes {
    padding: var(--esp-5);
  }
  .confirmation-etapes li {
    padding-left: var(--esp-7);
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   SECTION AIGUILLAGE — Tuiles d'orientation par profil utilisateur
   Ajoutée pour la refonte de l'accueil (session 1)
   ═══════════════════════════════════════════════════════════════════════ */

.aiguillage {
  padding: var(--esp-9) 0;
  background:
    linear-gradient(180deg, var(--blanc-pur) 0%, var(--creme) 100%),
    var(--creme);
}

.aiguillage-entete {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--esp-7);
}

.aiguillage-suptitre {
  font-family: var(--mono-tech);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--cuivre);
  text-transform: uppercase;
  margin-bottom: var(--esp-3);
}

.aiguillage-titre {
  font-family: var(--serif-editorial);
  font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--bleu-profond);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: var(--esp-4);
}

.aiguillage-titre em {
  color: var(--cuivre);
  font-style: italic;
}

.aiguillage-baseline {
  font-size: 1rem;
  color: var(--gris-doux);
  line-height: 1.7;
  margin: 0;
}


/* ─── CATÉGORIES DE TUILES ─── */

.aiguillage-categorie {
  margin-bottom: var(--esp-7);
}

.aiguillage-categorie:last-child {
  margin-bottom: 0;
}

.aiguillage-categorie-titre {
  font-family: var(--serif-editorial);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--bleu-profond);
  margin-bottom: var(--esp-5);
  display: flex;
  align-items: baseline;
  gap: var(--esp-3);
  padding-bottom: var(--esp-3);
  border-bottom: 1px solid rgba(15, 40, 71, 0.08);
}

.aiguillage-categorie-num {
  font-family: var(--mono-tech);
  font-size: 0.85rem;
  color: var(--cuivre);
  font-weight: 600;
  letter-spacing: 0.05em;
}


/* ─── GRILLE ─── */

.aiguillage-grille {
  display: grid;
  gap: var(--esp-4);
}

.aiguillage-grille-4 {
  grid-template-columns: repeat(4, 1fr);
}

.aiguillage-grille-2 {
  grid-template-columns: repeat(2, 1fr);
}


/* ─── TUILE INDIVIDUELLE ─── */

.tuile-aiguillage {
  display: flex;
  flex-direction: column;
  background: var(--blanc-pur);
  border: 1px solid rgba(15, 40, 71, 0.08);
  border-radius: var(--rayon-moyen);
  padding: var(--esp-5);
  text-decoration: none;
  color: inherit;
  transition: all var(--transit-rapide);
  position: relative;
  overflow: hidden;
}

.tuile-aiguillage::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--cuivre);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transit-moyen);
}

.tuile-aiguillage:hover {
  border-color: var(--cuivre-clair);
  box-shadow: var(--ombre-moyenne);
  transform: translateY(-2px);
}

.tuile-aiguillage:hover::before {
  transform: scaleX(1);
}

.tuile-icone {
  font-size: 2.2rem;
  margin-bottom: var(--esp-4);
  line-height: 1;
}

.tuile-nom {
  font-family: var(--serif-editorial);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--bleu-profond);
  margin: 0 0 var(--esp-3);
  letter-spacing: -0.01em;
}

.tuile-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--gris-doux);
  margin-bottom: var(--esp-4);
  flex-grow: 1;
}

.tuile-desc strong {
  color: var(--bleu-profond);
  font-weight: 600;
}

.tuile-cta {
  font-family: var(--sans-corps);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--cuivre);
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  transition: gap var(--transit-rapide);
  margin-top: auto;
}

.tuile-aiguillage:hover .tuile-cta {
  gap: var(--esp-3);
}

.tuile-tag {
  display: inline-block;
  margin-top: var(--esp-3);
  padding: 3px var(--esp-3);
  background: rgba(201, 146, 76, 0.12);
  color: var(--cuivre-fonce);
  font-family: var(--mono-tech);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--rayon-petit);
  align-self: flex-start;
}


/* ─── DEMANDES DIRECTES (différenciées visuellement) ─── */

.aiguillage-categorie-direct .tuile-aiguillage {
  background: linear-gradient(180deg, var(--blanc-pur) 0%, var(--creme) 100%);
  border-color: rgba(201, 146, 76, 0.2);
}

.aiguillage-categorie-direct .tuile-aiguillage::before {
  background: linear-gradient(90deg, var(--cuivre) 0%, var(--cuivre-clair) 100%);
}

.aiguillage-categorie-direct .tuile-icone {
  font-size: 2.6rem;
}


/* ─── COULEURS SPÉCIFIQUES PAR TUILE (subtilité, pas envahissant) ─── */

.tuile-erp .tuile-icone        { color: var(--bleu-profond); }
.tuile-tech .tuile-icone       { filter: hue-rotate(0deg); }
.tuile-partenaire .tuile-icone { filter: brightness(1.05); }
.tuile-portail .tuile-icone    { filter: saturate(0.95); }


/* ─── RESPONSIVE ─── */

@media (max-width: 1024px) {
  .aiguillage-grille-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .aiguillage-grille-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .aiguillage-grille-4,
  .aiguillage-grille-2 {
    grid-template-columns: 1fr;
  }
  .aiguillage-categorie-titre {
    font-size: 1rem;
  }
  .tuile-aiguillage {
    padding: var(--esp-4);
  }
  .tuile-icone {
    font-size: 2rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   ACCUEIL v2.0 — refonte façon hub d'aiguillage
   Section ajoutée pour la nouvelle home épurée
   ═══════════════════════════════════════════════════════════════════════ */

/* Le body de l'accueil hub a un fond légèrement différencié */
.page-accueil-hub {
  background: var(--creme);
}


/* ─── HERO COMPACT (version 2.0) ───────────────────────────────────────── */

.hero-hub {
  padding: var(--esp-9) 0 var(--esp-7);
  text-align: center;
  background:
    radial-gradient(ellipse at top, rgba(201, 146, 76, 0.04), transparent 60%),
    var(--creme);
  border-bottom: 1px solid rgba(15, 40, 71, 0.06);
}

.hero-hub-suptitre {
  font-family: var(--mono-tech);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--cuivre);
  text-transform: uppercase;
  margin-bottom: var(--esp-4);
}

.hero-hub-titre {
  font-family: var(--serif-editorial);
  font-weight: 300;
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  color: var(--bleu-profond);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: var(--esp-5);
}

.hero-hub-titre em {
  color: var(--cuivre);
  font-style: italic;
  font-weight: 400;
}

.signature-graphique {
  font-family: var(--mono-tech);
  font-size: 0.95rem;
  color: var(--cuivre);
  letter-spacing: 0.15em;
  opacity: 0.75;
  margin-top: var(--esp-3);
}


/* ─── BANDEAU ERP (tuile pleine largeur, fond bleu profond) ───────────── */

.bandeau-erp {
  padding: var(--esp-7) 0;
  background: var(--creme);
}

.bandeau-erp-inner {
  background: var(--bleu-profond);
  color: var(--creme);
  border-radius: var(--rayon-grand);
  padding: var(--esp-7) var(--esp-7);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--esp-7);
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--ombre-forte);
}

.bandeau-erp-inner::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(201, 146, 76, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.bandeau-erp-inner::after {
  content: '●━━━●━━━●━━━●';
  position: absolute;
  bottom: var(--esp-4);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono-tech);
  font-size: 0.85rem;
  color: var(--cuivre);
  opacity: 0.3;
  letter-spacing: 0.15em;
  pointer-events: none;
}

.bandeau-erp-gauche {
  position: relative;
  z-index: 1;
}

.bandeau-erp-label {
  display: inline-block;
  font-family: var(--mono-tech);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--cuivre-clair);
  text-transform: uppercase;
  margin-bottom: var(--esp-3);
  padding: 4px var(--esp-3);
  background: rgba(201, 146, 76, 0.15);
  border: 1px solid rgba(201, 146, 76, 0.3);
  border-radius: var(--rayon-petit);
}

.bandeau-erp-titre {
  font-family: var(--serif-editorial);
  font-weight: 300;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: var(--creme);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: var(--esp-4);
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  flex-wrap: wrap;
}

.bandeau-erp-titre em {
  color: var(--cuivre-clair);
  font-style: italic;
  font-weight: 400;
}

.bandeau-erp-icone {
  font-size: 2.2rem;
  line-height: 1;
}

.bandeau-erp-desc {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(248, 245, 238, 0.85);
  margin-bottom: var(--esp-5);
  max-width: 600px;
}

.bandeau-erp-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}

.bandeau-erp-points li {
  position: relative;
  padding-left: var(--esp-5);
  font-size: 0.92rem;
  color: rgba(248, 245, 238, 0.85);
  line-height: 1.6;
}

.bandeau-erp-points li::before {
  content: '●';
  position: absolute;
  left: 0;
  top: 5px;
  color: var(--cuivre);
  font-size: 0.6rem;
}

.bandeau-erp-points strong {
  color: var(--creme);
  font-weight: 600;
}


/* ─── COLONNE DROITE BANDEAU (boutons) ───────────────────────────────── */

.bandeau-erp-droite {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}

.bouton-bandeau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  padding: var(--esp-4) var(--esp-5);
  border-radius: var(--rayon-petit);
  font-family: var(--sans-corps);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  text-align: left;
  transition: all var(--transit-rapide);
  border: 2px solid transparent;
}

.bouton-bandeau-primaire {
  background: var(--cuivre);
  color: var(--bleu-profond);
}

.bouton-bandeau-primaire:hover {
  background: var(--cuivre-clair);
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(201, 146, 76, 0.3);
}

.bouton-bandeau-secondaire {
  background: transparent;
  color: var(--creme);
  border-color: rgba(248, 245, 238, 0.3);
}

.bouton-bandeau-secondaire:hover {
  background: rgba(248, 245, 238, 0.08);
  border-color: var(--cuivre-clair);
  color: var(--cuivre-clair);
}

.bouton-fleche {
  font-family: var(--mono-tech);
  font-size: 1.2rem;
  transition: transform var(--transit-rapide);
}

.bouton-bandeau:hover .bouton-fleche {
  transform: translateX(4px);
}

.bandeau-erp-rassurance {
  margin-top: var(--esp-3);
  font-size: 0.82rem;
  color: rgba(248, 245, 238, 0.55);
  font-style: italic;
  text-align: center;
}


/* ─── AIGUILLAGE HUB (sections espaces + demandes) ─────────────────────── */

.aiguillage-hub {
  padding: var(--esp-7) 0;
}

.aiguillage-hub-direct {
  background:
    linear-gradient(180deg, transparent 0%, rgba(201, 146, 76, 0.05) 100%);
  padding-bottom: var(--esp-9);
}

.aiguillage-categorie-entete {
  text-align: center;
  margin-bottom: var(--esp-6);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.aiguillage-categorie-entete .aiguillage-categorie-num {
  display: inline-block;
  font-family: var(--mono-tech);
  font-size: 0.85rem;
  color: var(--cuivre);
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: var(--esp-3);
}

.aiguillage-categorie-entete .aiguillage-categorie-titre {
  font-family: var(--serif-editorial);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--bleu-profond);
  margin: 0 0 var(--esp-3);
  line-height: 1.2;
  letter-spacing: -0.01em;
  border: none;
  padding: 0;
  display: block;
}

.aiguillage-categorie-baseline {
  font-size: 0.95rem;
  color: var(--gris-doux);
  line-height: 1.6;
  margin: 0;
}


/* ─── FOOTER COMPACT ───────────────────────────────────────────────────── */

.site-footer-compact {
  padding-top: var(--esp-7);
  padding-bottom: var(--esp-5);
}


/* ─── RESPONSIVE bandeau ERP ───────────────────────────────────────────── */

@media (max-width: 1024px) {
  .bandeau-erp-inner {
    grid-template-columns: 1fr;
    gap: var(--esp-5);
    padding: var(--esp-6);
  }
  .bandeau-erp-droite {
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .hero-hub {
    padding: var(--esp-7) 0 var(--esp-5);
  }
  .bandeau-erp-inner {
    padding: var(--esp-5);
    border-radius: var(--rayon-moyen);
  }
  .bandeau-erp-titre {
    font-size: 1.6rem;
  }
  .bouton-bandeau {
    font-size: 0.92rem;
    padding: var(--esp-3) var(--esp-4);
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   HEADER v2.0 — refonte navigation classique SaaS
   Liens textuels (L'offre · Tarifs · Aide) + bouton Connexion
   ═══════════════════════════════════════════════════════════════════════ */

/* Les nouveaux liens utilisent .nav-lien (alias visuel des anciens "a") */
.nav-principale .nav-lien {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--bleu-profond);
  position: relative;
  padding: var(--esp-2) 0;
  text-decoration: none;
  transition: color var(--transit-rapide);
}

.nav-principale .nav-lien::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--cuivre);
  transition: width var(--transit-douce);
}

.nav-principale .nav-lien:hover {
  color: var(--cuivre);
}

.nav-principale .nav-lien:hover::after {
  width: 100%;
}

.nav-principale .nav-lien.actif {
  color: var(--cuivre);
  font-weight: 600;
}

.nav-principale .nav-lien.actif::after {
  width: 100%;
}


/* ─── BOUTON CONNEXION (mise en avant, distinct des liens textuels) ───── */

.nav-principale .nav-bouton-connexion {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  background: var(--bleu-profond);
  color: var(--creme);
  padding: var(--esp-3) var(--esp-5);
  border-radius: var(--rayon-petit);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transit-rapide);
  border: 2px solid var(--bleu-profond);
  margin-left: var(--esp-2);
}

.nav-principale .nav-bouton-connexion::before {
  content: '→';
  font-family: var(--mono-tech);
  font-size: 0.95rem;
  opacity: 0.85;
  margin-right: 2px;
  transition: transform var(--transit-rapide);
}

.nav-principale .nav-bouton-connexion::after {
  display: none;
}

.nav-principale .nav-bouton-connexion:hover {
  background: var(--cuivre);
  border-color: var(--cuivre);
  color: var(--bleu-profond);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(201, 146, 76, 0.25);
}

.nav-principale .nav-bouton-connexion:hover::before {
  transform: translateX(2px);
}


/* ─── HEADER STICKY (toujours visible au scroll) ───────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(248, 245, 238, 0.92);
  border-bottom: 1px solid rgba(15, 40, 71, 0.06);
}


/* ─── RESPONSIVE header ────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .nav-principale {
    gap: var(--esp-3);
  }
  .nav-principale .nav-lien {
    font-size: 0.85rem;
  }
  .nav-principale .nav-bouton-connexion {
    padding: var(--esp-2) var(--esp-4);
    font-size: 0.85rem;
    margin-left: 0;
  }
  /* En mobile, on cache "Aide" pour gagner de la place */
  .nav-principale .nav-lien:nth-child(3) {
    display: none;
  }
}

@media (max-width: 480px) {
  /* Sur très petit écran : on garde juste logo + bouton Connexion */
  .nav-principale .nav-lien {
    display: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   ANCRAGE FLUIDE DU HEADER VERS LES SECTIONS
   Liens du header (#offre, #espaces, #demandes) qui scrollent en douceur
   ═══════════════════════════════════════════════════════════════════════ */

/* Scroll animé au clic sur une ancre (toute la page) */
html {
  scroll-behavior: smooth;
}

/* Pour les utilisateurs préférant les animations réduites */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Le header est sticky (~70px), donc les sections-cible doivent prévoir un
   espace en haut pour ne pas être masquées par le header. */
section[id="erp"],
section[id="services"],
section[id="rejoindre"] {
  scroll-margin-top: 80px;
}


/* ═══════════════════════════════════════════════════════════════════════
   PAGES INTERVENTION + MAINTENANCE
   Composants spécifiques aux 2 formulaires de demande directe
   ═══════════════════════════════════════════════════════════════════════ */


/* ─── BLOC COMMENT ÇA MARCHE / POURQUOI ─────────────────────────────── */

.bloc-comment {
  padding: var(--esp-7) 0;
  background: var(--blanc-pur);
}

.bloc-comment-titre {
  font-family: var(--serif-editorial);
  font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--bleu-profond);
  text-align: center;
  margin: 0 0 var(--esp-6);
  letter-spacing: -0.01em;
}

.bloc-comment-titre em {
  color: var(--cuivre);
  font-style: italic;
}

.comment-etapes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-5);
  max-width: 1100px;
  margin: 0 auto;
}

.comment-etape {
  text-align: center;
  padding: 0 var(--esp-3);
}

.comment-etape-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--cuivre);
  color: var(--creme);
  border-radius: 50%;
  font-family: var(--serif-editorial);
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: var(--esp-4);
}

.comment-etape-icone-grand {
  font-size: 2.6rem;
  margin-bottom: var(--esp-3);
  line-height: 1;
}

.comment-etape-nom {
  font-family: var(--serif-editorial);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--bleu-profond);
  margin: 0 0 var(--esp-3);
}

.comment-etape-desc {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--gris-doux);
  margin: 0;
}

.bloc-comment-precision {
  margin-top: var(--esp-6);
  text-align: center;
  font-size: 0.9rem;
  color: var(--gris-doux);
  font-style: italic;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding: var(--esp-4);
  background: var(--creme);
  border-left: 3px solid var(--cuivre);
  border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
}

.bloc-comment-precision strong {
  color: var(--bleu-profond);
}


/* ─── CARTES RADIO (type de demande) ────────────────────────────────── */

.cartes-radio {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-3);
}

.cartes-radio-petites {
  grid-template-columns: repeat(2, 1fr);
  max-width: 480px;
}

.carte-radio {
  position: relative;
  cursor: pointer;
}

.carte-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.carte-radio-inner {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5);
  background: var(--blanc-pur);
  border: 2px solid rgba(15, 40, 71, 0.1);
  border-radius: var(--rayon-moyen);
  transition: all var(--transit-rapide);
  height: 100%;
}

.carte-radio:hover .carte-radio-inner {
  border-color: var(--cuivre-clair);
  background: var(--creme);
}

.carte-radio input[type="radio"]:checked + .carte-radio-inner {
  border-color: var(--cuivre);
  background: var(--blanc-pur);
  box-shadow: 0 0 0 4px rgba(201, 146, 76, 0.1);
}

.carte-radio-icone {
  font-size: 1.8rem;
  line-height: 1;
  flex-shrink: 0;
}

.carte-radio-corps {
  flex: 1;
  min-width: 0;
}

.carte-radio-nom {
  font-family: var(--serif-editorial);
  font-weight: 500;
  font-size: 1rem;
  color: var(--bleu-profond);
  margin: 0 0 var(--esp-2);
  line-height: 1.3;
}

.carte-radio-desc {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--gris-doux);
  margin: 0;
}

.carte-radio-petite .carte-radio-inner {
  padding: var(--esp-3) var(--esp-4);
}

.carte-radio-petite .carte-radio-icone {
  font-size: 1.4rem;
}


/* ─── CASES INSTALLATION (multi-select avec icônes) ─────────────────── */

.cases-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-3);
}

.case-installation {
  position: relative;
  cursor: pointer;
}

.case-installation input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.case-installation-inner {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-4);
  background: var(--blanc-pur);
  border: 2px solid rgba(15, 40, 71, 0.1);
  border-radius: var(--rayon-petit);
  transition: all var(--transit-rapide);
}

.case-installation:hover .case-installation-inner {
  border-color: var(--cuivre-clair);
  background: var(--creme);
}

.case-installation input:checked + .case-installation-inner {
  border-color: var(--cuivre);
  background: rgba(201, 146, 76, 0.08);
}

.case-icone {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}

.case-nom {
  font-family: var(--sans-corps);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--bleu-profond);
}


/* ─── NIVEAUX DE MAINTENANCE (3 cartes) ─────────────────────────────── */

.niveaux-maintenance {
  padding: var(--esp-7) 0;
  background: var(--creme);
}

.niveaux-entete {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--esp-6);
}

.niveaux-suptitre {
  font-family: var(--mono-tech);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--cuivre);
  text-transform: uppercase;
  margin-bottom: var(--esp-3);
}

.niveaux-titre {
  font-family: var(--serif-editorial);
  font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--bleu-profond);
  margin: 0 0 var(--esp-3);
  letter-spacing: -0.01em;
}

.niveaux-titre em {
  color: var(--cuivre);
  font-style: italic;
}

.niveaux-baseline {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--gris-doux);
  margin: 0;
}

.niveaux-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-4);
  max-width: 1200px;
  margin: 0 auto;
}

.niveau-carte {
  position: relative;
  background: var(--blanc-pur);
  border: 2px solid rgba(15, 40, 71, 0.08);
  border-radius: var(--rayon-moyen);
  padding: var(--esp-6) var(--esp-5);
  display: flex;
  flex-direction: column;
}

.niveau-carte-recommandee {
  border-color: var(--cuivre);
  box-shadow: 0 8px 24px rgba(201, 146, 76, 0.15);
  transform: scale(1.02);
}

.niveau-bandeau {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cuivre);
  color: var(--bleu-profond);
  font-family: var(--mono-tech);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px var(--esp-4);
  border-radius: var(--rayon-petit);
  white-space: nowrap;
}

.niveau-tag {
  display: inline-block;
  font-family: var(--mono-tech);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cuivre);
  font-weight: 600;
  margin-bottom: var(--esp-3);
}

.niveau-nom {
  font-family: var(--serif-editorial);
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--bleu-profond);
  margin: 0 0 var(--esp-5);
  letter-spacing: -0.01em;
}

.niveau-points {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--esp-5);
  flex-grow: 1;
}

.niveau-points li {
  position: relative;
  padding: var(--esp-2) 0 var(--esp-2) var(--esp-5);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--noir-charbon);
  border-bottom: 1px solid rgba(15, 40, 71, 0.05);
}

.niveau-points li:last-child {
  border-bottom: none;
}

.niveau-points li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: var(--esp-2);
  color: var(--cuivre);
  font-weight: 700;
}

.niveau-points strong {
  color: var(--bleu-profond);
  font-weight: 600;
}

.niveau-prix {
  margin: 0;
  padding-top: var(--esp-4);
  border-top: 1px dashed rgba(15, 40, 71, 0.1);
  text-align: center;
}

.prix-mention {
  font-family: var(--serif-editorial);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--cuivre);
}

.niveaux-precision {
  max-width: 800px;
  margin: var(--esp-6) auto 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--gris-doux);
  line-height: 1.7;
}


/* ─── FORMULAIRE SECTION (commune intervention + maintenance) ───────── */

.formulaire-section {
  padding: var(--esp-7) 0 var(--esp-9);
  background: var(--creme);
}

.formulaire-inner {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--esp-6);
  align-items: flex-start;
}

/* Pour maintenance.php : pas d'encart latéral, formulaire sur toute la largeur */
.formulaire-section:not(:has(.encart-confiance)) .formulaire-inner,
.maintenance-form-inner {
  grid-template-columns: 1fr;
}


/* ─── ENCART CONFIANCE (latéral sur intervention.php) ───────────────── */

.encart-confiance {
  position: sticky;
  top: 90px;
  background: var(--blanc-pur);
  border: 1px solid rgba(15, 40, 71, 0.08);
  border-radius: var(--rayon-moyen);
  padding: var(--esp-5);
  align-self: flex-start;
}

.encart-confiance-titre {
  font-family: var(--serif-editorial);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--bleu-profond);
  margin: 0 0 var(--esp-4);
  padding-bottom: var(--esp-3);
  border-bottom: 1px solid rgba(15, 40, 71, 0.08);
}

.encart-confiance-titre em {
  color: var(--cuivre);
  font-style: italic;
}

.encart-confiance-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}

.encart-confiance-points li {
  display: flex;
  gap: var(--esp-3);
  align-items: flex-start;
}

.encart-icone {
  font-size: 1.3rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}

.encart-confiance-points strong {
  display: block;
  font-size: 0.92rem;
  color: var(--bleu-profond);
  font-weight: 600;
  margin-bottom: 2px;
}

.encart-confiance-points p {
  font-size: 0.82rem;
  color: var(--gris-doux);
  line-height: 1.5;
  margin: 0;
}


/* ─── TEXTAREA (descriptions libres) ────────────────────────────────── */

.form-champ textarea {
  background: var(--blanc-pur);
  border: 1px solid rgba(15, 40, 71, 0.15);
  border-radius: var(--rayon-petit);
  padding: var(--esp-3) var(--esp-4);
  font-family: var(--sans-corps);
  font-size: 0.92rem;
  color: var(--noir-charbon);
  resize: vertical;
  min-height: 100px;
  transition: border-color var(--transit-rapide), box-shadow var(--transit-rapide);
}

.form-champ textarea:focus {
  outline: none;
  border-color: var(--cuivre);
  box-shadow: 0 0 0 3px rgba(201, 146, 76, 0.12);
}


/* ─── INPUT FILE (upload photos) ────────────────────────────────────── */

.form-champ input[type="file"] {
  background: var(--creme);
  border: 2px dashed rgba(15, 40, 71, 0.15);
  border-radius: var(--rayon-petit);
  padding: var(--esp-4);
  font-family: var(--sans-corps);
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color var(--transit-rapide), background var(--transit-rapide);
}

.form-champ input[type="file"]:hover {
  border-color: var(--cuivre);
  background: var(--blanc-pur);
}


/* ─── RESPONSIVE intervention/maintenance ───────────────────────────── */

@media (max-width: 1024px) {
  .formulaire-inner {
    grid-template-columns: 1fr;
  }
  .encart-confiance {
    position: static;
  }
  .niveaux-grille {
    grid-template-columns: 1fr;
    gap: var(--esp-5);
  }
  .niveau-carte-recommandee {
    transform: none;
  }
  .comment-etapes {
    grid-template-columns: 1fr;
    gap: var(--esp-6);
  }
}

@media (max-width: 720px) {
  .cartes-radio {
    grid-template-columns: 1fr;
  }
  .cases-grille {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .cases-grille {
    grid-template-columns: 1fr;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PAGE RECRUTEMENT — grille des spécialités recherchées
   ═══════════════════════════════════════════════════════════════════════ */

.specialites-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--esp-4);
  max-width: 1100px;
  margin: 0 auto;
}

.specialite-carte {
  background: var(--blanc-pur);
  border: 1px solid rgba(15, 40, 71, 0.08);
  border-radius: var(--rayon-moyen);
  padding: var(--esp-5);
  text-align: center;
  transition: all var(--transit-rapide);
}

.specialite-carte:hover {
  transform: translateY(-2px);
  border-color: var(--cuivre-clair);
  box-shadow: var(--ombre-moyenne);
}

.specialite-icone {
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: var(--esp-3);
}

.specialite-nom {
  font-family: var(--serif-editorial);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--bleu-profond);
  margin: 0 0 var(--esp-2);
}

.specialite-desc {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--gris-doux);
  margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   ACCUEIL — SECTION 03 GRANDS COMPTES (commanditaire)
   Tuile pleine largeur avec mise en valeur "premium"
   ═══════════════════════════════════════════════════════════════════════ */

.aiguillage-hub-comptes {
  background:
    linear-gradient(180deg, var(--creme) 0%, rgba(15, 40, 71, 0.04) 100%);
  border-top: 1px solid rgba(15, 40, 71, 0.06);
}

.aiguillage-grille-1 {
  grid-template-columns: 1fr;
  max-width: 980px;
  margin: 0 auto;
}

.tuile-commanditaire.tuile-aiguillage {
  background: linear-gradient(135deg, var(--blanc-pur) 0%, rgba(15, 40, 71, 0.03) 100%);
  border-color: rgba(15, 40, 71, 0.15);
  padding: var(--esp-7) var(--esp-7);
  text-align: center;
}

.tuile-commanditaire .tuile-icone {
  font-size: 3.2rem;
  margin: 0 auto var(--esp-4);
}

.tuile-commanditaire .tuile-nom {
  font-size: 1.5rem;
  margin-bottom: var(--esp-4);
}

.tuile-commanditaire .tuile-desc {
  max-width: 720px;
  margin: 0 auto var(--esp-5);
  font-size: 0.95rem;
  text-align: center;
}

.tuile-commanditaire .tuile-cta {
  font-size: 0.95rem;
}

.tuile-commanditaire .tuile-tag {
  margin-top: var(--esp-3);
  background: rgba(15, 40, 71, 0.08);
  color: var(--bleu-profond);
  align-self: center;
}

.tuile-commanditaire::before {
  background: linear-gradient(90deg, var(--cuivre) 0%, var(--bleu-profond) 100%);
}


/* ═══════════════════════════════════════════════════════════════════════
   PAGE FAQ — Accordéons natifs + navigation par catégorie
   ═══════════════════════════════════════════════════════════════════════ */

/* Navigation rapide en haut (sticky pour suivi du scroll) */
.faq-nav {
  background: var(--blanc-pur);
  border-bottom: 1px solid rgba(15, 40, 71, 0.06);
  padding: var(--esp-4) 0;
  position: sticky;
  top: 75px; /* sous le header sticky */
  z-index: 50;
}

.faq-categories {
  display: flex;
  gap: var(--esp-3);
  justify-content: center;
  flex-wrap: wrap;
}

.faq-cat-lien {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-4);
  background: var(--creme);
  border: 1px solid rgba(15, 40, 71, 0.08);
  border-radius: var(--rayon-petit);
  text-decoration: none;
  color: var(--bleu-profond);
  font-size: 0.9rem;
  font-weight: 500;
  transition: all var(--transit-rapide);
}

.faq-cat-lien:hover {
  border-color: var(--cuivre);
  background: rgba(201, 146, 76, 0.05);
}

.faq-cat-icone {
  font-size: 1.05rem;
}

/* Sections FAQ */
.faq-section {
  padding: var(--esp-7) 0;
  background: var(--blanc-pur);
  scroll-margin-top: 160px; /* sticky header + sticky nav */
}

.faq-section-alt {
  background: var(--creme);
}

.faq-conteneur {
  max-width: 880px;
}

.faq-section-entete {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin-bottom: var(--esp-5);
  padding-bottom: var(--esp-3);
  border-bottom: 2px solid rgba(15, 40, 71, 0.08);
}

.faq-section-icone {
  font-size: 1.8rem;
}

.faq-section-titre {
  font-family: var(--serif-editorial);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--bleu-profond);
  margin: 0;
}

/* Accordéon natif HTML5 */
.faq-item {
  background: var(--blanc-pur);
  border: 1px solid rgba(15, 40, 71, 0.08);
  border-radius: var(--rayon-petit);
  margin-bottom: var(--esp-3);
  overflow: hidden;
  transition: all var(--transit-rapide);
}

.faq-section-alt .faq-item {
  background: var(--blanc-pur);
}

.faq-item[open] {
  border-color: var(--cuivre-clair);
  box-shadow: 0 4px 12px rgba(15, 40, 71, 0.05);
}

.faq-question {
  list-style: none;
  cursor: pointer;
  padding: var(--esp-4) var(--esp-5);
  font-family: var(--sans-corps);
  font-weight: 600;
  font-size: 1rem;
  color: var(--bleu-profond);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  position: relative;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question::after {
  content: '+';
  font-family: var(--mono-tech);
  font-size: 1.4rem;
  color: var(--cuivre);
  font-weight: 300;
  transition: transform var(--transit-rapide);
  flex-shrink: 0;
}

.faq-item[open] .faq-question::after {
  transform: rotate(45deg);
}

.faq-question:hover {
  background: var(--creme);
}

.faq-reponse {
  padding: 0 var(--esp-5) var(--esp-4);
  border-top: 1px solid rgba(15, 40, 71, 0.06);
  margin-top: -1px;
}

.faq-reponse p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--noir-charbon);
  margin: var(--esp-3) 0;
}

.faq-reponse ul {
  margin: var(--esp-3) 0;
  padding-left: var(--esp-5);
}

.faq-reponse li {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--noir-charbon);
  margin-bottom: var(--esp-2);
}

.faq-reponse strong {
  color: var(--bleu-profond);
}

.faq-reponse a {
  color: var(--cuivre);
  text-decoration: underline;
  text-decoration-color: rgba(201, 146, 76, 0.4);
}

.faq-reponse a:hover {
  text-decoration-color: var(--cuivre);
}


/* ─── BLOC CONTACT EN FIN DE FAQ ─── */

.faq-contact {
  padding: var(--esp-9) 0;
  background:
    linear-gradient(135deg, var(--bleu-profond) 0%, #1a3556 100%);
  color: var(--creme);
  text-align: center;
}

.faq-contact-titre {
  font-family: var(--serif-editorial);
  font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  color: var(--creme);
  margin: 0 0 var(--esp-4);
}

.faq-contact-titre em {
  color: var(--cuivre-clair);
  font-style: italic;
}

.faq-contact-baseline {
  font-size: 1rem;
  color: rgba(248, 245, 238, 0.85);
  margin: 0 auto var(--esp-6);
  max-width: 540px;
}

.faq-contact-actions {
  display: flex;
  gap: var(--esp-3);
  justify-content: center;
  flex-wrap: wrap;
}


/* ═══════════════════════════════════════════════════════════════════════
   PAGE CONNEXION — Aiguillage 3 espaces
   ═══════════════════════════════════════════════════════════════════════ */

.page-connexion {
  background: var(--creme);
}

.connexion-hero {
  padding: var(--esp-7) 0 var(--esp-5);
  text-align: center;
}

.connexion-titre {
  font-family: var(--serif-editorial);
  font-weight: 300;
  font-size: clamp(2rem, 4.5vw, 3rem);
  color: var(--bleu-profond);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--esp-4);
}

.connexion-titre em {
  color: var(--cuivre);
  font-style: italic;
  font-weight: 400;
}

.connexion-baseline {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--gris-doux);
  max-width: 620px;
  margin: 0 auto;
}

.connexion-baseline em {
  color: var(--bleu-profond);
  font-style: italic;
}

.connexion-section {
  padding: var(--esp-5) 0 var(--esp-9);
}

.connexion-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-5);
  max-width: 1200px;
  margin: 0 auto;
}

.connexion-carte {
  display: flex;
  flex-direction: column;
  background: var(--blanc-pur);
  border: 2px solid rgba(15, 40, 71, 0.1);
  border-radius: var(--rayon-moyen);
  padding: var(--esp-6);
  text-decoration: none;
  color: inherit;
  transition: all var(--transit-rapide);
  position: relative;
  overflow: hidden;
}

.connexion-carte::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--cuivre);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transit-moyen);
}

.connexion-carte:hover {
  transform: translateY(-3px);
  border-color: var(--cuivre);
  box-shadow: 0 12px 28px rgba(15, 40, 71, 0.1);
}

.connexion-carte:hover::before {
  transform: scaleX(1);
}

.connexion-carte-haut {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--esp-4);
  gap: var(--esp-3);
}

.connexion-carte-icone {
  font-size: 2.4rem;
  line-height: 1;
}

.connexion-carte-tag {
  font-family: var(--mono-tech);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cuivre);
  font-weight: 600;
  text-align: right;
  line-height: 1.4;
}

.connexion-carte-nom {
  font-family: var(--serif-editorial);
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--bleu-profond);
  margin: 0 0 var(--esp-3);
  letter-spacing: -0.01em;
}

.connexion-carte-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--gris-doux);
  margin-bottom: var(--esp-4);
}

.connexion-carte-points {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--esp-5);
  flex-grow: 1;
}

.connexion-carte-points li {
  position: relative;
  padding: var(--esp-2) 0 var(--esp-2) var(--esp-4);
  font-size: 0.85rem;
  color: var(--noir-charbon);
  border-bottom: 1px solid rgba(15, 40, 71, 0.05);
}

.connexion-carte-points li:last-child {
  border-bottom: none;
}

.connexion-carte-points li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: var(--esp-2);
  color: var(--cuivre);
  font-weight: 700;
  font-size: 0.85rem;
}

.connexion-carte-cta {
  display: inline-block;
  margin-top: auto;
  padding-top: var(--esp-3);
  font-family: var(--sans-corps);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--cuivre);
  border-top: 1px dashed rgba(15, 40, 71, 0.1);
  transition: gap var(--transit-rapide);
}

.connexion-carte:hover .connexion-carte-cta {
  color: var(--bleu-profond);
}


/* ─── BLOC SÉCURITÉ ─── */

.connexion-securite {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  max-width: 700px;
  margin: var(--esp-7) auto 0;
  padding: var(--esp-4) var(--esp-5);
  background: var(--blanc-pur);
  border-left: 3px solid var(--cuivre);
  border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
}

.connexion-securite-icone {
  font-size: 1.8rem;
  flex-shrink: 0;
}

.connexion-securite strong {
  display: block;
  font-size: 0.95rem;
  color: var(--bleu-profond);
  font-weight: 600;
  margin-bottom: 4px;
}

.connexion-securite p {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--gris-doux);
  margin: 0;
}


/* ─── BLOC AIDE (pas encore de compte) ─── */

.connexion-aide {
  margin: var(--esp-7) auto 0;
  max-width: 760px;
  padding: var(--esp-6) var(--esp-5);
  background: var(--bleu-profond);
  color: var(--creme);
  border-radius: var(--rayon-moyen);
  text-align: center;
}

.connexion-aide-titre {
  font-family: var(--serif-editorial);
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--creme);
  margin: 0 0 var(--esp-3);
}

.connexion-aide-baseline {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(248, 245, 238, 0.8);
  margin: 0 auto var(--esp-5);
  max-width: 520px;
}

.connexion-aide-actions {
  display: flex;
  gap: var(--esp-3);
  justify-content: center;
  flex-wrap: wrap;
}


/* ─── AIDE COMPLÉMENTAIRE ─── */

.connexion-help {
  margin-top: var(--esp-5);
  text-align: center;
}

.connexion-help p {
  font-size: 0.85rem;
  color: var(--gris-doux);
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
}

.connexion-help strong {
  color: var(--bleu-profond);
}

.connexion-help a {
  color: var(--cuivre);
  text-decoration: underline;
}


/* ─── RESPONSIVE ─── */

@media (max-width: 1024px) {
  .connexion-grille {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
}

@media (max-width: 720px) {
  .faq-categories {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: 0 var(--esp-3);
  }
  .faq-cat-lien {
    flex-shrink: 0;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PAGE CONNEXION v2 — Sections Client + Partenaires
   Restructuration suite ajout de l'espace client temporaire
   ═══════════════════════════════════════════════════════════════════════ */

.connexion-categorie {
  margin-bottom: var(--esp-9);
}

.connexion-categorie:last-of-type {
  margin-bottom: var(--esp-7);
}

.connexion-cat-entete {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--esp-5);
}

.connexion-cat-num {
  display: inline-block;
  font-family: var(--mono-tech);
  font-size: 0.85rem;
  color: var(--cuivre);
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: var(--esp-2);
}

.connexion-cat-titre {
  font-family: var(--serif-editorial);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  color: var(--bleu-profond);
  margin: 0 0 var(--esp-3);
  letter-spacing: -0.01em;
}

.connexion-cat-titre em {
  color: var(--cuivre);
  font-style: italic;
}

.connexion-cat-baseline {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gris-doux);
  margin: 0;
}


/* ─── Grilles selon le nombre de cartes ─── */

.connexion-grille-1 {
  grid-template-columns: 1fr;
  max-width: 760px;
  margin: 0 auto;
}

.connexion-grille-3 {
  grid-template-columns: repeat(3, 1fr);
}


/* ─── Carte client (large, mise en avant) ─── */

.connexion-carte-large {
  padding: var(--esp-7);
}

.connexion-carte-client {
  background: linear-gradient(135deg, var(--blanc-pur) 0%, rgba(201, 146, 76, 0.04) 100%);
  border-color: rgba(201, 146, 76, 0.25);
}

.connexion-carte-client .connexion-carte-icone {
  font-size: 3rem;
}

.connexion-carte-client .connexion-carte-nom {
  font-size: 1.5rem;
}

.connexion-carte-client .connexion-carte-desc {
  font-size: 0.95rem;
}

.connexion-carte-client::before {
  background: linear-gradient(90deg, var(--cuivre) 0%, var(--cuivre-clair) 100%);
}


/* ─── Encart "info" temporaire dans la carte client ─── */

.connexion-carte-info {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  margin: var(--esp-3) 0 var(--esp-5);
  padding: var(--esp-4);
  background: rgba(15, 40, 71, 0.05);
  border-left: 3px solid var(--bleu-profond);
  border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
}

.connexion-info-icone {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.connexion-carte-info p {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--gris-doux);
  margin: 0;
}

.connexion-carte-info strong {
  color: var(--bleu-profond);
}

.connexion-carte-info a {
  color: var(--cuivre);
  text-decoration: underline;
  text-decoration-color: rgba(201, 146, 76, 0.4);
  font-weight: 600;
}

.connexion-carte-info a:hover {
  text-decoration-color: var(--cuivre);
}


/* ─── Override : empêcher le hover de bouger l'encart info ─── */

.connexion-carte-client:hover .connexion-carte-info {
  background: rgba(15, 40, 71, 0.07);
}


/* ─── RESPONSIVE pour la nouvelle structure ─── */

@media (max-width: 1024px) {
  .connexion-grille-3 {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin: 0 auto;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   ENCART ESPACE CLIENT (intervention.php + maintenance.php)
   Mention discrète près du bouton d'envoi
   ═══════════════════════════════════════════════════════════════════════ */

.encart-espace-client {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  margin: var(--esp-5) 0;
  padding: var(--esp-4) var(--esp-5);
  background: rgba(15, 40, 71, 0.04);
  border: 1px solid rgba(15, 40, 71, 0.08);
  border-left: 3px solid var(--cuivre);
  border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
}

.encart-espace-icone {
  font-size: 1.4rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}

.encart-espace-corps strong {
  display: block;
  font-size: 0.92rem;
  color: var(--bleu-profond);
  font-weight: 600;
  margin-bottom: 4px;
}

.encart-espace-corps p {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--gris-doux);
  margin: 0;
}

.encart-espace-corps em {
  font-style: italic;
  color: var(--noir-charbon);
}

.encart-espace-corps a {
  color: var(--cuivre);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(201, 146, 76, 0.4);
}

.encart-espace-corps a:hover {
  text-decoration-color: var(--cuivre);
}


/* ═══════════════════════════════════════════════════════════════════════
   PAGES LOGIN (4 espaces : ERP, Technicien, Apporteur, Client)
   Layout centré sobre avec identité Pilotis bleu profond / cuivre / crème
   ═══════════════════════════════════════════════════════════════════════ */

.page-login {
  background: var(--creme);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ─── Header simplifié pour pages login ─── */

.login-header {
  background: var(--blanc-pur);
  border-bottom: 1px solid rgba(15, 40, 71, 0.08);
  padding: var(--esp-3) 0;
}

.login-header .header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.login-retour {
  font-family: var(--sans-corps);
  font-size: 0.9rem;
  color: var(--gris-doux);
  text-decoration: none;
  transition: color var(--transit-rapide);
}

.login-retour:hover {
  color: var(--cuivre);
}

/* ─── Conteneur principal ─── */

.login-main {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--esp-7) var(--esp-4);
}

.login-conteneur {
  width: 100%;
  max-width: 460px;
}

/* ─── Carte login ─── */

.login-carte {
  background: var(--blanc-pur);
  border: 1px solid rgba(15, 40, 71, 0.1);
  border-radius: var(--rayon-moyen);
  padding: var(--esp-7) var(--esp-6);
  box-shadow: 0 8px 28px rgba(15, 40, 71, 0.08);
  position: relative;
  overflow: hidden;
}

.login-carte::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--cuivre);
}

/* Variantes par espace : barre supérieure colorée */
.page-login-erp .login-carte::before {
  background: linear-gradient(90deg, var(--bleu-profond) 0%, var(--cuivre) 100%);
}
.page-login-tech .login-carte::before {
  background: linear-gradient(90deg, var(--cuivre) 0%, var(--bleu-profond) 100%);
}
.page-login-apporteur .login-carte::before {
  background: linear-gradient(90deg, var(--cuivre-clair) 0%, var(--cuivre) 100%);
}
.page-login-client .login-carte::before {
  background: linear-gradient(90deg, var(--cuivre) 50%, var(--cuivre-clair) 100%);
}

/* ─── Entête de la carte ─── */

.login-entete {
  text-align: center;
  margin-bottom: var(--esp-6);
}

.login-icone {
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: var(--esp-3);
}

.login-suptitre {
  font-family: var(--mono-tech);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--cuivre);
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 var(--esp-2);
}

.login-titre {
  font-family: var(--serif-editorial);
  font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2rem);
  color: var(--bleu-profond);
  margin: 0 0 var(--esp-3);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.login-titre em {
  color: var(--cuivre);
  font-style: italic;
  font-weight: 400;
}

.login-baseline {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--gris-doux);
  margin: 0;
}

/* ─── Formulaire login ─── */

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}

.login-form .form-champ {
  margin: 0;
}

.form-aide-droite {
  text-align: right;
  margin-top: var(--esp-2);
}

.login-lien-mdp {
  font-family: var(--sans-corps);
  font-size: 0.82rem;
  color: var(--cuivre);
  text-decoration: none;
  transition: color var(--transit-rapide);
}

.login-lien-mdp:hover {
  text-decoration: underline;
  text-decoration-color: var(--cuivre);
}

.login-bouton {
  width: 100%;
  margin-top: var(--esp-3);
  font-size: 1rem;
  padding: var(--esp-3) var(--esp-5);
}

/* Checkbox "Mémoriser ma session" */
.login-form .form-champ-checkbox {
  margin-top: var(--esp-2);
}

.login-form .form-champ-checkbox label {
  font-size: 0.85rem;
  color: var(--noir-charbon);
}

.login-form .form-champ-checkbox label small {
  color: var(--gris-doux);
}

/* ─── Bloc sécurité en bas de carte ─── */

.login-securite {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin-top: var(--esp-6);
  padding-top: var(--esp-4);
  border-top: 1px dashed rgba(15, 40, 71, 0.1);
}

.login-securite-icone {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.login-securite p {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--gris-doux);
  margin: 0;
}

/* ─── Aide en dessous de la carte ─── */

.login-aide {
  text-align: center;
  margin-top: var(--esp-5);
  font-size: 0.9rem;
  color: var(--gris-doux);
  line-height: 1.7;
}

.login-aide a {
  color: var(--cuivre);
  font-weight: 600;
  text-decoration: none;
  margin-left: 4px;
}

.login-aide a:hover {
  text-decoration: underline;
  text-decoration-color: var(--cuivre);
}

/* ─── Footer login simplifié ─── */

.login-footer {
  background: var(--bleu-profond);
  color: rgba(248, 245, 238, 0.7);
  padding: var(--esp-4) 0;
  text-align: center;
}

.login-footer p {
  font-size: 0.82rem;
  margin: 0;
}

.login-footer a {
  color: rgba(248, 245, 238, 0.85);
  text-decoration: none;
  margin: 0 4px;
}

.login-footer a:hover {
  color: var(--cuivre-clair);
  text-decoration: underline;
}