/* =========================================================================
   Soléclat — feuille de style unique
   Mobile-first. Aucune dépendance externe (pas de police distante, pas de CDN).

   CHARTE — reprise volontaire du langage visuel du groupe :
   même pile de polices, mêmes neutres, mêmes rayons (8 px boutons / 14 px cartes),
   mêmes ombres, même pastille en majuscules, même tracé de logo.
   SEULE différence : l'accent, vert (#16A34A) au lieu du bleu.
   L'objectif est la ressemblance de famille, pas la copie : ne pas réintroduire
   de bleu accent ici, c'est ce qui distingue les deux marques.

   Organisation : 1. Variables — 2. Base — 3. Composants — 4. Sections — 5. Desktop
   ========================================================================= */

/* ---------- 1. VARIABLES ---------- */
:root {
  /* Accent propre à Soléclat */
  --acc:        #16A34A;
  --acc2:       #15803D;
  --acc-survol: #128A3E;

  /* Neutres — identiques au groupe */
  --txt:        #172033;
  --mut2:       #344054;
  --mut:        #667085;
  --bd:         #D8E0EB;
  --panel:      #FFFFFF;
  --panel-soft: #F8FAFC;
  --fond:       #F4F7FB;
  --fond2:      #EEF3F8;

  --ylw:        #D29922;
  --red:        #B42318;

  --rayon:      14px;
  --rayon-sm:   8px;
  --ombre:      0 24px 80px rgba(30, 41, 59, .14);
  --ombre-acc:  0 12px 32px rgba(22, 163, 74, .22);

  --largeur:    1160px;
  --largeur-etroite: 760px;
  --gouttiere:  20px;

  /* Pile de polices identique au groupe */
  --police: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --transition: 180ms ease;
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px;   /* décale les ancres sous l'en-tête collant */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--police);
  font-size: 17px;
  line-height: 1.55;
  color: var(--txt);

  /* Halo teinté en haut qui se fond dans le gris bleuté — signature du groupe */
  background-color: var(--fond);
  background-image:
    radial-gradient(circle at 74% 180px, rgba(22, 163, 74, .13), transparent 30rem),
    linear-gradient(180deg, var(--fond2) 0, rgba(238, 243, 248, 0) 900px);
  background-repeat: no-repeat;

  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); /* barre mobile */
}

h1, h2, h3 {
  margin: 0 0 .6em;
  color: var(--txt);
  font-weight: 700;
  letter-spacing: 0;
}
h1 { font-size: clamp(2.15rem, 4.6vw, 3.15rem); line-height: 1.06; margin-bottom: .5em; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1.15; }
h3 { font-size: 1.08rem; line-height: 1.3; }

p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }

a { color: var(--acc2); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--acc-survol); }

img, svg { max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--acc);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--txt);
  color: #fff;
  padding: 12px 18px;
  z-index: 200;
}
.skip-link:focus { left: 8px; top: 8px; }

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.conteneur--etroit { max-width: var(--largeur-etroite); }

/* ---------- 3. COMPOSANTS ---------- */

/* Boutons — rayon 8 px et ombre colorée, comme le groupe.
   Hauteur portée à 50 px : cible tactile confortable sur mobile. */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--rayon-sm);
  font: inherit;
  font-weight: 700;
  font-size: .97rem;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.bouton svg { width: 19px; height: 19px; flex: none; }

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

.bouton--fantome {
  background: var(--panel);
  border-color: var(--bd);
  color: var(--txt);
}
.bouton--fantome:hover {
  border-color: var(--acc);
  color: var(--acc2);
  transform: translateY(-1px);
}

.bouton--bloc { display: flex; width: 100%; }

/* Pastille en majuscules — signature du groupe */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.15rem;
  padding: .34rem .78rem;
  border: 1px solid rgba(22, 163, 74, .28);
  background: rgba(22, 163, 74, .09);
  color: var(--acc2);
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1.35;
}
.pastille__point {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--acc);
}

.badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(22, 163, 74, .28);
  background: rgba(22, 163, 74, .09);
  color: var(--acc2);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.grille { display: grid; gap: 18px; }

