/* =========================================================================
   « La revue » · feuille de style du site d'Hélène Marchand, psychologue
   Direction artistique : papier ivoire, ardoise, rouge sourd de bibliothèque.
   Serif humaniste partout, filets fins, aucune carte, aucune ombre,
   aucun arrondi. La hiérarchie se fait par l'espace et par la graisse.
   ========================================================================= */

/* ---------- 1. Jetons ---------- */
:root{
  --paper:#F6F3EC;
  --paper-2:#EFEAE0;
  --paper-3:#E8E2D6;
  --ink:#22252A;
  --ink-2:#5D594F;
  --ink-3:#6E6960;
  --rule:#CEC7B9;
  --rule-soft:#E2DCD0;
  --accent:#7A2E33;
  --accent-2:#96444A;
  --focus:#7A2E33;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --col:1200px;
  --pad:clamp(20px,5vw,56px);
  --gutter:210px;

  --step--1:15px;
  --step-0:19px;
  --step-1:22px;
  --step-2:clamp(23px,2.4vw,30px);
  --step-3:clamp(28px,3.4vw,40px);
  --step-4:clamp(36px,5.4vw,66px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#15161A;
    --paper-2:#1B1D22;
    --paper-3:#212429;
    --ink:#E7E3DA;
    --ink-2:#A09B90;
    --ink-3:#8C877C;
    --rule:#35373C;
    --rule-soft:#26282D;
    --accent:#D28C91;
    --accent-2:#E4A5AA;
    --focus:#D28C91;
  }
}
:root[data-theme="dark"]{
  --paper:#15161A;
  --paper-2:#1B1D22;
  --paper-3:#212429;
  --ink:#E7E3DA;
  --ink-2:#A09B90;
  --ink-3:#8C877C;
  --rule:#35373C;
  --rule-soft:#26282D;
  --accent:#D28C91;
  --accent-2:#E4A5AA;
  --focus:#D28C91;
}

/* ---------- 2. Socle ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:var(--step-0);
  line-height:1.72;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0;line-height:1.14;text-wrap:balance;font-weight:400}
p{margin:0}
ul,ol{margin:0;padding-left:1.25em}
li{margin-bottom:.45em}
img{max-width:100%;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

.wrap{max-width:var(--col);margin:0 auto;padding-inline:var(--pad)}
.stack{display:flex;flex-direction:column;min-width:0}
.g6{gap:6px}.g10{gap:10px}.g14{gap:14px}.g18{gap:18px}.g24{gap:24px}
.g32{gap:32px}.g44{gap:44px}.g64{gap:64px}
.prose{max-width:66ch}
.center{text-align:center}
.tnum{font-variant-numeric:tabular-nums}
.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ---------- 3. Furniture (sans) ---------- */
.eyebrow{
  font-family:var(--sans);font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
}
.meta{font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.smallcaps{
  font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
}

/* ---------- 4. Bandeau supérieur ---------- */
.topbar{
  position:sticky;top:0;z-index:60;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.topbar__in{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:74px;
}
.wordmark{display:flex;flex-direction:column;gap:1px;text-decoration:none}
.wordmark b{font-family:var(--serif);font-size:21px;font-weight:600;letter-spacing:-.01em}
.wordmark span{
  font-family:var(--sans);font-size:10.5px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2);
}
.nav{display:flex;align-items:center;gap:30px}
.nav a{
  font-family:var(--sans);font-size:13px;font-weight:500;
  letter-spacing:.02em;text-decoration:none;color:var(--ink);
  padding-block:6px;border-bottom:1px solid transparent;
}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--accent);color:var(--accent)}
.navtoggle{
  display:none;background:none;border:1px solid var(--rule);
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);padding:9px 14px;cursor:pointer;
}

