/* ==============================================================
   CHEF CONSTANT · Feuille de style
   --------------------------------------------------------------
   Concept : une salle de bistrot. Le torchon à carreaux rouges et
   bleus (celui de vos photos), l'ardoise du jour encadrée de bois,
   la terre cuite des tomettes et le vert olive.

   Sommaire
     0. Polices (fichiers)
     1. Couleurs et polices (variables)
     2. Mode sombre
     3. Bases (texte, liens, images)
     4. Éléments réutilisables (conteneur, boutons, surtitres)
     5. En-tête et menu mobile
     6. Accueil
     7. Bande torchon et références
     8. Le chef
     9. La prestation (étapes)
    10. L'ardoise
    11. Galerie et visionneuse
    12. Tarifs et calculateur
    13. Contact et formulaire
    14. Pied de page et bouton WhatsApp
    15. Page mentions légales
   ============================================================== */


/* ---------- 0. POLICES ---------------------------------------
   Les polices sont hébergées avec le site (dossier fonts/) au lieu
   d'être chargées depuis les serveurs de Google : c'est plus rapide
   et conforme au RGPD (aucune donnée de visiteur envoyée à Google).
   font-display: swap affiche le texte tout de suite avec une police
   de secours, puis bascule quand la vraie police est arrivée.
---------------------------------------------------------------- */
@font-face { font-family: "Young Serif"; src: url("../fonts/young-serif-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("../fonts/caveat-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("../fonts/caveat-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }


/* ---------- 1. COULEURS ET POLICES ----------------------------
   Toutes les couleurs du site sont définies ici, une seule fois.
   Pour changer la teinte terracotta partout, il suffit de modifier
   --tomette. C'est tout l'intérêt des "variables" CSS.
---------------------------------------------------------------- */
:root {
  --lin: #F2EADF;            /* fond principal, couleur lin */
  --papier: #FBF7F1;         /* fond des cartes et sections claires */
  --encre: #2B211B;          /* texte principal, brun très foncé */
  --encre-douce: #66574B;    /* texte secondaire */
  --tomette: #A9471F;        /* couleur d'accent : terre cuite */
  --tomette-fonce: #8C3A18;  /* survol des boutons */
  --sur-tomette: #FFF8F1;    /* texte posé sur la terre cuite */
  --olive: #56602F;          /* deuxième couleur : vert olive */
  --sur-olive: #FBF7F1;      /* texte posé sur l'olive */
  --ardoise: #2D322D;        /* l'ardoise du menu */
  --craie: #EEEAE0;          /* écriture à la craie */
  --craie-douce: rgba(238, 234, 224, .72);
  --craie-couleur: #F2B48F;  /* craie de couleur, pour les intitulés */
  --bois: #8B5B37;           /* cadre en bois de l'ardoise */
  --torchon-fond: #FBF8F3;
  --torchon-rouge: #C24A40;
  --torchon-bleu: #3F5C8E;
  --ligne: rgba(43, 33, 27, .14);    /* filets discrets */
  --bordure: rgba(43, 33, 27, .34);  /* bord des champs de formulaire */
  --voile: rgba(20, 16, 13, .92);    /* fond derrière la galerie plein écran */
  --ombre: 0 18px 40px -24px rgba(43, 33, 27, .45);

  --police-titre: "Young Serif", Georgia, "Times New Roman", serif;
  --police-texte: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --police-craie: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  --rayon: 14px;
  --espace-section: clamp(4rem, 9vw, 7.5rem);
}


/* ---------- 2. MODE SOMBRE ------------------------------------
   Si le téléphone ou l'ordinateur du visiteur est réglé en mode
   sombre, on remplace les couleurs par une version "salle le soir".
   On ne redéfinit que les variables : le reste suit tout seul.
---------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lin: #1C1713;
    --papier: #26201B;
    --encre: #F1E8DC;
    --encre-douce: #BCAD9D;
    --tomette: #E2845C;
    --tomette-fonce: #EE9A76;
    --sur-tomette: #1C1713;
    --olive: #AAB57C;
    --sur-olive: #1C1713;
    --ardoise: #262B26;
    --bois: #6E4529;
    --torchon-fond: #2B241F;
    --torchon-rouge: #D9655B;
    --torchon-bleu: #7D97C6;
    --ligne: rgba(241, 232, 220, .14);
    --bordure: rgba(241, 232, 220, .32);
    --ombre: 0 18px 40px -24px rgba(0, 0, 0, .75);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --lin: #1C1713;
  --papier: #26201B;
  --encre: #F1E8DC;
  --encre-douce: #BCAD9D;
  --tomette: #E2845C;
  --tomette-fonce: #EE9A76;
  --sur-tomette: #1C1713;
  --olive: #AAB57C;
  --sur-olive: #1C1713;
  --ardoise: #262B26;
  --bois: #6E4529;
  --torchon-fond: #2B241F;
  --torchon-rouge: #D9655B;
  --torchon-bleu: #7D97C6;
  --ligne: rgba(241, 232, 220, .14);
  --bordure: rgba(241, 232, 220, .32);
  --ombre: 0 18px 40px -24px rgba(0, 0, 0, .75);
  color-scheme: dark;
}


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

html {
  scroll-behavior: smooth;          /* défilement doux quand on clique dans le menu */
  scroll-padding-top: 5.5rem;       /* pour que l'en-tête ne cache pas les titres */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--lin);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* On bloque le défilement de la page quand la galerie plein écran est ouverte */
body:has(.visionneuse[open]) { overflow: hidden; }

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

h1, h2, h3 {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 400;
  line-height: 1.1;
  color: var(--encre);
  text-wrap: balance;
}
h1 { font-size: clamp(2.7rem, 6.2vw, 4.75rem); letter-spacing: -.02em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); letter-spacing: -.015em; max-width: 20ch; }
h3 { font-size: 1.35rem; }
p  { margin: 0; }

a { color: var(--tomette); text-underline-offset: .2em; }

/* Contour visible quand on navigue au clavier (accessibilité) */
:focus-visible { outline: 3px solid var(--tomette); outline-offset: 3px; border-radius: 4px; }

/* Les personnes sensibles aux animations peuvent les couper dans leurs réglages : on respecte ce choix */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ---------- 4. ÉLÉMENTS RÉUTILISABLES ------------------------- */

/* Le conteneur centre le contenu et garde 20 px de marge sur les côtés */
.conteneur { width: min(72rem, 100% - 2.5rem); margin-inline: auto; }

.section { padding-block: var(--espace-section); }

.surtitre {
  margin-bottom: 1rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--olive);
}

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.5rem;
  border: 2px solid var(--tomette);
  border-radius: 999px;
  background: var(--tomette);
  color: var(--sur-tomette);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}
