/* ==========================================================================
   Benjamin MURDOCK Galindo — Praticien magnétiseur
   Feuille de style unique. Trois couleurs, une famille typographique.
   ========================================================================== */

:root {
  /* Palette — volontairement réduite */
  --blanc: #FFFFFF;
  --nuit: #0F1A2C;          /* bleu nuit : textes, titres, footer */
  --nuit-doux: #4A566C;     /* bleu nuit adouci : textes secondaires */
  --azurin: #2C5DA9;        /* bleu azurin : liens, filets, détails */
  --filet: rgba(15, 26, 44, .14);
  --filet-azurin: rgba(44, 93, 169, .45);
  --bleu-clair: #D3E4EB;     /* fond des invitations au rendez-vous */

  /* Typographie — Times New Roman et ses équivalents métriques */
  --serif: "Times New Roman", Times, "Liberation Serif", Tinos, "Noto Serif", serif;

  /* Échelle (base ~20px) */
  --t-xs: .8125rem;
  --t-s: .9375rem;
  --t-m: clamp(1.125rem, 1.04rem + .3vw, 1.3125rem);
  --t-l: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);
  --t-xl: clamp(1.75rem, 1.35rem + 1.5vw, 2.75rem);
  --t-xxl: clamp(2.25rem, 1.4rem + 3.2vw, 4.5rem);
  --t-hero: clamp(2.6rem, 1.2rem + 5.4vw, 7.25rem);

  /* Mise en page */
  --marge: clamp(1.25rem, 5vw, 5.5rem);
  --gouttiere: clamp(1rem, 2vw, 2.25rem);
  --largeur: 1480px;
  --lecture: 34em;

  --lent: 1.4s;
  --courbe: cubic-bezier(.2, .7, .1, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--nuit);
  font-family: var(--serif);
  font-size: var(--t-m);
  line-height: 1.55;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 { font-weight: 400; margin: 0; line-height: 1.1; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--azurin);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-color: var(--filet-azurin);
  transition: color .5s ease, text-underline-offset .5s var(--courbe), text-decoration-color .5s ease;
}
a:hover { text-underline-offset: .32em; text-decoration-color: currentColor; }

:focus-visible { outline: 1px solid var(--azurin); outline-offset: 4px; }

::selection { background: var(--azurin); color: var(--blanc); }

.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.lien-evitement {
  position: absolute; left: var(--marge); top: -4rem;
  background: var(--nuit); color: var(--blanc); padding: .5rem 1rem; z-index: 100;
}
.lien-evitement:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   Grille
   -------------------------------------------------------------------------- */
.cadre { max-width: var(--largeur); margin: 0 auto; padding-inline: var(--marge); }

.grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gouttiere);
}

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */
.entete { padding-block: clamp(1.25rem, 2.5vw, 2.25rem); position: relative; z-index: 20; }
.entete .cadre { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; }

.signature {
  color: var(--nuit); text-decoration: none; font-size: var(--t-m); line-height: 1.2;
}
.signature span { display: block; font-style: italic; color: var(--nuit-doux); }
.signature:hover { color: var(--azurin); }

.navigation ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(1.25rem, 2.6vw, 2.75rem); }
.navigation a {
  color: var(--nuit); text-decoration: none; font-size: var(--t-m);
  background-image: linear-gradient(var(--azurin), var(--azurin));
  background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .7s var(--courbe), color .5s ease;
  padding-bottom: .1em;
}
.navigation a:hover, .navigation a[aria-current] { color: var(--azurin); background-size: 100% 1px; }

.bouton-menu {
  display: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--t-m); color: var(--nuit);
}

@media (max-width: 899px) {
  .bouton-menu { display: block; }
  .navigation {
    position: fixed; inset: 0; background: var(--blanc); z-index: 50;
    padding: 6.5rem var(--marge) 3rem;
    opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s;
  }
  .navigation ul { flex-direction: column; gap: .35em; }
  .navigation a { font-size: var(--t-xxl); line-height: 1.15; background-image: none; }
  .menu-ouvert .navigation { opacity: 1; visibility: visible; }
  .menu-ouvert .bouton-menu { position: relative; z-index: 60; }
  .menu-ouvert { overflow: hidden; }
}

