/* ============================================================
   AuraNova RH — Feuille de style (version 2)
   ------------------------------------------------------------
   Direction artistique : « La conversation ».
   Les aplats de couleur reprennent le fond du logo (mauve,
   rose, crème) et les titres reprennent le prune du nom
   « AuraNova ». La flamme et son trait d'horizon sont les
   seuls ornements, en or.
   Aucun dégradé, aucune ombre portée, aucun effet de verre.

   Pour changer une couleur partout, modifiez sa valeur dans
   la section « 1. RÉGLAGES » ci-dessous.
   ============================================================ */

/* ------------------------------------------------------------
   1. RÉGLAGES
------------------------------------------------------------ */
:root {
  /* Fonds (tous tirés du logo) */
  --creme:      #FBF6F1;   /* fond principal */
  --mauve:      #E8D7E0;   /* aplat du haut de page */
  --rose:       #F5E4DE;   /* aplat secondaire */
  --blanc:      #FFFFFF;   /* formulaire, liste des offres, menu mobile */
  --prune:      #643554;   /* titres, nom, bande d'appel */

  /* Texte */
  --fonce:      #2C2C2C;   /* texte courant */
  --gris:       #6B6B6B;   /* texte secondaire : uniquement sur crème ou blanc */
  --sur-prune:  #F3E8EF;   /* texte secondaire sur la bande prune */

  /* Actions : une seule couleur pour les boutons, liens et focus */
  --lavande:        #5C5A8E;
  --lavande-fonce:  #48466F;

  /* Détails */
  --or:             #C9A02A;               /* flammes et traits, jamais de texte */
  --trait:          #E7D9DA;               /* filets de séparation */
  --bordure:        rgba(44, 44, 44, 0.1); /* contour des surfaces blanches */
  --bordure-champ:  #857680;               /* contour des champs de formulaire */
  --erreur:         #A3253A;

  /* Typographie : une seule famille, échelle de rapport 1,2 */
  --serif: 'Merriweather', Georgia, 'Times New Roman', serif;
  --t-meta:   0.75rem;   /* 12 px : mentions, bas de page */
  --t-second: 0.875rem;  /* 14 px : texte secondaire */
  --t-corps:  1rem;      /* 16 px : texte courant */
  --t1: 1.2rem;          /* 19 px */
  --t2: 1.44rem;         /* 23 px */
  --t3: 1.728rem;        /* 28 px */
  --t4: 2.074rem;        /* 33 px */
  --t5: 2.488rem;        /* 40 px */
  --t6: 2.986rem;        /* 48 px */

  /* Espacements : grille de 8 px, 4 px pour les détails */
  --e1: 4px;   --e2: 8px;   --e3: 12px;  --e4: 16px;
  --e6: 24px;  --e8: 32px;  --e10: 40px; --e12: 48px;
  --e16: 64px; --e20: 80px; --e24: 96px;

  /* Mise en page */
  --vp-wide:   1280px;   /* largeur maximale du contenu */
  --gouttiere: 24px;     /* marge latérale */
  --entete:    72px;     /* hauteur de l'en-tête */
  --section:   64px;     /* respiration verticale des sections */
  --prose:     65ch;     /* longueur maximale d'une ligne de texte */

  /* Mouvement : discret, et uniquement sur le menu mobile */
  --duree-entree: 200ms;
  --duree-sortie: 150ms;
  --duree-max:    300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
}

/* Tablette (768 px et plus) */
@media (min-width: 768px) {
  :root { --gouttiere: 40px; --section: 96px; }
}

/* Grand écran (1280 px et plus) */
@media (min-width: 1280px) {
  :root { --gouttiere: 56px; --section: 120px; }
}

/* ------------------------------------------------------------
   2. RÉGLAGES DE BASE
------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  /* l'en-tête reste collé en haut : on réserve sa hauteur pour
     que l'élément sélectionné au clavier ne passe jamais dessous */
  scroll-padding-top: calc(var(--entete) + var(--e4));
}

