/* ---------- tokens/fonts.css ---------- */
/* Polices auto-hébergées — aucune requête vers Google (CNIL, brief §9.5).
   Quicksand & Pacifico substituent Pluto Medium / Jonesy Script du site de référence. */

@font-face{font-family:'Quicksand';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/quicksand-500-latin-ext.woff2') format('woff2');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:'Quicksand';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/quicksand-500-latin.woff2') format('woff2');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:'Quicksand';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/quicksand-600-latin-ext.woff2') format('woff2');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:'Quicksand';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/quicksand-600-latin.woff2') format('woff2');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:'Quicksand';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/quicksand-700-latin-ext.woff2') format('woff2');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:'Quicksand';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/quicksand-700-latin.woff2') format('woff2');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:'Montserrat';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/montserrat-400i-latin-ext.woff2') format('woff2');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:'Montserrat';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/montserrat-400i-latin.woff2') format('woff2');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:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/montserrat-400-latin-ext.woff2') format('woff2');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:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/montserrat-400-latin.woff2') format('woff2');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:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/montserrat-500-latin-ext.woff2') format('woff2');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:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/montserrat-500-latin.woff2') format('woff2');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:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/montserrat-600-latin-ext.woff2') format('woff2');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:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/montserrat-600-latin.woff2') format('woff2');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:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/montserrat-700-latin-ext.woff2') format('woff2');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:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/montserrat-700-latin.woff2') format('woff2');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:'Pacifico';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/pacifico-400-latin-ext.woff2') format('woff2');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:'Pacifico';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/pacifico-400-latin.woff2') format('woff2');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}

:root{
  --font-display:"Quicksand","Trebuchet MS",system-ui,sans-serif;
  --font-body:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --font-script:"Pacifico","Brush Script MT",cursive;
}

/* ---------- tokens/colors.css ---------- */
:root{
  /* ---- Brand, sampled from the Déborah Hoo-Durand logo ---- */
  --teal-600:#0a8f79;
  --teal-500:#0fb79a;   /* ribbon, brightest teal */
  --teal-400:#40d0b0;
  --teal-200:#a6e8da;
  --teal-100:#dff5ef;
  --petrol-700:#0a5a66;
  --petrol-600:#10707f;  /* logo subline, primary action */
  --petrol-300:#8fc3cc;
  --petrol-100:#e0eef1;
  --magenta-700:#a01d47;
  --magenta-600:#d0245a; /* ribbon crimson */
  --magenta-400:#e06f8f;
  --magenta-200:#f3c6d3;
  --magenta-100:#fbe6ec;
  --gold-600:#d99327;
  --gold-500:#efaf43;   /* ribbon gold */
  --gold-300:#f8d9a1;
  --gold-100:#fdf1de;
  --ink-900:#14113a;    /* logo wordmark navy */
  --ink-700:#312d5c;

  /* ---- Warm neutrals, carried over from the espace-psychomot reference ---- */
  --cream-100:#faf7f2;
  --cream-200:#f4eee5;  /* page background */
  --cream-300:#ebe2d4;
  --sand-200:#f2e3bb;
  --white:#ffffff;
  --grey-300:#c4bfb8;
  --grey-500:#94908b;
  --grey-700:#63615e;
  --grey-900:#333231;

  /* ---- Semantic aliases ---- */
  --surface-page:var(--cream-200);
  --surface-page-alt:var(--cream-100);
  --surface-card:var(--white);
  --surface-card-soft:var(--cream-100);
  --surface-inverse:var(--ink-900);
  --surface-tint-mint:var(--teal-100);
  --surface-tint-blush:var(--magenta-100);
  --surface-tint-sand:var(--gold-100);
  --surface-tint-sky:var(--petrol-100);

  --text-heading:var(--ink-900);
  --text-body:var(--grey-900);
  --text-muted:var(--grey-700);
  --text-subtle:var(--grey-500);
  --text-accent:var(--magenta-600);
  --text-on-brand:var(--white);
  --text-link:var(--petrol-600);
  --text-link-hover:var(--petrol-700);

  --action-primary:var(--petrol-600);
  --action-primary-hover:var(--petrol-700);
  --action-secondary:var(--magenta-600);
  --action-secondary-hover:var(--magenta-700);
  --action-tertiary:var(--gold-500);
  --action-tertiary-hover:var(--gold-600);
  --action-disabled:var(--grey-300);

  --border-hairline:var(--cream-300);
  --border-strong:var(--ink-900);
  --focus-ring:var(--teal-500);

  --state-success:var(--teal-600);
  --state-warning:var(--gold-600);
  --state-error:var(--magenta-600);
  --state-info:var(--petrol-600);
}