.bouton:hover { background: var(--tomette-fonce); border-color: var(--tomette-fonce); }
.bouton:active { transform: translateY(1px); }
.bouton-contour { background: transparent; color: var(--encre); border-color: var(--encre); }
.bouton-contour:hover { background: var(--encre); border-color: var(--encre); color: var(--lin); }
.bouton-petit { padding: .5rem 1.05rem; font-size: .95rem; }
.bouton-large { width: 100%; }

/* Texte lu par les lecteurs d'écran mais invisible à l'œil */
.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.lien-evitement {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: .6rem 1rem;
  border-radius: 8px;
  background: var(--encre);
  color: var(--lin);
  text-decoration: none;
}
.lien-evitement:focus { top: calc(1rem + env(safe-area-inset-top, 0px)); }


/* ---------- 5. EN-TÊTE ----------------------------------------
   "sticky" : l'en-tête reste collé en haut quand on fait défiler.
---------------------------------------------------------------- */
.entete {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: color-mix(in srgb, var(--lin) 90%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.entete.est-defile { border-bottom-color: var(--ligne); }   /* ajouté par le JavaScript */

.entete-interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.5rem;
}

.logo {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  color: var(--encre);
  text-decoration: none;
}
.logo-petit {
  margin-bottom: -.1rem;
  font-family: var(--police-craie);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--tomette);
}
.logo-nom { font-family: var(--police-titre); font-size: 1.55rem; letter-spacing: -.01em; }