/* Logo — même tracé que le groupe, couleur différente */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  text-decoration: none;
  color: var(--txt);
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.logo__marque { width: 30px; height: 30px; flex: none; color: var(--acc); }

/* ---------- EN-TÊTE ---------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--bd);
}
.entete__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 66px;
}

.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 0 11px;
  background: none;
  border: 0;
  cursor: pointer;
}
.burger span {
  display: block;
  height: 2px;
  background: var(--txt);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--panel);
  border-bottom: 1px solid var(--bd);
  box-shadow: 0 18px 40px rgba(30, 41, 59, .1);
}
.nav.est-ouverte { display: block; }

.nav__liste { list-style: none; margin: 0; padding: 8px var(--gouttiere) 18px; }
.nav__liste a {
  display: flex;
  align-items: center;
  min-height: 50px;
  color: var(--txt);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--bd);
}
.nav__liste li:last-child a { border-bottom: 0; }
.nav__cta {
  margin-top: 12px;
  justify-content: center;
  border-radius: var(--rayon-sm);
  background: var(--acc);
  color: #fff !important;
  font-weight: 700;
  box-shadow: var(--ombre-acc);
  border-bottom: 0 !important;
}

/* ---------- HERO ---------- */
.hero { padding-block: 44px 52px; }
.hero__grille { display: grid; gap: 30px; }

.hero__accroche {
  max-width: 46ch;
  font-size: 1.06rem;
  color: var(--mut2);
  margin-bottom: 1.35rem;
}
.hero__actions {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 1.35rem;
}

.reassurance {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.reassurance li {
  position: relative;
  padding-left: 26px;
  font-size: .94rem;
  color: var(--mut);
}
.reassurance li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: .42em;
  width: 14px;
  height: 8px;
  border-left: 2.4px solid var(--acc);
  border-bottom: 2.4px solid var(--acc);
  transform: rotate(-45deg);
}

/* Carte de synthèse du hero — même construction que la carte concept du groupe */
.carte-concept {
  position: relative;
  border: 1px solid var(--bd);
  border-radius: var(--rayon);
  background: linear-gradient(180deg, var(--panel), var(--panel-soft));
  box-shadow: var(--ombre);
  overflow: hidden;
}
.carte-concept::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(22, 163, 74, .14), transparent 42%, rgba(37, 99, 235, .05));
  pointer-events: none;
}
.carte-concept__corps { position: relative; padding: 26px 22px; }
.carte-concept__label {
  margin: 0 0 .5rem;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acc2);
}
.carte-concept h2 { font-size: 1.42rem; line-height: 1.2; margin: 0 0 .5rem; }
.carte-concept__intro { color: var(--mut2); font-size: .94rem; margin-bottom: 1.1rem; }
.carte-concept__pied {
  margin: 1.1rem 0 0;
  padding: 13px 15px;
  border-radius: var(--rayon-sm);
  background: rgba(22, 163, 74, .07);
  border: 1px solid rgba(22, 163, 74, .18);
  color: var(--mut2);
  font-size: .89rem;
}

.mini {
  display: flex;
  gap: 13px;
  padding: 13px 14px;
  margin-bottom: 10px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--panel);
}
.mini:last-of-type { margin-bottom: 0; }
.mini h3 { margin: 0 0 .18rem; font-size: .98rem; }
.mini p { margin: 0; font-size: .88rem; color: var(--mut); }
.mini__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 9px;
  border: 1px solid rgba(22, 163, 74, .22);
  background: rgba(22, 163, 74, .1);
  color: var(--acc2);
}
.mini__icone svg { width: 18px; height: 18px; }

/* ---------- SECTIONS ---------- */
.section { padding-block: 54px; }
/* Bande blanche pleine largeur pour rythmer, sur le fond dégradé */
.section--fond {
  background: var(--panel);
  border-block: 1px solid var(--bd);
}
.section__intro {
  max-width: 62ch;
  margin-bottom: 28px;
  color: var(--mut);
  font-size: 1.02rem;
}