/* ---------- tokens/typography.css ---------- */
:root{
  /* Scale lifted from the reference site's Wix text theme */
  --text-hero:80px;      --lh-hero:1.15; /* @kind other */
  --text-page-title:70px; --lh-page-title:1.2; /* @kind other */
  --text-h1:44px;        --lh-h1:1.3; /* @kind other */
  --text-h2:41px;        --lh-h2:1.3; /* @kind other */
  --text-h3:25px;        --lh-h3:1.4; /* @kind other */
  --text-script:40px;    --lh-script:1.4; /* @kind other */
  --text-script-sm:26px;
  --text-body-lg:18px;   --lh-body:1.7; /* @kind other */
  --text-body:16px;
  --text-body-sm:14px;
  --text-caption:12px;   --lh-caption:1.4; /* @kind other */

  --weight-regular:400; /* @kind font */
  --weight-medium:500; /* @kind font */
  --weight-semibold:600; /* @kind font */
  --weight-bold:700; /* @kind font */

  --track-tight:-0.01em; /* @kind other */
  --track-normal:0; /* @kind other */
  --track-wide:0.06em; /* @kind other */
  --track-caps:0.14em; /* @kind other */   /* logo subline lettering */

  /* Semantic roles */
  --type-hero:var(--weight-bold) var(--text-hero)/var(--lh-hero) var(--font-display);
  --type-h1:var(--weight-bold) var(--text-h1)/var(--lh-h1) var(--font-display);
  --type-h2:var(--weight-bold) var(--text-h2)/var(--lh-h2) var(--font-display);
  --type-h3:var(--weight-bold) var(--text-h3)/var(--lh-h3) var(--font-display);
  --type-eyebrow:var(--weight-regular) var(--text-script)/var(--lh-script) var(--font-script);
  --type-body:var(--weight-regular) var(--text-body)/var(--lh-body) var(--font-body);
  --type-body-lg:var(--weight-regular) var(--text-body-lg)/var(--lh-body) var(--font-body);
  --type-body-sm:var(--weight-regular) var(--text-body-sm)/var(--lh-body) var(--font-body);
  --type-label:var(--weight-semibold) var(--text-body-sm)/1.4 var(--font-body);
  --type-caption:var(--weight-regular) var(--text-caption)/var(--lh-caption) var(--font-body);
}

/* ---------- tokens/spacing.css ---------- */
:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:80px;
  --space-10:120px;

  --gap-small:24px;   /* Wix small-gap  */
  --gap-medium:50px;  /* Wix medium-gap */
  --gap-large:100px;  /* Wix large-gap  */

  --section-y:var(--gap-large);
  --section-y-tight:var(--gap-medium);
  --container-max:1200px;
  --container-pad:40px;
  --measure-prose:66ch;
  --card-pad:24px;
  --control-pad-y:14px;
  --control-pad-x:28px;
  --control-height:48px;
  --control-height-sm:38px;
}

/* ---------- tokens/radius.css ---------- */
:root{
  --radius-xs:4px;
  --radius-sm:8px;    /* service + article cards */
  --radius-md:16px;
  --radius-lg:24px;   /* floating header capsule */
  --radius-xl:40px;
  --radius-pill:999px; /* every button */
  --radius-arch:220px 220px var(--radius-sm) var(--radius-sm); /* arch-topped imagery */
  --radius-circle:50%;
}

