/* =========================================================================
   BB nails — feuille de styles unique
   Ordre du fichier : variables > reset > typographie > composants > pages >
   media queries. Ne pas intercaler de section ailleurs.
   ========================================================================= */


/* =========================================================================
   1. VARIABLES
   Seul endroit du fichier où une couleur est écrite en dur.
   ========================================================================= */

:root {
  /* --- Palette (charte imposée, reprise des visuels Instagram) --- */
  --creme:            #FBF6EF; /* fond principal */
  --ivoire:           #F3E9DC; /* fond des blocs, alternance de sections */
  --beige-rose:       #E4D3C0; /* bordures douces, séparateurs */
  --dore:             #C3A063; /* filets, encadrés, accents décoratifs */
  --chocolat:         #4A2C1E; /* titres, bandeaux, boutons pleins */
  --brun-doux:        #7A5A45; /* texte courant secondaire */
  --texte:            #35211A; /* texte courant */

  /* --- Variantes d'interaction (jamais de grand aplat doré) --- */
  --chocolat-survol:  #3A2216; /* survol des boutons pleins */
  --dore-survol:      #A98748; /* survol des filets dorés */
  --creme-survol:     #F5ECDF; /* survol des surfaces claires */
  --erreur:           #9B2C1E; /* messages d'erreur de formulaire */

  /* --- Fond marbré (voir assets/img/fond-marbre.svg) ---
     --voile-marbre est le réglage d'intensité : c'est un voile crème posé
     par-dessus la texture. Plus son opacité est haute, plus le marbrage est
     discret. 1 = texture invisible, 0 = texture à pleine force.
     Ne pas descendre sous 0.55 : au-delà, le texte secondaire posé sur une
     veine dorée descend sous le contraste minimum AA de 4,5:1. */
  --voile-marbre:     rgba(251, 246, 239, 0.6);
  --fond-marbre:      url("../assets/img/fond-marbre.svg");

  /* --- Voiles et ombres (toujours chaudes, jamais du gris neutre) --- */
  --voile-lightbox:   rgba(74, 44, 30, 0.92);
  --filet-sur-chocolat: rgba(195, 160, 99, 0.45); /* filet doré sur fond chocolat */
  --ombre-douce:      0 8px 24px rgba(74, 44, 30, 0.08);
  --ombre-portee:     0 12px 32px rgba(74, 44, 30, 0.12);

  /* --- Familles typographiques --- */
  --police-titre:     "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --police-accent:    "Parisienne", "Brush Script MT", cursive;
  --police-corps:     "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;

  /* --- Échelle typographique (mobile d'abord, via clamp) --- */
  --pas-h1:           clamp(2.5rem, 9vw, 4.5rem);
  --pas-h2:           clamp(1.75rem, 5vw, 2.5rem);
  --pas-h3:           clamp(1.15rem, 2.5vw, 1.375rem);
  --pas-h4:           1rem;
  --pas-surtitre:     clamp(1.5rem, 5vw, 2rem);
  --pas-libelle:      0.75rem;
  --pas-corps:        1rem;
  --pas-petit:        0.875rem;
  --pas-prix:         clamp(1.5rem, 4vw, 2rem);

  /* --- Interlignes et interlettrages --- */
  --interligne-titre: 1.15;
  --interligne-corps: 1.65;
  --ecart-libelle:    0.18em;

  /* --- Espacements --- */
  --esp-1:            0.25rem;
  --esp-2:            0.5rem;
  --esp-3:            0.75rem;
  --esp-4:            1rem;
  --esp-5:            1.5rem;
  --esp-6:            2rem;
  --esp-7:            3rem;
  --esp-8:            4rem;
  --esp-section:      clamp(3rem, 8vw, 5.5rem); /* rythme vertical des sections */

  /* --- Rayons (coins arrondis doux : 12 à 20 px) --- */
  --rayon-s:          12px;
  --rayon-m:          16px;
  --rayon-l:          20px;
  --rayon-pastille:   999px;

  /* --- Mise en page --- */
  --largeur-contenu:  1140px;
  --gouttiere:        clamp(1rem, 5vw, 2rem);
  --mesure:           68ch; /* longueur de ligne du texte courant : 65-75 car. */

  /* --- Zones tactiles et focus --- */
  --taille-tactile:   44px;
  --epaisseur-focus:  3px;

  /* --- Transitions (jamais d'animation non déclenchée par l'utilisateur) --- */
  --transition:       160ms ease-out;
}


/* =========================================================================
   2. RESET
   ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--esp-8) + var(--esp-4)); /* les ancres ne passent pas sous l'en-tête */
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote,
ul, ol, dl, dd {
  margin: 0;
}

ul, ol {
  padding: 0;
}

/* Les listes servant de structure perdent leurs puces ; les listes de contenu
   les gardent via la classe .liste-contenu (section typographie). */
ul[class],
ol[class] {
  list-style: none;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* Lien d'évitement : visible seulement au focus clavier. */
.lien-evitement {
  position: absolute;
  left: var(--esp-4);
  top: var(--esp-4);
  z-index: 100;
  padding: var(--esp-3) var(--esp-4);
  background-color: var(--chocolat);
  color: var(--creme);
  border-radius: var(--rayon-s);
  transform: translateY(-200%);
  transition: transform var(--transition);
}

.lien-evitement:focus-visible {
  transform: translateY(0);
}

/* Réservé au lecteur d'écran. */
.lecteur-ecran-seulement {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* =========================================================================
   3. TYPOGRAPHIE
   ========================================================================= */

body {
  font-family: var(--police-corps);
  font-size: var(--pas-corps);
  font-weight: 400;
  line-height: var(--interligne-corps);
  color: var(--texte);

  /* Fond marbré, comme sur les affiches Instagram. Deux couches : la texture
     en tuile, et par-dessus un voile crème qui règle son intensité. La
     couleur de fond reste la référence : si le SVG ne se charge pas, la page
     reste simplement crème. */
  background-color: var(--creme);
  background-image:
    linear-gradient(var(--voile-marbre), var(--voile-marbre)),
    var(--fond-marbre);
  background-repeat: repeat;
  background-size: auto, 900px 900px;
  background-position: center top;
}

/* --- Titres : grand serif, jamais tout en majuscules --- */
h1, h2, h3, h4 {
  font-family: var(--police-titre);
  font-weight: 600;
  line-height: var(--interligne-titre);
  color: var(--chocolat);
  text-wrap: balance;
}

h1 {
  font-size: var(--pas-h1);
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--pas-h2);
}

h3 {
  font-size: var(--pas-h3);
}

h4 {
  font-size: var(--pas-h4);
}

/* --- Accent manuscrit : surtitres courts uniquement (4-5 mots maximum) --- */
.surtitre {
  display: block;
  font-family: var(--police-accent);
  font-size: var(--pas-surtitre);
  font-weight: 400;
  line-height: 1.3;
  color: var(--brun-doux);
}

/* --- Petit libellé de bandeau, en capitales (ex. « PRESTATIONS ») --- */
.libelle-bandeau {
  display: block;
  font-family: var(--police-corps);
  font-size: var(--pas-libelle);
  font-weight: 500;
  letter-spacing: var(--ecart-libelle);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--brun-doux);
}