body {
  font-family: var(--serif);
  font-optical-sizing: auto;     /* dessin plus fin sur les grands titres */
  font-size: var(--t-corps);
  font-weight: 400;
  line-height: 1.6;
  color: var(--fonce);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { font-weight: 700; line-height: 1.2; text-wrap: balance; }
p { text-wrap: pretty; }

a {
  color: var(--lavande);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* Contour visible au clavier, partout */
:focus-visible {
  outline: 3px solid var(--lavande);
  outline-offset: 2px;
}

@media (hover: hover) {
  a:hover { color: var(--lavande-fonce); text-decoration-thickness: 2px; }
}

/* Conteneur : centre le contenu, largeur max 1280 px */
.conteneur {
  width: 100%;
  max-width: var(--vp-wide);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* ------------------------------------------------------------
   3. EN-TÊTE ET MENU
------------------------------------------------------------ */
.entete {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--creme);
  border-bottom: 1px solid var(--trait);
}
.entete .conteneur {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--e4);
  min-height: var(--entete);
}

.marque {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: 44px;
  text-decoration: none;
}
.marque img { width: 32px; flex-shrink: 0; }
.marque-texte { display: flex; flex-direction: column; line-height: 1.25; }
.marque-nom {
  font-size: var(--t1);
  font-weight: 700;
  color: var(--prune);
}
.marque-signature {
  font-size: var(--t-meta);
  font-style: italic;
  line-height: 1.4;
  color: var(--gris);
}

.nav-liens {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--e6);
}
.nav-liens a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--fonce);
  text-decoration: none;
}
.nav-liens a[aria-current="page"] {
  color: var(--lavande);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}
@media (hover: hover) {
  .nav-liens a:hover { color: var(--lavande); }
}

/* Bouton du menu : affiché seulement sur téléphone, si le JavaScript est actif */
.menu-bouton { display: none; }

/* Info-bulle du bouton du menu : au survol et au clavier */
.infobulle {
  position: absolute;
  top: calc(100% + var(--e2));
  right: 0;
  z-index: 100;
  padding: var(--e1) var(--e2);
  font-family: var(--serif);
  font-size: var(--t-second);
  line-height: 1.4;
  white-space: nowrap;
  color: var(--blanc);
  background: var(--fonce);
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duree-sortie) var(--ease-in), visibility 0s linear var(--duree-sortie);
}
.menu-bouton:focus-visible .infobulle {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duree-entree) var(--ease-out), visibility 0s;
}
@media (hover: hover) {
  .menu-bouton:hover .infobulle {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--duree-entree) var(--ease-out), visibility 0s;
  }
}
.menu-bouton[aria-expanded="true"] .infobulle { display: none; }

@media (max-width: 767.98px) {
  .js .menu-bouton {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    background: none;
    border: 0;
    border-radius: 4px;
    color: var(--prune);
    cursor: pointer;
  }
  .menu-bouton .trait {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
  }

  /* Panneau du menu, sous l'en-tête */
  .js .nav-liens {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    flex-direction: column;
    padding: var(--e2) var(--gouttiere) var(--e4);
    background: var(--blanc);
    border-bottom: 1px solid var(--bordure);
    box-shadow: 0 4px 12px rgba(44, 44, 44, 0.06);
    /* menu déroulant : simple fondu, sans glissement */
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--duree-sortie) var(--ease-in),
      visibility 0s linear var(--duree-sortie);
  }
  .js .nav-liens.ouvert {
    opacity: 1;
    visibility: visible;
    transition:
      opacity var(--duree-entree) var(--ease-out),
      visibility 0s;
  }
  .js .nav-liens li + li { border-top: 1px solid var(--trait); }
  .js .nav-liens a { width: 100%; min-height: 48px; }
}

/* ------------------------------------------------------------
   4. BOUTONS ET LIENS D'ACTION
------------------------------------------------------------ */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--e3) var(--e8);
  border: 2px solid transparent;
  border-radius: 4px;
  font: 700 var(--t-corps)/1.35 var(--serif);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.bouton-principal { background: var(--lavande); color: var(--blanc); }
