/* ==========================================================================
   Composants — un bloc = une section commentée, classes préfixées par le nom
   du bloc. Source : docs/02-design-system.md §4.
   Les classes .demo-survol et .demo-focus ne servent qu'à la page catalogue
   pour représenter les états survol et focus clavier.
   ========================================================================== */

/* Focus clavier représenté sur la page catalogue */
.demo-focus {
  outline: 3px solid var(--couleur-focus);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   4.1 bouton
   Hauteur min. 48 px, padding horizontal 24 px, icône facultative à gauche
   (20 px, écart 8 px). Un seul bouton primaire par bloc.
   -------------------------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 48px;
  padding-inline: var(--e-5);
  border: 2px solid transparent;
  border-radius: var(--rayon);
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
}

.bouton .icone {
  flex: none;
  width: 20px;
  height: 20px;
}

/* Primaire : fond --vert-600, texte --blanc ; survol --vert-700 */
.bouton--primaire {
  background-color: var(--vert-600);
  border-color: var(--vert-600);
  color: var(--blanc);
}

.bouton--primaire:hover,
.bouton--primaire.demo-survol {
  background-color: var(--vert-700);
  border-color: var(--vert-700);
}

/* Secondaire sur fond clair : bordure --vert-600, texte --vert-700 ; survol fond --gris-clair */
.bouton--secondaire {
  background-color: transparent;
  border-color: var(--vert-600);
  color: var(--vert-700);
}

.bouton--secondaire:hover,
.bouton--secondaire.demo-survol {
  background-color: var(--gris-clair);
}

/* Sur section--grise, le survol --gris-clair serait invisible : fond --blanc */
.section--grise .bouton--secondaire:hover,
.section--grise .bouton--secondaire.demo-survol {
  background-color: var(--blanc);
}

/* Secondaire sur fond sombre : bordure --lime, texte --blanc ; survol fond --vert-900 */
.bouton--secondaire-sombre {
  background-color: transparent;
  border-color: var(--lime);
  color: var(--blanc);
}

.bouton--secondaire-sombre:hover,
.bouton--secondaire-sombre.demo-survol {
  background-color: var(--vert-900);
}

/* Sur section--verte, le survol --vert-900 serait invisible : fond --noir */
.section--verte .bouton--secondaire-sombre:hover,
.section--verte .bouton--secondaire-sombre.demo-survol {
  background-color: var(--noir);
}

/* --------------------------------------------------------------------------
   4.2 surtitre
   Public Sans 600, 13 px, majuscules, espacement des lettres 0,2em.
   Couleur selon le fond : --vert-700 sur clair, --lime sur sombre ou vert.
   -------------------------------------------------------------------------- */

.surtitre {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--couleur-surtitre);
}

/* --------------------------------------------------------------------------
   4.3 titre-section
   Surtitre → H2 → barre 48 × 4 px --vert-500 → intro facultative.
   Aligné à gauche. Marge sous le bloc : 32 px → 48 px (≥ 1024).
   -------------------------------------------------------------------------- */

.titre-section {
  margin-bottom: var(--e-6);
}

.titre-section .surtitre {
  margin-bottom: var(--e-3);
}

.titre-section__titre::after {
  content: "";
  display: block;
  width: 48px;
  height: var(--barre-accent);
  margin-top: var(--e-4);
  background-color: var(--vert-500);
}

.titre-section__intro {
  margin-top: var(--e-5);
  color: var(--couleur-texte-secondaire);
}

@media (min-width: 1024px) {
  .titre-section {
    margin-bottom: var(--e-7);
  }
}

/* --------------------------------------------------------------------------
   4.4 en-tete
   Collé en haut, fond --blanc, bordure basse, hauteur 64 px → 80 px.
   Logo 40 px → 56 px. < 1024 px : logo + bouton menu (<details>).
   ≥ 1024 px : liens d'ancre + bouton primaire « Réserver un appel » (Cal.com).
   .demo-mobile force l'affichage mobile (page catalogue uniquement).
   -------------------------------------------------------------------------- */

