/* ══════════════════════════════════════════════════════════════════════════
   Site d'Eléonore Prétet : feuille de styles commune à toutes les pages.

   Sommaire
     1. Variables (couleurs, polices, espacements)
     2. Base (réinitialisation, typographie)
     3. Mise en page générale (largeur de contenu, espacement entre les blocs)
     4. Éléments communs (sur-titres, boutons, logo)
     5. En-tête et menu
     6. Pied de page
     7. Accueil
     8. Page « La sexologie »
     9. Page « Les motifs de consultation »
    10. Page « Qui je suis »
    11. Encadré « Prendre rendez-vous » et tarifs
    12. Formulaire de contact
    13. Mentions légales, page « merci » et page introuvable
    14. Animations

   Points de rupture : 820 px (menu ordinateur / téléphone), 920 px (colonnes
   texte + photo), 1000 px (grilles de 4 colonnes).
   ══════════════════════════════════════════════════════════════════════════ */


/* ─── 1. Variables ──────────────────────────────────────────────────────── */
:root{
  /* Fonds */
  --creme:#FCF6EC;        /* fond du site */
  --creme-2:#F5ECDF;      /* encadrés discrets (urgences, Mon approche) */
  --blanc:#fff;

  /* Argile : titres, accents, cartes */
  --rose:#B5623F;         /* accent sur fond crème, grand texte seulement */
  --rose-fonce:#8E4529;   /* titres de cartes, sous-titres, liens actifs */
  --rose-pale:#F3DDCC;    /* fond des cartes et vignettes */

  /* Jaune : encadré « Prendre rendez-vous » */
  --jaune-texte:#7E611F;  /* seul jaune lisible en petit texte */
  --jaune-pale:#FAE7C4;   /* fond de l'encadré */

  /* Texte */
  --encre:#241C16;        /* texte principal et grands titres */
  --gris:#6B6259;         /* textes secondaires */
  --texte-doux:#3C4A45;   /* paragraphes des pages de contenu */
  --trait:rgba(36,28,22,.12);

  /* Polices (hébergées dans fonts/) : Petrona pour le logo, Figtree pour les titres, Karla pour le texte */
  --logo:"Petrona",Georgia,serif;
  --display:"Figtree",Georgia,serif;
  --corps:"Karla",system-ui,sans-serif;

  /* Largeur de contenu : 1240 px maximum, centrée. --pad est la marge latérale. */
  --pad:max(clamp(1.4rem,5vw,6.5rem),calc((100% - 1240px) / 2));

  /* Espacement vertical : deux valeurs pour tout le site */
  --haut:clamp(2rem,4vw,3rem);    /* entre le menu et le premier bloc */
  --entre:clamp(3rem,6vw,5rem);   /* entre deux blocs, et avant le pied de page */

  --r:22px; --r-sm:16px;          /* arrondis */
}


/* ─── 2. Base ───────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--corps);font-size:17.5px;line-height:1.72;background:var(--creme);
  color:var(--encre);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.13;letter-spacing:-.005em;text-wrap:balance}
h1{font-weight:600;letter-spacing:-.02em}
h2{font-size:clamp(1.85rem,3.9vw,3rem)}            /* titres de page */
h3{font-size:clamp(1.25rem,2.1vw,1.55rem);letter-spacing:-.012em}
a{color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--jaune-pale)}
:focus-visible{outline:2px solid var(--rose-fonce);outline-offset:4px;border-radius:6px}
[id]{scroll-margin-top:120px}   /* une ancre ne passe pas sous le menu fixe */


/* ─── 3. Mise en page générale ──────────────────────────────────────────── */
/* .section : bloc transparent aligné sur la largeur de contenu.
   .bloc    : encadré coloré (fond, arrondi, marge intérieure). */
.section{padding:0 var(--pad)}
.bloc{margin-left:var(--pad);margin-right:var(--pad);border-radius:var(--r);padding:clamp(2.4rem,5.5vw,5rem)}

/* Espacement entre les blocs de chaque page : seules ces règles le définissent. */
main>*{margin-top:var(--entre)}
main>*:first-child{margin-top:var(--haut)}
main>*:last-child{margin-bottom:var(--entre)}


