/* ==========================================================================
   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: #2A717C;          /* le babillard : fond de la page */
  --papier: #F6F7F1;          /* les feuilles punaisées */
  --sauge-pale: #E3E9DB;      /* 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 feutre */
  --bg: var(--feutre);
  --bg-2: #24646E;
  --surface: var(--papier);
  --ink: var(--papier);
  --ink-2: #EEF3EF;
  --ink-3: #DCE6E2;
  --line: rgba(246, 247, 241, 0.16);
  --line-strong: rgba(246, 247, 241, 0.3);
  --field-border: rgba(246, 247, 241, 0.55);
  --tint: rgba(246, 247, 241, 0.12);
  --tint-strong: rgba(246, 247, 241, 0.2);

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

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

  --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-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;
}

/* Le même babillard la nuit : feutre plus sombre, papier un peu moins blanc (Mathieu travaille en
   thème sombre). Le texte sur papier reste sombre. */
@media (prefers-color-scheme: dark) {
  :root {
    --feutre: #29707B;
    --papier: #E9EDE4;
    --sauge-pale: #D3DCCB;
    --bg-2: #24646E;
    --pied: #0B353D;
    --btn-bg-hover: #F6F7F1;
  }
}

/* ---------- 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 ») */
.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, .fiche, .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: .09; }

.tete { max-width: 62ch; margin-bottom: clamp(2.25rem, 4.5vw, 3.75rem); }
.tete h2, .visite 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(--papier); }
.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; }
.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;
}
.affiche__corps { background: var(--papier); border-radius: 22px 22px 0 0; padding: clamp(1.25rem, 2vw, 2rem) clamp(1.5rem, 3.4vw, 3rem) clamp(1rem, 1.8vw, 1.6rem); }
.affiche__tete { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(.75rem, 2vw, 1.5rem); font-size: var(--text-small); font-weight: 600; color: var(--sauge-fonce); }
.affiche__tete img { width: clamp(96px, 9.5vw, 140px); height: auto; }
.affiche__nom { display: grid; justify-items: center; gap: .15rem; text-align: center; text-wrap: balance; }
.affiche__nom > span:last-child { font-size: clamp(1rem, .85rem + .45vw, 1.3rem); }
.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-size: clamp(1.4rem, 1rem + 1vw, 2.1rem); line-height: 1.15; font-weight: 800; color: var(--sarcelle); letter-spacing: -.01em; }
.affiche h1 {
  margin-top: .18em; font-family: var(--font-display); font-weight: 700; color: var(--sarcelle);
  font-size: var(--display-xl); line-height: .9; letter-spacing: -.01em;
}
.affiche__qui { margin-top: 1rem; font-size: var(--text-lead); line-height: 1.45; max-width: 32ch; }
.affiche__soins {
  margin-top: 1.25rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .15rem 1.75rem;
  font-family: var(--font-display); font-weight: 600; font-size: var(--display-s); line-height: 1.18; color: var(--encre);
}
.affiche__soins li { display: flex; align-items: center; gap: .55rem; }
.affiche__soins li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.affiche__soins .point { width: .6em; height: .6em; border-radius: 50%; background: var(--c); flex: none; }
.affiche__ou { margin-top: 1rem; display: flex; align-items: center; gap: .45rem; font-weight: 700; font-size: var(--text-lead); color: var(--sarcelle); }
.affiche__ou i { font-size: 1.3rem; }
.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; }
.tableau__devise { font-family: var(--font-display); font-weight: 600; font-size: var(--display-m); line-height: 1.08; color: var(--sauge-pale); max-width: 13em; }