.en-tete {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--blanc);
  border-bottom: var(--bordure);
  color: var(--texte);
  --couleur-titre: var(--texte);
  --couleur-texte-secondaire: var(--texte-doux);
  --couleur-lien: var(--texte);
  --couleur-focus: var(--vert-700);
}

.en-tete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: 64px;
}

.en-tete__logo {
  display: inline-flex;
  flex: none; /* le logo ne rétrécit jamais : il serait déformé */
  align-items: center;
  min-height: 44px;
}

.en-tete__logo img {
  width: auto;
  height: 40px;
}

.en-tete__nav,
.en-tete__reserver {
  display: none;
}

.en-tete__liens a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--texte);
  text-decoration: none;
}

.en-tete__liens a:hover,
.en-tete__liens a.demo-survol {
  text-decoration: underline;
  text-decoration-color: var(--vert-500);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

/* Bouton menu (mobile et tablette) */
.en-tete__bouton-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--rayon);
  list-style: none;
  color: var(--texte);
}

.en-tete__bouton-menu::-webkit-details-marker {
  display: none;
}

.en-tete__bouton-menu .icone {
  width: 24px;
  height: 24px;
}

/* Liste des liens ouverte sous l'en-tête */
.en-tete__menu-liste {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding-block: var(--e-2);
  background-color: var(--blanc);
  border-bottom: var(--bordure);
}

.en-tete__menu-liste a {
  min-height: 48px;
}

@media (min-width: 1024px) {
  .en-tete:not(.demo-mobile) .en-tete__interieur {
    min-height: 80px;
  }

  .en-tete:not(.demo-mobile) .en-tete__logo img {
    height: 56px;
  }

  .en-tete:not(.demo-mobile) .en-tete__nav {
    display: block;
    margin-left: auto;
  }

  .en-tete:not(.demo-mobile) .en-tete__nav .en-tete__liens {
    display: flex;
    gap: var(--e-4);
  }

  .en-tete:not(.demo-mobile) .en-tete__reserver {
    display: inline-flex;
    white-space: nowrap;
  }

  .en-tete:not(.demo-mobile) .en-tete__menu {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   4.5 barre-appel (mobile et tablette uniquement, < 1024 px)
   Fixée en bas, fond --noir, padding 8 px + zone de sécurité iPhone.
   Deux boutons de même largeur. Seul élément autorisé à avoir une ombre.
   Hauteur : 48 px + 2 × 8 px = 64 px (--e-8), réservés en bas de page.
   -------------------------------------------------------------------------- */

.barre-appel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-2);
  padding: var(--e-2);
  padding-bottom: calc(var(--e-2) + env(safe-area-inset-bottom));
  background-color: var(--noir);
  box-shadow: 0 -2px 8px color-mix(in srgb, var(--noir) 20%, transparent);
  --couleur-focus: var(--lime);
}

.barre-appel .bouton {
  padding-inline: var(--e-4);
}

body:has(.barre-appel) {
  padding-bottom: calc(var(--e-8) + env(safe-area-inset-bottom));
}

@media (min-width: 1024px) {
  .barre-appel {
    display: none;
  }

  body:has(.barre-appel) {
    padding-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   4.6 hero
   Fond section--sombre avec le dégradé --noir → --vert-900 (135°), validé
   le 22/10/2026 : ce dégradé n'existe que dans le hero. Surtitre → H1 → paragraphe → 2 boutons → horaires (Petit).
   Boutons pleine largeur et empilés sur mobile, côte à côte ≥ 640 px.
   Pas d'image de fond.
   -------------------------------------------------------------------------- */

.hero {
  background-image: linear-gradient(135deg, var(--noir), var(--vert-900));
}

.hero .surtitre {
  margin-bottom: var(--e-3);
}

.hero__texte {
  margin-top: var(--e-4);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin-top: var(--e-5);
}

.hero__actions .bouton {
  width: 100%;
}

.hero__horaires {
  margin-top: var(--e-4);
}

@media (min-width: 640px) {
  .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .hero__actions .bouton {
    width: auto;
  }
}

/* --------------------------------------------------------------------------
   4.7 bandeau-confiance
   Fond section--verte. 4 éléments : icône 24 px --lime + libellé Public Sans
   600 --blanc. Grille 2 × 2 sur mobile, 4 colonnes ≥ 1024 px.
   -------------------------------------------------------------------------- */

.bandeau-confiance {
  padding-block: var(--e-6);
}

.bandeau-confiance__liste {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e-5) var(--e-4);
}

.bandeau-confiance__element {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-weight: 600;
  line-height: 1.3;
  color: var(--blanc);
}

.bandeau-confiance__element .icone {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--lime);
}

