/* ==========================================================================
   Gabarit site vitrine : feuille de style de départ

   À FAIRE PAR PROJET : remplacer les jetons de couleur et de police (bloc :root et bloc
   sombre) d'après la direction choisie avec les skills de design. Ne pas garder la palette
   neutre du gabarit telle quelle.

   Base à plat (revue du 30 octobre 2026) : aucune ombre au repos, aucun dégradé, aucun filet,
   aucun verre ; les surfaces se séparent par l'espace et le ton. Elle passe lint.mjs de
   design-taste-frontend. Les sections d'exemple ne sont pas une allure : chaque site prend celle
   de sa fiche de direction. Le style C (cadres doubles, ombres douces, dégradés, flèche dans un
   cercle) est dans css/style-c.css, à lier seulement si la direction le demande.

   Système de formes (règle unique, appliquée partout ; à changer selon la direction) :
     - boutons et étiquettes  : pilule (999px)
     - cadres, cartes, blocs   : 28px  (--r-lg)
     - images internes         : 18px  (--r-md)
     - champs de formulaire    : 12px  (--r-sm)

   Échelle des z-index (ne pas improviser d'autres valeurs) :
     38   bouton d'action collant (téléphone et tablette)
     39   menu mobile plein écran
     40   barre de navigation collante
     55   traînée derrière le curseur (module trainee)
     60   grain fixe (si utilisé)
     100  lien d'évitement
     (les <dialog> vivent dans la couche supérieure du navigateur)
   ========================================================================== */

/* ---------- Jetons ---------- */
/* O'Soins Mobile : les couleurs de sa page Facebook, mesurées le 8 novembre 2026 (PRODUCT.md).
   Sa crème #FBF7EC (refusée par inspect.mjs) devient le papier #F6F7F1. Le feutre est son sarcelle
   de la maison et de la main, un ton plus foncé pour le contraste du texte clair. */
:root {
  color-scheme: light dark;

  --feutre: #E9F1EE;          /* fond de la page : le blanc de son affiche, teinté de sarcelle (10 nov. 2026) */
  --papier: #FDFCF7;          /* les feuilles punaisées : le blanc crème de l'affiche */
  --sauge-pale: #DDE7D6;      /* pastille et notes sauge */
  --sarcelle: #125A68;        /* son nom, les titres sur papier, les boutons sur papier */
  --sarcelle-fonce: #0D4A56;
  --encre: #143A42;           /* texte sur papier */
  --encre-2: #3A5C61;
  --encre-3: #557377;
  --sauge: #678778;           /* « MOBILE » */
  --sauge-fonce: #4F6B5E;
  --vague: #87BBB7;
  --goutte: #BA172C;          /* la goutte : la prise de sang, rien d'autre */
  --pied: #0F4752;
  --c-sang: #CB3C4E; --c-urine: #62A0C5; --c-oreilles: #9178AF; --c-plaies: #E2B05B; --c-sutures: #7A915B;

  /* Les jetons du gabarit, sur le fond clair : encre sarcelle, boutons sarcelle */
  --bg: var(--feutre);
  --bg-2: #DCE8E3;
  --surface: var(--papier);
  --ink: var(--encre);
  --ink-2: var(--encre-2);
  --ink-3: var(--encre-3);
  --line: rgba(18, 90, 104, 0.14);
  --line-strong: rgba(18, 90, 104, 0.26);
  --field-border: rgba(18, 90, 104, 0.45);
  --tint: rgba(18, 90, 104, 0.07);
  --tint-strong: rgba(18, 90, 104, 0.13);

  --brand: var(--sarcelle);
  --brand-soft: var(--vague);
  --deep: var(--sarcelle);
  --deep-2: var(--pied);
  --on-green: var(--papier);
  --on-green-2: rgba(253, 252, 247, 0.8);
  --accent-text: var(--sarcelle);

  --btn-bg: var(--sarcelle);
  --btn-bg-hover: var(--sarcelle-fonce);
  --btn-fg: var(--papier);
  --focus: var(--sarcelle);

  --error: #A93F27;
  --error-bg: #FBEDE8;
  --shadow-rgb: 16, 48, 54;

  --r-lg: 26px;
  --r-md: 20px;
  --r-sm: 12px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);

  --t-fast: 180ms;
  --t-base: 240ms;
  --t-slow: 700ms;
  --t-menu: 450ms;

  --font-display: "Caveat", "Segoe Print", cursive;
  --font-script: "Satisfy", "Segoe Script", cursive;          /* les deux phrases de son affiche */
  --font-nom: "DM Serif Display", Georgia, serif;           /* « O'Soins » comme sur son logo */
  --font-body: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;

  --text-fine: .9rem;
  --text-label: .95rem;
  --text-small: 1rem;
  --text-lead: clamp(1.15rem, 1.02rem + .35vw, 1.35rem);
  --text-h3: clamp(1.6rem, 1.1rem + 1.4vw, 2.6rem);
  --text-h2: clamp(3rem, 1.5rem + 4.2vw, 6rem);
  --text-chiffre: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  /* Les tailles en Caveat : trois, plus le titre de l’affiche et le nom du pied de page */
  --display-xl: clamp(3.4rem, 1.4rem + 5vw, 6rem);
  --display-l: clamp(2.4rem, 1.5rem + 2.6vw, 4.2rem);
  --display-m: clamp(2rem, 1.5rem + 1.2vw, 2.8rem);
  --display-s: clamp(1.5rem, 1.2rem + .8vw, 2rem);

  --container: 1320px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(5rem, 9vw, 9rem);
  --nav-h: 80px;
}

/* La nuit : la même page claire, un ton plus douce pour ne pas éblouir (Mathieu travaille en thème
   sombre ; l'affiche de la cliente est claire, le site le reste). */
@media (prefers-color-scheme: dark) {
  :root {
    --feutre: #DDE8E4;
    --papier: #F2F5F1;
    --sauge-pale: #D5DFCD;
    --bg-2: #D0DDD8;
    --pied: #0B353D;
  }
}

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

html {
  scroll-behavior: smooth;
  overflow-x: clip;   /* un élément en rotation ou agrandi ne fait jamais déborder la page sur le côté */
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--brand) var(--bg-2);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1rem + .2vw, 1.2rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
::selection { background: color-mix(in srgb, var(--brand) 28%, transparent); color: var(--ink); }
input, textarea, select { caret-color: var(--brand); }
button, input, select, textarea { font: inherit; color: inherit; }
p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Sur les surfaces profondes, l'anneau passe en version claire. Pas dans la carte blanche du
   formulaire, posée sur le panneau contact : l'anneau pâle y serait presque invisible */
.section--deep :focus-visible, .contact__copy :focus-visible { outline-color: var(--brand-soft); }
/* Une section atteinte par un lien d'ancre reçoit le focus (js/defilement.js) pour que le Tab reparte
   de là ; elle n'est pas un contrôle : pas d'anneau autour d'elle entière */
main[tabindex="-1"]:focus, section[tabindex="-1"]:focus, article[tabindex="-1"]:focus { outline: none; }

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.section { padding-block: var(--section); }
.section--tint { background: var(--bg-2); }
.section--deep { background: var(--deep); color: var(--on-green); border-radius: clamp(24px, 4vw, 56px); }