/* 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 h1 { font-size: clamp(3rem, 1rem + 4.2vw, 5.4rem); }
  .affiche__soins { font-size: 1.6rem; }
  .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; }
  .tableau__devise { grid-column: 1 / -1; }
  .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); }
  .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: center; gap: .4em; font-family: var(--font-display); font-weight: 700;
  font-size: var(--display-l); line-height: .95; color: var(--sarcelle);
}
.feuille .pastille { width: .42em; height: .42em; border-radius: 50%; background: var(--c); flex: none; }
.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, .visite__photo figcaption, .polaroid figcaption, .travail__photo figcaption { margin-top: .55rem; font-size: var(--text-fine); color: var(--ink-2); }
.soins__feuille { position: absolute; width: 72px; color: var(--sauge-pale); opacity: .55; pointer-events: none; }
.soins__feuille svg { width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.soins__feuille--1 { top: 6%; right: 7%; }
.soins__feuille--2 { top: 46%; left: 2%; }
@media (max-width: 900px) {
  .feuille { grid-template-columns: minmax(0, 1fr); min-height: 0; }
}

/* ---------- La visite : la fiche et la trousse qui s'ouvre en rond ---------- */
.visite__grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.visite__texte { grid-column: 1 / 7; }
.visite__photo { grid-column: 7 / 13; position: relative; }
.puce { width: .8rem; height: .8rem; margin-top: .42em; border-radius: 50%; background: var(--sarcelle); flex: none; }
.fiche { position: relative; margin-top: 1.75rem; background: var(--papier); border-radius: 22px; padding: clamp(1.5rem, 3vw, 2.5rem); max-width: 600px; transform: rotate(-.8deg); }
.fiche__titre { font-family: var(--font-display); font-weight: 700; font-size: var(--display-m); line-height: 1; color: var(--sarcelle); }
.fiche__liste { margin-top: 1rem; display: grid; gap: .85rem; }
.fiche__liste li { display: flex; gap: .9rem; font-size: var(--text-lead); line-height: 1.45; }
.case { width: 1.35rem; height: 1.35rem; margin-top: .12em; border-radius: 7px; flex: none; border: 2.5px solid var(--sarcelle); }   /* taste-skill-ignore : case à cocher de la fiche */
.iris { border-radius: 28px; overflow: hidden; }
.iris img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.etiquettes li {
  position: absolute; left: var(--x); top: var(--y); z-index: 2;
  padding: .3rem .95rem .4rem; border-radius: 999px; background: var(--papier); color: var(--sarcelle);
  font-family: var(--font-display); font-weight: 700; font-size: var(--display-s); line-height: 1.1;
  animation: flotte 6.5s ease-in-out var(--d, 0s) infinite alternate;
}
@keyframes flotte { from { transform: translate(0, 0) rotate(-1.5deg); } to { transform: translate(6px, -10px) rotate(1.5deg); } }
html.vie-en-pause .etiquettes li, html.vie-en-pause .coeur--bat { animation-play-state: paused; }
@media (max-width: 900px) {
  .visite__texte, .visite__photo { grid-column: 1 / -1; }
}

/* ---------- 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; }
.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(--sauge-pale); 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(--papier); }
.route__lieu span { display: table; margin-top: .35rem; padding: .15rem .7rem .2rem; border-radius: 999px; background: var(--feutre); font-family: var(--font-body); font-size: var(--text-lead); font-weight: 600; color: var(--sauge-pale); }
.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); }
.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; }
.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 { 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); }
.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); }

/* ---------- Pied de page : le nom revient en grand ---------- */
.footer { padding: clamp(3.5rem, 7vw, 6rem) 0 2rem; background: var(--pied); color: var(--papier); }
.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; 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 */
  .etiquettes li, .coeur--bat { animation: none; }
  .languette { transition: none; }
  .languette:hover { transform: none; }
}
@media print {
  .affiche, .note, .feuille, .fiche, .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; }
/* Sous 1081 px, le bouton pause des animations monte dans la barre du haut, à gauche du menu. En bas,
   il couvrait la languette Messenger de l'affiche et la grande frange du contact, là où le bouton
   d'action collant se retire ; le bouton collant reprend alors toute sa largeur. */
@media (max-width: 1080px) {
  html .vie-pause { top: calc((var(--nav-h) - 44px) / 2); bottom: auto; right: calc(var(--gutter) + 44px + .6rem); color: var(--ink); background: var(--tint); }
  html:root:has(.vie-pause) .mobile-cta { padding-right: var(--gutter); }
}
/* Sous 360 px, le nom ne tient plus à côté des deux ronds : l'emblème reste (le lien garde son nom pour les lecteurs d'écran) */
@media (max-width: 359px) { html.vie-active .brand__name { display: none; } }

/* ---------- 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 { 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; }
}