/* ==========================================================================
   GUAP AGENCEMENT — feuille de style unique du site
   Approche « mobile first » : les règles de base visent le mobile,
   les media queries (min-width) ajoutent la mise en page tablette et ordinateur.
   Sommaire : 1. Police  2. Variables (clair / sombre)  3. Base  4. Utilitaires
   5. Boutons  6. En-tête et menu  7. Sections communes  8. Accueil  9. Services
   10. Portfolio et visionneuse  11. Contact et formulaire  12. Mentions légales
   13. Bandeau d'appel, pied de page, barre mobile  14. Préférences utilisateur
   ========================================================================== */

/* ---------- 1. Police Lato hébergée localement (licence OFL, aucune requête externe) ---------- */
@font-face {
  font-family: "Lato";
  src: url("../assets/fonts/lato-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../assets/fonts/lato-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ---------- 2. Variables ---------- */
:root {
  color-scheme: light;

  /* Couleurs (mode clair). Palette d'origine : anthracite, gris, blanc ; ajout d'un ton bois. */
  --fond: #ffffff;
  --fond-alt: #f5f3f0;
  --surface: #ffffff;
  --texte: #1d1e20;
  --texte-doux: #55575c;
  --bordure: #dedad4;
  --bordure-champ: #7d7a74; /* contraste 3:1 minimum exigé pour les contours de champs */
  --accent: #85562a; /* ton bois, réservé aux petits repères (surtitres, pastilles) */
  --accent-doux: #f3e9de;
  --cta-fond: #1d1e20;
  --cta-texte: #ffffff;
  --cta-survol: #3d3e42;
  --pied-fond: #1d1e20;
  --pied-texte: #ebe8e3;
  --focus: #1a5fd0;
  --erreur: #b3261e;
  --succes: #1b6b3a;
  --voile: rgba(10, 10, 10, 0.62);
  --ombre-1: 0 1px 2px rgba(20, 20, 20, 0.06), 0 1px 1px rgba(20, 20, 20, 0.04);
  --ombre-2: 0 10px 30px rgba(20, 20, 20, 0.08), 0 2px 8px rgba(20, 20, 20, 0.05);

  /* Typographie : tailles fluides entre mobile et ordinateur */
  --police: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-m: 1rem;
  --t-l: 1.125rem;
  --t-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --t-2xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);
  --t-3xl: clamp(2.125rem, 1.4rem + 3.4vw, 3.75rem);

  /* Espacements */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-section: clamp(3rem, 2rem + 4vw, 6rem);

  /* Formes et mise en page */
  --rayon-s: 8px;
  --rayon-m: 14px;
  --rayon-l: 20px;
  --rayon-pilule: 999px;
  --largeur: 1200px;
  --gouttiere: clamp(1rem, 0.6rem + 2vw, 2rem);
  --hauteur-entete: 64px;
  --hauteur-barre: 68px;
  --duree: 0.2s;
}

/* Mode sombre : choix manuel (bouton de l'en-tête)... */
:root[data-theme="sombre"] {
  color-scheme: dark;
  --fond: #141415;
  --fond-alt: #1b1b1d;
  --surface: #222225;
  --texte: #f1eee9;
  --texte-doux: #bab6af;
  --bordure: #36363b;
  --bordure-champ: #8e8b85;
  --accent: #dcab76;
  --accent-doux: #2e261e;
  --cta-fond: #f1eee9;
  --cta-texte: #141415;
  --cta-survol: #d6d2cb;
  --pied-fond: #0c0c0d;
  --pied-texte: #ebe8e3;
  --focus: #8ab4ff;
  --erreur: #ff8a80;
  --succes: #86d6a2;
  --ombre-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ombre-2: 0 10px 30px rgba(0, 0, 0, 0.45);
}
/* ... ou réglage du système, tant que l'utilisateur n'a pas choisi le mode clair */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    color-scheme: dark;
    --fond: #141415;
    --fond-alt: #1b1b1d;
    --surface: #222225;
    --texte: #f1eee9;
    --texte-doux: #bab6af;
    --bordure: #36363b;
    --bordure-champ: #8e8b85;
    --accent: #dcab76;
    --accent-doux: #2e261e;
    --cta-fond: #f1eee9;
    --cta-texte: #141415;
    --cta-survol: #d6d2cb;
    --pied-fond: #0c0c0d;
    --pied-texte: #ebe8e3;
    --focus: #8ab4ff;
    --erreur: #ff8a80;
    --succes: #86d6a2;
    --ombre-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ombre-2: 0 10px 30px rgba(0, 0, 0, 0.45);
  }
}