/* ─── 4. Éléments communs ───────────────────────────────────────────────── */
/* Sur-titre en petites capitales, au-dessus d'un titre */
.oeil{display:flex;align-items:center;font-size:.78rem;letter-spacing:.17em;text-transform:uppercase;
  font-weight:800;color:var(--gris);margin-bottom:1.5rem}
.chapo{font-size:1.1rem;color:var(--gris);max-width:47ch}

/* Boutons en pilule. Un seul survol pour tous : fond argile pâle, texte et bord argile foncé. */
.cta{display:inline-flex;align-items:center;gap:.5rem;padding:1rem 1.9rem;border-radius:999px;
  background:var(--creme);color:var(--encre);text-decoration:none;font-weight:700;font-size:.95rem;
  border:1px solid rgba(181,98,63,.16);cursor:pointer;font-family:var(--corps);
  transition:transform .25s,background .25s,color .25s,border-color .25s}
.cta--fant{background:none;border-color:var(--trait)}
.cta--plein{background:var(--rose-fonce);color:var(--blanc);border-color:var(--rose-fonce)}
.cta:hover{background:var(--rose-pale);color:var(--rose-fonce);border-color:var(--rose-fonce);transform:translateY(-2px)}

/* Logo : le nom en Petrona, le titre en italique argile dessous */
.logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.logo .n{font-family:var(--logo);font-weight:600;font-size:1.65rem;letter-spacing:-.02em;line-height:1.05}
.logo .n em{display:block;font-style:italic;font-weight:400;font-size:1.25rem;letter-spacing:0;color:var(--rose-fonce)}


/* ─── 5. En-tête et menu ────────────────────────────────────────────────── */
/* Téléphone : nom centré, bouton menu à droite, menu plein écran qui descend. */
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
  padding:1.1rem var(--pad);position:sticky;top:0;z-index:80;
  background:rgba(252,246,236,.92);backdrop-filter:blur(14px)}
.nav .logo{grid-column:2;justify-content:center}
.nav .logo .n{font-size:1.6rem;text-align:center}
.nav .logo .n em{font-size:.85rem;margin-top:.2rem}
.liens{display:none;align-items:center;font-size:.9rem;font-weight:600}
.liens a{text-decoration:none;color:var(--gris);transition:color .2s;white-space:nowrap}
.liens a:hover{color:var(--rose)}
.liens a.actif{color:var(--rose-fonce);text-decoration:underline;text-underline-offset:.45em;text-decoration-thickness:1.5px}
.burger{display:block;grid-column:3;justify-self:end;background:none;border:0;cursor:pointer;padding:.4rem;color:var(--rose-fonce)}
.menu-mobile{display:flex;position:fixed;inset:0;z-index:70;background:var(--creme);
  flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;
  font-size:1.3rem;font-family:var(--display);transform:translateY(-100%);
  transition:transform .4s cubic-bezier(.4,0,.2,1)}
.menu-mobile.ouvert{transform:none}
.menu-mobile a{text-decoration:none;color:var(--encre)}
.menu-mobile a.actif{color:var(--rose-fonce)}

/* Ordinateur : nom à gauche, les 4 pages à droite, sans menu déroulant. */
@media(min-width:820px){
  .nav{display:flex;gap:1.6rem;padding-top:.9rem;padding-bottom:.9rem;box-shadow:0 1px 0 rgba(60,40,30,.08)}
  .nav .logo{order:-1;margin-right:auto;justify-content:flex-start}
  .nav .logo .n{text-align:left;font-size:1.75rem}
  .nav .logo .n em{font-size:.9rem}
  .liens{display:flex;gap:1.6rem}
  .burger,.menu-mobile{display:none}
}
@media(min-width:820px) and (max-width:1100px){
  .nav,.liens{gap:1.1rem}
  .liens a{font-size:.82rem}
  .nav .logo .n{font-size:1.45rem}
  .nav .logo .n em{font-size:.78rem}
}