/* --- Texte courant ---
   La mesure limite la longueur de ligne à 68 caractères. Sans marge
   automatique, la colonne se collerait au bord gauche de son conteneur et
   paraîtrait décalée sous un titre centré : c'est margin-inline qui la
   recentre dans la page. Les lignes, elles, restent au fer à gauche. */
p {
  max-width: var(--mesure);
  margin-inline: auto;
}

.texte-secondaire {
  color: var(--brun-doux);
}

.texte-petit {
  font-size: var(--pas-petit);
}

.texte-centre {
  text-align: center;
}

/* --- Texte justifié ---
   Le navigateur justifie en étirant uniquement les espaces entre les mots :
   il n'existe pas, en CSS, d'équivalent au réglage fin de l'interlettrage
   que fait un traitement de texte. Le seul levier réel sur les coupures est
   donc le seuil de césure.

   Sans césure du tout, une colonne étroite se creuse de « rivières »
   blanches. Avec la césure par défaut, les mots sont coupés trop souvent.
   Les trois limites ci-dessous tiennent le milieu : on ne coupe qu'un mot
   d'au moins 10 lettres, et jamais à moins de 4 lettres du début ou de la
   fin. En français courant, cela ne laisse à la césure que les mots longs
   — « poly-mérisation », « sensi-bilisation » — c'est-à-dire précisément
   ceux dont le refus de couper creuserait le plus la ligne.

   La justification n'est appliquée qu'à partir de 480 px (voir la section
   media queries) : en dessous, les colonnes sont trop étroites et le texte
   justifié y devient moins lisible, pas plus beau. */
.texte-justifie p,
.texte-justifie li {
  -webkit-hyphens: auto;
  hyphens: auto;

  /* Safari ancien ne connaît que les deux propriétés préfixées. */
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;
  hyphenate-limit-chars: 10 4 4;

  /* Améliore la répartition des mots sur les dernières lignes. Ignoré par
     les navigateurs qui ne le connaissent pas, sans conséquence. */
  text-wrap: pretty;
}

/* Un paragraphe centré reste centré dans sa colonne. */
.texte-centre p,
p.texte-centre {
  margin-inline: auto;
}

/* --- Prix : serif, comme sur l'affiche tarifs --- */
.prix {
  font-family: var(--police-titre);
  font-size: var(--pas-prix);
  font-weight: 600;
  line-height: 1.1;
  color: var(--chocolat);
}

/* --- Listes de contenu (puces conservées) --- */
.liste-contenu {
  max-width: var(--mesure);
  margin-inline: auto; /* même logique que pour les paragraphes */
  padding-left: var(--esp-5);
  list-style: disc;
}

.liste-contenu > li + li {
  margin-top: var(--esp-2);
}

.liste-contenu li::marker {
  color: var(--dore);
}

/* --- Liens --- */
a {
  color: var(--chocolat);
  text-decoration-color: var(--dore);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--transition), text-decoration-color var(--transition);
}

a:hover {
  color: var(--brun-doux);
  text-decoration-color: var(--dore-survol);
}

/* --- Focus clavier : contour doré épais, toujours visible ---
   Le doré seul n'atteint que 2,3:1 sur le crème, sous le minimum de 3:1 exigé
   pour un indicateur non textuel (WCAG 1.4.11). On conserve donc le contour
   doré de la charte, mais on le borde d'un liseré chocolat de 1 px vers
   l'extérieur : l'indicateur reste doré à l'œil et devient franchement
   détectable sur fond clair. */
:focus-visible {
  outline: var(--epaisseur-focus) solid var(--dore);
  outline-offset: 0;
  box-shadow: 0 0 0 calc(var(--epaisseur-focus) + 1px) var(--chocolat);
  border-radius: var(--rayon-s);
}

/* Sur fond chocolat, le liseré chocolat extérieur ne sert plus à rien et le
   doré passe au crème, plus contrasté sur ce fond. */
.sur-chocolat :focus-visible,
.bouton--plein:focus-visible {
  outline-color: var(--creme);
  box-shadow: none;
}

strong {
  font-weight: 500;
  color: var(--chocolat);
}

abbr[title] {
  text-decoration-color: var(--dore);
}


/* =========================================================================
   4. COMPOSANTS
   (complétés à l'étape suivante : en-tête, pied de page, cartes, galerie...)
   ========================================================================= */

