/* ==========================================================================
   Signature visuelle — commune aux deux métiers
   --------------------------------------------------------------------------
   Parti pris contemporain, à l'opposé du gabarit repris : celui-ci est bâti
   sur un or sur blanc, des serif et des pilules de 50 px — une facture de
   2015 qu'on reconnaît au premier regard.

   Ici : grotesque géométrique, titres très grands et serrés, fond neutre
   chaud, grands rayons et ombres douces. L'or est conservé mais posé À
   PLAT : c'est le dégradé doré sur tous les titres et tous les chiffres
   qui signait le gabarit d'origine, autant que la teinte elle-même.

   Une seule feuille pour la coiffure et le maquillage : les deux sites
   partagent la même charte, seuls les photos, le logo et les textes les
   distinguent. Deux feuilles divergentes auraient dérivé à la première
   correction faite d'un seul côté.

   Chargée APRÈS style.css, dont elle écrase le langage visuel. Le balisage
   n'est pas touché — le parcours, le slider et son formulaire de capture
   fonctionnent à l'identique, c'est la pièce qui génère les demandes.
   ========================================================================== */

:root {
  --primary-color: #b8893b;   /* or mat, l'accent unique */
  --primary-dark: #8f6a28;
  --secondary-color: #f5ebd8;
  --accent-color: #d9bb72;
  --gradient-primary: linear-gradient(135deg, #b8893b 0%, #d9bb72 100%);
  --gradient-secondary: linear-gradient(135deg, #8f6a28 0%, #b8893b 100%);
  --text-dark: #121016;
  --text-light: #5d5862;
  --text-lighter: #938d99;
  --bg-light: #faf9f7;
  --bg-white: #ffffff;

  /* Grands rayons francs : l'original mélange pilules et coins à 24 px. */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;

  --shadow-sm: 0 1px 2px rgba(18, 16, 22, .04);
  --shadow-md: 0 6px 18px rgba(18, 16, 22, .06);
  --shadow-lg: 0 18px 44px rgba(18, 16, 22, .09);
  --shadow-xl: 0 30px 70px rgba(18, 16, 22, .12);
}

/* ---------- Typographie ---------- */

body {
  background: var(--bg-white);
  color: var(--text-dark);
  font-family: Outfit, Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.logo, .gallery-title, .section-title, .hero-title, .service-title,
.pricing-title, .gallery-item-title, .testimonial-name {
  font-family: Outfit, Inter, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -.03em;   /* serrage typique des titres contemporains */
  line-height: 1.08;
}

.section-tag, .service-badge {
  font-family: Outfit, Inter, sans-serif;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 500;
}

.btn, .btn-hero, .btn-primary, .btn-cta, .btn-gallery, .btn-back {
  font-family: Outfit, Inter, sans-serif;
  text-transform: none;
  letter-spacing: -.01em;
  font-size: 16px;
  font-weight: 500;
}

/* ---------- Navigation ---------- */

/* Par défaut — galerie, réservation, devis, paiement : fond clair dès le
   haut de page, donc barre dépolie et marque sombre. */
.navbar {
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(18, 16, 22, .06);
  box-shadow: none;
}
.navbar.scrolled {
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 1px 0 rgba(18, 16, 22, .06);
}

/* Pages à héros : le haut de page est sombre — panneau anthracite à
   gauche, photo voilée à droite. Une barre dépolie y poserait un bandeau
   clair en travers du héros. Elle s'efface donc, et la marque passe en
   blanc ; elle redevient dépolie dès que le défilement amène du contenu
   clair sous elle.

   `:has()` plutôt qu'une classe sur <body> : le balisage du gabarit n'est
   pas touché, et un navigateur qui l'ignore garde la barre dépolie —
   lisible partout, donc un repli sans dégât. */
body:has(.hero-slider) .navbar {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
body:has(.hero-slider) .logo { color: #fff; }
body:has(.hero-slider) .navbar.scrolled {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: rgba(18, 16, 22, .06);
}
body:has(.hero-slider) .navbar.scrolled .logo { color: var(--text-dark); }

@media (max-width: 420px) {
  .navbar .container { padding: 12px 14px; }
}
/* Le monogramme seul, sans la marque écrite. Sur petit téléphone, le nom
   à côté du bouton d'appel passait sur deux lignes et débordait de la
   barre ; partout ailleurs il doublait simplement ce que le logo dit
   déjà. `font-size: 0` efface le texte sans toucher à l'image, qui porte
   sa hauteur en attribut ; le nom reste dans l'`alt`, donc lisible pour
   un lecteur d'écran et pour les moteurs. */
.logo, .navbar.scrolled .logo {
  color: var(--text-dark);
  text-shadow: none;
  font-size: 0;
  letter-spacing: 0;
  text-transform: none;
}
.logo img { height: 42px !important; margin-right: 0 !important; }
.navbar-phone {
  background: var(--text-dark);
  color: #fff;
  border: none;
  border-radius: 999px;
  box-shadow: none;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-transform: none;
  padding: 10px 20px;
}
.navbar-phone:hover {
  background: var(--primary-color);
  transform: none;
  box-shadow: 0 8px 20px rgba(184, 137, 59, .28);
}

/* ---------- Héros : panneau sombre + colonne photo ----------

   Le gabarit pose la photo en fond de section et le formulaire par-dessus,
   en verre dépoli : le texte lutte contre le visage et les champs se
   lisent mal.

   Deux colonnes : la capture à gauche sur fond plein, les photos à droite,
   qui se succèdent. Le fond est sombre et non crème — sur crème, le
   panneau était fade, et surtout la carte blanche du formulaire s'y
   fondait au lieu de ressortir. Sur l'anthracite elle est la seule tache
   claire de la moitié gauche : l'œil n'a nulle part ailleurs où aller.

   Sur mobile la colonne disparaît : la photo repasse DERRIÈRE le panneau.
   Empilées, panneau puis photo, elles repousseraient le formulaire sous la
   ligne de flottaison — exactement ce qu'il ne faut pas sur la pièce qui
   génère les demandes.
   ------------------------------------------------------------------- */

.hero-slider {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  height: auto;
  /* `dvh` et non `vh` : sur mobile, `100vh` compte la barre d'adresse même
     quand elle est repliée, et le bas du héros — donc le bouton d'appel —
     tombe sous la ligne de flottaison. `vh` reste en repli pour les
     navigateurs qui ignorent `dvh`. */
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

/* --- Colonne photo --- */

.hero-photos {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  overflow: hidden;
  background: #17141b;
}

.hero-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  /* Les clichés sont cadrés serré sur le visage : centrés, le haut du
     crâne est coupé. On remonte le point d'ancrage. */
  background-position: center 18%;
  opacity: 0;
  transform: scale(1.07);
  transition: opacity 1.2s ease;
}
.hero-photo.is-active {
  opacity: 1;
  transform: scale(1);
  /* Zoom lent : la photo vit pendant les six secondes d'affichage, sans
     mouvement qu'on remarque. */
  transition: opacity 1.2s ease, transform 7.5s linear;
}

/* Voile bas : les clichés sont clairs, et des barres blanches posées
   dessus disparaissaient complètement. Le dégradé ne mord que sur le
   dernier quart de l'image. */
.hero-photos::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(14, 12, 17, .55) 0%,
                                      rgba(14, 12, 17, 0) 24%);
  pointer-events: none;
}

.hero-progress {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  gap: 8px;
}
.hero-progress-bar {
  position: relative;
  flex: 1;
  height: 2px;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: rgba(255, 255, 255, .32);
  overflow: hidden;
  cursor: pointer;
}
/* Cible tactile de 24 px autour d'un trait de 2 px. */
.hero-progress-bar::before {
  content: '';
  position: absolute;
  inset: -11px 0;
}
.hero-progress-bar::after {
  content: '';
  display: block;
  height: 100%;
  width: 0;
  background: #fff;
}
.hero-progress-bar.is-active::after { animation: heroRemplit 6s linear forwards; }
@keyframes heroRemplit { from { width: 0 } to { width: 100% } }

/* --- Panneau de capture --- */

.slider-container {
  /* Positionné dans la feuille du gabarit : la pastille promotionnelle,
     en absolu, s'y ancrait et venait chevaucher le titre au lieu de se
     poser sur la photo. */
  position: static;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  /* Halo doré en haut à gauche : il réchauffe l'anthracite et évite
     l'aplat mort derrière le titre. */
  background:
    radial-gradient(118% 86% at 16% 10%, rgba(184, 137, 59, .26) 0%, transparent 58%),
    linear-gradient(168deg, #1d1922 0%, #141118 58%, #0e0c11 100%);
}
.slide {
  position: static;
  display: flex;        /* sans quoi .slide-content garde la hauteur de son
                           contenu et le centrage vertical ne s'applique pas */
  width: 100%;
  opacity: 1;
  visibility: visible;
}
.slide-content {
  position: static;
  height: auto;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  /* Même réserve en haut et en bas : le bloc tombe au centre optique du
     panneau. La barre de navigation occupe les 80 premiers pixels. */
  padding: 108px 0 100px;
  color: #fff;
}
.slide-content .container {
  display: block;
  min-height: 0;
  max-width: 680px;
  margin: 0 0 0 auto;
  padding: 0 clamp(28px, 3.6vw, 60px);
}

/* Pastille promotionnelle. Ronde, dorée et tournée dans le gabarit, elle
   signait l'autre site à elle seule. Ici : une étiquette discrète, dans le
   flux, qui annonce le prix sans crier. */
.promo-sticker {
  position: static;
  display: inline-flex;
  flex-direction: row;   /* le gabarit empile les trois lignes */
  align-items: baseline;
  gap: 9px;
  width: auto;
  height: auto;
  margin: 0 0 22px;
  padding: 8px 18px;
  border: 1px solid rgba(217, 187, 114, .3);
  border-radius: 999px;
  background: rgba(184, 137, 59, .14);
  color: var(--accent-color);
  transform: none;
  animation: none;
  box-shadow: none;
}
.promo-sticker:hover {
  filter: none;
  transform: none;
  box-shadow: none;
  background: rgba(184, 137, 59, .22);
}
.promo-sticker-top, .promo-sticker-bottom {
  order: 0;
  max-width: none;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  opacity: .85;
}
.promo-sticker-price {
  order: 0;
  font-family: Outfit, Inter, sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.promo-sticker-currency { font-size: 15px; }

.hero-title {
  margin: 0 0 16px;
  font-size: clamp(36px, 3.6vw, 54px);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.03;
  color: #fff;
  opacity: 1;
  transform: none;
  animation: none;   /* l'apparition du gabarit retardait le formulaire */
}
.gradient-text {
  display: block;
  margin-top: 12px;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--accent-color);
  font-family: Outfit, Inter, sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-transform: none;
  opacity: 1;
  transform: none;
  animation: none;
}
.hero-subtitle {
  margin-bottom: 30px;
  color: rgba(255, 255, 255, .72);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  opacity: 1;
  transform: none;
  animation: none;
}

/* Carte blanche franche sur l'anthracite : c'est le seul bloc clair de la
   moitié gauche, donc le premier endroit où l'œil se pose. */
.hero-form {
  max-width: 100%;
  margin: 0;
  padding: 26px;
  background: #fff;
  backdrop-filter: none;
  border: none;
  border-radius: 22px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .42);
  opacity: 1;
  animation: none;
}
.form-group-inline input {
  padding: 17px 18px;
  border: 1.5px solid rgba(18, 16, 22, .12);
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
  font-family: Outfit, Inter, sans-serif;
  font-size: 16px;
}
.form-group-inline input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px rgba(184, 137, 59, .14);
  transform: none;
}
.form-group-inline input::placeholder { color: var(--text-lighter); }
.form-group-inline .field-error { margin-left: 4px; }

/* `.btn.btn-hero` : le bouton porte aussi btn-primary, redéfini plus bas.
   À spécificité égale la dernière règle gagnerait et le bouton d'appel
   perdrait son fond plein. */
.btn.btn-hero {
  padding: 18px 32px;
  background: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(184, 137, 59, .3);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-transform: none;
}
.btn.btn-hero:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(184, 137, 59, .4);
}

.hero-confiance {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  color: rgba(255, 255, 255, .7);
  font-size: 14px;
}
.hero-confiance li { display: flex; align-items: center; gap: 7px; }
.hero-confiance li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-color);
}