/* ---------- 5. Boutons et liens d'action ---------- */
a.btn,
button.btn{
  display:inline-block;font-family:var(--sans);font-size:12.5px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;text-decoration:none;
  padding:13px 22px;border:1px solid var(--ink);color:var(--ink);
  background:transparent;transition:background .18s ease,color .18s ease,border-color .18s ease;
}
a.btn:hover,
button.btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
a.btn--accent,
button.btn--accent{background:var(--accent);border-color:var(--accent);color:var(--paper)}
a.btn--accent:hover,
button.btn--accent:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
a.btn--sm,
button.btn--sm{padding:10px 16px;font-size:11.5px}

/* Dans le menu, .nav a et .nav a[aria-current="page"] sont plus spécifiques que
   les classes de bouton. Sans ces trois règles, le bouton perd sa couleur de
   texte sur la page qu'il désigne, et le libellé disparaît dans le fond. */
.nav a.btn{padding:10px 16px;border-bottom-color:var(--ink)}
.nav a.btn--accent,
.nav a.btn--accent[aria-current="page"]{color:var(--paper);border-bottom-color:var(--accent)}
.nav a.btn--accent:hover,
.nav a.btn--accent[aria-current="page"]:hover{color:var(--paper);border-bottom-color:var(--ink)}
a.arrowlink{
  font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:.02em;
  text-decoration:none;color:var(--accent);display:inline-flex;gap:.5em;align-items:baseline;
}
.arrowlink::after{content:"\2192";transition:transform .18s ease;display:inline-block}
.arrowlink:hover::after{transform:translateX(4px)}

/* ---------- 6. Bandes et grille éditoriale ---------- */
.band{padding-block:clamp(56px,7vw,96px);border-top:1px solid var(--rule-soft)}
.band--first{border-top:0}
.band--tint{background:var(--paper-2)}
.band--tight{padding-block:clamp(40px,5vw,64px)}

/* La signature de mise en page : une gouttière à gauche qui porte
   l'intitulé de section, et qui reste en vue pendant la lecture. */
.ed{display:grid;gap:clamp(24px,4vw,52px);grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){
  .ed{grid-template-columns:var(--gutter) minmax(0,1fr)}
  .ed__side{position:sticky;top:110px;align-self:start}
}
.ed__side{display:flex;flex-direction:column;gap:10px}
.ed__side .rulemark{width:38px;height:1px;background:var(--accent)}
.ed__body{display:flex;flex-direction:column;gap:clamp(22px,2.6vw,34px);min-width:0}

/* ---------- 7. Titres ---------- */
.display{font-size:var(--step-4);font-weight:300;letter-spacing:-.022em;line-height:1.03}
.h2{font-size:var(--step-3);font-weight:300;letter-spacing:-.016em}
.h3{font-size:var(--step-2);font-weight:400;letter-spacing:-.01em}
.h4{font-size:var(--step-1);font-weight:600;letter-spacing:-.005em}
.standfirst{font-size:clamp(20px,2.1vw,25px);line-height:1.55;font-weight:300;color:var(--ink-2)}
.standfirst em{font-style:italic;color:var(--ink)}
.lede::first-letter{
  float:left;font-size:4.05em;line-height:.82;font-weight:400;
  padding-right:.09em;padding-top:.06em;color:var(--accent);
}

/* ---------- 8. Filets, notes, marginalia ---------- */
.hr{height:1px;background:var(--rule);border:0;margin:0}
.hr--soft{background:var(--rule-soft)}
.renvoi{
  border-top:1px solid var(--rule);padding-top:12px;
  font-family:var(--sans);font-size:13.5px;line-height:1.62;color:var(--ink-2);
}
.renvoi b{color:var(--accent);font-weight:600}
.renvoi a{color:var(--accent);font-weight:600}
.note{
  border-left:2px solid var(--accent);padding:2px 0 2px 18px;
  font-style:italic;color:var(--ink-2);font-size:17.5px;line-height:1.66;
}

