/* ═══════════════════════════════════════════════════════════════════════════
   LE 4 MAINS — BALMA · feuille de style unique du site
   Tous les sélecteurs sont préfixés .l4m : ces pages finiront dans un
   WordPress dont le thème PUR a ses propres styles ; sans préfixe, les deux
   se mélangent et c'est le thème qui gagne.

   AUCUNE POLICE EXTERNE — une police Google, c'est un fichier bloquant de
   plus et 130 ms perdus au premier affichage. Georgia est partout.

   DEUX AMBIANCES QUI ALTERNENT. Elle a écrit « noir ou brun foncé avec de
   l'or », mais le site qu'elle a montré en référence n'est sombre qu'en
   ouverture : tout ce qui s'y lit est clair. On fait pareil — le sombre pour
   l'émotion, le crème pour la lecture. Une section claire ne réécrit rien :
   elle redéfinit les variables, et tout son contenu suit.
   ═══════════════════════════════════════════════════════════════════════ */

.l4m {
  --nuit:   #0B0908;
  --brun:   #17110D;
  --or:     #C6A15B;
  --or-vif: #E0C48C;
  --creme:  #F2ECE2;
  --doux:   #9C9084;
  --trait:  #2A211A;
  /* Les deux teintes de la seule banniere claire du site, celle des cartes
     cadeaux : une encre assez sombre pour se lire sur la soie, et un or assez
     fonce pour ne pas s'y noyer. */
  --encre-claire: #1A1512;
  --or-fonce: #8A6A28;
  --texte-fort: #DED5C8;
  --texte:      #D0C6BA;
  --texte-doux: #B8AEA2;
  --texte-fin:  #8E8378;

  background: var(--nuit);
  color: var(--creme);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.l4m *, .l4m *::before, .l4m *::after { box-sizing: border-box; }
/* height:auto EST OBLIGATOIRE ici, ce n'est pas une précaution.
   Les images portent leurs dimensions réelles en attributs (width="800"
   height="1423") pour que le navigateur réserve la place avant de les avoir
   téléchargées. Sans « height: auto », il applique cette hauteur AU PIED DE LA
   LETTRE : la largeur se contente des 154 px de la colonne, la hauteur reste à
   533 px, et la photo part en colonne étirée sur tout l'écran. C'est
   exactement ce que Cameron a vu sur son iPhone. */
.l4m img { max-width: 100%; height: auto; display: block; }
.l4m a, .l4m dd, .l4m .fine { overflow-wrap: anywhere; }
.l4m h1, .l4m h2, .l4m h3, .l4m .prix, .l4m .chiffre {
  font-family: Georgia, "Times New Roman", serif; font-weight: 400; margin: 0;
}
/* LA COULEUR DES TITRES, ÉCRITE NOIR SUR BLANC — et ce n'est pas redondant.
   Sur l'aperçu, nos titres n'avaient aucune couleur propre : ils héritaient du
   crème du conteneur, et c'était parfait. Posés dans son WordPress, ils
   ressortaient en BLEU MARINE : son thème PUR a une règle « h1, h2 { color:
   #2C396B } », et l'héritage perd toujours contre une règle explicite, même
   moins spécifique.
   Résultat : un aperçu impeccable, et des titres illisibles chez la cliente.
   On rétablit donc l'héritage en le DEMANDANT. La règle est placée ici, tôt
   dans la feuille : les titres qui ont une couleur voulue (l'italique doré du
   titre d'ouverture) la gardent, puisqu'ils sont écrits plus loin et plus
   précisément. */
.l4m h1, .l4m h2, .l4m h3, .l4m h4, .l4m h5, .l4m h6 { color: inherit; }
.l4m p { margin: 0 0 1rem; }
.l4m p:last-child { margin-bottom: 0; }

/* Le filet doré : l'ornement, jamais l'aplat. En trait fin, l'or tient la
   page ; en grande surface il vire au jaune sale. */
.l4m .filet { width: 3rem; height: 1px; background: var(--or); border: 0; margin: 0 0 1.5rem; }

.l4m .dedans { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 60rem) { .l4m .dedans { padding: 0 3rem; } }

/* ── Les boutons ─────────────────────────────────────────────────────────── */
.l4m .boutons { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2.2rem; }
.l4m .bouton {
  display: inline-block; padding: .95rem 1.9rem; text-decoration: none;
  font-size: .93rem; letter-spacing: .04em; border: 1px solid var(--or);
  border-radius: 999px;
  transition: background .18s ease, color .18s ease;
}
.l4m .bouton-plein { background: var(--or); color: #14100B; font-weight: 600; }
.l4m .bouton-plein:hover { background: var(--or-vif); }
.l4m .bouton-vide { color: var(--or-vif); }
.l4m .bouton-vide:hover { background: rgba(198,161,91,.12); }
.l4m .bouton:focus-visible, .l4m a:focus-visible, .l4m button:focus-visible,
.l4m summary:focus-visible { outline: 2px solid var(--or-vif); outline-offset: 3px; }

/* ── L'en-tête : menu à tiroir à gauche, logo, rendez-vous à droite ──────── */
.l4m-entete { position: absolute; top: 0; left: 0; right: 0; z-index: 40; padding: .9rem 0; }
.l4m-entete.solide { position: static; background: var(--nuit); border-bottom: 1px solid var(--trait); }
.l4m-entete .dedans { display: flex; align-items: center; gap: 1rem; }
.l4m-burger {
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 44px; height: 44px; flex: none;
  border-radius: 999px;
  background: rgba(11,9,8,.35); border: 1px solid rgba(198,161,91,.55); cursor: pointer; padding: 0;
}
.l4m-burger span { display: block; width: 20px; height: 2px; background: var(--creme); }
.l4m-entete .logo { display: block; flex: none; }
.l4m-entete .logo img { width: clamp(7.5rem, 16vw, 11rem); height: auto; }
.l4m-entete .menu { display: none; gap: 1.9rem; margin-left: auto; }
.l4m-entete .menu a {
  color: var(--texte-fort); text-decoration: none; font-size: .88rem; letter-spacing: .03em;
  padding-bottom: .25rem; border-bottom: 1px solid transparent;
}
.l4m-entete .menu a:hover, .l4m-entete .menu a[aria-current="page"] { color: var(--or-vif); border-bottom-color: var(--or); }
.l4m-entete .rdv { margin-left: auto; padding: .62rem 1rem; font-size: .8rem; white-space: nowrap; }
/* Sur téléphone le bouton dit « Réserver » : « Prendre rendez-vous » ne tient
   pas à côté du burger et du logo, et lui interdire de se couper le faisait
   sortir de l'écran de 9 px. Le libellé long revient dès qu'il y a la place. */
.l4m-entete .rdv .long { display: none; }
@media (min-width: 62rem) {
  .l4m-burger { display: none; }
  .l4m-entete .menu { display: flex; }
  .l4m-entete .rdv { margin-left: 0; padding: .7rem 1.35rem; font-size: .84rem; }
  .l4m-entete .rdv .court { display: none; }
  .l4m-entete .rdv .long { display: inline; }
}

/* Le tiroir : la navigation complète, pour l'écran qui n'a pas la place du
   menu en ligne. Il se ferme d'une croix, d'un lien ou de la touche Échap. */
.l4m-tiroir {
  position: fixed; inset: 0; z-index: 50; background: rgba(11,9,8,.97);
  display: flex; flex-direction: column; justify-content: center;
  padding: 4.5rem 2rem 2.5rem; opacity: 0; visibility: hidden;
  transition: opacity .22s ease, visibility .22s;
}
/* La classe est posee SUR LE TIROIR, pas sur un ancetre. La version
   precedente, « .l4m.menu-ouvert .l4m-tiroir », exigeait qu'un parent porte
   deux classes : elle ne s'appliquait pas, et le menu ne s'ouvrait jamais —
   ni dans son WordPress, ni sur l'apercu. Ici il n'y a plus d'ascendance a
   respecter, donc plus rien qui puisse la casser. */
.l4m-tiroir.ouvert { opacity: 1; visibility: visible; }
.l4m-tiroir a {
  color: var(--creme); text-decoration: none; font-family: Georgia, serif;
  font-size: clamp(1.35rem, 5.5vw, 1.7rem); padding: .85rem 0;
  border-bottom: 1px solid var(--trait);
}
.l4m-tiroir a:hover { color: var(--or-vif); }
.l4m-tiroir .fermer {
  position: absolute; top: 1rem; right: 1.3rem; width: 44px; height: 44px;
  background: none; border: 1px solid var(--trait); color: var(--creme);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.l4m-tiroir .mention { margin-top: 1.6rem; font-size: .82rem; color: var(--doux); }

/* ── L'ouverture ─────────────────────────────────────────────────────────── */
/* Plein écran, comme le site qu'elle cite. Le plafond de 44 rem servait à
   empêcher une ouverture démesurée dans mes captures de contrôle ; sur un vrai
   écran il la rendait timide. On borne à 52 rem : assez pour remplir un
   portable, pas assez pour qu'un grand écran doive faire défiler deux fois. */
.l4m-hero { position: relative; min-height: min(100svh, 52rem); display: flex; align-items: flex-end; overflow: hidden; }
/* La balise <picture> s'intercale entre la section et l'image : sans cette
   ligne, l'image cesse de se poser par-dessus la section. */
.l4m-hero picture { position: absolute; inset: 0; }
.l4m-hero img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 48%;
}
.l4m-hero::after {
  content: ""; position: absolute; inset: 0;
  /* Allégé sur sa remarque : les photos paraissaient dans l'ombre. On garde
     la densité en bas, sous le titre et les boutons, et on laisse respirer le
     haut de l'image. */
  /* TROIS BANDES, PAS UN VOILE UNIFORME.
     En allégeant d'un bloc pour répondre à sa remarque — « les photos semblent
     dans l'ombre » — j'ai rendu le menu et le sur-titre illisibles : le haut de
     la photo est clair, et le texte y est blanc.
     On assombrit donc SEULEMENT là où il y a des mots : une bande courte en
     haut pour le menu, une bande en bas pour le titre et les boutons. Entre les
     deux, l'image reste telle qu'elle a été prise. */
  background:
    linear-gradient(to bottom, rgba(11,9,8,.78) 0%, rgba(11,9,8,.34) 11%, rgba(11,9,8,0) 21%),
    linear-gradient(to top, var(--nuit) 2%, rgba(11,9,8,.86) 28%, rgba(11,9,8,.46) 52%, rgba(11,9,8,.06) 74%);
}
.l4m-hero .dedans { position: relative; z-index: 1; padding-bottom: 4rem; padding-top: 8rem; width: 100%; }
.l4m-hero .marque { font-size: .8rem; letter-spacing: .22em; color: var(--or-vif); margin: 0 0 1.6rem; text-shadow: 0 1px 12px rgba(11,9,8,.9); }
.l4m-hero h1 { font-size: clamp(2.4rem, 7.5vw, 4.6rem); line-height: 1.03; max-width: 15ch; text-wrap: balance; }
.l4m-hero h1 em { font-style: italic; color: var(--or-vif); }
.l4m-hero .sous { margin-top: 1.4rem; max-width: 34ch; color: var(--texte-fort); font-size: 1.05rem; }

/* L'encadré des avis, posé dans l'ouverture comme sur sa maquette. Il passe
   sous le texte tant que l'écran est étroit : à droite, il mangerait le titre. */
.l4m-hero .note {
  margin-top: 2.4rem; border: 1px solid var(--trait); padding: 1.1rem 1.3rem;
  max-width: 20rem; background: rgba(11,9,8,.55);
}
.l4m-hero .note b { display: block; font-family: Georgia, serif; font-weight: 400; font-size: 1.9rem; color: var(--or-vif); line-height: 1; }
.l4m-hero .note .ou { font-size: .84rem; color: var(--texte-doux); }
.l4m-hero .note .quoi { display: block; margin-top: .7rem; font-size: .88rem; color: var(--texte-fort); }
@media (min-width: 62rem) {
  .l4m-hero .dedans { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 3rem; }
  .l4m-hero .note { margin-top: 0; }
}

/* Le repère de défilement, lui aussi dessiné sur sa maquette. */
.l4m-hero .decouvrir {
  position: absolute; left: 1.5rem; bottom: 1.2rem; z-index: 1;
  font-size: .74rem; letter-spacing: .2em; color: var(--doux); text-decoration: none;
}
@media (min-width: 60rem) { .l4m-hero .decouvrir { left: 3rem; } }
.l4m-hero .decouvrir:hover { color: var(--or-vif); }
@media (prefers-reduced-motion: no-preference) {
  .l4m-hero .decouvrir { animation: l4m-respire-bas 2.6s ease-in-out infinite; }
  @keyframes l4m-respire-bas { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
}

/* ── Le bandeau des distinctions : quatre faits relevés sur son site ─────── */
.l4m-distinctions { background: var(--brun); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.l4m-distinctions .dedans { display: grid; grid-template-columns: repeat(2, 1fr); }
.l4m-distinctions .item { padding: 1.4rem .8rem; text-align: center; border-left: 1px solid var(--trait); }
.l4m-distinctions .item:first-child, .l4m-distinctions .item:nth-child(3) { border-left: none; }
.l4m-distinctions b { display: block; font-family: Georgia, serif; font-weight: 400; font-size: 1.22rem; color: var(--or-vif); }
.l4m-distinctions span { font-size: .78rem; letter-spacing: .04em; color: var(--doux); }
@media (min-width: 48rem) {
  .l4m-distinctions .dedans { grid-template-columns: repeat(4, 1fr); }
  .l4m-distinctions .item:nth-child(3) { border-left: 1px solid var(--trait); }
}

/* ── Une section ─────────────────────────────────────────────────────────── */
.l4m-section { padding: 5rem 0; }
.l4m-section.brun { background: var(--brun); }
.l4m .sur-titre { font-size: .74rem; letter-spacing: .16em; color: var(--or); margin: 0 0 .9rem; }
.l4m-section h2 { font-size: clamp(1.75rem, 4.2vw, 2.7rem); line-height: 1.15; max-width: 22ch; text-wrap: balance; }

/* LA PHOTO PASSE DERRIÈRE LE TEXTE.
   Avant, chaque section posait une photo À CÔTÉ du texte, dans un cadre doré
   décalé. Sur ordinateur l'asymétrie se lisait comme un parti pris ; sur
   téléphone, où les deux colonnes s'empilent, le cadre décalé de .7 rem
   sortait du contenu et donnait l'impression d'une photo mal calée dans son
   cadre. C'est ce que Cameron a vu.
   Le motif est donc celui de la section « quatre mains », qui marchait déjà :
   la photo occupe toute la largeur, un dégradé la couvre, le texte se pose
   dessus. Rien à aligner, donc rien à désaligner. */
.l4m-fond {
  position: relative; padding: 0; background: var(--nuit);
  min-height: clamp(26rem, 68vh, 40rem); display: flex; align-items: flex-end;
}
/* La photo couvre la section entière, elle ne forme plus une bande de hauteur
   fixe au-dessus du texte. C'est ce qui laissait de grands vides noirs dès que
   le texte dépassait — et son texte du concept fait cinq paragraphes. */
.l4m-fond .fond { position: absolute; inset: 0; }
.l4m-fond .fond img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  /* LE CADRAGE, PAS LA PHOTO. Les quatre bras sont dans le fichier, sur toute
     sa largeur. La bande est plus large que haute : la photo est mise a
     l'echelle sur la largeur et le surplus de hauteur est rogne en haut et en
     bas. Or les bras sont en haut. On remonte l'ancrage pour les garder. */
  object-position: 50% 22%;
}
/* Le dégradé part du côté où le texte se pose : le texte a toujours son fond
   le plus sombre sous lui, et la photo respire de l'autre côté. */
.l4m-fond .fond::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--nuit) 0%, rgba(11,9,8,.30) 22%, rgba(11,9,8,0) 58%),
    linear-gradient(to right, rgba(11,9,8,.42) 0%, rgba(11,9,8,.10) 46%, rgba(11,9,8,0) 76%);
}
.l4m-fond.droite .fond::after {
  background:
    linear-gradient(to top, var(--nuit) 0%, rgba(11,9,8,.30) 22%, rgba(11,9,8,0) 58%),
    linear-gradient(to left, rgba(11,9,8,.42) 0%, rgba(11,9,8,.10) 46%, rgba(11,9,8,0) 76%);
}
/* Plus de marge négative : le texte est dans le flux, et c'est lui qui donne
   sa hauteur à la section. On garde de l'air au-dessus pour que la photo
   respire, sans jamais dépendre de la longueur du texte. */
