/* =========================================================================
   Psy-92 — proposition v2, 20 septembre 2026
   Direction : « la fenêtre ». Même famille visuelle que les autres sites de
   Rodolphe Oppenheimer (nuit profonde, Cormorant, mot en italique doré,
   arches, numéros en filigrane), avec le bleu du logo comme couleur propre.
   Feuille unique, aucune dépendance externe.

     1. Polices                 9. Approches
     2. Variables              10. La consultation
     3. Bases                  11. Questions
     4. Éléments d'interface   12. Rendez-vous
     5. En-tête                13. Pied de page
     6. Ouverture              14. Barre d'action mobile
     7. Motifs                 15. Points de rupture
     8. Le praticien           16. Mouvement, apparitions, impression
   ========================================================================= */

/* ============================ 1. POLICES ============================ */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-var-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-italic-var-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ============================ 2. VARIABLES ============================ */

:root {
  /* Nuit : les fonds sombres */
  --c-abysse:      #060c15;
  --c-nuit:        #0b1626;
  --c-nuit-haut:   #12243b;
  --c-nuit-carte:  #0f1d31;

  /* Jour : les fonds de lecture */
  --c-creme:       #f7f3ea;
  --c-sable:       #efe8d8;
  --c-blanc:       #fffdf8;

  /* Textes */
  --c-encre:            #14202e;
  --c-texte-doux:       #4d5a67;
  --c-texte-clair:      #efeae0;
  --c-texte-clair-doux: #a9b5c3;

  /* Accents */
  --c-or:          #d9b673;   /* mot en italique, boutons, filets sur nuit */
  --c-or-vif:      #e8c98a;
  --c-or-encre:    #85641f;   /* version lisible de l'or sur fond clair */
  --c-bleu:        #0a5fa8;   /* liens et italiques sur fond clair */
  --c-bleu-fonce:  #084b85;
  --c-bleu-logo:   #0078dd;   /* bleu exact du logo */
  --c-bleu-clair:  #7cc0f7;   /* lueur et liens sur nuit */

  /* Filets */
  --c-filet:        #e2dac8;
  --c-filet-fort:   #cfc5ae;
  --c-filet-nuit:   rgba(217, 182, 115, 0.22);
  --c-filet-nuit-doux: rgba(255, 255, 255, 0.10);

  /* Typographies */
  --f-titre: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --f-texte: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

  --t-base:      1.0625rem;   /* 17 px */
  --t-petit:     0.9375rem;
  --t-etiquette: 0.75rem;
  --t-chapeau:   clamp(1.125rem, 1rem + 0.45vw, 1.3125rem);
  --t-h3:        clamp(1.5rem, 1.3rem + 0.6vw, 1.75rem);
  --t-h2:        clamp(2.125rem, 1.35rem + 2.6vw, 3.5rem);
  --t-h2-grand:  clamp(2.375rem, 1.4rem + 3.3vw, 4.25rem);
  --t-h1:        clamp(2.75rem, 1.5rem + 4.4vw, 5.25rem);

  /* Espacements */
  --e-1: 0.25rem;  --e-2: 0.5rem;  --e-3: 0.75rem; --e-4: 1rem;
  --e-5: 1.5rem;   --e-6: 2rem;    --e-7: 3rem;    --e-8: 4rem;  --e-9: 6rem;
  --e-section: clamp(4.5rem, 8vw, 8.5rem);

  /* Grille */
  --l-max: 1280px;
  --l-marge: clamp(1.25rem, 4vw, 3rem);
  --l-gouttiere: clamp(1.25rem, 2vw, 2rem);

  /* Formes */
  --r-1: 2px;
  --r-arche: 999px 999px 0 0;

  --h-entete: 72px;
  --tr: 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ============================ 3. BASES ============================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
}

body {
  margin: 0;
  font-variant-numeric: lining-nums;
  background: var(--c-creme);
  color: var(--c-encre);
  font-family: var(--f-texte);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--f-titre);
  font-weight: 500;
  color: inherit;
  text-wrap: balance;
}
h1 em, h2 em, .pied__nom em { font-style: italic; font-weight: 500; }