.navigation ul { display: flex; gap: 1.75rem; margin: 0; padding: 0; list-style: none; }
.navigation a {
  padding-block: .25rem;
  color: var(--encre);
  font-size: .98rem;
  font-weight: 500;
  text-decoration: none;
  /* un trait terracotta qui se dessine au survol */
  background: linear-gradient(var(--tomette), var(--tomette)) left bottom / 0 2px no-repeat;
  transition: background-size .25s;
}
.navigation a:hover { background-size: 100% 2px; }

.entete-actions { display: flex; align-items: center; gap: .9rem; }

.choix-langue {
  padding: .3rem .65rem;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  color: var(--encre);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
}
.choix-langue:hover { border-color: var(--encre); }

.bouton-menu { display: none; }

/* Sur mobile et tablette (moins de 900 px de large) */
@media (max-width: 899px) {
  .bouton-menu {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--bordure);
    border-radius: 50%;
    background: transparent;
    color: var(--encre);
    cursor: pointer;
  }
  .bouton-menu-barres,
  .bouton-menu-barres::before,
  .bouton-menu-barres::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .25s, background-color .25s;
  }
  .bouton-menu-barres { position: relative; }
  .bouton-menu-barres::before,
  .bouton-menu-barres::after { content: ""; position: absolute; left: 0; }
  .bouton-menu-barres::before { top: -6px; }
  .bouton-menu-barres::after { top: 6px; }
  /* Quand le menu est ouvert, les 3 barres se transforment en croix */
  .bouton-menu[aria-expanded="true"] .bouton-menu-barres { background: transparent; }
  .bouton-menu[aria-expanded="true"] .bouton-menu-barres::before { transform: translateY(6px) rotate(45deg); }
  .bouton-menu[aria-expanded="true"] .bouton-menu-barres::after { transform: translateY(-6px) rotate(-45deg); }

  .navigation {
    display: none;
    position: absolute;
    inset: 100% 0 auto 0;
    padding: .25rem 1.25rem 1.25rem;
    background: var(--papier);
    border-bottom: 1px solid var(--ligne);
    box-shadow: var(--ombre);
  }
  .navigation.est-ouvert { display: block; }
  .navigation ul { flex-direction: column; gap: 0; }
  .navigation a {
    display: block;
    padding: .9rem 0;
    border-bottom: 1px solid var(--ligne);
    font-size: 1.1rem;
    background: none;
  }
}
@media (max-width: 479px) {
  .entete-actions .bouton-petit { display: none; }  /* trop serré sur petit téléphone */
}


/* ---------- 6. ACCUEIL ---------------------------------------- */
.accueil { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3.5rem, 7vw, 5.5rem); }

