/* ==========================================================================
   Paris Rose Nails — Feuille de style principale
   Mobile-first · CSS pur · Variables CSS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */
:root {
  /* ---- Palette de marque : le rose des murs du salon ----
     Teinte de référence relevée sur les photos du salon (murs roses) :
     un rose poudré, teinte 350°, peu saturé. Toute la palette en découle,
     ce qui garde le site et le lieu dans la même famille de rose. */
  --rose-mur: #F2D5DA;        /* la couleur des murs — fonds, dégradés */
  --rose-mur-voile: #FCF5F6;  /* le même rose très éclairci — fonds de section */
  --rose-mur-soutenu: #E6BEC6;/* le même rose assombri — fins de dégradé, filets */
  --blanc: #FFFFFF;

  /* ---- Rose de la typographie ----
     Teinte relevée au pixel près sur le nuancier fourni par le salon
     (converti en sRGB) : un vieux rose fumé, teinte 11°.
     Sert partout où il y a du texte : boutons, liens, prix, accents.
     Contraste avec le blanc : 4,91:1 → WCAG AA validé. */
  --rose-profond: #92665C;

  /* La même teinte assombrie, pour les cas où le rose ci-dessus ne suffirait
     pas : survol, et surtitres posés sur les dégradés roses.
     Contraste : 7,69:1 sur blanc, 4,59:1 sur le rose le plus soutenu. */
  --rose-profond-fonce: #6F4A41;

  /* Texte */
  --texte: #333333;
  --texte-doux: #5A5A5A;
  --texte-inverse: #FFFFFF;

  /* Lignes & ombres */
  --bordure: #EBDCDA;
  --ombre-douce: 0 2px 12px rgba(111, 74, 65, 0.10);
  --ombre-forte: 0 8px 28px rgba(111, 74, 65, 0.20);

  /* Typographie */
  --font-titre: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-corps: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Rythme */
  --largeur-max: 1140px;
  --gouttiere: 1.25rem;
  --rayon: 14px;
  --rayon-btn: 4px;  /* forme des boutons : carrée, à peine adoucie aux angles.
                        Passez à 999px pour retrouver des boutons en gélule. */
  --transition: 200ms ease;
}

/* --------------------------------------------------------------------------
   2. Reset & bases
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Garde-fou : les tableaux de tarifs, plus larges que l'écran, défilent dans
     leur propre conteneur. Sans ceci, ils élargissent quand même le bloc de
     référence et la barre de réservation fixe déborde à droite sur mobile. */
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font-corps);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--texte);
  background: var(--blanc);
}

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

a { color: var(--rose-profond); }
a:hover { color: var(--rose-profond-fonce); }

h1, h2, h3, h4 {
  font-family: var(--font-titre);
  font-weight: 600;
  line-height: 1.25;
  color: var(--texte);
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2rem, 6vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 3vw, 1.4rem); }

p { margin: 0 0 1rem; }

