/* ==========================================================================
   Le débarras de JOJO — feuille de style unique
   --------------------------------------------------------------------------
   Ce fichier est organisé en sections, dans l'ordre :
     1. Polices
     2. Variables de couleur et de taille  ← c'est ici qu'on change les couleurs
     3. Bases (texte, titres, liens, focus clavier)
     4. Mise en page (conteneur, sections)
     5. Boutons
     6. En-tête et menu
     7. Accueil (bandeau du haut)
     8. Services
     9. Pour qui
    10. Avant / après
    11. Comment ça marche
    12. Tarifs
    13. Professionnels
    14. Écoresponsable
    15. Zone d'intervention
    16. FAQ
    17. Contact et formulaire
    18. Pied de page
    19. Barre fixe mobile
    20. Pages secondaires (mentions, confidentialité, merci, 404)
   ========================================================================== */


/* ==========================================================================
   1. POLICES (fichiers locaux, aucun appel à Google)
   ========================================================================== */

/* Fredoka — titres, logo, boutons. Licence SIL Open Font License. */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/fredoka-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/fredoka-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/fredoka-latin-700-normal.woff2') format('woff2');
}

/* Atkinson Hyperlegible — texte courant, conçue pour la lisibilité. Licence OFL. */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2');
}


/* ==========================================================================
   2. VARIABLES — pour changer une couleur partout, modifiez ici, nulle part ailleurs
   ========================================================================== */

:root {
  /* Couleurs de la charte */
  --bleu:       #1B3A66;  /* couleur principale : en-tête, titres, fonds forts */
  --bleu-nuit:  #12284A;  /* survol des boutons bleus, bas du pied de page */
  --jaune:      #FFC62B;  /* accent : boutons d'action, plaque « JOJO » */
  --jaune-fonce:#F0B41A;  /* survol des boutons jaunes */
  --brume:      #EEF2F7;  /* fond des sections alternées */
  --encre:      #14223A;  /* texte courant */
  --ardoise:    #46597A;  /* texte secondaire (légendes, notes) */
  --blanc:      #FFFFFF;

  /* Couleurs de service */
  --trait:        #D7DFEB;  /* filets de séparation */
  --trait-fonce:  #BAC6D8;  /* bordures de champs de formulaire */
  --erreur:       #A4231E;  /* messages d'erreur (contraste AA sur blanc) */

  /* Polices */
  --police-titre: 'Fredoka', 'Trebuchet MS', sans-serif;
  --police-texte: 'Atkinson Hyperlegible', 'Verdana', sans-serif;

  /* Gabarit */
  --largeur-max: 1160px;
  --marge-bord: 1.25rem;          /* respiration sur les bords de l'écran */
  --hauteur-entete: 74px;         /* sert au calage des ancres */
  --rayon: 12px;                  /* arrondi standard */
}


/* ==========================================================================
   3. BASES
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: 1.125rem;          /* 18 px minimum, public en partie âgé */
  line-height: 1.6;
}

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

h1, h2, h3 {
  font-family: var(--police-titre);
  color: var(--bleu);
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 {
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

h2 {
  font-weight: 700;
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  line-height: 1.15;
}

h3 {
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.25;
}

p { margin: 0 0 1.1em; max-width: 65ch; }   /* lignes de 70 caractères maximum */
p:last-child { margin-bottom: 0; }

a { color: var(--bleu); }
a:hover { color: var(--bleu-nuit); }

/* Focus clavier : bleu épais sur fond clair… */
:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 3px;
  border-radius: 4px;
}
/* …et jaune sur les fonds bleus, pour rester visible */
.sur-bleu :focus-visible { outline-color: var(--jaune); }

/* Lien « Aller au contenu », visible seulement au clavier */
.evitement {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--jaune);
  color: var(--bleu);
  font-family: var(--police-titre);
  font-weight: 600;
  padding: .85rem 1.4rem;
  border-radius: 0 0 var(--rayon) var(--rayon);
  transition: top .15s;
}
.evitement:focus { top: 0; }