/* --------------------------------------------------------------------------
   Accueil — ouverture : portrait centré, énoncé à gauche, invitation à droite
   -------------------------------------------------------------------------- */
.ouverture { padding-top: 0; padding-bottom: clamp(5rem, 12vh, 8rem); }
.ouverture { overflow-x: clip; }
.ouverture-portrait { width: min(72%, 1000px, calc((100vh - 6rem) * 1.25)); margin: -.5rem auto 0; }
.ouverture-portrait img {
  width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 94%);
  mask-image: linear-gradient(to bottom, #000 52%, transparent 94%);
}
.ouverture-textes { position: relative; z-index: 1; margin-top: calc(-1 * min(15vw, 24vh)); align-items: start; --t-titre-hero: clamp(2rem, .8rem + 2.9vw, 4.1rem); }

.ouverture h1 { grid-column: 1 / span 8; font-size: var(--t-titre-hero); line-height: 1.04; letter-spacing: -.018em; }
.ouverture h1 .ligne { display: block; white-space: nowrap; }
@media (max-width: 899px) { .ouverture h1 .ligne { display: inline; white-space: normal; } }
.ouverture h1 .ligne { display: block; white-space: nowrap; }
.sur-titre {
  display: block; font-size: var(--t-m); line-height: 1.3; letter-spacing: 0;
  font-style: italic; color: var(--nuit-doux); margin-bottom: clamp(1rem, 2.5vh, 1.6rem);
}
.ouverture-droite { grid-column: 9 / span 4; max-width: 24em; justify-self: end; }
/* Alignement des hauteurs de capitales du titre et du paragraphe (Times : capitale ≈ .662, ascendante ≈ .891) */
.ouverture-droite .phrase-1 { margin-top: calc(var(--t-titre-hero) * .185 - var(--t-m) * .454); }
.ouverture .phrase-2 { font-size: var(--t-l); font-style: italic; line-height: 1.22; margin-bottom: .9em; }
.ouverture .phrase-1 { font-size: var(--t-m); line-height: 1.45; margin-bottom: 1.8rem; }
.ouverture .phrase-3 { font-size: var(--t-m); line-height: 1.45; color: var(--nuit-doux); margin-bottom: 1.8rem; }

.bouton {
  display: inline-block; padding: .8em 1.5em .85em;
  border: 1px solid var(--nuit); background: var(--nuit); color: var(--blanc); text-decoration: none;
  font-size: var(--t-m); line-height: 1; white-space: nowrap;
  transition: background-color .6s ease, color .6s ease, border-color .6s ease;
}
.bouton:hover { background: var(--azurin); border-color: var(--azurin); color: var(--blanc); }
.bouton-leger { background: transparent; color: var(--nuit); border-color: var(--filet); }
.bouton-leger:hover { background: transparent; color: var(--azurin); border-color: var(--azurin); }

.js .apparition { opacity: 0; transform: translateY(.6rem); }
.js .pret .apparition {
  opacity: 1; transform: none;
  transition: opacity 1.8s ease, transform 2.2s var(--courbe);
  transition-delay: var(--delai, 0s);
}