/* ---------- 9. Le triptyque des trois réponses immédiates ---------- */
.triptyque{display:grid;gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
@media (min-width:860px){.triptyque{grid-template-columns:repeat(3,1fr)}}
.triptyque__col{
  padding:30px clamp(18px,2.4vw,32px);
  display:flex;flex-direction:column;gap:9px;
  border-bottom:1px solid var(--rule-soft);
}
.triptyque__col:last-child{border-bottom:0}
@media (min-width:860px){
  .triptyque__col{border-bottom:0;border-left:1px solid var(--rule-soft)}
  .triptyque__col:first-child{border-left:0;padding-left:0}
  .triptyque__col:last-child{padding-right:0}
}
.triptyque__col p{font-size:17.5px;line-height:1.62;color:var(--ink-2)}

/* ---------- 10. Listes de liens sans cartes ---------- */
.rows{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.row{
  display:grid;gap:6px 26px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--rule-soft);
  text-decoration:none;color:inherit;
  transition:padding-left .2s ease,border-color .2s ease;
}
@media (min-width:760px){.row{grid-template-columns:minmax(200px,.9fr) minmax(0,1.6fr) auto}}
.row:hover{padding-left:12px;border-bottom-color:var(--rule)}
.row:hover .row__t{color:var(--accent)}
.row__t{font-size:var(--step-1);font-weight:600;letter-spacing:-.008em;transition:color .18s ease}
.row__d{color:var(--ink-2);font-size:17px;line-height:1.6}
.row__go{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.row:hover .row__go{color:var(--accent)}

/* ---------- 11. Images ---------- */
figure{margin:0;display:flex;flex-direction:column;gap:11px}
.shot{
  width:100%;height:auto;
  filter:grayscale(.42) saturate(.72) contrast(1.03);
  border-bottom:1px solid var(--rule);
  background:var(--paper-3);
}
.shot--tall{aspect-ratio:5/6;object-fit:cover}
.shot--wide{aspect-ratio:16/9;object-fit:cover}
figcaption{
  font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink-3);
  font-style:normal;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .shot{filter:grayscale(.5) saturate(.62) contrast(.94) brightness(.86)}
}
:root[data-theme="dark"] .shot{filter:grayscale(.5) saturate(.62) contrast(.94) brightness(.86)}

/* ---------- 12. Tableaux (tarifs, horaires) ---------- */
.tablewrap{overflow-x:auto;max-width:100%;min-width:0}
table{border-collapse:collapse;width:100%;min-width:460px}
caption{text-align:left;padding-bottom:12px;font-family:var(--sans);font-size:13px;color:var(--ink-2)}
th,td{text-align:left;padding:14px 18px 14px 0;border-bottom:1px solid var(--rule-soft);vertical-align:top}
thead th{
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--rule);
}
td:last-child,th:last-child{padding-right:0;text-align:right}
tbody td:first-child{font-weight:600}

/* ---------- 13. Encart de prise de rendez-vous ---------- */
.invite{
  border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);
  padding:30px 0;display:flex;flex-wrap:wrap;gap:22px 40px;
  align-items:center;justify-content:space-between;
}
.invite p{font-size:var(--step-1);font-weight:300;line-height:1.5;max-width:44ch}

/* ---------- 14. Questions fréquentes ---------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule-soft)}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 0;
  font-size:var(--step-1);font-weight:600;letter-spacing:-.008em;
  display:flex;justify-content:space-between;gap:20px;align-items:baseline;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);font-weight:400;font-size:20px;color:var(--accent)}
.faq details[open] summary::after{content:"\2013"}
.faq summary:hover{color:var(--accent)}
.faq__a{padding:0 0 22px;color:var(--ink-2);max-width:64ch}

/* ---------- 15. Bandeau d'urgence ---------- */
.urgence{
  border:1px solid var(--accent);padding:20px 24px;
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:baseline;
}
.urgence p{font-size:16.5px;line-height:1.6;color:var(--ink-2);max-width:70ch}
.urgence b{color:var(--accent);font-weight:600}