/* Accessibilité : focus clavier toujours visible */
:focus-visible {
  outline: 3px solid var(--rose-profond);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Les liens d'ancrage (#manucure, #contenu…) doivent s'arrêter SOUS l'en-tête
   collant, sinon le titre visé se retrouve caché derrière lui. */
[id] { scroll-margin-top: 90px; }

/* Lien d'évitement */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--rose-profond);
  color: var(--texte-inverse);
  padding: 0.75rem 1.25rem;
  z-index: 200;
}
.skip-link:focus {
  left: 0;
  color: var(--texte-inverse);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. Utilitaires de mise en page
   -------------------------------------------------------------------------- */
.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section {
  padding-block: clamp(3rem, 8vw, 5.5rem);
}

.section--rose { background: var(--rose-mur-voile); }

.section__intro {
  max-width: 46rem;
  margin: 0 auto clamp(2rem, 5vw, 3rem);
  text-align: center;
}

.surtitre {
  display: block;
  font-family: var(--font-corps);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Version la plus foncée : ce surtitre se pose parfois sur les dégradés roses
     du hero et des bandeaux, où le rose profond passerait sous 4,5:1. */
  color: var(--rose-profond-fonce);
  margin-bottom: 0.75rem;
  font-weight: 700;
}

.centre { text-align: center; }

.grille {
  display: grid;
  gap: 1.5rem;
}

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

/* --------------------------------------------------------------------------
   4. Boutons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  text-align: center;
  padding: 0.85rem 1.75rem;
  border-radius: var(--rayon-btn);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
              transform var(--transition), box-shadow var(--transition);
}

.btn--primaire {
  background: var(--rose-profond);
  color: var(--texte-inverse);
  box-shadow: var(--ombre-douce);
}
/* :focus-visible (et non :focus) — sinon le bouton garde l'état survolé
   après un simple clic à la souris, comme s'il restait enfoncé. */
.btn--primaire:hover,
.btn--primaire:focus-visible {
  background: var(--rose-profond-fonce);
  color: var(--texte-inverse);
  transform: translateY(-2px);
  box-shadow: var(--ombre-forte);
}

.btn--secondaire {
  background: var(--blanc);
  color: var(--rose-profond);
  border-color: var(--rose-profond);
}
.btn--secondaire:hover,
.btn--secondaire:focus-visible {
  background: var(--rose-profond);
  color: var(--texte-inverse);
  transform: translateY(-2px);
}

.btn--large {
  padding: 1.05rem 2.4rem;
  font-size: 1.05rem;
}

.btn--bloc {
  display: block;
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover, .btn:focus { transform: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --------------------------------------------------------------------------
   5. En-tête & navigation
   -------------------------------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--bordure);
  backdrop-filter: blur(8px);
}

.entete__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
}

.logo {
  font-family: var(--font-titre);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--texte);
  text-decoration: none;
  line-height: 1.15;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.logo:hover { color: var(--rose-profond); }
.logo__mot { display: block; }
.logo__mot--rose { color: var(--rose-profond); }

.entete__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Sur petit écran, l'espace est compté : on compacte le bouton de l'en-tête
   (la barre fixe en bas d'écran prend le relais pour la réservation). */
@media (max-width: 599px) {
  .logo { font-size: 1.05rem; }
  .entete__actions .btn {
    padding: 0.6rem 1.1rem;
    font-size: 0.85rem;
  }
}

/* Bouton hamburger */

/* Le bouton est marqué hidden dans le HTML et n'est révélé que par le JS.
   Sans cette règle, `display: inline-flex` ci-dessous écrase l'attribut hidden
   (feuille auteur > feuille du navigateur) : le bouton s'afficherait alors même
   sans JavaScript, sans rien faire au clic. */
.burger[hidden] { display: none; }

.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.burger__barre {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--texte);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.burger[aria-expanded="true"] .burger__barre:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__barre:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__barre:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Navigation — mobile : repliée sous l'en-tête */
.nav {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--blanc);
  border-bottom: 1px solid var(--bordure);
  box-shadow: var(--ombre-douce);
  padding: 0.5rem var(--gouttiere) 1.25rem;
}
.nav.est-ouvert { display: block; }

.nav__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__lien {
  display: block;
  padding: 0.85rem 0.25rem;
  color: var(--texte);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--bordure);
}
.nav__lien:hover,
.nav__lien:focus { color: var(--rose-profond); }
.nav__lien[aria-current="page"] {
  color: var(--rose-profond);
  border-bottom-color: var(--rose-profond);
}

/* Sans JavaScript : la nav reste accessible (voir <noscript> dans les pages) */