.bouton-secondaire { border-color: var(--lavande); color: var(--lavande); background: transparent; }
.bouton-clair { background: var(--blanc); color: var(--lavande); }

@media (hover: hover) {
  .bouton-principal:hover { background: var(--lavande-fonce); color: var(--blanc); }
  .bouton-secondaire:hover { border-color: var(--lavande-fonce); color: var(--lavande-fonce); background: var(--blanc); }
  .bouton-clair:hover { background: var(--creme); color: var(--lavande-fonce); }
}

/* Lien d'action dans une liste (ex. « Discutons-en ») */
.lien-action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
}

/* ------------------------------------------------------------
   5. ORNEMENTS : EMBLÈME ET FLAMMES EN FILIGRANE
------------------------------------------------------------ */

/* La flamme posée sur le trait d'horizon, comme dans le logo */
.embleme {
  position: relative;
  width: 200px;
  height: 36px;
}
.embleme svg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  color: var(--or);
}
.embleme img {
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 32px;
  transform: translateX(-50%);
}

/* Grande flamme ton sur ton, derrière le contenu */
.filigrane {
  position: absolute;
  z-index: 0;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

/* ------------------------------------------------------------
   6. HAUT DE PAGE DE L'ACCUEIL (portrait bord à bord)
------------------------------------------------------------ */
.hero {
  display: grid;
  background: var(--mauve);
}
.hero-portrait img {
  width: 100%;
  aspect-ratio: 3 / 2;     /* sur téléphone : visage + bouton visibles dès l'ouverture */
  object-fit: cover;
  object-position: 50% 8%;
}
.hero-texte {
  position: relative;
  overflow: hidden;
  padding: var(--e6) var(--gouttiere) var(--e12);
}
.hero-texte .filigrane { width: 320px; right: -80px; bottom: -72px; }
.hero-contenu { position: relative; max-width: 36rem; }

.signature {
  margin-bottom: var(--e4);
  font-size: var(--t-second);
  font-style: italic;
  color: var(--prune);
}
.hero h1 {
  margin-bottom: var(--e4);
  font-size: var(--t4);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--prune);
}
.hero .embleme { margin-bottom: var(--e4); }
.hero .sous-titre { margin-bottom: var(--e6); }

.sous-titre {
  max-width: 34ch;
  margin-bottom: var(--e8);
  font-size: var(--t1);
  font-style: italic;
  line-height: 1.5;
  color: var(--fonce);
}

@media (min-width: 768px) {
  .hero {
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    /* un peu moins que l'écran : on voit qu'il y a une suite */
    min-height: clamp(560px, calc(100vh - var(--entete) - var(--e12)), 720px);
  }
  .hero h1,
  .hero .embleme { margin-bottom: var(--e6); }
  .hero .sous-titre { margin-bottom: var(--e8); }
  .hero-portrait { position: relative; }
  .hero-portrait img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    object-position: 50% 18%;
  }
  .hero-texte {
    display: flex;
    align-items: center;
    padding-block: var(--e16);
    padding-left: var(--e12);
    /* aligne le texte sur le bord droit du contenu des autres sections */
    padding-right: max(var(--gouttiere), calc((100vw - var(--vp-wide)) / 2 + var(--gouttiere)));
  }
  .hero-texte .filigrane { width: 480px; right: -120px; bottom: -140px; }
}

@media (min-width: 1280px) {
  .hero h1 { font-size: var(--t6); line-height: 1.1; letter-spacing: -0.015em; }
  .hero-texte { padding-left: var(--e20); }
  .hero-texte .filigrane { width: 600px; right: -120px; bottom: -168px; }
}

