@charset "UTF-8";
/* ==========================================================================
   PRÊTE-MOI TA PLUME — Elsa Marcoux, écrivaine publique & biographe
   Feuille de styles unique — mobile-first
   --------------------------------------------------------------------------
   SOMMAIRE
     01. Polices (@font-face)
     02. Variables (design tokens)
     03. Reset & base
     04. Typographie
     05. Mise en page (container, sections, grilles)
     06. Décor organique (formes sauge)
     07. En-tête, marque & navigation
     08. Boutons
     09. Hero
     10. Cartes de prestations
     11. Témoignages (carrousel)
     12. Le cabinet (village, façons de travailler, zone, affiliations)
     13. Étapes numérotées
     14. FAQ
     15. Formulaire de contact
     16. Pied de page
     17. Barre d'appel mobile
     18. Pages de contenu (prose, mentions légales)
     19. Utilitaires & préférences système
   ========================================================================== */


/* ==========================================================================
   01. POLICES
   Auto-hébergées en woff2, sous-ensembles latin / latin-ext uniquement.
   - Atkinson Hyperlegible : corps de texte. Conçue par le Braille Institute
     pour la basse vision — choix délibéré, le public d'une écrivaine publique
     inclut des personnes âgées en difficulté de lecture.
   - Cormorant Garamond   : titres et libellés. Fichier variable (300→700),
     un seul fichier couvre toutes les graisses.
   - Great Vibes          : mots ornés uniquement, sous-ensemble français.
   ========================================================================== */

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-400-latin-v2.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-400-latin-ext.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-700-latin-v2.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-700-latin-ext.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-var-latin.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-var-latin-ext.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-var-italic-latin.woff2") format("woff2");
  font-weight: 300 700; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-var-italic-latin-ext.woff2") format("woff2");
  font-weight: 300 700; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Great Vibes";
  src: url("../fonts/great-vibes-fr.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}


/* ==========================================================================
   02. VARIABLES
   ========================================================================== */

:root {
  /* --- Couleurs -----------------------------------------------------------
     Toutes les associations texte/fond de cette palette ont été vérifiées
     au ratio WCAG AA (4.5:1 minimum). Un seul vert sur tout le site : aplats,
     boutons, titres, icônes et décor. Sur ce vert, le texte passe en crème.  */
  --c-paper:      #fdfcf9;   /* fond principal, crème                        */
  --c-paper-warm: #f6f3ec;   /* alternance de sections                       */
  --c-sage:       #436e48;   /* le vert du site — 5.89:1 sur blanc           */
  --c-ink:        #2f2b28;   /* texte principal — 13.67:1 sur crème          */
  --c-ink-soft:   #5a534c;   /* texte secondaire — 7.37:1 sur crème          */
  --c-border:     #e3ded4;   /* bordures neutres                             */

  /* --- Typographie ------------------------------------------------------- */
  --font-script: "Great Vibes", "Apple Chancery", cursive;
  --font-title:  "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:   "Atkinson Hyperlegible", Verdana, Arial, sans-serif;

  --fs-h1:      clamp(2.25rem, 1.6rem + 2.9vw, 3.5rem);
  --fs-h2:      clamp(1.75rem, 1.4rem + 1.8vw, 2.5rem);
  --fs-h3:      clamp(1.25rem, 1.1rem + .7vw, 1.5rem);
  --fs-lead:    clamp(1.125rem, 1.05rem + .5vw, 1.3125rem);
  --fs-body:    1.0625rem;
  --fs-small:   .9375rem;
  --fs-label:   .8125rem;   /* libellés serif en capitales espacées          */
  --fs-script:  clamp(2rem, 1.5rem + 2.2vw, 3rem);

  --lh-body:  1.7;
  --lh-title: 1.2;
  --measure:  62ch;

  /* --- Espacement --------------------------------------------------------- */
  --space-3xs: .125rem;  --space-2xs: .25rem;  --space-xs:  .5rem;
  --space-sm:  .75rem;   --space-md:  1rem;    --space-lg:  1.5rem;
  --space-xl:  2.5rem;   --space-2xl: 4rem;    --space-3xl: 6rem;

  /* --- Formes ------------------------------------------------------------- */
  --radius-card: 14px;
  --radius-btn:  999px;
  --hairline:    1px;
  --tap-min:     48px;
  --container:   72rem;
  --focus-width: 3px;
  --shadow-card: 0 1px 2px rgba(47, 43, 40, .04),
                 0 8px 24px -12px rgba(47, 43, 40, .10);
}


/* ==========================================================================
   03. RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  color-scheme: light only;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Décale l'ancre pour ne pas passer sous l'en-tête collant */
  scroll-padding-top: 6rem;
  overflow-x: clip;
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background-color: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  /* Contexte d'empilement pour que le décor organique reste derrière */
  position: relative;
}

img, picture, svg, video { max-width: 100%; height: auto; display: block; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }

:focus-visible {
  outline: var(--focus-width) solid var(--c-sage);
  outline-offset: 2px;
  border-radius: 2px;
}
.on-ink :focus-visible, .on-sage :focus-visible { outline-color: var(--c-paper); }

/* Lien d'évitement — premier élément tabulable de chaque page */
.skip-link {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 999;
  padding: var(--space-sm) var(--space-md);
  background: var(--c-ink);
  color: var(--c-paper);
  border-radius: var(--radius-btn);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-250%);
}
.skip-link:focus { transform: translateY(0); }