/* --- Mobile : la photo repasse derrière le panneau --- */

@media (max-width: 968px) {
  .hero-slider { display: block; }
  /* La hauteur est posée sur `.slide-content`, pas sur le conteneur :
     un `min-height` sur un conteneur flex de hauteur automatique n'étire
     pas ses enfants, et le bloc restait collé en haut d'un héros plein
     écran. Ici elle est définie là où le centrage s'applique. */
  .slide, .slide-content { min-height: 100vh; min-height: 100dvh; }
  .hero-photos {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  /* La photo passe ici DERRIÈRE le titre, le sous-titre et la ligne de
     réassurance. Un voile seul ne suffit pas : ce sont les détails nets —
     cils, reflets, mèches — qui accrochent sous les lettres et gênent la
     lecture. Un flou léger les efface sans rien perdre de la couleur ni
     de l'ambiance, qui sont tout ce qu'on demande à un fond.

     L'agrandissement compense les bords adoucis par le flou : sans lui,
     un liseré translucide apparaît sur les quatre côtés. Il remplace
     aussi le zoom lent, inutile sur mobile. */
  .hero-photo,
  .hero-photo.is-active {
    background-position: center 26%;
    filter: blur(4px);
    transform: scale(1.06);
  }
  /* Voile dégradé : le visage reste net en haut, le texte lisible en bas.
     Remplace le voile bas de la version large, insuffisant sous un texte
     qui court sur toute la photo. */
  .hero-photos::after {
    background: linear-gradient(180deg, rgba(18, 16, 22, .5) 0%,
                                        rgba(18, 16, 22, .26) 32%,
                                        rgba(18, 16, 22, .68) 100%);
  }
  .hero-progress { bottom: 16px; }

  .slider-container { position: relative; z-index: 1; background: none; }
  /* Le recadrage serré que `cover` impose à un cliché carré sur un écran
     en hauteur ne gêne plus : la photo est floutée ici, c'est sa couleur
     qui compte, pas son cadrage. */
  .slide-content {
    padding: 86px 0 34px;
    min-height: 0;
    /* Plus de centrage vertical : le contenu occupe toute la hauteur et
       se répartit lui-même. */
    align-items: stretch;
  }
  .slide-content .container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    max-width: 520px;
  }
  .hero-title { font-size: clamp(30px, 7.5vw, 42px); }

  /* Le texte reste en haut, sous la barre ; le formulaire et sa ligne de
     réassurance se centrent dans ce qui reste. Deux marges automatiques
     en vis-à-vis — l'une au-dessus du formulaire, l'autre sous la
     réassurance — se partagent l'espace libre à parts égales. Collé au
     bas, le formulaire frôlait les barres de progression ; centré, il
     respire des deux côtés. */
  .hero-form { margin-top: auto; }
  .hero-confiance { margin-bottom: auto; }

  /* L'étiquette de prix passe SOUS le texte. En tête de colonne, elle
     retardait le titre — la première chose lue devenait un tarif, pas ce
     qu'on vend. Le conteneur étant une colonne flex, il suffit de
     renuméroter : le balisage, lui, ne bouge pas. */
  .hero-title { order: 1; }
  .hero-subtitle { order: 2; }
  .promo-sticker { order: 3; margin: 18px 0 0; align-self: flex-start; }
  .hero-form { order: 4; }
  .hero-confiance { order: 5; }
  .hero-subtitle { margin-bottom: 0; }
  /* Les trois mentions sur une seule ligne : repliées sur deux, elles
     mangent 55 px juste au-dessus des barres de progression. */
  .hero-confiance {
    margin-top: 15px;
    margin-bottom: auto;
    gap: 8px 15px;
    font-size: 13px;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .hero-confiance li { white-space: nowrap; }
}

@media (max-width: 480px) {
  .hero-form { padding: 20px; border-radius: 18px; }
  .hero-subtitle { margin-bottom: 22px; }
}

/* Écrans bas — portable 13 pouces, mobile en paysage, fenêtre réduite.
   Le héros occupe toute la hauteur disponible ; encore faut-il que son
   contenu y tienne, sinon le formulaire déborde sous la ligne de
   flottaison et l'accroche est perdue. Tout se resserre d'un cran. */
@media (max-height: 780px) {
  .slide-content { padding: 92px 0 36px; }
  .promo-sticker { margin-bottom: 14px; padding: 6px 15px; }
  .promo-sticker-price { font-size: 17px; }
  .hero-title { font-size: clamp(28px, 4.8vh, 44px); margin-bottom: 10px; }
  .gradient-text { margin-top: 8px; font-size: 15px; }
  .hero-subtitle { margin-bottom: 18px; font-size: 15px; line-height: 1.55; }
  .hero-form { padding: 18px; border-radius: 18px; }
  .quote-form { gap: 11px; }
  .form-group-inline input { padding: 13px 16px; font-size: 15px; }
  .btn.btn-hero { padding: 14px 28px; font-size: 16px; }
  .hero-confiance { margin-top: 14px; font-size: 13px; }
}

/* Très bas : on sacrifie le sous-titre et la réassurance plutôt que le
   formulaire. Un écran de 600 px de haut ne peut pas tout porter. */
@media (max-height: 600px) {
  .hero-subtitle, .hero-confiance { display: none; }
  .slide-content { padding: 80px 0 24px; }
}

/* ---------- Bandeau photo défilant ----------

   Deux rangées qui glissent en sens inverse, de bord à bord de l'écran.
   Le mouvement est permanent : il accroche l'œil sans attendre un clic,
   là où une grille immobile se parcourt ou s'ignore.

   La boucle est sans couture parce que chaque rangée contient deux fois
   le même lot et que l'animation translate d'exactement la moitié. D'où
   l'écartement en `margin-right` et non en `gap` : avec `gap`, il manque
   un demi-écart entre les deux exemplaires et la boucle saute.
   ------------------------------------------------------------------- */

/* En-tête de section : le titre à gauche, l'accès à la galerie à droite,
   sur une même ligne de base. Le gabarit empilait surtitre, titre et
   paragraphe au centre — trois niveaux de texte pour annoncer des photos
   qui se présentent d'elles-mêmes. */
.bandeau-entete { margin-bottom: 30px; }
.bandeau-entete h2 {
  margin: 0;
  /* Court et borné en `vw` pour tenir sur une seule ligne jusqu'aux plus
     petits téléphones. */
  font-size: clamp(24px, 6vw, 40px);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.12;
  color: var(--text-dark);
  white-space: nowrap;
}

/* Lien vers la galerie : un simple mot souligné sous les photos. Un bouton
   plein entrerait en concurrence avec le seul appel à l'action de la page,
   le formulaire du héros — et c'est lui qui doit gagner. */
.bandeau-lien {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}
.bandeau-lien a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(18, 16, 22, .18);
  color: var(--text-light);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: color .2s, border-color .2s;
}
.bandeau-lien a:hover {
  color: var(--primary-dark);
  border-bottom-color: var(--primary-color);
}
.bandeau-lien svg { transition: transform .25s; }
.bandeau-lien a:hover svg { transform: translateX(3px); }