/* ------------------------------------------------------------
   7. HAUT DES AUTRES PAGES (aplat mauve, sans photo)
------------------------------------------------------------ */
.hero-page {
  position: relative;
  overflow: hidden;
  padding-block: var(--e12) var(--e16);
  background: var(--mauve);
}
.hero-page .conteneur { position: relative; }
.hero-page .filigrane { width: 300px; right: -96px; bottom: -80px; }
.hero-page h1 {
  max-width: 20ch;
  margin-bottom: var(--e6);
  font-size: var(--t4);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--prune);
}
.hero-page .embleme { margin-bottom: var(--e6); }
.hero-page .sous-titre { max-width: 52ch; margin-bottom: 0; }

@media (min-width: 768px) {
  .hero-page { padding-block: var(--e20) var(--e24); }
  .hero-page h1 { font-size: var(--t5); }
  .hero-page .filigrane { width: 460px; right: 4%; bottom: -152px; }
}
@media (min-width: 1280px) {
  .hero-page h1 { font-size: var(--t6); line-height: 1.1; letter-spacing: -0.015em; }
  .hero-page .filigrane { width: 560px; bottom: -192px; }
}

/* ------------------------------------------------------------
   8. SECTIONS ET TITRES
------------------------------------------------------------ */
.section { padding-block: var(--section); }

/* Petit titre de section : italique, précédé d'un trait d'or */
.etiquette-section {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-bottom: var(--e3);
  font-style: italic;
  color: var(--lavande);
}
.etiquette-section::before {
  content: "";
  flex-shrink: 0;
  width: 24px;
  height: 2px;
  background: var(--or);
}

.titre-section {
  margin-bottom: var(--e6);
  font-size: var(--t3);
  letter-spacing: -0.01em;
  color: var(--prune);
}
@media (min-width: 768px) {
  .titre-section { font-size: var(--t4); }
}
@media (min-width: 1280px) {
  .titre-section { font-size: var(--t5); line-height: 1.15; }
}

.intro { max-width: 44ch; color: var(--gris); }

/* Deux colonnes : titre à gauche (fixe au défilement), contenu à droite */
.deux-temps { display: grid; gap: var(--e10); }
@media (min-width: 768px) {
  .deux-temps {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--e12);
    align-items: start;
  }
  .collant { position: sticky; top: calc(var(--entete) + var(--e12)); }
}
@media (min-width: 1280px) {
  .deux-temps { gap: var(--e20); }
}

/* ------------------------------------------------------------
   9. ACCUEIL : POUR QUI, PROMESSE, POURQUOI MOI
------------------------------------------------------------ */
.situation {
  padding-block: var(--e8);
  border-top: 1px solid var(--trait);
}
.situation:last-child { padding-bottom: 0; }
.situation h3 {
  margin-bottom: var(--e3);
  font-size: var(--t2);
  line-height: 1.25;
  color: var(--fonce);
}
.situation p { max-width: var(--prose); }

/* Bande rose, avec une grande flamme ton sur ton sur grand écran */
.bande-rose {
  position: relative;
  overflow: hidden;
  background: var(--rose);
}
.bande-rose .conteneur { position: relative; }
.bande-rose .filigrane { display: none; }
@media (min-width: 768px) {
  .bande-rose .filigrane { display: block; width: 384px; right: -40px; top: -96px; }
  /* Variante : flamme en bas à gauche, quand le texte occupe la droite */
  .bande-rose.flamme-gauche .filigrane { top: auto; right: auto; left: -96px; bottom: -128px; }
}
@media (min-width: 1280px) {
  .bande-rose .filigrane { width: 464px; top: -120px; }
}

.promesse .titre-section { max-width: 19ch; margin-bottom: var(--e10); }
.promesse .texte p { max-width: var(--prose); margin-bottom: var(--e8); }
@media (min-width: 768px) {
  .promesse .texte { grid-column: 2; }
}