/* Texte réservé aux lecteurs d'écran */
.lecteur-ecran-seul {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Icônes Lucide insérées directement dans le HTML */
.ico {
  width: 26px; height: 26px;
  flex: 0 0 auto;
  stroke: var(--bleu);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sur-bleu .ico { stroke: var(--blanc); }


/* ==========================================================================
   4. MISE EN PAGE
   ========================================================================== */

.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--marge-bord);
}

.section {
  padding-block: clamp(3rem, 7vw, 5rem);
  /* décale l'ancre pour que le titre ne passe pas sous l'en-tête collant */
  scroll-margin-top: calc(var(--hauteur-entete) + 8px);
}

.section--brume { background: var(--brume); }
.section--bleu  { background: var(--bleu); color: var(--blanc); }
.section--bleu h2, .section--bleu h3 { color: var(--blanc); }
.section--bleu a { color: var(--blanc); }

/* Intro d'une section : titre + phrase de contexte */
.intro { margin-bottom: clamp(2rem, 4vw, 3rem); }
.intro p { color: var(--ardoise); font-size: 1.15rem; }
.section--bleu .intro p { color: rgba(255,255,255,.88); }

.note {
  color: var(--ardoise);
  font-size: 1rem;
  line-height: 1.55;
}


/* ==========================================================================
   5. BOUTONS
   ========================================================================== */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 52px;                 /* cible tactile confortable */
  padding: .8rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--rayon);
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}

/* Bouton principal : fond jaune, texte bleu (jamais de texte jaune sur clair) */
.bouton--principal { background: var(--jaune); color: var(--bleu); }
.bouton--principal:hover { background: var(--jaune-fonce); color: var(--bleu); }
.bouton--principal .ico { stroke: var(--bleu); }

/* Bouton secondaire : fond bleu, texte blanc */
.bouton--secondaire { background: var(--bleu); color: var(--blanc); }
.bouton--secondaire:hover { background: var(--bleu-nuit); color: var(--blanc); }
.bouton--secondaire .ico { stroke: var(--blanc); }

/* Bouton discret, utilisé sur fond bleu à côté d'un bouton jaune */
.bouton--contour-clair {
  background: transparent;
  color: var(--blanc);
  border-color: rgba(255,255,255,.55);
}
.bouton--contour-clair:hover { background: rgba(255,255,255,.12); color: var(--blanc); }

.bouton .ico { width: 22px; height: 22px; }

/* Groupe de deux boutons côte à côte */
.boutons {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
}
.boutons .bouton { flex: 1 1 15rem; }
@media (min-width: 560px) {
  .boutons .bouton { flex: 0 0 auto; }
}


/* ==========================================================================
   6. EN-TÊTE ET MENU
   ========================================================================== */

.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--blanc);
  border-bottom: 1px solid var(--trait);
}

.entete__barre {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--hauteur-entete);
  padding-block: .5rem;
}

/* Un seul logo dans l'en-tête, simplement réduit sur les petits écrans */
.entete__logo { display: flex; align-items: center; margin-right: auto; }
.entete__logo img { display: block; height: 46px; width: auto; }
@media (min-width: 900px) {
  .entete__logo img { height: 56px; }
}

/* Liens d'ancre */
.nav__liste {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__liste a {
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: 1.0625rem;
  text-decoration: none;
  color: var(--encre);
  padding: .5rem 0;
  border-bottom: 2px solid transparent;
}
.nav__liste a:hover { color: var(--bleu); border-bottom-color: var(--jaune); }

/* Numéro de téléphone dans l'en-tête */
.entete__tel {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 48px;
  padding: 0 .4rem;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--bleu);
  text-decoration: none;
  white-space: nowrap;
}
.entete__tel:hover { text-decoration: underline; }
.entete__tel .ico { width: 22px; height: 22px; }
.entete__tel .numero { display: none; }
@media (min-width: 480px) { .entete__tel .numero { display: inline; } }