.skip-link {
  position: absolute; top: -100%; left: var(--gutter); z-index: 100;
  padding: .6rem 1rem; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: .75rem; }
/* Texte lu par les lecteurs d'écran seulement (« , nouvel onglet ») */
.insecable { white-space: nowrap; }   /* garde ensemble un mot à traits d'union (sera-t-elle) */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

#top-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }   /* taste-skill-ignore : repère invisible, pas un filet */

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .85rem;
  min-height: 54px; padding: .5rem .5rem .5rem 1.5rem;
  border-radius: 999px; border: 0;
  font-weight: 600; font-size: 1rem; line-height: 1; text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-soft), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn:active { transform: scale(.97); }
/* Sur un écran étroit, le libellé passe à la ligne plutôt que de déborder de sa carte. L'icône garde
   son cercle (flex: none) : sinon elle s'aplatissait dès que le libellé passait sur deux lignes. */
.btn__label { line-height: 1.2; text-align: start; }
.btn__icon {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 1.1rem;
  transition: transform var(--t-base) var(--ease-soft);
}
/* Survols réservés aux appareils qui survolent vraiment (souris, pavé tactile) : sur un écran
   tactile, un survol resterait collé après un toucher */
@media (hover: hover) and (pointer: fine) { .btn:hover .btn__icon { transform: translateX(3px); } }
.btn--primary { background: var(--btn-bg); color: var(--btn-fg); }
@media (hover: hover) and (pointer: fine) { .btn--primary:hover { background: var(--btn-bg-hover); } }
.btn--ghost { background: var(--tint); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover { background: var(--tint-strong); } }
.btn--light { background: var(--on-green); color: var(--deep); }
.btn--sm { min-height: 46px; padding: .35rem .35rem .35rem 1.15rem; font-size: var(--text-small); gap: .7rem; }
.btn--sm .btn__icon { width: 32px; height: 32px; font-size: 1rem; }
.btn--block { width: 100%; justify-content: space-between; }
.btn[disabled] { opacity: .72; cursor: progress; }

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  height: var(--nav-h);
  transition: background var(--t-base) var(--ease);
}
/* Défilement amorti (js/defilement.js pose .amorti) : une barre collée partirait avec la page, elle
   devient fixée, et le contenu garde sa place en dessous. Le glissé vient de ScrollSmoother, pas du
   navigateur. Un élément collé dans la page passe par data-epingle (voir js/defilement.js). */
html.amorti { scroll-behavior: auto; }
html.amorti .nav { position: fixed; left: 0; right: 0; }
html.amorti #smooth-content { padding-top: var(--nav-h); }
/* « body » ajouté pour l'emporter sur la scène collée d'un héros vidéo, écrite plus bas */
html.amorti body [data-epingle], html.amorti body [data-scene] { position: relative; top: auto; }
.nav.is-scrolled { background: var(--bg); }
.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand {
  display: inline-flex; align-items: center; gap: .7rem;
  text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1;
}
.brand picture { display: contents; }
.brand__mark { width: 44px; height: 44px; object-fit: contain; flex: none; }
.nav__links { display: flex; gap: .15rem; }
.nav__links a {
  display: inline-flex; align-items: center; min-height: 44px;   /* cible tactile (tablette en paysage) */
  text-decoration: none; padding: .7rem .95rem; border-radius: 999px;
  color: var(--ink-2); font-weight: 500; font-size: var(--text-small); line-height: 1.4;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav__links a.is-active { color: var(--ink); background: var(--tint); }
@media (hover: hover) and (pointer: fine) { .nav__links a:hover { color: var(--ink); background: var(--tint); } }
.nav__toggle {
  display: none; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: var(--tint); cursor: pointer;
}
.nav__burger { position: relative; display: block; width: 18px; height: 12px; }
.nav__burger span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: var(--ink); transition: transform var(--t-base) var(--ease-soft);
}
.nav__burger span:nth-child(1) { top: 0; }
.nav__burger span:nth-child(2) { top: 10px; }
.nav__toggle[aria-expanded="true"] .nav__burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__burger span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }
/* Seuil du menu. Avec le contenu d'exemple, la barre complète (nom, liens, bouton) demande 1 008 px.
   À remesurer avec le nom et les liens du client, et à reporter dans js/main.js (même valeur plus 1). */
@media (max-width: 1080px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: grid; }
}

/* Menu mobile plein écran : il défile quand il dépasse l'écran (zoom 200 %, téléphone couché) */
.menu {
  position: fixed; inset: 0; z-index: 39;
  padding-top: var(--nav-h);
  overflow-y: auto; overscroll-behavior: contain;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  opacity: 0; transition: opacity var(--t-base) var(--ease);
}
.menu.is-open { opacity: 1; transition-duration: var(--t-menu); }
.menu__inner { display: grid; gap: .25rem; padding-block: 2rem; }
.menu__inner > a:not(.btn) {
  font-family: var(--font-display); font-size: 2.2rem; font-weight: 600;
  text-decoration: none; padding: .8rem 0;
}
.menu__inner > a {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.menu.is-open .menu__inner > a {
  opacity: 1; transform: none;
  transition-duration: var(--t-menu); transition-delay: calc(60ms + var(--i, 0) * 50ms);
}
.menu__inner .btn { margin-top: 1.75rem; justify-self: start; }
/* Bloque la page sous le menu : sur <html>, qui porte déjà overflow-x (sur <body>, il ne bloquerait
   rien et la barre collante partirait avec la page) */
html:has(body.menu-open) { overflow: hidden; scrollbar-gutter: stable; }   /* la barre de défilement garde sa place : rien ne saute de côté */
/* Menu ouvert : la barre devient opaque, sinon les liens qui défilent passent derrière le nom */
body.menu-open .nav { background: var(--bg); }

/* ==========================================================================
   O'Soins Mobile : le babillard (contrat de direction : .impeccable/surfaces/index-html.md)
   Le feutre sarcelle porte la page ; tout ce qui se lit est une feuille de papier punaisée.
   Deux contextes de couleur : sur le feutre (texte clair) et sur le papier (texte sarcelle).
   ========================================================================== */

/* Surfaces de papier : elles reprennent l'encre sombre et les boutons sarcelle */
.papier, .sauge, .affiche, .note, .feuille, .facture, .polaroid, .lettre, .bulle, .contact__affiche {
  --ink: var(--encre); --ink-2: var(--encre-2); --ink-3: var(--encre-3);
  --brand: var(--sarcelle); --focus: var(--sarcelle);
  --btn-bg: var(--sarcelle); --btn-bg-hover: var(--sarcelle-fonce); --btn-fg: var(--papier);
  --tint: rgba(18, 90, 104, .08); --tint-strong: rgba(18, 90, 104, .15);
  --line-strong: rgba(18, 90, 104, .22);
  --rond: var(--sarcelle); --sur-rond: var(--papier);
  color: var(--ink);
}
.papier { background: var(--papier); }
.sauge { background: var(--sauge-pale); }
/* Les sections du babillard laissent voir le feutre de la page et son grain fixe (.vie-fond) */
/* Défilement amorti : la page glisse comme un seul calque déjà dessiné (mesuré le 9 novembre 2026 :
   travail de la carte graphique de 362 à 195 ms sur le même parcours). Rien de fixé n'est dans #smooth-content. */
html.amorti #smooth-content { will-change: transform; }
.feutre { background: transparent; position: relative; }
.vie-fond { --grain: .05; }   /* grain discret sur le fond clair */

.tete { max-width: 62ch; margin-bottom: clamp(2.25rem, 4.5vw, 3.75rem); }
.tete h2, .prix h2, .travail h2, .lettre h2, .contact h2 {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-h2); line-height: .95; letter-spacing: -.01em;
}
.feutre h2 { color: var(--sarcelle); }
.papier h2, .sauge h2, .lettre h2, .contact__affiche h2 { color: var(--sarcelle); }
.tete p { margin-top: 1rem; font-size: var(--text-lead); color: var(--ink-2); max-width: 44ch; text-wrap: pretty; }