/* --- Conteneur centré, largeur de contenu maximale ~1140 px --- */
.conteneur {
  width: 100%;
  max-width: var(--largeur-contenu);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* --- Sections : rythme vertical unique, alternance crème / ivoire --- */
.section {
  padding-block: var(--esp-section);
}

.section--ivoire {
  background-color: var(--ivoire);
}

/* --- Section qui prolonge la précédente ---
   Deux sections qui se suivent additionnent leurs marges verticales, ce qui
   creuse un vide énorme. Cette variante supprime la marge haute de la
   section, réduit la marge basse de celle du dessus, et annule la marge du
   séparateur quand il ouvre le bloc : le tout remonte contre le contenu
   précédent.
   Le sélecteur :has() n'est pas compris par les navigateurs très anciens —
   ils afficheront simplement l'espacement d'origine, plus large. */
.section--suite {
  padding-top: 0;
}

.section:has(+ .section--suite) {
  padding-bottom: var(--esp-6);
}

.section--suite .separateur:first-child {
  margin-top: 0;
}

/* --- Boutons : plein chocolat (principal) ou contour doré (secondaire) --- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--taille-tactile);
  padding: var(--esp-3) var(--esp-5);
  border-radius: var(--rayon-pastille);
  font-family: var(--police-corps);
  font-size: var(--pas-petit);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transition), border-color var(--transition),
    color var(--transition);
}

.bouton--plein {
  background-color: var(--chocolat);
  border: 1px solid var(--chocolat);
  color: var(--creme);
}

.bouton--plein:hover {
  background-color: var(--chocolat-survol);
  border-color: var(--chocolat-survol);
  color: var(--creme);
}

.bouton--contour {
  background-color: transparent;
  border: 1px solid var(--dore);
  color: var(--chocolat);
}

.bouton--contour:hover {
  background-color: var(--creme-survol);
  border-color: var(--dore-survol);
  color: var(--chocolat);
}

/* --- Séparateur décoratif : filet doré fin, losange au centre --- */
.separateur {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
  margin-block: var(--esp-6);
  color: var(--dore);
}

.separateur::before,
.separateur::after {
  content: "";
  flex: 1 1 auto;
  max-width: 7rem;
  height: 1px;
  background-color: currentColor;
}

.separateur svg {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  fill: currentColor;
}

/* -------------------------------------------------------------------------
   En-tête
   Mobile : logo à gauche, bouton burger à droite, menu déroulant sous la
   barre. À partir de 768 px, la navigation devient une barre horizontale
   (voir la section media queries).
   ------------------------------------------------------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--creme);
  border-bottom: 1px solid var(--beige-rose);
}

.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  min-height: 60px;
  padding-block: var(--esp-2);
}

/* --- Logo ---
   Le fichier utilisé, assets/img/logo-bb-nails.png, a un fond transparent :
   il se pose donc directement sur le crème, sans cadre ni recadrage. Il est
   carré (150 x 150), sa marge intérieure fait partie du dessin. */
.entete__logo {
  flex: 0 0 auto;
  display: block;
  width: 48px;
  text-decoration: none;
  transition: opacity var(--transition);
}

.entete__logo img {
  width: 100%;
}

.entete__logo:hover {
  opacity: 0.75;
}

/* --- Bouton burger --- */
.burger {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  min-width: var(--taille-tactile);
  min-height: var(--taille-tactile);
  padding-inline: var(--esp-2);
  border-radius: var(--rayon-s);
  font-size: var(--pas-libelle);
  font-weight: 500;
  letter-spacing: var(--ecart-libelle);
  text-transform: uppercase;
  color: var(--chocolat);
}

.burger__barres {
  position: relative;
  display: block;
  width: 22px;
  height: 1.5px;
  background-color: currentColor;
  transition: background-color var(--transition);
}

.burger__barres::before,
.burger__barres::after {
  content: "";
  position: absolute;
  left: 0;
  display: block;
  width: 22px;
  height: 1.5px;
  background-color: currentColor;
  transition: transform var(--transition);
}

.burger__barres::before {
  top: -6px;
}

.burger__barres::after {
  top: 6px;
}

/* État ouvert : les trois barres deviennent une croix. */
.burger[aria-expanded="true"] .burger__barres {
  background-color: transparent;
}

.burger[aria-expanded="true"] .burger__barres::before {
  transform: translateY(6px) rotate(45deg);
}

.burger[aria-expanded="true"] .burger__barres::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* --- Navigation principale (panneau déroulant sur mobile) --- */
.nav-principale {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--creme);
  border-bottom: 1px solid var(--beige-rose);
  box-shadow: var(--ombre-douce);
  opacity: 0;
  visibility: hidden; /* retire aussi les liens de l'ordre de tabulation */
  transform: translateY(-8px);
  transition: opacity var(--transition), transform var(--transition),
    visibility var(--transition);
}

.nav-principale--ouverte {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-principale__liste {
  width: 100%;
  max-width: var(--largeur-contenu);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.nav-principale__liste a {
  display: flex;
  align-items: center;
  min-height: var(--taille-tactile);
  padding-block: var(--esp-3);
  font-size: var(--pas-petit);
  text-decoration: none;
}

.nav-principale__liste li + li a {
  border-top: 1px solid var(--beige-rose);
}

/* Page courante : filet doré à gauche sur mobile. */
.nav-principale__liste a[aria-current="page"] {
  padding-left: var(--esp-3);
  border-left: 2px solid var(--dore);
  font-weight: 500;
}

/* -------------------------------------------------------------------------
   Pied de page
   ------------------------------------------------------------------------- */

.pied {
  background-color: var(--chocolat);
  color: var(--ivoire);
  /* La réserve du bas laisse la place au bouton d'appel flottant. */
  padding-block: var(--esp-7) calc(var(--esp-5) + 4rem);
}

.pied a {
  color: var(--ivoire);
  text-decoration-color: var(--filet-sur-chocolat);
}

.pied a:hover {
  color: var(--creme);
  text-decoration-color: var(--dore);
}

.pied .libelle-bandeau {
  color: var(--beige-rose);
}

/* Le bouton à contour doré est posé sur le fond chocolat : son texte passe
   en crème, sinon il serait illisible. */
.pied .bouton--contour {
  border-color: var(--filet-sur-chocolat);
  color: var(--creme);
}

.pied .bouton--contour:hover {
  background-color: transparent;
  border-color: var(--dore);
  color: var(--creme);
}

.pied__interieur {
  display: grid;
  gap: var(--esp-6);
}

.pied__logo {
  font-family: var(--police-titre);
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1;
  color: var(--creme);
}

.pied__bloc > * + * {
  margin-top: var(--esp-3);
}

.pied__reseaux {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
}

.pied__reseaux a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--taille-tactile);
  height: var(--taille-tactile);
  border: 1px solid var(--filet-sur-chocolat);
  border-radius: var(--rayon-pastille);
  color: var(--ivoire);
  transition: border-color var(--transition), color var(--transition);
}

.pied__reseaux a:hover {
  border-color: var(--dore);
  color: var(--creme);
}

.pied__reseaux svg {
  width: 20px;
  height: 20px;
}