/* ---------- tokens/elevation.css ---------- */
:root{
  --shadow-card:0 4px 18px rgba(20,17,58,.08);
  --shadow-card-hover:0 10px 28px rgba(20,17,58,.13);
  --shadow-float:0 8px 30px rgba(20,17,58,.10); /* sticky header capsule */
  --shadow-inset-soft:inset 0 0 0 1px var(--border-hairline);
  --shadow-focus:0 0 0 3px rgba(15,183,154,.45);
  --overlay-scrim:rgba(20,17,58,.45);
  --blur-veil:blur(10px); /* @kind other */
}

/* ---------- tokens/motion.css ---------- */
:root{
  --ease-soft:cubic-bezier(.22,.61,.36,1); /* @kind other */
  --ease-inout:cubic-bezier(.45,.05,.55,.95); /* @kind other */
  --dur-fast:140ms; /* @kind other */
  --dur-base:220ms; /* @kind other */
  --dur-slow:420ms; /* @kind other */
  --lift-hover:-3px; /* @kind spacing */
  --press-scale:.97; /* @kind other */
}

/* ---------- tokens/base.css ---------- */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);text-wrap:pretty;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--text-heading);font-family:var(--font-display);font-weight:var(--weight-bold);margin:0}
p{margin:0}
a{color:var(--text-link);text-decoration:none;transition:color var(--dur-fast) var(--ease-soft)}
a:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
img{max-width:100%;display:block}
*,*::before,*::after{box-sizing:border-box}

/* ---------- components.css ---------- */
/* ============================================================================
   Composants — construits exclusivement sur les tokens du design system.
   Aucune valeur de couleur ni de fonte en dur.

   Contraste : le teal clair et l'or échouent sur fond clair en petit corps ;
   ils restent décoratifs. Les textes colorés utilisent petrol-700, magenta-600
   ou ink-900. Le teal-600 n'est employé qu'en grand corps gras (.hl), où le
   seuil AA est de 3:1.
   ========================================================================== */

/* --- Échelle de type responsive. Le DS fixe h1 à 44 px : intenable sur
       mobile, donc clamp() en gardant la valeur du DS comme maximum. ------ */
:root{
  /* Écart assumé au design system : --text-subtle (grey-500) tombe à 2,9:1 sur
     le crème, sous le seuil AA de 4,5:1 pour les libellés de 12 px qui
     l'utilisent (surtitres de cartes, dates, fil d'Ariane). Il est réaligné sur
     grey-700. La hiérarchie passe alors par la taille et la graisse. */
  --text-subtle: var(--grey-700);

  --t-h1: clamp(30px, 5.2vw, var(--text-h1));
  --t-h2: clamp(27px, 4.6vw, var(--text-h2));
  --t-h3: clamp(21px, 2.4vw, var(--text-h3));
  --t-eyebrow: clamp(21px, 3vw, var(--text-script-sm));
  --t-body-lg: clamp(16px, 1.6vw, var(--text-body-lg));
}

/* --- Utilitaires -------------------------------------------------------- */
.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--surface-card);color:var(--text-link);padding:var(--space-3) var(--space-5);border-radius:0 0 var(--radius-md) 0;font:var(--type-label)}
.skip:focus{left:0}

.stack{display:grid;gap:var(--space-5)}
.stack-lg{display:grid;gap:var(--space-7)}
.row-btn{display:flex;gap:var(--space-3);flex-wrap:wrap}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5)}
.split{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:var(--space-8);align-items:start}
.split-rev{display:grid;grid-template-columns:420px minmax(0,1fr);gap:var(--space-8);align-items:start}

.sec{padding:var(--section-y-tight) 0}
.sec--pad-lg{padding:var(--section-y) 0}
.sec--pad-sm{padding:var(--space-8) 0}
.sec--page{background:var(--surface-page)}
.sec--alt{background:var(--surface-page-alt)}
.sec--card{background:var(--surface-card)}

