/* ===========================================================
   Dr Rachel Ferrere — direction « magazine »
   Palette : blanc rosé / nuit prune / framboise / pêche
   Typo    : Instrument Serif (titrage) + Archivo (le reste)
   =========================================================== */

:root {
  --blanc:      #FAF6F6;
  --blanc-pur:  #FFFFFF;
  --rose-pale:  #F7E5E2;
  --peche:      #EFC5C0;
  --framboise:  #BE2F5A;
  --prune:      #241A21;
  --nuit:       #150E13;
  --gris:       #6E5B62;

  --marge: clamp(1.15rem, 4vw, 3.5rem);
  --souffle: clamp(4.5rem, 11vw, 11rem);
}

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

body {
  margin: 0;
  background: var(--blanc);
  color: var(--prune);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: clamp(1rem, 0.96rem + 0.22vw, 1.09rem);
  line-height: 1.62;
  font-weight: 380;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

:focus-visible { outline: 2px solid var(--framboise); outline-offset: 4px; }

.evitement { position: absolute; left: -9999px; background: var(--prune); color: var(--blanc); padding: .8rem 1.2rem; z-index: 200; }
.evitement:focus { left: 1rem; top: 1rem; }

/* ---------- ossature ---------- */

.cadre { padding-inline: var(--marge); }

.pleine {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

section { position: relative; }

/* ---------- micro-typographie ---------- */

.micro {
  font-family: "Archivo", sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  line-height: 1.2;
}

.micro--framboise { color: var(--framboise); }
.micro--gris { color: var(--gris); }

/* ---------- titrage ---------- */

.deploie {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.022em;
  margin: 0;
}

.deploie em { font-style: italic; }

.geant   { font-size: clamp(3.2rem, 9.5vw, 8.5rem); }
.grand   { font-size: clamp(2.6rem, 6.4vw, 5.6rem); }
.moyen   { font-size: clamp(2rem, 4.2vw, 3.6rem); }
.petit   { font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.05; }

.plomb {
  font-size: clamp(1.12rem, 1.5vw, 1.375rem);
  line-height: 1.5;
  font-weight: 380;
  max-width: 40ch;
}

p { max-width: 64ch; }

/* ---------- bandeau supérieur ---------- */

.rubans {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid rgba(36, 26, 33, 0.16);
  flex-wrap: wrap;
}

.rubans nav ul { display: flex; gap: clamp(.9rem, 2.2vw, 2rem); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.rubans nav a { text-decoration: none; color: var(--prune); padding-bottom: 2px; border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; }
.rubans nav a:hover, .rubans nav a[aria-current="page"] { color: var(--framboise); border-bottom-color: var(--framboise); }

/* ---------- bloc-titre (signature) ---------- */

.blocTitre { padding-top: clamp(1.5rem, 3vw, 2.75rem); padding-bottom: clamp(1rem, 2vw, 1.75rem); }

.nom {
  font-family: "Instrument Serif", serif;
  font-size: clamp(3.4rem, 15.2vw, 15rem);
  line-height: 0.82;
  letter-spacing: -0.038em;
  margin: 0;
  text-transform: none;
  display: block;
}

.nom em { font-style: italic; color: var(--framboise); }

.sousNom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: clamp(1rem, 2vw, 1.6rem);
  padding-top: .9rem;
  border-top: 1.5px solid var(--prune);
}

/* ---------- une (cover story) ---------- */

.une {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: end;
  margin-top: clamp(1.5rem, 4vw, 3.5rem);
}

.une__image {
  grid-column: 6 / -1;
  grid-row: 1;
  position: relative;
  margin-right: calc(50% - 50vw);
}

.une__image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; }

.une__titre {
  grid-column: 1 / 7;
  grid-row: 1;
  z-index: 2;
  padding-bottom: clamp(1.5rem, 4vw, 3.5rem);
  padding-right: 1rem;
  mix-blend-mode: normal;
}

.une__titre h1 { color: var(--prune); }
.une__titre h1 em { color: var(--framboise); }

.une__eti {
  display: inline-block;
  background: var(--framboise);
  color: var(--blanc);
  padding: .45rem .85rem .4rem;
  margin-bottom: 1.4rem;
}

@media (max-width: 900px) {
  .une { display: block; }
  .une__image { margin-inline: calc(50% - 50vw); }
  .une__image img { aspect-ratio: 3 / 4; }
  .une__titre { padding: 2rem 0 0; }
}

/* ---------- chapô en colonnes ---------- */

.introduction {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-block: var(--souffle);
  align-items: start;
}

.introduction .plomb { font-family: "Instrument Serif", serif; font-size: clamp(1.6rem, 2.9vw, 2.5rem); line-height: 1.18; letter-spacing: -0.015em; max-width: 22ch; }

.lettrine::first-letter {
  font-family: "Instrument Serif", serif;
  font-size: 3.6em;
  line-height: 0.78;
  float: left;
  padding: 0.08em 0.12em 0 0;
  color: var(--framboise);
}

/* ---------- index des domaines ---------- */

.sommaire { background: var(--prune); color: var(--blanc); padding-block: var(--souffle); }

.sommaire__tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sommaire__tete h2 { color: var(--blanc); }

.rubrique {
  display: grid;
  grid-template-columns: clamp(3.5rem, 7vw, 7rem) minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid rgba(250, 246, 246, 0.22);
  align-items: start;
}
.rubrique:last-child { border-bottom: 1px solid rgba(250, 246, 246, 0.22); }

.rubrique__no { font-family: "Instrument Serif", serif; font-style: italic; font-size: clamp(1.8rem, 3.4vw, 3rem); color: var(--peche); line-height: 1; }
.rubrique h3 { margin: 0; color: var(--blanc); }
.rubrique p { margin: 0; color: rgba(250, 246, 246, 0.74); font-size: 0.98rem; max-width: 52ch; }

@media (max-width: 780px) {
  .rubrique { grid-template-columns: 3rem 1fr; }
  .rubrique p { grid-column: 2; margin-top: .75rem; }
}

/* ---------- double page ouvrage ---------- */

.ouvrageSpread { background: var(--framboise); color: var(--blanc); padding-block: var(--souffle); }
.ouvrageSpread h2, .ouvrageSpread .micro { color: var(--blanc); }

.ouvrageSpread__grille {
  display: grid;
  grid-template-columns: minmax(0, 0.66fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.ouvrageSpread img { width: 100%; box-shadow: 0 40px 70px -40px rgba(21, 14, 19, 0.85); }
.ouvrageSpread p { color: rgba(255, 255, 255, 0.9); }

.fiche { list-style: none; margin: 2rem 0; padding: 0; }
.fiche li { padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.32); font-size: .87rem; letter-spacing: .04em; max-width: 32rem; }

@media (max-width: 820px) {
  .ouvrageSpread__grille { grid-template-columns: 1fr; }
  .ouvrageSpread img { max-width: 300px; }
}

/* ---------- boutons / liens ---------- */

.bouton {
  display: inline-block;
  font-family: "Archivo", sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 2.3rem;
  border: 1.5px solid currentColor;
  transition: background .25s, color .25s;
  cursor: pointer;
  background: transparent;
}
.bouton:hover { background: currentColor; }
.bouton:hover span { color: var(--framboise); }
.bouton span { transition: color .25s; }

.bouton--sombre:hover span { color: var(--blanc); }

.fleche { text-decoration: none; font-family: "Archivo", sans-serif; font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; border-bottom: 1.5px solid var(--framboise); padding-bottom: .35rem; display: inline-block; }
.fleche:hover { color: var(--framboise); }

/* ---------- bande image + texte ---------- */

.diptyque {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5.5rem);
  padding-block: var(--souffle);
}

.diptyque__image { margin-left: calc(50% - 50vw); }
.diptyque__image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.diptyque--inverse .diptyque__image { margin-left: 0; margin-right: calc(50% - 50vw); order: 2; }

@media (max-width: 860px) {
  .diptyque { grid-template-columns: 1fr; }
  .diptyque__image, .diptyque--inverse .diptyque__image { margin-inline: calc(50% - 50vw); order: 0; }
}

/* ---------- exergue ---------- */

.exergue { background: var(--peche); padding-block: var(--souffle); }

.exergue blockquote {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: clamp(2rem, 5.6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 18ch;
  color: var(--prune);
}

.exergue__grille { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: end; }
.exergue__grille img { width: 100%; max-height: 460px; object-fit: cover; }
@media (max-width: 820px) { .exergue__grille { grid-template-columns: 1fr; } }

/* ---------- pied ---------- */

.pied { background: var(--nuit); color: var(--blanc); padding-block: clamp(3.5rem, 8vw, 6rem) 2.5rem; }
.pied a { color: inherit; text-decoration: none; }
.pied a:hover { color: var(--peche); }

.pied__nom { font-family: "Instrument Serif", serif; font-size: clamp(2.4rem, 9vw, 7rem); line-height: .85; letter-spacing: -.035em; margin: 0 0 clamp(2rem,5vw,3.5rem); }
.pied__nom em { font-style: italic; color: var(--framboise); }

.pied__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2.25rem; }
.pied ul { list-style: none; margin: .9rem 0 0; padding: 0; }
.pied li { padding: .28rem 0; font-size: .93rem; }
.pied__bas { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 1.25rem; border-top: 1px solid rgba(250,246,246,.2); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: rgba(250,246,246,.6); }

/* ---------- pages intérieures ---------- */

.entete-page { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); }
.entete-page h1 { margin-bottom: 1.75rem; }