/* Barre légale : c'est désormais une vraie navigation, écrite en dur dans
   chaque page, avec quatre liens obligatoires. Elle passe à la ligne
   proprement sur mobile plutôt que de déborder. */
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2) var(--esp-4);
  margin-top: var(--esp-6);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--filet-sur-chocolat);
  font-size: var(--pas-petit);
  color: var(--beige-rose);
  text-align: center;
}

/* Cible tactile confortable sur les liens légaux, sans écarter les lignes. */
.pied__bas a {
  display: inline-block;
  padding-block: var(--esp-1);
}

/* -------------------------------------------------------------------------
   Bouton d'appel flottant (petits écrans uniquement)
   ------------------------------------------------------------------------- */

.bouton-appel {
  position: fixed;
  right: var(--esp-4);
  bottom: var(--esp-4);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background-color: var(--chocolat);
  border: 1px solid var(--dore);
  border-radius: var(--rayon-pastille);
  color: var(--creme);
  box-shadow: var(--ombre-portee);
  transition: background-color var(--transition);
}

.bouton-appel:hover {
  background-color: var(--chocolat-survol);
  color: var(--creme);
}

/* Le focus remplacerait l'ombre portée du bouton : on la conserve. */
.bouton-appel:focus-visible {
  box-shadow: 0 0 0 calc(var(--epaisseur-focus) + 1px) var(--chocolat),
    var(--ombre-portee);
}

.bouton-appel svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* -------------------------------------------------------------------------
   En-tête de section (surtitre + titre + chapô)
   ------------------------------------------------------------------------- */

/* Tous les en-têtes de section sont centrés, sur toutes les pages : c'est ce
   qui évite qu'un titre paraisse décalé par rapport au suivant. */
.entete-section {
  margin-bottom: var(--esp-6);
  text-align: center;
}

.entete-section > * + * {
  margin-top: var(--esp-2);
}

/* -------------------------------------------------------------------------
   Rangée de boutons
   ------------------------------------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
}

.actions--centre {
  justify-content: center;
}

/* Espace avant un bloc qui suit une grille ou un paragraphe. */
.espace-avant {
  margin-top: var(--esp-6);
}

/* -------------------------------------------------------------------------
   Rythme vertical interne d'un bloc
   Le reset supprime toutes les marges : cette classe, et elle seule, les
   réintroduit à l'intérieur d'un bloc. On évite ainsi que des sélecteurs de
   section et de composant se disputent les marges verticales.
   ------------------------------------------------------------------------- */

.flux > * + * {
  margin-top: var(--esp-4);
}

/* Le séparateur décoratif garde sa respiration propre, plus large. */
.flux > .separateur {
  margin-top: var(--esp-6);
}

/* Même principe, avec une respiration plus large : pour des blocs
   d'information qui se suivent et doivent rester bien distincts. */
.flux-large > * + * {
  margin-top: var(--esp-6);
}

/* -------------------------------------------------------------------------
   Grilles
   Mobile d'abord : une colonne pour les cartes, deux pour les médaillons.
   Les colonnes supplémentaires sont dans la section media queries.
   ------------------------------------------------------------------------- */

.grille {
  display: grid;
  gap: var(--esp-5);
}

.grille--cartes {
  grid-template-columns: 1fr;
}

.grille--medaillons {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-4);
}

/* Trois colonnes à partir de 768 px seulement (voir media queries) : en
   dessous, ces cartes portent trop de texte pour tenir à deux. */
.grille--trois {
  grid-template-columns: 1fr;
}

/* -------------------------------------------------------------------------
   Cartes
   Le fond de la carte est ivoire sur fond crème, et crème sur fond ivoire :
   le contraste reste visible dans les deux cas. Cette règle de section doit
   rester juste après la règle de composant pour éviter toute surprise de
   spécificité.
   ------------------------------------------------------------------------- */

.carte {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-5);
  background-color: var(--ivoire);
  border: 1px solid var(--beige-rose);
  border-radius: var(--rayon-m);
  box-shadow: var(--ombre-douce);
}

.section--ivoire .carte {
  background-color: var(--creme);
}

.carte p {
  max-width: none;
}

.carte__lien {
  margin-top: auto;
  font-size: var(--pas-petit);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--dore);
  align-self: flex-start;
}

/* --- Carte de prestation : les deux prix l'un sous l'autre --- */
.carte-prestation__prix {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--esp-2) var(--esp-3);
}

.carte-prestation__habituel {
  font-size: var(--pas-petit);
  color: var(--brun-doux);
  text-decoration: line-through;
  text-decoration-color: var(--dore);
}

/* -------------------------------------------------------------------------
   Médaillon circulaire (aperçu galerie)
   ------------------------------------------------------------------------- */

.medaillon {
  display: block;
  overflow: hidden;
  border: 1px solid var(--beige-rose);
  border-radius: var(--rayon-pastille);
  transition: border-color var(--transition);
}

.medaillon img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.medaillon:hover,
.medaillon:focus-visible {
  border-color: var(--dore);
}

/* -------------------------------------------------------------------------
   Médaillons de garantie (« sans TPO », « sans HEMA »)
   Même vocabulaire que les médaillons des affiches : pastille circulaire
   cerclée d'un filet doré fin. Le pictogramme est en chocolat et non en
   doré — le doré sur crème ne fait que 2,3:1, et un pictogramme de 20 px y
   deviendrait fantomatique. Le cercle, lui, reste un liseré doré.
   ------------------------------------------------------------------------- */

.garanties {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Écart resserré sur mobile : c'est ce qui permet aux trois médaillons de
     tenir sur une seule ligne dès 320 px. Il s'élargit à partir de 480 px. */
  gap: var(--esp-2);
}

.garantie {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-1);
  /* Diamètre fluide : 72 px sur le plus petit écran, 84 px dès qu'il y a la
     place. La largeur et la hauteur suivent la même valeur, donc le cercle
     reste un cercle.
     Le maximum est plafonné à 84 et non 92 à cause du cas le plus serré :
     à 768 px pile, le hero passe sur deux colonnes et la colonne de texte
     ne fait plus que 294 px. Trois médaillons de 92 px y passeraient à la
     ligne. */
  width: clamp(72px, 22vw, 84px);
  height: clamp(72px, 22vw, 84px);
  padding: var(--esp-2);
  border: 1px solid var(--dore);
  border-radius: var(--rayon-pastille);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transition), border-color var(--transition);
}