.h3{font:var(--weight-bold) var(--t-h3)/var(--lh-h3) var(--font-display);color:var(--text-heading)}
.lead{font:var(--type-body);color:var(--text-muted);max-width:var(--measure-prose)}
.small{font:var(--type-body-sm);color:var(--text-muted)}
.prose{font:var(--type-body);color:var(--text-body);max-width:var(--measure-prose);display:grid;gap:var(--space-4)}
.prose--justify{text-align:justify;hyphens:auto}
.prose strong{color:var(--ink-900);font-weight:var(--weight-semibold)}
.label-caps{font:var(--type-label);color:var(--petrol-700);letter-spacing:var(--track-wide);text-transform:uppercase}
.updated{font:var(--type-caption);color:var(--text-subtle);letter-spacing:var(--track-wide);text-transform:uppercase}
.todo{display:inline-block;max-width:100%;background:var(--surface-tint-sand);color:var(--petrol-700);border-radius:var(--radius-md);padding:3px 10px;font:var(--type-caption);font-weight:var(--weight-semibold);overflow-wrap:anywhere}

.ic{flex:0 0 auto}
.ic--teal{color:var(--teal-600)}
.ic--petrol{color:var(--petrol-600)}

/* --- Titres de section : script + display + chapô ----------------------- */
.eyebrow{font:var(--weight-regular) var(--t-eyebrow)/var(--lh-script) var(--font-script);color:var(--text-accent)}
.eyebrow--sm{font-size:clamp(19px,2vw,22px)}
.shead{display:grid;gap:var(--space-4);justify-items:start}
.shead--center{text-align:center;justify-items:center}
.shead__t{font:var(--weight-bold) var(--t-h1)/var(--lh-h1) var(--font-display);letter-spacing:var(--track-tight);max-width:26ch;text-wrap:balance}
.shead__lead{font:var(--type-body);color:var(--text-muted);max-width:var(--measure-prose)}
.hl{color:var(--teal-600)}

/* --- En-tête : capsule blanche flottante ------------------------------- */
.hdr{padding:var(--space-5) var(--container-pad) 0}
.capsule{max-width:var(--container-max);margin:0 auto;background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-float);padding:var(--space-4) var(--space-5);display:flex;align-items:center;gap:var(--space-5);position:relative}
.capsule__logo{display:block;flex:0 0 auto}
.capsule__logo img{height:54px;width:auto}
.nav{display:flex;align-items:center;gap:var(--space-5);margin-left:auto}
.nav__i{position:relative;display:flex;align-items:center;gap:2px}
.nav__l{font:var(--type-body-sm);color:var(--text-link);white-space:nowrap;padding:8px 0}
.nav__l:hover{text-decoration:none;color:var(--text-link-hover)}
.nav__l[aria-current="page"]{color:var(--ink-900);font-weight:var(--weight-semibold)}
.nav__tog{display:inline-flex;align-items:center;background:none;border:0;padding:8px 2px;color:var(--text-link);cursor:pointer;border-radius:var(--radius-xs)}
.nav__tog svg{transition:transform var(--dur-fast) var(--ease-soft)}
.nav__tog[aria-expanded="true"] svg{transform:rotate(180deg)}
.drop{display:none;position:absolute;top:100%;left:-16px;min-width:290px;background:var(--surface-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card-hover);padding:var(--space-3);z-index:40}
.drop.is-open{display:grid;gap:2px}
@media (hover:hover) and (pointer:fine){.nav__i--has:hover .drop{display:grid;gap:2px}}
.drop a{display:block;padding:10px 14px;border-radius:var(--radius-xs);font:var(--type-body-sm);color:var(--text-body)}
.drop a:hover{background:var(--surface-tint-mint);color:var(--petrol-700);text-decoration:none}
.drop__note{padding:10px 14px;font:var(--type-caption);color:var(--text-subtle)}
.burger{display:none;margin-left:auto;background:none;border:1.5px solid var(--border-hairline);border-radius:var(--radius-pill);padding:10px 18px;font:var(--type-label);color:var(--petrol-600);cursor:pointer}

/* --- Fil d'Ariane ------------------------------------------------------ */
.crumb-wrap{padding-top:var(--space-6)}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font:var(--type-body-sm);color:var(--text-subtle)}
.crumb a{color:var(--text-link)}
.crumb span[aria-current]{color:var(--text-muted)}