/* Bouton « Demander un devis » de l'en-tête : uniquement sur grand écran */
.entete__devis { display: none; }
@media (min-width: 1060px) { .entete__devis { display: inline-flex; } }

/* Bouton burger */
.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  padding: 0;
  background: none;
  border: 2px solid var(--trait);
  border-radius: var(--rayon);
  cursor: pointer;
}
.burger .ico-fermer { display: none; }
.burger[aria-expanded="true"] .ico-ouvrir { display: none; }
.burger[aria-expanded="true"] .ico-fermer { display: block; }

/* En dessous de 900 px : menu replié derrière le burger */
@media (max-width: 899.98px) {
  .nav {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: var(--blanc);
    border-bottom: 1px solid var(--trait);
    box-shadow: 0 10px 20px rgba(20, 34, 58, .10);
  }
  .nav.est-ouvert { display: block; }
  .nav__liste {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem var(--marge-bord) 1rem;
    max-width: var(--largeur-max);
    margin-inline: auto;
  }
  .nav__liste a {
    display: block;
    padding: .9rem 0;
    font-size: 1.2rem;
    border-bottom: 1px solid var(--trait);
  }
  .nav__liste li:last-child a { border-bottom: none; }
}

@media (min-width: 900px) {
  .burger { display: none; }
  .nav { display: block !important; }
}


/* ==========================================================================
   7. ACCUEIL (bandeau du haut)
   ========================================================================== */