/* ---------- 3. Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  /* Place réservée à la barre d'action fixe du mobile */
  padding-bottom: calc(var(--hauteur-barre) + env(safe-area-inset-bottom, 0px));
  font-family: var(--police);
  font-size: var(--t-m);
  line-height: 1.6;
  color: var(--texte);
  background: var(--fond);
  overflow-wrap: break-word;
}

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

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}

a {
  color: inherit;
  text-underline-offset: 0.18em;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* Les ancres (#devis…) ne passent pas sous l'en-tête fixe */
[id] {
  scroll-margin-top: calc(var(--hauteur-entete) + var(--e-4));
}

/* ---------- 4. Utilitaires ---------- */
.conteneur {
  width: 100%;
  max-width: calc(var(--largeur) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.section {
  padding-block: var(--e-section);
}
.section--alt {
  background: var(--fond-alt);
}
.centre {
  text-align: center;
}
.titre-1 {
  font-size: var(--t-3xl);
}
.titre-2 {
  font-size: var(--t-2xl);
}
.titre-3 {
  font-size: var(--t-xl);
}
.surtitre {
  margin-bottom: var(--e-2);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.intro {
  max-width: 62ch;
  margin-top: var(--e-4);
  font-size: var(--t-l);
  color: var(--texte-doux);
}
.centre .intro {
  margin-inline: auto;
}
.texte-doux {
  color: var(--texte-doux);
}
.suite {
  margin-top: var(--e-6);
}
/* Texte réservé aux lecteurs d'écran */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Lien d'évitement : premier élément focalisable de chaque page */
.evitement {
  position: absolute;
  top: -100px;
  left: var(--e-4);
  z-index: 100;
  padding: var(--e-3) var(--e-5);
  border-radius: var(--rayon-s);
  background: var(--cta-fond);
  color: var(--cta-texte);
  font-weight: 700;
}
.evitement:focus {
  top: var(--e-4);
}
/* Information à compléter par le propriétaire du site : volontairement très visible */
.a-completer {
  padding: 0 0.3em;
  border-radius: 4px;
  background: #ffe066;
  color: #1d1e20;
  font-weight: 700;
  outline: 2px dashed #b38600;
}

/* ---------- 5. Boutons ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 48px;
  padding: var(--e-3) var(--e-5);
  border: 1.5px solid var(--texte);
  border-radius: var(--rayon-pilule);
  background: transparent;
  color: var(--texte);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duree) ease, color var(--duree) ease, transform var(--duree) ease;
}
.bouton:hover {
  background: var(--texte);
  color: var(--fond);
}
.bouton--plein {
  border-color: var(--cta-fond);
  background: var(--cta-fond);
  color: var(--cta-texte);
  box-shadow: var(--ombre-1);
}
.bouton--plein:hover {
  border-color: var(--cta-survol);
  background: var(--cta-survol);
  color: var(--cta-texte);
}
/* Sur fond photo sombre (hero, bandeau) : bouton clair quel que soit le mode */
.bouton--clair {
  border-color: #ffffff;
  background: #ffffff;
  color: #141415;
}
.bouton--clair:hover {
  background: #e9e6e1;
  border-color: #e9e6e1;
  color: #141415;
}
.bouton--contour-clair {
  border-color: #ffffff;
  color: #ffffff;
}
.bouton--contour-clair:hover {
  background: #ffffff;
  color: #141415;
}
.bouton[disabled] {
  cursor: progress;
  opacity: 0.7;
}
.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
}
.centre .groupe-boutons {
  justify-content: center;
}

/* ---------- 6. En-tête et menu ---------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--bordure);
  background: color-mix(in srgb, var(--fond) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
}
.entete__barre {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--hauteur-entete);
}
.entete__logo {
  margin-right: auto;
  padding-block: var(--e-2);
}
.entete__logo img {
  width: 116px;
}
/* Le logo est un JPEG sur fond blanc : en mode sombre, on l'inverse et le fond noir obtenu se fond dans l'en-tête */
:root[data-theme="sombre"] .entete__logo img {
  filter: invert(1) hue-rotate(180deg);
  mix-blend-mode: screen;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) .entete__logo img {
    filter: invert(1) hue-rotate(180deg);
    mix-blend-mode: screen;
  }
}
.entete__tel,
.entete__devis {
  display: none;
}
/* Mobile et tablette : le menu (bouton burger) passe visuellement en dernier, à droite */
.nav {
  order: 3;
}
.bascule-theme {
  order: 2;
}
.entete__devis {
  order: 2;
}
.entete__tel {
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.entete__tel:hover {
  text-decoration: underline;
}

/* Boutons icônes (thème, menu) : zone de toucher de 44 px minimum */
.bouton-icone {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-pilule);
  background: var(--surface);
  color: var(--texte);
  cursor: pointer;
}
.bouton-icone:hover {
  border-color: var(--texte);
}
.bouton-icone svg {
  width: 20px;
  height: 20px;
}
/* Icône du thème : lune en mode clair, soleil en mode sombre */
.bascule-theme .icone-soleil {
  display: none;
}
:root[data-theme="sombre"] .bascule-theme .icone-soleil {
  display: block;
}
:root[data-theme="sombre"] .bascule-theme .icone-lune {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) .bascule-theme .icone-soleil {
    display: block;
  }
  :root:not([data-theme="clair"]) .bascule-theme .icone-lune {
    display: none;
  }
}
/* Icône du menu : 3 traits qui deviennent une croix */
.nav__burger span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 2px 0;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--duree) ease, opacity var(--duree) ease;
}
.nav__burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav__burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav__burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Menu mobile : panneau sous l'en-tête */
.nav__liste {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  padding: var(--e-2) var(--gouttiere) var(--e-5);
  border-bottom: 1px solid var(--bordure);
  background: var(--fond);
  box-shadow: var(--ombre-2);
  list-style: none;
}
.nav__liste.est-ouvert {
  display: block;
}
.nav__lien {
  display: flex;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid var(--bordure);
  font-size: var(--t-l);
  text-decoration: none;
}
.nav__lien[aria-current="page"] {
  font-weight: 700;
}
.nav__liste .nav__devis {
  margin-top: var(--e-4);
  width: 100%;
}