@media (max-width: 1099px) {
  .ouverture-droite { grid-column: 8 / span 5; }
}
@media (max-width: 899px) {
  .ouverture-portrait { width: 150%; margin-left: -25%; }
  .ouverture-textes { margin-top: -3.5rem; }
  .ouverture h1, .ouverture-droite { grid-column: 1 / -1; justify-self: start; }
  .ouverture h1 .ligne { display: inline; white-space: normal; }
  .ouverture-droite { margin-top: 2.5rem; padding-right: 6%; }
  .ouverture-droite .phrase-1 { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   Accueil — Connaissance à la une (cartes à pictogrammes)
   -------------------------------------------------------------------------- */
.connaissance-une { padding-bottom: clamp(5rem, 13vh, 10rem); }
.connaissance-une-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: clamp(2rem, 5vh, 3rem); }
.connaissance-une-tete h2 { font-size: var(--t-xl); line-height: 1.08; letter-spacing: -.01em; }

.cartes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); }
@media (max-width: 1099px) { .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.carte {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 4 / 3; padding: clamp(1.25rem, 2.4vw, 2.25rem);
  border: 1px solid var(--filet); color: var(--nuit); text-decoration: none;
  transition: border-color .8s ease;
}
.carte-picto { flex: 1; display: grid; place-items: center; color: var(--azurin); }
.picto { width: clamp(5.5rem, 9vw, 8.5rem); height: auto; overflow: visible; transition: transform 1.2s var(--courbe); }
.carte-bas { display: block; }
.carte-titre { display: block; font-size: var(--t-l); line-height: 1.2; max-width: 20em; transition: color .5s ease; }
.carte-rubrique { display: block; margin-top: .45rem; font-size: var(--t-s); font-style: italic; color: var(--nuit-doux); }
.carte:hover { border-color: var(--azurin); }
.carte:hover .picto { transform: translateY(-.35rem); }
.carte:hover .carte-titre { color: var(--azurin); }

@media (max-width: 899px) {
  .connaissance-une-tete { flex-direction: column; align-items: flex-start; }
  .cartes { grid-template-columns: 1fr; }
  .carte { aspect-ratio: auto; min-height: 22rem; }
}

/* --------------------------------------------------------------------------
   Photographies (emplacements en attente du shooting)
   -------------------------------------------------------------------------- */
.photo { margin: 0; }
.photo .image {
  position: relative; aspect-ratio: var(--ratio, 16 / 9); width: 100%;
  border: 1px solid var(--filet);
  background:
    linear-gradient(to top right, transparent calc(50% - .5px), var(--filet) 50%, transparent calc(50% + .5px)),
    linear-gradient(to top left, transparent calc(50% - .5px), var(--filet) 50%, transparent calc(50% + .5px));
  display: grid; place-items: center;
}
.photo .image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo .indication {
  background: var(--blanc); padding: .6em 1.1em; max-width: 26em; text-align: center;
  font-size: var(--t-s); font-style: italic; color: var(--nuit-doux); line-height: 1.4;
}
.photo figcaption { margin-top: .9rem; font-size: var(--t-s); color: var(--nuit-doux); font-style: italic; }

.photo-ouverture { padding-bottom: clamp(6rem, 16vh, 12rem); }
.photo-ouverture .photo { grid-column: 1 / -1; }
@media (min-width: 900px) { .photo-ouverture .photo { --ratio: 21 / 10; } }

/* --------------------------------------------------------------------------
   Chapitres de l'accueil
   -------------------------------------------------------------------------- */
.chapitre { padding-block: clamp(5rem, 13vh, 10rem); }
.chapitre.chapitre-rendez-vous .contact-principal { font-size: var(--t-xl); }
.chapitre.chapitre-rendez-vous .contact-secondaire { font-size: var(--t-l); }

.chapitre .reperes {
  grid-column: 1 / span 3; align-self: start;
  position: sticky; top: 2rem;
  font-size: var(--t-m); line-height: 1.3;
}
.reperes .numero { color: var(--azurin); display: block; font-variant-numeric: lining-nums; }
.reperes .nom { font-style: italic; }

.chapitre .corps { grid-column: 5 / span 7; }
.chapitre .enonce {
  font-size: var(--t-xxl); line-height: 1.06; letter-spacing: -.015em; margin-bottom: clamp(2rem, 5vh, 3.5rem);
  max-width: 15em;
}
.chapitre .texte { max-width: var(--lecture); }
.chapitre .texte p { margin-bottom: 1.1em; }
.chapitre .suite { margin-top: 2.25rem; }

.negations { list-style: none; margin: 0 0 3rem; padding: 0; }
.negations li {
  font-size: var(--t-xl); line-height: 1.2; padding-block: .55em;
  border-bottom: 1px solid var(--filet);
}
.negations li:first-child { border-top: 1px solid var(--filet); }

.etapes { list-style: none; margin: 0 0 3.5rem; padding: 0; counter-reset: etape;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); }
.etapes li { counter-increment: etape; border-top: 1px solid var(--nuit); padding-top: 1.1rem; }
.etapes li::before { content: counter(etape, lower-roman) "."; display: block; color: var(--azurin); font-style: italic; margin-bottom: .6rem; }
.etapes h3 { font-size: var(--t-l); margin-bottom: .7rem; }
.etapes p { font-size: var(--t-s); line-height: 1.55; color: var(--nuit-doux); }