/* Punaises : la couleur d'un soin, un reflet */
.punaise {
  position: absolute; z-index: 3; width: 26px; height: 26px; border-radius: 50%;
  background: var(--c, var(--c-urine)); top: -11px; left: calc(50% - 13px);
}
.punaise::after { content: ""; position: absolute; left: 6px; top: 5px; width: 8px; height: 6px; border-radius: 50%; background: rgba(251, 252, 248, .6); }
.goutte { width: .62em; height: .84em; fill: var(--goutte); flex: none; }
.plantes-dessins { position: absolute; width: 0; height: 0; overflow: hidden; }   /* pas display: none : les dégradés ne s'afficheraient plus */
.coeur { width: 1.05em; height: .9em; fill: none; stroke: currentColor; stroke-width: 2.2; vertical-align: -.08em; }

/* ---------- L'affiche (premier écran) ---------- */
.tableau { padding-block: clamp(1.5rem, 2.6vw, 2.5rem) clamp(3.5rem, 6vw, 5.5rem); overflow-x: clip; }
.tableau__grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.affiche-cadre { grid-column: 1 / span 7; margin-left: clamp(0px, 5vw, 96px); position: relative; z-index: 1; }
.affiche {
  position: relative; border-radius: 22px;
  transform: rotate(-1.3deg); transform-origin: 50% 0;
}
/* La fiche reprend son affiche (10 nov. 2026) : logo centré, nom à empattements, phrases au pinceau
   (Satisfy), liste lisible, feuilles dans deux coins, vague au-dessus des languettes. */