/* --- Boutons pilule ---------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control-height);padding:var(--control-pad-y) var(--control-pad-x);border-radius:var(--radius-pill);border:none;font:var(--type-label);font-size:var(--text-body);letter-spacing:var(--track-wide);cursor:pointer;text-decoration:none;text-align:center;transition:background var(--dur-fast) var(--ease-soft),transform var(--dur-fast) var(--ease-soft)}
.btn:hover{text-decoration:none}
.btn:active{transform:scale(var(--press-scale))}
.btn--sm{min-height:var(--control-height-sm);padding:8px 20px;font-size:var(--text-body-sm)}
.btn--primary{background:var(--action-primary);color:var(--text-on-brand)}
.btn--primary:hover{background:var(--action-primary-hover);color:var(--text-on-brand)}
.btn--secondary{background:var(--action-secondary);color:var(--text-on-brand)}
.btn--secondary:hover{background:var(--action-secondary-hover);color:var(--text-on-brand)}
.btn--tertiary{background:var(--action-tertiary);color:var(--ink-900)}
.btn--tertiary:hover{background:var(--action-tertiary-hover);color:var(--ink-900)}
.btn--soft{background:var(--surface-tint-mint);color:var(--petrol-700)}
.btn--soft:hover{background:var(--teal-200);color:var(--petrol-700)}
.btn--ghost{background:transparent;color:var(--text-link);border:1.5px solid var(--border-hairline)}
.btn--ghost:hover{background:var(--cream-300);color:var(--text-link-hover)}

/* --- Étiquettes -------------------------------------------------------- */
.tag{display:inline-flex;align-items:center;gap:var(--space-2);padding:6px 14px;border-radius:var(--radius-pill);font:var(--type-caption);font-weight:var(--weight-semibold);letter-spacing:var(--track-wide);text-transform:uppercase}
.tag--mint{background:var(--surface-tint-mint);color:var(--petrol-700)}
.tag--blush{background:var(--surface-tint-blush);color:var(--magenta-700)}
.tag--sand{background:var(--surface-tint-sand);color:var(--ink-700)}
.tag--sky{background:var(--surface-tint-sky);color:var(--petrol-700)}
.tag--ink{background:var(--ink-900);color:var(--white)}

/* --- Imagerie : cadre décalé -----------------------------------------
   La photo est décalée vers le bas à droite ; l'aplat pastel, posé en
   ::before, dépasse en haut à gauche. Le décalage est réservé par le padding
   du conteneur : rien ne sort de la boîte, donc rien ne chevauche les voisins
   dans une grille. --------------------------------------------------------- */
.pic{position:relative;margin:0;padding:var(--pic-gap,32px) 0 0 var(--pic-gap,32px)}
.pic::before{content:"";position:absolute;top:0;left:0;right:var(--pic-gap,32px);bottom:var(--pic-gap,32px);border-radius:var(--radius-lg);background:var(--pic-tint);z-index:0}
.pic img,.pic .pic__ph{position:relative;z-index:1;display:block;width:100%;height:var(--pic-h,420px);border-radius:20px}
.pic img{object-fit:cover}
.pic .pic__ph{display:grid;place-items:center;background:var(--pic-tint);font:var(--type-caption);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-muted)}
/* Galerie : la photo seule, sans aplat — répéter le décalage six fois serait bavard. */
.pic--plain{padding:0}
.pic--plain::before{display:none}
.pic--plain img{border-radius:var(--radius-md)}

/* --- Vague ------------------------------------------------------------- */
.wave{line-height:0}
.wave svg{display:block;width:100%;height:90px}

/* --- Panneaux et encadrés --------------------------------------------- */
.panel{background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--space-6)}
.panel--soft{background:var(--surface-card-soft);box-shadow:none}
.panel--mint{background:var(--surface-tint-mint);box-shadow:none}
.panel--sand{background:var(--surface-tint-sand);box-shadow:none}
.cta{display:grid;gap:var(--space-4);justify-items:start}
.cta__t{color:var(--petrol-700)}
.cta p{font:var(--type-body);color:var(--text-body);max-width:var(--measure-prose)}
.note{display:flex;gap:var(--space-4);background:var(--surface-tint-sky);border-radius:var(--radius-md);padding:var(--space-5);color:var(--petrol-700);font:var(--type-body-sm)}
.note strong{display:block;color:var(--ink-900);font:var(--type-label);font-size:var(--text-body);margin-bottom:4px}
.note .ic{color:var(--petrol-600);margin-top:2px}