/* Liste d'atouts : la flamme sert de puce */
.atouts { list-style: none; }
.atouts li {
  position: relative;
  padding: var(--e6) 0 var(--e6) var(--e10);
  border-top: 1px solid var(--trait);
  font-size: var(--t1);
  line-height: 1.5;
}
.atouts li:last-child { padding-bottom: 0; }
.atouts li::before {
  content: "";
  position: absolute;
  left: 0;
  /* correction optique : flamme centrée sur la hauteur des capitales
     de la première ligne (19,2 px, interligne 1,5) */
  top: calc(var(--e6) + 3px);
  width: 24px;
  height: 20px;
  background: url("../images/flamme-or.png") center / contain no-repeat;
}

/* ------------------------------------------------------------
   10. BANDE PRUNE (appel final)
------------------------------------------------------------ */
.bande-prune {
  position: relative;
  overflow: hidden;
  background: var(--prune);
  color: var(--blanc);
}
.bande-prune .conteneur { position: relative; }
.bande-prune .etiquette-section,
.bande-prune .titre-section { color: var(--blanc); }
.bande-prune p { max-width: 52ch; margin-bottom: var(--e8); color: var(--sur-prune); }
.bande-prune :focus-visible { outline-color: var(--blanc); }
.bande-prune .filigrane { width: 360px; right: -96px; bottom: -112px; }
@media (min-width: 768px) {
  .bande-prune .filigrane { width: 520px; right: -40px; bottom: -168px; }
}
@media (min-width: 1280px) {
  .bande-prune .filigrane { width: 620px; right: -56px; bottom: -200px; }
}

/* ------------------------------------------------------------
   11. À PROPOS : LE RÉCIT EN TROIS TEMPS
------------------------------------------------------------ */
.numero {
  display: block;
  margin-bottom: var(--e3);
  font-size: var(--t4);
  font-weight: 400;
  line-height: 1.1;
  color: var(--lavande);
}
.titre-recit {
  margin-bottom: var(--e6);
  font-size: var(--t3);
  letter-spacing: -0.01em;
  color: var(--prune);
}
@media (min-width: 768px) {
  .titre-recit { font-size: var(--t4); line-height: 1.15; }
}
.recit-texte p { max-width: var(--prose); }
.recit-texte p + p { margin-top: var(--e4); }

/* Bande texte + photo bord à bord (même principe que l'accueil) */
.bande-photo { display: grid; }
.bande-photo-texte { padding: var(--section) var(--gouttiere) var(--e12); }
.bande-photo-image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 15%;
}
.bande-photo-image.photo-carree img { aspect-ratio: 1 / 1; object-position: 40% 50%; }

@media (min-width: 768px) {
  .bande-photo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .bande-photo-texte {
    padding-block: var(--section);
    padding-left: max(var(--gouttiere), calc((100vw - var(--vp-wide)) / 2 + var(--gouttiere)));
    padding-right: var(--e12);
  }
  .bande-photo-image { position: relative; min-height: 480px; }
  .bande-photo-image img,
  .bande-photo-image.photo-carree img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }

  /* Variante : photo à gauche */
  .bande-photo.photo-gauche { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .bande-photo.photo-gauche .bande-photo-image { order: -1; }
  .bande-photo.photo-gauche .bande-photo-texte {
    padding-left: var(--e12);
    padding-right: max(var(--gouttiere), calc((100vw - var(--vp-wide)) / 2 + var(--gouttiere)));
  }
}
@media (min-width: 1280px) {
  .bande-photo-texte { padding-right: var(--e20); }
  .bande-photo.photo-gauche .bande-photo-texte { padding-left: var(--e20); }
}

/* Fin du récit : l'emblème et le bouton, centrés */
.fin-recit { text-align: center; }
.fin-recit .embleme { margin: 0 auto var(--e8); }

/* ------------------------------------------------------------
   12. PRESTATIONS : LA LISTE DES OFFRES
------------------------------------------------------------ */
.entete-offres { margin-bottom: var(--e12); }