/* ==========================================================================
   04. TYPOGRAPHIE
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-title);
  line-height: var(--lh-title);
  font-weight: 500;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
/* Première lettre manuscrite sur les grands titres */
h1::first-letter { font-family: var(--font-script); font-weight: 400; font-size: 1.3em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p, li { max-width: var(--measure); }
/* Paragraphes justifiés dès la tablette, sans coupure de mots.
   Sur téléphone, la colonne est trop étroite : ils restent à gauche pour éviter les trous. */
@media (min-width: 48rem) {
  main p { text-align: justify; }
  main .citation p, main .form p, main .affiliation p { text-align: start; }
}
strong, b { font-weight: 700; }

.lead {
  font-size: var(--fs-lead);
  color: var(--c-ink-soft);
}

/* Signature manuscrite en italique sauge — reprise du mockup */
.signature {
  font-family: var(--font-title);
  font-style: italic;
  font-size: var(--fs-lead);
  color: var(--c-sage);
}

/* Libellé serif en capitales espacées — titres de cartes du mockup */
.label {
  font-family: var(--font-title);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.35;
}

/* Titre orné : premier mot calligraphié, suite en serif.
   Le mot script est plus grand et légèrement remonté, comme au mockup.     */
.titre-orne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3em;
  justify-content: center;
  margin-bottom: var(--space-xl);
}
.titre-orne__script {
  font-family: var(--font-script);
  font-size: var(--fs-script);
  font-weight: 400;
  line-height: 1;
  color: var(--c-sage);
  /* Great Vibes a un fort dépassement supérieur : on compense */
  padding-right: .1em;
}
.titre-orne--left { justify-content: flex-start; }