/* ---------- 16. Pied de page ---------- */
.foot{border-top:1px solid var(--rule);padding-block:clamp(44px,5vw,68px) 34px;background:var(--paper-2)}
.foot__cols{display:grid;gap:34px}
@media (min-width:760px){.foot__cols{grid-template-columns:repeat(4,1fr)}}
.foot h2{
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:14px;
}
.foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.foot a{font-size:16.5px;text-decoration:none}
.foot a:hover{text-decoration:underline;color:var(--accent)}
.foot__nap{font-size:16.5px;line-height:1.7;color:var(--ink-2)}
.foot__bottom{
  margin-top:38px;padding-top:20px;border-top:1px solid var(--rule-soft);
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  font-family:var(--sans);font-size:12.5px;color:var(--ink-3);
}

/* ---------- 17. Signature d'article ---------- */
.signature{
  border-top:2px solid var(--ink);padding-top:20px;
  display:flex;flex-direction:column;gap:8px;
}
.signature .n{font-size:var(--step-1);font-weight:600}

/* ---------- 18. Apparition au défilement ---------- */
.reveal{opacity:0;transform:translateY(14px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  .reveal.is-in{transition:none}
}

/* ---------- 19. Menu en petite largeur ---------- */
@media (max-width:1060px){
  .navtoggle{display:inline-block}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--rule);
    padding:10px var(--pad) 22px;
  }
  .nav.is-open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--rule-soft)}
  .nav a.btn{margin-top:16px;text-align:center}
}

/* ---------- 20. Bandeau de démonstration ---------- */
/* Ce site présente une praticienne fictive. Sur un métier de santé, une page
   qui ressemble à un vrai cabinet doit le dire d'emblée : quelqu'un qui cherche
   de l'aide ne doit pas croire une seconde qu'il peut prendre rendez-vous ici. */
.demo-bar{
  background:var(--accent);color:var(--paper);
  font-family:var(--sans);font-size:13px;line-height:1.5;
  padding:11px var(--pad);
  display:flex;flex-wrap:wrap;gap:6px 20px;align-items:baseline;justify-content:center;
  text-align:center;
}
.demo-bar b{font-weight:600}
.demo-bar a{color:var(--paper);text-decoration:underline;text-underline-offset:.2em;white-space:nowrap}
.demo-bar a:hover{color:var(--paper);text-decoration-thickness:2px}

/* ---------- 20. Tableaux en petite largeur ---------- */
/* Les 14 tableaux du site ont tous deux colonnes : un libellé et une valeur.
   Sous 640 px, un min-width de 460 px les faisait défiler sur le côté, et la
   valeur, qui est souvent le prix, restait hors de l'écran. On empile. */
@media (max-width:640px){
  .tablewrap{overflow-x:auto}   /* filet de sécurité conservé */
  .tablewrap table{min-width:0;width:100%}
  .tablewrap thead{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
  .tablewrap tr{
    display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 16px;
    padding:13px 0;border-bottom:1px solid var(--rule-soft);
  }
  .tablewrap tbody tr:last-child{border-bottom:0}
  .tablewrap td{
    display:block;border:0;padding:0;width:auto;
    text-align:left;
  }
  .tablewrap td:first-child{flex:1 1 60%;font-weight:600;color:var(--ink)}
  /* La valeur n'est pas toujours un prix : sur la page des urgences c'est une
     phrase entière. Un nowrap y créait une ligne de 1443 px. Elle se coupe donc,
     et ne se colle à droite que si elle est courte. */
  .tablewrap td:last-child{
    /* Aligné à gauche : une valeur courte (« 60 € ») est quand même poussée
       à droite par margin-left:auto, tandis qu'une phrase longue se lit
       normalement au lieu d'être en drapeau à droite. */
    flex:0 1 auto;margin-left:auto;text-align:left;
    color:var(--accent);font-weight:600;
    white-space:normal;overflow-wrap:anywhere;min-width:0;
  }
}