p { margin: 0 0 var(--e-4); }
p:last-child { margin-bottom: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
a { color: inherit; }

.conteneur {
  width: 100%;
  max-width: var(--l-max);
  margin-inline: auto;
  padding-inline: var(--l-marge);
}

.lien-evitement {
  position: fixed;
  left: var(--e-4);
  top: -100%;
  z-index: 200;
  padding: var(--e-3) var(--e-5);
  background: var(--c-nuit);
  color: var(--c-texte-clair);
  font-size: var(--t-petit);
  border-radius: var(--r-1);
  transition: top var(--tr);
}
.lien-evitement:focus { top: var(--e-4); }
main:focus { outline: none; }

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

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--c-bleu);
  outline-offset: 3px;
  border-radius: var(--r-1);
}
:where(.ouverture, .section--nuit, .bloc-rdv, .pied, .bibliotheque, .barre-mobile) :where(a, button, summary):focus-visible {
  outline-color: var(--c-or-vif);
}

/* ====================== 4. ÉLÉMENTS D'INTERFACE ====================== */

/* --- Surtitres --- */
.surtitre {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  margin: 0 0 var(--e-5);
  font-size: var(--t-etiquette);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-or-encre);
}
.surtitre__trait { width: 2.5rem; height: 1px; flex: none; background: currentColor; opacity: 0.7; }
.surtitre--clair { color: var(--c-or); }
.surtitre--centre { justify-content: center; }

/* --- Filigrane : grand numéro au trait, en tête de section --- */
.filigrane {
  display: block;
  font-family: var(--f-titre);
  font-size: clamp(4rem, 3rem + 4vw, 7rem);
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--c-filet-fort);
  margin-bottom: var(--e-5);
  user-select: none;
}
@supports not (-webkit-text-stroke: 1px black) {
  .filigrane { color: var(--c-filet); }
}

/* --- Titres --- */
.titre-ouverture {
  font-size: var(--t-h1);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--c-texte-clair);
  margin-bottom: var(--e-6);
}
.titre-ouverture em { display: block; color: var(--c-or); }

.titre-section {
  font-size: var(--t-h2);
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin-bottom: var(--e-5);
}
.titre-section em { color: var(--c-bleu); }
.titre-section--grand { font-size: var(--t-h2-grand); }
:where(.section--nuit, .bloc-rdv) .titre-section { color: var(--c-texte-clair); }
:where(.section--nuit, .bloc-rdv) .titre-section em { color: var(--c-or); }

/* --- Textes --- */
.chapeau {
  font-size: var(--t-chapeau);
  line-height: 1.6;
  color: var(--c-texte-doux);
  max-width: 50ch;
}
.chapeau--clair { color: var(--c-texte-clair-doux); }
.texte-courant { color: var(--c-texte-doux); max-width: 58ch; }

/* --- Boutons --- */
.bouton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  font-family: var(--f-texte);
  font-size: var(--t-petit);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r-1);
  transition: background-color var(--tr), color var(--tr), border-color var(--tr), transform var(--tr), box-shadow var(--tr);
}
.bouton--large { min-height: 56px; padding: 0.95rem 1.9rem; font-size: 1rem; }
.bouton--bloc { display: flex; width: 100%; }

.bouton--or {
  background: var(--c-or);
  color: var(--c-nuit);
  border-color: var(--c-or);
}
.bouton--or::after { content: "→"; transition: transform var(--tr); }
.bouton--or:hover {
  background: var(--c-or-vif);
  border-color: var(--c-or-vif);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -14px rgba(217, 182, 115, 0.65);
}
.bouton--or:hover::after { transform: translateX(4px); }
.bouton--or:active { transform: translateY(0); }

.bouton--contour {
  background: transparent;
  color: var(--c-texte-clair);
  border-color: rgba(239, 234, 224, 0.42);
}
.bouton--contour:hover { border-color: var(--c-or); color: var(--c-or-vif); transform: translateY(-2px); }

.bouton--nuit {
  background: var(--c-nuit);
  color: var(--c-texte-clair);
  border-color: var(--c-nuit);
}
.bouton--nuit:hover { background: var(--c-nuit-haut); border-color: var(--c-or); color: var(--c-or-vif); }

/* --- Liens --- */
.lien-texte {
  color: var(--c-bleu);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--tr), text-decoration-color var(--tr);
}
.lien-texte:hover { color: var(--c-bleu-fonce); text-decoration-thickness: 2px; }
.lien-texte--clair { color: var(--c-bleu-clair); }
.lien-texte--clair:hover { color: #b4dbfb; }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 44px;
  font-size: var(--t-petit);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--c-encre);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left bottom 8px / 100% 1px no-repeat;
  transition: color var(--tr), background-size var(--tr);
}
.lien-fleche::after { content: "→"; color: var(--c-or-encre); transition: transform var(--tr); }
.lien-fleche:hover { color: var(--c-bleu); }
.lien-fleche:hover::after { transform: translateX(4px); }
.lien-fleche--clair { color: var(--c-texte-clair); }
.lien-fleche--clair::after { color: var(--c-or); }
.lien-fleche--clair:hover { color: var(--c-or-vif); }