@media (min-width: 1024px) {
  .bandeau-confiance__liste {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------------------
   4.8 carte-service
   Fond --blanc, --bordure, bordure gauche 4 px --vert-500, --rayon, padding
   24 px. Icône 32 px --vert-700 → H3 → liste à puces triangle --vert-500.
   Grille 1 → 2 colonnes (≥ 640 px), cartes d'une rangée de même hauteur.
   -------------------------------------------------------------------------- */

.carte-service-grille {
  display: grid;
  gap: var(--e-5);
}

.carte-service {
  padding: var(--e-5);
  background-color: var(--blanc);
  border: var(--bordure);
  border-left: var(--barre-accent) solid var(--vert-500);
  border-radius: var(--rayon);
  color: var(--texte);
  --couleur-titre: var(--texte);
  --couleur-lien: var(--vert-700);
  --couleur-focus: var(--vert-700);
}

.carte-service__icone {
  width: 32px;
  height: 32px;
  color: var(--vert-700);
}

.carte-service__titre {
  margin-top: var(--e-4);
}

.carte-service__liste {
  display: grid;
  gap: var(--e-2);
  margin-top: var(--e-3);
}

.carte-service__liste li {
  position: relative;
  padding-left: var(--e-5);
}

/* Puce : petit triangle, rappel du logo */
.carte-service__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 10px;
  height: 9px;
  background-color: var(--vert-500);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

@media (min-width: 640px) {
  .carte-service-grille {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   4.9 liste-complementaire
   Icône « check » --vert-700 + libellé. 1 → 2 (≥ 640) → 3 colonnes (≥ 1024).
   Pas de carte, pas de bordure : plus discret que les services principaux.
   -------------------------------------------------------------------------- */

.liste-complementaire {
  display: grid;
  gap: var(--e-3) var(--e-5);
}

.liste-complementaire__element {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
}

.liste-complementaire__element .icone {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--vert-700);
}

@media (min-width: 640px) {
  .liste-complementaire {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .liste-complementaire {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   4.10 avant-apres
   <figure> au ratio 4:3, deux images superposées ; l'image « après » est
   découpée selon --position (mise à jour par js/avant-apres.js).
   Contrôle : vrai <input type="range"> transparent posé sur toute l'image.
   Repère : ligne 2 px --blanc + poignée ronde 44 px --blanc, icône --noir.
   AUCUN filtre sur les images. Galerie : 1 → 2 colonnes (≥ 1024 px).
   -------------------------------------------------------------------------- */

.avant-apres-galerie {
  display: grid;
  gap: var(--e-6);
}

.avant-apres__cadre {
  --position: 50%;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--rayon);
  background-color: var(--gris-clair);
}

.avant-apres__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avant-apres__image--apres {
  clip-path: inset(0 0 0 var(--position));
}

.avant-apres__etiquette {
  position: absolute;
  top: var(--e-3);
  padding: var(--e-1) var(--e-2);
  background-color: var(--noir);
  color: var(--blanc);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  pointer-events: none;
}

.avant-apres__etiquette--avant {
  left: var(--e-3);
}

.avant-apres__etiquette--apres {
  right: var(--e-3);
}

.avant-apres__repere {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--position);
  width: 2px;
  background-color: var(--blanc);
  transform: translateX(-50%);
  pointer-events: none;
}

.avant-apres__poignee {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--blanc);
  color: var(--noir);
  transform: translate(-50%, -50%);
}

.avant-apres__poignee .icone {
  width: 24px;
  height: 24px;
}

.avant-apres__curseur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

/* Le curseur est invisible : le focus clavier s'affiche sur le cadre */
.avant-apres__cadre:has(.avant-apres__curseur:focus-visible),
.avant-apres__cadre.demo-focus {
  outline: 3px solid var(--couleur-focus);
  outline-offset: 2px;
}

.avant-apres__legende {
  margin-top: var(--e-3);
}

@media (min-width: 1024px) {
  .avant-apres-galerie {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   4.11 carte-atout (section professionnels, sur section--verte)
   Icône 24 px --lime → H3 --blanc → texte --blanc. Bordure 1 px --vert-500,
   --rayon, padding 24 px. Grille 1 → 2 (≥ 640) → 3 colonnes (≥ 1024).
   -------------------------------------------------------------------------- */

.carte-atout-grille {
  display: grid;
  gap: var(--e-5);
}

.carte-atout {
  padding: var(--e-5);
  border: 1px solid var(--vert-500);
  border-radius: var(--rayon);
  color: var(--blanc);
  --couleur-titre: var(--blanc);
}

.carte-atout .icone {
  width: 24px;
  height: 24px;
  color: var(--lime);
}

.carte-atout__titre {
  margin-top: var(--e-4);
}

.carte-atout__texte {
  margin-top: var(--e-2);
}

@media (min-width: 640px) {
  .carte-atout-grille {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .carte-atout-grille {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   4.12 encart-documents
   Encadré « Dossier partenaire sur demande » : 3 lignes (icône fichier
   validé + document) + bouton secondaire mailto. Fond --blanc, --bordure,
   padding 24 px : posé sur fond vert, il ressort.
   -------------------------------------------------------------------------- */

.encart-documents {
  padding: var(--e-5);
  background-color: var(--blanc);
  border: var(--bordure);
  border-radius: var(--rayon);
  color: var(--texte);
  --couleur-titre: var(--texte);
  --couleur-texte-secondaire: var(--texte-doux);
  --couleur-lien: var(--vert-700);
  --couleur-focus: var(--vert-700);
}

.encart-documents__texte {
  margin-top: var(--e-2);
}

.encart-documents__liste {
  display: grid;
  gap: var(--e-3);
  margin-top: var(--e-4);
}

.encart-documents__liste li {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}

.encart-documents__liste .icone {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--vert-700);
}

.encart-documents .bouton {
  margin-top: var(--e-5);
}

/* --------------------------------------------------------------------------
   4.13 etape (méthode en 4 étapes)
   Numéro Public Sans 700 32 px --vert-700, dans un carré 56 px à bordure
   2 px --vert-500 → H3 → texte court. Mobile : 1 colonne, trait vertical
   --ligne entre les numéros. ≥ 1024 px : 4 colonnes, trait horizontal.
   -------------------------------------------------------------------------- */

.etape-liste {
  display: grid;
}

.etape {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: var(--e-5);
  padding-bottom: var(--e-6);
}

.etape:last-child {
  padding-bottom: 0;
}

.etape__numero {
  grid-row: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 2px solid var(--vert-500);
  border-radius: var(--rayon);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: var(--vert-700);
}

.etape__titre {
  align-self: center;
}

.etape__texte {
  grid-column: 2;
  margin-top: var(--e-2);
}

/* Trait qui relie les numéros */
.etape:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 56px;
  bottom: 0;
  left: 27px;
  width: 2px;
  background-color: var(--ligne);
}

@media (min-width: 1024px) {
  .etape-liste {
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--e-5);
  }

  .etape {
    display: block;
    padding-bottom: 0;
  }

  .etape__titre {
    margin-top: var(--e-4);
  }

  .etape:not(:last-child)::before {
    top: 27px;
    bottom: auto;
    left: 56px;
    right: calc(-1 * var(--e-5));
    width: auto;
    height: 2px;
  }
}

/* --------------------------------------------------------------------------
   4.14 carte-reference
   Logo partenaire en niveaux de gris (40 px de haut) → citation
   (<blockquote>) → nom, fonction, société (Petit, --texte-doux).
   Fond --blanc, --bordure, padding 24 px.
   Sur le site : attribut hidden tant que l'accord écrit n'est pas reçu.
   -------------------------------------------------------------------------- */

.carte-reference {
  padding: var(--e-5);
  background-color: var(--blanc);
  border: var(--bordure);
  border-radius: var(--rayon);
  color: var(--texte);
  --couleur-texte-secondaire: var(--texte-doux);
}

.carte-reference__logo {
  width: auto;
  height: 40px;
  filter: grayscale(1);
}

.carte-reference__citation {
  margin-top: var(--e-4);
}

.carte-reference__auteur {
  margin-top: var(--e-3);
  color: var(--texte-doux);
}

/* --------------------------------------------------------------------------
   4.15 faq
   Liste de <details>/<summary>. Question Public Sans 600, hauteur min.
   56 px, icône « + » à droite qui pivote de 45° à l'ouverture.
   Séparation : bordure basse --ligne. Réponse : Texte, padding bas 16 px.
   -------------------------------------------------------------------------- */

.faq__element {
  border-bottom: var(--bordure);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: 56px;
  padding-block: var(--e-3);
  font-weight: 600;
  list-style: none;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question .icone {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--vert-700);
  transition: transform var(--transition);
}

.faq__element[open] .faq__question .icone {
  transform: rotate(45deg);
}

.faq__reponse {
  padding-bottom: var(--e-4);
}

/* --------------------------------------------------------------------------
   4.16 zone
   Trois lignes avec icône « repère ». Paris & Île-de-France mis en avant
   (H3 + mention), puis France entière et Europe sur demande.
   Pas de carte interactive.
   -------------------------------------------------------------------------- */

.zone {
  display: grid;
  gap: var(--e-4);
}

.zone__ligne {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
}

.zone__ligne .icone {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--vert-700);
}

.zone__nom {
  font-weight: 600;
}

.zone__mention {
  color: var(--couleur-texte-secondaire);
}

/* --------------------------------------------------------------------------
   4.17 contact-coordonnees
   Lignes : icône 24 px --vert-700 + libellé (Petit, --texte-doux) + valeur
   en lien (tel: / mailto:), hauteur ≥ 44 px. Puis horaires et message hors
   horaires. Puis bouton primaire « Réserver un appel découverte ».
   -------------------------------------------------------------------------- */

.contact-coordonnees__lignes {
  display: grid;
  gap: var(--e-3);
}

.contact-coordonnees__ligne {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}

.contact-coordonnees__ligne .icone {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--vert-700);
}

.contact-coordonnees__libelle {
  display: block;
  color: var(--texte-doux);
}

.contact-coordonnees__valeur {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--vert-700);
  overflow-wrap: anywhere;
}

.contact-coordonnees__horaires {
  margin-top: var(--e-5);
}

.contact-coordonnees .bouton {
  margin-top: var(--e-5);
}

/* --------------------------------------------------------------------------
   4.18 formulaire
   Toujours sur fond clair. Libellé au-dessus de chaque champ, champs
   obligatoires marqués « (obligatoire) ». Champs 48 px, bordure 1 px
   --texte-doux, --rayon, fond --blanc. Focus : bordure --vert-700 + contour
   3 px. Erreur : bordure --erreur + message --erreur (Petit) avec icône,
   lié au champ par aria-describedby. Netlify Forms + champ piège caché.
   -------------------------------------------------------------------------- */

.formulaire {
  color: var(--texte);
  --couleur-titre: var(--texte);
  --couleur-texte-secondaire: var(--texte-doux);
  --couleur-lien: var(--vert-700);
  --couleur-focus: var(--vert-700);
}

.formulaire__form {
  display: grid;
  gap: var(--e-5);
}

.formulaire__champ {
  display: grid;
  gap: var(--e-2);
}

.formulaire__groupe {
  margin: 0;
  padding: 0;
  min-width: 0;
  border: 0;
}

.formulaire__libelle {
  padding: 0;
  font-weight: 600;
}

.formulaire__groupe .formulaire__libelle {
  margin-bottom: var(--e-2);
}

.formulaire__saisie {
  width: 100%;
  min-height: 48px;
  padding: var(--e-2) var(--e-3);
  background-color: var(--blanc);
  border: 1px solid var(--texte-doux);
  border-radius: var(--rayon);
  color: var(--texte);
}

textarea.formulaire__saisie {
  resize: vertical;
}

.formulaire__saisie:focus,
.formulaire__saisie.demo-focus {
  border-color: var(--vert-700);
  outline: 3px solid var(--vert-700);
  outline-offset: 2px;
}

.formulaire__saisie[aria-invalid="true"] {
  border-color: var(--erreur);
}

/* Choix (boutons radio) et case de consentement : tout le libellé est cliquable */
.formulaire__choix {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
}

.formulaire__option {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}

.formulaire__option input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--vert-600);
}