/* Cartes « pourquoi » */
.carte-chiffre {
  padding: 22px 20px;
  background: var(--panel);
  border: 1px solid var(--bd);
  border-radius: var(--rayon);
}
.carte-chiffre__valeur {
  margin: 0 0 9px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acc2);
}
.carte-chiffre p:last-child { margin-bottom: 0; color: var(--mut); font-size: .94rem; }

/* Prestations */
.presta {
  padding: 24px 22px;
  background: linear-gradient(180deg, var(--panel), var(--panel-soft));
  border: 1px solid var(--bd);
  border-radius: var(--rayon);
  box-shadow: 0 10px 34px rgba(30, 41, 59, .07);
}
.presta__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 15px;
  border-radius: 10px;
  border: 1px solid rgba(22, 163, 74, .22);
  background: rgba(22, 163, 74, .1);
  color: var(--acc2);
}
.presta__icone svg { width: 22px; height: 22px; }
.presta p:last-child { margin-bottom: 0; color: var(--mut); font-size: .94rem; }

/* Étapes */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.etape { position: relative; padding-left: 56px; }
.etape__num {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  box-shadow: var(--ombre-acc);
}
.etape h3 { margin-bottom: .28em; padding-top: 6px; }
.etape p { margin-bottom: 0; color: var(--mut); font-size: .94rem; }

/* Tarifs */
.avertissement {
  padding: 13px 17px;
  margin-bottom: 24px;
  border: 1px solid rgba(210, 153, 34, .35);
  border-left: 4px solid var(--ylw);
  border-radius: var(--rayon-sm);
  background: rgba(210, 153, 34, .09);
  color: #6B4E12;
  font-size: .91rem;
}

.tarif {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 22px;
  background: var(--panel);
  border: 1px solid var(--bd);
  border-radius: var(--rayon);
}
/* Pas de forfait « vedette » : c'est le nombre de panneaux du client qui détermine
   le forfait applicable, ce n'est pas un choix entre plusieurs offres. Les trois
   cartes sont donc strictement identiques — ne pas réintroduire de mise en avant. */
.tarif__cible { color: var(--mut); font-size: .91rem; margin-bottom: 15px; }
.tarif__prix {
  margin: 0 0 17px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--txt);
}
.tarif__montant { font-size: 2.5rem; letter-spacing: -.02em; }
.tarif__unite { margin-left: 6px; font-size: .88rem; font-weight: 500; color: var(--mut); }
.tarif__liste { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 9px; }
.tarif__liste li {
  position: relative;
  padding-left: 25px;
  font-size: .93rem;
  color: var(--mut2);
}
.tarif__liste li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .42em;
  width: 12px;
  height: 7px;
  border-left: 2.4px solid var(--acc);
  border-bottom: 2.4px solid var(--acc);
  transform: rotate(-45deg);
}
.tarif .bouton { margin-top: auto; }

/* Bandes « hors forfait » sous la grille : sur-mesure et contrat annuel */
.bandes { margin-top: 18px; }
.bande {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 22px;
  border: 1px solid var(--bd);
  border-radius: var(--rayon);
  background: var(--panel);
}
.bande h3 { margin-bottom: .45em; }
.bande p { color: var(--mut); font-size: .94rem; }
.bande .bouton { margin-top: auto; }

.tarifs__note { margin-top: 24px; color: var(--mut); font-size: .91rem; }