.groupe-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4); margin: 0; }
.groupe-actions--liens { gap: var(--e-6); margin-top: var(--e-6); }
.groupe-actions--centre { justify-content: center; }

/* --- Sections --- */
.section { position: relative; padding-block: var(--e-section); }
.section--creme { background: var(--c-creme); }
.section--blanc { background: var(--c-blanc); }
.section--nuit {
  background:
    radial-gradient(60rem 30rem at 50% -6rem, rgba(0, 120, 221, 0.16), transparent 70%),
    var(--c-nuit);
  color: var(--c-texte-clair);
}
.section--nuit .texte-courant { color: var(--c-texte-clair-doux); }

.tete-section { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.tete-section--centre { text-align: center; }
.tete-section--centre .chapeau { margin-inline: auto; }
.tete-section--centre .titre-section { max-width: 20ch; margin-inline: auto; }

.note-section {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  font-size: var(--t-petit);
  color: var(--c-texte-doux);
}
.note-section--clair { color: var(--c-texte-clair-doux); }
.note-section--centre { text-align: center; }

/* ====================== 5. EN-TÊTE ====================== */

.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-creme);
  border-bottom: 1px solid var(--c-filet-fort);
}
.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  min-height: var(--h-entete);
  padding-block: var(--e-3);
}
.entete__logo { display: block; flex: none; }
.entete__logo img { width: 172px; height: auto; }
.entete__actions { display: flex; align-items: center; gap: var(--e-3); flex: none; }
.entete__cta { display: none; }

.bascule-menu {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.5rem 0.9rem 0.5rem 0.75rem;
  font-family: var(--f-texte);
  font-size: var(--t-etiquette);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-encre);
  background: transparent;
  border: 1px solid var(--c-filet-fort);
  border-radius: var(--r-1);
  cursor: pointer;
  transition: border-color var(--tr);
}
.bascule-menu:hover { border-color: var(--c-encre); }
.sans-js .bascule-menu { display: none; }
.bascule-menu__traits { display: grid; gap: 5px; width: 18px; }
.bascule-menu__traits span { display: block; height: 1.5px; background: currentColor; transition: transform var(--tr); }
.bascule-menu[aria-expanded="true"] .bascule-menu__traits span:first-child { transform: translateY(3.25px) rotate(45deg); }
.bascule-menu[aria-expanded="true"] .bascule-menu__traits span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

/* Panneau mobile : il reprend la nuit de l'ouverture */
.nav-principale {
  position: fixed;
  inset: var(--h-entete) 0 0;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--e-6);
  padding: var(--e-7) var(--l-marge) var(--e-8);
  background:
    radial-gradient(40rem 24rem at 80% 0, rgba(0, 120, 221, 0.2), transparent 70%),
    var(--c-nuit);
  color: var(--c-texte-clair);
  overflow-y: auto;
}
.nav-principale.est-ouvert { display: flex; }
.nav-principale__liste { display: flex; flex-direction: column; }
.nav-principale__liste a {
  display: block;
  padding: var(--e-4) 0;
  font-family: var(--f-titre);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.15;
  text-decoration: none;
  border-bottom: 1px solid var(--c-filet-nuit);
  transition: color var(--tr), padding-left var(--tr);
}
.nav-principale__liste a:hover,
.nav-principale__liste a[aria-current] { color: var(--c-or); padding-left: var(--e-3); }
.nav-principale__pied { display: grid; gap: var(--e-4); }
.nav-principale__tel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
}

/* ====================== 6. OUVERTURE ====================== */

.ouverture {
  position: relative;
  overflow: hidden;
  background: var(--c-nuit);
  color: var(--c-texte-clair);
  padding-top: clamp(3rem, 6vw, 5.5rem);
}