/* ---------- 7. Sections communes ---------- */
.entete-section {
  max-width: 760px;
  margin-bottom: var(--e-6);
}
.entete-section.centre {
  margin-inline: auto;
}
.carte {
  overflow: hidden;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  background: var(--surface);
  box-shadow: var(--ombre-1);
}
.grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--e-5);
}
.image-arrondie {
  width: 100%;
  border-radius: var(--rayon-l);
  object-fit: cover;
}

/* ---------- 8. Accueil ---------- */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(82vh, 760px);
  padding-block: var(--e-7);
  color: #ffffff;
  overflow: hidden;
  isolation: isolate;
}
.hero__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Voile dégradé : le texte blanc garde un contraste AA sur toute l'image */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.72) 0%, rgba(10, 10, 10, 0.6) 55%, rgba(10, 10, 10, 0.78) 100%);
}
.hero__contenu {
  max-width: 780px;
}
.hero .surtitre {
  color: #f0d2b0;
}
.hero__titre {
  font-size: var(--t-3xl);
}
.hero__texte {
  max-width: 54ch;
  margin-block: var(--e-4) var(--e-6);
  font-size: var(--t-l);
  color: #f1eee9;
}
.hero__atouts {
  display: grid;
  gap: var(--e-3);
  margin-top: var(--e-7);
  padding: 0;
  list-style: none;
}
.hero__atout {
  padding: var(--e-4) var(--e-5);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--rayon-m);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
}
.hero__atout h2 {
  font-size: var(--t-l);
}
.hero__atout p {
  margin-top: var(--e-1);
  font-size: var(--t-s);
  color: #ebe8e3;
}