/* ─── 6. Pied de page ───────────────────────────────────────────────────── */
footer{padding:calc(clamp(5rem,10vw,9.5rem) * .55) var(--pad) 3rem;border-top:1px solid var(--trait);font-size:.95rem}
.fhaut{display:flex;justify-content:space-between;gap:3rem;flex-wrap:wrap;margin-bottom:2.4rem}
.fhaut .a{color:var(--gris);margin-top:.8rem;max-width:30ch}
footer nav{display:grid;gap:.5rem}
footer nav a{text-decoration:none;color:var(--gris)}
footer nav a:hover{color:var(--rose)}

/* Liens « Contactez-moi » et Instagram, avec icône */
.insta{display:flex;width:max-content;align-items:center;gap:.5rem;margin-top:.7rem;color:var(--gris);text-decoration:none;font-size:.9rem}
.insta:hover{color:var(--rose-fonce)}
.fhaut .a+.insta{margin-top:1.1rem}

/* Numéros d'urgence */
.urgences{font-size:.9rem;color:var(--gris);line-height:1.6;padding:1.1rem 1.3rem;background:var(--creme-2);border-radius:var(--r-sm);margin-bottom:2rem}
.urgences b{display:block;font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;font-weight:800;color:var(--rose-fonce);margin-bottom:.4rem}
.urgences p+p{margin-top:.3rem}
.urgences a{color:var(--encre);font-weight:700;text-decoration:none;white-space:nowrap}
.urgences a:hover{color:var(--rose-fonce)}

.fbas{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--gris);font-size:.875rem}


/* ─── 7. Accueil ────────────────────────────────────────────────────────── */
/* En-tête : titre centré dans sa colonne, photo à droite (au-dessus sur téléphone). */
.hero{display:flex;align-items:center;justify-content:center}
.hgrid{display:grid;width:100%;grid-template-columns:1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;
  text-align:center;justify-items:center}
.hero h1{margin:0 auto 1.7rem;font-size:clamp(1.25rem,5.6vw,2.75rem)}
.hero h1 em{font-style:normal;color:var(--rose)}
.hero h1 .l1{white-space:nowrap}          /* « Le corps change, la vie bouscule. » sur une ligne */
.hero-infos{margin-top:2.1rem}
.hero-lieux{display:block;margin-top:.9rem;font-size:clamp(1.05rem,1.6vw,1.25rem)}
.hero .portrait{width:100%;max-width:340px;order:-1}
@media(min-width:921px){
  .hgrid{grid-template-columns:1.55fr 1fr}
  .hero h1{font-size:clamp(1.6rem,3.05vw,2.75rem)}
  .hero .portrait{max-width:440px;order:0;justify-self:end}
}
@media(max-width:560px){
  .hero h1{font-size:1.85rem}
  .hero h1 .l1{white-space:normal}
}

/* Photo : seul le cadrage est fait ici (object-position remonte le regard dans le cadre). */
.portrait{aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--creme-2)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}

/* Mes accompagnements : 8 vignettes, phrase de valeurs, bloc « Vous ne savez pas… » */
.specialites{text-align:center}
.specialites h2{margin:0 auto;max-width:24ch;font-size:clamp(1.75rem,3.2vw,2.4rem)}
.tuiles{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;margin-top:2.4rem;text-align:left}
@media(max-width:1000px){.tuiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.tuiles{grid-template-columns:1fr}}
/* Forme « pétale » : deux coins opposés très arrondis, qui alternent d'une vignette à l'autre */
.tuile{display:flex;flex-direction:column;gap:.55rem;padding:1.3rem 1.4rem 1.4rem;border-radius:4px 26px 4px 26px;background:var(--rose-pale);
  text-decoration:none;transition:border-radius .45s ease,background .25s}