.accueil { background: var(--brume); padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.accueil__grille { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) {
  .accueil__grille { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; }
}

.accueil h1 { margin-bottom: .4em; }

.accueil__chapeau {
  font-size: clamp(1.2rem, 2.2vw, 1.375rem);
  color: var(--ardoise);
  margin-bottom: 2rem;
}

/* L'illustration : sous les boutons sur mobile, à droite sur ordinateur */
.accueil__illustration { order: -1; justify-self: center; }
.accueil__illustration img { width: 100%; max-width: 560px; height: auto; }
@media (min-width: 900px) {
  .accueil__illustration { order: 0; }
}

/* Le seul moment d'animation du site : le camion glisse en place à l'arrivée */
@media (prefers-reduced-motion: no-preference) {
  .accueil__illustration img { animation: camion-arrive .6s cubic-bezier(.22,.7,.3,1) both; }
}
@keyframes camion-arrive {
  from { transform: translateX(-48px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* Les trois garanties, sur une ligne en ordinateur */
.garanties {
  display: grid;
  gap: 1rem 2rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 1.75rem 0 0;
  border-top: 1px solid var(--trait-fonce);
  list-style: none;
}
@media (min-width: 760px) {
  .garanties { grid-template-columns: repeat(3, 1fr); }
}
.garanties li {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--bleu);
}


/* ==========================================================================
   8. SERVICES — une liste sur deux colonnes, pas des cartes
   ========================================================================== */

.services { display: grid; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) {
  .services { grid-template-columns: 1fr 1fr; column-gap: 3.5rem; }
}

.service {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .25rem 1.1rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--trait);
}
.service .ico { grid-row: span 2; margin-top: .2rem; }
.service h3 { margin: 0 0 .25rem; }
.service p { margin: 0; color: var(--ardoise); font-size: 1.0625rem; }

.service__option {
  display: inline-block;
  margin-left: .5rem;
  vertical-align: middle;
  background: var(--brume);
  color: var(--bleu);
  border: 1px solid var(--trait-fonce);
  border-radius: 999px;
  padding: .1rem .6rem;
  font-family: var(--police-texte);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .01em;
}


/* ==========================================================================
   9. POUR QUI — du texte aéré, sans filets ni cadres
   ========================================================================== */

.situations {
  display: grid;
  gap: clamp(2rem, 4vw, 2.75rem) 4rem;
  margin: 0; padding: 0;
  list-style: none;
}
@media (min-width: 760px) {
  .situations { grid-template-columns: 1fr 1fr; }
}
.situation h3 {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .45rem;
}
.situation p { margin: 0; }


/* ==========================================================================
   10. AVANT / APRÈS — curseur de comparaison
   ========================================================================== */

.chantier + .chantier { margin-top: 3rem; }

.comparateur {
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: var(--brume);
  --pos: 50%;                    /* position du curseur, pilotée par main.js */
}
.comparateur img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
/* La photo « après » est rognée à gauche : on la découvre en poussant le curseur */
.comparateur__apres { clip-path: inset(0 0 0 var(--pos)); }

.comparateur__etiquette {
  position: absolute;
  top: .75rem;
  z-index: 2;
  background: rgba(18, 40, 74, .88);
  color: var(--blanc);
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: .95rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  pointer-events: none;
}
.comparateur__etiquette--avant { left: .75rem; }
.comparateur__etiquette--apres { right: .75rem; }

/* Le trait vertical, purement décoratif */
.comparateur__trait {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  width: 4px;
  margin-left: -2px;
  background: var(--blanc);
  box-shadow: 0 0 0 1px rgba(18, 40, 74, .25);
  pointer-events: none;
  z-index: 2;
}

/* Le curseur est un vrai <input type="range"> : utilisable au clavier */
.comparateur__curseur {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%; height: 100%;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
}
.comparateur__curseur::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 48px; height: 48px;       /* cible tactile ≥ 48 px */
  border-radius: 50%;
  background: var(--blanc);
  border: 3px solid var(--bleu);
  box-shadow: 0 2px 10px rgba(18, 40, 74, .35);
  cursor: ew-resize;
}
.comparateur__curseur::-moz-range-thumb {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--blanc);
  border: 3px solid var(--bleu);
  box-shadow: 0 2px 10px rgba(18, 40, 74, .35);
  cursor: ew-resize;
}
.comparateur__curseur::-moz-range-track { background: transparent; }
.comparateur__curseur:focus { outline: none; }
.comparateur__curseur:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--jaune), 0 0 0 6px var(--bleu); }
.comparateur__curseur:focus-visible::-moz-range-thumb     { box-shadow: 0 0 0 3px var(--jaune), 0 0 0 6px var(--bleu); }

.chantier__legende {
  margin-top: .9rem;
  color: var(--ardoise);
  font-size: 1rem;
}


/* ==========================================================================
   11. COMMENT ÇA MARCHE — une vraie séquence, reliée par un trait
   ========================================================================== */

.etapes { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }

.etape {
  position: relative;
  padding: 0 0 2.25rem 4.75rem;   /* place pour la pastille numérotée, à gauche */
}
.etape:last-child { padding-bottom: 0; }

.etape__numero {
  position: absolute;
  left: 0; top: 0;
  z-index: 1;
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bleu);
  color: var(--blanc);
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.5rem;
}

/* Le trait qui relie une étape à la suivante (vertical sur mobile) */
.etape::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 54px;
  bottom: 0;
  width: 2px;
  background: var(--trait-fonce);
}
.etape:last-child::before { display: none; }

.etape h3 { margin-bottom: .3rem; padding-top: .7rem; }
.etape p { margin: 0; color: var(--ardoise); }