@media (min-width: 900px) {
  .burger { display: none; }
  .nav {
    display: block;
    position: static;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .nav__liste {
    display: flex;
    gap: 1.75rem;
    align-items: center;
  }
  .nav__lien {
    padding: 0.35rem 0;
    border-bottom: 2px solid transparent;
  }
  .logo { font-size: 1.35rem; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* Le rose des murs occupe l'essentiel du dégradé, à peine assombri en bas. */
  background: linear-gradient(160deg,
              var(--rose-mur-voile) 0%,
              var(--rose-mur) 55%,
              var(--rose-mur-soutenu) 100%);
  overflow: hidden;
}

.hero__inner {
  display: grid;
  gap: 2rem;
  align-items: center;
  padding-block: clamp(2.5rem, 8vw, 5rem);
}

.hero__titre { margin-bottom: 0.5rem; }

.hero__accroche {
  font-size: clamp(1.05rem, 2.5vw, 1.2rem);
  color: var(--texte);
  max-width: 34rem;
  margin-bottom: 1.75rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.hero__media {
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre-forte);
  aspect-ratio: 4 / 3;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 1.75rem;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  color: var(--texte);
  font-weight: 600;
}
.hero__badges li::before {
  content: "✦";
  color: var(--rose-profond);
  margin-right: 0.45rem;
}

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
  }
}

/* --------------------------------------------------------------------------
   7. Bandeau de page (pages intérieures)
   -------------------------------------------------------------------------- */
.bandeau {
  background: linear-gradient(160deg, var(--rose-mur-voile) 0%, var(--rose-mur) 100%);
  padding-block: clamp(2.5rem, 7vw, 4rem);
  text-align: center;
}
.bandeau p {
  max-width: 42rem;
  margin-inline: auto;
  color: var(--texte-doux);
}

/* Fil d'Ariane */
.ariane {
  font-size: 0.85rem;
  color: var(--texte-doux);
  margin-bottom: 0.75rem;
}
.ariane ol {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
}
.ariane li:not(:last-child)::after {
  content: "›";
  margin-left: 0.4rem;
  color: var(--rose-profond);
}

/* --------------------------------------------------------------------------
   8. Cartes
   -------------------------------------------------------------------------- */
.carte {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}
.carte:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-forte);
}

.carte__media {
  aspect-ratio: 4 / 3;
  background: var(--rose-mur-voile);
  /* Indispensable : sans overflow, une photo en portrait pousse le bloc
     au-delà du ratio et les trois cartes n'ont plus la même hauteur d'image. */
  overflow: hidden;
}
.carte__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carte__corps {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.carte__corps p { color: var(--texte-doux); }

.carte__prix {
  font-family: var(--font-titre);
  font-size: 1.25rem;
  color: var(--rose-profond);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.carte__actions { margin-top: auto; padding-top: 1rem; }

/* --------------------------------------------------------------------------
   9. Tableau de tarifs
   -------------------------------------------------------------------------- */
.bloc-tarifs { margin-bottom: 3rem; }

.bloc-tarifs__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 2px solid var(--rose-mur);
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
}
.bloc-tarifs__entete h3 { margin: 0; }
.bloc-tarifs__entete p { margin: 0; color: var(--texte-doux); font-size: 0.95rem; }

.tableau-wrap { overflow-x: auto; }

.tarifs {
  width: 100%;
  border-collapse: collapse;
  min-width: 30rem;
}
.tarifs caption {
  text-align: left;
  color: var(--texte-doux);
  font-size: 0.9rem;
  padding-bottom: 0.75rem;
}
.tarifs th,
.tarifs td {
  text-align: left;
  padding: 0.9rem 0.75rem;
  border-bottom: 1px solid var(--bordure);
  vertical-align: top;
}
.tarifs thead th {
  font-family: var(--font-corps);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texte-doux);
  border-bottom: 2px solid var(--bordure);
}
.tarifs tbody tr:hover { background: var(--rose-mur-voile); }
.tarifs .col-prix {
  font-weight: 700;
  color: var(--rose-profond);
  white-space: nowrap;
}
.tarifs .col-duree {
  color: var(--texte-doux);
  white-space: nowrap;
}
.tarifs .col-action { text-align: right; white-space: nowrap; }
.tarifs .col-action .btn { padding: 0.5rem 1.1rem; font-size: 0.82rem; }

/* --------------------------------------------------------------------------
   10. Témoignages
   -------------------------------------------------------------------------- */