.corps { max-width: 68ch; }
.corps > * + * { margin-top: 1.3rem; }
.corps h2 { margin-top: clamp(3rem, 6vw, 4.5rem); }

.colonnes { columns: 2; column-gap: clamp(2rem, 4vw, 3.5rem); }
.colonnes p { max-width: none; }
@media (max-width: 760px) { .colonnes { columns: 1; } }

.bandeauImage { margin-block: clamp(3rem, 7vw, 5.5rem); }
.bandeauImage img { width: 100%; max-height: 68vh; object-fit: cover; }
.bandeauImage figcaption { padding-top: .85rem; padding-inline: var(--marge); }

/* ---------- bibliographie ---------- */

.biblio { margin-top: 2rem; }

.biblio__ligne {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2.5rem);
  padding-block: 1.15rem;
  border-top: 1px solid rgba(36,26,33,.15);
  align-items: baseline;
}
.biblio__ligne:last-child { border-bottom: 1px solid rgba(36,26,33,.15); }

.biblio__an { font-family: "Instrument Serif", serif; font-style: italic; font-size: 1.35rem; color: var(--framboise); line-height: 1; }
.biblio__ref { margin: 0; font-size: .96rem; line-height: 1.5; max-width: 62ch; }
.biblio__ref cite { font-family: "Instrument Serif", serif; font-style: italic; font-size: 1.1em; }
.biblio__ou { display: block; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); margin-top: .45rem; }
.biblio__ref a { border-bottom: 1px solid var(--peche); text-decoration: none; }
.biblio__ref a:hover { border-bottom-color: var(--framboise); }