.garantie:hover {
  background-color: var(--creme-survol);
  border-color: var(--dore-survol);
}

.garantie__icone {
  display: block;
  width: 20px;
  height: 20px;
  color: var(--chocolat);
}

.garantie__icone svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Petite mention du haut : « SANS » pour le TPO et le HEMA, « 100 % » pour
   le vegan. Volontairement générique, elle n'est pas réservée à « sans ». */
.garantie__mention {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--brun-doux);
}

.garantie__nom {
  display: block;
  font-family: var(--police-titre);
  /* Suit le diamètre du médaillon : « HEMA » doit tenir dans le cercle même
     à 72 px de large. */
  font-size: clamp(1rem, 4.5vw, 1.25rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--chocolat);
}

/* -------------------------------------------------------------------------
   Image en arche (coins hauts arrondis en demi-cercle, liseré doré)
   ------------------------------------------------------------------------- */

.arche {
  width: 100%;
  border: 1px solid var(--dore);
  border-radius: 999px 999px var(--rayon-l) var(--rayon-l);
  box-shadow: var(--ombre-douce);
}

/* -------------------------------------------------------------------------
   Bandeau chocolat encadré d'un filet doré
   Composant de la charte, actuellement utilisé par aucune page : il servait
   au bloc jeu concours, retiré de l'accueil. Il est conservé tel quel pour
   le prochain encart de ce type (promotion, annonce). S'il ne sert pas,
   c'est une quarantaine de lignes à supprimer d'un bloc.
   ------------------------------------------------------------------------- */

.bandeau {
  position: relative;
  padding: var(--esp-6) var(--esp-5);
  background-color: var(--chocolat);
  color: var(--ivoire);
  border-radius: var(--rayon-l);
}

.bandeau::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--filet-sur-chocolat);
  border-radius: calc(var(--rayon-l) - 4px);
  pointer-events: none;
}

.bandeau h2,
.bandeau h3,
.bandeau .surtitre {
  color: var(--creme);
}

.bandeau .libelle-bandeau {
  color: var(--beige-rose);
}

.bandeau a {
  color: var(--creme);
  text-decoration-color: var(--filet-sur-chocolat);
}

.bandeau .bouton--contour {
  border-color: var(--filet-sur-chocolat);
  color: var(--creme);
}

.bandeau .bouton--contour:hover {
  background-color: transparent;
  border-color: var(--dore);
  color: var(--creme);
}

.bandeau .liste-contenu li::marker {
  color: var(--dore);
}

/* -------------------------------------------------------------------------
   Encadré à filet doré sur fond clair (offre de lancement, encarts)
   ------------------------------------------------------------------------- */

.encadre-dore {
  padding: var(--esp-6) var(--esp-5);
  background-color: var(--creme);
  border: 1px solid var(--dore);
  border-radius: var(--rayon-l);
}

/* -------------------------------------------------------------------------
   Bloc d'information : pastille à filet doré, titre et contenu
   Utilisé sur la page Produits, dans l'esprit des visuels Instagram.
   ------------------------------------------------------------------------- */

.bloc-info {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--esp-4);
  align-items: start;
  /* Le bloc entier est centré comme une unité : la pastille et son texte
     restent solidaires. La largeur vaut la mesure de lecture augmentée de la
     pastille et de son écart. */
  max-width: calc(var(--mesure) + var(--taille-tactile) + var(--esp-4));
  margin-inline: auto;
}

/* À l'intérieur, le texte remplit sa colonne : le recentrer une seconde fois
   le décollerait de la pastille. */
.bloc-info p,
.bloc-info .liste-contenu {
  max-width: none;
  margin-inline: 0;
}

.bloc-info__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--taille-tactile);
  height: var(--taille-tactile);
  border: 1px solid var(--dore);
  border-radius: var(--rayon-pastille);
  color: var(--chocolat);
}

.bloc-info__icone svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* -------------------------------------------------------------------------
   Comparatif en vis-à-vis (gainage / renforcement)
   Empilé sur mobile, côte à côte à partir de 768 px avec la pastille « VS »
   au centre (voir media queries).
   ------------------------------------------------------------------------- */

.comparatif {
  display: grid;
  gap: var(--esp-4);
  align-items: center;
}

.comparatif__carte {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  height: 100%;
  padding: var(--esp-5);
  background-color: var(--creme);
  border: 1px solid var(--beige-rose);
  border-radius: var(--rayon-m);
  box-shadow: var(--ombre-douce);
}

.comparatif__carte p {
  max-width: none;
}

/* L'étiquette reprend la pastille des visuels, en chocolat plutôt qu'en doré :
   du texte clair sur un aplat doré n'atteindrait pas le contraste minimum. */
.comparatif__etiquette {
  align-self: flex-start;
  /* C'est un h3 : on ramène la police du corps, l'étiquette n'est pas un
     titre serif mais un libellé de bandeau. */
  font-family: var(--police-corps);
  padding: var(--esp-2) var(--esp-4);
  background-color: var(--chocolat);
  border-radius: var(--rayon-pastille);
  color: var(--creme);
  font-size: var(--pas-libelle);
  font-weight: 500;
  letter-spacing: var(--ecart-libelle);
  text-transform: uppercase;
}

.comparatif__vs {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  max-width: none;
  margin-inline: auto;
  border: 1px solid var(--dore);
  border-radius: var(--rayon-pastille);
  font-family: var(--police-titre);
  font-size: var(--pas-h3);
  font-weight: 600;
  color: var(--chocolat);
}

/* -------------------------------------------------------------------------
   Fiche produit : catégorie, marque, raison du choix
   ------------------------------------------------------------------------- */

.fiche-produit__marque {
  font-family: var(--police-titre);
  font-size: var(--pas-h3);
  font-weight: 600;
  color: var(--chocolat);
}

/* Emplacement encore vide : on le signale visuellement pour qu'il ne parte
   pas en ligne par inadvertance. */
.a-completer {
  padding: var(--esp-1) var(--esp-2);
  background-color: var(--ivoire);
  border: 1px dashed var(--dore);
  border-radius: var(--rayon-s);
  font-family: var(--police-corps);
  font-size: var(--pas-petit);
  font-weight: 500;
  color: var(--brun-doux);
}