.liste-offres {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 4px;
}
.offre {
  padding: var(--e8) var(--e6);
  border-top: 1px solid var(--trait);
}
.offre:first-child { border-top: 0; }
.offre h3 {
  margin-bottom: var(--e3);
  font-size: var(--t2);
  line-height: 1.25;
  color: var(--prune);
}
.offre p { max-width: var(--prose); margin-bottom: var(--e2); }

@media (min-width: 768px) {
  .offre {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--e8);
    align-items: baseline;   /* titre et texte sur la même ligne de base */
    padding: var(--e10);
  }
  .offre h3 { margin-bottom: 0; }
}

/* ------------------------------------------------------------
   13. CONTACT : COORDONNÉES ET FORMULAIRE
------------------------------------------------------------ */
.contact-grille { display: grid; gap: var(--e12); }
@media (min-width: 768px) {
  .contact-grille {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
}
@media (min-width: 1280px) {
  .contact-grille { gap: var(--e20); }
}

.coordonnees .titre-section { margin-bottom: var(--e8); }
.lignes-contact { border-bottom: 1px solid var(--trait); }

/* Coordonnées : typographie seule, séparées par des filets */
.ligne-contact {
  display: block;
  padding-block: var(--e4);
  border-top: 1px solid var(--trait);
  color: var(--fonce);
  text-decoration: none;
}
.etiquette {
  display: block;
  margin-bottom: var(--e1);
  font-size: var(--t-second);
  color: var(--gris);
}
.valeur {
  font-size: var(--t1);
  line-height: 1.4;
  color: var(--prune);
  overflow-wrap: break-word;   /* coupe une adresse seulement si elle ne tient pas */
}
/* Tablette : colonne plus étroite, l'adresse e-mail passe en taille courante */
@media (min-width: 768px) {
  .valeur { font-size: var(--t-corps); line-height: 1.5; }
}
@media (min-width: 1280px) {
  .valeur { font-size: var(--t1); line-height: 1.4; }
}
a.ligne-contact .valeur {
  color: var(--lavande);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
@media (hover: hover) {
  a.ligne-contact:hover .valeur { color: var(--lavande-fonce); text-decoration-thickness: 2px; }
}
.coordonnees .bouton { margin-top: var(--e8); }

/* Formulaire : surface blanche, champs bien délimités */
.formulaire {
  padding: var(--e8) var(--e6);
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 4px;
}
@media (min-width: 768px) {
  .formulaire { padding: var(--e10); }
}

.champ { margin-bottom: var(--e6); }
.champ label {
  display: block;
  margin-bottom: var(--e2);
  font-weight: 700;
  color: var(--fonce);
}
.aide {
  margin-bottom: var(--e2);
  font-size: var(--t-second);
  line-height: 1.5;
  color: var(--gris);
}
.champ input,
.champ textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: var(--e3) var(--e4);
  font: inherit;
  font-size: var(--t-corps);
  line-height: 1.5;
  color: var(--fonce);
  background: var(--blanc);
  border: 1px solid var(--bordure-champ);
  border-radius: 4px;
}
.champ textarea { min-height: 160px; resize: vertical; }
.champ input::placeholder,
.champ textarea::placeholder { color: var(--gris); opacity: 1; }

/* Champ en erreur : bordure plus épaisse + message (jamais la couleur seule) */
.champ [aria-invalid="true"] {
  border: 2px solid var(--erreur);
  padding: calc(var(--e3) - 1px) calc(var(--e4) - 1px);
}
.champ-erreur {
  margin-top: var(--e2);
  font-size: var(--t-second);
  line-height: 1.5;
  color: var(--erreur);
}
.champ-erreur:empty { margin-top: 0; }   /* reste en place, vide, pour être annoncé */

.formulaire .bouton { width: 100%; }

/* Envoi en cours : petite roue dans le bouton, le temps que
   Netlify enregistre le message */
.bouton.envoi-en-cours { gap: var(--e3); cursor: progress; }
.bouton.envoi-en-cours::after {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: rotation var(--duree-max) linear infinite;
}
@keyframes rotation { to { transform: rotate(360deg); } }

.mention-rgpd {
  margin-top: var(--e6);
  padding-top: var(--e6);
  border-top: 1px solid var(--trait);
  font-size: var(--t-second);
  line-height: 1.55;
  color: var(--gris);
}
.alternative {
  margin-top: var(--e4);
  font-size: var(--t-second);
  line-height: 1.55;
  color: var(--gris);
}

/* Champ piège anti-spam de Netlify : jamais visible ni atteignable */
.champ-piege {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  margin: -1px;
  padding: 0;
  border: 0;
}

/* ------------------------------------------------------------
   14. MENTIONS LÉGALES : FICHES
------------------------------------------------------------ */
.fiche {
  display: grid;
  gap: var(--e4);
  padding-block: var(--e8);
  border-top: 1px solid var(--trait);
}
.fiche:first-child { padding-top: 0; border-top: 0; }
.fiche:last-child { padding-bottom: 0; }
.titre-fiche {
  font-size: var(--t2);
  line-height: 1.25;
  color: var(--prune);
}
.fiche p { max-width: var(--prose); }
.fiche p + p { margin-top: var(--e4); }

.liste-infos { list-style: none; }
.liste-infos li {
  padding-block: var(--e3);
  border-top: 1px solid var(--trait);
}
.liste-infos li:first-child { padding-top: 0; border-top: 0; }

@media (min-width: 768px) {
  .fiche {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--e8);
    align-items: baseline;
  }
}