@media (max-width: 700px) {
  .bandeau-entete { margin-bottom: 22px; }
}

.bandeau {
  position: relative;
  /* Dans le conteneur, à la même largeur que les avis et le corps de
     texte. En pleine largeur de fenêtre, il était le seul bloc de la page
     à déborder des marges — frappant, mais désaligné de tout le reste. */
  padding: 4px 0;
  overflow: hidden;
}

/* Voiles latéraux : les photos naissent et disparaissent dans le fond au
   lieu d'être tranchées net par le bord de l'écran. */
.bandeau::before,
.bandeau::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: clamp(40px, 9vw, 150px);
  pointer-events: none;
}
/* La teinte doit être celle de la section qui porte le bandeau —
   `.services-section`, blanche — sinon le voile se voit comme une bande
   grise au lieu de fondre. */
.bandeau::before { left: 0; background: linear-gradient(90deg, var(--bg-white), transparent); }
.bandeau::after { right: 0; background: linear-gradient(270deg, var(--bg-white), transparent); }

.bandeau-ligne {
  display: flex;
  width: max-content;
  animation: bandeauDefile 70s linear infinite;
}
.bandeau-ligne--retour {
  margin-top: 16px;
  animation-direction: reverse;
  animation-duration: 84s;   /* vitesses différentes : le croisement des
                                deux rangées reste vivant */
}
@keyframes bandeauDefile {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Le survol suspend les deux rangées : on regarde une photo sans courir
   après elle. */
.bandeau:hover .bandeau-ligne { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .bandeau-ligne { animation: none; }
  .bandeau { overflow-x: auto; }
}

.bandeau-vue {
  flex: 0 0 clamp(170px, 17vw, 240px);
  display: block;
  margin-right: 16px;
  /* Carré, comme les clichés : un recadrage en portrait couperait les
     mentons et les fronts selon le cadrage de chaque photo, et le flou
     d'arrière-plan appliqué à la série est composé pour le carré. */
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(18, 16, 22, .1);
  transition: box-shadow .35s, transform .35s;
}
.bandeau-vue img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.bandeau-vue:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(18, 16, 22, .18);
}
.bandeau-vue:hover img { transform: scale(1.06); }