.formulaire__consentement .formulaire__option {
  align-items: flex-start;
}

.formulaire__consentement .formulaire__option input {
  margin-top: var(--e-1);
}

.formulaire__consentement p {
  margin-top: var(--e-2);
}

/* Message d'erreur sous un champ */
.formulaire__erreur {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
  font-size: 14px;
  color: var(--erreur);
}

.formulaire__erreur .icone {
  flex: none;
  width: 20px;
  height: 20px;
}

.formulaire__envoyer {
  width: 100%;
}

/* Messages après envoi : succès et erreur générale */
.formulaire__message {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-4);
  background-color: var(--gris-clair);
  border-left: var(--barre-accent) solid var(--vert-500);
  border-radius: var(--rayon);
  color: var(--texte);
}

.formulaire__message .icone {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--vert-700);
}

.formulaire__message--erreur {
  border-left-color: var(--erreur);
}

.formulaire__message--erreur .icone {
  color: var(--erreur);
}

@media (min-width: 640px) {
  .formulaire__envoyer {
    width: auto;
    justify-self: start;
  }
}

/* --------------------------------------------------------------------------
   4.19 pied-de-page
   Fond --noir. Logo vertical « sur sombre » (120 px) → téléphone, email,
   zone (sans adresse) → SIRET → liens légaux (≥ 44 px) → © 2026.
   Empilé sous 1024 px, 3 colonnes au-delà (docs/03, revue de l'étape C).
   Texte --texte-clair, liens --blanc soulignés.
   -------------------------------------------------------------------------- */