/* Le ciel : deux lueurs et une poussière de points. Tout est en CSS. */
.ouverture__ciel,
.bloc-rdv__ciel {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(46rem 34rem at 78% 38%, rgba(0, 120, 221, 0.26), transparent 68%),
    radial-gradient(38rem 26rem at 8% 100%, rgba(217, 182, 115, 0.10), transparent 70%),
    linear-gradient(180deg, var(--c-nuit) 0%, #0a1321 100%);
}
.ouverture__ciel::before,
.ouverture__ciel::after,
.bloc-rdv__ciel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(255,255,255,0.75), transparent 60%),
    radial-gradient(1.3px 1.3px at 27% 64%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 41% 9%, rgba(232,201,138,0.8), transparent 60%),
    radial-gradient(1.3px 1.3px at 55% 78%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(1.6px 1.6px at 63% 30%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1.3px 1.3px at 72% 88%, rgba(232,201,138,0.7), transparent 60%),
    radial-gradient(1.3px 1.3px at 86% 14%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1.3px 1.3px at 94% 58%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1.3px 1.3px at 5% 82%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(1.6px 1.6px at 34% 40%, rgba(124,192,247,0.75), transparent 60%);
  animation: scintille 7s ease-in-out infinite alternate;
}
.ouverture__ciel::after {
  transform: scale(-1, 1) translateY(7%);
  opacity: 0.6;
  animation-duration: 11s;
  animation-delay: -4s;
}
@keyframes scintille { from { opacity: 0.45; } to { opacity: 1; } }

.ouverture__grille {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 6vw, 3.5rem);
}
.ouverture__parole .chapeau { margin-bottom: var(--e-6); }

/* --- La fenêtre : le portrait dans une arche, comme un écran d'appel --- */
.fenetre {
  position: relative;
  margin: 0 auto;
  width: min(100%, 19rem);
  padding-bottom: var(--e-2);
}
.fenetre__orbites { position: absolute; inset: 0; pointer-events: none; }
.fenetre__orbites span {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 128%;
  aspect-ratio: 1;
  border: 1px solid var(--c-filet-nuit);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.fenetre__orbites span:nth-child(2) { width: 162%; border-color: rgba(124, 192, 247, 0.14); }
.fenetre__orbites span:nth-child(3) { width: 200%; border-color: rgba(255, 255, 255, 0.06); }
.fenetre__orbites span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-or);
  box-shadow: 0 0 12px 2px rgba(217, 182, 115, 0.7);
}
.fenetre__orbites span:nth-child(1) { animation: orbite 60s linear infinite; }
.fenetre__orbites span:nth-child(2) { animation: orbite 95s linear infinite reverse; }
.fenetre__orbites span:nth-child(2)::after { background: var(--c-bleu-clair); box-shadow: 0 0 12px 2px rgba(124, 192, 247, 0.7); }
.fenetre__orbites span:nth-child(3)::after { display: none; }
@keyframes orbite { to { transform: translate(-50%, -50%) rotate(360deg); } }

.fenetre__arche {
  position: relative;
  padding: 10px;
  border: 1px solid var(--c-filet-nuit);
  border-bottom: 0;
  border-radius: var(--r-arche);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0));
}
.fenetre__arche img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: var(--r-arche);
  filter: contrast(1.04);
}
.fenetre__arche::after {
  /* voile bleu nuit en pied d'image : fond la photo dans le ciel */
  content: "";
  position: absolute;
  inset: 10px 10px 0;
  border-radius: var(--r-arche);
  background: linear-gradient(180deg, rgba(11, 22, 38, 0) 55%, rgba(11, 22, 38, 0.72) 100%);
  pointer-events: none;
}

.fenetre__sceau {
  position: absolute;
  left: -0.75rem;
  bottom: 4.25rem;
  width: 5.75rem;
  height: 5.75rem;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.5));
}
.fenetre__sceau-fond { fill: var(--c-abysse); stroke: var(--c-or); stroke-width: 0.6; }
.fenetre__sceau-tour { transform-origin: 60px 60px; animation: tourne 38s linear infinite; }
.fenetre__sceau-tour text {
  font-family: var(--f-texte);
  font-size: 9.4px;
  font-weight: 600;
  letter-spacing: 0.08em;
  fill: var(--c-or);
}
.fenetre__sceau-initiales {
  font-family: var(--f-titre);
  font-style: italic;
  font-size: 30px;
  fill: var(--c-texte-clair);
}
@keyframes tourne { to { transform: rotate(360deg); } }

