/* La Parenthèse Friendly — feuille des pages satellites.
   Même système de couleurs et de typographie que la page d'accueil,
   volontairement réduit : ces pages doivent être rapides et directes. */

:root{
  --cream:#F0EDE0; --cream-2:#E7E3D3; --ink:#1E3326; --ink-soft:#455046;
  --muted:#526050; --coral:#EC8798; --leaf:#2E4F3A; --oat:#E4DECB;
  --line:color-mix(in srgb, var(--ink) 13%, transparent);
  --card:color-mix(in srgb, #fff 72%, var(--cream));
  --t-h1:clamp(34px,7vw,62px); --t-h2:clamp(23px,3.4vw,34px); --t-h3:clamp(18px,2.4vw,22px);
  --t-lead:clamp(17px,2.2vw,21px); --t-body:clamp(16px,1.8vw,17.5px);
  --t-small:clamp(13px,1.6vw,14.5px); --t-micro:clamp(11px,1.4vw,12.5px);
  --s-1:clamp(8px,2vw,12px); --s-2:clamp(16px,3vw,24px); --s-3:clamp(24px,4vw,40px);
  --s-4:clamp(40px,6vw,72px); --s-5:clamp(56px,9vw,104px);
  --pad:clamp(20px,5vw,56px); --wrap:1120px; --r:20px; --r-lg:28px;
  --quint:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--cream);color:var(--ink);overflow-x:clip;
  font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--t-body);line-height:1.62;-webkit-font-smoothing:antialiased;}
h1,h2,h3{margin:0;font-family:Fraunces,"Iowan Old Style",Georgia,serif;font-weight:600;
  line-height:1.06;letter-spacing:-.015em;text-wrap:balance;
  font-variation-settings:"SOFT" 40,"WONK" 1;}
h1{font-size:var(--t-h1);} h2{font-size:var(--t-h2);} h3{font-size:var(--t-h3);font-weight:600;}
p{margin:0;} ul{margin:0;padding:0;list-style:none;}
em{font-style:italic;font-variation-settings:"SOFT" 70,"WONK" 1;}
a{color:inherit;}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad);}
.lead{font-size:var(--t-lead);color:var(--ink-soft);max-width:56ch;line-height:1.5;}
.body{color:var(--ink-soft);max-width:64ch;}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:var(--t-micro);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--coral) 42%,var(--ink));}
.eyebrow::before{content:"";width:22px;height:1.5px;background:currentColor;}

/* --- en-tête --- */
.hdr{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--cream) 92%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.hdr .in{max-width:var(--wrap);margin:0 auto;padding:10px var(--pad);
  display:flex;align-items:center;gap:var(--s-2);}
.brand{display:block;width:48px;height:48px;flex:0 0 auto;transition:transform .45s var(--quint);}
.brand:hover{transform:scale(1.05);}
.brand svg{display:block;width:100%;height:100%;}
.mk-p{fill:var(--ink);} .mk-par{fill:none;stroke:var(--coral);stroke-width:5;stroke-linecap:round;}
.hdr nav{margin-left:auto;display:flex;gap:clamp(12px,2vw,26px);align-items:center;}
.hdr nav a{text-decoration:none;font-size:var(--t-small);font-weight:600;color:var(--ink-soft);
  padding:12px 0;transition:color .25s ease;}
.hdr nav a:hover{color:var(--ink);}
@media(max-width:700px){ .hdr nav a.hide-s{display:none;} }

/* --- boutons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;
  padding:14px 26px;border-radius:99px;text-decoration:none;font-weight:700;font-size:var(--t-small);
  border:1.5px solid transparent;cursor:pointer;transition:transform .16s ease-out,box-shadow .3s var(--quint);}
.btn:active{transform:scale(.97);}
.btn-1{background:var(--coral);color:var(--ink);}
.btn-1:hover{box-shadow:0 10px 30px color-mix(in srgb,var(--coral) 42%,transparent);}
.btn-2{border-color:color-mix(in srgb,var(--ink) 26%,transparent);color:var(--ink);}
.btn-2:hover{border-color:var(--ink);}
/* « .hdr nav a » (0,1,2) l’emportait sur « .btn-1 » (0,1,0) : le bouton rose
   héritait de l’encre adoucie, qui tombe à 3,4:1 sur le corail. Sur le rose,
   le texte est toujours l’encre pleine. */
.hdr nav a.btn-1,.hdr nav a.btn-2{color:var(--ink);}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s-3);}

/* --- fil d'Ariane --- */
.crumb{padding-top:var(--s-2);font-size:var(--t-micro);color:var(--muted);letter-spacing:.04em;}
.crumb a{text-decoration:none;} .crumb a:hover{text-decoration:underline;}