/* ---------- Boutons ---------- */

.btn, .btn-primary, .btn-cta, .btn-gallery, .btn-back {
  border-radius: 14px;
  box-shadow: none;
  padding: 13px 24px;
}
.btn-primary, .btn-gallery, .btn-back {
  background: rgba(18, 16, 22, .04);
  border: none;
  color: var(--text-dark);
}
.btn-primary:hover, .btn-gallery:hover, .btn-back:hover {
  background: var(--text-dark);
  color: #fff;
  transform: none;
  box-shadow: none;
}
.btn-cta { background: var(--primary-color); color: #fff; border: none; }

/* ---------- Sections et cartes ---------- */

.content-section, .services-section, .zones-section { background: var(--bg-white); }
.pricing-section, .contact-section, .gallery-section, .testimonials-section { background: var(--bg-light); }

/* Espacement entre blocs : 48 px — mobile comme
   ordinateur. Le gabarit donnait 40 px au corps de texte et aux
   prestations, 80 px aux avis, 100 px aux zones : trois respirations
   différentes à la suite, et une page qui s'étire sans raison.
   24 px de part et d'autre font les 48 px voulus entre deux blocs
   voisins ; c'est la somme des deux qui se voit, jamais l'une seule. */
.content-section,
.services-section,
.zones-section,
.testimonials-section {
  padding: 24px 0;
}

/* Le dernier paragraphe du corps de texte porte 20 px de marge basse,
   qui s'ajoutaient aux 24 px et faisaient 44 px avant les zones. */
.article-content > *:last-child { margin-bottom: 0; }

/* Le héros n'a pas de réserve basse — il va au bord. Les 48 px qui le
   séparent du premier bloc sont donc portés par ce bloc seul. */
#prestations { padding-top: 48px; }
/* Les titres de bloc portent l'or de la marque, le corps du texte reste
   au noir. La nuance suffit à signaler qu'un bloc commence, sans la
   pastille dorée que le regard finissait par sauter — et elle ne
   s'applique qu'aux H2 : les H3 du corps de texte restent sombres, sans
   quoi la hiérarchie des deux niveaux disparaîtrait. */
.bandeau-entete h2,
.section-header .section-title,
.article-content h2 {
  color: var(--primary-dark);
}

/* Tous les titres de bloc du même côté. Le gabarit centre ses en-têtes de
   section et le titre du corps de texte, mais pas le reste : « Nos
   réalisations » à gauche, « Où nous intervenons » au centre, et un H2
   centré au-dessus de paragraphes alignés à gauche. */
.section-header { margin-bottom: 30px; text-align: left; }
.article-content h2 { text-align: left; }
.section-title { font-size: 52px; font-weight: 600; letter-spacing: -.04em; }
.section-subtitle { font-size: 18px; }

.section-tag {
  background: var(--secondary-color);
  border: none;
  border-radius: 999px;
  color: var(--primary-dark);
  padding: 7px 16px;
}

.service-card, .pricing-card, .testimonial-card, .contact-form-container {
  border-radius: 24px;
  border: 1px solid rgba(18, 16, 22, .07);
  box-shadow: none;
  transition: box-shadow .35s, transform .35s;
}
.service-card:hover, .pricing-card:hover, .testimonial-card:hover {
  transform: translateY(-4px);
  border-color: rgba(18, 16, 22, .07);
  box-shadow: 0 22px 50px rgba(18, 16, 22, .1);
}
.service-card:hover .service-image img { transform: scale(1.05); }
.service-badge {
  background: #fff;
  color: var(--text-dark);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(18, 16, 22, .12);
  text-transform: none;
  padding: 7px 15px;
}
.service-title, .pricing-title { font-weight: 600; font-size: 24px; letter-spacing: -.03em; }

/* Montants : l'original les remplit d'un dégradé doré. */
.service-price-amount, .pricing-amount, .zone-number {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--text-dark);
  font-family: Outfit, Inter, sans-serif;
  font-weight: 600;
  letter-spacing: -.04em;
}