.accueil-grille { display: grid; gap: clamp(3rem, 6vw, 4.5rem); align-items: center; }
@media (min-width: 900px) {
  .accueil-grille { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}

.accueil-texte { min-width: 0; }
h1 em { font-style: normal; color: var(--tomette); }

.chapo {
  max-width: 34rem;
  margin-top: 1.5rem;
  color: var(--encre-douce);
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
}

.accueil-boutons { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.accueil-prix { margin-top: 1.5rem; color: var(--encre-douce); font-size: .95rem; }
.accueil-prix strong { color: var(--encre); font-family: var(--police-titre); font-size: 1.15rem; font-weight: 400; }

.accueil-photo { position: relative; justify-self: center; width: min(100%, 460px); margin: 0; }
.accueil-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;          /* recadre la photo sans la déformer */
  object-position: 50% 0%;    /* on garde le haut : le visage */
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  animation: poser 1.4s cubic-bezier(.2, .7, .2, 1) both;
}
/* Petite animation à l'arrivée : la photo "se pose" doucement */
@keyframes poser {
  from { transform: scale(1.03); filter: saturate(.8); }
  to   { transform: none; filter: none; }
}


/* ---------- 7. BANDE TORCHON ET RÉFÉRENCES --------------------
   Le motif torchon est dessiné uniquement en CSS, avec des
   dégradés répétés : pas d'image à charger.
---------------------------------------------------------------- */
.torchon {
  height: 1.6rem;
  background-color: var(--torchon-fond);
  background-image:
    /* lignes verticales rouge puis bleue, répétées tous les 60 px */
    repeating-linear-gradient(90deg,
      transparent 0 26px,
      color-mix(in srgb, var(--torchon-rouge) 80%, transparent) 26px 28px,
      transparent 28px 34px,
      color-mix(in srgb, var(--torchon-bleu) 80%, transparent) 34px 36px,
      transparent 36px 60px),
    /* lignes horizontales : deux bleues et une rouge */
    linear-gradient(180deg,
      transparent 0 5px,
      color-mix(in srgb, var(--torchon-bleu) 80%, transparent) 5px 7px,
      transparent 7px 10px,
      color-mix(in srgb, var(--torchon-bleu) 80%, transparent) 10px 12px,
      transparent 12px 15px,
      color-mix(in srgb, var(--torchon-rouge) 80%, transparent) 15px 17px,
      transparent 17px);
  border-block: 1px solid var(--ligne);
}

.references { padding-block: 2.25rem; }
.references .conteneur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
}
.references-titre { font-family: var(--police-craie); font-size: 1.75rem; line-height: 1; color: var(--tomette); }
.references-liste {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.references-liste li { display: flex; flex-direction: column; line-height: 1.3; }
.references-liste strong { font-family: var(--police-titre); font-size: 1.3rem; font-weight: 400; }
.references-liste span { color: var(--encre-douce); font-size: .88rem; }
@media (max-width: 599px) {
  .references-liste { flex-direction: column; }
}


/* ---------- 8. LE CHEF ---------------------------------------- */
.chef { background: var(--papier); }

.chef-grille { display: grid; gap: clamp(3rem, 6vw, 5rem); align-items: center; }
@media (min-width: 900px) {
  .chef-grille { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}

/* Le portrait est découpé en forme d'arche, comme une fenêtre */
.chef-photo { position: relative; justify-self: center; width: min(100% - 1rem, 400px); margin: 0; }
.chef-photo::before {
  content: "";
  position: absolute;
  inset: -.9rem .9rem .9rem -.9rem;
  border: 2px solid var(--tomette);
  border-radius: 999px 999px var(--rayon) var(--rayon);
}
.chef-photo img {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 999px 999px var(--rayon) var(--rayon);
}

.chef-texte { min-width: 0; }
.chef-texte h2 { margin-bottom: .5rem; }
.chef-texte p { max-width: 36rem; margin-top: 1.1rem; color: var(--encre-douce); }
.chef-texte strong { color: var(--encre); font-weight: 600; }
.chef-texte .signature {
  margin-top: 1rem;
  font-family: var(--police-craie);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--tomette);
}


/* ---------- 9. LA PRESTATION ----------------------------------
   Les numéros 1, 2, 3, 4 sont générés automatiquement par le CSS
   (counter), dans l'ordre de la liste.
---------------------------------------------------------------- */
.etapes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.25rem 2rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}
@media (min-width: 600px) { .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.etape { padding-top: 1.25rem; border-top: 2px solid var(--encre); counter-increment: etape; }
.etape::before {
  content: counter(etape);
  display: block;
  margin-bottom: .75rem;
  font-family: var(--police-titre);
  font-size: 3rem;
  line-height: 1;
  color: var(--tomette);
}
.etape h3 { margin-bottom: .5rem; }
.etape p { color: var(--encre-douce); font-size: 1rem; }


/* ---------- 10. L'ARDOISE ------------------------------------- */
.ardoise-section { background: var(--lin); }
/* La prestation, l'ardoise et la galerie ont le même fond : on évite un double espace entre elles */
.deroule,
.ardoise-section { padding-bottom: 0; }

/* L'ardoise est seule, centrée, comme accrochée au mur de la salle */
.ardoise {
  max-width: 42rem;
  margin-inline: auto;
  padding: clamp(1.75rem, 4.5vw, 3.25rem);
  border: clamp(10px, 1.6vw, 16px) solid var(--bois);   /* le cadre en bois */
  border-radius: 8px;
  background-color: var(--ardoise);
  /* deux halos très légers imitent les traces de craie effacée */
  background-image:
    radial-gradient(ellipse at 20% 15%, rgba(255, 255, 255, .07), transparent 55%),
    radial-gradient(ellipse at 85% 85%, rgba(255, 255, 255, .05), transparent 50%);
  color: var(--craie);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25), inset 0 0 50px rgba(0, 0, 0, .35), var(--ombre);
}
.ardoise-surtitre { color: var(--craie-douce); font-family: var(--police-craie); font-size: 1.5rem; text-align: center; }
.ardoise-titre {
  max-width: none;
  margin-top: .15rem;
  color: var(--craie);
  font-family: var(--police-craie);
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.menu { display: grid; gap: 1.25rem; margin: 2.25rem 0 0; text-align: center; }
.menu-ligne { display: grid; gap: .2rem; }
/* un petit trait de craie entre deux services */
.menu-ligne + .menu-ligne::before {
  content: "";
  justify-self: center;
  width: 3.5rem;
  margin-bottom: 1.1rem;
  border-top: 2px dashed rgba(238, 234, 224, .3);
}
.menu dt {
  margin-bottom: .3rem;
  color: var(--craie-couleur);
  font-family: var(--police-craie);
  font-size: clamp(1.7rem, 3.5vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
}
.menu dd { margin: 0; color: var(--craie); font-size: 1.05rem; line-height: 1.5; text-wrap: balance; }
.ardoise-note { margin-top: 2.25rem; line-height: 1.25; color: var(--craie-douce); font-family: var(--police-craie); font-size: 1.4rem; text-align: center; }


/* ---------- 11. GALERIE --------------------------------------- */
.galerie {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.5rem, 1.2vw, 1rem);
  margin-top: 3rem;
}
@media (min-width: 900px) { .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.galerie-item {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  background: var(--papier);
}
.galerie-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.galerie-item:hover img { transform: scale(1.04); }
.galerie-item-haut img { object-position: 50% 88%; }   /* sur mobile, on montre l'assiette */
@media (min-width: 900px) {
  /* sur grand écran, la photo verticale occupe 2 rangées */
  .galerie-item-haut { grid-row: span 2; aspect-ratio: auto; }
  .galerie-item-haut img { object-position: 50% 50%; }
}

/* La visionneuse plein écran (balise <dialog>) */
.visionneuse {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--craie);
}
.visionneuse[open] { display: grid; place-items: center; }
.visionneuse::backdrop { background: var(--voile); }

.visionneuse-figure {
  display: grid;
  justify-items: center;
  gap: .75rem;
  max-width: 100%;
  margin: 0;
  padding: 4.5rem 1rem;
}
.visionneuse-figure img {
  width: auto;
  max-width: min(92vw, 1400px);
  max-height: 78vh;
  border-radius: 6px;
}
.visionneuse-figure figcaption { font-family: var(--police-craie); font-size: 1.45rem; text-align: center; }

.visionneuse-bouton {
  position: fixed;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid rgba(238, 234, 224, .35);
  border-radius: 50%;
  background: rgba(0, 0, 0, .35);
  color: var(--craie);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}
.visionneuse-bouton:hover { background: rgba(0, 0, 0, .6); }
.visionneuse-fermer { top: calc(1rem + env(safe-area-inset-top, 0px)); right: 1rem; }
.visionneuse-precedent { top: 50%; left: 1rem; transform: translateY(-50%); }
.visionneuse-suivant { top: 50%; right: 1rem; transform: translateY(-50%); }
@media (max-width: 599px) {
  .visionneuse-precedent,
  .visionneuse-suivant { top: auto; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); transform: none; }
}