/* -------------------------------------------------------------------------
   Formulaire
   Chaque champ est un .champ qui contient son label, son aide éventuelle et
   son message d'erreur. Le message d'erreur reste dans le DOM même vide :
   il est lié au champ par aria-describedby et annoncé par aria-live.
   ------------------------------------------------------------------------- */

.formulaire {
  display: grid;
  gap: var(--esp-5);
  max-width: 34rem;
  margin-inline: auto; /* recentré comme les colonnes de texte */
}

.champ {
  display: grid;
  gap: var(--esp-2);
}

.champ label {
  font-size: var(--pas-petit);
  font-weight: 500;
  color: var(--chocolat);
}

.champ__facultatif {
  font-weight: 400;
  color: var(--brun-doux);
}

/* La bordure d'un champ n'est pas décorative : c'est la seule chose qui
   signale où commence et où finit la zone de saisie. Le beige rosé n'atteint
   que 1,36:1 sur le crème, très en dessous du minimum de 3:1 exigé pour un
   élément d'interface (WCAG 1.4.11). On passe au brun doux, qui appartient
   déjà à la charte et atteint 5,79:1.
   C'est la différence avec les bordures de cartes, restées en beige rosé :
   une carte s'identifie par son contenu, un champ vide par sa seule
   bordure. */
.champ input,
.champ select,
.champ textarea {
  width: 100%;
  min-height: var(--taille-tactile);
  padding: var(--esp-3);
  background-color: var(--creme);
  border: 1px solid var(--brun-doux);
  border-radius: var(--rayon-s);
  color: var(--texte);
  transition: border-color var(--transition);
}

.champ textarea {
  min-height: 7rem;
  resize: vertical;
}

/* Au survol, le doré ferait retomber la bordure à 2,29:1 : le champ
   deviendrait moins visible au moment où l'on s'y intéresse. On renforce
   au contraire, avec le chocolat. */
.champ input:hover,
.champ select:hover,
.champ textarea:hover {
  border-color: var(--chocolat);
}

.champ__aide {
  max-width: none;
  font-size: var(--pas-libelle);
  color: var(--brun-doux);
}

.champ__erreur {
  max-width: none;
  font-size: var(--pas-petit);
  font-weight: 500;
  color: var(--erreur);
}

/* Tant qu'il n'y a pas d'erreur, le message ne prend aucune place. */
.champ__erreur:empty {
  display: none;
}

.champ--erreur input,
.champ--erreur select,
.champ--erreur textarea {
  border-color: var(--erreur);
}

.formulaire__statut {
  max-width: none;
  font-size: var(--pas-petit);
  color: var(--brun-doux);
}

.formulaire__statut:empty {
  display: none;
}

/* -------------------------------------------------------------------------
   Contact — canaux de prise de rendez-vous
   Boutons pleine largeur sur mobile, pour une cible tactile confortable.
   ------------------------------------------------------------------------- */

.canaux {
  display: grid;
  gap: var(--esp-3);
}

.canaux .bouton {
  width: 100%;
}

.canaux svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* -------------------------------------------------------------------------
   Liste de coordonnées avec icône
   ------------------------------------------------------------------------- */

.liste-coordonnees {
  display: grid;
  gap: var(--esp-3);
}

.liste-coordonnees li {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
}

.liste-coordonnees svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  fill: currentColor;
  color: var(--dore);
}


/* =========================================================================
   5. PAGES
   (à venir : prestations, galerie, à propos, contact)
   ========================================================================= */

/* -------------------------------------------------------------------------
   Accueil — hero
   Composition d'affiche : double filet doré, motif végétal très pâle dans
   deux coins opposés, grand titre serif centré, photo en arche.
   ------------------------------------------------------------------------- */

.hero {
  padding-block: var(--esp-5) var(--esp-section);
}

.hero__cadre {
  position: relative;
  overflow: hidden;
  padding: var(--esp-7) var(--esp-5);
  background-color: var(--creme);
  border: 1px solid var(--dore);
  border-radius: var(--rayon-l);
  text-align: center;
  /* Seul moment orchestré du site : l'apparition du hero au chargement. */
  animation: apparition-hero 700ms ease-out both;
}

/* Second filet, légèrement en retrait : l'effet « encadrement d'affiche ». */
.hero__cadre::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--dore);
  border-radius: calc(var(--rayon-l) - 4px);
  opacity: 0.55;
  pointer-events: none;
}

@keyframes apparition-hero {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Motif végétal doré, très pâle, purement décoratif. */
.hero__vegetal {
  position: absolute;
  width: 96px;
  height: 96px;
  color: var(--dore);
  opacity: 0.16;
  pointer-events: none;
}

.hero__vegetal--haut {
  top: var(--esp-2);
  left: var(--esp-2);
}

.hero__vegetal--bas {
  right: var(--esp-2);
  bottom: var(--esp-2);
  transform: rotate(180deg);
}

.hero__interieur {
  position: relative;
}

.hero__texte > * + * {
  margin-top: var(--esp-3);
}

/* Le mot « nails » reprend le manuscrit Parisienne du surtitre, posé juste à
   côté du « BB » en serif.
   La taille est en em : elle suit donc le clamp du h1 et reste proportionnée
   à toutes les largeurs d'écran. Le 1.05 n'est pas un caprice : Parisienne a
   une hauteur d'x très basse, à taille de police égale elle paraîtrait
   nettement plus petite que le Cormorant. Et le h1 porte un interlettrage
   négatif, qu'il faut annuler sur une écriture liée. */
.hero__nails {
  font-family: var(--police-accent);
  font-weight: 400;
  font-size: 1.05em;
  letter-spacing: normal;
}

.hero__baseline {
  margin-inline: auto;
  max-width: 34ch;
  color: var(--brun-doux);
}

/* Les médaillons respirent un peu plus que le reste du hero : ils forment un
   bloc à part, sous les boutons. Définis ici, après .garanties, pour gagner
   sur la marge générique de .hero__texte. */
.hero__garanties {
  margin-top: var(--esp-5);
}

.hero__visuel {
  margin-top: var(--esp-6);
}

.hero__visuel img {
  margin-inline: auto;
  max-width: 300px;
}

/* -------------------------------------------------------------------------
   Prestations — liste des tarifs
   Mobile : une carte par prestation, les deux prix l'un sous l'autre avec
   leur libellé. À partir de 768 px, la même liste s'aligne en trois colonnes
   sous une ligne d'en-têtes, comme sur l'affiche (voir media queries).
   ------------------------------------------------------------------------- */

.tarifs__entetes {
  display: none; /* les libellés de chaque ligne suffisent sur mobile */
  /* Cette ligne d'en-têtes doit s'aligner sur les lignes de tarif : elle ne
     suit donc pas la mesure de 68 ch du texte courant. */
  max-width: none;
}

.tarifs__liste {
  display: grid;
  gap: var(--esp-4);
}

.ligne-tarif {
  display: grid;
  gap: var(--esp-2);
  padding: var(--esp-4) var(--esp-5);
  background-color: var(--ivoire);
  border: 1px solid var(--beige-rose);
  border-radius: var(--rayon-m);
}

.ligne-tarif__nom {
  font-size: var(--pas-h3);
}

.ligne-tarif__prix {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-3);
  max-width: none;
}