/* Le style en ligne du gabarit borne cette grille à 900 px et la centre :
   elle flottait plus étroite que le corps de texte et que la grille des
   villes, tous deux à la largeur du conteneur. */
.departments-grid { max-width: none; margin-left: 0; margin-right: 0; }

/* Les cartes ne portent plus qu'un nom de région : elles peuvent être
   bien plus étroites, et surtout tenir à deux ou trois par ligne sur
   mobile au lieu d'une seule colonne interminable de treize cases. */
.zones-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }

.zone-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
  padding: 18px 16px;
  border: 1px solid rgba(18, 16, 22, .07);
  border-radius: 18px;
}
.zone-card h3 { margin: 0; font-size: 17px; line-height: 1.25; }

@media (max-width: 700px) {
  /* 140 px : deux colonnes tiennent dès 300 px de large, trois à partir
     de 460 px — l'un ou l'autre selon le téléphone, sans point de
     rupture à deviner. */
  .zones-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
  .zone-card { min-height: 72px; padding: 14px 10px; }
  .zone-card h3 { font-size: 15px; }
}
.zone-card:hover {
  border-color: rgba(18, 16, 22, .07);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(18, 16, 22, .09);
}

/* Les cartes de zones de l'accueil portent des liens — région et villes
   qui ont une page. Sans règle, ils s'affichent en bleu souligné : la
   seule tache de couleur étrangère à la charte sur toute la page. */