.avis {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 1.75rem;
  margin: 0;
  height: 100%;
}
.avis__etoiles {
  color: var(--rose-profond);
  letter-spacing: 0.15em;
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
}
.avis blockquote {
  margin: 0 0 1rem;
  font-size: 1.02rem;
  font-style: italic;
  color: var(--texte);
}
.avis figcaption {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--texte-doux);
}

/* --------------------------------------------------------------------------
   11. Blocs texte + image (À propos)
   -------------------------------------------------------------------------- */
.duo {
  display: grid;
  gap: 2rem;
  align-items: center;
}
.duo__media {
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre-douce);
  aspect-ratio: 4 / 3;
}
.duo__media img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) {
  .duo { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  .duo--inverse .duo__media { order: 2; }
}

.valeurs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 700px) {
  .valeurs { grid-template-columns: repeat(3, 1fr); }
}
.valeurs li {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 1.5rem;
}
.valeurs h3 { margin-bottom: 0.4rem; }
.valeurs p { margin: 0; color: var(--texte-doux); }
.valeurs__icone {
  display: block;
  font-size: 1.6rem;
  margin-bottom: 0.6rem;
  color: var(--rose-profond);
}

/* --------------------------------------------------------------------------
   12. Contact
   -------------------------------------------------------------------------- */
.contact-grille {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 900px) {
  .contact-grille { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
}

.infos {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}
.infos li {
  display: flex;
  gap: 0.9rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--bordure);
}
.infos__icone {
  color: var(--rose-profond);
  font-size: 1.1rem;
  flex-shrink: 0;
  line-height: 1.6;
}
.infos strong { display: block; }

.horaires { width: 100%; border-collapse: collapse; }
.horaires caption {
  text-align: left;
  font-family: var(--font-titre);
  font-size: 1.2rem;
  font-weight: 600;
  padding-bottom: 0.75rem;
}
.horaires th,
.horaires td {
  text-align: left;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--bordure);
  font-size: 0.95rem;
}
.horaires th { font-weight: 600; }
.horaires td { text-align: right; color: var(--texte-doux); }

.carte-map {
  border-radius: var(--rayon);
  overflow: hidden;
  border: 1px solid var(--bordure);
  line-height: 0;
}
.carte-map iframe {
  width: 100%;
  height: 340px;
  border: 0;
}

/* Formulaire */
.formulaire {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: clamp(1.25rem, 4vw, 2rem);
}
.champ { margin-bottom: 1.25rem; }
.champ label {
  display: block;
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 0.4rem;
}
.champ .indice {
  display: block;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--texte-doux);
}
.champ input,
.champ textarea,
.champ select {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--texte);
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  background: var(--blanc);
}
.champ input:focus,
.champ textarea:focus,
.champ select:focus {
  border-color: var(--rose-profond);
}
.champ textarea { min-height: 150px; resize: vertical; }