.pied-de-page {
  padding-block: var(--e-7);
  background-color: var(--noir);
  color: var(--texte-clair);
  --couleur-titre: var(--blanc);
  --couleur-texte-secondaire: var(--texte-clair);
  --couleur-lien: var(--blanc);
  --couleur-focus: var(--lime);
}

.pied-de-page__logo {
  width: auto;
  height: 120px;
}

.pied-de-page__coordonnees,
.pied-de-page__liens {
  margin-top: var(--e-5);
}

/* 3e colonne : SIRET, liens légaux et © */
.pied-de-page__legal {
  margin-top: var(--e-4);
}

.pied-de-page a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--blanc);
  text-decoration: underline;
}

.pied-de-page__liens {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--e-5);
}

.pied-de-page__copyright {
  margin-top: var(--e-4);
}

/* À partir de 1024 px : logo | coordonnées et zone | SIRET, liens légaux et © */
@media (min-width: 1024px) {
  .pied-de-page__interieur {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: var(--e-7);
    align-items: start;
  }

  .pied-de-page__coordonnees,
  .pied-de-page__legal {
    margin-top: 0;
  }
}

/* --------------------------------------------------------------------------
   Assemblage de l'accueil (docs/03 §3)
   -------------------------------------------------------------------------- */

/* Section professionnels : l'encart documents sous les cartes atouts */
.carte-atout-grille + .encart-documents {
  margin-top: var(--e-6);
}

/* Section contact : coordonnées puis formulaire ; 2 colonnes ≥ 1024 px */
.contact-grille {
  display: grid;
  gap: var(--e-7);
}

@media (min-width: 1024px) {
  .contact-grille {
    grid-template-columns: 5fr 7fr;
    align-items: start;
  }
}

/* Pages légales : un H1 puis un H2 par rubrique (docs/03 §1, décision 17) */
.texte-legal h2 {
  margin-top: var(--e-7);
  margin-bottom: var(--e-3);
}

.texte-legal p + p {
  margin-top: var(--e-3);
}

/* Pages courtes (merci, 404) : phrase sous le H1 puis deux boutons */
.page-courte__texte {
  margin-top: var(--e-4);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-5);
}