/* Toutes les cartes se ressemblent, qu'elles mènent quelque part ou non.
   Le survol suffit à signaler celles qui se cliquent. */
.zone-card a {
  color: inherit;
  text-decoration: none;
  transition: color .2s;
}
.zone-card a:hover { color: var(--primary-dark); }



.feature-icon, .testimonial-avatar, .modal-icon {
  background: var(--secondary-color);
  color: var(--primary-dark);
  border-radius: 16px;
  box-shadow: none;
}
.testimonial-rating { color: var(--primary-color); letter-spacing: 1px; }
.testimonial-text { font-style: normal; }

/* Le corps de texte est borné à 900 px par le gabarit : aligné à rien,
   il flottait plus étroit que le bandeau et les avis, tous deux à la
   largeur du conteneur. Il s'aligne désormais sur eux. */
.article-content { max-width: none; }

.article-content h3 { color: var(--text-dark); font-weight: 600; letter-spacing: -.03em; }
.article-content strong { color: var(--primary-dark); }
.article-content a { color: var(--primary-dark); }
.article-content p { text-align: left; }   /* la justification date le texte */

/* Les vignettes de l'aperçu d'accueil sont des liens. En ligne par
   défaut, un <a> ignorerait le rapport d'image et le recadrage. */
.gallery-item { border-radius: 20px; display: block; }
.gallery-item:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(18, 16, 22, .16); }
.gallery-title {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--text-dark);
  font-weight: 600;
  letter-spacing: -.04em;
}

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