/* Bloc de texte courant */
.prose > * + *      { margin-top: var(--space-md); }
.prose > * + h2     { margin-top: var(--space-xl); }
.prose > * + h3     { margin-top: var(--space-lg); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li      { margin-top: var(--space-2xs); }
.prose a {
  color: var(--c-sage);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.prose a:hover { text-decoration-thickness: 2.5px; }


/* ==========================================================================
   05. MISE EN PAGE
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}
@media (min-width: 48rem) { .container { padding-inline: var(--space-xl); } }

.section       { padding-block: var(--space-2xl); position: relative; }
@media (min-width: 48rem) { .section { padding-block: var(--space-3xl); } }
.section--tight { padding-block: var(--space-xl); }

.on-paper { background-color: var(--c-paper);      color: var(--c-ink); }
.on-warm  { background-color: var(--c-paper-warm); color: var(--c-ink); }
.on-sage  { background-color: var(--c-sage);       color: var(--c-paper); }
.on-sage .titre-orne__script, .on-sage .citation figcaption, .on-sage .prose a { color: var(--c-paper); }
.on-sage .carte, .on-sage .presta-detail__tarif { color: var(--c-ink); }
.on-sage .carte a { color: var(--c-sage); }
.on-sage .presta-carte__icone { background: var(--c-paper); color: var(--c-sage); }
.on-ink   { background-color: var(--c-ink);        color: var(--c-paper); }
.on-ink .lead, .on-ink .signature { color: var(--c-paper); }

.stack    > * + * { margin-top: var(--space-md); }
.stack-lg > * + * { margin-top: var(--space-lg); }
.text-center { text-align: center; }
.nowrap      { white-space: nowrap; }


/* ==========================================================================
   06. DÉCOR ORGANIQUE
   Formes sauge en filigrane reprises du mockup. Purement décoratives :
   conteneur aria-hidden, non cliquable, derrière tout le contenu.
   ========================================================================== */

.decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.decor__blob {
  position: absolute;
  background: var(--c-sage);
  opacity: .3;                     /* au-delà, le texte secondaire passe sous 4.5:1 */
  filter: blur(40px);              /* bords très doux, aspect nuage organique */
}
/* Halos de l'en-tête : vert clair de la carte de visite, uniquement ici.
   Couleur pâle : opacité pleine, sinon ils disparaissent sur le fond. */
.entete .decor__blob { background: #dafae3; opacity: 1; }
/* Grosse tache en haut à gauche (l'élément marquant du mockup) */
.decor__blob--tl {
  width: 30rem; height: 32rem;
  top: -12rem; left: -13rem;
  border-radius: 58% 42% 47% 53% / 45% 51% 49% 55%;
}
/* Tache droite, plus haute et plus fine */
.decor__blob--tr {
  width: 20rem; height: 24rem;
  top: -8rem; right: -9rem;
  border-radius: 44% 56% 61% 39% / 52% 43% 57% 48%;
}
/* Tache basse gauche */
.decor__blob--bl {
  width: 18rem; height: 18rem;
  bottom: -8rem; left: -9rem;
  border-radius: 51% 49% 38% 62% / 57% 46% 54% 43%;
}
@media (max-width: 47.999rem) {
  .decor__blob--tr, .decor__blob--bl { display: none; }
  .decor__blob--tl { width: 20rem; height: 22rem; top: -9rem; left: -9rem; }
}

/* Plume décorative en filigrane */
.plume-decor {
  color: var(--c-sage);
  opacity: .55;
  width: auto;
}


/* ==========================================================================
   07. EN-TÊTE, MARQUE & NAVIGATION
   ========================================================================== */

.entete {
  position: relative;
  isolation: isolate;   /* contexte d'empilement : sinon le fond crème peint PAR-DESSUS le décor */
  background: var(--c-paper);
  padding-top: var(--space-lg);
}

/* --- Bloc de marque : plume + wordmark calligraphié --- */
.entete__grid {
  display: grid;
  gap: var(--space-lg);
  justify-items: center;
  text-align: center;
}
@media (min-width: 62rem) {
  .entete__grid {
    grid-template-columns: 1fr auto;
    align-items: center;
    text-align: left;
    justify-items: start;
  }
}

.realisations-grid { display: grid; gap: var(--space-lg); }
.realisation { margin: 0; min-width: 0; }
.realisation img { display: block; width: 100%; height: auto; border-radius: var(--radius-card); }
.realisation figcaption { margin-top: var(--space-md); text-align: center; font-family: var(--font-title); font-size: var(--fs-h3); }
.realisation h2 { margin-top: var(--space-lg); font-size: var(--fs-h3); }
.realisation p { margin-top: var(--space-md); }
@media (min-width: 40rem) { .realisations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .realisations-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.marque { display: flex; align-items: center; gap: var(--space-md); }
.marque__plume { height: clamp(8rem, 6.5rem + 5vw, 11rem); width: auto; flex-shrink: 0; color: var(--c-ink); }
.marque__texte { display: flex; flex-direction: column; }

/* Le nom de l'enseigne, calligraphié sur une seule ligne */
.marque__wordmark {
  font-family: var(--font-script);
  font-size: clamp(1.75rem, 1.2rem + 3vw, 3.25rem);
  font-weight: 400;
  line-height: 1.1;
  white-space: nowrap;
  margin: 0;
  color: var(--c-ink);
}

.marque__nom {
  font-family: var(--font-script);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  line-height: 1.2;
  margin-top: var(--space-2xs);
  color: var(--c-ink);
}
.marque__role {
  font-family: var(--font-title);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-top: var(--space-md);
}
/* Le lien logo ne doit pas hériter du soulignement */
a.marque { text-decoration: none; }

/* --- Coordonnées à droite --- */
.entete__contact { list-style: none; padding: 0; display: grid; gap: var(--space-2xs); }
.entete__contact li {
  display: flex; align-items: center; gap: var(--space-sm);
  max-width: none; font-size: var(--fs-small);
}
.entete__contact svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--c-sage); }
.entete__contact a {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  font-weight: 400; text-decoration: none;
}
.entete__contact a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --- Baseline italique --- */
.entete__baseline {
  margin: var(--space-lg) auto 0;
  /* Assez large pour tenir sur une seule ligne à partir de la tablette */
  max-width: 64ch;
  padding-inline: var(--space-lg);
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-lead);
  text-align: center;
  color: var(--c-sage);
  text-wrap: balance;
}

/* --- Mobile / tablette : plume et texte restent côte à côte, comme sur
   la carte de visite, sans chevauchement sur les petits écrans. --- */
@media (max-width: 61.999rem) {
  .entete .marque { max-width: 100%; gap: var(--space-sm); }
  .entete .marque__texte { min-width: 0; }

  /* Coordonnées : chaque ligne (icône + texte) centrée sur l'axe de la page,
     comme le logo et la baseline. */
  .entete__contact li { justify-content: center; text-align: center; }
}

/* --- Barre de navigation --- */
.navbar {
  position: sticky; top: 0; z-index: 100;
  margin-top: var(--space-lg);
  background: var(--c-paper);
  border-block: var(--hairline) solid var(--c-border);
}
.navbar__bar {
  display: flex; align-items: center; justify-content: space-between;
  /* Le panneau mobile passe à la ligne sous la barre plutôt que de s'y insérer */
  flex-wrap: wrap;
  gap: var(--space-md);
  min-height: 3.5rem;
}

/* Bouton hamburger — pleine largeur et centré sur mobile, où il est le seul
   occupant de la barre. */
.navbar__toggle {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: var(--tap-min); padding: var(--space-xs) var(--space-md);
  background: none; border: var(--hairline) solid var(--c-border);
  border-radius: var(--radius-btn); cursor: pointer;
  font-family: var(--font-title); font-size: var(--fs-label);
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.navbar__toggle:hover { background: var(--c-paper-warm); }
.navbar__burger { position: relative; width: 20px; height: 14px; flex: 0 0 auto; }
.navbar__burger span {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform .22s ease, opacity .18s ease, top .22s ease;
}
.navbar__burger span:nth-child(1) { top: 0; }
.navbar__burger span:nth-child(2) { top: 6px; }
.navbar__burger span:nth-child(3) { top: 12px; }
[aria-expanded="true"] .navbar__burger span:nth-child(1) { top: 6px; transform: rotate(45deg); }
[aria-expanded="true"] .navbar__burger span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .navbar__burger span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* Liste de liens */
.navbar__list { list-style: none; padding: 0; margin: 0; }
.navbar__list a {
  display: flex; align-items: center;
  min-height: var(--tap-min);
  font-family: var(--font-title);
  font-size: 1.0625rem;
  letter-spacing: .02em;
  text-decoration: none;
}
.navbar__list a:hover { text-decoration: underline; text-underline-offset: 6px; }
.navbar__list a[aria-current="page"] {
  font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
  text-decoration-color: var(--c-sage);
}

/* Mobile : panneau déroulant sur toute la largeur, sous la barre */
@media (max-width: 61.999rem) {
  #menu-principal {
    display: none;
    order: 3;            /* passe après le logo et le bouton */
    flex: 0 0 100%;      /* force le retour à la ligne */
    flex-direction: column;
    padding-block: var(--space-xs);
    border-top: var(--hairline) solid var(--c-border);
  }
  #menu-principal.is-open { display: flex; }
  #menu-principal li { max-width: none; }
  #menu-principal li + li { border-top: var(--hairline) solid var(--c-border); }
  #menu-principal a { font-size: var(--fs-lead); padding-inline: var(--space-2xs); }
}

/* Desktop : rangée horizontale avec séparateurs verticaux */
@media (min-width: 62rem) {
  .navbar__toggle { display: none; }
  .navbar__bar { min-height: 0; }
  #menu-principal {
    display: flex; flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  #menu-principal li { display: flex; }
  #menu-principal li + li { border-left: var(--hairline) solid var(--c-border); }
  #menu-principal a { padding-inline: clamp(var(--space-md), 2.2vw, var(--space-xl)); }
}


/* ==========================================================================
   08. BOUTONS
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-xs);
  min-height: var(--tap-min);
  padding: var(--space-sm) var(--space-xl);
  font-family: var(--font-title);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  border: 2px solid var(--c-sage);
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .08s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { flex: 0 0 auto; width: 18px; height: 18px; }
/* Le numéro reprend la police du corps (chiffres alignés), comme dans l'en-tête,
   au lieu des chiffres anciens du serif Cormorant. */
.btn__number { font-family: var(--font-body); font-weight: 400; letter-spacing: .04em; }

.btn--solid   { background: var(--c-sage); color: #fff; }
.btn--solid:hover { background: var(--c-ink); border-color: var(--c-ink); }

.btn--outline { background: transparent; color: var(--c-sage); }
.btn--outline:hover { background: var(--c-sage); color: var(--c-paper); }

.on-ink .btn--outline { color: var(--c-paper); border-color: var(--c-paper); }
.on-ink .btn--outline:hover { background: rgba(255,255,255,.12); }

/* Sur fond encre, le survol par défaut de .btn--solid vire à --c-ink :
   soit exactement la couleur du fond, le bouton disparaissait (1,00:1).
   On inverse vers le crème, pour le fond comme pour le contour du bouton. */
.on-ink .btn--solid:hover {
  background: var(--c-paper);
  border-color: var(--c-paper);
  color: var(--c-ink);
}

.btn--block { width: 100%; }
@media (min-width: 40rem) { .btn--block { width: auto; } }

/* Groupe d'actions */
.actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.actions--center { justify-content: center; }

/* Bouton d'appel : le numéro passe à la ligne sur très petits écrans */
.btn__sep { display: inline; }
@media (max-width: 26rem) {
  .btn__sep { display: none; }
  .btn__number { display: block; }
}
/* Téléphone : boutons sur une seule ligne. La police du bouton du Cabinet, le
   plus long, suit la largeur de l'écran (19.4 = largeur de son texte, en em). */
@media (max-width: 30rem) {
  .btn { padding-inline: var(--space-sm); letter-spacing: .04em; white-space: nowrap; }
  .hero__actions .btn { font-size: min(var(--fs-small), calc((100vw - 4.75rem) / 19.4)); }
}

/* Lien fléché discret */
.lien-fleche {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  min-height: var(--tap-min);
  font-family: var(--font-title);
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-sage);
  text-underline-offset: 5px;
}
.lien-fleche:hover { text-decoration-thickness: 2px; }


/* ==========================================================================
   09. HERO
   ========================================================================== */

.hero { position: relative; background: var(--c-paper-warm); overflow: hidden; }
.hero__grid {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
  padding-block: var(--space-2xl);
}
.hero__texte { position: relative; z-index: 1; }
/* 22ch : assez large pour que le titre tienne sur deux lignes comme au mockup */
.hero__titre { font-size: var(--fs-h1); max-width: 22ch; font-weight: 500; }
.hero__lead  { margin-top: var(--space-lg); max-width: 52ch; }
.hero__signature { margin-top: var(--space-md); max-width: 40ch; }
.hero__actions { margin-top: var(--space-xl); }

/* Plume en filigrane dans la marge, à gauche du texte. Masquée tant que la
   marge est trop étroite pour la contenir sans toucher le texte. */
.hero__plume {
  display: none;
  position: absolute;
  right: calc(100% + var(--space-lg)); top: 50%;
  transform: translateY(-50%);
  height: 20rem;
  z-index: 0;
}
@media (min-width: 86rem) { .hero__plume { display: block; } }
/* Mobile et tablette : le visuel sort du rembourrage du conteneur pour occuper
   toute la largeur de l'écran.
   `50% - 50vw` vaut exactement l'opposé du rembourrage courant : la largeur de
   contenu du conteneur étant 100vw moins deux fois le rembourrage, la moitié de
   cette largeur vaut 50vw moins le rembourrage. La formule s'adapte donc seule
   au changement de rembourrage à 48rem, sans valeur codée en dur. */
.hero__media { margin-inline: calc(50% - 50vw); }
.hero__media img {
  width: 100%; height: auto;
  border-radius: 0;   /* pleine largeur : les coins arrondis n'ont plus lieu d'être */
}

@media (min-width: 62rem) {
  .hero__grid {
    grid-template-columns: 1.15fr .85fr;
    gap: var(--space-xl);
    /* Le rembourrage vertical est porté par la colonne texte, pas par la
       grille : ainsi le visuel touche le haut et le bas de la section au
       lieu d'être encadré de deux bandes crème. */
    padding-block: 0;
    /* C'est le texte qui fixe la hauteur du hero, pas l'image : sans cela,
       la colonne image s'étire jusqu'au bord de l'écran sur les grands
       moniteurs et laisse un grand vide sous le bouton. */
    align-items: stretch;
  }
  /* Même bord gauche et même hauteur de titre que l'en-tête des autres pages */
  .hero__texte {
    padding-block: var(--space-2xl);
    align-self: start;
  }

  /* Le visuel déborde vers la droite, comme au mockup.
     L'image est sortie du flux (position:absolute) : sinon sa hauteur
     intrinsèque commande celle de la rangée, et le hero enfle sans limite
     sur les grands écrans. Ici c'est la colonne texte qui décide. */
  .hero__media {
    position: relative;
    /* En deux colonnes, le visuel ne saigne plus qu'à droite : on annule la
       marge gauche héritée de la règle mobile.
       La marge droite vaut exactement la distance entre le bord droit du
       conteneur et celui de l'écran : la gouttière centrée, plus le
       rembourrage. `50% - 50vw` conviendrait pour un bloc pleine largeur mais
       pas ici, où le 50% se rapporte à la colonne : l'image dépassait alors
       de plus de 300 px hors écran, silencieusement rognés. */
    margin-left: 0;
    margin-right: calc(-1 * ((100vw - min(100vw, var(--container))) / 2 + var(--space-xl)));
    /* La colonne image s'élargit avec l'écran (elle saigne jusqu'au bord).
       Sans hauteur minimale proportionnelle, le cadrage s'aplatirait sur les
       grands moniteurs et ne montrerait plus qu'un plateau de bureau vide.
       Cette valeur maintient un rapport d'environ 2,2:1 à toutes les largeurs. */
    min-height: max(22rem, 25vw);
  }
  .hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 55% 62%;   /* garde le carnet et l'encrier dans le cadre */
    /* Le visuel occupe toute la hauteur de la section et saigne à droite :
       plus de coins arrondis, seul le bord gauche est adouci par le fondu. */
    border-radius: 0;
    mask-image: linear-gradient(90deg, transparent 0%, #000 12%);
  }
}


/* ==========================================================================
   10. CARTES DE PRESTATIONS
   ========================================================================== */

.presta-grid {
  display: grid; gap: var(--space-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 34rem) { .presta-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .presta-grid { grid-template-columns: repeat(4, 1fr); } }

.presta-carte {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-sm); text-align: center;
  padding: var(--space-xl) var(--space-lg);
  background: var(--c-paper);
  border: var(--hairline) solid var(--c-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.presta-carte:hover {
  transform: translateY(-3px);
  border-color: var(--c-sage);
  box-shadow: 0 2px 4px rgba(47,43,40,.05), 0 16px 32px -16px rgba(47,43,40,.18);
}
.presta-carte__icone {
  display: grid; place-items: center;
  width: 3.25rem; height: 3.25rem;
  margin-bottom: var(--space-2xs);
  background: var(--c-sage);
  border-radius: 50%;
  color: var(--c-paper);
}
.presta-carte__icone svg { width: 26px; height: 26px; }
.presta-carte h3 { margin: 0; }
.presta-carte p  { font-size: var(--fs-small); color: var(--c-ink-soft); max-width: 30ch; }

/* Le lien couvre toute la carte tout en gardant un intitulé lisible */
.presta-carte a::after { content: ""; position: absolute; inset: 0; }
.presta-carte { position: relative; }
.presta-carte a { text-decoration: none; color: inherit; }
.presta-carte a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* `max-width: none` est indispensable : la règle globale `p, li` limite les
   paragraphes à 62ch pour le confort de lecture. Sans cette annulation, le
   paragraphe reste large de 62ch et collé à gauche — `text-align: center`
   centre alors le lien dans ce bloc étroit, pas sous la grille. */
.presta-grid__lien {
  margin-top: var(--space-xl);
  max-width: none;
  text-align: center;
}


/* ==========================================================================
   11. TÉMOIGNAGES (CARROUSEL)
   Défilement horizontal natif avec accroche CSS. Sans JavaScript, la liste
   reste défilable ; le JS n'ajoute que les points de pagination.
   ========================================================================== */

.temoignages { position: relative; }
.temoignages__piste {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(17rem, 1fr);
  gap: var(--space-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block: var(--space-2xs) var(--space-md);
  /* Marge de débordement pour que les cartes ne soient pas coupées */
  margin-inline: calc(var(--space-lg) * -1);
  padding-inline: var(--space-lg);
  scrollbar-width: thin;
  scrollbar-color: var(--c-sage) transparent;
}
@media (min-width: 62rem) {
  .temoignages__piste {
    grid-auto-columns: minmax(0, 1fr);
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: row;
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}

.temoignage {
  scroll-snap-align: center;
  display: flex; flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  background: var(--c-paper);
  border: var(--hairline) solid var(--c-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  margin: 0;
}
.temoignage__guillemet {
  font-family: var(--font-title);
  font-size: 2.75rem; line-height: .6;
  color: var(--c-sage);
}
.temoignage blockquote { margin: 0; }
.temoignage blockquote p {
  font-family: var(--font-title);
  font-size: 1.1875rem;
  line-height: 1.55;
  max-width: none;
}
.temoignage figcaption {
  margin-top: auto;
  padding-top: var(--space-sm);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--c-ink-soft);
}

/* Points de navigation — injectés en JS, masqués en grille desktop */
.temoignages__points {
  display: flex; justify-content: center; gap: var(--space-xs);
  margin-top: var(--space-md);
}
.temoignages__points button {
  width: 10px; height: 10px; padding: 0;
  border: none; border-radius: 50%;
  background: var(--c-sage); opacity: .4;
  cursor: pointer;
  transition: opacity .15s ease, transform .15s ease;
}
/* Cible tactile de 44px sans agrandir le point visuellement */
.temoignages__points button::before { content: ""; position: absolute; inset: -17px; }
.temoignages__points button { position: relative; }
.temoignages__points button[aria-current="true"] { opacity: 1; transform: scale(1.25); }

/* En grille trois colonnes, il n'y a plus de défilement : plus de points. */
@media (min-width: 62rem) { .temoignages__points { display: none; } }


/* ==========================================================================
   12. LE CABINET
   ========================================================================== */

/* Bloc texte + image côte à côte */
.duo {
  display: grid; gap: var(--space-xl); align-items: center;
}
@media (min-width: 62rem) {
  .duo { grid-template-columns: 1.05fr .95fr; gap: var(--space-2xl); }
  .duo--inverse .duo__media { order: -1; }
}
.duo--haut { align-items: start; }  /* Colonnes de texte : titres à la même hauteur */
.duo__media img {
  width: 100%; height: auto;
  border-radius: var(--radius-card);
  border: var(--hairline) solid var(--c-border);
}

/* Sur mobile, les photos de contenu passent bord à bord (pleine largeur),
   sans cadre ni coins arrondis : plus immersif sur petit écran. Même technique
   de débordement que le visuel du hero (voir .hero__media). */
@media (max-width: 61.999rem) {
  .duo__media { margin-inline: calc(50% - 50vw); }
  .duo__media img { border: none; border-radius: 0; }

  .section--tight .container > .arrondi {
    width: 100vw; max-width: none;
    margin-inline: calc(50% - 50vw);
    border-radius: 0;
  }
}

/* Trois façons de travailler / à qui ça s'adresse */
.cartes-trio { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .cartes-trio { grid-template-columns: repeat(3, 1fr); } }

.carte {
  padding: var(--space-xl) var(--space-lg);
  background: var(--c-paper);
  border: var(--hairline) solid var(--c-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.carte h3 { margin-bottom: var(--space-sm); }
.carte p  { color: var(--c-ink-soft); }
.on-sage .carte { border-color: var(--c-paper); }

/* Affiliations : logos CNFDI / SNPCE */
.affiliations { display: grid; gap: var(--space-lg); margin-top: var(--space-lg); }
@media (min-width: 48rem) { .affiliations { grid-template-columns: repeat(2, 1fr); } }
.affiliation {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--c-paper);
  border: var(--hairline) solid var(--c-border);
  border-radius: var(--radius-card);
}
.affiliation img { flex: 0 0 auto; width: 108px; height: auto; }
.affiliation p { font-size: var(--fs-small); color: var(--c-ink-soft); margin: 0; }


/* ==========================================================================
   13. ÉTAPES NUMÉROTÉES
   ========================================================================== */

.etapes { counter-reset: etape; list-style: none; padding: 0; display: grid; gap: var(--space-xl); }
@media (min-width: 48rem) { .etapes { grid-template-columns: repeat(2, 1fr); } }
.etapes li {
  counter-increment: etape;
  position: relative;
  padding-left: 4.25rem;
  max-width: 34rem;
}
.etapes li::before {
  content: counter(etape);
  position: absolute; top: 0; left: 0;
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  font-family: var(--font-title);
  font-size: 1.5rem; font-weight: 600;
  color: var(--c-paper);
  background: var(--c-sage);
  border-radius: 50%;
}
.etapes h3 { margin-bottom: var(--space-2xs); }
.etapes p  { color: var(--c-ink-soft); font-size: var(--fs-small); }


/* ==========================================================================
   14. FAQ
   <details>/<summary> natifs : accessibles et fonctionnels sans JavaScript.
   ========================================================================== */

.faq { display: grid; gap: var(--space-sm); max-width: 52rem; }
.faq details {
  background: var(--c-paper);
  border: var(--hairline) solid var(--c-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.faq details[open] { border-color: var(--c-sage); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--tap-min);
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-title);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-title);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-right: 2px solid var(--c-sage);
  border-bottom: 2px solid var(--c-sage);
  transform: rotate(45deg) translateY(-25%);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-25%); }
.faq summary:hover { background: var(--c-paper-warm); }
.faq details > *:not(summary) {
  padding: 0 var(--space-lg) var(--space-lg);
  color: var(--c-ink-soft);
}


/* ==========================================================================
   15. FORMULAIRE DE CONTACT
   ========================================================================== */

.form { display: grid; gap: var(--space-lg); }
.champ { display: grid; gap: var(--space-2xs); }
.champ label { font-weight: 700; font-size: var(--fs-small); }
.champ input, .champ textarea {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-sm) var(--space-md);
  background: var(--c-paper);
  border: var(--hairline) solid var(--c-border);
  border-radius: 8px;
}
.champ textarea { min-height: 8rem; resize: vertical; }
.champ input:focus-visible, .champ textarea:focus-visible { border-color: var(--c-sage); }
.champ input[aria-invalid="true"], .champ textarea[aria-invalid="true"] {
  border-color: #a4342c; border-width: 2px;
}
.champ__erreur { font-size: var(--fs-small); color: #a4342c; font-weight: 700; }
.champ__erreur:empty { display: none; }

/* Honeypot anti-spam : invisible pour l'humain, atteignable par les robots.
   On évite display:none, que certains robots détectent.                     */
.champ--piege {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.form__note { font-size: var(--fs-small); color: var(--c-ink-soft); }
.form__retour {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-card);
  font-weight: 700;
}
.form__retour:empty { display: none; padding: 0; }
.form__retour[data-etat="succes"] { background: var(--c-sage); color: var(--c-paper); }
.form__retour[data-etat="erreur"] { background: #fbeae8; color: #7d251e; }
.form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-lg); }
.form fieldset[disabled] { opacity: .6; }


/* ==========================================================================
   16. PIED DE PAGE
   ========================================================================== */

/* Pas de marge haute : la plupart des pages se terminent par le bloc d'appel
   sur fond encre, et une marge y insérerait une bande crème entre deux blocs
   de même couleur. Un filet suffit à séparer les deux zones ; sur les pages
   qui finissent sur fond clair, c'est le rembourrage de la section qui donne
   la respiration. */
.footer {
  background: var(--c-ink);
  color: var(--c-paper);
  border-top: var(--hairline) solid rgba(253, 252, 249, .22);
}
.footer a { color: inherit; }
.footer__grid { display: grid; gap: var(--space-xl); padding-block: var(--space-2xl); }
@media (min-width: 48rem) { .footer__grid { grid-template-columns: 1.5fr 1fr 1.2fr; } }

/* Sur fond encre, tout le bloc de marque doit repasser en clair : la plume et
   le nom sont fixés sur --c-ink dans l'en-tête, ils seraient invisibles ici. */
.footer__marque {
  color: var(--c-paper);
  text-decoration: none;
  margin-bottom: var(--space-lg);   /* évite que « Me contacter » colle au bloc */
}
.footer__marque .marque__plume    { height: 8rem; color: var(--c-paper); }
.footer__marque .marque__wordmark { font-size: 1.875rem; color: var(--c-paper); }
.footer__marque .marque__nom      { font-size: 1.25rem;  color: var(--c-paper); }
.footer__marque .marque__role     { color: var(--c-paper); }
@media (max-width: 61.999rem) {
  .footer__marque .marque__plume { position: static; transform: none; margin-right: 0; flex-shrink: 0; }
  .footer__marque .marque__texte { min-width: 0; }
}

.footer__titre {
  font-family: var(--font-title);
  font-size: var(--fs-label);
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-paper);
  margin-bottom: var(--space-md);
}
.footer p, .footer li { font-size: var(--fs-small); }
.footer__nav, .footer__legal, .footer__coord { list-style: none; padding: 0; }
.footer__nav a, .footer__coord a {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  text-decoration: none;
}
.footer__nav a:hover, .footer__coord a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer__coord li { display: flex; align-items: center; gap: var(--space-sm); max-width: none; }
.footer__coord svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--c-paper); }
.footer__adresse { font-style: normal; font-size: var(--fs-small); margin-top: var(--space-md); }
.footer__note { margin-top: var(--space-md); color: var(--c-paper); }