.apropos {
  display: grid;
  gap: var(--e-6);
  align-items: center;
}
.apropos__texte p {
  max-width: 54ch;
  margin-top: var(--e-4);
  color: var(--texte-doux);
}
address {
  font-style: normal;
}
.apropos__texte .chiffre {
  color: var(--texte);
}
.chiffre {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  margin-top: var(--e-6);
}
.chiffre__valeur {
  font-size: var(--t-3xl);
  font-weight: 700;
  line-height: 1;
}
.apropos__image {
  aspect-ratio: 4 / 5;
  max-height: 560px;
}

.prestation-cle {
  display: flex;
  flex-direction: column;
}
.prestation-cle img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.prestation-cle__texte {
  padding: var(--e-5);
}
.prestation-cle__texte p {
  margin-top: var(--e-2);
  color: var(--texte-doux);
}

/* Aperçu des réalisations sur l'accueil */
.apercu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e-3);
  padding: 0;
  list-style: none;
}
.apercu a {
  display: block;
  text-decoration: none;
}
.apercu img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--rayon-m);
  object-fit: cover;
  transition: transform 0.3s ease;
}
.apercu a:hover img {
  transform: scale(1.02);
}
.apercu figcaption {
  margin-top: var(--e-2);
  font-size: var(--t-s);
  font-weight: 700;
}

/* Témoignages */
.avis {
  position: relative;
  padding-block: var(--e-section);
  color: #ffffff;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.avis::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--voile);
}
.avis .titre-2 {
  margin-bottom: var(--e-6);
}
.avis__grille {
  display: grid;
  gap: var(--e-5);
}
.avis__carte {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  padding: var(--e-5) var(--e-6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--rayon-l);
  background: rgba(20, 20, 20, 0.55);
  backdrop-filter: blur(6px);
}
.avis__etoiles {
  color: #f0d2b0;
  letter-spacing: 2px;
}
.avis__carte blockquote {
  font-size: var(--t-l);
}
.avis__auteur {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-weight: 700;
}
/* Initiales à la place des photos de stock, qui ne montraient pas les clients */
.avis__initiales {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f0d2b0;
  color: #141415;
  font-size: var(--t-s);
}

/* ---------- 9. Services ---------- */
.prestations {
  display: grid;
  gap: var(--e-5);
  margin-top: var(--e-6);
}
.prestation img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.prestation__texte {
  padding: var(--e-5);
}
.prestation__texte p {
  margin-top: var(--e-2);
  color: var(--texte-doux);
}

.fondateur {
  display: grid;
  gap: var(--e-5);
  align-items: center;
  justify-items: start;
  max-width: 860px;
  margin-inline: auto;
  padding: var(--e-6);
}
.fondateur img {
  width: 160px;
  height: 196px;
  object-fit: cover;
  border-radius: 0 64px 0 64px; /* forme d'origine conservée */
}
.fondateur blockquote {
  font-size: var(--t-l);
  font-weight: 700;
}
.fondateur figcaption {
  margin-top: var(--e-3);
  color: var(--texte-doux);
}

.projets {
  display: grid;
  gap: var(--e-7);
}
.projet__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-3);
}
.projet__images img {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--rayon-m);
  object-fit: cover;
}
.projet__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  margin-top: var(--e-4);
}
.projet__pied p {
  margin-top: var(--e-1);
  color: var(--texte-doux);
}

/* ---------- 10. Portfolio ---------- */
.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-bottom: var(--e-3);
  padding: 0;
  list-style: none;
}
.filtre {
  min-height: 44px;
  padding: var(--e-2) var(--e-4);
  border: 1px solid var(--bordure-champ);
  border-radius: var(--rayon-pilule);
  background: var(--surface);
  color: var(--texte);
  font: inherit;
  font-size: var(--t-s);
  cursor: pointer;
}
.filtre:hover {
  border-color: var(--texte);
}
.filtre[aria-pressed="true"] {
  border-color: var(--cta-fond);
  background: var(--cta-fond);
  color: var(--cta-texte);
  font-weight: 700;
}
.filtres__compteur {
  margin-bottom: var(--e-5);
  font-size: var(--t-s);
  color: var(--texte-doux);
}
.realisations {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--e-6) var(--e-5);
  padding: 0;
  list-style: none;
}
.realisation[hidden] {
  display: none;
}
.realisation__lien {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--rayon-m);
  background: var(--fond-alt);
}
.realisation__lien img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.realisation__lien:hover img {
  transform: scale(1.03);
}
.realisation__nombre {
  position: absolute;
  right: var(--e-3);
  bottom: var(--e-3);
  padding: 2px var(--e-3);
  border-radius: var(--rayon-pilule);
  background: rgba(20, 20, 20, 0.78);
  color: #ffffff;
  font-size: var(--t-xs);
  font-weight: 700;
}
.realisation__texte {
  padding-top: var(--e-3);
}
.realisation__titre {
  font-size: var(--t-l);
}
.realisation__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-3);
  margin-top: var(--e-1);
  font-size: var(--t-s);
  color: var(--texte-doux);
}