.footer { background: var(--text-dark); padding: 64px 0 28px; }
.footer-brand h3 {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #fff;
  font-weight: 600;
  letter-spacing: -.03em;
  text-transform: none;
}
.footer-zones-list a:hover, .footer-links a:hover { color: var(--accent-color); }

/* ---------- Les deux portes d'entrée du site de beauté ----------

   Sur le site qui réunit les métiers, l'accueil ne demande pas une région
   mais un métier. Deux cartes larges, pas une grille de treize cases :
   il n'y a que deux choix, et ils doivent se voir comme tels.
   ------------------------------------------------------------------- */

.activites-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.activite-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 34px 30px;
  border: 1px solid rgba(18, 16, 22, .08);
  border-radius: 22px;
  background: var(--bg-white);
  color: var(--text-dark);
  text-decoration: none;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.activite-card:hover {
  transform: translateY(-4px);
  border-color: rgba(184, 137, 59, .35);
  box-shadow: 0 20px 44px rgba(18, 16, 22, .1);
}

.activite-nom {
  font-family: Outfit, Inter, sans-serif;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 600;
  letter-spacing: -.035em;
  color: var(--primary-dark);
}
.activite-detail {
  color: var(--text-light);
  font-size: 16px;
  line-height: 1.5;
}
.activite-lien {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  color: var(--text-light);
  font-size: 14px;
  font-weight: 500;
}
.activite-lien svg { transition: transform .25s; }
.activite-card:hover .activite-lien { color: var(--primary-dark); }
.activite-card:hover .activite-lien svg { transform: translateX(3px); }