.tuile:nth-child(even){border-radius:26px 4px 26px 4px}
/* Chaque vignette mène à la carte détaillée de la page Motifs : au survol, la diagonale bascule comme sur les cartes */
.tuile:hover{background:#EFD3BF;border-radius:26px 4px 26px 4px}
.tuile:nth-child(even):hover{border-radius:4px 26px 4px 26px}
.tuile b{font-size:.74rem;letter-spacing:.17em;text-transform:uppercase;color:var(--rose-fonce)}
.tuile span{font-family:var(--display);font-size:1.15rem;line-height:1.3;color:var(--rose-fonce)}
.valeurs{margin-top:2.6rem;font-family:var(--display);font-size:1.2rem;line-height:1.5;color:var(--rose-fonce)}
.hesite{margin-top:2.2rem}
.hesite p{color:var(--texte-doux);line-height:1.7}
.hesite .hesite-titre{font-family:var(--display);font-size:clamp(1.3rem,2.2vw,1.6rem);color:var(--rose-fonce);margin-bottom:.6rem}


/* ─── 8. La sexologie ───────────────────────────────────────────────────── */
/* En-tête avec photo du cabinet : texte à gauche, photo à droite (au-dessus du texte sur téléphone, comme sur « Qui je suis ») */
.entete-page.avec-photo{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,4vw,2.5rem);align-items:center}
.photo-cabinet{width:100%;height:auto;border-radius:var(--r);order:-1}
@media(min-width:921px){
  .entete-page.avec-photo{grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,4.5rem)}
  .photo-cabinet{order:0}
}
.entete-page h2{margin-bottom:1.6rem}
.entete-page .fort{font-family:var(--display);font-weight:500;font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.45;color:var(--rose-fonce)}
.entete-page .boutons{margin-top:1.6rem}
.entete-page .entre{margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--trait);font-size:1.06rem;line-height:1.7;color:var(--gris)}
/* Sur téléphone, les retours à la ligne voulus des grands titres coupent mal : le texte se replie seul. */
@media(max-width:640px){.entete-page h2 br,.entete-page .fort br{display:none}}

/* Deux colonnes « La sexologie » / « La thérapie de couple », de deux blocs chacune.
   Sur ordinateur, elles partagent les mêmes lignes de grille (subgrid) :
   les seconds blocs commencent à la même hauteur. */
.expl-grille{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem)}
@media(max-width:820px){.expl-grille{grid-template-columns:1fr}}
@media(min-width:821px){
  .expl-grille{grid-template-rows:auto auto auto;row-gap:0}
  .expl{display:grid;grid-row:span 3;grid-template-rows:subgrid}
}
.expl h2{font-size:clamp(1.6rem,2.6vw,2.1rem);margin-bottom:1rem;color:var(--rose-fonce)}
.expl p{margin-bottom:.7rem;color:var(--texte-doux);line-height:1.75;text-wrap:pretty}
.expl-bloc{margin-bottom:1.4rem}


/* ─── 9. Les motifs de consultation ─────────────────────────────────────── */
.motifs h2{max-width:34ch}
.motifs .chapo{margin-top:1rem;max-width:none}
.grille-motifs{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin-top:2.6rem}
@media(max-width:700px){.grille-motifs{grid-template-columns:1fr}}
/* Cartes « pétale » : la diagonale arrondie bascule au survol */
.carte{background:var(--rose-pale);border-radius:4px 34px 4px 34px;padding:1.9rem 1.8rem 2.1rem;transition:border-radius .45s ease}
.carte:hover{border-radius:34px 4px 34px 4px}
.carte:nth-child(even){border-radius:34px 4px 34px 4px}
.carte:nth-child(even):hover{border-radius:4px 34px 4px 34px}
.carte b{display:block;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;margin-bottom:1.15rem;color:var(--rose-fonce)}
.carte h3{margin-bottom:.65rem;color:var(--rose-fonce)}
.carte p{font-size:1rem;color:#4A3B41;line-height:1.65;max-width:58ch}
.carte p+p{margin-top:.6rem}       /* la situation, puis l'accompagnement */


/* ─── 10. Qui je suis ───────────────────────────────────────────────────── */
/* Bio à gauche, photo à droite à la hauteur exacte du texte (photo au-dessus sur téléphone). */
.elle-s{display:grid;grid-template-columns:1.65fr 1fr;gap:clamp(2rem,5vw,4.5rem)}
.elle-s .portrait{position:relative;aspect-ratio:auto;min-height:420px}
.elle-s .portrait img{position:absolute;inset:0}
@media(max-width:920px){
  .elle-s{grid-template-columns:1fr}
  .elle-s .portrait{max-width:420px;aspect-ratio:4/5;min-height:0;order:-1}
}
.elle-s h2{margin-bottom:1.4rem;max-width:19ch}
.elle-s h3{font-size:1.3rem;margin-bottom:.9rem;color:var(--rose-fonce)}
.elle-s p{margin-bottom:1rem;color:var(--texte-doux);max-width:60ch;text-wrap:pretty}
.elle-s .bio-fort{font-family:var(--display);font-size:1.25rem;line-height:1.5;color:var(--rose-fonce);margin:1.4rem 0}
.elle-s .h-parcours{margin-top:2rem}
.elle-s .bio-parcours{font-size:1rem;color:var(--gris);max-width:none}

/* « Mon approche » / « Comment ça se passe » : deux colonnes de 5 puces.
   Sur ordinateur, les puces sont alignées deux à deux (subgrid) : garder 5 puces par colonne. */
.cadre-large{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);margin-top:2rem;
  padding:1.7rem;background:var(--creme-2);border-radius:var(--r-sm)}