/* Zone d'intervention */
.zone { display: grid; gap: 28px; }
.communes {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.communes li {
  padding: 7px 14px;
  border: 1px solid var(--bd);
  border-radius: 999px;
  background: var(--panel);
  font-size: .88rem;
  color: var(--mut2);
}
.zone__note { color: var(--mut); font-size: .93rem; margin-bottom: 0; }
/* Carte de la zone d'intervention — SVG dessiné à la main, aucune dépendance
   externe et aucun traceur (une iframe Google Maps imposerait un bandeau de
   consentement sur tout le site). */
.zone__carte {
  margin: 0;
  padding: 18px 16px 14px;
  border: 1px solid var(--bd);
  border-radius: var(--rayon);
  background: linear-gradient(180deg, var(--panel), var(--panel-soft));
  box-shadow: var(--ombre);
}
.zone__carte svg { display: block; width: 100%; height: auto; }

.carte__dept {
  fill: rgba(22, 163, 74, .06);
  stroke: var(--bd);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.carte__rayon {
  fill: rgba(22, 163, 74, .09);
  stroke: var(--acc);
  stroke-width: 1.6;
  stroke-dasharray: 7 6;
}
.carte__villes circle { fill: var(--mut); }
.carte__villes text {
  fill: var(--mut2);
  font-family: var(--police);
  font-size: 13px;
  dominant-baseline: middle;
}
.carte__base circle { fill: var(--acc); }
.carte__base .carte__halo { fill: rgba(22, 163, 74, .2); }
.carte__base text {
  fill: var(--txt);
  font-family: var(--police);
  font-size: 15px;
  font-weight: 700;
  dominant-baseline: middle;
}

.zone__legende {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  font-size: .84rem;
  color: var(--mut);
}
.zone__cle {
  width: 26px;
  height: 0;
  flex: none;
  border-top: 2px dashed var(--acc);
}

/* FAQ — accordéon natif, sans JavaScript */
.faq { border-bottom: 1px solid var(--bd); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px;
  padding: 13px 0;
  cursor: pointer;
  font-weight: 700;
  color: var(--txt);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2.4px solid var(--acc);
  border-bottom: 2.4px solid var(--acc);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--transition);
}
.faq[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq p {
  margin: 0 0 18px;
  padding-right: 26px;
  color: var(--mut);
  font-size: .96rem;
}

/* ---------- FORMULAIRE ---------- */
.formulaire {
  padding: 24px 20px;
  background: linear-gradient(180deg, var(--panel), var(--panel-soft));
  border: 1px solid var(--bd);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
.champ-groupe { display: grid; }
.champ { margin: 0 0 17px; }
.champ label,
.champ--fieldset legend {
  display: block;
  margin-bottom: 6px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--txt);
}
.champ input[type="text"],
.champ input[type="tel"],
.champ input[type="email"],
.champ input[type="number"],
.champ select,
.champ textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;              /* évite le zoom automatique sur iOS */
  color: var(--txt);
  background: var(--panel);
  border: 1px solid var(--bd);
  border-radius: var(--rayon-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ textarea { min-height: 110px; resize: vertical; }
.champ select {
  appearance: none; -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23667085' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px;
}
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .16);
  outline: none;
}
.champ input[aria-invalid="true"],
.champ select[aria-invalid="true"],
.champ textarea[aria-invalid="true"] {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(180, 35, 24, .12);
}

.champ--fieldset { border: 0; padding: 0; margin: 0 0 17px; }
.case {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-height: 44px;
  margin-bottom: 0;
  font-weight: 400 !important;
  font-size: .95rem !important;
  color: var(--txt) !important;
  cursor: pointer;
  line-height: 1.5;
}
.case input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--acc);
}
.champ--consentement { margin-bottom: 20px; }

.pot-de-miel {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.formulaire__actions { margin: 0 0 12px; }
.formulaire__retour { margin: 0; padding: 0; font-size: .94rem; font-weight: 600; }
.formulaire__retour:not(:empty) {
  padding: 12px 15px;
  margin-bottom: 12px;
  border-radius: var(--rayon-sm);
  border: 1px solid transparent;
}
.formulaire__retour.est-succes {
  background: rgba(22, 163, 74, .1);
  border-color: rgba(22, 163, 74, .3);
  color: var(--acc2);
}
.formulaire__retour.est-erreur {
  background: rgba(180, 35, 24, .08);
  border-color: rgba(180, 35, 24, .28);
  color: var(--red);
}

.formulaire__mention { margin: 0; font-size: .84rem; color: var(--mut); }
.devis__alternative {
  margin-top: 20px;
  text-align: center;
  color: var(--mut);
  font-size: .94rem;
}

/* ---------- PIED DE PAGE ---------- */
.pied {
  margin-top: 20px;
  border-top: 1px solid var(--bd);
  background: var(--panel);
  padding-top: 40px;
}
.pied__inner { display: grid; gap: 28px; padding-bottom: 30px; }
.pied__baseline { color: var(--mut); font-size: .93rem; margin: 12px 0 0; }
.pied__titre {
  margin: 0 0 11px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acc2);
}
.pied__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .94rem; color: var(--mut); }
.pied__liste a { color: var(--mut); text-decoration: none; }
.pied__liste a:hover { color: var(--acc2); text-decoration: underline; }
.pied__bas { padding-block: 16px 22px; border-top: 1px solid var(--bd); }
.pied__bas p { margin: 0; font-size: .85rem; color: var(--mut); }