/* --- Listes à coches -------------------------------------------------- */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.ticks li{display:flex;gap:var(--space-3);align-items:flex-start;font:var(--type-body);color:var(--text-body)}
.ticks li .ic{margin-top:4px}
.ticks--sm li{font:var(--type-body-sm)}

/* --- Étapes numérotées ----------------------------------------------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-5);counter-reset:st}
.steps>li{counter-increment:st;display:grid;grid-template-columns:44px 1fr;gap:var(--space-4);align-items:start}
.steps>li::before{content:counter(st);display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-circle);background:var(--surface-tint-mint);color:var(--petrol-700);font:var(--weight-bold) 18px/1 var(--font-display)}
.steps h3{font:var(--weight-bold) 20px/1.4 var(--font-display);margin-bottom:6px}
.steps__meta{font:var(--type-caption);color:var(--text-subtle);margin-left:10px;text-transform:uppercase;letter-spacing:var(--track-wide);white-space:nowrap}
.steps p{font:var(--type-body);color:var(--text-muted);max-width:var(--measure-prose)}

/* --- Cartes de service ------------------------------------------------ */
.scard{display:flex;flex-direction:column;background:var(--surface-card);border-radius:var(--radius-sm);box-shadow:var(--shadow-card);overflow:hidden;transition:box-shadow var(--dur-base) var(--ease-soft),transform var(--dur-base) var(--ease-soft)}
.scard--link{text-decoration:none;color:inherit}
.scard--link:hover{box-shadow:var(--shadow-card-hover);transform:translateY(var(--lift-hover));text-decoration:none}
.scard__band{height:190px;flex:0 0 auto}
.scard__band img{width:100%;height:100%;object-fit:cover}
.scard__body{padding:var(--space-5);display:grid;gap:var(--space-3);text-align:center;flex:1;align-content:start}
.scard__kicker{font:var(--type-caption);font-weight:var(--weight-semibold);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text-subtle)}
.scard__t{font:var(--weight-bold) var(--t-h3)/var(--lh-h3) var(--font-display);color:var(--petrol-600)}
.scard__d{font:var(--type-body-sm);color:var(--text-muted)}
.scard__foot{padding:0 var(--space-5) var(--space-5);display:flex;justify-content:flex-end}

/* --- « À lire ensuite » ----------------------------------------------- */
.next{background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--space-6);display:grid;gap:var(--space-2);align-content:start;text-decoration:none;transition:box-shadow var(--dur-base) var(--ease-soft),transform var(--dur-base) var(--ease-soft)}
.next:hover{box-shadow:var(--shadow-card-hover);transform:translateY(var(--lift-hover));text-decoration:none}
.next__k{font:var(--type-caption);color:var(--text-subtle);letter-spacing:var(--track-wide);text-transform:uppercase}
.next__t{font:var(--weight-bold) 20px/1.35 var(--font-display);color:var(--ink-900)}
.next__b{font:var(--type-body-sm);color:var(--text-muted)}
.next__cta{font:var(--type-label);color:var(--petrol-600);display:inline-flex;gap:8px;align-items:center;margin-top:var(--space-2)}

/* --- Coordonnées et horaires ----------------------------------------- */
.coords{display:grid;gap:var(--space-4);align-content:start}
.coords__row{display:flex;gap:var(--space-3);align-items:flex-start;font:var(--type-body);color:var(--text-body)}
.coords__row .ic{margin-top:4px}
.coords__row strong{font-weight:var(--weight-semibold);color:var(--ink-900)}
.hours{width:100%;border-collapse:collapse;font:var(--type-body-sm)}
.hours th,.hours td{padding:7px 0;border-bottom:1px dashed var(--border-hairline);text-align:left;font-weight:var(--weight-regular);color:var(--text-muted)}
.hours td{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-900);font-weight:var(--weight-semibold)}
.hours--off th,.hours--off td{color:var(--text-subtle);font-weight:var(--weight-regular)}