/* --- Repères --- */
.reperes {
  position: relative;
  display: grid;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--c-filet-nuit);
}
.reperes__item { padding: var(--e-5) 0; border-bottom: 1px solid var(--c-filet-nuit-doux); }
.reperes__item:last-child { border-bottom: 0; }
.reperes__label {
  margin-bottom: var(--e-1);
  font-size: var(--t-etiquette);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-or);
}
.reperes__value {
  font-family: var(--f-titre);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--c-texte-clair);
}
.reperes__value a { text-decoration: none; color: var(--c-or-vif); transition: color var(--tr); }
.reperes__value a:hover { color: #fff; }

/* ====================== 7. MOTIFS ====================== */

.liste-motifs { display: grid; gap: var(--e-4); }
.motif {
  position: relative;
  padding: var(--e-6) var(--e-5) var(--e-6);
  background: var(--c-blanc);
  border: 1px solid var(--c-filet);
  overflow: hidden;
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.motif::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--c-or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.motif:hover {
  transform: translateY(-4px);
  border-color: var(--c-filet-fort);
  box-shadow: 0 24px 44px -28px rgba(20, 32, 46, 0.35);
}
.motif:hover::before { transform: scaleX(1); }
.motif__titre { font-size: var(--t-h3); line-height: 1.12; margin-bottom: var(--e-3); }
.motif__texte { color: var(--c-texte-doux); font-size: var(--t-base); margin: 0; }

/* ====================== 8. LE PRATICIEN ====================== */

.praticien__grille { display: grid; gap: clamp(3rem, 6vw, 5rem); }
.praticien__texte .chapeau { margin-bottom: var(--e-5); color: var(--c-encre); }

/* La bibliothèque : un panneau de nuit à angles droits, coiffé d'un filet or.
   L'arche est réservée au portrait et au bloc de rendez-vous. */
.bibliotheque {
  position: relative;
  padding: clamp(2rem, 4vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 2.5rem);
  border-top: 2px solid var(--c-or);
  background:
    radial-gradient(24rem 16rem at 50% 0, rgba(0, 120, 221, 0.22), transparent 70%),
    var(--c-nuit);
  color: var(--c-texte-clair);
  box-shadow: inset 0 0 0 1px var(--c-filet-nuit);
}
.bibliotheque__titre {
  margin-bottom: var(--e-6);
  font-size: var(--t-etiquette);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-or);
}
.bibliotheque__liste { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-5); align-items: start; }
.livre { text-align: center; }
.livre img {
  width: min(100%, 136px);
  margin: 0 auto var(--e-5);
  box-shadow: 0 22px 36px -16px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255,255,255,0.08);
  transition: transform 360ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 360ms;
}
.livre:nth-child(1) img { transform: rotate(-2.5deg); }
.livre:nth-child(2) img { transform: rotate(2deg); }
.livre:hover img { transform: rotate(0) translateY(-6px); }
.livre__titre { font-size: 1.25rem; line-height: 1.15; margin-bottom: var(--e-1); }
.livre__soustitre { font-family: var(--f-titre); font-style: italic; font-size: 1.0625rem; color: var(--c-or); margin: 0 0 var(--e-2); }
.livre__auteurs { font-size: var(--t-petit); color: var(--c-texte-clair-doux); margin: var(--e-2) 0 0; }
.bibliotheque__lien { margin-top: var(--e-6); padding-top: var(--e-4); border-top: 1px solid var(--c-filet-nuit); text-align: center; }

/* ====================== 9. APPROCHES ====================== */

.approches { position: relative; display: grid; gap: var(--e-7); }
.approche {
  position: relative;
  padding: clamp(2.25rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.75rem) clamp(2rem, 3vw, 2.75rem);
  border: 1px solid var(--c-filet-nuit);
  border-top: 2px solid var(--c-or);
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01));
  text-align: center;
  transition: border-color var(--tr), transform var(--tr), background-color var(--tr);
}
.approche:hover { border-color: rgba(217, 182, 115, 0.55); transform: translateY(-4px); }
.approche__titre {
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem);
  line-height: 1.06;
  margin: 0 auto var(--e-5);
  max-width: 24ch;
}
.approche .texte-courant { margin: 0 auto var(--e-5); max-width: 40ch; }
.liste-marquee {
  display: grid;
  gap: 0;
  margin: 0 auto var(--e-6);
  max-width: 26rem;
  text-align: left;
  border-top: 1px solid var(--c-filet-nuit-doux);
}
.liste-marquee li {
  position: relative;
  padding: var(--e-3) 0 var(--e-3) var(--e-6);
  font-size: var(--t-petit);
  line-height: 1.5;
  border-bottom: 1px solid var(--c-filet-nuit-doux);
}
.liste-marquee li::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: 1.35em;
  width: 0.9rem;
  height: 1px;
  background: var(--c-or);
}
.approches__et {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: none;
  width: 4.25rem;
  height: 4.25rem;
  place-items: center;
  border: 1px solid var(--c-or);
  border-radius: 50%;
  background: var(--c-nuit);
  font-family: var(--f-titre);
  font-style: italic;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--c-or);
  transform: translate(-50%, -50%);
}