/* ------------------------------------------------------------
   15. PAGE « MERCI »
------------------------------------------------------------ */
.merci-texte p { max-width: var(--prose); }
.merci-texte p + p { margin-top: var(--e4); }
.boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e4);
  margin-top: var(--e10);
}

/* ------------------------------------------------------------
   16. PIED DE PAGE
------------------------------------------------------------ */
.pied {
  padding-block: var(--e16) var(--e8);
  background: var(--creme);
  border-top: 1px solid var(--trait);
  font-size: var(--t-second);
  color: var(--gris);
}
.pied-haut { display: grid; gap: var(--e10); }
/* Tablette : la présentation sur toute la largeur, puis deux colonnes */
@media (min-width: 768px) {
  .pied-haut { grid-template-columns: 1fr 1fr; gap: var(--e8); }
  .pied-haut > :first-child { grid-column: 1 / -1; }
}
/* Grand écran : trois colonnes */
@media (min-width: 1280px) {
  .pied-haut { grid-template-columns: 2fr 1fr 1.4fr; }
  .pied-haut > :first-child { grid-column: auto; }
}
.pied-flamme { width: 28px; margin-bottom: var(--e4); }
.pied .marque-nom { display: block; }
.pied-presentation { max-width: 40ch; margin-top: var(--e3); }
.pied-titre {
  margin-bottom: var(--e2);
  font-size: var(--t-corps);
  line-height: 1.25;
  color: var(--prune);
}
.pied-liens { list-style: none; }
.pied-liens a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--fonce);
  text-decoration: none;
  overflow-wrap: break-word;
}
@media (hover: hover) {
  .pied-liens a:hover { color: var(--lavande); text-decoration: underline; }
}
.pied-bas {
  display: grid;
  gap: var(--e1);
  margin-top: var(--e12);
  padding-top: var(--e6);
  border-top: 1px solid var(--trait);
  font-size: var(--t-meta);
  line-height: 1.4;
}

/* ------------------------------------------------------------
   17. MOUVEMENT RÉDUIT
   Si le visiteur a demandé moins d'animations, le menu
   apparaît en fondu court, sans glissement.
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .js .nav-liens,
  .infobulle { transition: opacity 100ms linear, visibility 0s linear 100ms; }
  .js .nav-liens.ouvert,
  .menu-bouton:focus-visible .infobulle { transition: opacity 100ms linear, visibility 0s; }
  /* la roue reste visible mais ne tourne pas */
  .bouton.envoi-en-cours::after { animation: none; }
}