.affiche__corps {
  position: relative; overflow: hidden; container-type: inline-size; background: var(--papier); border-radius: 22px 22px 0 0;
  padding: clamp(1rem, 1.3vw, 1.25rem) clamp(1.5rem, 3.4vw, 3rem) calc(clamp(.5rem, .8vw, .75rem) + clamp(46px, 5vw, 76px));
}
.affiche__corps > :not(.affiche__brin):not(.vague):not(.affiche__coin) { position: relative; z-index: 1; }
.affiche__coin { position: absolute; top: 0; left: 0; z-index: 0; width: clamp(150px, 44cqi, 320px); height: auto; pointer-events: none; }
.affiche__brin { position: absolute; z-index: 0; height: auto; pointer-events: none; }
.affiche__brin--haut { top: -14px; left: -30px; width: clamp(92px, 21cqi, 176px); transform: rotate(10deg); }
.affiche__brin--bas { z-index: 1; right: -22px; bottom: clamp(6px, 1.2vw, 18px); width: clamp(86px, 19cqi, 180px); transform: scaleX(-1) rotate(-4deg); }   /* posé sur la vague */
.affiche__tete { display: grid; justify-items: center; gap: .2rem; text-align: center; font-size: var(--text-small); font-weight: 600; color: var(--sauge-fonce); }
.affiche__tete img { width: clamp(68px, 5.8vw, 86px); height: auto; }
.affiche__nom { display: grid; justify-items: center; gap: .2rem; text-align: center; text-wrap: balance; }
.affiche__nom > span:last-child { font-size: clamp(1rem, .85rem + .45vw, 1.25rem); color: var(--sarcelle); }
.affiche__mobile { display: flex; align-items: center; gap: .55em; text-transform: uppercase; letter-spacing: .3em; font-weight: 700; color: var(--sauge-fonce); }   /* taste-skill-ignore : « MOBILE » espacé, détail de son logo (PRODUCT.md) */
.affiche__mobile::before, .affiche__mobile::after { content: ""; width: 1.6em; height: 2px; background: currentColor; }   /* taste-skill-ignore : les deux filets de son logo */
.affiche__tete b { display: block; font-family: var(--font-nom); font-weight: 400; font-size: clamp(2.4rem, 1.5rem + 2.1vw, 3.5rem); line-height: .95; color: var(--sarcelle); letter-spacing: 0; position: relative; }
.affiche__feuille-nom { position: absolute; right: -.2em; top: -.3em; width: .3em; height: auto; transform: rotate(32deg); }   /* la feuille de son logo */
.affiche h1 {
  margin-top: .2em; font-family: var(--font-script); font-weight: 400; color: var(--sarcelle);
  line-height: 1.12; letter-spacing: 0; text-align: center; text-wrap: balance;
  font-size: min(3.3rem, 7.6cqi);   /* deux lignes, comme sur son affiche */
}
.affiche__qui {
  position: relative; isolation: isolate; margin: .6rem auto 0; width: fit-content; max-width: min(100%, 26em); padding: .45rem 1.6rem .55rem;
  font-family: var(--font-script); font-size: clamp(1.35rem, 1rem + 1vw, 1.8rem); line-height: 1.25; color: var(--sarcelle); text-align: center; text-wrap: balance;
  transform: rotate(-2deg);
}
.affiche__pinceau { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.affiche__pinceau path { fill: #D3E7E2; }
.affiche__pinceau .affiche__pinceau-trait { fill: none; stroke: #E6F2EF; stroke-width: 6; stroke-linecap: round; }
.affiche__coeur { position: absolute; right: -.15em; bottom: -.7em; width: 1em; height: .87em; stroke-width: 1.8; color: var(--sarcelle); transform: rotate(10deg); }
.affiche__soins {
  margin-top: 1.1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem 1.5rem;
  font-family: var(--font-body); font-weight: 600; font-size: clamp(1rem, .9rem + .3vw, 1.15rem); line-height: 1.3; color: var(--encre);
}
.affiche__soins li { display: flex; align-items: center; gap: .65rem; }
.affiche__soins li:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Les soins dans des ronds de couleur, icône blanche (2e page de son affiche) */
.rond-soin { flex: none; width: 1.95em; height: 1.95em; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 90%, #1D3A40); color: #fff; }
.rond-soin i { font-size: 1.2em; }
.rond-soin .goutte { fill: #fff; width: .66em; height: .9em; }
.affiche__ou { width: fit-content; margin: .7rem auto 0; padding: .4rem 1.15rem .45rem .85rem; border-radius: 999px; background: #E2EFEB; display: flex; justify-content: center; align-items: center; gap: .45rem; font-weight: 700; font-size: var(--text-lead); color: var(--sarcelle); }
.affiche__ou i { font-size: 1.3rem; }
.vague--affiche { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; display: block; width: 100%; height: clamp(54px, 6vw, 96px); }
.punaise--g { left: 26px; top: 12px; }
.punaise--d { left: auto; right: 30px; top: 8px; }

/* La frange : chaque languette est un vrai lien ; la page entière garde les trois premières au clavier */
.frange { display: flex; border-top: 4px dotted rgba(18, 90, 104, .5); border-radius: 0 0 22px 22px; overflow: hidden; }   /* taste-skill-ignore : perforation de l'affiche, pas un filet */
.languette {
  flex: 1 1 0; min-width: 0; min-height: clamp(124px, 9.6vw, 160px);
  display: grid; place-items: center; text-decoration: none; color: var(--sarcelle); background: var(--papier);
  border-right: 2px dashed rgba(18, 90, 104, .2);   /* taste-skill-ignore : découpe entre les languettes */
  transform-origin: 50% 0; transition: transform var(--t-fast) var(--ease-soft), background var(--t-fast) var(--ease);
}
.languette:last-child { border-right: 0; }
.languette > span:first-child { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 800; font-size: var(--text-lead); line-height: 1.15; text-align: center; }
.languette small { display: block; font-size: var(--text-small); font-weight: 600; color: var(--sauge-fonce); }
.languette:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .languette:hover { transform: rotate(-2.5deg) translateY(3px); background: var(--sauge-pale); }
}
.languette--partie { background: transparent; display: block; align-self: stretch; }
.languette--partie::before { content: ""; display: block; height: 16px; background: var(--papier); clip-path: polygon(0 0, 100% 0, 100% 55%, 78% 100%, 58% 50%, 38% 95%, 18% 55%, 0 85%); }
.languette.est-arrachee { visibility: hidden; }
.languette--envol { position: fixed; z-index: 60; margin: 0; pointer-events: none; border-right: 0; }

.tableau__notes { grid-column: 9 / 13; display: grid; gap: clamp(1.75rem, 3vw, 2.75rem); justify-items: start; padding-top: clamp(.5rem, 2vw, 2rem); }
.note { position: relative; background: var(--papier); border-radius: 18px; padding: 1.6rem 1.75rem 1.75rem; max-width: 420px; transform: rotate(var(--r, 2deg)); }
.note p:not(.note__titre) { font-size: var(--text-lead); line-height: 1.45; }
.note__titre { font-family: var(--font-display); font-weight: 700; font-size: var(--display-m); line-height: 1; color: var(--sarcelle); margin-bottom: .45rem; }
.note--ouverture { background: var(--sauge-pale); --r: 2.2deg; }
.note--facture { --r: -1.6deg; justify-self: end; }

/* Portable bas (1280 x 800) : la frange reste dans le premier écran */
@media (min-width: 1081px) and (max-height: 860px) {
  .tableau { padding-top: 1.25rem; }
  .affiche__tete img { width: 64px; }
  .affiche__tete b { font-size: 2.3rem; }
  .affiche h1 { font-size: min(2.6rem, 7.2cqi); }
  .affiche__qui { font-size: 1.4rem; }
  .languette { min-height: 118px; }
}
@media (max-width: 1080px) {
  .affiche-cadre { grid-column: 1 / -1; margin-left: 0; }
  .affiche { transform: rotate(-.7deg); }
  .tableau__notes { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .note--facture { justify-self: start; }
}
@media (max-width: 700px) {
  .tableau__grille { grid-template-columns: minmax(0, 1fr); }
  .tableau__notes { grid-template-columns: minmax(0, 1fr); }
  .affiche__soins { grid-template-columns: minmax(0, 1fr); }
  .affiche h1 { font-size: min(2.6rem, 10.5cqi); }   /* « professionnalisme, » tient sur sa ligne */
  .affiche__ou { font-size: 1rem; padding-inline: .7rem .9rem; }
  .affiche__brin--bas { width: 72px; right: -18px; bottom: 2px; }
  .languette--double { display: none; }
  .languette { min-height: 150px; }
}

/* ---------- Mes services : feuilles qui se posent l'une sur l'autre ---------- */
.soins { overflow-x: clip; }
.feuilles { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.feuille {
  position: relative; background: var(--papier); border-radius: 26px;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(1.5rem, 3.5vw, 3.5rem); align-items: center;
  padding: calc(14px + clamp(1.75rem, 3.5vw, 3.25rem)) clamp(1.75rem, 3.5vw, 3.25rem) clamp(1.75rem, 3.5vw, 3.25rem); align-items: center;
  rotate: var(--r, -.6deg);
}
.feuille:nth-child(even) { --r: .6deg; }
.feuille > .punaise { --c: var(--sarcelle); top: -8px; }
.feuille::before { content: ""; position: absolute; inset: 0 0 auto; height: 14px; border-radius: 26px 26px 0 0; background: var(--c); }
.feuille h3 {
  display: flex; align-items: flex-start; gap: .4em; font-family: var(--font-display); font-weight: 700;
  font-size: var(--display-l); line-height: .95; color: var(--sarcelle);
}
/* Pastille et goutte centrées sur la première ligne du titre (ligne de .95em), même sur deux lignes */
.feuille .pastille { width: .42em; height: .42em; margin-top: .265em; border-radius: 50%; background: var(--c); flex: none; }
.feuille h3 > .goutte { margin-top: .055em; }
.feuille p { margin-top: 1.1rem; font-size: var(--text-lead); line-height: 1.55; max-width: 34ch; }
.feuille__points { margin-top: 1.1rem; display: grid; gap: .5rem; font-weight: 600; }
.feuille__points li { display: flex; align-items: center; gap: .65rem; }
.feuille__points li::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--c); flex: none; }
.feuille__prix { margin-top: 1.5rem; padding-top: .9rem; border-top: 2px dotted rgba(18, 90, 104, .3); display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; max-width: 34ch; }   /* taste-skill-ignore : la ligne de la facture, reprise sur la carte */
.feuille__prix dt { font-weight: 700; font-size: var(--text-lead); }
.feuille__prix dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--display-s); line-height: 1; color: var(--sarcelle); white-space: nowrap; }
.feuille__photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; background: var(--c); padding: 12px; }
.feuille__photo figcaption, .polaroid figcaption, .travail__photo figcaption { margin-top: .55rem; font-size: var(--text-fine); color: var(--ink-2); }
@media (max-width: 900px) {
  .feuille { grid-template-columns: minmax(0, 1fr); min-height: 0; }
}

/* Le bouton de la bande (pause-boucles) arrête tout ce qui vit en continu, feuilles et reflets compris */
html.vie-en-pause .coeur--bat, html.vie-en-pause .rdv__rayons, html.vie-en-pause .derive, html.vie-en-pause .vie-reflet::after, html.vie-en-pause .plante svg, html.vie-en-pause .fond-vagues__couche { animation-play-state: paused; }

/* ---------- Rendez-vous rapides et flexibles : le bandeau de son affiche, tel quel (10 nov. 2026) ----------
   Horloge au trait (ses rayons respirent), sa phrase en Satisfy qui monte un peu, le trait souligné se
   dessine au défilement (data-trace), deux rubans de vagues pâles, des feuilles à gauche. */
.rdv { padding-block: clamp(3.5rem, 6vw, 6rem); }
.rdv__ruban { position: absolute; left: 0; z-index: 0; display: block; width: 100%; height: clamp(46px, 7vw, 110px); pointer-events: none; }
.rdv__ruban--haut { top: clamp(.25rem, 1.5vw, 1.5rem); }
.rdv__ruban--bas { bottom: clamp(.25rem, 1.5vw, 1.5rem); }
.rdv__ruban-1 { fill: #CFE6E1; }
.rdv__ruban-2 { fill: #A9D2CC; opacity: .7; }
.rdv__ruban-reflet { fill: none; stroke: #F7FBFA; stroke-width: 2.5; stroke-linecap: round; opacity: .9; vector-effect: non-scaling-stroke; }
.rdv__contenu { display: flex; align-items: center; justify-content: center; gap: clamp(.75rem, 2.6vw, 2.5rem); padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.rdv__horloge { flex: none; width: clamp(80px, 10.5vw, 150px); height: auto; fill: none; stroke: var(--sarcelle); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.rdv__rayons { animation: rdv-rayons 2.6s ease-in-out infinite alternate; }
@keyframes rdv-rayons { from { opacity: .3; } to { opacity: 1; } }
.rdv__texte { transform: rotate(-4deg); }
.rdv__titre { font-family: var(--font-script); font-weight: 400; font-size: clamp(2.3rem, 1.2rem + 4vw, 5rem); line-height: 1.05; letter-spacing: 0; color: var(--sarcelle); }
.rdv__titre span { display: block; }
.rdv__titre span:first-child { padding-left: .9em; }
.rdv__trait { display: block; width: 84%; height: clamp(12px, 1.6vw, 24px); margin: .15em 0 0 10%; overflow: visible; }
.rdv__trait path { stroke: var(--sarcelle); stroke-width: 3.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.plante--rdv { left: -34px; bottom: 4%; width: clamp(100px, 13vw, 220px); }
@media (max-width: 600px) {
  .rdv__contenu { flex-direction: column; gap: .5rem; text-align: center; }
  .rdv__horloge { width: 74px; }
  .rdv__titre { font-size: min(2.5rem, 10.4vw); }
  .rdv__titre span:first-child { padding-left: 0; }
  .rdv__trait { margin-inline: auto; }
  .plante--rdv { width: 80px; left: -26px; }
}

/* ---------- Prix : sa facture ---------- */
.prix__grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.prix__texte { grid-column: 1 / 6; }
.prix__texte p { margin-top: 1.1rem; font-size: var(--text-lead); line-height: 1.55; color: var(--ink-2); max-width: 40ch; text-wrap: pretty; }
.prix__texte .prix__sous-titre { margin-top: 1.4rem; font-family: var(--font-display); font-weight: 700; font-size: var(--display-m); line-height: 1; color: var(--sarcelle); }
.facture { grid-column: 7 / 13; position: relative; background: var(--papier); border-radius: 22px; padding: clamp(1.5rem, 3vw, 2.5rem); transform: rotate(1deg); }
.facture__tete { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; font-size: var(--text-small); font-weight: 600; color: var(--sauge-fonce); }
.facture__tete img { width: 64px; height: auto; }
.facture__tete b { display: block; font-size: var(--text-lead); font-weight: 800; color: var(--sarcelle); }
.facture__mot { font-family: var(--font-display); font-weight: 700; font-size: var(--display-m); line-height: 1; color: var(--sarcelle); }
.facture__lignes { margin-top: 1.5rem; }
.facture__lignes div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .75rem 0; border-bottom: 2px dotted rgba(18, 90, 104, .26); }   /* taste-skill-ignore : lignes de la facture */
.facture__lignes dt { font-weight: 700; font-size: var(--text-lead); }
.facture__lignes dd { margin: 0; color: var(--ink-2); font-size: var(--text-small); white-space: nowrap; }
.facture__frais dt { font-weight: 600; color: var(--ink-2); }
.facture__paiement { margin-top: 1.5rem; }
.facture__paiement > p { font-family: var(--font-display); font-weight: 700; font-size: var(--display-s); line-height: 1; color: var(--sarcelle); }
.facture__paiement ul { margin-top: .75rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.5rem; }
.facture__paiement li { display: flex; align-items: center; gap: .6rem; font-size: var(--text-small); }
.facture__paiement .rond { width: 1.7rem; height: 1.7rem; font-size: .95rem; }
@media (max-width: 900px) {
  .prix__texte, .facture { grid-column: 1 / -1; }
  .facture { transform: rotate(.5deg); }
}
@media (max-width: 600px) {
  .facture__tete { grid-template-columns: auto minmax(0, 1fr); }
  .facture__mot { grid-column: 1 / -1; }
  .facture__paiement ul { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Au travail ---------- */
.marquee { --deep: var(--sarcelle); --on-green: var(--papier); font-family: var(--font-display); font-weight: 700; font-size: var(--display-m); }
.travail__grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.travail__photo { grid-column: 1 / 6; position: relative; transform: rotate(-1.5deg); max-width: 520px; justify-self: center; }
.travail__photo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 24px; }
.travail__texte { grid-column: 7 / 13; position: relative; border-radius: 26px; padding: clamp(1.75rem, 3.5vw, 3rem); transform: rotate(.6deg); }
.travail__texte > p { margin-top: 1.1rem; font-size: var(--text-lead); line-height: 1.55; max-width: 42ch; }
.groupe { position: relative; margin-top: 1.75rem; background: var(--sauge-pale); border-radius: 22px; padding: clamp(1.4rem, 2.6vw, 2rem); }
.groupe__titre { font-family: var(--font-display); font-weight: 700; font-size: var(--display-m); line-height: 1; color: var(--sarcelle); }
.groupe p:not(.groupe__titre) { margin-top: .6rem; line-height: 1.5; }
.groupe ul { margin-top: 1rem; display: grid; gap: .6rem; }
.groupe li { display: flex; align-items: center; gap: .75rem; font-weight: 600; }
.groupe .rond { width: 1.9rem; height: 1.9rem; font-size: 1rem; }
.joindre { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 900px) {
  .travail__photo, .travail__texte { grid-column: 1 / -1; }
  .travail__photo { max-width: 520px; }
}

/* ---------- Où je vais : la route tracée à la main ---------- */
.route { position: relative; height: clamp(240px, 26vw, 380px); margin-block: clamp(.5rem, 2vw, 1.5rem) clamp(2.5rem, 5vw, 4rem); }
.route__trait { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.route__trait path { fill: none; stroke: var(--vague); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .75; }
.route__lieu { position: absolute; font-family: var(--font-display); font-weight: 700; font-size: var(--display-xl); line-height: 1; color: var(--sarcelle); }
.route__lieu span { display: table; margin-top: .35rem; padding: .15rem .7rem .2rem; border-radius: 999px; background: var(--papier); font-family: var(--font-body); font-size: var(--text-lead); font-weight: 600; color: var(--sauge-fonce); }
.route__lieu .goutte { margin-right: .12em; vertical-align: -.02em; }
.route__lieu--mauricie { left: 0; top: 0; }
.route__lieu--portneuf { left: 34%; top: 40%; }
.route__lieu--quebec { right: 0; top: 4%; }
.secteur__bas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.polaroid { position: relative; justify-self: center; background: var(--papier); border-radius: 18px; padding: 14px 14px 18px; max-width: 460px; transform: rotate(-2deg); }
.polaroid img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.polaroid figcaption { text-align: center; font-family: var(--font-display); font-size: var(--display-s); color: var(--ink-2); }
/* La mini carte du secteur, dans le cadre de la photo */
.carte-secteur { width: min(100%, 460px); }
.carte-secteur__dessin { display: block; width: 100%; height: auto; border-radius: 10px; }
.carte-secteur__eau { fill: none; stroke: #A9D2CE; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.carte-secteur__eau--riviere { stroke-width: 3.5; }
.carte-secteur__fleuve { font-family: var(--font-body); font-size: 12px; font-style: italic; font-weight: 600; fill: #5E9692; letter-spacing: .04em; }
.carte-secteur__repere path { fill: var(--sarcelle); }
.carte-secteur__repere circle { fill: var(--papier); }
.carte-secteur__repere--base path { fill: var(--goutte); }
.carte-secteur__nom { font-family: var(--font-body); font-size: 17px; font-weight: 800; fill: var(--sarcelle); paint-order: stroke; stroke: #EAF3EF; stroke-width: 5px; stroke-linejoin: round; }
.note--grande { --r: 1.5deg; max-width: 520px; padding: 2rem 2rem 2.1rem; }
.note--grande .btn { margin-top: 1.25rem; }
@media (max-width: 900px) {
  .route { height: auto; display: grid; gap: .5rem; }
  .route__trait { display: none; }
  .route__lieu { position: static; }
  .secteur__bas { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Qui vient chez vous : sa lettre ---------- */
.alexandra__grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.alexandra .polaroid { grid-column: 1 / 5; transform: rotate(-2.5deg); }
.polaroid__vide { aspect-ratio: 4 / 5; border-radius: 10px; background: var(--sauge-pale); display: grid; place-items: center; }
.polaroid__vide img { width: 46%; height: auto; opacity: .9; }
.lettre { position: relative; grid-column: 6 / 13; background: var(--papier); border-radius: 22px; padding: clamp(1.75rem, 4vw, 3.5rem); transform: rotate(-.6deg); }
.lettre p:not(.lettre__signature) { margin-top: 1.1rem; font-size: var(--text-lead); line-height: 1.6; max-width: 46ch; }
/* Une icône en pastille pâle devant chaque paragraphe, dans la couleur d'une punaise (--c) */
.lettre__ligne { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: .85rem; align-items: start; }
.lettre p.lettre__ligne { max-width: calc(46ch + 3.35rem); text-wrap: pretty; }   /* la colonne de l'icône ne mange pas la ligne de texte */
.lettre__icone {
  width: 2.5rem; height: 2.5rem; margin-top: -.1rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.45rem;
  background: color-mix(in srgb, var(--c) 20%, var(--papier)); color: color-mix(in srgb, var(--c) 80%, #112233);
}
.lettre__signature { margin-top: 1.25rem; font-family: var(--font-display); font-weight: 700; font-size: var(--display-m); color: var(--sarcelle); line-height: 1; }
.coeur--bat { color: var(--goutte); transform-origin: 50% 60%; animation: bat 1.8s ease-in-out infinite; }
@keyframes bat { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(.96); } 45% { transform: scale(1.1); } }
@media (max-width: 900px) {
  .alexandra .polaroid, .lettre { grid-column: 1 / -1; }
  .alexandra .polaroid { max-width: 320px; }
}

/* ---------- Questions : bulles du style C, sur papier ---------- */
.questions__grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.questions .tete { grid-column: 1 / 5; }
.questions .bulles { grid-column: 5 / 13; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.bulles .bulle { background: var(--papier); border: 0; border-radius: 20px; }
.bulle > summary { padding: 1.2rem 1.4rem; }
.bulles .bulle > summary > h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-lead); color: var(--sarcelle); }
.bulle > p { font-size: var(--text-lead); line-height: 1.55; padding-inline: 1.4rem; }
.bulle > :last-child:not(summary) { padding-bottom: 1.4rem; }
@media (max-width: 900px) {
  .questions .tete, .questions .bulles { grid-column: 1 / -1; }
}

/* ---------- Pour me joindre ---------- */
.contact__affiche { position: relative; max-width: 1120px; margin-inline: auto; border-radius: 26px; transform: rotate(-.5deg); }
.contact__corps { position: relative; overflow: hidden; background: var(--papier); border-radius: 26px 26px 0 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem 3rem; padding: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.5rem) calc(clamp(1.5rem, 3vw, 2.5rem) + clamp(48px, 5vw, 84px)); }
.contact__corps > :not(.vague) { position: relative; z-index: 1; }
.vague--contact { position: absolute; left: 0; bottom: 0; z-index: 0; display: block; width: 100%; height: clamp(50px, 5.6vw, 92px); }
.horaire { background: var(--sauge-pale); border-radius: 18px; padding: 1.25rem 1.5rem; max-width: 420px; }
.horaire__titre { display: flex; align-items: center; gap: .65rem; font-family: var(--font-display); font-weight: 700; font-size: var(--display-m); line-height: 1; color: var(--sarcelle); }
.horaire__titre .rond { width: 2rem; height: 2rem; font-size: 1.05rem; font-family: var(--font-body); }
.horaire p:not(.horaire__titre) { margin-top: .5rem; line-height: 1.45; }
.frange--grande { border-radius: 0 0 26px 26px; }
.frange--grande .languette { min-height: clamp(200px, 16vw, 240px); }
.frange--grande .languette > span:first-child { font-size: var(--text-lead); }

/* ---------- Les plantes de son affiche, autour de la page (10 nov. 2026) ----------
   Dessinées une fois (#brin-long, #brin-bouquet en tête de page). Le cadre place et donne la
   profondeur (data-speed) ; le dessin balance autour de sa tige (--pose, --sens, --duree). Derrière
   les feuilles de papier, jamais sur un texte. */
.plante { position: absolute; z-index: 0; display: block; pointer-events: none; }
.plante svg {
  display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 100%;
  transform: scaleX(var(--sens, 1)) rotate(var(--pose, 0deg));
  animation: plante-balance var(--duree, 10s) ease-in-out var(--decalage, 0s) infinite alternate;
}
@keyframes plante-balance {
  from { transform: scaleX(var(--sens, 1)) rotate(calc(var(--pose, 0deg) - 2.5deg)); }
  to   { transform: scaleX(var(--sens, 1)) rotate(calc(var(--pose, 0deg) + 2.5deg)); }
}
.feutre > .container, .tableau__grille { position: relative; z-index: 1; }
.plante--accroche { left: -18px; bottom: 3%; width: clamp(76px, 9vw, 160px); }
.plante--notes { right: 1%; top: 58%; width: clamp(130px, 16vw, 270px); }
.plante--soins-1 { right: -6px; top: 3%; width: clamp(70px, 8.5vw, 150px); }
.plante--soins-2 { left: -40px; top: 44%; width: clamp(120px, 14vw, 240px); }
.plante--prix { left: -28px; bottom: 6%; width: clamp(120px, 14vw, 240px); }
.plante--secteur { right: -6px; bottom: 6%; width: clamp(70px, 8.5vw, 150px); }
.plante--alexandra { right: -28px; top: 3%; width: clamp(120px, 14vw, 230px); }
.plante--questions { right: -8px; bottom: 6%; width: clamp(70px, 8.5vw, 150px); }
.plante--contact { left: -10px; top: 6%; width: clamp(70px, 8.5vw, 150px); }
@media (max-width: 700px) {
  .plante--soins-2, .plante--prix, .plante--notes, .plante--questions { display: none; }
  .plante--accroche { width: 58px; left: -22px; bottom: 2%; }
}

/* ---------- Les vagues de son affiche, ailleurs dans la page (10 nov. 2026) ----------
   La bande défilante devient un ruban sarcelle aux bords en vague (les vagues de fond sont plus bas). */
.vague--bande { display: block; width: 100%; height: clamp(18px, 2.6vw, 40px); pointer-events: none; }
.vague--bande-haut { margin-bottom: -1px; }
.vague--bande-bas { margin-top: -1px; }
.bande__clair { fill: var(--vague); opacity: .6; }
.bande__fonce { fill: var(--sarcelle); }

/* ---------- Vagues qui ondulent derrière toute la page (fond fixé, 10 nov. 2026) ----------
   Chaque couche fait deux fois la largeur de l'écran et porte deux périodes de vague : glissée de la
   moitié, elle revient au même dessin. Transform seulement (calque composé, rien à repeindre). */
.fond-vagues { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(150px, 30vh, 320px); opacity: calc(.55 + var(--profondeur, 0) * .45); }
.fond-vagues__couche { position: absolute; left: 0; bottom: 0; width: 200%; will-change: transform; animation: fond-vague var(--duree, 60s) linear infinite; }
.fond-vagues__couche svg { display: block; width: 100%; height: 100%; }
.fond-vagues__couche--1 { height: 100%; --duree: 70s; }
.fond-vagues__couche--1 path { fill: #DCEBE6; }
.fond-vagues__couche--2 { height: 74%; --duree: 48s; animation-direction: reverse; }
.fond-vagues__couche--2 path { fill: #CFE4DE; }
.fond-vagues__couche--2 .fond-vagues__reflet { fill: none; stroke: #F6FBF9; stroke-width: 3; vector-effect: non-scaling-stroke; opacity: .8; }
.fond-vagues__couche--3 { height: 46%; --duree: 36s; }
.fond-vagues__couche--3 path { fill: #C1DBD4; }
@keyframes fond-vague { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- La vague du bas de son affiche, en haut du pied de page ---------- */
.footer { position: relative; }
.vague--pied { position: absolute; left: 0; bottom: calc(100% - 1px); display: block; width: 100%; height: clamp(54px, 7vw, 120px); pointer-events: none; }
.vague--pied .vague__1 { fill: #D2E6E1; }
.vague--pied .vague__2 { fill: #8FC0BA; }
.vague--pied .vague__3 { fill: var(--pied); }

/* ---------- Pied de page : le nom revient en grand ---------- */
.footer { padding: clamp(3.5rem, 7vw, 6rem) 0 2rem; background: var(--pied); color: var(--papier); --ink: var(--papier); --ink-2: #DCE8E4; --focus: var(--papier); }   /* l'îlot sombre : textes clairs */
.footer__nom { font-family: var(--font-display); font-weight: 700; font-size: clamp(4rem, 1.5rem + 10vw, 12rem); line-height: .85; letter-spacing: -.01em; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1.3fr; gap: 2.5rem; }
.footer__devise { font-family: var(--font-display); font-weight: 600; font-size: var(--display-s); line-height: 1.1; color: var(--vague); }
.footer__brand p:not(.footer__devise) { margin-top: .9rem; color: var(--ink-2); max-width: 40ch; }
.footer h3 { font-family: var(--font-body); font-size: var(--text-small); font-weight: 700; color: var(--sauge-pale); margin-bottom: .35rem; letter-spacing: 0; }
.footer__nav, .footer__contact { display: grid; gap: .3rem; align-content: start; }
.footer__nav a, .footer__contact a, .footer__contact p {
  display: inline-flex; align-items: center; gap: .55rem; justify-self: start; min-height: 44px; padding: .3rem 0;
  max-width: 100%; overflow-wrap: anywhere; color: var(--ink-2); text-decoration: none; transition: color var(--t-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .footer__nav a:hover, .footer__contact a:hover { color: var(--papier); text-decoration: underline; } }
.footer__contact i { font-size: 1.15rem; color: var(--vague); }
.footer__bottom { margin-top: 3rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem 2rem; font-size: var(--text-fine); color: var(--ink-2); }
.footer__bottom a { color: var(--ink-2); display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 800px) { .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }

/* ---------- La barre, sur le feutre ---------- */
.brand__mark { width: 48px; height: 48px; padding: 6px; border-radius: 50%; background: var(--papier); }
.brand__name { font-family: var(--font-body); font-weight: 800; font-size: var(--text-lead); letter-spacing: -.01em; }
.vie-reflet { --reflet: var(--vague); }

@media (prefers-reduced-motion: reduce) {
  .marquee::before, .marquee::after { display: none; }   /* bande à l'arrêt : les fondus des bords cachaient des mots */
  .coeur--bat, .rdv__rayons { animation: none; }
  .languette { transition: none; }
  .languette:hover { transform: none; }
}
@media print {
  .affiche, .note, .feuille, .facture, .polaroid, .lettre, .contact__affiche, .travail__photo { transform: none !important; }
  .feutre { background: #fff; --ink: #143A42; --ink-2: #3A5C61; color: #143A42; }
  .feutre h2, .route__lieu { color: #125A68; }
}

/* ---------- Bouton d'action collant (téléphone et tablette) ----------
   Seulement sous le seuil du menu, là où la barre perd son bouton. Caché par défaut : le module
   « bouton mobile » de js/main.js le montre (.is-shown) quand le bouton du héros est sorti de
   l'écran, et le cache devant le formulaire et le pied de page. visibility le retire aussi du
   parcours au clavier et des lecteurs d'écran quand il est caché. */
.mobile-cta { display: none; }
@media (max-width: 1080px) {
  html { scroll-padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }   /* un élément atteint au Tab ne finit pas sous le bouton du bas */
  .mobile-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 38;
    display: flex; align-items: center; gap: .5rem;
    padding: .65rem var(--gutter) calc(.65rem + env(safe-area-inset-bottom, 0px));
    background: var(--bg-2);
    visibility: hidden; transform: translateY(110%);
    transition: transform var(--t-base) var(--ease-soft), visibility 0s linear var(--t-base);
  }
  .mobile-cta.is-shown { visibility: visible; transform: none; transition: transform var(--t-base) var(--ease-soft), visibility 0s; }
  body.menu-open .mobile-cta { visibility: hidden; transform: translateY(110%); }
}
.mobile-cta__call {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.2rem;
  color: var(--ink); text-decoration: none; background: var(--tint);
  transition: background var(--t-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .mobile-cta__call:hover { background: var(--tint-strong); } }
.mobile-cta__main { flex: 1; justify-content: space-between; }

/* ---------- Apparition au défilement ----------
   Animation (et non transition) : une fois jouée, elle ne laisse rien dans la cascade et
   l'élément retrouve ses propres transitions de survol. La classe .js est posée avant le premier
   affichage par js/avant-affichage.js ; sans JavaScript, ou si main.js ne démarre pas les
   apparitions dans les 3 s, tout reste visible.
   L'accroche porte « reveal is-visible » dans le HTML : son apparition part au premier affichage,
   sans attendre GSAP et main.js (sinon le plus grand élément s'affiche tard : LCP).
   Jamais .reveal sur un élément que GSAP anime ou qui porte data-speed (couche D) : l'animation CSS
   écraserait le transform de GSAP ou de ScrollSmoother et l'élément sauterait. */
@keyframes reveal-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.js .reveal:not(.is-visible) { opacity: 0; }
.js .reveal.is-visible { animation: reveal-in var(--t-slow) var(--ease) calc(var(--i, 0) * 80ms) backwards; }

/* ---------- Module : bande défilante (modules/bande) ---------- */
.marquee {
  overflow: hidden; position: relative;
  padding: 1.1rem 0;
  background: var(--deep); color: var(--on-green);
  cursor: grab; user-select: none; touch-action: pan-y;
}
.marquee.is-dragging { cursor: grabbing; }
.marquee__pause {
  position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 0; background: color-mix(in srgb, var(--on-green) 14%, var(--deep)); color: var(--on-green);
  display: grid; place-items: center; font-size: var(--text-lead);
  transition: background var(--t-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .marquee__pause:hover { background: color-mix(in srgb, var(--on-green) 24%, var(--deep)); } }
.marquee__pause:focus-visible { outline-color: var(--brand-soft); }
/* Fondus aux deux extrémités : les mots s'estompent avant le bord et avant le bouton pause */
.marquee::before,
.marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; pointer-events: none;
}
/* Fondu des bords : la bande entre et sort de l'écran au lieu d'être coupée net (pas un fond décoratif) */
.marquee::before { left: 0; width: 5rem; background: linear-gradient(to right, var(--deep) 20%, transparent); }   /* taste-skill-ignore : fondu des bords de la bande */
.marquee::after { right: 0; width: 10rem; background: linear-gradient(to left, var(--deep) 45%, transparent); }   /* taste-skill-ignore : fondu des bords de la bande */

.marquee__track {
  display: flex; align-items: center; gap: 2.75rem;
  width: max-content; white-space: nowrap;
  font-family: var(--font-display); font-size: var(--text-h3); font-weight: 600; letter-spacing: .01em;
  will-change: transform;
}
.marquee__copy { display: flex; align-items: center; gap: 2.75rem; }
.marquee__track i { font-size: var(--text-lead); color: var(--brand-soft); }

/* Mouvement réduit : la liste s'affiche une seule fois, immobile, et passe à la ligne au besoin */
@media (prefers-reduced-motion: reduce) {
  .marquee { cursor: default; }
  .marquee__pause { display: none; }
  .marquee__track { transform: none !important; width: auto; padding: 0 var(--gutter); }
  .marquee__copy { flex-wrap: wrap; justify-content: center; white-space: normal; row-gap: .5rem; }
  .marquee__copy:not(:first-child) { display: none; }
}

/* ---------- Module : petites vies continues (modules/vies) ---------- */

/* 1. Reflet qui passe sur un mot : une copie du mot (data-texte) posée par-dessus, transparente, où
      seule la bande de lumière se voit. Le vrai mot garde sa couleur (elle peut changer, la barre passe
      du clair au sombre). La copie est muette pour les lecteurs d'écran (« / "" »). */
.vie-reflet { position: relative; display: inline-block; }
.vie-reflet::after {
  content: attr(data-texte);
  content: attr(data-texte) / "";
  position: absolute; inset: 0; pointer-events: none; white-space: inherit;
  color: transparent;
  background: linear-gradient(105deg, transparent 40%, var(--reflet, var(--on-green)) 50%, transparent 60%) 0 0 / 300% 100% no-repeat; /* taste-skill-ignore : reflet qui passe sur le nom (module vies, décision de Mathieu du 6 nov. 2026) */
  -webkit-background-clip: text; background-clip: text; /* taste-skill-ignore : reflet qui passe sur le nom (module vies, décision de Mathieu du 6 nov. 2026) */
  background-position: 100% 0;
  animation: vie-reflet 7s ease-in-out var(--decalage-reflet, 1.5s) infinite;
}
@keyframes vie-reflet { 0%, 74% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (forced-colors: active) { .vie-reflet::after { display: none; } }

/* 2. Une forme qui dérive lentement */
.derive { display: inline-block; animation: vie-derive var(--duree, 18s) ease-in-out var(--decalage, 0s) infinite alternate; }
@keyframes vie-derive {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(var(--dx, 24px), var(--dy, -18px)) rotate(var(--dr, 6deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .vie-reflet::after { display: none; }
  .derive, .plante svg, .fond-vagues__couche { animation: none; }
}

/* ---------- Utilitaires ---------- */
[hidden] { display: none !important; }

/* ---------- Mouvement réduit ----------
   On retire les animations décoratives mais on garde les changements d'état courts (couleur au
   survol, focus), utiles comme retour d'information. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal:not(.is-visible), .js .reveal.is-visible { opacity: 1; animation: none; }
  .form__alert, .form__success { animation: none; }
  .menu, .menu__inner > a { transition: none; }
  .mobile-cta, .mobile-cta.is-shown { transform: none; transition: none; }
  .faq__item summary i { transition: none; }
  .svc__media img, .work__pic img, .btn__icon { transition: none; }
  .svc:hover .svc__media img, .work__grid figure:hover .work__pic img, .btn:hover .btn__icon { transform: none; }
}

/* ---------- Contraste élevé : le bouton du menu reste visible ---------- */
@media (forced-colors: active) {
  .nav__burger span { forced-color-adjust: none; background: CanvasText; }
  .nav__toggle { border: 1px solid ButtonText; }   /* taste-skill-ignore : contraste élevé seulement, la forme du bouton */
}

/* ---------- Impression : toute la page, une seule fois ---------- */
@media print {
  html.amorti #smooth-wrapper { position: static !important; overflow: visible !important; height: auto !important; inset: auto !important; }
  html.amorti #smooth-content { transform: none !important; padding-top: 0 !important; }
  html.amorti body { height: auto !important; }
  .nav { position: static !important; }
  .hero { overflow: visible; }
  .js .reveal { opacity: 1 !important; animation: none !important; }
  .mobile-cta, .menu, .skip-link { display: none !important; }
  /* Le héros tient sur une feuille à lui seul, mais pas sous la barre : le navigateur le renvoyait
     entier en page 2, et la page 1 restait vide */
  .hero__grid { display: block; }
  .hero__media { margin-top: 1.5rem; }
  .hero__media .frame img { max-height: 40vh; }
}