.champ__erreur {
  display: block;
  color: #B3261E;
  font-size: 0.87rem;
  font-weight: 600;
  margin-top: 0.35rem;
}
.champ input[aria-invalid="true"],
.champ textarea[aria-invalid="true"] { border-color: #B3261E; }

.form-message {
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.25rem;
  font-weight: 600;
}
.form-message--succes {
  background: #EAF6EC;
  color: #1B5E20;
  border: 1px solid #B7DFBD;
}
.form-message--erreur {
  background: #FDECEA;
  color: #8C1D18;
  border: 1px solid #F2C3BE;
}
.form-message--erreur a { color: inherit; }

/* Encart de rappel réservation */
.encart-resa {
  background: linear-gradient(160deg, var(--rose-mur-voile) 0%, var(--rose-mur) 100%);
  border-radius: var(--rayon);
  padding: clamp(2rem, 6vw, 3rem);
  text-align: center;
}
.encart-resa h2 { margin-bottom: 0.5rem; }
.encart-resa p {
  max-width: 38rem;
  margin-inline: auto;
  margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   13. Pied de page
   -------------------------------------------------------------------------- */
.pied {
  background: var(--texte);
  color: #E9E4E6;
  padding-block: 3rem 1.5rem;
  margin-top: 0;
}
.pied a { color: var(--rose-mur); }
.pied a:hover { color: var(--blanc); }

.pied__grille {
  display: grid;
  gap: 2rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 700px) {
  .pied__grille { grid-template-columns: 1.4fr 1fr 1fr; }
}

.pied h2, .pied h3 {
  color: var(--blanc);
  font-size: 1.1rem;
  margin-bottom: 0.9rem;
}
.pied p { color: #CFC7CA; }

.pied__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pied__liste li { margin-bottom: 0.55rem; }

.reseaux {
  display: flex;
  gap: 0.75rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.reseaux a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--blanc);
  text-decoration: none;
  transition: background-color var(--transition), border-color var(--transition);
}
.reseaux a:hover,
.reseaux a:focus-visible {
  background: var(--rose-profond);
  border-color: var(--rose-profond);
}
.reseaux svg { width: 20px; height: 20px; fill: currentColor; }

.pied__bas {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: 0.87rem;
  color: #BFB6BA;
}
.pied__bas p { margin: 0; color: inherit; }

/* --------------------------------------------------------------------------
   14. Barre de réservation mobile (collée en bas)
   -------------------------------------------------------------------------- */
.resa-mobile {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-width: 100vw; /* voir le garde-fou sur html, § « Reset & bases » */
  z-index: 90;
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--bordure);
  padding: 0.6rem var(--gouttiere);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
}
body { padding-bottom: 4.5rem; } /* place pour la barre fixe */

@media (min-width: 900px) {
  .resa-mobile { display: none; }
  body { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   14 bis. Pages légales (mentions légales, confidentialité)
   -------------------------------------------------------------------------- */
.texte-legal {
  max-width: 46rem;
}
.texte-legal h2 {
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  margin-top: 2.5rem;
}
.texte-legal h2:first-child { margin-top: 0; }
.texte-legal h3 {
  font-size: 1.1rem;
  margin-top: 1.75rem;
}
.texte-legal ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}
.texte-legal li { margin-bottom: 0.5rem; }

/* Repère visible pour les informations qu'il reste à fournir.
   Retirez la classe `a-completer` une fois le texte remplacé. */
.a-completer {
  background: #FFF4D6;
  border-left: 3px solid #B98900;
  color: #6B4E00;
  padding: 0.15rem 0.5rem;
  font-weight: 700;
}

.texte-legal .maj {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--bordure);
  font-size: 0.9rem;
  color: var(--texte-doux);
}

/* --------------------------------------------------------------------------
   15. Bandeau de consentement aux cookies
   Construit par js/main.js, uniquement si aucun choix n'a encore été fait.
   -------------------------------------------------------------------------- */
.cookies {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 130; /* au-dessus de la barre de réservation (90) et de l'en-tête (100) */
  max-width: 100vw;
  background: var(--blanc);
  border-top: 2px solid var(--rose-profond);
  box-shadow: 0 -4px 20px rgba(111, 74, 65, 0.18);
  padding: 1.25rem var(--gouttiere);
}

.cookies__inner {
  max-width: var(--largeur-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cookies__texte {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--texte);
}
.cookies__texte strong { display: block; margin-bottom: 0.2rem; }

.cookies__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
/* Les deux choix ont la même taille : refuser doit être aussi simple
   qu'accepter (recommandation CNIL). */
.cookies__actions .btn {
  flex: 1 1 auto;
  min-width: 10rem;
  padding: 0.7rem 1.5rem;
  font-size: 0.9rem;
}

@media (min-width: 760px) {
  .cookies__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }
  .cookies__actions { flex: 0 0 auto; }
  .cookies__actions .btn { flex: 0 0 auto; min-width: 8.5rem; }
}

/* Pendant l'affichage du bandeau, on masque la barre de réservation :
   deux barres fixes superposées sur un petit écran seraient illisibles. */
body.cookies-ouvert .resa-mobile { display: none; }

/* --------------------------------------------------------------------------
   16. Impression
   -------------------------------------------------------------------------- */
@media print {
  .entete, .resa-mobile, .pied, .carte-map, .skip-link, .cookies { display: none !important; }
  body { padding-bottom: 0; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}