@media (max-width: 700px) {
  .activites-grid { grid-template-columns: 1fr; gap: 14px; }
  .activite-card { padding: 26px 22px; }
}

/* ---------- Pages région et département ----------

   Leurs en-têtes de liste viennent d'un autre jeu de classes que les blocs
   de l'accueil : titre centré et sombre, surmontant un sous-titre. Ils
   s'alignent sur le reste — titre à gauche, en or, sans sous-titre.
   ------------------------------------------------------------------- */

.cities-header, .departments-header { text-align: left; margin-bottom: 30px; }
.cities-title, .departments-title {
  margin: 0;
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.12;
  color: var(--primary-dark);
}
.cities-subtitle, .departments-subtitle { display: none; }

/* Carte inerte et carte cliquable se ressemblent : seul le survol les
   distingue. `span` étant en ligne par défaut, il faut lui rendre la mise
   en bloc que portait le `<a>`. */
.city-card, .department-card { display: block; }
span.city-card, span.department-card { cursor: default; }
span.city-card:hover, span.department-card:hover {
  transform: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
  border-color: transparent;
}

/* ---------- Galerie ---------- */

/* Trois photos par ligne, jusqu'au téléphone. Le gabarit remplit selon la
   place disponible (`auto-fill` à partir de 300 px), ce qui donne quatre
   colonnes sur un grand écran et une seule sur mobile. */
.gallery-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 1.4vw, 22px);
}
/* Carré, comme les clichés et comme le bandeau de l'accueil. Le gabarit
   impose un 4/5 qui rogne un cinquième de chaque photo — menton ou front
   selon le cadrage. */
.gallery-item { aspect-ratio: 1; }

.gallery-header { text-align: left; margin-bottom: 34px; }
.gallery-title {
  margin-bottom: 10px;
  font-size: clamp(30px, 4vw, 48px);
  color: var(--primary-dark);
  background: none;
  -webkit-text-fill-color: currentColor;
}
.gallery-subtitle { max-width: 620px; font-size: 17px; color: var(--text-light); }

@media (max-width: 768px) {
  /* Le gabarit repasse à une colonne sous 480 px ; on garde les trois. */
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-section { padding: 24px 0 48px; }
}

/* ---------- Modales ---------- */

/* Commandes de la visionneuse, réunies dans une barre basse. Deux
   pastilles posées sur les bords de l'image recouvraient la photo et
   flottaient sans rapport avec elle ; une barre pose les commandes
   ailleurs, et le compteur dit où l'on en est — sans lui, on ne sait ni
   combien il reste ni si l'on a fait le tour. */
.image-modal-barre {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(16, 14, 19, .58);
  backdrop-filter: blur(18px) saturate(140%);
}

.image-modal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: rgba(255, 255, 255, .78);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.image-modal-nav:hover { background: rgba(255, 255, 255, .13); color: #fff; }

.image-modal-compteur {
  min-width: 64px;
  padding: 0 4px;
  color: rgba(255, 255, 255, .66);
  font-family: Outfit, Inter, sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  /* Chiffres de largeur fixe : sans cela la barre tressaute en passant
     de « 9 / 22 » à « 10 / 22 ». */
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  .image-modal-barre { bottom: 18px; }
  .image-modal-nav { width: 34px; height: 34px; }
}

@media (max-width: 968px) {
  .hero-title { font-size: 46px; letter-spacing: -.04em; }
  .section-title { font-size: 36px; }
}
@media (max-width: 480px) {
  .hero-title { font-size: 34px; }
  .hero-form { padding: 20px; border-radius: 20px; }
}


/* ---------- Pied de page : les zones ----------

   Dix-huit régions au lieu de deux départements. Sur deux colonnes — la
   règle du gabarit — la liste ferait neuf lignes et déséquilibrerait le
   pied de page face au bloc de marque. Trois colonnes la ramènent à six.
   ------------------------------------------------------------------- */

.footer-zones-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px 28px;
}
.footer-zones-list li { font-size: 13.5px; }

@media (max-width: 968px) {
  .footer-zones-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .footer-zones-list { grid-template-columns: 1fr; }
}