/* Visionneuse plein écran (<dialog> natif : Échap et blocage du reste de la page gérés par le navigateur) */
.visionneuse {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--e-4);
  border: 0;
  background: transparent;
  color: #ffffff;
}
.visionneuse::backdrop {
  background: rgba(8, 8, 8, 0.92);
}
.visionneuse[open] {
  display: grid;
  place-items: center;
}
.visionneuse__cadre {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "image image image"
    "prec legende suiv";
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  max-width: 1200px;
}
.visionneuse__image {
  grid-area: image;
  justify-self: center;
  width: auto;
  max-width: 100%;
  max-height: calc(100dvh - 170px);
  border-radius: var(--rayon-s);
  object-fit: contain;
}
.visionneuse__legende {
  grid-area: legende;
  text-align: center;
}
.visionneuse__titre {
  font-size: var(--t-l);
}
.visionneuse__detail {
  font-size: var(--t-s);
  color: #d6d2cb;
}
.visionneuse__bouton {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  cursor: pointer;
}
.visionneuse__bouton:hover {
  background: rgba(255, 255, 255, 0.25);
}
.visionneuse__bouton svg {
  width: 22px;
  height: 22px;
}
.visionneuse__prec {
  grid-area: prec;
}
.visionneuse__suiv {
  grid-area: suiv;
}
.visionneuse__fermer {
  position: fixed;
  top: var(--e-4);
  right: var(--e-4);
}

/* ---------- 11. Contact et formulaire ---------- */
.contact {
  display: grid;
  gap: var(--e-6);
  align-items: start;
}
.formulaire-carte {
  padding: var(--e-5);
}
.formulaire {
  display: grid;
  gap: var(--e-5);
}
.formulaire fieldset {
  display: grid;
  gap: var(--e-4);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.formulaire legend {
  margin-bottom: var(--e-2);
  padding: 0;
  font-size: var(--t-l);
  font-weight: 700;
}
.formulaire__ligne {
  display: grid;
  gap: var(--e-4);
}
.champ label,
.champ__libelle {
  display: block;
  margin-bottom: var(--e-1);
  font-weight: 700;
}
.champ__obligatoire {
  color: var(--erreur);
}
.champ__aide {
  margin: 0 0 var(--e-2);
  font-size: var(--t-s);
  color: var(--texte-doux);
}
.champ input:not([type="checkbox"]):not([type="file"]),
.champ select,
.champ textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--bordure-champ);
  border-radius: var(--rayon-s);
  background: var(--fond);
  color: var(--texte);
  font: inherit;
  font-size: 1rem; /* 16 px : évite le zoom automatique sur iPhone */
}
.champ textarea {
  min-height: 160px;
  resize: vertical;
}
.champ input:hover,
.champ select:hover,
.champ textarea:hover {
  border-color: var(--texte);
}
.champ [aria-invalid="true"] {
  border-color: var(--erreur);
  border-width: 2px;
}
.champ__erreur {
  margin-top: var(--e-1);
  color: var(--erreur);
  font-size: var(--t-s);
  font-weight: 700;
}
.champ__erreur::before {
  content: "⚠ ";
}
/* Zone d'envoi de fichiers */
.champ--fichiers input[type="file"] {
  width: 100%;
  min-height: 48px;
  padding: var(--e-4);
  border: 1.5px dashed var(--bordure-champ);
  border-radius: var(--rayon-m);
  background: var(--fond-alt);
  color: var(--texte);
  font: inherit;
  font-size: var(--t-s);
}
.champ--fichiers input[type="file"]::file-selector-button {
  min-height: 40px;
  margin-right: var(--e-3);
  padding: var(--e-2) var(--e-4);
  border: 1px solid var(--texte);
  border-radius: var(--rayon-pilule);
  background: var(--surface);
  color: var(--texte);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.fichiers__liste {
  margin-top: var(--e-2);
  padding-left: var(--e-5);
  font-size: var(--t-s);
  color: var(--texte-doux);
}
/* Case de consentement : zone cliquable large */
.champ--case {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-3);
  align-items: start;
}
.champ--case input {
  width: 24px;
  height: 24px;
  margin: 2px 0 0;
  accent-color: var(--cta-fond);
}
.champ--case label {
  margin: 0;
  font-weight: 400;
}
.champ--case .champ__erreur {
  grid-column: 2;
}
/* Piège à robots : hors écran plutôt que display:none, que certains robots repèrent */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.formulaire__envoi {
  width: 100%;
}
.formulaire__retour:not(:empty) {
  padding: var(--e-4);
  border-radius: var(--rayon-s);
  border-left: 4px solid currentColor;
  background: var(--fond-alt);
  font-weight: 700;
}
.formulaire__retour.est-succes {
  color: var(--succes);
}
.formulaire__retour.est-erreur {
  color: var(--erreur);
}
.formulaire noscript p {
  padding: var(--e-4);
  border-radius: var(--rayon-s);
  background: var(--accent-doux);
}