/* --- Tableaux (tarifs) ----------------------------------------------- */
.tbl-wrap{overflow-x:auto;background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--space-5)}
.tbl{width:100%;border-collapse:collapse;font:var(--type-body);min-width:600px}
.tbl caption{text-align:left;font:var(--type-label);color:var(--text-subtle);padding-bottom:var(--space-4)}
.tbl th,.tbl td{text-align:left;padding:var(--space-4) var(--space-3);border-bottom:1px solid var(--border-hairline);vertical-align:top}
.tbl thead th{font:var(--type-label);color:var(--petrol-700);letter-spacing:var(--track-wide);text-transform:uppercase}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody th{font-weight:var(--weight-semibold);color:var(--ink-900)}
.tbl .num{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink-900);font-weight:var(--weight-semibold)}
.tbl .dur{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text-muted);font:var(--type-body-sm)}
.tbl .desc{font:var(--type-body-sm);color:var(--text-muted)}

/* --- FAQ (details/summary, fonctionne sans JS) ----------------------- */
.faq{display:grid;gap:var(--space-3)}
.faq__i{background:var(--surface-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card)}
.faq__i summary{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-5);cursor:pointer;font:var(--weight-semibold) var(--text-body-lg)/1.45 var(--font-display);color:var(--ink-900);list-style:none}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary .ic{color:var(--petrol-600);transition:transform var(--dur-fast) var(--ease-soft)}
.faq__i[open] summary .ic{transform:rotate(180deg)}
.faq__a{padding:0 var(--space-5) var(--space-5)}
.faq__a p{font:var(--type-body);color:var(--text-body);max-width:var(--measure-prose)}

/* --- Carte : non chargée automatiquement (consentement) -------------- */
.mapbox{background:var(--surface-tint-sky);border-radius:var(--radius-lg);padding:var(--space-6);display:grid;gap:var(--space-4);justify-items:start;text-align:left}
.mapbox iframe{width:100%;height:340px;border:0;border-radius:var(--radius-md)}

/* --- Héros ----------------------------------------------------------- */
.hero{background:var(--surface-page);padding:var(--space-9) 0 var(--space-8)}
.hero__t{font:var(--weight-bold) var(--t-h1)/var(--lh-h1) var(--font-display);letter-spacing:var(--track-tight);max-width:22ch;text-wrap:balance}
.hero__lead{font:var(--weight-regular) var(--t-body-lg)/var(--lh-body) var(--font-body);color:var(--text-muted);max-width:54ch}
.hero__tags{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-2)}

/* --- Secteur + pied de page ----------------------------------------- */
.secteur{background:var(--surface-card-soft);padding:var(--space-7) 0}
.foot{background:var(--surface-card);padding:var(--space-8) var(--container-pad) var(--space-6)}
.foot__grid{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:200px 1.4fr repeat(3,minmax(130px,190px));gap:var(--space-7);align-items:start}
.foot__logo{width:100%;max-width:200px;height:auto}
.foot__id{display:grid;gap:var(--space-3);justify-items:start}
.foot__name{font:var(--weight-regular) 22px/1.3 var(--font-script);color:var(--ink-900)}
.foot__role{font:var(--weight-semibold) var(--text-body)/1.4 var(--font-display);color:var(--petrol-600)}
.foot__col{display:grid;gap:var(--space-3);align-content:start}
.foot__ct{font:var(--weight-regular) 20px/1.3 var(--font-script);color:var(--ink-900)}
.foot__col a{font:var(--type-body-sm);color:var(--text-muted)}
.foot__col a:hover{color:var(--text-link-hover)}
/* Le SiteFooter du DS pose ce texte en magenta-200 : illisible sur blanc. */
.foot__legal{max-width:var(--container-max);margin:var(--space-7) auto 0;font:var(--type-body-sm);color:var(--text-subtle);padding-top:var(--space-5);border-top:1px solid var(--border-hairline)}

/* --- Barre d'action mobile ------------------------------------------ */
.mobilebar{display:none}