/* ---------- 12. TARIFS ---------------------------------------- */
.tarifs { background: var(--papier); }

.tarifs-grille { display: grid; gap: clamp(3rem, 6vw, 5rem); align-items: start; }
@media (min-width: 900px) {
  .tarifs-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); }
}
.tarifs-texte { min-width: 0; }

.grille-tarifs {
  width: 100%;
  max-width: 30rem;
  margin-top: 2rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;   /* chiffres alignés */
}
.grille-tarifs th {
  padding: 0 .5rem .75rem;
  border-bottom: 2px solid var(--encre);
  color: var(--olive);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-align: left;
  text-transform: uppercase;
}
.grille-tarifs td {
  padding: 1rem .5rem;
  border-bottom: 1px solid var(--ligne);
  font-size: 1.05rem;
  transition: background-color .25s, color .25s;
}
.grille-tarifs th:last-child,
.grille-tarifs td:last-child { text-align: right; }
.grille-tarifs td:last-child { font-family: var(--police-titre); font-size: 1.25rem; }
.grille-tarifs tbody tr:last-child td:last-child { color: var(--encre-douce); font-family: var(--police-texte); font-size: .98rem; }
/* La ligne qui correspond au calculateur est mise en avant (classe ajoutée par le JavaScript) */
.grille-tarifs tr.est-actif td { background: color-mix(in srgb, var(--tomette) 11%, transparent); color: var(--tomette); }