.reperes-pratiques { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); margin: 0; }
.reperes-pratiques div { border-top: 1px solid var(--filet); padding-top: .9rem; }
.reperes-pratiques dt { font-size: var(--t-s); color: var(--nuit-doux); font-style: italic; }
.reperes-pratiques dd { margin: .2rem 0 0; font-size: var(--t-l); line-height: 1.2; }

.chapitre.chapitre-benjamin .corps { grid-column: 5 / span 4; }
.chapitre.chapitre-benjamin .enonce { font-size: var(--t-xl); line-height: 1.12; }
.chapitre.chapitre-benjamin .portrait { grid-column: 9 / span 4; align-self: start; margin-top: .5rem; }
.chapitre.chapitre-benjamin .portrait .photo { --ratio: 3 / 4; }

@media (max-width: 899px) {
  .chapitre .reperes { grid-column: 1 / -1; position: static; margin-bottom: 2.5rem; }
  .chapitre .corps, .chapitre.chapitre-benjamin .corps,         .chapitre.chapitre-benjamin .portrait { grid-column: 1 / span 9; margin-top: 3rem; }
  .etapes, .reperes-pratiques { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Listes éditoriales (sommaires d'articles)
   -------------------------------------------------------------------------- */
.liste-articles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }
.liste-articles li { border-bottom: 1px solid var(--filet); }
.liste-articles a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem;
  padding-block: 1.15rem 1.25rem; text-decoration: none; color: var(--nuit);
}
.liste-articles .titre {
  font-size: var(--t-l); line-height: 1.2;
  transition: color .5s ease, transform .8s var(--courbe);
}
.liste-articles .extrait { grid-column: 1; margin-top: .45rem; font-size: var(--t-s); color: var(--nuit-doux); line-height: 1.5; max-width: 40em; }
.liste-articles .duree { grid-column: 2; grid-row: 1; align-self: baseline; font-size: var(--t-s); font-style: italic; color: var(--nuit-doux); white-space: nowrap; }
.liste-articles a:hover .titre { color: var(--azurin); transform: translateX(.35em); }
.liste-articles.compacte .titre { font-size: var(--t-m); }
.liste-articles.compacte a { padding-block: .8rem; }

.lien-discret { color: var(--nuit); }
.lien-discret:hover { color: var(--azurin); }

/* --------------------------------------------------------------------------
   Pages intérieures — ouverture
   -------------------------------------------------------------------------- */
.tete-page { padding-top: clamp(3rem, 10vh, 7rem); padding-bottom: clamp(3.5rem, 9vh, 7rem); }
.tete-page .etiquette { grid-column: 1 / span 3; }
.tete-page h1 { grid-column: 4 / span 8; font-size: var(--t-xxl); letter-spacing: -.018em; line-height: 1.04; }
.tete-page .chapeau { grid-column: 4 / span 6; margin-top: clamp(2rem, 5vh, 3.5rem); font-size: var(--t-l); line-height: 1.38; }

.etiquette {
  font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; line-height: 1.5; padding-top: .7em;
}
.etiquette a { color: var(--nuit); text-decoration: none; }
.etiquette a:hover { color: var(--azurin); }
.etiquette .rubrique { display: block; color: var(--azurin); letter-spacing: 0; text-transform: none; font-size: var(--t-m); font-style: italic; margin-top: .2em; }

@media (max-width: 899px) {
  .tete-page .etiquette, .tete-page h1, .tete-page .chapeau { grid-column: 1 / -1; }
  .tete-page .etiquette { margin-bottom: 1.75rem; }
}

/* Fil d'Ariane */
.ariane { font-size: var(--t-xs); color: var(--nuit-doux); padding-top: .5rem; }
.ariane ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4em; }
.ariane li + li::before { content: "/"; margin-right: .4em; color: var(--filet); color: rgba(15,26,44,.3); }
.ariane a { color: var(--nuit-doux); text-decoration: none; }
.ariane a:hover { color: var(--azurin); }

/* --------------------------------------------------------------------------
   Rubriques (pages Benjamin, La pratique, Rendez-vous)
   -------------------------------------------------------------------------- */