/* --- structure --- */
.top{padding:var(--s-4) 0 var(--s-3);}
.top h1{margin-top:14px;} .top .lead{margin-top:var(--s-2);}
section{padding-block:var(--s-4);}
section > .wrap > h2{margin-bottom:var(--s-2);}
.ground{background:var(--oat);}
.ground-deep{background:var(--ink);color:var(--cream);}
.ground-deep h2,.ground-deep h3{color:var(--cream);}
.ground-deep .body,.ground-deep p{color:color-mix(in srgb,var(--cream) 78%,transparent);}
.ground-deep .eyebrow{color:var(--coral);}

/* --- listes et cartes --- */
.grid{display:grid;gap:var(--s-2);margin-top:var(--s-3);}
@media(min-width:760px){ .grid.c2{grid-template-columns:repeat(2,1fr);} .grid.c3{grid-template-columns:repeat(3,1fr);} }
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.6vw,28px);}
.card h3{margin-bottom:8px;} .card p{color:var(--ink-soft);font-size:var(--t-small);line-height:1.6;}
.ground-deep .card{background:color-mix(in srgb,var(--cream) 9%,transparent);border-color:color-mix(in srgb,var(--cream) 18%,transparent);}
/* « .card p » (une classe + un type) l'emportait sur « .price » (une classe seule) :
   dans une carte, tous les prix tombaient à 13 px, la taille du texte courant, au lieu
   de s'afficher en grand. On remonte la spécificité plutôt que d'ajouter un !important. */
.price,.card p.price{font-family:Fraunces,serif;font-size:clamp(26px,4vw,38px);font-weight:600;
  line-height:1;margin-top:14px;color:var(--ink);}
/* .4em du prix descendrait à 10,4 px sur un téléphone, et cette annotation porte un
   tarif : plancher lisible, sans toucher à la proportion de bureau. */
.price small{font-size:max(11.5px,.4em);font-family:inherit;font-weight:600;color:var(--muted);display:block;margin-top:8px;
  font-family:"Plus Jakarta Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase;}

/* --- déroulé horaire --- */
.tl{margin-top:var(--s-3);border-top:1px solid var(--line);}
.tl li{display:grid;gap:2px 24px;padding:16px 0;border-bottom:1px solid var(--line);}
@media(min-width:700px){ .tl li{grid-template-columns:130px 1fr;} }
.tl .h{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:var(--t-small);
  color:color-mix(in srgb,var(--ink) 78%,transparent);letter-spacing:.02em;}
.tl .w{color:var(--ink-soft);}
.tl .w b{color:var(--ink);font-weight:700;}

/* --- questions --- */
details{border-bottom:1px solid var(--line);}
summary{cursor:pointer;list-style:none;padding:17px 0;font-weight:700;font-size:var(--t-body);
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+";font-family:"IBM Plex Mono",monospace;color:var(--coral);flex:none;}
details[open] summary::after{content:"–";}
.ans{padding:0 0 18px;color:var(--ink-soft);max-width:64ch;}

/* --- article --- */
.art{max-width:none;}
.art .wrap{max-width:760px;}
.art h2{margin:var(--s-4) 0 var(--s-2);}
.art p + p{margin-top:1.05em;}
.art .body{max-width:none;}
.art ul.dots{margin-top:var(--s-2);display:grid;gap:10px;}
.art ul.dots li{padding-left:22px;position:relative;color:var(--ink-soft);}
.art ul.dots li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;
  border-radius:99px;background:var(--coral);}
.meta{font-family:"IBM Plex Mono",monospace;font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:14px;}

/* --- encadré --- */
.note{display:block;margin-top:var(--s-3);padding:18px 20px;border-radius:var(--r);
  background:color-mix(in srgb,var(--coral) 16%,transparent);font-size:var(--t-small);}
.note b{font-weight:700;}

/* --- pied --- */
footer{background:var(--ink);color:var(--cream);padding:var(--s-4) 0 var(--s-3);margin-top:var(--s-5);}
footer a{color:inherit;text-decoration:none;}
footer .cols{display:grid;gap:var(--s-2);}
@media(min-width:760px){ footer .cols{grid-template-columns:1.4fr 1fr 1fr;} }
footer h3{font-size:var(--t-small);font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--coral);margin-bottom:12px;}
footer li{margin-bottom:4px;}
/* cible tactile d’au moins 24 px (WCAG 2.2, 2.5.8) sur les liens du pied de page */
footer li a{color:color-mix(in srgb,var(--cream) 80%,transparent);
  display:inline-block;padding:4px 0;min-height:24px;}
footer li a:hover{color:var(--cream);}
footer .fine{margin-top:var(--s-3);padding-top:var(--s-2);
  border-top:1px solid color-mix(in srgb,var(--cream) 20%,transparent);
  font-size:var(--t-micro);color:color-mix(in srgb,var(--cream) 62%,transparent);}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:4px;}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}