.tarifs-note { max-width: 30rem; margin-top: 1.25rem; color: var(--encre-douce); font-size: .95rem; }

.carte-forfait {
  overflow: hidden;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  background: var(--lin);
  box-shadow: var(--ombre);
}
.torchon-carte { height: 1.25rem; border-block: 0; }
.carte-forfait-corps { display: grid; gap: 1.5rem; padding: clamp(1.5rem, 4vw, 2.25rem); }

.calculateur { padding-bottom: 1.5rem; border-bottom: 1px solid var(--ligne); text-align: center; }
.calculateur-question { font-weight: 600; }
.compteur { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 1rem; }
.compteur-bouton {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 2px solid var(--encre);
  border-radius: 50%;
  background: transparent;
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.compteur-bouton:hover { background: var(--encre); color: var(--lin); }
.compteur-bouton[aria-disabled="true"] { background: transparent; color: var(--encre); opacity: .3; cursor: not-allowed; }
.compteur-valeur { min-width: 6.5rem; font-variant-numeric: tabular-nums; }
.compteur-valeur output { display: block; font-family: var(--police-titre); font-size: 2rem; line-height: 1.1; }
.compteur-valeur span { color: var(--encre-douce); font-size: .85rem; }

.calculateur-resultat { display: grid; margin-top: 1rem; }
.calculateur-prix {
  color: var(--tomette);
  font-family: var(--police-titre);
  font-size: 3rem;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.calculateur-detail { color: var(--encre-douce); font-size: .9rem; }

.inclus-titre { color: var(--olive); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.inclus { display: grid; gap: .55rem; margin: -.75rem 0 0; padding: 0; list-style: none; }
.inclus li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .6rem; align-items: baseline; font-size: .98rem; }
/* la petite coche, dessinée avec deux bordures tournées */
.inclus li::before {
  content: "";
  width: .85rem;
  height: .45rem;
  border-left: 2px solid var(--olive);
  border-bottom: 2px solid var(--olive);
  transform: rotate(-45deg) translateY(-.2rem);
}


/* ---------- 13. CONTACT --------------------------------------- */
.contact-grille { display: grid; gap: clamp(3rem, 6vw, 5rem); }
@media (min-width: 960px) {
  .contact-grille { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
}
.contact-intro { min-width: 0; }
.contact-intro > p { max-width: 30rem; margin-top: 1.1rem; color: var(--encre-douce); }

.contact-direct { display: grid; gap: .9rem; margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--ligne); }
.contact-direct-titre { font-weight: 600; }
.contact-ligne { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .75rem; }
.contact-etiquette {
  min-width: 5.5rem;
  color: var(--olive);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.contact-ligne a { font-weight: 600; overflow-wrap: anywhere; }
.bouton-copier {
  padding: .2rem .7rem;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  background: var(--papier);
  color: var(--encre);
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
}
.bouton-copier:hover { border-color: var(--encre); }

.formulaire {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem 1.25rem;
  min-width: 0;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  background: var(--papier);
  box-shadow: var(--ombre);
}
@media (min-width: 640px) {
  .formulaire { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .champ-large { grid-column: 1 / -1; }
}

.champ { display: grid; gap: .4rem; min-width: 0; align-content: start; }
.champ label { font-size: .92rem; font-weight: 600; }
.facultatif { color: var(--encre-douce); font-weight: 400; }
.champ input,
.champ select,
.champ textarea {
  width: 100%;
  min-width: 0;
  padding: .75rem .9rem;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  background: var(--lin);
  color: var(--encre);
  font: inherit;
  font-size: 1rem;    /* 16 px minimum : évite le zoom automatique sur iPhone */
  transition: border-color .2s, box-shadow .2s;
}
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--tomette);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tomette) 25%, transparent);
}
.champ textarea { min-height: 7rem; resize: vertical; }
.champ ::placeholder { color: var(--encre-douce); opacity: .8; }
.champ-aide { min-height: 1.3em; color: var(--tomette); font-size: .88rem; font-weight: 500; }