@media (max-width: 620px) {
  .biblio__ligne { grid-template-columns: 1fr; gap: .3rem; }
}

/* ---------- formulaire ---------- */

.formulaire { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.champ { display: block; margin-bottom: 1.6rem; }
.champ span { display: block; margin-bottom: .55rem; }
.champ input, .champ textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--prune);
  background: transparent; border: none; border-bottom: 1.5px solid rgba(36,26,33,.3);
  padding: .65rem 0; border-radius: 0;
}
.champ input:focus, .champ textarea:focus { border-bottom-color: var(--framboise); outline: none; }
.champ textarea { min-height: 8.5rem; resize: vertical; }

/* ---------- apparitions ---------- */

.monte { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.22,.7,.3,1), transform .9s cubic-bezier(.22,.7,.3,1); }
.monte.vu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .monte { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; }
}

/* ===========================================================
   Traitement photographique — noir et blanc
   =========================================================== */

.duo { position: relative; overflow: hidden; isolation: isolate; }

.duo img { filter: grayscale(1) contrast(1.09) brightness(1.03); }

/* la couverture du livre garde ses couleurs d'origine */
.sansTraitement img { filter: none; }

/* ---------- correctifs de cadrage ---------- */

.une__image img { aspect-ratio: 5 / 4; object-position: 58% 42%; }

/* photo très verticale : on l'affiche entière, la figure épouse l'image */
.exergue__grille figure.duo {
  display: inline-block;
  max-width: 100%;
  margin-left: auto;
  background: transparent;
}
.exergue__grille figure.duo img {
  max-height: 620px;
  width: auto;
  max-width: 100%;
}
.exergue__grille { justify-items: end; }

.diptyque__image img { aspect-ratio: 5 / 6; object-position: 50% 28%; }

/* ---------- portrait d'accompagnement ---------- */

.portraitIntro { max-width: 420px; }
.portraitIntro img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 55% 40%; }

/* ---------- la une en format paysage ---------- */
.une__image { align-self: center; }
@media (min-width: 901px) {
  .une { align-items: center; }
  .une__image { grid-column: 7 / -1; margin-right: 0; }
  .une__titre { grid-column: 1 / 7; padding-bottom: 0; }
}

/* ---------- exergue centré ---------- */
.exergue--centre { text-align: center; display: flex; flex-direction: column; align-items: center; }
.exergue--centre blockquote { max-width: 22ch; margin-inline: auto; }
.exergue--centre p { max-width: 46ch; margin-inline: auto; }
.exergue--centre p:last-of-type { margin-top: 2rem; }
.exergue--centre figure { margin: clamp(2.5rem, 6vw, 4rem) 0 0; max-width: 100%; }
.exergue--centre figure img { max-height: 620px; width: auto; max-width: 100%; margin-inline: auto; }

/* ===========================================================
   Carrousel de retours
   =========================================================== */

.retours { background: var(--prune); color: var(--blanc); padding-block: var(--souffle); overflow: hidden; }
.retours h2 { color: var(--blanc); }