.rubriques { padding-bottom: clamp(5rem, 12vh, 9rem); }
.rubrique-bloc { padding-block: clamp(2.5rem, 6vh, 4rem); border-top: 1px solid var(--filet); }
.rubrique-bloc h2 { grid-column: 1 / span 3; font-size: var(--t-l); font-style: italic; line-height: 1.2; padding-right: 1rem; }
.rubrique-bloc .texte { grid-column: 4 / span 6; max-width: var(--lecture); }
@media (max-width: 899px) {
  .rubrique-bloc h2, .rubrique-bloc .texte { grid-column: 1 / -1; }
  .rubrique-bloc h2 { margin-bottom: 1.25rem; }
}

.texte-libre { padding-bottom: clamp(4rem, 10vh, 8rem); }
.texte-libre .texte { grid-column: 4 / span 6; max-width: var(--lecture); }
.texte-libre .portrait { grid-column: 10 / span 3; grid-row: 1 / span 3; align-self: start; }
.texte-libre .portrait .photo { --ratio: 3 / 4; }
.texte-libre .texte p { margin-bottom: 1.05em; }
.exergue {
  margin: 2.6em 0 2.6em; padding: 0;
  font-size: var(--t-xl); line-height: 1.16; letter-spacing: -.01em;
}
.exergue.decale { margin-left: -12%; }
@media (max-width: 899px) {
  .texte-libre .texte { grid-column: 1 / -1; }
  .texte-libre .portrait { grid-column: 1 / span 9; grid-row: auto; margin-bottom: 3rem; }
  .exergue.decale { margin-left: 0; }
}

/* Coordonnées */
.coordonnees { padding-bottom: clamp(4rem, 10vh, 7rem); }
.coordonnees .contacts { grid-column: 4 / span 9; }
.contact-principal {
  display: inline-block; overflow-wrap: anywhere; font-size: var(--t-xxl); line-height: 1.1; letter-spacing: -.015em; text-decoration-thickness: 1px;
  word-break: break-word;
}
.contact-secondaire { display: inline-block; margin-top: .6rem; font-size: var(--t-xl); color: var(--nuit); text-decoration-color: var(--filet); }
.coordonnees .reperes-pratiques { margin-top: clamp(3rem, 7vh, 5rem); }
.coordonnees .note { margin-top: 2.5rem; max-width: var(--lecture); font-size: var(--t-s); color: var(--nuit-doux); }
@media (max-width: 899px) { .coordonnees .contacts { grid-column: 1 / -1; } }

.a-completer { color: var(--azurin); font-style: italic; }

/* --------------------------------------------------------------------------
   Douleur — index par zone
   -------------------------------------------------------------------------- */
.zones { padding-bottom: clamp(5rem, 12vh, 9rem); }
.zone { padding-block: clamp(2.25rem, 5vh, 3.5rem); border-top: 1px solid var(--filet); }
.zone h2 { grid-column: 1 / span 5; font-size: var(--t-xxl); letter-spacing: -.018em; line-height: 1; }
.zone .liste-articles { grid-column: 7 / span 6; border-top: 0; }
.zone .liste-articles li:last-child { border-bottom: 0; }
.zone .liste-articles a { padding-block: .55rem .6rem; }
@media (max-width: 899px) {
  .zone h2, .zone .liste-articles { grid-column: 1 / -1; }
  .zone h2 { margin-bottom: 1.5rem; }
}

/* --------------------------------------------------------------------------
   Connaissance — sommaire général
   -------------------------------------------------------------------------- */
.sommaire-general { padding-bottom: clamp(3rem, 8vh, 5rem); }
.sommaire-general nav { grid-column: 4 / span 6; }
.sommaire-general ol { list-style: none; margin: 0; padding: 0; counter-reset: theme; }
.sommaire-general li { counter-increment: theme; border-top: 1px solid var(--filet); }
.sommaire-general li:last-child { border-bottom: 1px solid var(--filet); }
.sommaire-general a {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: baseline;
  padding-block: .7rem; color: var(--nuit); text-decoration: none; font-size: var(--t-l);
}
.sommaire-general a::before { content: counter(theme, upper-roman); font-size: var(--t-s); color: var(--azurin); font-style: italic; }
.sommaire-general a .nombre { font-size: var(--t-s); color: var(--nuit-doux); font-style: italic; }
.sommaire-general a:hover { color: var(--azurin); }