/* ====================== 10. LA CONSULTATION ====================== */

.etapes { display: grid; gap: var(--e-6); counter-reset: etape; }
.etape { position: relative; padding-left: 4.75rem; min-height: 4rem; }
.etape__index {
  position: absolute;
  left: 0;
  top: -0.1em;
  width: 3.5rem;
  font-family: var(--f-titre);
  font-size: 4.25rem;
  font-weight: 400;
  line-height: 0.85;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px var(--c-or-encre);
  transition: color var(--tr);
}
.etape:hover .etape__index { color: var(--c-or); }
.etape__titre { font-size: var(--t-h3); line-height: 1.12; margin-bottom: var(--e-2); }
.etape__texte { color: var(--c-texte-doux); margin: 0; max-width: 40ch; }

/* ====================== 11. QUESTIONS ====================== */

.questions__grille { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.questions__intro p:last-of-type { margin-top: var(--e-5); }
.questions__liste { border-top: 1px solid var(--c-filet-fort); }
.question { border-bottom: 1px solid var(--c-filet); }
:is(.question__intitule, .question > summary) {
  display: flex;
  align-items: flex-start;
  gap: var(--e-4);
  padding: var(--e-5) 0;
  font-family: var(--f-titre);
  font-size: clamp(1.3125rem, 1.2rem + 0.4vw, 1.5rem);
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
  transition: color var(--tr), padding-left var(--tr);
}
:is(.question__intitule, .question > summary)::-webkit-details-marker { display: none; }
:is(.question__intitule, .question > summary)::after {
  content: "";
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: auto;
  border: 1px solid var(--c-filet-fort);
  border-radius: 50%;
  background:
    linear-gradient(var(--c-or-encre), var(--c-or-encre)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--c-or-encre), var(--c-or-encre)) center / 1.5px 12px no-repeat;
  transition: transform var(--tr), border-color var(--tr), background-color var(--tr);
}
.question[open] :is(.question__intitule, .question > summary)::after {
  transform: rotate(45deg);
  border-color: var(--c-or-encre);
}
:is(.question__intitule, .question > summary):hover { color: var(--c-bleu); padding-left: var(--e-2); }
:is(.question__intitule, .question > summary):hover::after { border-color: var(--c-or-encre); }
.question__reponse { padding: 0 3.25rem var(--e-5) 0; color: var(--c-texte-doux); max-width: 58ch; }

/* ====================== 12. RENDEZ-VOUS ====================== */

.bloc-rdv {
  position: relative;
  overflow: hidden;
  padding-block: var(--e-section) 0;
  background: var(--c-nuit);
  color: var(--c-texte-clair);
  text-align: center;
}
.bloc-rdv__ciel {
  background:
    radial-gradient(44rem 30rem at 50% 62%, rgba(0, 120, 221, 0.28), transparent 70%),
    linear-gradient(180deg, var(--c-nuit), var(--c-abysse));
}
.bloc-rdv__arche {
  position: relative;
  max-width: 58rem;
  margin-inline: auto;
  padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1.25rem, 5vw, 5rem) clamp(3rem, 6vw, 5rem);
  border: 1px solid var(--c-filet-nuit);
  border-bottom: 0;
  border-radius: 30rem 30rem 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 60%);
}
.bloc-rdv__arche .titre-section { max-width: 17ch; margin-inline: auto; }
.bloc-rdv__arche .chapeau { margin: 0 auto var(--e-6); }
.bloc-rdv__tarif {
  display: inline-flex;
  align-items: baseline;
  gap: var(--e-4);
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding-top: var(--e-5);
  border-top: 1px solid var(--c-filet-nuit);
  font-family: var(--f-titre);
  font-size: 1.5rem;
  line-height: 1.3;
}
.bloc-rdv__tarif span {
  font-family: var(--f-texte);
  font-size: var(--t-etiquette);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-or);
}
.bloc-rdv__note { margin-top: var(--e-5); font-size: var(--t-petit); color: var(--c-texte-clair-doux); }

/* ====================== 13. PIED DE PAGE ====================== */