.formulaire-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: .5rem; }
.formulaire-statut { font-weight: 500; }
.formulaire-statut.est-succes { color: var(--olive); }
.formulaire-statut.est-erreur { color: var(--tomette); }


/* ---------- 14. PIED DE PAGE ---------------------------------- */
.pied { background: var(--papier); }
.pied-interieur {
  display: grid;
  gap: 1.5rem;
  padding-block: 2.5rem calc(5.5rem + env(safe-area-inset-bottom, 0px));  /* place pour le bouton WhatsApp */
}
@media (min-width: 800px) {
  .pied-interieur { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .pied-copyright { grid-column: 1 / -1; }
}
.logo-pied { flex-direction: row; align-items: baseline; gap: .35rem; margin-bottom: .5rem; }
.pied p { color: var(--encre-douce); font-size: .95rem; }
.pied .logo-pied { color: var(--encre); }
.pied-liens { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.pied-liens a { color: var(--encre); font-weight: 500; overflow-wrap: anywhere; }
.pied-copyright { padding-top: 1.25rem; border-top: 1px solid var(--ligne); font-size: .85rem; }

/* Bouton WhatsApp flottant en bas à droite */
.whatsapp-flottant {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.15rem .75rem .9rem;
  border-radius: 999px;
  background: var(--olive);
  color: var(--sur-olive);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55);
  transition: transform .25s, opacity .25s;
}
.whatsapp-flottant:hover { transform: translateY(-2px); }
/* Masqué tant qu'on est tout en haut (le bouton est déjà dans l'accueil) */
.whatsapp-flottant.est-masque { opacity: 0; transform: translateY(1rem); pointer-events: none; }
@media (max-width: 479px) {
  .whatsapp-flottant { padding: .85rem; }
  .whatsapp-flottant span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}


/* ---------- 15. PAGE MENTIONS LÉGALES -------------------------
   Une page de lecture : une seule colonne de texte, des fiches
   "étiquette : valeur" pour l'éditeur et l'hébergeur.
---------------------------------------------------------------- */
.page-legale { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--espace-section); }
.page-legale h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); max-width: 20ch; }

.bloc-legal { max-width: 46rem; margin-top: 2.75rem; padding-top: 2rem; border-top: 1px solid var(--ligne); }
.bloc-legal h2 { max-width: none; margin-bottom: 1.1rem; font-size: clamp(1.5rem, 3vw, 1.9rem); }
.bloc-legal p,
.bloc-legal li { color: var(--encre-douce); }
.bloc-legal p + p { margin-top: .75rem; }
.bloc-legal strong { color: var(--encre); font-weight: 600; }
.bloc-legal ul { display: grid; gap: .5rem; margin: 1rem 0 0; padding-left: 1.2rem; }
.bloc-legal a { overflow-wrap: anywhere; }

.fiche-legale {
  display: grid;
  grid-template-columns: 13.5rem minmax(0, 1fr);   /* même largeur d'étiquettes pour l'éditeur et l'hébergeur */
  gap: .55rem 1.75rem;
  margin: 0;
}
.fiche-legale dt { color: var(--encre); font-weight: 600; }
.fiche-legale dd { margin: 0; color: var(--encre-douce); overflow-wrap: anywhere; }
@media (max-width: 559px) {
  .fiche-legale { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .fiche-legale dd { margin-bottom: .7rem; }
}

.mise-a-jour { margin-top: 2.75rem; color: var(--encre-douce); font-size: .9rem; }
.pied-legal { padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px)); }   /* pas de bouton WhatsApp ici */

/* Petite note de confidentialité sous le bouton du formulaire */
.formulaire-confidentialite { color: var(--encre-douce); font-size: .85rem; }