.l4m-fond .propos { position: relative; z-index: 1; width: 100%; padding: min(24vh, 13rem) 0 4.5rem; }
.l4m-fond .boite { max-width: 36rem; }
.l4m-fond.droite .boite { margin-left: auto; }
.l4m-fond p { color: var(--texte); }
/* Sur un écran étroit, les deux dégradés latéraux ne servent plus à rien : la
   boîte prend toute la largeur. On empile donc un seul dégradé, du bas vers le
   haut et plus dense — c'est lui qui garantit que le sur-titre doré reste
   lisible même là où la photo est claire, comme sur la cabine duo.
   La photo gagne aussi de la hauteur : trop courte, elle se lisait comme un
   bandeau et non comme un fond. */
@media (max-width: 46rem) {
  .l4m-fond .fond img { height: clamp(21rem, 54vh, 27rem); }
  .l4m-fond .propos { margin-top: -7rem; padding-bottom: 3.5rem; }
  /* MEME CALCUL QUE POUR LES BANNIERES : a 94 % le voile masquait la photo
     sans rien gagner en lisibilite. On descend a 78 %, et le texte porte une
     ombre douce qui prend le relais sur les zones claires. */
  .l4m-fond .fond::after, .l4m-fond.droite .fond::after {
    background: linear-gradient(to top,
      var(--nuit) 0%, rgba(11,9,8,.78) 22%, rgba(11,9,8,.44) 44%, rgba(11,9,8,.10) 70%, rgba(11,9,8,0) 100%);
  }
  .l4m-fond .propos h2, .l4m-fond .propos p, .l4m-fond .propos .sur-titre {
    text-shadow: 0 1px 10px rgba(11,9,8,.9);
  }
}

/* ── La carte des soins ──────────────────────────────────────────────────── */
.l4m-carte { display: grid; gap: 3.5rem; margin-top: 3rem; }
@media (min-width: 54rem) { .l4m-carte { grid-template-columns: 1fr 1fr; gap: 4.5rem; } }
.l4m-famille h3 { font-size: 1.5rem; margin-bottom: .35rem; }
.l4m-famille .intro { color: var(--doux); font-size: .95rem; margin-bottom: 1.6rem; }
.l4m-entetes-prix {
  display: flex; justify-content: flex-end; gap: 1.9rem; margin: 0 0 .3rem;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--doux);
}
.l4m-tarifs { list-style: none; margin: 0; padding: 0; }
.l4m-tarifs li {
  display: grid; grid-template-columns: 1fr auto auto; gap: .9rem;
  align-items: baseline; padding: .62rem 0; border-bottom: 1px solid var(--trait);
  font-variant-numeric: tabular-nums;
}
.l4m-tarifs li:last-child { border-bottom: none; }
.l4m-tarifs .duree { color: var(--texte); }
.l4m-tarifs .prix { font-size: 1.12rem; color: var(--creme); }
.l4m-tarifs .fidelite { font-size: .88rem; color: var(--or); min-width: 3.4rem; text-align: right; }
.l4m-legende { margin-top: 1rem; font-size: .84rem; color: var(--doux); }
.l4m-liste-soins { margin: 1.2rem 0 0; padding: 0; list-style: none; columns: 2; column-gap: 1.5rem; font-size: .92rem; color: var(--texte); }
.l4m-liste-soins li { break-inside: avoid; padding: .18rem 0; }

/* ── La signature : quatre mains ─────────────────────────────────────────── */
.l4m-signature { position: relative; }
.l4m-signature .fond { position: relative; }
.l4m-signature { min-height: clamp(24rem, 62vh, 38rem); display: flex; align-items: flex-end; }
.l4m-signature .fond { position: absolute; inset: 0; }
.l4m-signature .fond img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.l4m-signature .fond::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(11,9,8,.94) 0%, rgba(11,9,8,.72) 42%, rgba(11,9,8,.18) 100%);
}
.l4m-signature .propos { position: relative; width: 100%; padding: min(22vh, 11rem) 0 4rem; z-index: 1; }
.l4m-signature .propos .boite { max-width: 34rem; }
.l4m .regle {
  margin-top: 1.6rem; padding: 1.1rem 1.3rem;
  border-left: 2px solid var(--or); background: rgba(198,161,91,.07);
  font-size: .95rem; color: var(--texte-fort);
}
.l4m-signature .regle b { color: var(--or-vif); font-weight: 600; }