@media (min-width: 860px) {
  .etapes { grid-template-columns: repeat(4, 1fr); column-gap: 2.25rem; }
  .etape { padding: 5rem 0 0 0; }          /* la pastille passe au-dessus */
  .etape:last-child { padding-bottom: 0; }
  .etape::before {                          /* le trait devient horizontal */
    left: 54px;
    right: -2.25rem;
    top: 26px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
  .etape h3 { padding-top: 0; }
}


/* ==========================================================================
   12. TARIFS
   ========================================================================== */

.tarifs__grille { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 900px) {
  .tarifs__grille { grid-template-columns: .85fr 1.15fr; gap: 4rem; }
}

/* La plaque jaune inclinée : élément signature, réutilisé une seule fois ici */
.plaque {
  display: inline-block;
  transform: rotate(-3deg);
  background: var(--jaune);
  color: var(--bleu);
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: clamp(1.45rem, 3.6vw, 2rem);
  line-height: 1.1;
  padding: .55em .85em;
  border-radius: 14px;
  margin-bottom: 1.75rem;
}

.tableau { margin: 0 0 1.25rem; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.0625rem;
}
caption {
  text-align: left;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--bleu);
  padding-bottom: .75rem;
}
th, td {
  text-align: left;
  padding: .95rem .6rem;
  border-bottom: 1px solid var(--trait);
  vertical-align: top;
}
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
thead th {
  font-family: var(--police-titre);
  font-weight: 600;
  color: var(--bleu);
  border-bottom: 2px solid var(--bleu);
}
tbody th { font-weight: 700; }
@media (max-width: 480px) {
  table { font-size: 1rem; }
  th, td { padding: .8rem .35rem; }
}


/* ==========================================================================
   13. PROFESSIONNELS (fond bleu)
   ========================================================================== */

.pros__grille { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
@media (min-width: 900px) {
  .pros__grille { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

.engagements { margin: 0; padding: 0; list-style: none; }
.engagements li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9rem;
  padding-block: .7rem;
  border-top: 1px solid rgba(255,255,255,.22);
}
.engagements li:first-child { border-top: none; padding-top: 0; }
.engagements .ico { width: 24px; height: 24px; margin-top: .22rem; }


/* ==========================================================================
   14. ÉCORESPONSABLE
   ========================================================================== */

.engagements-eco {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  margin: 0; padding: 0;
  list-style: none;
}
@media (min-width: 760px) {
  .engagements-eco { grid-template-columns: repeat(3, 1fr); }
}
.engagements-eco .ico { width: 38px; height: 38px; margin-bottom: .9rem; }
.engagements-eco h3 { margin-bottom: .35rem; }
.engagements-eco p { margin: 0; color: var(--ardoise); }


/* ==========================================================================
   15. ZONE D'INTERVENTION
   ========================================================================== */

.communes {
  columns: 2;
  column-gap: 2rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
@media (min-width: 700px)  { .communes { columns: 3; } }
@media (min-width: 1000px) { .communes { columns: 4; } }
.communes li {
  break-inside: avoid;
  padding: .4rem 0 .4rem 1.1rem;
  position: relative;
  font-size: 1.0625rem;
}
.communes li::before {
  content: "";
  position: absolute;
  left: 0; top: .95em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bleu);
}


/* ==========================================================================
   16. FAQ — accordéons natifs, fonctionnent même sans JavaScript
   ========================================================================== */

.faq { max-width: 850px; }

.faq details { border-top: 1px solid var(--trait); }
.faq details:last-of-type { border-bottom: 1px solid var(--trait); }

.faq summary {
  position: relative;
  display: block;                 /* masque la flèche par défaut */
  padding: 1.3rem 3rem 1.3rem 0;
  min-height: 48px;
  cursor: pointer;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--bleu);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--bleu-nuit); }

/* Le chevron, dessiné en CSS */
.faq summary::after {
  content: "";
  position: absolute;
  right: .6rem;
  top: 1.75rem;
  width: 11px; height: 11px;
  border-right: 2.5px solid var(--bleu);
  border-bottom: 2.5px solid var(--bleu);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 2rem; }

.faq details > p { padding: 0 2rem 1.5rem 0; margin: 0; color: var(--ardoise); }


/* ==========================================================================
   17. CONTACT ET FORMULAIRE
   ========================================================================== */

.contact__grille { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 900px) {
  .contact__grille { grid-template-columns: .82fr 1.18fr; gap: 4rem; }
}