.pied {
  background: var(--c-abysse);
  color: var(--c-texte-clair);
  padding-block: clamp(3rem, 6vw, 5rem) calc(var(--e-6) + 4.75rem);
  border-top: 1px solid var(--c-filet-nuit);
}
.pied__grille { display: grid; gap: var(--e-7); padding-bottom: clamp(2.5rem, 4vw, 3.5rem); border-bottom: 1px solid var(--c-filet-nuit-doux); }
.pied__nom { font-family: var(--f-titre); font-size: 2rem; line-height: 1.05; margin-bottom: var(--e-2); }
.pied__nom em { color: var(--c-or); }
.pied__role { font-size: var(--t-petit); color: var(--c-texte-clair-doux); margin-bottom: var(--e-2); }
.pied__mention { font-size: var(--t-etiquette); letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-or); margin-bottom: var(--e-3); }
.pied__tel a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--f-titre);
  font-size: 1.5rem;
  text-decoration: none;
  transition: color var(--tr);
}
.pied__tel a:hover { color: var(--c-or-vif); }
.pied__titre {
  font-family: var(--f-texte);
  font-size: var(--t-etiquette);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-or);
  margin-bottom: var(--e-3);
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--c-filet-nuit-doux);
}
.pied__colonne li a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--t-petit);
  color: var(--c-texte-clair);
  text-decoration: none;
  transition: color var(--tr), padding-left var(--tr);
}
.pied__colonne li a:hover { color: var(--c-or-vif); padding-left: var(--e-2); }
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2) var(--e-5);
  padding-top: var(--e-4);
  font-size: var(--t-etiquette);
  letter-spacing: 0.08em;
  color: var(--c-texte-clair-doux);
}
.pied__copyright { margin: 0; }
.pied__legal { display: flex; flex-wrap: wrap; gap: 0 var(--e-5); }
.pied__legal a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; transition: color var(--tr); }
.pied__legal a:hover { color: var(--c-texte-clair); }

/* ====================== 14. BARRE D'ACTION MOBILE ====================== */

.barre-mobile {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  gap: var(--e-3);
  padding: 0.7rem var(--l-marge) calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: var(--c-nuit);
  border-top: 1px solid var(--c-filet-nuit);
  transition: transform 260ms ease;
}
.barre-mobile__rdv { flex: 1; }
.barre-mobile__tel {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 64px;
  min-height: 48px;
  padding: 0 var(--e-3);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-texte-clair);
  border: 1px solid rgba(239, 234, 224, 0.35);
  border-radius: var(--r-1);
}
.barre-mobile.est-masque { transform: translateY(110%); }

/* ====================== 15. POINTS DE RUPTURE ====================== */

@media (min-width: 23rem) {
  .reperes { grid-template-columns: 1fr 1fr; column-gap: var(--e-5); }
  .reperes__item:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (min-width: 40rem) {
  .entete__cta { display: inline-flex; }
  .liste-motifs { grid-template-columns: 1fr 1fr; gap: var(--e-5); }
  .etapes { grid-template-columns: 1fr 1fr; gap: var(--e-7) var(--e-6); }
  .fenetre { width: min(100%, 22rem); }
  .pied__grille { grid-template-columns: 1fr 1fr; gap: var(--e-7) var(--e-6); }
  .livre img { width: min(100%, 156px); }
}

/* --- ≥ 900 px : ordinateur --- */
@media (min-width: 56.25rem) {
  :root { --h-entete: 88px; }
  html { scroll-padding-top: 7rem; }
  .barre-mobile { display: none; }
  .pied { padding-bottom: var(--e-6); }
  .entete__logo img { width: 228px; }

  .ouverture { padding-top: clamp(4rem, 7vw, 6.5rem); }
  .ouverture__grille {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4.4fr);
    align-items: center;
    column-gap: clamp(3rem, 7vw, 7rem);
  }
  .fenetre { width: 100%; max-width: 24.5rem; margin: 0 0 0 auto; }
  .fenetre__sceau { left: -3rem; bottom: 4.5rem; width: 8.25rem; height: 8.25rem; }

  .reperes { grid-template-columns: repeat(4, 1fr); column-gap: 0; }
  .reperes__item { padding: var(--e-6) var(--e-5); border-bottom: 0; border-left: 1px solid var(--c-filet-nuit-doux); }
  .reperes__item:first-child { padding-left: 0; border-left: 0; }

  /* Têtes de section : filigrane et titre à gauche, chapeau à droite */
  .tete-section:not(.tete-section--centre) {
    display: grid;
    grid-template-columns: auto minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 4rem);
    align-items: end;
  }
  .tete-section .filigrane { margin-bottom: 0; align-self: start; }
  .tete-section__titre .titre-section { margin-bottom: 0; }
  .tete-section__texte { padding-bottom: 0.4rem; }

  .liste-motifs { grid-template-columns: repeat(3, 1fr); }
  .motif { padding: var(--e-7) var(--e-6) var(--e-7); }

  .praticien__grille { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; column-gap: clamp(3rem, 7vw, 7rem); }

  .approches { grid-template-columns: 1fr 1fr; gap: var(--e-6); }
  .approches__et { display: grid; }
  /* Deux lignes réservées : les deux volets démarrent leur texte au même niveau. */
  .approche__titre { min-height: 2.12em; }

  /* Étapes : une séquence posée sur un même filet */
  .etapes { grid-template-columns: repeat(4, 1fr); gap: var(--e-6); border-top: 1px solid var(--c-filet-fort); }
  .etape { padding: var(--e-7) var(--e-4) 0 0; }
  .etape::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--c-creme);
    border: 1px solid var(--c-or-encre);
    transition: background-color var(--tr);
  }
  .etape:hover::before { background: var(--c-or); }
  .etape__index { position: static; display: block; width: auto; margin-bottom: var(--e-4); font-size: 5.5rem; text-align: left; }

  .questions__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); column-gap: clamp(3rem, 7vw, 7rem); align-items: start; }
  .questions__intro { position: sticky; top: 8rem; }

  .pied__grille { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--e-6); }
}