.footer__bas { border-top: var(--hairline) solid rgba(253,252,249,.22); }
.footer__bas-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  padding-block: var(--space-md);
  font-size: var(--fs-small);
}
.footer__legal { display: flex; gap: var(--space-lg); }
.footer__legal a {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  text-decoration: underline; text-underline-offset: 3px;
}
/* Laisse la place à la barre d'appel fixe sur mobile */
@media (max-width: 61.999rem) {
  .footer__bas-inner { padding-bottom: calc(var(--tap-min) + var(--space-xl)); }
}


/* ==========================================================================
   17. BARRE D'APPEL MOBILE
   ========================================================================== */

.callbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  background: var(--c-paper);
  border-top: var(--hairline) solid var(--c-border);
  box-shadow: 0 -4px 16px -8px rgba(47,43,40,.25);
  padding-bottom: env(safe-area-inset-bottom);
}
.callbar__inner {
  max-width: var(--container); margin-inline: auto;
  padding: var(--space-sm) var(--space-md);
}
@media (min-width: 62rem) { .callbar { display: none; } }


/* ==========================================================================
   18. PAGES DE CONTENU
   ========================================================================== */

/* En-tête de page interne */
.pagehead { background: var(--c-paper-warm); position: relative; overflow: hidden; }
.pagehead__inner { padding-block: var(--space-2xl); }
.pagehead h1 { max-width: 20ch; }
.pagehead__lead { margin-top: var(--space-lg); max-width: 52ch; }
.pagehead .citation { margin: var(--space-lg) 0 0; }