.coordonnees { margin: 0; padding: 0; list-style: none; }
.coordonnees li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9rem;
  padding-block: 1.1rem;
  border-top: 1px solid var(--trait-fonce);
}
.coordonnees li:first-child { border-top: none; padding-top: 0; }
.coordonnees .ico { margin-top: .3rem; }
.coordonnees__intitule {
  display: block;
  font-size: .95rem;
  color: var(--ardoise);
  margin-bottom: .15rem;
}
.tel-grand {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: clamp(1.6rem, 4.5vw, 2.1rem);
  color: var(--bleu);
  text-decoration: none;
  line-height: 1.15;
  display: inline-block;
}
.tel-grand:hover { text-decoration: underline; }

/* --- Le formulaire --- */
.formulaire {
  background: var(--blanc);
  border: 1px solid var(--trait-fonce);
  border-radius: 16px;
  padding: clamp(1.25rem, 3vw, 2rem);
}

.champ { margin-bottom: 1.4rem; }
.champ:last-of-type { margin-bottom: 1.75rem; }

.champ > label {
  display: block;
  font-weight: 700;
  margin-bottom: .4rem;
}
.champ__facultatif {
  font-weight: 400;
  color: var(--ardoise);
  font-size: .95rem;
}

input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  width: 100%;
  min-height: 52px;
  padding: .75rem .85rem;
  font-family: inherit;
  font-size: 1.0625rem;
  color: var(--encre);
  background: var(--blanc);
  border: 2px solid var(--trait-fonce);
  border-radius: 10px;
}
textarea { min-height: 128px; resize: vertical; line-height: 1.5; }
select {
  appearance: none;
  /* petit chevron gris dessiné en CSS, sans image externe */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ardoise) 50%),
    linear-gradient(135deg, var(--ardoise) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}
input[type="file"] {
  width: 100%;
  padding: .7rem;
  font-size: 1rem;
  border: 2px dashed var(--trait-fonce);
  border-radius: 10px;
  background: var(--brume);
}
input:hover, select:hover, textarea:hover { border-color: var(--ardoise); }
input:focus, select:focus, textarea:focus { border-color: var(--bleu); }

.aide {
  display: block;
  margin-top: .4rem;
  font-size: .95rem;
  color: var(--ardoise);
}

/* Case à cocher de consentement */
.champ--case { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; }
.champ--case input[type="checkbox"] {
  width: 26px; height: 26px;
  margin: .2rem 0 0;
  accent-color: var(--bleu);
  flex: 0 0 auto;
}
.champ--case label { font-weight: 400; font-size: 1.0625rem; }

/* Message d'erreur : toujours en texte, jamais seulement en couleur */
.erreur {
  display: none;
  margin-top: .4rem;
  color: var(--erreur);
  font-weight: 700;
  font-size: 1rem;
}
.erreur::before { content: "⚠ "; }
.champ--invalide .erreur { display: block; }
.champ--invalide input,
.champ--invalide select,
.champ--invalide textarea { border-color: var(--erreur); }

/* Champ pot de miel : invisible pour les humains, rempli par les robots */
.pot-de-miel { position: absolute; left: -9999px; opacity: 0; }

.formulaire__envoi { width: 100%; }
@media (min-width: 560px) { .formulaire__envoi { width: auto; min-width: 18rem; } }


/* ==========================================================================
   18. PIED DE PAGE
   ========================================================================== */

.pied { background: var(--bleu); color: var(--blanc); }
.pied a { color: var(--blanc); }

.pied__haut {
  display: grid;
  gap: 2rem;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 760px) {
  .pied__haut { grid-template-columns: auto 1fr; gap: 4rem; align-items: start; }
}
.pied__logo img { height: 74px; width: auto; }