.recherche { grid-column: 4 / span 6; margin-top: clamp(2.5rem, 6vh, 4rem); }
.recherche label { display: block; font-size: var(--t-s); font-style: italic; color: var(--nuit-doux); margin-bottom: .3rem; }
.recherche input {
  width: 100%; font: inherit; font-size: var(--t-l); color: var(--nuit);
  border: 0; border-bottom: 1px solid var(--nuit); padding: .35rem 0; background: transparent; border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.recherche input::placeholder { color: rgba(15,26,44,.35); font-style: italic; }
.recherche input:focus { outline: none; border-bottom-color: var(--azurin); }
.recherche .resultat { margin-top: .6rem; font-size: var(--t-s); color: var(--nuit-doux); min-height: 1.5em; }

@media (max-width: 899px) {
  .sommaire-general nav, .recherche { grid-column: 1 / -1; }
}

.themes { padding-bottom: clamp(5rem, 12vh, 9rem); }
.theme { padding-block: clamp(3.5rem, 9vh, 6rem) 0; scroll-margin-top: 1rem; }
.theme .presentation { grid-column: 1 / span 3; align-self: start; position: sticky; top: 2rem; }
.theme .presentation .numero { color: var(--azurin); font-style: italic; font-size: var(--t-s); display: block; margin-bottom: .4rem; }
.theme h2 { font-size: var(--t-xl); line-height: 1.08; letter-spacing: -.01em; }
.theme .presentation p { margin-top: 1.1rem; font-size: var(--t-s); color: var(--nuit-doux); line-height: 1.55; }
.theme .liste-articles { grid-column: 4 / span 9; }
@media (max-width: 899px) {
  .theme .presentation { grid-column: 1 / -1; position: static; margin-bottom: 2rem; }
  .theme .liste-articles { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Article
   -------------------------------------------------------------------------- */
.article-tete { padding-top: clamp(3rem, 9vh, 6.5rem); padding-bottom: clamp(3rem, 7vh, 5rem); }
.article-tete .etiquette { grid-column: 1 / span 3; }
.article-tete h1 { grid-column: 4 / span 8; font-size: var(--t-xxl); letter-spacing: -.018em; line-height: 1.04; max-width: 17em; }
.article-tete .infos { grid-column: 4 / span 8; margin-top: 2rem; font-size: var(--t-s); color: var(--nuit-doux); font-style: italic; display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; }

.article-corps { padding-bottom: clamp(4rem, 10vh, 7rem); }
.article-corps .marge-gauche { grid-column: 1 / span 3; }
.article-corps .contenu { grid-column: 4 / span 6; min-width: 0; }

.sommaire-article { position: sticky; top: 2rem; font-size: var(--t-s); line-height: 1.4; padding-right: 1rem; }
.sommaire-article p { font-style: italic; color: var(--nuit-doux); margin-bottom: .7rem; }
.sommaire-article ol { list-style: none; margin: 0; padding: 0; }
.sommaire-article li { margin-bottom: .55rem; }
.sommaire-article a { color: var(--nuit); text-decoration: none; }
.sommaire-article a:hover { color: var(--azurin); }

.contenu > p:first-child, .contenu .chapeau-article {
  font-size: var(--t-l); line-height: 1.4; margin-bottom: 1.3em;
}
.contenu h2 {
  font-size: var(--t-l); line-height: 1.2; margin: 2.6em 0 .85em; scroll-margin-top: 1.5rem;
}
.contenu h3 { font-size: var(--t-m); font-style: italic; margin: 1.8em 0 .5em; line-height: 1.3; }
.contenu ul, .contenu ol { padding-left: 1.2em; margin: 0 0 1.2em; }
.contenu li { margin-bottom: .45em; }
.contenu ul li::marker { color: var(--azurin); content: "– "; }
.contenu strong { font-weight: 700; }

.tableau { margin: 2em 0 2.2em; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tableau table { width: 100%; border-collapse: collapse; font-size: var(--t-s); line-height: 1.45; min-width: 32em; }
.tableau th { text-align: left; font-weight: 400; font-style: italic; color: var(--nuit-doux); padding: 0 1rem .6rem 0; border-bottom: 1px solid var(--nuit); vertical-align: bottom; }
.tableau td { padding: .75rem 1rem .75rem 0; border-bottom: 1px solid var(--filet); vertical-align: top; }
.tableau td:first-child { padding-right: 1.5rem; }

.a-retenir { margin: 3.5em 0 0; padding-top: 1.4rem; border-top: 1px solid var(--azurin); }
.a-retenir h2 { margin-top: 0; color: var(--azurin); font-style: italic; }

.faq { margin: 0; }
.faq-question { margin-top: 2.2em; }
.faq dt { font-size: var(--t-l); line-height: 1.25; margin: 2em 0 .7em; }
.faq dd { margin: 0; }

.sources { margin-top: 3.5em; padding-top: 1.2rem; border-top: 1px solid var(--filet); font-size: var(--t-s); color: var(--nuit-doux); }
.sources h2 { font-size: var(--t-s); font-style: italic; margin: 0 0 .8rem; color: var(--nuit-doux); }
.sources ul { padding-left: 0; list-style: none; }
.contenu .sources li::marker { content: none; }
.contenu .sources ul { padding-left: 0; }
.sources li { margin-bottom: .5em; }

.cadre-article {
  margin-top: 3.5em; padding-top: 1.4rem; border-top: 1px solid var(--filet);
  font-size: var(--t-s); color: var(--nuit-doux); line-height: 1.55;
}
.cadre-article p { margin-bottom: .8em; }

@media (max-width: 1099px) {
  .article-corps .contenu { grid-column: 4 / span 8; }
}
@media (max-width: 899px) {
  .article-tete .etiquette, .article-tete h1, .article-tete .infos { grid-column: 1 / -1; }
  .article-tete .etiquette { margin-bottom: 1.75rem; }
  .article-corps .marge-gauche { display: none; }
  .article-corps .contenu { grid-column: 1 / -1; }
}

/* Suite de lecture */
.suite-lecture { padding-block: clamp(4rem, 10vh, 7rem); border-top: 1px solid var(--filet); }
.suite-lecture h2 { grid-column: 1 / span 3; font-size: var(--t-l); font-style: italic; line-height: 1.2; }
.suite-lecture .liste-articles { grid-column: 4 / span 8; }
.precedent-suivant { grid-column: 4 / span 8; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gouttiere); margin-top: 3rem; font-size: var(--t-s); }
.precedent-suivant a { color: var(--nuit); text-decoration: none; display: block; }
.precedent-suivant a span { display: block; font-style: italic; color: var(--nuit-doux); margin-bottom: .3rem; }
.precedent-suivant a strong { font-weight: 400; font-size: var(--t-m); line-height: 1.25; display: block; transition: color .5s ease; }
.precedent-suivant a:hover strong { color: var(--azurin); }
.precedent-suivant .suivant { text-align: right; grid-column: 2; }
@media (max-width: 899px) {
  .suite-lecture h2, .suite-lecture .liste-articles, .precedent-suivant { grid-column: 1 / -1; }
  .suite-lecture h2 { margin-bottom: 1.5rem; }
  .precedent-suivant { grid-template-columns: 1fr; }
  .precedent-suivant .suivant { grid-column: 1; text-align: left; }
}

/* --------------------------------------------------------------------------
   Invitation au rendez-vous (bas des pages intérieures)
   -------------------------------------------------------------------------- */
.invitation { padding-block: clamp(5rem, 13vh, 9rem); border-top: 1px solid var(--filet); }
.invitation .enonce { grid-column: 4 / span 8; font-size: var(--t-xxl); line-height: 1.06; letter-spacing: -.015em; max-width: 14em; }
.invitation .details { grid-column: 4 / span 6; margin-top: 2.5rem; }
@media (max-width: 899px) { .invitation .enonce, .invitation .details { grid-column: 1 / -1; } }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.pied { background: var(--nuit); color: var(--blanc); padding-block: clamp(4rem, 10vh, 7rem) 2.5rem; }
.pied a { color: var(--blanc); text-decoration-color: rgba(255,255,255,.35); }
.pied a:hover { text-decoration-color: var(--blanc); }
.pied .phrase { grid-column: 1 / span 7; font-size: var(--t-xl); line-height: 1.15; font-style: italic; max-width: 16em; }
.pied .coord { grid-column: 9 / span 4; font-size: var(--t-m); line-height: 1.5; }
.pied .coord p { margin-bottom: .2em; }
.pied .liens { grid-column: 1 / -1; margin-top: clamp(4rem, 9vh, 6rem); padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.18); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; font-size: var(--t-s); }
.pied .liens ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
.pied .liens a { text-decoration: none; }
.pied .avertissement { grid-column: 1 / -1; margin-top: 1.5rem; font-size: var(--t-xs); line-height: 1.6; color: rgba(255,255,255,.62); max-width: 52em; }
@media (max-width: 899px) {
  .pied .phrase, .pied .coord { grid-column: 1 / -1; }
  .pied .coord { margin-top: 2.5rem; }
}

/* --------------------------------------------------------------------------
   Mouvement réduit
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .apparition { opacity: 1; transform: none; }
}

@media print {
  .entete, .pied, .suite-lecture, .invitation, .marge-gauche { display: none; }
  .article-corps .contenu { grid-column: 1 / -1; }
  a { color: inherit; }
}

/* --------------------------------------------------------------------------
   Accueil — avis Google (défilement horizontal)
   -------------------------------------------------------------------------- */
.temoignages { padding-bottom: clamp(5rem, 13vh, 9rem); }
.temoignages-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: clamp(2rem, 5vh, 3rem); }
.temoignages-tete h2 { font-size: var(--t-xl); line-height: 1.08; letter-spacing: -.01em; max-width: 16em; }
.defilement-commandes { display: flex; gap: .5rem; }
.defiler {
  width: 3rem; height: 3rem; display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 1px solid var(--filet); color: var(--nuit);
  transition: border-color .5s ease, color .5s ease, opacity .5s ease;
}
.defiler svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.2; }
.defiler:hover:not(:disabled) { border-color: var(--azurin); color: var(--azurin); }
.defiler:disabled { opacity: .3; cursor: default; }