/* Citations et textes fournis par la cliente.
   Deux lignes : la citation, puis l'auteur dessous à droite. */
.citation {
  width: fit-content;
  margin: 0 0 var(--space-xl);
  max-width: 65ch;
}
.citation blockquote { margin: 0; font-family: var(--font-title); font-size: var(--fs-citation, var(--fs-h3)); font-style: italic; font-weight: 500; line-height: 1.45; text-wrap: balance; }
.citation figcaption {
  font-family: var(--font-title);
  font-size: var(--fs-citation, var(--fs-h3));
  font-style: italic;
  font-weight: 500;
  line-height: 1.45;
  text-align: right;
  color: var(--c-ink-soft);
}
.citation figcaption::before { content: "— "; }
/* Mobile : police calée sur la largeur de l'écran pour que la citation tienne
   sur une ligne. 18.5 = largeur de la plus longue citation, en em. */
@media (max-width: 47.999rem) {
  .citation { --fs-citation: min(var(--fs-h3), calc((100vw - 3rem) / 18.5)); }
}
.hero__texte .citation { margin-top: var(--space-lg); margin-bottom: 0; }
/* Extrait long : calé à gauche sur le texte de la page, mention alignée dessous. */
.citation--extrait { margin-bottom: 0; }
.citation--extrait blockquote { text-wrap: pretty; }
.citation--extrait figcaption { margin-top: var(--space-sm); text-align: start; }
.citation--extrait p + p { margin-top: var(--space-md); }
.cabinet-publics { display: grid; gap: var(--space-lg); }
@media (min-width: 48rem) { .cabinet-publics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Le texte sous les deux cartes occupe toute leur largeur */
.cabinet-publics__suite p { max-width: none; }

/* Liste détaillée des prestations */
.presta-detail { display: grid; gap: var(--space-xl); }
.presta-detail > article {
  padding-block: var(--space-lg);
  border-top: var(--hairline) solid var(--c-border);
  scroll-margin-top: 6rem;
}
.presta-detail > article:first-child { border-top: 0; padding-top: 0; }
.presta-detail__titre { display: flex; align-items: center; gap: var(--space-md); }
.presta-detail__titre .presta-carte__icone { margin: 0; width: 2.75rem; height: 2.75rem; }
.presta-detail__titre .presta-carte__icone svg { width: 22px; height: 22px; }
.presta-detail p { margin-top: var(--space-sm); }
.presta-detail__titre > span:last-child { min-width: 0; }
.presta-detail__titre .presta-carte__icone { flex-shrink: 0; }
.presta-detail__tarif { padding: var(--space-md); background: var(--c-paper-warm); border-left: 2px solid var(--c-sage); border-radius: 0 var(--radius-card) var(--radius-card) 0; }
.presta-detail__exemples {
  margin-top: var(--space-sm);
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
}
.presta-detail__exemples strong { color: var(--c-ink); }

/* Encart d'appel dans le flux — aligné à gauche comme le reste du contenu,
   mais largeur limitée pour épouser son texte (sinon la moitié droite reste vide). */
.encart {
  max-width: 48rem;
  padding: var(--space-xl);
  background: var(--c-sage);
  color: var(--c-paper);
  border-radius: var(--radius-card);
}
.encart p { max-width: none; margin: 0; }

/* Bloc légal */
.legal { max-width: 46rem; }
.legal h2, .prose h2 { font-size: var(--fs-h3); }
.legal h2 { margin-top: var(--space-xl); }
.legal h2:first-of-type { margin-top: var(--space-lg); }
/* Marqueur visuel pour les informations restant à fournir par la cliente */
.a-completer {
  display: inline-block;
  padding: var(--space-3xs) var(--space-xs);
  background: #fff4d6;
  border: 1px dashed #b98900;
  border-radius: 4px;
  font-size: var(--fs-small);
  font-weight: 700;
  color: #7a5c00;
}


/* ==========================================================================
   19. UTILITAIRES & PRÉFÉRENCES SYSTÈME
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* Conteneur de la bibliothèque d'icônes : ne doit jamais occuper de place */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Marges ponctuelles — préférées aux attributs style= en ligne, que la
   politique de sécurité de contenu (CSP) du site interdit.                */
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mt-xl  { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }

.bloc-centre { margin: var(--space-md) auto 0; max-width: 48ch; }
.arrondi     { border-radius: var(--radius-card); }

/* Numéro de téléphone mis en avant sur la page Contact */
.tel-grand {
  display: inline-block;
  font-family: var(--font-title);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 600;
  line-height: var(--lh-title);
  text-decoration: none;
  color: var(--c-sage);
}
.tel-grand:hover { text-decoration: underline; text-underline-offset: 6px; }

/* Empêche le défilement de l'arrière-plan quand le menu mobile est ouvert */
body.menu-ouvert { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .temoignages__piste { scroll-behavior: auto; }
}

@media print {
  .navbar, .callbar, .decor, .footer__legal, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .presta-carte, .carte, .temoignage { break-inside: avoid; box-shadow: none; }
}