@media(max-width:920px){.cadre-large{grid-template-columns:1fr}}
@media(min-width:921px){
  .cadre-large{grid-template-rows:auto repeat(5,auto);row-gap:0}
  .cadre-large>div{grid-row:1 / span 6;display:grid;grid-template-rows:subgrid}
  .cadre-large ul{grid-row:2 / span 5;display:grid;grid-template-rows:subgrid}
}
.cadre-large b{display:block;font-weight:800;font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;color:var(--rose-fonce);margin-bottom:.7rem}
.cadre-large ul{padding-left:1.3rem;font-size:.94rem;color:#4A4038;line-height:1.65}
.cadre-large li{margin-bottom:.7rem}
.cadre-large li::marker{color:var(--rose-fonce);font-weight:700}
.cadre-large li strong{color:var(--encre)}


/* ─── 11. Encadré « Prendre rendez-vous » et tarifs ─────────────────────── */
/* Page rendez-vous : version complète (cartes tarifs, mention mutuelles). */
.rdv{background:var(--jaune-pale);text-align:center}
.rdv .oeil{justify-content:center}
.rdv h2{max-width:20ch;margin:0 auto 2.2rem}
.tarifs{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;max-width:520px;margin:0 auto 2.4rem;text-align:left}
@media(max-width:480px){.tarifs{grid-template-columns:1fr}}
.tarif{background:var(--blanc);border-radius:var(--r-sm);padding:1.2rem 1.3rem}
.tarif .d{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;
  color:var(--jaune-texte);margin-bottom:.5rem;min-height:2.4em;display:flex;align-items:flex-end}
.tarif b{display:block;font-weight:700;font-size:.98rem;margin-bottom:.3rem}
.tarif .p{font-family:var(--display);font-size:1.55rem;font-weight:600;color:var(--rose-fonce)}
.mut{font-size:.92rem;color:var(--gris);max-width:62ch;margin:2rem auto 0;line-height:1.65}


/* Bas des autres pages : bandeau jaune horizontal, texte à gauche, bouton à droite (empilés sur téléphone). */
.rdv-bas{margin-left:var(--pad);margin-right:var(--pad);background:var(--jaune-pale);border-radius:var(--r);
  padding:clamp(1.8rem,4vw,2.6rem) clamp(1.6rem,4vw,3rem);display:flex;align-items:center;justify-content:space-between;gap:1.5rem 3rem;flex-wrap:wrap}
.rdv-bas h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:.4rem}
.rdv-bas p{color:#5E4815;font-size:.98rem}
/* Accueil : lien vers les questions fréquentes, juste sous le bandeau (collé à lui, pas d'espace de bloc) */
main>.lien-faq{margin-top:1rem;padding:0 var(--pad);text-align:center;color:var(--gris);font-size:.95rem}


/* Questions fréquentes : chaque question se déplie au clic (balise <details>, sans script) */
.faq h2{margin-bottom:1.6rem}
.faq-liste{max-width:820px;border-top:1px solid var(--trait)}
.faq details{border-bottom:1px solid var(--trait)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.1rem 0;font-family:var(--display);font-size:1.15rem;color:var(--encre)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:1.5rem;line-height:1;color:var(--rose-fonce);transition:transform .25s;flex-shrink:0}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--rose-fonce)}
.faq-reponse{padding:0 0 1.3rem;color:var(--texte-doux);max-width:70ch}
.faq-reponse p+p{margin-top:.6rem}
.faq-reponse a{color:var(--encre);font-weight:700}