.defilement {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--gouttiere)) / 3);
  gap: var(--gouttiere);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.defilement::-webkit-scrollbar { display: none; }
.defilement:focus-visible { outline: 1px solid var(--azurin); outline-offset: 6px; }
.avis { scroll-snap-align: start; border-top: 1px solid var(--nuit); padding-top: 1.4rem; }
.avis figure { margin: 0; display: flex; flex-direction: column; height: 100%; }
.etoiles { display: flex; gap: .2rem; margin: 0 0 1.1rem; color: var(--azurin); }
.etoiles svg { width: .95rem; height: .95rem; fill: currentColor; }
.avis blockquote { margin: 0 0 1.5rem; font-size: var(--t-m); line-height: 1.5; flex: 1; }
.avis figcaption { font-size: var(--t-s); line-height: 1.4; }
.avis-nom { display: block; }
.avis-date { display: block; font-style: italic; color: var(--nuit-doux); }

@media (max-width: 1099px) { .defilement { grid-auto-columns: calc((100% - var(--gouttiere)) / 2); } }
@media (max-width: 899px) {
  .temoignages-tete { flex-direction: column; align-items: flex-start; }
  .defilement { grid-auto-columns: 84%; }
}

/* Ouverture desktop : hauteur d'écran, textes posés en bas, portrait derrière */
@media (min-width: 900px) {
  .ouverture { padding-bottom: clamp(4rem, 10vh, 7rem); }
  .ouverture > .cadre {
    position: relative;
    height: clamp(560px, calc(100svh - 6.75rem), 1000px);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding-bottom: clamp(2rem, 6.5vh, 4.25rem);
  }
  .ouverture-portrait {
    position: absolute; top: 0; left: 0; right: 0; margin: 0 auto;
    width: max-content; max-width: 100%; height: calc(100% - clamp(2rem, 6.5vh, 4.25rem) - 2rem);
  }
  .ouverture-portrait img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
  .ouverture-textes { margin-top: 0; }
}

/* Invitations « Prendre le temps d’en parler » : fond bleu clair */
.chapitre.chapitre-rendez-vous, .invitation { background: var(--bleu-clair); border-top: 0; }
.chapitre-rendez-vous ::selection, .invitation ::selection { background: var(--nuit); color: var(--blanc); }