/* --- Adaptations ---------------------------------------------------- */
@media (max-width:1180px){
  .foot__grid{grid-template-columns:160px 1fr 1fr;row-gap:var(--space-6)}
  .split,.split-rev{grid-template-columns:1fr;gap:var(--space-7)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .split-rev>*:first-child{order:2}
  .split-rev>*:last-child{order:1}
}
@media (max-width:900px){
  .foot__grid{grid-template-columns:1fr}
  html.js .nav{display:none}
  /* Spécificité alignée sur html.js .nav ci-dessus (0,2,1) : sans le
     préfixe html.js, la règle d'ouverture (0,2,0) perdait et le menu
     restait fermé malgré la classe posée par le script. */
  html.js .nav.is-open{display:grid;position:absolute;top:100%;left:0;right:0;margin:var(--space-3) 0 0;background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card-hover);padding:var(--space-4);gap:var(--space-2);z-index:50}
  html.js .nav.is-open .nav__i{justify-content:space-between}
  .burger{display:inline-flex}
  .drop{position:static;box-shadow:none;padding:0 0 var(--space-3) var(--space-4);min-width:0}
  /* Le survol n'ouvre plus rien sous 900 px : sur écran tactile un appui
     laisse un :hover rémanent qui empêchait de refermer le sous-menu. */
  .nav__i--has:hover .drop{display:none}
  html.js .drop.is-open{display:grid}
  html.js .nav.is-open .nav__i--has{flex-wrap:wrap}
  html.js .nav.is-open .drop{flex-basis:100%}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .mobilebar{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;bottom:0;left:0;right:0;background:var(--surface-card);box-shadow:0 -4px 18px rgba(20,17,58,.12);z-index:60}
  .mobilebar a{display:grid;justify-items:center;gap:4px;padding:11px 4px;min-height:56px;font:var(--type-caption);font-weight:var(--weight-semibold);color:var(--petrol-700);letter-spacing:var(--track-wide);text-transform:uppercase;text-align:center}
  .mobilebar a:hover{text-decoration:none}
  .mobilebar a+a{border-left:1px solid var(--border-hairline)}
  body{padding-bottom:56px}
  .sec{padding:var(--space-8) 0}
  .sec--pad-lg{padding:var(--space-9) 0}
  .hero{padding:var(--space-7) 0 var(--space-6)}
}
@media (max-width:640px){
  .container,.hdr,.foot{padding-left:var(--space-5);padding-right:var(--space-5)}
  .panel,.tbl-wrap,.next{padding:var(--space-5)}
  .grid-4{grid-template-columns:1fr}
  .steps>li{grid-template-columns:36px 1fr;gap:var(--space-3)}
  .steps>li::before{width:36px;height:36px;font-size:16px}
  .steps__meta{display:block;margin-left:0;margin-top:4px}
  .pic{--pic-h:300px!important;--pic-gap:18px}
  .capsule{flex-wrap:wrap;gap:var(--space-3)}
  .capsule__logo img{height:44px}
  .wave svg{height:52px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
@media print{
  .hdr,.mobilebar,.next,.skip{display:none}
  body{background:#fff}
}

/* --- Fonctionnement sans JavaScript ---------------------------------------
   Le repli du menu n'est activé que lorsque la classe .js est posée sur
   <html>. Sans script, la navigation reste dépliée et entièrement utilisable,
   et les boutons qui ne feraient rien sont retirés. --------------------- */
html:not(.js) .nav__tog,
html:not(.js) .burger{display:none}
html:not(.js) .drop{display:grid;position:static;box-shadow:none;min-width:0;padding:var(--space-2) 0 var(--space-2) var(--space-4)}
html:not(.js) .nav__i--has{flex-wrap:wrap;align-items:flex-start}
html:not(.js) .nav__i--has .drop{flex-basis:100%}
@media (max-width:900px){
  html:not(.js) .nav{display:grid;gap:var(--space-2);margin:var(--space-4) 0 0;flex-basis:100%}
  html:not(.js) .capsule{flex-wrap:wrap}
}

/* Garde-fou : l'adresse e-mail et les URL sont des chaînes insécables longues.
   Sur les très petits écrans, autoriser la coupure plutôt que déborder. */
.coords__row a,.foot__id a,.prose a{overflow-wrap:anywhere}