/* ─── 12. Formulaire de contact ─────────────────────────────────────────── */
.contact>*{max-width:680px}
/* Photo du cabinet à côté du formulaire : à droite sur ordinateur, centrée en hauteur face au formulaire (fixe, ne suit pas le défilement),
   entre l'adresse et le formulaire sur téléphone. */
.photo-contact{width:100%;height:auto;border-radius:var(--r);margin-bottom:2rem}
@media(min-width:921px){
  .contact{display:grid;grid-template-columns:minmax(0,680px) minmax(0,1fr);column-gap:clamp(2rem,5vw,4.5rem);align-items:start}
  .contact-tete,.formulaire{grid-column:1}
  .photo-contact{grid-column:2;grid-row:1 / span 2;align-self:center;margin-bottom:0}   /* centrée verticalement face au formulaire */
}
.contact h2{margin-bottom:.8rem}
.contact .chapo{max-width:none}
.contact .lieu{margin:1.2rem 0 2rem}
.formulaire p{margin-bottom:1.1rem}
.formulaire label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.35rem}
.formulaire input[type=text],.formulaire input[type=email],.formulaire input[type=tel],.formulaire textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--encre);background:var(--blanc);border:1px solid rgba(36,28,22,.22);
  border-radius:12px;padding:.75rem .9rem}
.formulaire textarea{resize:vertical;min-height:7rem}
.formulaire input:focus,.formulaire textarea:focus{outline:2px solid var(--rose-fonce);outline-offset:1px;border-color:transparent}
.champs-2{display:grid;grid-template-columns:1fr 1fr;column-gap:1rem}
@media(max-width:560px){.champs-2{grid-template-columns:1fr}}
.formulaire fieldset{border:0;margin:0 0 1.1rem}
.formulaire legend{font-weight:600;font-size:.92rem;margin-bottom:.45rem}
.formulaire .note{font-size:.9rem;color:var(--gris)}
.formulaire .req{color:var(--rose-fonce)}
.formulaire .cache{position:absolute;left:-9999px}   /* case anti-spam, invisible pour les visiteurs */

/* Choix en pastilles cliquables (à la place d'une liste déroulante, que le système ne laisse pas styliser) */
.pastilles-choix{display:flex;flex-wrap:wrap;gap:.5rem}
.formulaire .choix{position:relative;display:flex;align-items:center;margin:0;padding:.65rem 1.1rem;border:1px solid rgba(36,28,22,.22);border-radius:999px;
  background:var(--blanc);font-weight:400;font-size:.95rem;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.formulaire .choix:hover{border-color:var(--rose-fonce)}
.formulaire .choix input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.formulaire .choix:has(input:checked){background:var(--rose-pale);border-color:var(--rose-fonce);color:var(--rose-fonce);font-weight:600}
.formulaire .choix:has(input:focus-visible){outline:2px solid var(--rose-fonce);outline-offset:2px}
@media(max-width:560px){.pastilles-choix{flex-direction:column}.formulaire .choix{width:100%}}


/* ─── 13. Mentions légales, « merci » et page introuvable ───────────────── */
.legal>*{max-width:68ch}
.legal h2{margin-bottom:2rem}
.legal h3{font-size:1.2rem;margin:2.2rem 0 .7rem;color:var(--rose-fonce)}
.legal p{margin-bottom:.6rem;color:var(--texte-doux)}

.page-courte{min-height:52vh;display:flex;flex-direction:column;justify-content:center;max-width:calc(640px + 2 * var(--pad))}
.page-courte h2{margin-bottom:1rem}
.page-courte p{color:var(--texte-doux);margin-bottom:.6rem}
.page-courte .boutons{margin-top:1.6rem;display:flex;gap:.8rem;flex-wrap:wrap}


/* ─── 14. Animations ────────────────────────────────────────────────────── */
/* Apparition douce au défilement : js/site.js ajoute la classe .vu */
.rev{opacity:0;transform:translateY(18px);transition:opacity .75s ease,transform .75s ease}
.rev.vu{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none}
  *{transition:none!important;scroll-behavior:auto!important}
}