/* ── Les vignettes de prestations ────────────────────────────────────────── */
.l4m-grille { display: grid; gap: 1.2rem; margin-top: 2.6rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48rem) { .l4m-grille { grid-template-columns: repeat(4, 1fr); gap: 1.4rem; } }
.l4m-vignette { position: relative; overflow: hidden; text-decoration: none; color: inherit; display: block; }
.l4m-vignette img { aspect-ratio: 4/5; object-fit: cover; width: 100%; transition: transform .5s ease; }
.l4m-vignette:hover img { transform: scale(1.045); }
.l4m-vignette::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,9,8,.9) 8%, rgba(11,9,8,0) 58%);
}
.l4m-vignette span {
  position: absolute; left: 1rem; right: 1rem; bottom: .9rem; z-index: 1;
  font-family: Georgia, serif; font-size: 1.02rem; color: #F6F1E8;
}

/* ── La citation, et les avis en cartes ──────────────────────────────────────
   Deux blocs repris directement de sa maquette : une respiration entre les
   prestations et l'équipe, puis les avis en trois cartes étoilées. Elle les a
   dessinés, on les fait. */
.l4m-citation { background: var(--nuit); padding: 5.5rem 0; text-align: center; }
.l4m-citation p {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.6rem, 4.6vw, 2.6rem); line-height: 1.25;
  max-width: 22ch; margin: 0 auto; color: var(--creme); text-wrap: balance;
}

.l4m-avis { display: grid; gap: 1.4rem; margin-top: 2.8rem; }
@media (min-width: 50rem) { .l4m-avis { grid-template-columns: repeat(3, 1fr); } }
.l4m-avis .avis { border: 1px solid var(--trait); padding: 1.5rem 1.6rem 1.7rem; }
.l4m-avis .etoiles { color: var(--or); letter-spacing: .18em; font-size: .9rem; margin: 0 0 .9rem; }
.l4m-avis blockquote {
  margin: 0; font-family: Georgia, serif; font-size: 1.02rem; line-height: 1.5;
  color: var(--texte-fort);
}
.l4m-avis .qui { margin: 1rem 0 0; font-size: .82rem; color: var(--doux); }

/* ── Les notes, et les raisons ───────────────────────────────────────────── */
.l4m-notes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--trait); margin-top: 2.4rem; }
@media (min-width: 44rem) { .l4m-notes { grid-template-columns: repeat(5, 1fr); } }
.l4m-notes .score { background: var(--brun); padding: 1.3rem .6rem; text-align: center; }
/* La cinquième note se retrouve seule sur sa ligne à deux colonnes : on lui
   fait occuper toute la largeur plutôt que de laisser un trou. */
@media (max-width: 43.99rem) { .l4m-notes .score:last-child { grid-column: 1 / -1; } }
.l4m-notes b { display: block; font-family: Georgia, serif; font-weight: 400; font-size: 1.9rem; color: var(--or-vif); line-height: 1; }
.l4m-notes span { display: block; margin-top: .45rem; font-size: .76rem; letter-spacing: .06em; color: var(--doux); }

.l4m-raisons { display: grid; gap: 1.8rem 2.6rem; margin-top: 3rem; }
@media (min-width: 46rem) { .l4m-raisons { grid-template-columns: 1fr 1fr; } }
@media (min-width: 70rem) { .l4m-raisons { grid-template-columns: repeat(4, 1fr); } }
.l4m-raisons .raison { border-top: 1px solid var(--trait); padding-top: 1.1rem; }
.l4m-raisons h3 { font-size: 1.1rem; color: var(--texte-fort); margin-bottom: .5rem; }
.l4m-raisons p { font-size: .93rem; color: var(--texte-doux); margin: 0; }
.l4m-raisons b { color: var(--texte-fort); }


/* ── Ses réseaux, dans le pied ───────────────────────────────────────────── */
.l4m-pied .reseaux { display: flex; align-items: center; gap: .9rem; margin-top: 1.1rem; }
.l4m-pied .reseaux a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid var(--trait); border-radius: 999px;
  color: var(--texte-doux); transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.l4m-pied .reseaux a:hover { color: var(--or-vif); border-color: var(--or); transform: translateY(-2px); }
.l4m-pied .reseaux span { font-size: .8rem; letter-spacing: .1em; color: var(--texte-fin); }


/* ── La feuille dorée qui sépare les paragraphes ──────────────────────────
   Elle la demande « un peu ornée, décorative ». Le filet existant devient
   cette feuille : il séparait déjà chaque section, on n'en ajoute pas un
   second. Dessinée en SVG dans la feuille de style — rien à télécharger,
   rien qui puisse manquer à l'appel. */
.l4m .filet {
  border: 0; height: 34px; width: 100%; max-width: 21rem;
  margin: 1.1rem 0 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 34'%3E%3Cg fill='none' stroke='%23C6A15B' stroke-width='1.05' stroke-linecap='round'%3E%3Cpath d='M6 17h156'/%3E%3Cpath d='M84 17c-7-9-17-12-25-11 2 8 10 14 19 14 2 0 4-1 6-3z'/%3E%3Cpath d='M84 17c7-9 17-12 25-11-2 8-10 14-19 14-2 0-4-1-6-3z'/%3E%3Cpath d='M59 6c-6-4-14-4-20-1 3 6 10 9 17 8'/%3E%3Cpath d='M109 28c6 4 14 4 20 1-3-6-10-9-17-8'/%3E%3Cpath d='M84 17c-3-5-3-11-1-16m1 16c3-5 3-11 1-16'/%3E%3C/g%3E%3Cg fill='%23C6A15B' opacity='.85'%3E%3Ccircle cx='84' cy='17' r='2.1'/%3E%3C/g%3E%3C/svg%3E") left center / auto 34px no-repeat;
  background-position: left center;
  position: relative;
}
/* La branche porte sa propre tige : plus besoin des deux filets qui
   l'encadraient, ils faisaient double emploi et alourdissaient le motif. */
.l4m-citation .filet, .l4m .filet.centre { margin-left: auto; margin-right: auto; background-position: center; }

/* ── « Exemples : » avant chaque liste de massages ───────────────────────── */
.l4m-exemples {
  margin: 1.6rem 0 .5rem; font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--or);
}

/* ── La raison qui prend toute la largeur ────────────────────────────────
   Son texte sur les partenaires fait trois paragraphes ; dans une colonne
   sur quatre il ferait une tour et laisserait trois trous à côté. */
.l4m-raisons .raison.large { grid-column: 1 / -1; }
.l4m-raisons .raison.large p + p { margin-top: .7rem; }

/* ── Le détail sous une note ─────────────────────────────────────────────── */
/* Pas var(--texte-fin) ici : sur le fond creme des notes, il tombait a 4,44
   pour un minimum de 4,5. Une couleur fixe, choisie avec de la marge. */