/* Note : la classe ligne-tarif__prix--lancement, dans prestations.html, n'a
   volontairement aucun style. Elle sert uniquement de repère pour retrouver
   et supprimer la colonne des tarifs de lancement après le 15 novembre 2026. */

.ligne-tarif__libelle {
  font-size: var(--pas-libelle);
  font-weight: 500;
  letter-spacing: var(--ecart-libelle);
  text-transform: uppercase;
  color: var(--brun-doux);
}

/* Le tarif habituel reste lisible mais passe au second plan. */
.tarif-habituel {
  font-family: var(--police-titre);
  font-size: var(--pas-h3);
  color: var(--brun-doux);
}

.tarifs__note {
  margin-top: var(--esp-4);
  font-size: var(--pas-petit);
  color: var(--brun-doux);
}

/* -------------------------------------------------------------------------
   Prestations — suppléments de nail art
   ------------------------------------------------------------------------- */

.liste-supplements {
  display: grid;
}

.ligne-supplement {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-2) var(--esp-4);
  padding-block: var(--esp-3);
  border-bottom: 1px solid var(--beige-rose);
}

.ligne-supplement:first-child {
  border-top: 1px solid var(--beige-rose);
}

.ligne-supplement__nom {
  flex: 1 1 14rem;
}

.ligne-supplement__prix {
  font-family: var(--police-titre);
  font-size: var(--pas-h3);
  font-weight: 600;
  color: var(--chocolat);
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Galerie — filtres par catégorie
   Ce sont des boutons à deux états : aria-pressed porte l'état actif, et le
   style suit cet attribut plutôt qu'une classe, pour qu'ils ne puissent pas
   se désynchroniser.
   ------------------------------------------------------------------------- */

.galerie-filtres {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-2);
}

.filtre {
  min-height: var(--taille-tactile);
  padding: var(--esp-2) var(--esp-4);
  background-color: transparent;
  border: 1px solid var(--beige-rose);
  border-radius: var(--rayon-pastille);
  font-size: var(--pas-petit);
  font-weight: 500;
  color: var(--chocolat);
  transition: background-color var(--transition), border-color var(--transition),
    color var(--transition);
}

.filtre:hover {
  background-color: var(--creme-survol);
  border-color: var(--dore);
}

.filtre[aria-pressed="true"] {
  background-color: var(--chocolat);
  border-color: var(--chocolat);
  color: var(--creme);
}

.galerie-resultat {
  margin-top: var(--esp-4);
  font-size: var(--pas-petit);
  color: var(--brun-doux);
  text-align: center;
  margin-inline: auto;
}

/* -------------------------------------------------------------------------
   Galerie — grille
   2 colonnes sur mobile, 3 sur tablette, 4 sur grand écran.
   ------------------------------------------------------------------------- */

.galerie-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-3);
  margin-top: var(--esp-6);
}

.galerie-vignette {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background-color: var(--ivoire);
  border: 1px solid var(--beige-rose);
  border-radius: var(--rayon-m);
  transition: border-color var(--transition);
}

.galerie-vignette img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.galerie-vignette:hover,
.galerie-vignette:focus-visible {
  border-color: var(--dore);
}

/* -------------------------------------------------------------------------
   Galerie — lightbox
   ------------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--esp-4);
  color: var(--creme);
}

/* .lightbox est en display:flex : sans cette règle, l'attribut hidden ne
   suffirait pas à la masquer. */
.lightbox[hidden] {
  display: none;
}

.lightbox__voile {
  position: absolute;
  inset: 0;
  background-color: var(--voile-lightbox);
}

.lightbox__contenu {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--esp-3);
  width: min(92vw, 34rem);
}

.lightbox__haut {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.lightbox__figure {
  display: grid;
  justify-items: center;
  gap: var(--esp-3);
}

.lightbox__image {
  max-height: 62vh;
  width: auto;
  height: auto;
  border: 1px solid var(--dore);
  border-radius: 999px 999px var(--rayon-l) var(--rayon-l);
}

.lightbox__legende {
  max-width: var(--mesure);
  font-size: var(--pas-petit);
  text-align: center;
  color: var(--ivoire);
}

.lightbox__barre {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
}

.lightbox__bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--taille-tactile);
  height: var(--taille-tactile);
  background-color: var(--creme);
  border: 1px solid var(--dore);
  border-radius: var(--rayon-pastille);
  color: var(--chocolat);
  transition: background-color var(--transition);
}

.lightbox__bouton:hover {
  background-color: var(--creme-survol);
}

/* Une seule photo affichée : les flèches sont désactivées par le script. */
.lightbox__bouton:disabled {
  opacity: 0.45;
  cursor: default;
}

.lightbox__bouton svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lightbox__compteur {
  min-width: 4rem;
  max-width: none;
  font-size: var(--pas-petit);
  text-align: center;
  color: var(--beige-rose);
}