.pied__infos { margin: 0; font-size: 1.0625rem; line-height: 1.75; }
.pied__infos strong { font-family: var(--police-titre); font-weight: 600; font-size: 1.15rem; }
.pied__tel { font-family: var(--police-titre); font-weight: 600; font-size: 1.25rem; color: var(--jaune) !important; text-decoration: none; }
.pied__tel:hover { text-decoration: underline; }

.pied__bas { background: var(--bleu-nuit); }
.pied__bas .conteneur {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  align-items: center;
  padding-block: 1.1rem;
  font-size: 1rem;
}
.pied__liens { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.pied__copyright { margin-left: auto; color: rgba(255,255,255,.8); }


/* ==========================================================================
   19. BARRE FIXE MOBILE (moins de 768 px)
   ========================================================================== */

.barre-mobile {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  padding: .55rem .75rem;
  padding-bottom: calc(.55rem + env(safe-area-inset-bottom));
  background: var(--blanc);
  border-top: 1px solid var(--trait);
  box-shadow: 0 -4px 14px rgba(20, 34, 58, .08);
  transition: transform .25s ease, visibility .25s;
}
.barre-mobile .bouton { min-height: 56px; padding-inline: .75rem; }

/* Masquée quand le formulaire de contact est à l'écran (voir main.js) */
.barre-mobile.est-masquee {
  transform: translateY(120%);
  visibility: hidden;
}

@media (min-width: 768px) { .barre-mobile { display: none; } }
@media (max-width: 767.98px) { body { padding-bottom: 82px; } }


/* ==========================================================================
   20. PAGES SECONDAIRES
   ========================================================================== */

/* Pages de texte : mentions légales, confidentialité */
.page-texte { padding-block: clamp(2.5rem, 6vw, 4rem); }
.page-texte .conteneur { max-width: 760px; }
.page-texte h2 { font-size: clamp(1.4rem, 3vw, 1.75rem); margin-top: 2.5rem; }
.page-texte h2:first-of-type { margin-top: 1.5rem; }
.page-texte dl { margin: 0; }
.page-texte dt { font-weight: 700; margin-top: 1.1rem; }
.page-texte dd { margin: .15rem 0 0; color: var(--encre); }
.page-texte ul { padding-left: 1.3rem; }
.page-texte li { margin-bottom: .4rem; }
.retour { margin-top: 3rem; }

/* Pages « Merci » et « 404 » : centrées, sobres */
.page-message {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 60vh;
  padding-block: clamp(3rem, 8vw, 5rem);
  background: var(--brume);
}
.page-message .conteneur { max-width: 640px; }
.page-message p { margin-inline: auto; }
.page-message img { margin-bottom: 2rem; }
.page-message .boutons { justify-content: center; }
.page-message .tel-grand { margin-top: 1.5rem; }


/* ==========================================================================
   IMPRESSION — pour un client qui imprime la page
   ========================================================================== */

@media print {
  .entete, .barre-mobile, .formulaire, .comparateur__curseur { display: none !important; }
  body { font-size: 11pt; padding-bottom: 0; }
  .section, .accueil { padding-block: 1rem; background: none !important; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}


/* ==========================================================================
   MARQUEURS « À COMPLÉTER »
   --------------------------------------------------------------------------
   Repères jaunes visibles marquant les informations manquantes.
   Quand tout est renseigné, supprimez ce bloc : plus rien ne doit l'utiliser.
   Pour les retrouver : cherchez « a-completer » dans les fichiers .html
   ========================================================================== */
.a-completer {
  background: var(--jaune);
  color: var(--bleu);
  border: 1px dashed var(--bleu);
  border-radius: 4px;
  padding: 0 .35em;
  font-family: ui-monospace, 'Courier New', monospace;
  font-size: .88em;
  font-weight: 700;
  /* le repère doit pouvoir se couper : sinon il déborde de l'écran sur mobile */
  overflow-wrap: anywhere;
}
.sur-bleu .a-completer, .pied .a-completer { border-color: var(--bleu-nuit); }