/* ---------- BARRE D'ACTION MOBILE ---------- */
.barre-mobile {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--bd);
}
.barre-mobile__lien {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border-radius: var(--rayon-sm);
  border: 1px solid var(--bd);
  background: var(--panel);
  color: var(--txt);
  font-weight: 700;
  font-size: .94rem;
  text-decoration: none;
}
.barre-mobile__lien svg { width: 18px; height: 18px; }
.barre-mobile__lien--primaire {
  background: var(--acc);
  border-color: var(--acc);
  color: #fff;
}

/* ---------- PAGES LÉGALES ---------- */
.page-legale { padding-block: 42px 56px; }
.page-legale h2 { margin-top: 1.7em; font-size: 1.25rem; }
.page-legale h2:first-of-type { margin-top: 1em; }
.page-legale p, .page-legale li { color: var(--mut2); }
.retour {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 20px;
  font-weight: 600;
  text-decoration: none;
}

/* =========================================================================
   5. DESKTOP
   ========================================================================= */

@media (min-width: 700px) {
  body { padding-bottom: 0; }
  .section { padding-block: 74px; }
  .hero { padding-block: 60px 72px; }
  .hero__actions { flex-direction: row; flex-wrap: wrap; }
  .reassurance { grid-template-columns: 1fr 1fr; column-gap: 26px; }
  .grille--2 { grid-template-columns: 1fr 1fr; gap: 20px; }
  .champ-groupe { grid-template-columns: 1fr 1fr; column-gap: 18px; }
  .formulaire { padding: 32px 30px; }
  .carte-concept__corps { padding: 30px 28px; }
  .zone { grid-template-columns: 1.15fr .85fr; align-items: center; gap: 40px; }
  .zone__carte { min-height: 300px; }
  .pied__inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; }
  .barre-mobile { display: none; }
}

@media (min-width: 980px) {
  :root { --gouttiere: 28px; }
  html { scroll-padding-top: 86px; }
  .section { padding-block: 88px; }
  .hero { padding-block: 78px 84px; }
  /* Deux colonnes : discours à gauche, carte de synthèse à droite — comme le groupe */
  .hero__grille {
    grid-template-columns: minmax(0, 1fr) minmax(400px, .92fr);
    gap: 3rem;
    align-items: center;
  }
  .grille--3 { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .etapes { grid-template-columns: repeat(4, 1fr); gap: 22px; }
  .etape { padding-left: 0; padding-top: 56px; }
  .etape__num { top: 0; }
  .etape h3 { padding-top: 0; }

  .entete__inner { min-height: 74px; }
  .burger { display: none; }
  .nav {
    display: block;
    position: static;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .nav__liste { display: flex; align-items: center; gap: 2px; padding: 0; }
  .nav__liste a {
    min-height: 40px;
    padding-inline: 12px;
    border-bottom: 0;
    border-radius: var(--rayon-sm);
    font-size: .94rem;
    font-weight: 600;
    color: var(--mut2);
  }
  .nav__liste a:hover { background: var(--fond2); color: var(--txt); }
  .nav__cta {
    margin-top: 0;
    margin-left: 10px;
    padding-inline: 18px !important;
    color: #fff !important;
  }
  .nav__cta:hover { background: var(--acc-survol) !important; color: #fff !important; }
}

/* ---------- PRÉFÉRENCES UTILISATEUR ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .entete, .barre-mobile, .formulaire__actions { display: none; }
  body { padding-bottom: 0; background: #fff; }
}