.coordonnees {
  display: grid;
  gap: var(--e-5);
}
.coordonnees__bloc {
  padding: var(--e-5);
}
.coordonnees__bloc h2 {
  margin-bottom: var(--e-3);
  font-size: var(--t-xl);
}
.coordonnees__bloc h3 {
  margin: var(--e-4) 0 var(--e-1);
  font-size: var(--t-m);
}
.coordonnees__bloc ul {
  padding-left: 0;
  list-style: none;
}
.coordonnees__bloc li + li {
  margin-top: var(--e-2);
}
.coordonnees__bloc .bouton {
  margin-top: var(--e-4);
}
.horaires {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-1) var(--e-4);
}
.horaires dt {
  font-weight: 700;
}
.horaires dd {
  margin: 0;
}
.pastille {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: var(--e-2);
  border-radius: 50%;
  vertical-align: 0;
}
/* Couleurs des lignes RATP citées */
.pastille--m13 {
  background: #6ec4e8;
}
.pastille--b58 {
  background: #3bb273;
}
.pastille--b59 {
  background: #e8a92c;
}

/* ---------- 12. Mentions légales ---------- */
.texte-legal {
  max-width: 76ch;
}
.texte-legal h2 {
  margin: var(--e-7) 0 var(--e-3);
  padding-top: var(--e-5);
  border-top: 1px solid var(--bordure);
  font-size: var(--t-xl);
}
.texte-legal h3 {
  margin: var(--e-5) 0 var(--e-2);
  font-size: var(--t-l);
}
.texte-legal p,
.texte-legal ul,
.texte-legal dl {
  margin-bottom: var(--e-3);
}
.texte-legal ul {
  padding-left: var(--e-5);
}
.texte-legal dl {
  display: grid;
  gap: var(--e-1) var(--e-4);
}
.texte-legal dt {
  font-weight: 700;
}
.texte-legal dd {
  margin: 0 0 var(--e-2);
}
.sommaire {
  margin-top: var(--e-6);
  padding: var(--e-5);
}
.sommaire ol {
  columns: 1;
  padding-left: var(--e-5);
}
.sommaire li {
  margin-bottom: var(--e-1);
}

/* ---------- 13. Bandeau d'appel, pied de page, barre mobile ---------- */
.appel {
  padding-block: var(--e-section);
  background: var(--fond-alt);
}
.appel__carte {
  display: grid;
  gap: var(--e-5);
  padding: var(--e-6);
  border-radius: var(--rayon-l);
  background: var(--pied-fond);
  color: var(--pied-texte);
}
.appel__carte p {
  margin-top: var(--e-2);
  color: #cfcbc4;
}