.retours__tete {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.carrousel { position: relative; }

.carrousel__piste {
  display: flex;
  transition: transform .75s cubic-bezier(.5,0,.2,1);
  will-change: transform;
}

.carrousel__item {
  flex: 0 0 100%;
  padding-right: clamp(1rem, 4vw, 4rem);
  box-sizing: border-box;
}

@media (min-width: 900px) { .carrousel__item { flex-basis: 50%; } }

.retour__marque {
  font-family: "Instrument Serif", serif;
  font-size: 4rem; line-height: .6; color: var(--framboise);
  display: block; margin-bottom: 1rem;
}

.retour__texte {
  font-family: "Instrument Serif", serif;
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  line-height: 1.28; letter-spacing: -.01em;
  color: var(--blanc); margin: 0; max-width: 32ch;
}

.retour__source {
  margin-top: 1.75rem; padding-top: 1rem;
  border-top: 1px solid rgba(250,246,246,.28);
  color: var(--peche); max-width: 32ch;
}
.retour__source span { display: block; color: rgba(250,246,246,.62); margin-top: .35rem; letter-spacing: .12em; }

.carrousel__barre {
  display: flex; align-items: center; gap: 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem); flex-wrap: wrap;
}

.carrousel__points { display: flex; gap: .6rem; }

.carrousel__point {
  width: 30px; height: 2px; padding: 0;
  background: rgba(250,246,246,.3);
  border: none; cursor: pointer;
  transition: background .3s;
}
.carrousel__point[aria-selected="true"] { background: var(--framboise); }

.carrousel__fleches { display: flex; gap: .5rem; margin-left: auto; }

.carrousel__fleche {
  width: 44px; height: 44px;
  background: transparent; color: var(--blanc);
  border: 1px solid rgba(250,246,246,.35);
  border-radius: 50%; cursor: pointer;
  font-size: 1rem; line-height: 1;
  display: grid; place-items: center;
  transition: background .25s, color .25s, border-color .25s;
}
.carrousel__fleche:hover { background: var(--blanc); color: var(--prune); border-color: var(--blanc); }

.aRemplir { outline: 1px dashed var(--framboise); outline-offset: 10px; }

/* ===========================================================
   Réseaux
   =========================================================== */

.reseaux { display: flex; gap: .75rem; margin-top: 1.1rem; }

.reseaux a {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid rgba(250,246,246,.32);
  border-radius: 50%;
  color: var(--blanc);
  transition: background .25s, color .25s, border-color .25s;
}
.reseaux a:hover { background: var(--blanc); color: var(--nuit); border-color: var(--blanc); }
.reseaux svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.reseaux a[href="#"] { opacity: .35; }

.retour__cat { margin: 0 0 1rem; }
.retour__texte { font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.32; max-width: 34ch; }
.carrousel__barre { align-items: flex-end; }
.carrousel__fleches { margin-left: auto; }

/* photo de colloque (quasi carrée) : cadrage sur le visage */
.diptyque--inverse .diptyque__image img { object-position: 30% 30%; aspect-ratio: 1 / 1; }

/* réseaux sous le titre de la une (sur fond clair) */
.reseaux--une { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.reseaux--une a { color: var(--prune); border-color: rgba(36,26,33,.28); }
.reseaux--une a:hover { background: var(--framboise); color: var(--blanc); border-color: var(--framboise); }

/* actions de l'ouvrage */
.ouvrageSpread__actions { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.25rem); flex-wrap: wrap; }
.fleche--clair { color: var(--blanc); border-bottom-color: var(--blanc); }
.fleche--clair:hover { color: var(--peche); border-bottom-color: var(--peche); }

/* pochette de podcast : plus petite, abaissée, alignée à droite */
.diptyque__image--pochette { margin-inline: 0 !important; align-self: end; justify-self: end; }
.diptyque__image--pochette img {
  aspect-ratio: 1 / 1; object-fit: cover; filter: none;
  border-radius: 6px;
  box-shadow: 0 24px 50px -32px rgba(21,14,19,.7);
  max-width: 360px;
  margin-top: clamp(2rem, 5vw, 4.5rem);
  margin-left: auto;
}
@media (max-width: 860px) {
  .diptyque__image--pochette img { max-width: 260px; margin-top: 0; margin-inline: 0; }
}

/* ---------- podcast : pochette + bouton groupés ---------- */
.podcast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding-block: var(--souffle);
}
.podcast__ecoute { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.podcast__ecoute img {
  width: 300px; max-width: 100%;
  aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 24px 50px -32px rgba(21,14,19,.7);
}
.podcast__ecoute .bouton { text-align: center; }
@media (max-width: 780px) {
  .podcast { grid-template-columns: 1fr; }
  .podcast__ecoute img { width: 240px; }
}

/* affiliations discrètes */
.affiliations {
  margin-top: 2rem;
  color: var(--gris);
  letter-spacing: .12em;
  line-height: 1.9;
  border-left: 2px solid var(--peche);
  padding-left: 1.1rem;
}