.l4m-notes .score small { display: block; margin-top: .35rem; font-size: .68rem; color: #6F5E4A; line-height: 1.3; }

/* ── Les pictogrammes des raisons ────────────────────────────────────────
   « La page est trop sombre » ici : huit paragraphes de texte à la suite,
   sans rien pour accrocher l'œil. Un pictogramme par raison, tracé au trait
   dans la couleur or, donne le point d'appui qui manquait. */
.l4m-raisons .raison h3 { display: flex; align-items: center; gap: .6rem; }
.l4m-raisons .raison h3 svg { flex: none; width: 22px; height: 22px; color: var(--or-vif); }


/* ── Les dix-sept cartes cadeaux ────────────────────────────────────────────
   UNE PAR LIGNE, et c'est mesuré : le texte des prestations est dessiné sur
   l'image, à 35 px de haut sur 1748 px de large. En dessous de 832 px
   d'affichage il n'est plus lisible. Deux colonnes le rendraient joli et
   inutile. */
.l4m-cc-liste { display: grid; gap: 2.8rem; }
.l4m-cc { display: block; text-decoration: none; color: inherit; }
.l4m-cc img {
  width: 100%; height: auto; display: block;
  border-radius: .4rem; border: 1px solid var(--trait);
  transition: transform .25s ease, box-shadow .25s ease;
}
.l4m-cc:hover img { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(20, 15, 8, .14); }
.l4m-cc .cc-ligne {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin: .8rem .2rem 0;
}
.cc-nom { font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; }
.cc-prix { color: var(--or-fonce); font-weight: 600; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .l4m-cc img { transition: none; }
  .l4m-cc:hover img { transform: none; }
}


/* ── Le diplôme Tripadvisor ──────────────────────────────────────────────
   Un certificat est un document, pas une photo : il lui faut son fond blanc
   pour rester lisible, et un cadre pour ne pas donner l'impression d'un
   trou dans la page. On le borne à 12 rem — au-delà, il vole la vedette au
   texte qu'il est censé appuyer. */
.l4m-diplome {
  display: flex; align-items: center; gap: 1.1rem;
  margin-top: 1.8rem; max-width: 30rem;
}
.l4m-diplome img {
  width: 7.5rem; flex: none; border-radius: .4rem;
  border: 1px solid var(--or); background: #FFF; padding: .4rem;
  box-shadow: 0 6px 22px rgba(0,0,0,.45);
}
.l4m-diplome p { margin: 0; font-size: .9rem; color: var(--texte-fort); }
@media (max-width: 33.99rem) {
  .l4m-diplome { gap: .9rem; }
  .l4m-diplome img { width: 5.6rem; }
}


/* ── Ses quatre avis Google ──────────────────────────────────────────────
   Elle impose la présentation : nom et prénom, nombre d'avis publiés par
   l'auteur, et mois de publication. C'est ce qui distingue un témoignage
   vérifiable d'une phrase encadrée. */
.l4m-avis .qui b { display: block; color: var(--texte-fort); font-weight: 400; }
.l4m-avis .qui span { display: block; margin-top: .15rem; font-size: .78rem; color: var(--texte-fin); }
@media (min-width: 50rem) { .l4m-avis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* ── Un intertitre avant un groupe de raisons ────────────────────────────── */
.l4m-intertitre {
  grid-column: 1 / -1; margin: 0 0 .2rem; font-family: Georgia, serif;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem); color: var(--or-vif);
}

/* ── Le texte du concept sur deux colonnes ───────────────────────────────
   Sa question exacte : « ou c'est pas ok pour les téléphones ? ». Non, ça ne
   l'est pas : deux colonnes dans 390 px de large donnent des lignes de vingt
   caractères. On les ouvre donc à partir de 62 rem seulement. */
@media (min-width: 62rem) {
  .l4m-fond .boite.large { max-width: 60rem; }
  .l4m .deux-colonnes { columns: 2; column-gap: 3rem; }
  .l4m .deux-colonnes p { break-inside: avoid; margin-top: 0; }
  .l4m .deux-colonnes p:first-child { margin-top: 0; }
}


/* ── Le voile du texte, posé sous la boîte et non sous la section ────────
   Une section fait la hauteur de son texte ; un dégradé calé sur la section
   ne peut donc pas garantir la lisibilité. Celui-ci fait exactement la
   taille de la boîte : cinq paragraphes ou trois lignes, le texte a
   toujours son fond. C'est ce qui permet de laisser la photo claire autour,
   ce qu'Albertina demande.
   Le flou d'arrière-plan n'est pas de la décoration : il empêche un détail
   contrasté de la photo (une main, un pli de drap) de passer à travers et
   de hacher une ligne de texte. */
.l4m-fond .boite, .l4m-signature .boite {
  position: relative;
  padding: 1.8rem 1.9rem 2rem;
  border-radius: .5rem;
  background: linear-gradient(to bottom, rgba(11,9,8,.60), rgba(11,9,8,.86) 55%, rgba(11,9,8,.90));
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
@supports (backdrop-filter: blur(3px)) {
  .l4m-fond .boite, .l4m-signature .boite { backdrop-filter: blur(3px); }
}
@media (max-width: 47.99rem) {
  .l4m-fond .boite, .l4m-signature .boite { padding: 1.4rem 1.2rem 1.6rem; border-radius: .4rem; }
}


/* ── Les sections claires ────────────────────────────────────────────────
   Sa demande : « pourrions-nous alterner un fond noir avec un fond blanc ».
   Son mari trouve la suite de fonds sombres « un peu malsain » — c'est la
   MONOTONIE qui gêne, pas la couleur : six sections sombres d'affilée.

   Deux sections passent donc en crème : les tarifs et les questions, les
   deux seules qui soient du texte pur. Ni l'une ni l'autre ne porte de
   photo, donc rien à recalibrer.

   ON NE REPEINT PAS LES RÈGLES UNE PAR UNE. On redéfinit les variables de
   couleur sur la section : tout ce qui en dépend suit, sans une seule règle
   dupliquée. C'est aussi ce qui permettra de revenir en arrière en
   supprimant ce bloc, si elle change d'avis.

   Le motif est dessiné ici, dans le style de l'image qu'elle a choisie :
   trois kilo-octets au lieu de neuf cents, et net à toutes les tailles. */
.l4m-section.creme {
  --nuit:       #FBF6EC;
  --brun:       #F3E9D8;
  --creme:      #241B12;
  --texte:      #4A3B2C;
  --texte-fort: #2C2117;
  --texte-doux: #5C4B39;
  --texte-fin:  #7A6853;
  --doux:       #6B5A46;
  --or:         #9A7526;
  --or-vif:     #7E5E19;
  --trait:      rgba(154,117,38,.26);

  background-color: #FBF6EC;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='320' viewBox='0 0 560 320'%3E%3Cg fill='none' stroke='%23B8912F' stroke-width='.9' opacity='.30'%3E%3Cpath d='M-40 250c90-70 190-40 260-110S380 20 470 40s130 90 130 90'/%3E%3Cpath d='M-40 274c96-72 196-42 266-112S386 44 476 64s124 86 124 86'/%3E%3Cpath d='M-40 298c102-74 202-44 272-114S392 68 482 88s118 82 118 82'/%3E%3Cpath d='M-30 120c70 40 130 10 190-40S290-20 360 10s90 80 160 60'/%3E%3Cpath d='M-30 144c74 42 134 12 194-38S296 4 366 34s86 76 156 56'/%3E%3Cpath d='M120 320c40-60 30-120-10-170S60 60 110 10'/%3E%3Cpath d='M144 320c40-60 30-120-10-170S84 60 134 10'/%3E%3Cpath d='M420 320c-40-70-20-140 30-190S520 40 470-10'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 560px 320px;
  color: var(--creme);
  position: relative;
}
.l4m-section.creme .filet { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 34'%3E%3Cg fill='none' stroke='%239A7526' stroke-width='1.05' stroke-linecap='round'%3E%3Cpath d='M6 17h156'/%3E%3Cpath d='M84 17c-7-9-17-12-25-11 2 8 10 14 19 14 2 0 4-1 6-3z'/%3E%3Cpath d='M84 17c7-9 17-12 25-11-2 8-10 14-19 14-2 0-4-1-6-3z'/%3E%3Cpath d='M59 6c-6-4-14-4-20-1 3 6 10 9 17 8'/%3E%3Cpath d='M109 28c6 4 14 4 20 1-3-6-10-9-17-8'/%3E%3Cpath d='M84 17c-3-5-3-11-1-16m1 16c3-5 3-11 1-16'/%3E%3C/g%3E%3Cg fill='%239A7526' opacity='.85'%3E%3Ccircle cx='84' cy='17' r='2.1'/%3E%3C/g%3E%3C/svg%3E"); }
/* Un bouton plein sur fond clair : l'or reste le fond, le texte reste sombre. */
/* Or assombri de 8 % : creme sur #9A7526 donnait 3,94 pour un minimum de
   4,5. #8E6C23 remonte a 4,52. Mesure sur la page en ligne. */
.l4m-section.creme .bouton-plein { background: #8E6C23; color: #FBF6EC; }
.l4m-section.creme .bouton-vide { border-color: #9A7526; color: #7E5E19; }
.l4m-section.creme .bouton-vide:hover { background: #8E6C23; color: #FBF6EC; }
/* Les lignes de tarif et les questions se séparaient par un trait sombre. */
.l4m-section.creme .l4m-tarifs li,
.l4m-section.creme .l4m-faq details { border-color: rgba(154,117,38,.24); }


/* ── La barre collante du téléphone ──────────────────────────────────────
   Elle la veut « comme il y a actuellement sur le site ». Deux précautions
   qui ne se voient pas mais qui comptent :
   · le pied de page reçoit une réserve de hauteur, sinon la barre couvre
     ses dernières lignes — mentions légales comprises ;
   · « env(safe-area-inset-bottom) » tient compte de la barre d'accueil des
     iPhone récents, sans quoi le bouton se retrouve dessous. */
.l4m-collant { display: none; }
@media (max-width: 47.99rem) {
  .l4m-collant {
    display: flex; gap: .6rem; position: fixed; z-index: 90;
    left: 0; right: 0; bottom: 0;
    padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--nuit) 62%, rgba(11,9,8,.86));
    border-top: 1px solid var(--trait);
  }
  .l4m-collant .bouton { flex: 1; text-align: center; padding: .8rem .4rem; font-size: .84rem; }
  /* SPECIFICITE, PAS VALEUR : le raccourci padding ecrit plus bas dans ce
     fichier ecrasait cette reserve et laissait 40 px sous le credit pour une
     barre de 73. body devant fait gagner la regle quel que soit l ordre.
     Mesure du 21/08 : recouvrement de 33 px. */
  body .l4m-pied { padding-bottom: calc(8rem + env(safe-area-inset-bottom)); }
}


/* ── Le grand titre des huit raisons ─────────────────────────────────────
   « immenses lettres svp pour que ça attire l'attention ». On monte à 6,2 vw
   sans dépasser 4,4 rem : au-delà, un titre de trois mots occupe deux lignes
   sur un téléphone et n'attire plus rien du tout. */
.l4m-grand-titre {
  font-size: clamp(2rem, 6.2vw, 4.4rem);
  line-height: 1.04; margin: 0 0 2.4rem; text-wrap: balance;
}


/* ── Le bouton flottant de l'ordinateur ──────────────────────────────────
   Mon objection portait sur la BARRE pleine largeur, pas sur le principe.
   Un bouton de coin répond à sa demande sans le défaut. Il s'efface au
   moment où l'on atteint le pied de page, dont il recouvrirait sinon les
   mentions légales — et où les mêmes liens sont déjà écrits. */
.l4m-flottant { display: none; }
@media (min-width: 48rem) {
  .l4m-flottant {
    display: inline-flex; position: fixed; z-index: 90;
    right: 1.6rem; bottom: 1.6rem;
    padding: .9rem 1.5rem; border-radius: 999px;
    background: var(--or); color: #14100B; font-weight: 600; font-size: .9rem;
    letter-spacing: .04em; text-decoration: none;
    box-shadow: 0 10px 34px rgba(0,0,0,.45);
    transition: transform .2s ease, background .2s ease, opacity .3s ease;
  }
  .l4m-flottant:hover { background: var(--or-vif); transform: translateY(-2px); }
  .l4m-flottant.efface { opacity: 0; pointer-events: none; }
}

/* ── La section du concept garde sa photo claire ────────────────────────
   « svp laissez-la claire, ne la rendez pas sombre, c'est le but d'éclaircir
   ici ». Le voile de section s'efface donc presque entièrement à cet endroit.
   C'est possible sans perdre la lisibilité parce que le texte porte son
   propre fond depuis hier — sans quoi il faudrait choisir entre les deux. */
.l4m #concept .fond::after {
  background:
    linear-gradient(to top, rgba(11,9,8,.55) 0%, rgba(11,9,8,.10) 26%, rgba(11,9,8,0) 55%),
    linear-gradient(to right, rgba(11,9,8,.18) 0%, rgba(11,9,8,0) 42%);
}

/* ── Son panneau de la méthode Albertina T ──────────────────────────────
   Il porte du texte : servi trop petit, autant ne pas le mettre. Elle le
   demande « dans un cadre plus grand que Trip Advisor, juste assez grand
   pour pouvoir le lire ». 22 rem de large sur un écran d'ordinateur, et
   toute la largeur disponible sur un téléphone. */
.l4m-panneau { margin: 2.4rem 0 0; }
.l4m-panneau img {
  width: min(22rem, 100%); border-radius: .5rem;
  border: 1px solid var(--or); box-shadow: 0 16px 44px rgba(0,0,0,.4);
}


/* ── Les emplacements a remplir ──────────────────────────────────────────
   Sur un gabarit, un emplacement doit se VOIR comme tel. Une zone vide sans
   marque, elle la prendrait pour un defaut d'affichage ; une zone remplie de
   faux texte, elle la publierait par inadvertance. */
.l4m-aremplir {
  margin-top: 1.2rem; padding: 1rem 1.2rem; border-radius: .4rem;
  border: 1px dashed var(--or); background: rgba(198,161,91,.07);
}
.l4m-aremplir p { margin: 0; font-size: .95rem; }
.l4m-emplacement {
  aspect-ratio: 4/5; border-radius: .4rem;
  border: 1px dashed var(--or); background: rgba(198,161,91,.07);
  display: flex; align-items: center; justify-content: center;
}
.l4m-emplacement span {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--or);
}


/* ── Ses cartes valeur ───────────────────────────────────────────────────
   Une carte = une photo, un montant cliquable, et ce qu'elle contient. Le
   montant EST le lien : c'est ce qu'on regarde en premier sur un cadeau, et
   ce sur quoi on clique. Elle demande que chacun mene a Planity.
   Dix-sept cartes a venir : la grille se remplit sans changer de reglage. */
.l4m-cartes-cadeaux { display: grid; gap: 1.6rem; }
@media (min-width: 46rem) { .l4m-cartes-cadeaux { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .l4m-cartes-cadeaux { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.l4m-carte-cadeau {
  border: 1px solid var(--trait); border-radius: .5rem; overflow: hidden;
  display: flex; flex-direction: column;
}
.l4m-carte-cadeau img, .l4m-carte-cadeau .l4m-emplacement {
  width: 100%; aspect-ratio: 16/10; object-fit: cover; border: 0; border-radius: 0;
}
.l4m-carte-cadeau .quoi { padding: 1.1rem 1.2rem 1.3rem; }
.l4m-carte-cadeau h3 { font-size: 1.15rem; }
.l4m-carte-cadeau .montant {
  display: inline-block; margin: .5rem 0 .9rem; padding: .45rem 1rem;
  border-radius: 999px; background: var(--or); color: #14100B;
  font-size: .86rem; font-weight: 600; text-decoration: none;
}
.l4m-carte-cadeau .montant:hover { background: var(--or-vif); }
.l4m-carte-cadeau .pour { font-size: .86rem; color: var(--or); margin-bottom: .4rem; }
.l4m-carte-cadeau ul { margin: 0; padding-left: 1.1rem; font-size: .92rem; }
.l4m-carte-cadeau li { margin-bottom: .35rem; }

/* ── Son panneau et le texte de son massage, côte à côte ────────────────
   Sa demande du 18 août au soir : « peut-on mettre le texte qui décrit mon
   massage à droite de la photo bleue ? ». Le panneau fait deux fois et demie
   plus haut que large : on lui donne une colonne étroite et fixe, sinon sa
   hauteur commande toute la section et le texte flotte en haut d'un vide.
   Sous 56 rem, les deux colonnes s'empilent — panneau puis texte, l'ordre de
   lecture naturel. */
.l4m-panneau-duo { display: grid; gap: 2rem; margin-top: 2.4rem; align-items: start; }
@media (min-width: 56rem) {
  .l4m-panneau-duo { grid-template-columns: 18rem minmax(0, 1fr); gap: 2.8rem; }
  .l4m-panneau-duo .l4m-panneau { margin: 0; }
  .l4m-panneau-duo .l4m-panneau img { width: 100%; }
}
.l4m-panneau-duo .l4m-texte h3 { margin-top: 0; }

/* ── Le plan d'accès depuis le parking ──────────────────────────────────
   Sa capture d'écran était un écran d'Apple Plans : widget météo, bouton 3D,
   imagerie satellite d'un fournisseur tiers. On garde toute son information et
   on la redessine — pas de droit tiers engagé pour sa société, et un plan qui
   reste net sur tous les écrans pour trois kilo-octets.

   LES COULEURS PASSENT PAR DES VARIABLES : sur une section crème, elles sont
   redéfinies plus bas, et le plan suit son fond sans qu'on en maintienne deux
   versions. */
.l4m-plan {
  --route:     rgba(255,255,255,.09);
  --bande:     rgba(198,161,91,.45);
  --bati:      rgba(198,161,91,.13);
  --traitplan: rgba(198,161,91,.5);
  --fondplan:  var(--nuit);
  margin: 2rem 0 0; padding: 0;
}
.l4m-plan svg, .l4m-plan img {
  width: 100%; height: auto; display: block; border-radius: .5rem;
  border: 1px solid var(--trait); background: var(--nuit);
}
/* Sa capture est en portrait tres allonge : sur un ordinateur, servie sur
   toute la largeur de la colonne, elle deviendrait un mur. On la plafonne. */
.l4m-plan img { max-width: 26rem; }
.l4m-plan .voie   { fill: var(--texte-fin); font-size: 13px; letter-spacing: .12em; }
.l4m-plan .bati   { fill: var(--creme); font-size: 19px; text-anchor: middle; font-family: Georgia, serif; }
.l4m-plan .batifin{ fill: var(--texte-doux); font-size: 12px; text-anchor: middle; }
.l4m-plan .places rect { fill: rgba(198,161,91,.16); stroke: var(--or); stroke-width: 1.2; }
.l4m-plan .etiq   { fill: var(--or); font-size: 12px; letter-spacing: .12em; text-anchor: middle; }
.l4m-plan .etiqor { fill: var(--or); font-size: 13px; letter-spacing: .1em; font-weight: 600; }
.l4m-plan .etiqfin{ fill: var(--texte-doux); font-size: 11.5px; }
.l4m-plan figcaption { margin-top: .9rem; font-size: .9rem; color: var(--texte-doux); max-width: 52ch; }
.l4m-section.creme .l4m-plan {
  --route: rgba(74,59,44,.10); --bande: rgba(154,117,38,.5);
  --bati: rgba(154,117,38,.12); --traitplan: rgba(154,117,38,.5);
}
.l4m-section.creme .l4m-plan svg { background: var(--brun); }

/* ── La bannière à fond clair des cartes cadeaux ──────────────────────────
   Sa demande : « je pensais que vous alliez mettre la photo avec la pierre
   rose comme fond sur le titre et écrire le titre en noir ».

   C'est la SEULE bannière claire du site, et c'est voulu : « ne la rendez pas
   sombre, sa clarté doit contraster avec le reste ». Toutes les autres sont
   sombres avec un texte crème ; celle-ci est claire avec un texte encre.

   LE VOILE EST BLANC, et c'est ce qui lève l'objection de la version
   précédente (« on ne peut pas avoir les deux »). Un voile sombre salirait la
   clarté qu'elle veut garder ; un voile blanc l'éclaircit. Réglé sur le pixel
   le PLUS SOMBRE de la photo — rgb(83,60,36) — et non sur sa moyenne : un
   texte lisible en moyenne peut disparaître sur un pli d'ombre. À 38 %, le
   contraste de l'encre est de 5,12:1, au-dessus des 4,5 exigés.

   LA QUALITÉ, sa deuxième question : le fichier fait 1200 × 926, pas 600 × 463
   comme le disait l'ancien commentaire — c'étaient les attributs du HTML. Sur
   un écran de 1521 px, l'agrandissement est de 1,27×. Aucun texte n'est
   dessiné dans la photo : ce qui s'agrandit, ce sont des plis de soie et des
   fleurs séchées, donc du flou sur du flou. Sur téléphone, elle est plus large
   que nécessaire. */
/* LA HAUTEUR, SUR CETTE PAGE UNIQUEMENT. Elle demande à voir « le cœur formé
   par la pierre rose en entier ». Le cœur fait 362 px de haut sur une photo de
   926 ; une bannière au rapport 3,5 n'en laisse que 343. Il manquait vingt
   pixels, et aucun réglage de cadrage ne les invente. On passe donc à 2,6 —
   ici et nulle part ailleurs. */
.l4m-banniere.fond-clair {
  /* Le rapport de l'image, pas une hauteur : ainsi le cadre ne depend plus de
     la hauteur de fenetre du visiteur, et le coeur est entier chez tout le
     monde. Le min-height ne sert qu'a laisser la place au titre sur un
     telephone -- la, c'est la largeur qui se recadre, et le coeur est au
     centre. */
  aspect-ratio: 2.6;
  min-height: 21rem;
}
/* SUR TELEPHONE, LA FENETRE EST TROP ETROITE pour la pierre. A 520 px de
   large et 336 de haut, le cadre fait 1,55 quand l'image fait 2,6 : cover
   garde la hauteur et coupe 40 % de la largeur -- la pierre y passe. En
   baissant la hauteur minimale on elargit la fenetre : 83 % de la largeur
   conservee au lieu de 60 %. */
@media (max-width: 48rem) {
  .l4m-banniere.fond-clair { min-height: 15rem; padding: 2.2rem 0 2rem; }
  .l4m-banniere.fond-clair h1 { font-size: clamp(1.7rem, 7.4vw, 2.3rem); }
  .l4m-banniere.fond-clair .chapeau { font-size: .92rem; margin-top: .7rem; }
}
.l4m-banniere.fond-clair img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.l4m-banniere.fond-clair::after {
  content: ""; position: absolute; inset: 0;
  /* LE VOILE SUIT LE TEXTE, PAS L'IMAGE. Le texte ne depasse pas 45 % de la
     largeur ; le coeur de quartz occupe 30 a 66 %. Un voile reparti egalement
     protegeait donc surtout la pierre -- c'est-a-dire exactement ce qu'elle
     demande de voir. Il reste fort jusqu'a 42 %, puis tombe vite. */
  background: linear-gradient(to right,
    rgba(255,255,255,.60) 0%, rgba(255,255,255,.52) 42%,
    rgba(255,255,255,.16) 68%, rgba(255,255,255,.06) 100%);
}
.l4m-banniere.fond-clair h1,
.l4m-banniere.fond-clair .chapeau { color: var(--encre-claire); text-shadow: none; }
.l4m-banniere.fond-clair .chapeau { max-width: 34ch; font-style: italic; }
.l4m-banniere.fond-clair .sur-titre { color: var(--or-fonce); text-shadow: none; }
.l4m-banniere.fond-clair .filet { border-color: var(--or-fonce); }

.l4m-banniere-duo { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 52rem) {
  .l4m-banniere-duo { grid-template-columns: minmax(0, 1fr) 24rem; gap: 3rem; }
}
.l4m-banniere-duo img {
  width: 100%; height: auto; display: block; border-radius: .6rem;
  border: 1px solid var(--trait); box-shadow: 0 20px 54px rgba(0,0,0,.42);
}

/* ── La foire aux questions ──────────────────────────────────────────────── */
.l4m-faq { max-width: 46rem; margin-top: 2.2rem; }
.l4m-faq details { border-bottom: 1px solid var(--trait); }
.l4m-faq summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 1.05rem 2.4rem 1.05rem 0;
  font-family: Georgia, serif; font-size: 1.06rem;
}
.l4m-faq summary::-webkit-details-marker { display: none; }
.l4m-faq summary::after {
  content: "+"; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%);
  color: var(--or); font-size: 1.5rem; font-family: Georgia, serif;
}
.l4m-faq details[open] summary::after { content: "\2013"; }
.l4m-faq .rep { padding: 0 0 1.15rem; color: var(--texte); font-size: .95rem; max-width: 60ch; }

/* ── Le pied pratique ────────────────────────────────────────────────────── */
.l4m-pratique { display: grid; gap: 2.5rem; }
@media (min-width: 54rem) { .l4m-pratique { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.l4m-pratique dl { margin: 0; display: grid; grid-template-columns: 9rem 1fr; gap: .55rem 1rem; font-size: .96rem; }
.l4m-pratique dt { color: var(--or); }
.l4m-pratique dd { margin: 0; color: var(--texte); }
.l4m-pratique a { color: var(--creme); }

/* ── Le pied de page ─────────────────────────────────────────────────────── */
.l4m-pied { background: var(--nuit); border-top: 1px solid var(--trait); padding: 3rem 0 2.5rem; }
.l4m-pied .dedans { display: grid; gap: 1.6rem; align-items: center; }
@media (min-width: 48rem) { .l4m-pied .dedans { grid-template-columns: auto 1fr; gap: 3rem; } }
.l4m-pied img { width: 9.5rem; height: auto; opacity: .85; }
.l4m-pied .liens { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; font-size: .86rem; }
.l4m-pied .liens a { color: var(--doux); text-decoration: none; }
.l4m-pied .liens a:hover { color: var(--or-vif); }
.l4m-pied .fine { margin-top: .8rem; font-size: .78rem; color: var(--texte-fin); line-height: 1.7; }
.l4m-pied .fine a { color: var(--texte-fin); }

/* ── LES SECTIONS « CLAIR » NE SONT PLUS CLAIRES ─────────────────────────────
   Elles renversaient toutes les variables pour poser du texte sombre sur un
   fond crème. C'était une mauvaise lecture de sa maquette : chez elle, le
   crème est la couleur du TEXTE, pas celle du fond. Sa maquette est sombre du
   premier au dernier pixel — je m'étais fié au site qu'elle cite en référence,
   qui est clair, alors que celui-ci ne lui servait que d'ambiance.

   On garde le rythme, qu'elle a aussi : ses panneaux alternent entre le noir
   et un brun à peine plus clair. « clair » devient donc ce brun. Le nom reste,
   pour ne pas avoir à réécrire quinze pages — et cette note explique pourquoi
   il ment. */
.l4m-section.clair { background: #120D0A; }
.l4m-section.clair .regle { background: rgba(198,161,91,.09); }

/* ═══ CE QUI BOUGE ═════════════════════════════════════════════════════════
   TOUT EST DANS CE BLOC, et tout le bloc est sous prefers-reduced-motion.
   Une personne qui a demandé « moins d'animations » dans son téléphone voit
   la page complète et immobile — pas une page vide.

   AUCUNE ANIMATION NE CACHE DU CONTENU AU CHARGEMENT hors de ce garde-fou :
   les apparitions AJOUTENT la classe « vu » au lieu d'en retirer une, donc
   JavaScript coupé, tout reste visible.

   TROIS RÈGLES DE COÛT : on n'anime que « opacity » et « transform », jamais
   une largeur ni une hauteur — le reste force le navigateur à recalculer la
   mise en page à chaque image, et c'est ce qui fait ramer un téléphone.
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {

  /* ── Les apparitions au défilement ───────────────────────────────────── */
  /* RIEN N'EST MASQUÉ TANT QUE « anime » N'EST PAS POSÉE SUR LA RACINE.
     Cette classe, c'est le script qui l'ajoute — et seulement une fois qu'il a
     vérifié qu'il peut faire le travail. Script bloqué, navigateur sans
     IntersectionObserver, erreur avant cette ligne : la classe n'arrive jamais
     et la page reste entièrement visible.
     C'est le contraire de ce que j'avais fait, et qui a donné des blocs vides
     sur le téléphone de Cameron : je cachais d'abord, en espérant que quelque
     chose viendrait révéler ensuite. */
  .l4m.anime .l4m-anim { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.3,1); }
  .l4m.anime .l4m-anim.vu { opacity: 1; transform: none; }

  /* PAS DE CASCADE SUR LES ENFANTS — supprimée après un vrai dégât.
     J'avais mis les vignettes, les notes, les huit raisons et le bandeau des
     distinctions à « opacity: 0 », révélés par une règle qui dépendait d'une
     classe posée sur LEUR PARENT. Il a suffi qu'un parent ne reçoive pas cette
     classe pour que ses enfants restent invisibles POUR TOUJOURS : sur le
     téléphone de Cameron, cela donnait un grand bloc noir sous l'ouverture et
     des blocs blancs dans les prestations.

     La règle qu'on ne réenfreint plus : rien n'est caché par défaut en
     attendant qu'un script veuille bien le montrer. Seul le conteneur s'anime
     — et comme il part d'une opacité nulle, ses enfants sont de toute façon
     invisibles pendant le fondu. On ne perdait donc rien à l'écran, on ne
     risquait que le trou. */

  /* Le filet doré se trace. On anime scaleX, pas width : même effet, sans
     recalcul de mise en page. */
  .l4m-anim .filet { transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.2,.7,.3,1) .15s; }
  .l4m-anim.vu .filet { transform: scaleX(1); }

  /* ── L'ouverture : le titre se pose avant le reste ───────────────────── */
  .l4m-hero img { animation: l4m-respire 26s ease-out forwards; }
  @keyframes l4m-respire { from { transform: scale(1.09); } to { transform: scale(1); } }
  .l4m-hero .marque, .l4m-hero h1, .l4m-hero .sous, .l4m-hero .boutons {
    animation: l4m-monte .95s cubic-bezier(.2,.7,.3,1) both;
  }
  .l4m-hero .marque  { animation-delay: .10s; }
  .l4m-hero h1       { animation-delay: .22s; }
  .l4m-hero .sous    { animation-delay: .38s; }
  .l4m-hero .boutons { animation-delay: .52s; }
  @keyframes l4m-monte { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

  .l4m-entete .logo img { animation: l4m-paraitre 1.1s ease both .05s; }
  @keyframes l4m-paraitre { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
}

/* ═══ CE QUI RÉPOND AU DOIGT ═══════════════════════════════════════════════
   Hors du garde-fou : un bouton doit montrer qu'il est appuyé même quand les
   animations sont coupées. On garde les durées très courtes.
   ═══════════════════════════════════════════════════════════════════════ */

/* Le bouton plein se soulève, et une lueur le traverse au survol. La lueur
   est un pseudo-élément qui glisse : rien n'est redessiné en dehors du
   bouton. */
.l4m .bouton { position: relative; overflow: hidden; will-change: transform; }
.l4m .bouton::before {
  content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg); transition: left .55s ease; pointer-events: none;
}
.l4m .bouton:hover::before { left: 125%; }
.l4m .bouton-plein:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(198,161,91,.24); }
.l4m .bouton-vide:hover { transform: translateY(-2px); border-color: var(--or-vif); }
.l4m .bouton:active { transform: translateY(0) scale(.985); box-shadow: none; }
.l4m .bouton { transition: background .18s ease, color .18s ease, transform .16s ease, box-shadow .2s ease, border-color .18s ease; }

/* Les vignettes de prestation : la photo avance, la légende se lève. */
.l4m-vignette { overflow: hidden; }
.l4m-vignette img { transition: transform .55s cubic-bezier(.2,.7,.3,1); }
.l4m-vignette:hover img, .l4m-vignette:focus-visible img { transform: scale(1.06); }
.l4m-vignette span { transition: color .2s ease, transform .28s ease; }
.l4m-vignette:hover span { color: var(--or-vif); transform: translateY(-2px); }

/* La question de la FAQ : le « + » pivote au lieu de sauter au « – ». */
.l4m-faq summary { transition: color .2s ease; }
.l4m-faq summary:hover { color: var(--or-vif); }
.l4m-faq summary::after { transition: transform .28s cubic-bezier(.2,.7,.3,1), color .2s ease; }
.l4m-faq details[open] summary::after { content: "+"; transform: translateY(-50%) rotate(135deg); color: var(--or-vif); }

/* Une ligne de tarif s'éclaire quand le doigt la survole : on retrouve sa
   durée et son prix sans les confondre avec la ligne d'à côté. */
.l4m-tarifs li { transition: background .18s ease, padding-left .18s ease; }
.l4m-tarifs li:hover { background: rgba(198,161,91,.07); padding-left: .5rem; }

/* Le burger : les trois traits se resserrent quand on le touche. */
.l4m-burger { transition: border-color .2s ease, background .2s ease; }
.l4m-burger:hover { border-color: var(--or-vif); background: rgba(198,161,91,.14); }
.l4m-burger span { transition: transform .25s ease; }
.l4m-burger:hover span:first-child { transform: translateY(1px); }
.l4m-burger:hover span:last-child { transform: translateY(-1px); }

/* Les liens du tiroir glissent d'un cran à l'approche. */
.l4m-tiroir a { transition: color .2s ease, padding-left .25s cubic-bezier(.2,.7,.3,1); }
.l4m-tiroir a:hover { padding-left: .7rem; }

/* Une carte de raison se détache légèrement. */
.l4m-raisons .raison { transition: border-color .25s ease, transform .25s ease; }
.l4m-raisons .raison:hover { border-color: var(--or); transform: translateY(-3px); }

/* Une note de plateforme grossit d'un souffle. */
.l4m-notes .score { transition: background .25s ease; }
.l4m-notes .score:hover { background: rgba(198,161,91,.1); }
.l4m-notes b { transition: transform .3s cubic-bezier(.2,.7,.3,1); }
.l4m-notes .score:hover b { transform: scale(1.09); }

/* ── Le téléphone ────────────────────────────────────────────────────────── */
@media (max-width: 47.99rem) {
  .l4m-hero { min-height: min(80vh, 38rem); }
  /* Le téléphone reçoit une AUTRE photo, pas un autre cadrage : voir la balise
     <picture> de l'ouverture.
     Et sur un écran étroit, seul le X compte : une photo en 16/9 posée dans une
     colonne de 390 px est mise à l'échelle par sa HAUTEUR, donc c'est la
     largeur qu'on rogne — changer le Y ne déplace rien. J'ai perdu trois essais
     à régler un chiffre sans effet. 50 % garde le drapé orange en haut, là où
     se pose le titre : c'est ce qui le rend lisible. */
  .l4m-hero img { object-position: 50% 50% !important; }
  .l4m-hero h1 { font-size: clamp(2.1rem, 10vw, 3rem); }
  /* La photo couvre désormais toute la section, sur téléphone comme ailleurs :
     les deux règles d'ici — hauteur fixe de 17 rem et remontée de 7 rem —
     décrivaient l'ancienne structure et n'ont plus d'objet. Le cadrage, lui,
     reste utile : sur une colonne étroite on recentre. */
  .l4m-signature { min-height: 30rem; }
  .l4m-signature .fond img { object-position: 46% 42%; }
  .l4m-signature .propos { padding-top: 7.5rem; padding-bottom: 3rem; }
  .l4m-signature .fond::after {
    background: linear-gradient(to top, rgba(11,9,8,.94) 22%, rgba(11,9,8,.35) 72%, rgba(11,9,8,.1) 100%);
  }
  /* Même chose pour les autres sections à photo : sur un écran étroit, la
     photo et le texte se partagent la hauteur au lieu de se superposer. */
  .l4m-fond { min-height: 30rem; }
  .l4m-fond .propos { padding-top: 8rem; padding-bottom: 3rem; }
  .l4m-presentation .visuel img { aspect-ratio: 4/5; }
  .l4m-liste-soins { columns: 1; }
  .l4m-section { padding: 3.4rem 0; }
  .l4m-entetes-prix { display: none; }
}
@media (max-width: 33.99rem) {
  .l4m-pratique dl { grid-template-columns: 1fr; gap: .1rem; }
  .l4m-pratique dt { margin-top: .8rem; font-size: .78rem; letter-spacing: .1em; }
  .l4m-pratique dt:first-of-type { margin-top: 0; }
  .l4m-tarifs li { grid-template-columns: 1fr auto; row-gap: .1rem; }
  .l4m-tarifs .duree { grid-column: 1 / -1; font-size: .93rem; color: var(--doux); }
  .l4m-tarifs .prix { grid-column: 1; }
  .l4m-tarifs .fidelite { grid-column: 2; }
  .l4m-tarifs .fidelite::before { content: "fidélité "; color: var(--doux); font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
  .l4m *, .l4m *::before, .l4m *::after { transition: none !important; animation: none !important; }
}

/* ── Pages intérieures ──────────────────────────────────────────────────── */
/* LA HAUTEUR DE LA BANNIÈRE. Mesurée dans le navigateur avant correction :
   1521 × 328, soit 4,64 de rapport. Une bande aussi plate ne peut montrer
   aucune photo — c'est un bandeau. Quelle que soit la photo posée derrière, on
   n'en voyait qu'une tranche, et l'enseigne du salon tombait hors cadre.
   Une hauteur minimale la ramène vers 3,5 : les photos y tiennent. */
.l4m-banniere {
  position: relative; padding: 4.5rem 0 3.5rem; overflow: hidden;
  min-height: clamp(17rem, 38vh, 27rem);
  display: flex; align-items: center;
}
.l4m-banniere > .dedans { width: 100%; }
.l4m-banniere img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* VOILE CALCULE, PAS ESTIME. A 95 % le texte creme obtenait 18,7:1 -- pour un
   seuil de 4,5. Le voile ne protegeait donc rien, il cachait la photo, ce
   qu'on voyait sur telephone ou l'image disparaissait presque entierement.
   A 72 % il reste 12,9:1 : trois fois la marge necessaire, et la photo se voit. */
.l4m-banniere::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(11,9,8,.72) 0%, rgba(11,9,8,.50) 52%, rgba(11,9,8,.20) 100%);
}
/* Une ombre portee douce sous le titre : elle tient la lisibilite sur les
   zones claires de la photo sans qu'on ait a rassombrir l'ensemble. */
.l4m-banniere h1, .l4m-banniere .chapeau, .l4m-banniere .sur-titre {
  text-shadow: 0 1px 12px rgba(11,9,8,.85);
}
.l4m-banniere .dedans { position: relative; z-index: 1; }
.l4m-banniere h1 { font: 400 clamp(2rem,5.4vw,3.2rem)/1.08 Georgia,serif; max-width: 18ch; text-wrap: balance; margin: 0; }
.l4m-banniere .chapeau { margin-top: 1.1rem; max-width: 46ch; color: var(--texte); }
.l4m-texte { max-width: 42rem; }
.l4m-texte h3 { font-size: 1.32rem; margin: 2.4rem 0 .6rem; color: var(--creme); }
.l4m-texte h3:first-child { margin-top: 0; }
.l4m-texte p, .l4m-texte li { color: var(--texte); }
.l4m-texte ul { padding-left: 1.15rem; margin: .5rem 0 1rem; }
.l4m-texte li { margin-bottom: .4rem; }
.l4m-texte b { color: var(--creme); }
.l4m-deux { display: grid; gap: 2.5rem; }
@media (min-width: 54rem) { .l4m-deux { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.l4m-fiche { border: 1px solid var(--trait); }
.l4m-fiche img { aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.l4m-fiche .corps { padding: 1.2rem 1.3rem 1.4rem; }
.l4m-fiche h3 { font-size: 1.28rem; margin: 0 0 .2rem; }
.l4m-fiche .role { font-size: .82rem; letter-spacing: .1em; color: var(--or); margin: 0 0 .8rem; }
.l4m-fiche p { font-size: .93rem; color: var(--texte-doux); margin: 0; }
.l4m-fiches { display: grid; gap: 1.6rem; grid-template-columns: repeat(2,1fr); margin-top: 2.6rem; }
@media (min-width: 52rem) { .l4m-fiches { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 33.99rem) { .l4m-fiches { grid-template-columns: 1fr; } }
.l4m-gabarit { border: 1px dashed var(--or); padding: 1.4rem 1.5rem; background: rgba(198,161,91,.05); }
.l4m-gabarit .etiquette { font-size: .72rem; letter-spacing: .14em; color: var(--or); margin: 0 0 .5rem; }
.l4m-gabarit p { color: var(--texte); margin: 0; }
.l4m-etapes { list-style: none; counter-reset: e; padding: 0; margin: 2rem 0 0; }
.l4m-etapes li { counter-increment: e; display: grid; grid-template-columns: 2.6rem 1fr; gap: .15rem 1.2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--trait); }
.l4m-etapes li::before { content: counter(e); grid-row: 1 / span 2; font: 400 1.5rem/1 Georgia,serif; color: var(--or); }
.l4m-etapes b, .l4m-etapes span { grid-column: 2; }
.l4m-etapes b { color: var(--creme); }
.l4m-etapes span { color: var(--texte-doux); font-size: .95rem; }
.l4m-article { border-bottom: 1px solid var(--trait); padding: 1.6rem 0; display: grid; gap: 1.2rem; }
@media (min-width: 46rem) { .l4m-article { grid-template-columns: 12rem 1fr; gap: 2rem; align-items: start; } }
.l4m-article img { aspect-ratio: 3/2; object-fit: cover; width: 100%; }
.l4m-article .date { font-size: .78rem; letter-spacing: .1em; color: var(--or); }
.l4m-article h3 { font-size: 1.24rem; margin: .3rem 0 .4rem; }
.l4m-article p { color: var(--texte-doux); font-size: .94rem; margin: 0; }
.l4m-legal { max-width: 44rem; }
.l4m-legal h1 { font: 400 clamp(1.9rem,4.6vw,2.7rem)/1.15 Georgia,serif; margin: 0 0 2rem; }
.l4m-legal h2 { font-size: 1.4rem; margin: 2.6rem 0 .7rem; }
.l4m-legal p, .l4m-legal li { color: var(--texte); }
.l4m-legal a { color: var(--or-vif); }
.l4m-legal em { color: var(--doux); }
.l4m-legal ul { padding-left: 1.15rem; }

/* ── Compléments de l'aperçu validable ─────────────────────────────────── */
.l4m .l4m-lien-carte { color: inherit; text-decoration: none; display: block; }
.l4m .l4m-lien-carte:hover h3,
.l4m .l4m-lien-carte:focus-visible h3 { color: var(--or-vif); }
.l4m .l4m-cta-texte { display: inline-flex; margin-top: 1rem; color: var(--or-vif); font-size: .86rem; letter-spacing: .04em; }

.l4m-calculateur {
  display: grid; gap: 2rem; margin-top: 2.2rem; padding: clamp(1.3rem, 3vw, 2.2rem);
  border: 1px solid var(--trait); background: rgba(198,161,91,.045);
}
@media (min-width: 54rem) { .l4m-calculateur { grid-template-columns: 1.15fr .85fr; align-items: end; } }
.l4m-calculateur .champs { display: grid; gap: 1rem; }
@media (min-width: 38rem) { .l4m-calculateur .champs { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.l4m-calculateur label { display: grid; gap: .4rem; color: var(--texte); font-size: .86rem; }
.l4m-calculateur select {
  /* BORDURE MESUREE. #2A211A sur #17110D donnait 1,19:1 : on ne voyait pas
     qu'il y avait un champ a toucher. #7E6740 monte a 3,48:1, au-dessus du
     seuil de 3:1 exige pour le bord d'un element de formulaire.
     La fleche est dessinee ici plutot que laissee au systeme : celle du
     systeme est sombre et disparait sur ce fond. */
  width: 100%; min-height: 3.25rem; padding: .7rem 2.4rem .7rem .85rem;
  border: 1px solid #7E6740; border-radius: .3rem;
  /* !important SUR LE FOND ET LA COULEUR, ET C'EST MESURE. Chez elle, une
     regle du theme repeint ces champs en BLANC pendant que ma couleur de
     texte survit : creme sur blanc, contraste 1,18 pour un minimum de 4,5.
     Les quatre menus du calculateur etaient illisibles en ligne.
     C'est le pire cas de conflit de styles : pas une regle qui perd, mais une
     MOITIE de regle qui gagne. */
  background-color: #1E1712 !important; color: var(--creme) !important; font: inherit;
  appearance: none; -webkit-appearance: none;
  background-image:
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23C6A15B' d='M1 1.6 6 6.6l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .95rem center;
  background-size: .8rem;
  cursor: pointer;
}
.l4m-calculateur select:hover { border-color: var(--or); background-color: #241C15 !important; }
/* Les options de la liste deroulante : sur Android et Windows, elles heritent
   du fond du champ. Sans cette ligne, la liste ouverte a le meme defaut. */
.l4m-calculateur select option { background-color: #1E1712; color: #F2ECE2; }
.l4m-calculateur select:focus-visible { outline: 2px solid var(--or-vif); outline-offset: 2px; }
.l4m-calculateur label { color: var(--creme); }
.l4m-calculateur .resultat { padding: 1.4rem; border-left: 2px solid var(--or); background: rgba(198,161,91,.08); }
.l4m-calculateur .resultat .libelle { display: block; color: var(--doux); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.l4m-calculateur .resultat strong { display: block; margin: .25rem 0; color: var(--or-vif); font: 400 clamp(2.2rem, 6vw, 3.5rem)/1 Georgia, serif; }
.l4m-calculateur .resultat small { display: block; color: var(--texte-doux); line-height: 1.45; }

.l4m-apercu-note {
  margin: 0 0 2rem; padding: 1rem 1.15rem; border-left: 2px solid var(--or);
  background: rgba(198,161,91,.07); color: var(--texte); font-size: .9rem;
}
.l4m-apercu-note b { color: var(--or-vif); }
.l4m-modele { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 54rem) { .l4m-modele { grid-template-columns: .82fr 1.18fr; gap: 4rem; } }
.l4m-modele .portrait-principal img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.l4m-modele .portrait-principal .legende { padding-top: .7rem; color: var(--doux); font-size: .82rem; }
.l4m-modele .contenu h2 { margin-top: 2.2rem; font-size: 1.55rem; }
.l4m-modele .contenu h2:first-child { margin-top: 0; }
.l4m-modele .contenu p, .l4m-modele .contenu li { color: var(--texte); }
.l4m-modele .contenu ul { padding-left: 1.15rem; }
.l4m-modele .meta { display: flex; flex-wrap: wrap; gap: .65rem; margin: 1.2rem 0 1.8rem; }
.l4m-modele .meta span { border: 1px solid var(--trait); padding: .38rem .65rem; color: var(--texte-doux); font-size: .82rem; }
.l4m-article a { color: inherit; text-decoration: none; }
.l4m-article a:hover h3, .l4m-article a:focus-visible h3 { color: var(--or-vif); }
.l4m-article-long { max-width: 46rem; }
.l4m-article-long > p:first-of-type { color: var(--texte-fort); font-size: 1.08rem; }
.l4m-article-long p, .l4m-article-long li { color: var(--texte); }
.l4m-article-long h2 { margin: 2.6rem 0 .8rem; font-size: clamp(1.5rem, 4vw, 2rem); }

/* Le menu complet n'est affiché que lorsqu'il tient réellement avec le CTA. */
@media (min-width: 62rem) and (max-width: 71.99rem) {
  .l4m-burger { display: inline-flex; }
  .l4m-entete .menu { display: none; }
  .l4m-entete .rdv { margin-left: auto; }
}
@media (min-width: 72rem) {
  .l4m-burger { display: none; }
  .l4m-entete .menu { display: flex; gap: 1.25rem; }
  .l4m-entete .menu a { font-size: .82rem; }
  .l4m-entete .rdv { margin-left: 0; }
}

/* CONTENT-VISIBILITY A ÉTÉ RETIRÉ ICI, VOLONTAIREMENT.
   La règle « .l4m main > section:nth-of-type(n+3) { content-visibility: auto } »
   évitait de calculer les sections loin du premier écran. Sur le papier c'est
   gratuit ; en pratique elle se battait avec les apparitions.

   Un bloc hors champ n'est pas rendu : la transition d'opacité déclenchée à ce
   moment-là ne se joue pas, et le bloc reste à zéro. Mon audit a trouvé jusqu'à
   trente-et-un blocs invisibles ALORS QU'ILS ÉTAIENT À L'ÉCRAN, en descendant
   puis en remontant la page. C'est le pire défaut possible : un visiteur qui
   remonte voit des trous.

   Le gain de la règle était marginal — la page fait 6 requêtes et aucun script
   tiers au chargement. Le risque, lui, était de montrer une page trouée à sa
   cliente. On garde les animations, on retire l'optimisation. */

/* ── Cohabitation avec le thème PUR, sur nos pages uniquement ─────────────── */
.page-id-990608 .meta-header,
body:has(.l4m) .meta-header,
.page-id-990608 .page-header,
body:has(.l4m) .page-header { display: none; }
.page-id-990608 .l4m,
body:has(.l4m) .l4m {
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  width: auto; max-width: none;
}
/* Les quatre cotes, pas seulement les deux. Cette regle ne remettait a zero
   que la gauche et la droite : .page-content garde 40 px de remplissage en
   haut, et une fois l'en-tete du theme masquee, ces 40 px devenaient une bande
   blanche au-dessus de la banniere. Mesure sur la page en ligne, pas devine.

   ET IL FAUT !important. Sans lui, la gauche et la droite passaient mais le
   haut restait a 40 px : une regle du theme, plus specifique, gagnait sur ce
   seul cote. Le resultat etait un remplissage a moitie applique -- le pire des
   cas, parce qu'il donne l'impression que la regle marche. */
.page-id-990608 .vgblk-rw-wrapper,
body:has(.l4m) .vgblk-rw-wrapper,
.page-id-990608 .page-content,
body:has(.l4m) .page-content { padding: 0 !important; max-width: none !important; }
.page-id-990608 .l4m,
body:has(.l4m) .l4m { overflow: visible; }
.page-id-990608 .l4m-tiroir,
body:has(.l4m) .l4m-tiroir { z-index: 100000; }

/* Son ancien en-tete ET son ancien pied, masques sur NOS PAGES UNIQUEMENT.
   Sans ca, elle voit deux barres de navigation empilees, deux logos, deux
   menus, puis deux pieds de page — et croit que c'est le resultat livre.

   .fixed-header-box ne suffisait PAS : c'est seulement l'en-tete collante. Le
   vrai en-tete, .main-header, est son VOISIN et non son enfant — masquer l'un
   laissait l'autre. Vu en ligne le 20/08 : ses coordonnees, ses horaires et son
   ancien menu s'affichaient au-dessus de la nouvelle page.

   En bas, .footer-wrapper porte ses paves Facebook, Instagram, YouTube,
   Google+ et Trip Advisor, empiles SOUS notre propre pied de page.

   Nos pages portent leur propre en-tete et leur propre pied : ceux du theme
   sont des doublons, pas un complement. Le reste de son site n'est pas touche. */
.page-id-990608 .fixed-header-box,
body:has(.l4m) .fixed-header-box,
.page-id-990608 .main-header,
body:has(.l4m) .main-header,
.page-id-990608 .top-nav,
body:has(.l4m) .top-nav,
.page-id-990608 .footer-wrapper,
body:has(.l4m) .footer-wrapper,
.page-id-990608 .main-footer,
body:has(.l4m) .main-footer,
.page-id-990608 .vamtam-scroll-to-top,
body:has(.l4m) .vamtam-scroll-to-top { display: none !important; }

/* LE WIDGET PLANITY EST CONCU POUR UN FOND CLAIR.
   Pose dans un bloc .l4m, il heritait ma couleur creme et se dessinait sur
   mon fond nuit. Mesure du 21/08 sur la page en ligne, apres le clic :
   53 textes sous le seuil, dont le NOM DE CHAQUE MASSAGE a 1,18 de contraste,
   et les descriptions a 2,04. On lui rend le fond blanc et l encre sombre
   qu il attend : 53 echecs deviennent 2.
   Les 2 restants sont les boutons orange de Planity (blanc sur #D98454,
   2,85) : c est leur charte, sur tous leurs clients, et leurs classes sont
   des empreintes qui changent a chaque mise a jour. On n y touche pas. */
/* PEAU SOMBRE DU MODULE PLANITY - 21/08/2026.
   Choix de Cameron : le module doit se fondre dans le site, pas ressembler
   a une greffe blanche au milieu du brun.
   REGLE DE PRUDENCE : on ne vise QUE des selecteurs d elements (button,
   input, a, svg), JAMAIS les classes de Planity - ce sont des empreintes
   qui changent a chaque mise a jour de leur cote. Si un jour ils modifient
   leur structure, le module redeviendra clair au milieu du sombre : visible,
   mais lisible. C est le pire cas, et il est acceptable. */
#planity-zone, #planity { background: #17110D; color: #F2ECE2; border: 1px solid rgba(198,161,91,.22); border-radius: .5rem; padding: .9rem; }
#planity-zone *, #planity *, #planity-zone *::before, #planity *::before, #planity-zone *::after, #planity *::after { background-color: transparent !important; color: #F2ECE2 !important; border-color: rgba(198,161,91,.22) !important; box-shadow: none !important; }
#planity-zone button, #planity button, #planity-zone [role="button"], #planity [role="button"] { background-color: #7E5F1F !important; color: #FBF6EC !important; border: 1px solid #9A7526 !important; border-radius: .3rem !important; }
#planity-zone input, #planity input, #planity-zone select, #planity select, #planity-zone textarea, #planity textarea { background-color: #1E1712 !important; color: #F2ECE2 !important; border: 1px solid #7E6740 !important; }
#planity-zone a, #planity a { color: #C6A15B !important; }
#planity-zone svg, #planity svg { fill: currentColor !important; }
#planity-zone img, #planity img { background-color: transparent !important; }