/* Empêche la page de défiler derrière la lightbox ouverte. */
.defilement-bloque {
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   Accueil — bloc contact
   ------------------------------------------------------------------------- */

.contact-apercu__interieur {
  display: grid;
  gap: var(--esp-6);
}

/* -------------------------------------------------------------------------
   À propos — portrait et texte
   ------------------------------------------------------------------------- */

.a-propos__interieur {
  display: grid;
  gap: var(--esp-6);
}

.a-propos__portrait img {
  max-width: 320px;
  margin-inline: auto;
}

.a-propos__signature {
  font-family: var(--police-accent);
  font-size: var(--pas-surtitre);
  color: var(--brun-doux);
}

/* -------------------------------------------------------------------------
   Contact — deux colonnes sur grand écran
   ------------------------------------------------------------------------- */

.contact__interieur {
  display: grid;
  gap: var(--esp-7);
}

/* Horaires : libellé du jour et plage horaire sur une ligne. */
.horaires {
  display: grid;
  gap: var(--esp-2);
  max-width: 24rem;
  margin-inline: auto; /* recentré comme les colonnes de texte */
}

.horaires div {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-4);
  padding-block: var(--esp-2);
  border-bottom: 1px solid var(--beige-rose);
}

.horaires dt {
  font-weight: 500;
}

.horaires dd {
  color: var(--brun-doux);
}

/* -------------------------------------------------------------------------
   Mentions légales — texte suivi
   ------------------------------------------------------------------------- */

/* Page de texte suivi : la colonne entière est centrée dans la page, titres
   compris, pour que rien ne dépasse à gauche ni à droite. */
.page-texte {
  max-width: var(--mesure);
  margin-inline: auto;
}

.page-texte h2 {
  margin-top: var(--esp-7);
}

.page-texte h2:first-of-type {
  margin-top: var(--esp-6);
}

.page-texte p + p,
.page-texte h2 + p,
.page-texte p + ul {
  margin-top: var(--esp-4);
}


/* =========================================================================
   6. MEDIA QUERIES
   Points de rupture : 480 px, 768 px, 1024 px.
   ========================================================================= */

/* --- À partir de 480 px --- */
@media (min-width: 480px) {
  .grille--cartes {
    grid-template-columns: repeat(2, 1fr);
  }

  .grille--medaillons {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Les médaillons ont la place de respirer. */
  .garanties {
    gap: var(--esp-4);
  }

  /* La colonne devient assez large pour que la justification serve le texte
     au lieu de le trouer. En dessous, il reste au fer à gauche. */
  .texte-justifie p,
  .texte-justifie li {
    text-align: justify;
  }
}

/* --- À partir de 768 px : navigation en barre, plus de burger --- */
@media (min-width: 768px) {
  .burger {
    display: none;
  }

  .nav-principale {
    position: static;
    background-color: transparent;
    border-bottom: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav-principale__liste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-5);
    padding-inline: 0;
  }

  .nav-principale__liste li + li a {
    border-top: 0;
  }

  .nav-principale__liste a {
    min-height: 0;
    padding-block: var(--esp-2);
  }

  /* Page courante : soulignement doré au lieu du filet latéral. */
  .nav-principale__liste a[aria-current="page"] {
    padding-left: 0;
    border-left: 0;
    border-bottom: 1px solid var(--dore);
  }

  .entete__interieur {
    min-height: 76px;
  }

  /* Le logo peut respirer sur grand écran : ses détails fins (« Nails » en
     manuscrit, la branche) deviennent lisibles. */
  .entete__logo {
    width: 64px;
  }

  .pied__interieur {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--esp-7);
  }

  /* Plus de bouton flottant : la réserve du bas n'a plus de raison d'être. */
  .pied {
    padding-block: var(--esp-7) var(--esp-5);
  }

  .bouton-appel {
    display: none;
  }

  /* --- Hero sur deux colonnes : texte à gauche, arche à droite --- */
  .hero__cadre {
    padding: var(--esp-8) var(--esp-7);
  }

  .hero__interieur {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--esp-7);
    align-items: center;
    text-align: left;
  }

  .hero__baseline {
    margin-inline: 0;
  }

  .hero__actions,
  .hero__garanties {
    justify-content: flex-start;
  }

  .hero__visuel {
    margin-top: 0;
  }

  .hero__visuel img {
    max-width: 100%;
  }

  .hero__vegetal {
    width: 140px;
    height: 140px;
  }

  .contact-apercu__interieur {
    grid-template-columns: 1fr 1fr;
    gap: var(--esp-7);
  }

  .grille--trois {
    grid-template-columns: repeat(3, 1fr);
  }

  /* --- Tarifs : passage en trois colonnes alignées --- */
  .tarifs__entetes {
    display: grid;
    grid-template-columns: 1fr 8rem 8rem;
    gap: var(--esp-4);
    padding: 0 var(--esp-5) var(--esp-3);
    border-bottom: 1px solid var(--dore);
  }

  .tarifs__entetes span {
    font-size: var(--pas-libelle);
    font-weight: 500;
    letter-spacing: var(--ecart-libelle);
    text-transform: uppercase;
    color: var(--brun-doux);
  }

  .tarifs__liste {
    gap: 0;
  }

  /* La carte devient une ligne : plus de fond ni d'encadré, un simple filet. */
  .ligne-tarif {
    grid-template-columns: 1fr 8rem 8rem;
    gap: var(--esp-4);
    align-items: baseline;
    padding-block: var(--esp-4);
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--beige-rose);
    border-radius: 0;
  }

  /* Les libellés de chaque prix restent lus par les lecteurs d'écran, mais
     ne sont plus affichés : la ligne d'en-têtes joue ce rôle visuellement. */
  .ligne-tarif__libelle {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .ligne-tarif__prix {
    display: block;
  }

  .galerie-grille {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--esp-4);
  }

  .lightbox__contenu {
    width: min(88vw, 40rem);
  }

  .canaux {
    grid-template-columns: repeat(2, 1fr);
  }

  .a-propos__interieur {
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--esp-7);
    align-items: start;
  }

  .a-propos__portrait img {
    max-width: 100%;
  }

  .contact__interieur {
    grid-template-columns: 1fr 1fr;
  }

  .comparatif {
    grid-template-columns: 1fr auto 1fr;
    gap: var(--esp-5);
  }
}

@media (min-width: 1024px) {
  :root {
    /* Texte courant très légèrement agrandi sur grand écran. */
    --pas-corps: 1.0625rem;
  }

  .grille--cartes {
    grid-template-columns: repeat(4, 1fr);
  }

  .grille--medaillons {
    grid-template-columns: repeat(6, 1fr);
  }

  .galerie-grille {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Accessibilité : on désactive toute animation et tout défilement animé. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}