.pied {
  padding-block: var(--e-7) var(--e-6);
  background: var(--pied-fond);
  color: var(--pied-texte);
}
.pied a:hover {
  color: #ffffff;
}
.pied__grille {
  display: grid;
  gap: var(--e-6);
}
.pied__nom {
  font-size: var(--t-xl);
}
.pied__texte {
  max-width: 34ch;
  margin-top: var(--e-2);
  color: #cfcbc4;
}
.pied__titre {
  margin-bottom: var(--e-3);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #cfcbc4;
}
.pied__liste {
  padding: 0;
  list-style: none;
}
.pied__liste li + li {
  margin-top: var(--e-2);
}
.pied__liste a {
  display: inline-block;
  padding-block: 0.4rem; /* cible tactile plus haute */
}
.pied__adresse {
  font-style: normal;
}
.pied__insta {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: var(--e-4);
  border: 1px solid #55575c;
  border-radius: 50%;
}
.pied__insta svg {
  width: 22px;
  height: 22px;
}
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-3);
  margin-top: var(--e-7);
  padding-top: var(--e-5);
  border-top: 1px solid #3a3b3f;
  font-size: var(--t-s);
  color: #cfcbc4;
}

/* Barre d'action fixe, mobile uniquement */
.barre-action {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--e-2);
  padding: var(--e-2) var(--gouttiere) calc(var(--e-2) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--bordure);
  background: color-mix(in srgb, var(--fond) 94%, transparent);
  backdrop-filter: blur(10px);
}
.barre-action .bouton {
  min-height: 48px;
  padding-inline: var(--e-3);
}

/* ==========================================================================
   Tablette : 768 px et plus
   ========================================================================== */
@media (min-width: 768px) {
  :root {
    --hauteur-entete: 76px;
  }
  body {
    padding-bottom: 0;
  }
  .barre-action {
    display: none;
  }
  .entete__logo img {
    width: 140px;
  }
  .entete__devis {
    display: inline-flex;
    min-height: 44px;
    padding-block: var(--e-2);
  }
  .nav__liste .nav__devis {
    display: none;
  }
  .hero__atouts {
    grid-template-columns: repeat(3, 1fr);
  }
  .apercu {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--e-4);
  }
  .avis__grille,
  .prestations,
  .formulaire__ligne {
    grid-template-columns: 1fr 1fr;
  }
  .fondateur {
    grid-template-columns: auto 1fr;
    gap: var(--e-6);
  }
  .formulaire-carte {
    padding: var(--e-6);
  }
  .formulaire__envoi {
    width: auto;
    justify-self: start;
    padding-inline: var(--e-7);
  }
  .coordonnees {
    grid-template-columns: 1fr 1fr;
  }
  .appel__carte {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: var(--e-7);
  }
  .pied__grille {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
  .sommaire ol {
    columns: 2;
  }
  .texte-legal dl {
    grid-template-columns: max-content 1fr;
  }
  .texte-legal dd {
    margin: 0;
  }
  .visionneuse {
    padding: var(--e-6);
  }
  .visionneuse__cadre {
    grid-template-areas: "prec image suiv" ". legende .";
  }
}

/* ==========================================================================
   Ordinateur : 1024 px et plus
   ========================================================================== */
@media (min-width: 1024px) {
  .entete__barre {
    gap: var(--e-5);
  }
  .entete__tel {
    display: inline;
    order: 1;
  }
  .nav {
    order: 0;
    margin-right: auto;
  }
  .entete__logo {
    margin-right: var(--e-5);
  }
  .nav__burger {
    display: none;
  }
  .nav__liste {
    display: flex;
    position: static;
    gap: var(--e-5);
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }
  .nav__lien {
    min-height: 44px;
    border-bottom: 2px solid transparent;
    font-size: var(--t-m);
  }
  .nav__lien:hover,
  .nav__lien[aria-current="page"] {
    border-bottom-color: currentColor;
  }
  .apropos {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--e-7);
  }
  .prestations {
    grid-template-columns: repeat(3, 1fr);
  }
  .projets {
    grid-template-columns: 1fr 1fr;
    gap: var(--e-6);
  }
  .contact {
    grid-template-columns: 1.5fr 1fr;
    gap: var(--e-7);
  }
  .coordonnees {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   14. Préférences utilisateur
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* Mode contraste élevé de Windows : on garde des contours visibles */
@media (forced-colors: active) {
  .bouton,
  .filtre,
  .carte {
    border: 1px solid CanvasText;
  }
}