/* =========================================================================
   Amélioration de la version claire
   Fond blanc conservé. Ce fichier resserre les espacements, densifie les
   sections et ajoute la mosaïque qui fait vivre les photos restantes.
   Chargé en dernier : il a le mot de la fin sur site.css.
   ========================================================================= */

:root {
  --script: "Pinyon Script", "Marcellus", cursive;

  /* Le vide était le vrai défaut : moitié moins de respiration verticale. */
  --bloc: clamp(3.25rem, 5.5vw, 5.5rem);
  --marge: clamp(1.25rem, 4vw, 4rem);
  --max: 88rem;
}

/* --- Grain léger, sur fond clair ---------------------------------------- */

.grain {
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Un accent en script, avec parcimonie -------------------------------- */
/* Le nom d'Amélie et les années, rien d'autre : sur fond blanc, du script
   partout deviendrait illisible. */

.u-cursive {
  font-family: var(--script);
  font-size: clamp(2.25rem, 1rem + 3vw, 3.5rem);
  line-height: 0.95;
  color: var(--or-texte);
  font-weight: 400;
}

/* --- Sections resserrées -------------------------------------------------- */

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

.tete {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.hero {
  min-height: min(78svh, 40rem);
}

.banniere {
  min-height: min(42svh, 22rem);
}

/* --- Badge posé sur une image -------------------------------------------- */

.c-badge {
  position: absolute;
  z-index: 3;
  width: clamp(4.5rem, 7vw, 6.5rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: var(--or);
}

.c-badge__roue {
  width: 42%;
}

.c-badge__texte {
  position: absolute;
  inset: 0;
  animation: tourne 24s linear infinite;
}

.c-badge__texte text {
  font-family: var(--sans);
  font-size: 7.6px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: currentColor;
  font-weight: 600;
}

/* --- Mosaïque ------------------------------------------------------------ */
/* Toutes les photos qui ne trouvaient pas leur place ailleurs. Des tailles
   inégales, une grille dense : c'est ce qui remplit les vides et donne le
   volume qui manquait. */

.mosaique {
  display: grid;
  /* Trois colonnes, une seule tuile double : six photos pavent alors un
     rectangle plein, trois rangées sans le moindre trou. L'ancienne grille
     de six colonnes à spans variables ne pavait pas — c'est elle qui ouvrait
     les blancs en bas de section. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* La hauteur de rangée n'est pas fixée en vw : ce sont les tuiles simples
     qui la donnent, en 4/3 paysage. Une rangée figée à 13vw écrasait les
     photos en bandeaux de 130 pixels. */
  grid-auto-rows: auto;
  gap: clamp(0.4rem, 0.8vw, 0.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.mosaique li {
  position: relative;
  overflow: hidden;
  background: var(--creme);
  grid-column: span 1;
  grid-row: span 1;
  aspect-ratio: 4 / 3;
}

/* La première tuile prend le carré de gauche — deux colonnes, deux rangées.
   Les cinq suivantes comblent très exactement les cinq cases restantes.
   Le compte doit rester un multiple de trois : voir build/pages.py. */
.mosaique li:first-child {
  grid-column: span 2;
  grid-row: span 2;
  /* Elle prend la hauteur des deux rangées qu'elle couvre, gouttière
     comprise : c'est ce qui garde le bloc d'aplomb. */
  aspect-ratio: auto;
}

.mosaique img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.mosaique li:hover img {
  transform: scale(1.06);
}

.mosaique figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 2.25rem 0.75rem 0.55rem;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to top, rgba(4, 44, 5, 0.85), transparent);
  opacity: 0;
  transition: opacity 0.4s;
}

.mosaique li:hover figcaption {
  opacity: 1;
}

/* Deux colonnes : toutes les tuiles redeviennent égales, sinon la grande
   laisserait une case impaire en fin de grille. */
@media (max-width: 62rem) {
  .mosaique {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mosaique li:first-child {
    grid-column: span 1;
    grid-row: span 1;
  }
}

@media (max-width: 40rem) {
  .mosaique {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Bande pleine largeur ------------------------------------------------ */

.o-bande {
  position: relative;
  min-height: min(62svh, 32rem);
  display: grid;
  align-items: center;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}

.o-bande__fond {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.o-bande__fond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.o-bande::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(4, 44, 5, 0.88) 0%, rgba(4, 44, 5, 0.3) 66%);
}

.o-bande .enveloppe {
  position: relative;
  z-index: 2;
}

.o-bande h2 {
  color: #fff;
  font-size: var(--t-titre);
  max-width: 16ch;
}

.o-bande p {
  max-width: 38ch;
  margin-top: 1rem;
  color: rgba(255, 255, 255, 0.86);
}

.o-bande .surtitre {
  color: var(--or);
}

.o-bande .bouton {
  margin-top: 1.75rem;
  background: var(--or);
  border-color: var(--or);
  color: var(--vert-sombre);
  border-radius: 999px;
  padding: 0.8rem 0.8rem 0.8rem 1.5rem;
  gap: 0.85rem;
}

.o-bande .bouton:hover {
  background: #fff;
  border-color: #fff;
}

/* La flèche dans sa propre pastille, au ras du bord droit. */
.bouton__rond {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: rgba(4, 44, 5, 0.14);
  transition: transform 0.6s cubic-bezier(0.32, 0.72, 0, 1);
}

.bouton:hover .bouton__rond {
  transform: translate(3px, -1px) scale(1.06);
}

.bouton:active {
  transform: scale(0.985);
}

/* --- Densification des blocs existants ----------------------------------- */

.duo {
  gap: clamp(1.5rem, 3.5vw, 3rem);
}

.chiffres {
  gap: clamp(1rem, 2.5vw, 2rem);
}

.prestations {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

.carte__corps {
  padding: clamp(1rem, 1.8vw, 1.4rem);
  gap: 0.45rem;
}

.carte__image,
.carte__media {
  aspect-ratio: 1 / 1;
}

.galerie {
  gap: clamp(0.4rem, 0.8vw, 0.75rem);
}

.duo--haut {
  align-items: start;
}

/* Les photos des duos sont recadrées : une photo carrée ou verticale
   doublait la hauteur de la colonne de texte et ouvrait un grand vide
   blanc en face. */
.duo figure picture img,
.duo > figure > img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 40%;
}

.duo--haut > div {
  align-self: center;
}

/* --- Corrections ---------------------------------------------------------- */

/* La police du corps de texte : site.css réclamait « Instrument Sans », qui
   n'est plus chargée depuis que la référence a imposé Noto Sans Display.
   Tout le texte retombait sur la police système. */
:root {
  --sans: "Noto Sans Display", -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Un lien qui enveloppe une image doit être un bloc : en inline, il ne
   remplit pas sa tuile et laisse un filet sous l'image. */
.mosaique li a,
.galerie li a {
  display: block;
  width: 100%;
  height: 100%;
}

/* Le grain passait par-dessus l'entête collante. */
.grain {
  z-index: 80;
}

/* --- Défilement ----------------------------------------------------------- */
/* Trois défauts se cumulaient et rendaient le scroll saccadé :

   1. `scroll-behavior: smooth` en CSS pendant que Lenis lisse déjà le
      défilement — les deux se battaient sur la même position ;
   2. `overflow-x: hidden` sur body, qui crée un conteneur de défilement
      parasite et casse le `position: sticky` de l'entête ;
   3. un `backdrop-filter` sur cette même entête collante, repeint à chaque
      image pendant que Lenis translate la page. */

html {
  scroll-behavior: auto;
}

body {
  overflow-x: clip;
}

.entete {
  backdrop-filter: none;
  background: rgba(255, 255, 255, 0.97);
}

/* Le grain est repeint à chaque image : on le fige sur sa propre couche. */
.grain {
  will-change: opacity;
  transform: translateZ(0);
}

/* Les images de tuile sont surdimensionnées en CSS, pas par une animation :
   le parallaxe ne fait plus que translater, et la marge de 12 % évite qu'il
   découvre le bord du cadre. */
.carte__media .parallaxe,
.carte__image .parallaxe,
.mosaique .parallaxe {
  height: 112%;
  top: -6%;
}

/* =========================================================================
   Passe de conformité aux préférences de Brayan (CLAUDE.md)
   ========================================================================= */

/* --- Le sous-menu qui se refermait sous la souris -------------------------
   Signalé le 30/07 et le 22/09, sur deux sites différents. La cause : un
   espace de 0,6 rem entre le bouton et le panneau. En traversant ce vide, la
   souris quittait le groupe et déclenchait la fermeture. On comble l'espace
   par une zone de survol invisible. */

.nav__groupe::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -1rem;
  right: -1rem;
  height: 1.1rem;
}

.nav__groupe[data-ouvert="non"]::after {
  pointer-events: none;
}

/* --- Hero moins haut ------------------------------------------------------
   « réduis les hero là c'est beaucoup trop grand », « moins grand les hero ». */

.hero {
  min-height: min(66svh, 33rem);
}

.banniere {
  min-height: min(36svh, 18rem);
}

.o-bande {
  min-height: min(48svh, 25rem);
}

/* --- Plus de numéros posés à côté des titres -----------------------------
   « cette présentation avec numéro titres, oublie, je veux plus jamais le
   voir sur un site, ça fait IA à mort ». */

.carte__numero,
.c-card__num {
  display: none;
}

/* --- Visionneuse : l'image zoome au centre -------------------------------
   « quand on clique je veux pas que ça ouvre une fenêtre, je veux que ça
   zoome sur l'image pour qu'elle passe au centre de l'écran ». Pas de cadre,
   pas de barre de navigation. */

.zoom {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(4, 44, 5, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.45s;
  cursor: zoom-out;
}

.zoom[data-ouvert="oui"] {
  opacity: 1;
  visibility: visible;
}

.zoom img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transform: scale(0.92);
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.7);
}

.zoom[data-ouvert="oui"] img {
  transform: scale(1);
}

.zoom__legende {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  text-align: center;
  font-size: var(--t-petit);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.galerie li,
.mosaique li {
  cursor: zoom-in;
}

/* --- Les listes de détail portent une image ------------------------------
   « un peu trop de texte posé comme ça », « rajoute des images », « que ça
   fasse moins pavé de texte ». Le détail d'une prestation et sa FAQ ne
   peuvent pas être deux colonnes de texte nu. */

.avec-image {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  /* Les deux colonnes font exactement la même hauteur. C'est sa règle la
     plus répétée : le bloc texte ne dépasse pas la photo — et la photo ne
     dépasse pas le texte non plus, sinon le vide passe de l'autre côté. */
  align-items: stretch;
}

.avec-image figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.avec-image figure picture,
.avec-image figure > img {
  flex: 1;
  min-height: 0;
}

.avec-image figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

.avec-image figcaption {
  margin-top: 0.7rem;
  font-size: var(--t-petit);
  color: var(--gris);
}

@media (max-width: 62rem) {
  .avec-image {
    grid-template-columns: 1fr;
  }

  .avec-image figure img {
    aspect-ratio: 16 / 9;
    height: auto;
  }
}

/* --- Filet de sécurité du loader ------------------------------------------
   Le voile de chargement masquait la page entière tant que le JavaScript ne
   l'avait pas retiré. Réseau coupé, CDN bloqué, script en erreur : le
   visiteur restait devant un écran vert, et le site paraissait mort.

   Deux garde-fous : la classe n'est plus dans le HTML mais posée par un
   script en ligne — sans JavaScript, le voile n'existe jamais — et cette
   animation le fait disparaître au bout de six secondes quoi qu'il arrive. */

/* Pas d'animation de secours en CSS : une animation prend le pas sur les
   déclarations normales, et celle-ci empêchait la règle
   « body:not(.is--loading) .loader » de masquer le voile. Le filet est
   désormais posé en JavaScript, juste à côté de la pose de la classe. */

body:not(.is--loading) {
  overflow: auto;
}

/* =========================================================================
   Conventions maison
   Reprises de ses sites existants — Le Torey surtout, et Groupe Solyance.
   Le défaut signalé : « met moi des marges c'est bizarre collé ». Les cartes
   étaient séparées par un filet d'un pixel sur fond de grille. Chez lui,
   une carte n'a ni cadre ni fond : une image, le texte dessous aligné sur
   le bord de l'image, et une vraie gouttière entre les colonnes.
   ========================================================================= */

:root {
  /* Le Torey : --contenant 1180px, --gouttiere clamp(1.25rem,5vw,4rem). */
  --max: 76rem;
  --marge: clamp(1.25rem, 5vw, 4rem);
  --gouttiere: clamp(1.5rem, 3vw, 2.75rem);
}

/* --- Cartes de prestation ------------------------------------------------ */

.prestations {
  background: none;
  border: 0;
  gap: var(--gouttiere);
}

@media (min-width: 64rem) {
  .prestations {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Cinq cartes : trois puis deux, chacune gardant sa largeur de colonne
     plutôt que de s'étirer sur la moitié de la page. */
  .prestations > *,
  .prestations > :nth-last-child(2),
  .prestations > :last-child {
    grid-column: auto;
  }
}

.carte {
  background: none;
  border: 0;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.carte:hover {
  transform: translateY(-4px);
}

.carte::after {
  display: none;
}

.carte__corps {
  padding: 1.35rem 0 0;
}

.carte__detail {
  padding-top: 1rem;
}

/* --- Listes de détail ----------------------------------------------------- */
/* Même correction : des filets de séparation, pas une grille sur fond gris. */

.detail {
  background: none;
  border-block: 0;
  gap: 0;
}

.detail li {
  background: none !important;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--trait);
}

.detail li:first-child {
  border-top: 1px solid var(--trait);
}

/* --- Liens entre prestations ---------------------------------------------- */

.suite {
  background: none;
  border: 0;
  gap: var(--gouttiere);
}

.suite a {
  background: none;
  border-top: 1px solid var(--trait);
  padding: 1.25rem 0 0;
}

.suite a:hover {
  background: none;
  color: var(--vert);
}

/* --- Galeries ------------------------------------------------------------- */

.galerie {
  gap: var(--gouttiere);
}

/* La mosaïque garde un serrage court : c'est son principe. Mais plus le
   filet d'un pixel. */
.mosaique {
  gap: 0.75rem;
}

/* =========================================================================
   Cartes de prestation — deuxième passe
   « Je trouve simple. » La convention maison interdit le cadre et le fond,
   donc le relief ne peut venir que de la typographie, d'un filet qui se
   trace, et d'un jeton qui se pose sur la photo. Rien n'est ajouté au repos :
   tout se révèle au survol.
   ========================================================================= */

.carte {
  position: relative;
  isolation: isolate;
}

/* --- La photo ------------------------------------------------------------ */

.carte__media {
  position: relative;
  background: var(--vert-sombre);
}

/* Un voile vert qui se retire : la photo s'éclaircit quand on s'y intéresse. */
.carte__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, rgba(4, 44, 5, 0.55) 0%, rgba(4, 44, 5, 0) 55%);
  opacity: 0.85;
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

.carte:hover .carte__media::after {
  opacity: 0.35;
}

/* Le jeton fléché, posé au coin de la photo — même pastille que les boutons. */
.carte__jeton {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 3;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--or);
  color: var(--vert-sombre);
  opacity: 0;
  transform: translateY(0.65rem) scale(0.82);
  transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.carte:hover .carte__jeton,
.carte:focus-visible .carte__jeton {
  opacity: 1;
  transform: none;
}

/* --- Le corps ------------------------------------------------------------ */

.carte__corps {
  padding: 1.25rem 0 0;
  gap: 0;
}

/* L'étiquette de discipline, au-dessus du nom : elle situe la prestation
   avant qu'on lise le titre. */
.carte__etiquette {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--or-texte);
  margin-bottom: 0.55rem;
}

.carte h3 {
  font-size: clamp(1.5rem, 1rem + 1.2vw, 2rem);
  line-height: 1.02;
  margin-bottom: 0.75rem;
}

/* Le filet qui se trace sous le titre : le seul mouvement graphique. */
.carte h3::after {
  content: "";
  display: block;
  width: 2.25rem;
  height: 2px;
  margin-top: 0.75rem;
  background: var(--or);
  transform-origin: left;
  transition: width 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.carte:hover h3::after,
.carte:focus-within h3::after {
  width: 5.5rem;
}

.carte p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--gris);
}

.carte__detail {
  margin-top: 1rem;
  padding-top: 0;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

.carte__detail svg {
  display: none;
}

/* =========================================================================
   Cartes — style « carte-photo »
   D'après la référence fournie : image pleine à coins arrondis, nom et prix
   posés sur la photo en bas à gauche, flèche diagonale dans une pastille
   blanche en haut à droite. Plus de corps de texte sous l'image.
   ========================================================================= */

.prestations {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(0.85rem, 1.6vw, 1.35rem);
}

@media (min-width: 64rem) {
  .prestations {
    grid-template-columns: repeat(5, 1fr);
  }

  .prestations > *,
  .prestations > :nth-last-child(2),
  .prestations > :last-child {
    grid-column: auto;
  }
}

.carte {
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.carte:hover {
  transform: translateY(-6px);
}

.carte__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 14px;
  background: var(--vert-sombre);
}

/* Le dégradé qui rend le texte lisible sans assombrir toute la photo. */
.carte__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top,
    rgba(4, 44, 5, 0.82) 0%,
    rgba(4, 44, 5, 0.34) 28%,
    rgba(4, 44, 5, 0) 55%);
  opacity: 1;
  transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

.carte:hover .carte__media::after {
  opacity: 0.88;
}

/* La pastille blanche, flèche diagonale, en haut à droite. */
.carte__jeton {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 3;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--vert-sombre);
  opacity: 1;
  transform: none;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.4s;
}

.carte:hover .carte__jeton {
  transform: translate(2px, -2px) scale(1.08);
  background: var(--or);
}

/* Le nom et le prix, posés sur la photo. */
.carte__legende {
  position: absolute;
  z-index: 3;
  left: 1rem;
  right: 1rem;
  bottom: 0.95rem;
  color: #fff;
}

.carte__legende h2,
.carte__legende h3 {
  color: #fff;
  font-size: clamp(1.0625rem, 0.9rem + 0.45vw, 1.3125rem);
  line-height: 1.15;
  margin: 0 0 0.3rem;
  letter-spacing: -0.005em;
}

.carte__legende h2::after,
.carte__legende h3::after {
  display: none;
}

.carte__prix {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.82);
}

/* Les restes de la version précédente n'ont plus lieu d'être. */
.carte__corps,
.carte__etiquette,
.carte__detail {
  display: none;
}

/* Les coins arrondis sur les autres visuels, pour que la page soit d'une
   seule famille. */
.galerie li,
.mosaique li,
.duo figure picture,
.avec-image figure picture,
.o-figure picture,
.fiche__slider {
  border-radius: 14px;
  overflow: hidden;
}

/* --- Lisibilité de la légende --------------------------------------------
   Le prix se perdait sur les photos claires, et une légende sur deux lignes
   décalait le nom d'une carte par rapport aux autres. Le dégradé descend
   plus bas et plus franc ; la légende réserve la même hauteur partout. */

.carte__media::after {
  background: linear-gradient(to top,
    rgba(4, 44, 5, 0.94) 0%,
    rgba(4, 44, 5, 0.78) 14%,
    rgba(4, 44, 5, 0.32) 38%,
    rgba(4, 44, 5, 0) 62%);
}

.carte__legende {
  display: grid;
  align-content: end;
  min-height: 3.75rem;
}

.carte__prix {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
  text-shadow: 0 1px 8px rgba(4, 44, 5, 0.5);
}

.carte__legende h2,
.carte__legende h3 {
  text-shadow: 0 1px 10px rgba(4, 44, 5, 0.45);
}

/* =========================================================================
   Cartes — lisibilité
   Le prix en 13 px, blanc à 92 % sur une photo claire, ne passait aucun
   critère de contraste. Trois corrections : des cartes plus larges, un
   voile assez opaque pour que le blanc soit vraiment blanc sur fond sombre,
   et des tailles de texte qui tiennent la route pour un malvoyant.
   ========================================================================= */

/* Trois cartes par rangée au lieu de cinq : elles passent de 215 à 370 px
   de large, et tout le texte grandit avec. */
@media (min-width: 64rem) {
  .prestations {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 40rem) and (max-width: 63.99rem) {
  .prestations {
    grid-template-columns: repeat(2, 1fr);
  }
}

.prestations {
  gap: clamp(1rem, 2vw, 1.5rem);
}

.carte__media {
  aspect-ratio: 4 / 5;
  border-radius: 16px;
}

/* Le voile : opaque là où le texte se pose, pour que le blanc soit lu sur
   du vert sombre et non sur du sable en plein soleil. Rapport de contraste
   mesuré ainsi : 15:1 au lieu de 2,4:1. */
.carte__media::after {
  background: linear-gradient(to top,
    rgba(4, 44, 5, 0.97) 0%,
    rgba(4, 44, 5, 0.93) 22%,
    rgba(4, 44, 5, 0.62) 38%,
    rgba(4, 44, 5, 0.12) 56%,
    rgba(4, 44, 5, 0) 70%);
}

.carte:hover .carte__media::after {
  opacity: 1;
}

.carte__legende {
  left: 1.35rem;
  right: 1.35rem;
  bottom: 1.25rem;
  min-height: 0;
}

.carte__legende h2,
.carte__legende h3 {
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
  margin-bottom: 0.4rem;
  text-shadow: none;
}

.carte__prix {
  font-size: 1rem;
  line-height: 1.4;
  color: #fff;
  font-weight: 400;
  text-shadow: none;
}

.carte__jeton {
  top: 1.1rem;
  right: 1.1rem;
  width: 2.75rem;
  height: 2.75rem;
}

/* Le focus clavier doit se voir sur la photo comme sur le fond blanc. */
.carte:focus-visible {
  outline: 3px solid var(--or);
  outline-offset: 4px;
  border-radius: 18px;
}

/* --- Le prix était gris, pas blanc ---------------------------------------
   « .carte p » (une classe + un élément) l'emportait sur « .carte__prix »
   (une seule classe) et lui repassait la couleur grise du corps de texte.
   Sur une photo sombre, ça donnait du gris moyen sur vert foncé : illisible.
   Rapport mesuré avant 2,1:1, après 15,8:1. */

.carte .carte__prix,
.carte__legende .carte__prix {
  color: #fff;
}

.carte .carte__legende h2,
.carte .carte__legende h3 {
  color: #fff;
}

/* --- La bande respire ------------------------------------------------------
   Elle touchait les deux bords de l'écran. On la rentre dans la marge de la
   page et on lui donne le même rayon que les cartes. */

.o-bande {
  margin-inline: var(--marge);
  border-radius: 18px;
  min-height: min(44svh, 23rem);
}

@media (max-width: 40rem) {
  .o-bande {
    margin-inline: 0;
    border-radius: 0;
  }
}

/* --- Une description courte sous le nom, plutôt que le prix ---------------
   Elle tient sur deux lignes au plus. La hauteur est réservée pour que les
   noms des cinq cartes restent alignés, quelle que soit la longueur. */

.carte__prix {
  font-size: 0.9375rem;
  line-height: 1.4;
  max-width: 26ch;
}

.carte__legende {
  min-height: 4.25rem;
}

/* --- La carte « une question ? » -----------------------------------------
   Sixième carte, sans photo : elle occupe la place vide de la rangée de deux
   et sert de sortie vers le contact. Aplat vert, la roue du logo en
   filigrane, pour qu'on voie tout de suite que ce n'est pas une prestation. */

.carte--question .carte__media {
  background: var(--vert);
  display: grid;
  place-items: center;
}

.carte--question .carte__media::after {
  background: linear-gradient(to top,
    rgba(4, 44, 5, 0.6) 0%,
    rgba(4, 44, 5, 0.12) 45%,
    rgba(4, 44, 5, 0) 70%);
}

.carte__filigrane {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -60%;
  width: 46%;
  color: rgba(185, 162, 10, 0.3);
  transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1),
              color 0.6s;
}

.carte--question:hover .carte__filigrane {
  transform: rotate(60deg);
  color: rgba(185, 162, 10, 0.5);
}

.carte--question .carte__jeton {
  background: var(--or);
}

.carte--question:hover .carte__jeton {
  background: #fff;
}

/* --- La bande respire aussi en haut et en bas -----------------------------
   La marge latérale était posée, mais pas la verticale : la bande venait
   buter contre la section crème au-dessus et la section blanche en dessous,
   sans un pixel entre les deux. */

.o-bande {
  margin-block: clamp(1.5rem, 3.5vw, 3.5rem);
}

@media (max-width: 40rem) {
  .o-bande {
    margin-block: clamp(1.25rem, 4vw, 2rem);
  }
}

/* --- Marge intérieure de la bande ----------------------------------------
   Le contenu touchait le haut et le bas du bloc : le bouton arrivait à 7 px
   du bord. La bande n'avait aucun padding vertical, seulement un centrage. */

.o-bande {
  padding-block: clamp(2.75rem, 5vw, 4.5rem);
}

/* =========================================================================
   Équilibre des grilles — aucune rangée ne doit finir trouée
   « fait en sorte d'équilibré pour qu'il n'y ait pas de blanc ». Le coupable
   était `repeat(auto-fit, …)` : le navigateur décidait du nombre de colonnes
   sans savoir combien de photos il restait à poser. Quatre vignettes dans
   trois colonnes laissaient deux cases blanches en bout de section.
   On fixe le nombre de colonnes, et le nombre de photos en est un multiple.
   ========================================================================= */

.galerie--plein {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 62rem) {
  .galerie--plein {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  .galerie--plein {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================================
   Vidéos
   Les rushes de la cliente, montés court et muets. Une vidéo se comporte
   ici comme une photo : elle remplit son cadre, elle ne propose aucun
   bouton, elle ne fait aucun bruit. La lecture est pilotée par le script.
   ========================================================================= */

.video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--vert-sombre);
}

/* Le hero respire déjà par son contenu : le lent zoom de l'affiche fixe
   n'a plus lieu d'être sur une image qui bouge. */
.hero__fond .video {
  animation: none;
}

/* La vidéo en vis-à-vis d'un texte : même cadre arrondi que les photos,
   même gouttière, et un format paysage franc. */
.o-video {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.o-video .video {
  transition: transform 1.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.o-video:hover .video {
  transform: scale(1.03);
}

/* =========================================================================
   Le numéro de téléphone dans l'entête
   Il était rangé dans le tiroir du menu : sur un téléphone, il partait hors
   écran avec la navigation et n'était joignable qu'après avoir ouvert le
   burger. Pour un site dont l'objectif est de faire sonner ce numéro, c'est
   l'inverse de ce qu'il faut. Une seconde version, posée dans la barre,
   prend le relais en dessous de 52rem — pastille avec le numéro, puis icône
   seule quand la largeur ne suffit plus.
   ========================================================================= */

.tel--barre {
  display: none;
}

@media (max-width: 52rem) {
  .tel--barre {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    font-size: 0.9375rem;
    white-space: nowrap;
  }

  /* Le burger reprend sa place à droite du numéro. */
  .burger {
    margin-left: 0.75rem;
  }
}

@media (max-width: 30rem) {
  .tel--barre {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }

  .tel--barre .tel__numero {
    display: none;
  }

  .tel--barre svg {
    width: 17px;
    height: 17px;
  }
}

/* Le bouton téléphone de l'entête était collé au numéro : `.nav a` de
   site.css impose `padding: 0.45rem 0`, et cette règle (0,1,1) l'emportait
   sur `.tel` (0,1,0) — le rembourrage horizontal était donc nul. On passe
   par `.entete .tel` (0,2,0), qui gagne. */
.entete .tel {
  padding: 0.85rem 1.6rem;
  gap: 0.65rem;
}

@media (max-width: 52rem) {
  .tel--barre {
    padding: 0.75rem 1.35rem;
  }
}

@media (max-width: 30rem) {
  .tel--barre {
    padding: 0;
  }
}