/* --- ≥ 1152 px : navigation horizontale (six entrées) --- */
@media (min-width: 72rem) {
  .bascule-menu { display: none; }
  .nav-principale {
    position: static;
    inset: auto;
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    padding: 0;
    margin-right: clamp(1.25rem, 2.5vw, 2rem);
    background: none;
    color: inherit;
    overflow: visible;
  }
  .nav-principale__liste { flex-direction: row; gap: clamp(1rem, 1.9vw, 2rem); }
  .nav-principale__liste a {
    position: relative;
    padding: var(--e-2) 0;
    font-family: var(--f-texte);
    font-size: var(--t-petit);
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
    border: 0;
  }
  .nav-principale__liste a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1.5px;
    background: var(--c-or-encre);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--tr);
  }
  .nav-principale__liste a:hover,
  .nav-principale__liste a[aria-current] { color: var(--c-encre); padding-left: 0; }
  .nav-principale__liste a:hover::after,
  .nav-principale__liste a[aria-current]::after { transform: scaleX(1); }
  .nav-principale__pied { display: none; }
}

/* ============ 16. MOUVEMENT, APPARITIONS, IMPRESSION ============ */

/* Apparitions au défilement : une animation, jamais une transition, pour ne
   pas écraser les transitions de survol des éléments concernés. Elles ne
   s'appliquent que si le script tourne (html.avec-js) et que la personne
   n'a pas demandé moins de mouvement. */
@media (prefers-reduced-motion: no-preference) {
  .avec-js .apparait { opacity: 0; }
  .avec-js .apparait.est-visible { animation: apparait 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .avec-js .liste-motifs .apparait:nth-child(3n+2).est-visible,
  .avec-js .etapes .apparait:nth-child(2).est-visible { animation-delay: 90ms; }
  .avec-js .liste-motifs .apparait:nth-child(3n).est-visible,
  .avec-js .etapes .apparait:nth-child(3).est-visible { animation-delay: 180ms; }
  .avec-js .etapes .apparait:nth-child(4).est-visible { animation-delay: 270ms; }
  .avec-js .approches .approche:last-child.est-visible { animation-delay: 140ms; }

  /* L'ouverture se pose en une demi-seconde : le contenu est lisible d'emblée,
     seule la fenêtre arrive avec un léger retard. */
  .ouverture__parole { animation: apparait 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .fenetre { animation: apparait 800ms 100ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
}
@keyframes apparait {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .entete, .barre-mobile, .lien-evitement, .ouverture__ciel, .bloc-rdv__ciel, .fenetre__orbites { display: none !important; }
  body, .ouverture, .section--nuit, .bloc-rdv, .pied, .bibliotheque { background: #fff !important; color: #000 !important; }
  .titre-ouverture, .titre-section, .reperes__value { color: #000 !important; }
  .apparait { opacity: 1 !important; }
}