/* ==========================================================================
   Corsaire Cook — « La Maison ouvre ses portes » — panneau éditorial V2
   Traduction fidèle de « Homepage - La Maison V2.5.dc.html » (DA verrouillée).
   Toutes les valeurs (couleurs, géométries, timings) proviennent de la V2.5.
   STAGING — ne pas publier en production sans remplacement de l'image de scène.
   ========================================================================== */

/* Le prototype V2.2 charge déjà Cormorant Garamond, EB Garamond et JetBrains
   Mono. Seule IM Fell English manque : c'est la seule famille demandée ici,
   pour ne rien charger deux fois. Si le header devait cesser de fournir les
   trois autres, les rajouter à cette URL. */
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&display=swap');

/* --------------------------------------------------------------------------
   Jetons + reset local (portée stricte : rien ne fuit hors de .cck-maison)
   -------------------------------------------------------------------------- */
.cck-maison {
  --cck-ivoire: #F5EFDF;
  --cck-encre: #1A130F;
  --cck-encre-70: #4A4038;
  --cck-cuivre: #847363;
  --cck-rouge: #8B1A1A;
  --cck-sel: #E7E3DB;
  --cck-or: #E9C98B;
  --cck-filet: rgba(132, 115, 99, .55);

  --cck-serif: 'Cormorant Garamond', Georgia, serif;
  --cck-corps: 'EB Garamond', Georgia, serif;
  --cck-fell: 'IM Fell English', Georgia, serif;
  --cck-mono: 'JetBrains Mono', ui-monospace, monospace;

  color: var(--cck-encre);
  font-family: var(--cck-corps);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

.cck-maison h2,
.cck-maison h3,
.cck-maison p { margin: 0; }

.cck-maison a {
  color: inherit;
  text-decoration: none;
}

.cck-maison a:focus-visible {
  outline: 1px solid rgba(139, 26, 26, .8);
  outline-offset: 5px;
}

.cck-maison [hidden] { display: none !important; }

/* Le header V2.2 est `position:sticky` : sans cette marge, une ancre atteinte
   depuis la scène se retrouve masquée derrière lui. Ajuster la valeur à la
   hauteur réelle du header une fois monté dans Kadence. */
.cck-maison {
  --cck-decalage-header: 100px;
}

.cck-ligne { scroll-margin-top: var(--cck-decalage-header); }

/* L'OS demande moins d'animation : les fondus sont neutralisés. Le délai de
   fermeture de 320 ms n'en fait pas partie — ce n'est pas du mouvement mais
   le temps laissé à l'utilisateur pour atteindre le cartouche. */
@media (prefers-reduced-motion: reduce) {
  .cck-maison *,
  .cck-maison *::before,
  .cck-maison *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==========================================================================
   1. LA SCÈNE
   ========================================================================== */
.cck-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 1672 / 941;
  min-height: 430px;
  overflow: hidden;
  background: #141C24;
}

/* `<picture>` est inline par défaut : sans boîte définie, le `height:100%` de
   l'image ne se résout pas. */
.cck-scene picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Servie en AVIF, repli WebP. Ratio 1672:941 — aucune autre règle à modifier
   si l'image est remplacée au même cadrage. */
.cck-scene__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
  display: block;
}

.cck-scene__voile {
  position: absolute;
  pointer-events: none;
}

.cck-scene__voile--haut-gauche {
  left: 0; top: 0;
  width: 46%; height: 48%;
  background: radial-gradient(ellipse at top left,
    rgba(16, 24, 34, .99) 0 46%,
    rgba(16, 24, 34, .82) 62%,
    rgba(16, 24, 34, 0) 84%);
}

.cck-scene__voile--haut-droit {
  right: 0; top: 0;
  width: 42%; height: 44%;
  background: radial-gradient(ellipse at top right,
    rgba(16, 24, 34, .62) 0 40%,
    rgba(16, 24, 34, 0) 82%);
}

.cck-scene__voile--bandeau {
  left: 0; right: 0; top: 0;
  height: 34%;
  background: linear-gradient(rgba(16, 24, 34, .55), rgba(16, 24, 34, 0));
}

/* --- Titre de scène ------------------------------------------------------ */
.cck-scene__titre {
  position: absolute;
  left: 50%; top: 7%;
  transform: translateX(-50%);
  width: min(92%, 900px);
  text-align: center;
  pointer-events: none;
}

.cck-scene__h {
  font-family: var(--cck-serif);
  font-weight: 600;
  line-height: 1.04;
  font-size: clamp(26px, 3.9vw, 62px);
  color: var(--cck-ivoire);
  letter-spacing: -.01em;
  text-shadow: 0 2px 22px rgba(10, 16, 24, .85), 0 1px 3px rgba(10, 16, 24, .6);
}

.cck-scene__sous-titre {
  font-family: var(--cck-fell);
  font-style: italic;
  font-size: clamp(15px, 1.9vw, 29px);
  color: var(--cck-sel);
  margin-top: 6px;
  text-shadow: 0 2px 16px rgba(10, 16, 24, .9);
}

.cck-scene__ornement {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.cck-scene__filet {
  display: block;
  width: clamp(30px, 6vw, 84px);
  height: 1px;
  background: rgba(245, 239, 223, .5);
}

.cck-scene__losange {
  display: block;
  width: 6px; height: 6px;
  transform: rotate(45deg);
  background: #C9C2B2;
}

/* --- Coordonnées --------------------------------------------------------- */
.cck-scene__coord {
  position: absolute;
  bottom: 18px;
  font-family: var(--cck-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(245, 239, 223, .72);
  text-shadow: 0 1px 6px rgba(10, 16, 24, .9);
  pointer-events: none;
}

.cck-scene__coord--gauche { left: 24px; }
.cck-scene__coord--droite { right: 24px; }

/* ==========================================================================
   2. LES QUATRE ACCÈS SUR LA FAÇADE
   Géométrie : recaler uniquement les 4 paires left/top si l'asset est recadré.
   ========================================================================== */
.cck-porte {
  position: absolute;
  transform: translateX(-50%);
  width: 7%;
  z-index: 20;
}

.cck-porte.is-open { z-index: 40; }

/* Calibré sur `scene-master-clean.png` (1672 × 941) : colonnes de fenêtres
   mesurées à x=648 et x=1034 px, étage y=404-478, rez-de-chaussée y=556-612.
   Seules ces quatre paires left/top sont à recaler si l'asset change. */
.cck-porte--iii { left: 38.8%; top: 43.1%; height: 7.4%; }
.cck-porte--iv  { left: 61.8%; top: 43.1%; height: 7.4%; }
.cck-porte--i   { left: 38.8%; top: 57.6%; height: 8.4%; }
.cck-porte--ii  { left: 61.8%; top: 57.6%; height: 8.4%; }

/* Spécificité portée à 3 classes pour passer devant `.cck-maison a:focus-visible`. */
.cck-maison .cck-porte:focus-visible {
  outline: 1px solid rgba(206, 158, 102, .9);
  outline-offset: 5px;
}

/* Habillage purement décoratif : ne doit jamais capter le pointeur.
   Le halo fait 320 % de la largeur du marqueur et débordait sur le marqueur
   de l'étage au-dessus, qui ne s'ouvrait alors plus au survol. Seuls la
   hitbox et le cartouche ouvert restent interactifs. */
.cck-porte__cadre,
.cck-porte__halo,
.cck-porte__point,
.cck-porte__plaque { pointer-events: none; }

/* Hitbox : 22 px de marge invisible sur les quatre côtés, dans le même <a>. */
.cck-porte__hitbox {
  position: absolute;
  left: -22px; right: -22px;
  top: -22px; bottom: -22px;
}

/* --- Cadre de fenêtre ---------------------------------------------------- */
.cck-porte__cadre {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 100%;
  transform: translateX(-50%);
  border: 1px solid rgba(206, 158, 102, .42);
  transition: border-color .12s ease-out;
}

.cck-porte.is-open .cck-porte__cadre { border-color: rgba(206, 158, 102, .95); }

.cck-porte__halo {
  position: absolute;
  left: 50%; top: 50%;
  width: 320%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 206, 124, .6), rgba(255, 206, 124, 0) 66%);
  opacity: .14;
  transition: opacity .12s ease-out;
}

.cck-porte--i .cck-porte__halo,
.cck-porte--ii .cck-porte__halo {
  background: radial-gradient(circle, rgba(255, 206, 124, .64), rgba(255, 206, 124, 0) 66%);
}

.cck-porte.is-open .cck-porte__halo { opacity: .9; }

.cck-porte__point {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(214, 166, 108, .5);
  transition: background .12s ease-out;
}

.cck-porte--iii .cck-porte__point { left: -3px; top: -3px; }
.cck-porte--iv .cck-porte__point  { right: -3px; top: -3px; }
.cck-porte--i .cck-porte__point   { left: -3px; bottom: -3px; }
.cck-porte--ii .cck-porte__point  { right: -3px; bottom: -3px; }

.cck-porte.is-open .cck-porte__point { background: rgba(214, 166, 108, .95); }

/* --- Plaque permanente (hors survol) ------------------------------------- */
.cck-porte__plaque {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 190%;
  padding: 8px 10px 9px;
  text-align: center;
  background: rgba(17, 29, 43, .62);
  border: 1px solid rgba(206, 158, 102, .34);
  opacity: 1;
  transition: opacity .12s ease-out;
}

.cck-porte--iii .cck-porte__plaque,
.cck-porte--iv .cck-porte__plaque { bottom: 112%; }

.cck-porte--i .cck-porte__plaque,
.cck-porte--ii .cck-porte__plaque { top: 112%; }

.cck-porte.is-open .cck-porte__plaque { opacity: 0; }

.cck-porte__plaque-num {
  display: block;
  font-family: var(--cck-serif);
  font-size: 17px;
  line-height: 1;
  color: var(--cck-or);
}

.cck-porte__plaque-verbe {
  display: block;
  font-family: var(--cck-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cck-ivoire);
  margin-top: 5px;
}

.cck-porte__plaque-territoire {
  display: block;
  font-family: var(--cck-fell);
  font-style: italic;
  font-size: 15px;
  line-height: 1.2;
  color: #E0D7C6;
  margin-top: 2px;
}

/* --- Notice éditoriale unique -------------------------------------------
   Un seul panneau stable : aucun chevauchement avec les quatre fenêtres. */
.cck-scene__notice {
  position: absolute;
  z-index: 30;
  left: 3.5%;
  top: 43%;
  width: clamp(250px, 21vw, 340px);
  padding: clamp(18px, 2vw, 28px);
  color: #F2EEE6;
  background: linear-gradient(145deg, rgba(13, 24, 36, .94), rgba(13, 24, 36, .78));
  border: 1px solid rgba(206, 158, 102, .5);
  box-shadow: 0 22px 55px rgba(5, 10, 16, .42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: none;
}

.cck-scene__notice-kicker,
.cck-scene__notice-verbe,
.cck-scene__notice-territoire,
.cck-scene__notice-filet,
.cck-scene__notice-desc { display: block; }

.cck-scene__notice-kicker,
.cck-scene__notice-verbe,
.cck-scene__notice-lien {
  font-family: var(--cck-mono);
  text-transform: uppercase;
  letter-spacing: .2em;
}

.cck-scene__notice-kicker { font-size: 9px; color: var(--cck-or); }
.cck-scene__notice-verbe { margin-top: 9px; font-size: 12px; color: var(--cck-ivoire); }
.cck-scene__notice-territoire {
  margin-top: 3px;
  font-family: var(--cck-fell);
  font-size: clamp(21px, 2vw, 28px);
  font-style: italic;
  line-height: 1.08;
  color: #EFE4CF;
}
.cck-scene__notice-filet { height: 1px; margin: 14px 0 12px; background: rgba(206, 158, 102, .42); }
.cck-scene__notice-desc { font-family: var(--cck-corps); font-size: 15px; line-height: 1.42; }
.cck-maison .cck-scene__notice-lien {
  display: inline-flex;
  gap: 10px;
  margin-top: 15px;
  font-size: 10px;
  color: #E0B87E;
  transition: color .16s ease-out, gap .16s ease-out;
}
.cck-maison .cck-scene__notice-lien:hover { color: #F4D7A6; gap: 14px; }

/* Sous 1120 px : la façade redevient décor, le registre porte tout le parcours.
   Géré en CSS (et non en JS) pour que le repli soit correct avant/sans JS. */
@media (max-width: 1119.98px) {
  .cck-porte,
  .cck-scene__notice { display: none; }
}

/* ==========================================================================
   3. MANIFESTE
   ========================================================================== */
.cck-manifeste {
  background: var(--cck-ivoire);
  background-image: repeating-linear-gradient(-38deg,
    transparent 0 34px,
    rgba(132, 115, 99, .05) 34px 35px);
  border-bottom: 1px solid rgba(132, 115, 99, .35);
}

.cck-manifeste__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(24px, 2.4vw, 36px) 32px;
  text-align: center;
}

.cck-manifeste__losange {
  display: inline-block;
  width: 7px; height: 7px;
  transform: rotate(45deg);
  background: var(--cck-cuivre);
}

.cck-manifeste__texte {
  max-width: 56ch;
  margin: 16px auto 0;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.55;
  color: var(--cck-encre);
  text-wrap: pretty;
}

/* Corps porte de 10 a 12 px : c'est la valeur des surtitres mono du reste du
   package (registre des acces, Cargaison, Cabinet, Registre). La signature
   cesse d'etre le plus petit texte de la page et devient lisible, alors qu'elle
   porte la formule de positionnement de la Maison. Texte, position, couleur,
   famille et interlettrage inchanges. */
.cck-manifeste__signature {
  margin-top: 14px;
  font-family: var(--cck-mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cck-cuivre);
}

/* ==========================================================================
   4. REGISTRE DES ACCÈS
   ========================================================================== */
.cck-acces { background: var(--cck-ivoire); }

.cck-acces__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(48px, 5.5vw, 84px) 32px;
}

.cck-acces__entete {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(24px, 4vw, 56px);
  flex-wrap: wrap;
}

.cck-acces__entete-gauche {
  flex: 1 1 420px;
  min-width: 280px;
}

.cck-acces__eyebrow {
  font-family: var(--cck-mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cck-cuivre);
}

.cck-acces__titre {
  font-family: var(--cck-serif);
  font-weight: 600;
  line-height: 1.04;
  font-size: clamp(30px, 4vw, 50px);
  margin-top: 14px;
}

.cck-acces__intro {
  flex: 1 1 300px;
  min-width: 250px;
  font-family: var(--cck-fell);
  font-size: 19px;
  color: var(--cck-encre-70);
  text-wrap: pretty;
}

.cck-acces__reglure {
  margin-top: clamp(30px, 3.5vw, 48px);
  height: 12px;
  border-bottom: 1px solid var(--cck-filet);
  background-image: repeating-linear-gradient(90deg,
    var(--cck-filet) 0 1px,
    transparent 1px 24px);
  background-position: bottom;
  background-size: 100% 6px;
  background-repeat: repeat-x;
}

/* --- Ligne I à IV -------------------------------------------------------- */
.cck-ligne {
  display: flex;
  gap: clamp(18px, 3vw, 44px);
  align-items: flex-start;
  flex-wrap: wrap;
  padding: clamp(24px, 2.6vw, 38px) clamp(8px, 1.5vw, 18px);
  border-bottom: 1px solid var(--cck-filet);
  position: relative;
  min-height: 64px;
}

.cck-ligne__marge {
  flex: 0 0 86px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  align-self: stretch;
}

.cck-ligne__marge::before {
  content: '';
  position: absolute;
  left: 42px;
  top: -38px;
  bottom: -38px;
  width: 1px;
  background: var(--cck-filet);
}

.cck-ligne--derniere .cck-ligne__marge::before { bottom: 0; }

.cck-ligne__num {
  font-family: var(--cck-serif);
  font-size: 37px;
  line-height: 1;
  color: var(--cck-cuivre);
  background: var(--cck-ivoire);
  padding-bottom: 9px;
  position: relative;
}

.cck-ligne__losange {
  width: 12px; height: 12px;
  transform: rotate(45deg);
  background: var(--cck-ivoire);
  border: 1px solid var(--cck-cuivre);
  position: relative;
}

.cck-ligne__corps {
  flex: 1 1 340px;
  min-width: 250px;
}

.cck-ligne__verbe {
  font-family: var(--cck-mono);
  font-size: 14px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cck-encre-70);
}

.cck-ligne__titre {
  font-family: var(--cck-serif);
  font-weight: 600;
  line-height: 1.05;
  font-size: clamp(30px, 3.4vw, 44px);
  margin: 9px 0 13px;
}

.cck-ligne__desc {
  font-size: 19px;
  color: var(--cck-encre-70);
  max-width: 46ch;
  text-wrap: pretty;
}

.cck-ligne__mots {
  font-family: var(--cck-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cck-cuivre);
  margin-top: 15px;
}

.cck-ligne__meta {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  padding-top: 6px;
}

.cck-ligne__badge {
  border: 1px solid var(--cck-filet);
  font-family: var(--cck-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cck-encre-70);
  padding: 5px 11px;
}

.cck-ligne__badge--fiction {
  border-color: var(--cck-cuivre);
  background: rgba(132, 115, 99, .1);
}

.cck-ligne__entrer {
  font-family: var(--cck-mono);
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--cck-cuivre);
  padding-bottom: 3px;
  margin-top: 5px;
}

/* --- Encart « Le cacao » ------------------------------------------------- */
.cck-cacao {
  margin-top: clamp(34px, 4vw, 56px);
  border: 1px solid var(--cck-filet);
  padding: clamp(22px, 2.8vw, 34px);
}

.cck-cacao__titre {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.cck-cacao__nom {
  font-family: var(--cck-serif);
  font-size: 26px;
  line-height: 1.1;
}

.cck-cacao__mention {
  font-family: var(--cck-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cck-cuivre);
}

/* Quatre segments équivalents, séparés par un filet — pas de fond de grille
   apparent, donc aucun aplat gris résiduel entre les cellules. */
.cck-cacao__segments {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 24px;
}

.cck-cacao__segment {
  padding: 0 clamp(14px, 1.6vw, 22px);
  border-left: 1px solid var(--cck-filet);
}

.cck-cacao__segment:first-child {
  padding-left: 0;
  border-left: 0;
}

.cck-cacao__segment:last-child { padding-right: 0; }

@media (max-width: 860px) {
  .cck-cacao__segments { grid-template-columns: 1fr; }

  .cck-cacao__segment {
    padding: 16px 0;
    border-left: 0;
    border-top: 1px solid var(--cck-filet);
  }

  .cck-cacao__segment:first-child { padding-top: 0; border-top: 0; }
  .cck-cacao__segment:last-child { padding-bottom: 0; }
}

.cck-cacao__label {
  display: block;
  font-family: var(--cck-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cck-cuivre);
}

.cck-cacao__texte {
  font-size: 16px;
  color: var(--cck-encre-70);
  margin-top: 8px;
}

/* ==========================================================================
   5. TRANSITION EXPLORER
   ========================================================================== */
.cck-transition { background: var(--cck-sel); }

/* Emprise verticale réduite de ~17 % (V1.1) pour rapprocher narrativement
   « Entrons par les archives » du Livre I. Les trois valeurs baissent
   ensemble — padding, respiration du corps, texte — pour garder le rythme. */
.cck-transition__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(36px, 3.75vw, 54px) 32px;
}

.cck-transition__entete {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.cck-transition__losange {
  display: block;
  width: 11px; height: 11px;
  transform: rotate(45deg);
  background: var(--cck-rouge);
}

.cck-transition__eyebrow {
  font-family: var(--cck-mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cck-cuivre);
}

.cck-transition__filet {
  flex: 1 1 60px;
  height: 1px;
  background: var(--cck-filet);
  min-width: 40px;
}

.cck-transition__corps { margin-top: clamp(18px, 1.9vw, 26px); }

.cck-transition__titre {
  font-family: var(--cck-serif);
  font-weight: 600;
  line-height: 1.05;
  font-size: clamp(30px, 4vw, 48px);
  max-width: 30ch;
}

.cck-transition__texte {
  font-size: 18px;
  color: var(--cck-encre-70);
  margin-top: 16px;
  max-width: 56ch;
  text-wrap: pretty;
}

.cck-transition__ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.cck-transition__cta--plein {
  background: var(--cck-rouge);
  color: var(--cck-ivoire);
  font-family: var(--cck-mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
  padding: 16px 30px;
}

.cck-transition__cta--contour {
  border: 1px solid var(--cck-cuivre);
  color: var(--cck-encre);
  font-family: var(--cck-mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
  padding: 16px 30px;
}

/* --------------------------------------------------------------------------
   Italiques d'accent (repris tels quels de la V2.5)
   -------------------------------------------------------------------------- */
.cck-it {
  font-style: italic;
  font-weight: 500;
}

.cck-it--simple { font-style: italic; }

/* ==========================================================================
   6. PREUVE 01 — LIVRE I
   Ajouté après la Maison V2.6, qui n'est pas modifiée. N'utilise que les
   jetons existants : aucune couleur, aucune fonte, aucun breakpoint de la
   Maison n'est repris ni écrasé.
   ========================================================================== */
.cck-livre { background: var(--cck-ivoire); }

.cck-livre__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(48px, 5.5vw, 84px) 32px;
}

/* Ordre du DOM = ordre mobile (label, titre, couverture, corps).
   La grille recompose le 44 / 56 en desktop sans toucher au balisage. */
.cck-livre__grille {
  display: grid;
  grid-template-columns: 44fr 56fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "visuel label"
    "visuel titre"
    "visuel corps";
  column-gap: clamp(32px, 4.5vw, 68px);
  align-items: start;
}

.cck-livre__label {
  grid-area: label;
  font-family: var(--cck-mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cck-cuivre);
}

.cck-livre__titre {
  grid-area: titre;
  font-family: var(--cck-serif);
  font-weight: 600;
  line-height: 1.04;
  font-size: clamp(34px, 4.4vw, 56px);
  margin-top: 14px;
}

/* --- Couverture ---------------------------------------------------------- */
/* La couverture descend de 26 px (V1.1) : la colonne éditoriale prend cette
   avance sur le sommet physique du livre, ce qui casse la symétrie
   « produit à gauche / fiche à droite ». Réinitialisé en colonne unique,
   plus bas, où l'ordre vertical est différent. */
.cck-livre__visuel {
  grid-area: visuel;
  margin-top: 26px;
  perspective: 1200px;
}

.cck-livre__visuel picture {
  display: block;
  transform-style: preserve-3d;
  transform-origin: center center;
  filter: drop-shadow(0 22px 44px rgba(26, 19, 15, .28));
  transition:
    transform 420ms cubic-bezier(.2, .7, .2, 1),
    filter 420ms ease;
}

.cck-livre__couverture {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  position: relative;
top: 0;
transition:
  top 300ms cubic-bezier(.2, .7, .2, 1),
  filter 300ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .cck-livre__visuel:hover .cck-livre__couverture {
    top: -12px;
    transform: translateX(-13%) !important;
    filter: drop-shadow(14px 30px 34px rgba(26, 19, 15, .38));
  }
}

@media (prefers-reduced-motion: reduce) {
  .cck-livre__visuel picture {
    transition: none;
  }
}

/* --- Corps --------------------------------------------------------------- */
.cck-livre__corps { grid-area: corps; }

.cck-livre__accroche {
  font-family: var(--cck-fell);
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.25;
  color: var(--cck-encre-70);
  margin-top: 16px;
}

.cck-livre__texte {
  font-size: 18px;
  line-height: 1.6;
  color: var(--cck-encre-70);
  max-width: 54ch;
  margin-top: 20px;
  text-wrap: pretty;
}

/* --- Les trois preuves — registre, pas cartes ---------------------------- */
.cck-livre__preuves {
  list-style: none;
  margin: clamp(28px, 3vw, 40px) 0 0;
  padding: 0;
}

.cck-livre__preuve + .cck-livre__preuve { margin-top: 22px; }

.cck-livre__preuve-entete {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cck-livre__preuve-num {
  font-family: var(--cck-serif);
  font-size: 22px;
  line-height: 1;
  color: var(--cck-cuivre);
}

.cck-livre__preuve-filet {
  flex: 1 1 auto;
  height: 1px;
  background: var(--cck-filet);
}

.cck-livre__preuve-mots {
  display: block;
  font-family: var(--cck-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cck-encre);
  margin-top: 10px;
}

.cck-livre__preuve-texte {
  font-size: 16px;
  line-height: 1.5;
  color: var(--cck-encre-70);
  max-width: 52ch;
  margin-top: 6px;
  text-wrap: pretty;
}

/* --- CTA ----------------------------------------------------------------- */
.cck-livre__cta {
  display: inline-block;
  margin-top: clamp(28px, 3vw, 38px);
  background: var(--cck-rouge);
  color: var(--cck-ivoire);
  font-family: var(--cck-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 16px 30px;
  transition: background .2s;
}

/* RESTAURATION DE CASCADE — aucun changement de direction artistique.
   Le reset local `.cck-maison a { color: inherit }` pese (0,1,1) et ecrasait
   `.cck-livre__cta` qui pese (0,1,0) : la declaration `color: var(--cck-ivoire)`
   ci-dessus n'a jamais ete appliquee, et le CTA s'affichait en encre sombre sur
   rouge sombre — 1,98:1, illisible. Seul le selecteur est requalifie (0,2,0),
   sur le modele de la regle de focus plus bas. Aucune autre propriete n'est
   touchee. Placee avant :hover pour que l'etat survol continue de l'emporter. */
.cck-maison .cck-livre__cta { color: var(--cck-ivoire); }

.cck-livre__cta[href]:hover {
  background: #7A1616;
  color: var(--cck-ivoire);
}

.cck-maison .cck-livre__cta:focus-visible {
  outline: 1px solid var(--cck-rouge);
  outline-offset: 4px;
}

.cck-livre__micro {
  font-family: var(--cck-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cck-cuivre);
  margin-top: 12px;
display: block;
}

/* --- Bascule en colonne unique -------------------------------------------
   Propre au module : ne touche ni au seuil 1120 px de la Maison ni au 860 px
   des segments cacao. */
@media (max-width: 1024px) {
  .cck-livre__grille {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "label"
      "titre"
      "visuel"
      "corps";
  }

  /* La couverture reste une vraie preuve visuelle, pas une vignette. */
  .cck-livre__visuel {
    margin-top: 30px;
    max-width: 420px;
  }

  .cck-livre__corps { margin-top: 8px; }
}

/* ==========================================================================
   7. PREUVE 02 — CARGAISON 01 · CACAO
   Bascule document → matière. Aucun jeton, aucune fonte, aucun breakpoint
   des sections validées n'est repris ni écrasé.
   ========================================================================== */
.cck-cargaison { background: var(--cck-sel); }

/* Colonne 1 : gouttière calée sur le conteneur 1200 px des sections
   précédentes, pour que le texte reste aligné avec le reste de la page.
   Colonne 3 : l'image va jusqu'au bord droit du viewport — c'est la rupture.
   Pas de `vw` ici : avec une barre de défilement, 100vw dépasse 100 % et
   provoquerait un débordement horizontal. */
.cck-cargaison__grille {
  display: grid;
  grid-template-columns:
    minmax(32px, calc((100% - 1200px) / 2 + 32px))
    minmax(0, 1fr)
    minmax(0, 1.6fr);
  align-items: center;
}

.cck-cargaison__texte {
  grid-column: 2;
  padding: clamp(56px, 6vw, 92px) clamp(28px, 3.5vw, 56px) clamp(56px, 6vw, 92px) 0;
}

.cck-cargaison__porte {
  font-family: var(--cck-mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cck-rouge);
}

.cck-cargaison__numero {
  font-family: var(--cck-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cck-cuivre);
  margin-top: 10px;
}

.cck-cargaison__titre {
  font-family: var(--cck-serif);
  font-weight: 600;
  line-height: 1;
  font-size: clamp(44px, 5.6vw, 76px);
  margin-top: 8px;
}

.cck-cargaison__phrase {
  font-family: var(--cck-fell);
  font-style: italic;
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.3;
  color: var(--cck-encre);
  margin-top: 18px;
  max-width: 24ch;
  text-wrap: pretty;
}

/* Trois repères : registre de cale, pas trois cartes. */
.cck-cargaison__reperes {
  margin: clamp(26px, 3vw, 38px) 0 0;
  border-top: 1px solid var(--cck-filet);
}

.cck-cargaison__repere {
  display: grid;
  grid-template-columns: minmax(74px, 22%) 1fr;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--cck-filet);
}

.cck-cargaison__repere dt {
  font-family: var(--cck-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cck-cuivre);
  padding-top: 3px;
}

.cck-cargaison__repere dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cck-encre-70);
  text-wrap: pretty;
}

/* --- Visuel en débord ----------------------------------------------------- */
.cck-cargaison__visuel {
  grid-column: 3;
  align-self: stretch;
  min-height: 100%;
}

.cck-cargaison__visuel picture {
  display: block;
  height: 100%;
}

.cck-cargaison__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --- Colonne unique ------------------------------------------------------
   Même seuil que le Livre I pour que les deux modules basculent ensemble.
   L'image passe en premier : c'est elle qui porte la bascule de registre. */
@media (max-width: 1024px) {
  .cck-cargaison__grille {
    grid-template-columns: 1fr;
  }

  .cck-cargaison__visuel {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 3 / 2;
  }

  .cck-cargaison__texte {
    grid-column: 1;
    grid-row: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(36px, 5vw, 56px) 32px clamp(44px, 6vw, 64px);
  }

  .cck-cargaison__phrase { max-width: 34ch; }
}

/* ==========================================================================
   8. PREUVE 03 — CHRONIQUE 01 · LA RANÇON DU CACAO
   Bascule matière → récit. Troisième forme de composition de la séquence :
   axe central, colonne unique à toutes les largeurs — d'où l'absence totale
   de breakpoint propre à ce bloc. Aucun jeton, aucune fonte, aucun breakpoint
   des sections validées n'est repris ni écrasé. Aucun JS.
   ========================================================================== */
/* AVERTISSEMENT DE SPÉCIFICITÉ — vaut pour tout le package.
   Le reset local `.cck-maison h2, .cck-maison h3, .cck-maison p { margin: 0 }`
   pèse (0,1,1). Une règle portée par une simple classe pèse (0,1,0) : elle perd.
   Conséquence : **tout `margin-top` posé sur un <p> par sa seule classe est
   inerte**, et l'espacement observé ne vient que de l'interligne.
   Sont concernés ici `__numero`, `__estampille` et `__chute` — exactement
   comme `.cck-cargaison__numero` et `.cck-cargaison__phrase` dans le module
   gelé, où le travers préexiste. Les valeurs sont conservées telles quelles :
   les rendus des deux modules ont été validés dans cet état, les rendre
   effectives changerait la mise en page (+78 px sur la Chronique à 1440).
   Pour les activer un jour, qualifier le sélecteur par l'élément —
   `.cck-chronique p.cck-chronique__chute` (0,2,1) — jamais par !important.
   Les marges de `__visuel`, `__fragment` et `__separateur` sont actives :
   ce ne sont pas des <p>. Ce sont elles qui règlent le rythme vertical. */
.cck-chronique {
  background: var(--cck-ivoire);
  scroll-margin-top: var(--cck-decalage-header);
}

.cck-chronique__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(48px, 3.4vw, 52px) 32px;
  text-align: center;
}

/* --- Entête --------------------------------------------------------------
   Mêmes corps et mêmes interlettrages que l'entête de Cargaison : c'est la
   signalétique commune des portes, elle ne doit pas varier d'un module à
   l'autre. Seul l'axe change. */
.cck-chronique__porte {
  font-family: var(--cck-mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cck-rouge);
}

.cck-chronique__numero {
  font-family: var(--cck-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cck-cuivre);
  margin-top: 10px;
}

/* Volontairement plus contenu que le titre de Cargaison (62 px contre 76) :
   ici le fragment doit peser autant que le titre, pas être écrasé par lui. */
.cck-chronique__titre {
  font-family: var(--cck-serif);
  font-weight: 600;
  line-height: 1;
  font-size: clamp(38px, 4.6vw, 62px);
  margin-top: 8px;
}

/* --- Estampille FICTION CCK ----------------------------------------------
   Marque éditoriale, pas mention légale : elle est posée avant le récit et
   se lit d'un coup d'œil. Double filet obtenu par un anneau d'ivoire
   intercalé en ombres internes — pas de pseudo-élément, pas de jeton nouveau.
   C'est le seul rouge saturé de la page : sur cette homepage, le rouge devient
   la couleur de la fiction assumée, le cuivre restant celle des métadonnées.
   Padding droit réduit de 3 px : il compense l'interlettrage traînant du
   dernier caractère, qui décentrerait le texte dans son cadre. */
.cck-chronique__estampille {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(30px, 2.4vw, 34px);
  padding: 10px 16px 10px 19px;
  font-family: var(--cck-mono);
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--cck-rouge);
  border: 1px solid var(--cck-filet);
  box-shadow:
    inset 0 0 0 3px var(--cck-ivoire),
    inset 0 0 0 4px var(--cck-filet);
}

.cck-chronique__losange {
  flex: none;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: var(--cck-rouge);
}

/* --- Planche narrative ---------------------------------------------------
   Large et basse, et nettement plus étroite que le conteneur : c'est une
   planche posée dans une page, pas un hero. Filet fin, aucune ombre portée.
   L'image est majoritairement sombre par construction — c'est voulu, et c'est
   ce qui la rend plus légère que celle de Cargaison pour le double de
   définition. */
.cck-chronique__visuel {
  max-width: 980px;
  margin: clamp(30px, 3.1vw, 44px) auto 0;
  border: 1px solid var(--cck-filet);
}

.cck-chronique__visuel picture { display: block; }

.cck-chronique__image {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Fragment ------------------------------------------------------------
   C'est lui l'élément principal du module. IM Fell English en romain :
   cette famille n'est employée qu'en italique ailleurs (phrase forte de
   Cargaison), le romain lui donne ici un usage propre sans ajouter de police.
   Largeur calée pour que les quatre phrases tiennent chacune sur une ligne en
   desktop : c'est le rythme du fragment, pas un hasard de mise en page.
   En em et non en ch : le « 0 » d'IM Fell English ne fait que 0,28 em, si bien
   qu'une largeur en ch se révèle près de deux fois trop étroite. La plus longue
   des quatre phrases mesure 21,4 em ; 22,5 em lui laisse sa ligne à toutes les
   largeurs desktop, tout en restant plus étroite que la planche. */
.cck-chronique__fragment {
  font-family: var(--cck-fell);
  font-size: clamp(23px, 2.3vw, 31px);
  line-height: 1.45;
  color: var(--cck-encre);
  max-width: 22.5em;
  margin: clamp(34px, 3.1vw, 44px) auto 0;
}

.cck-chronique__fragment p { text-wrap: pretty; }

/* .8em et non .5em : en petite largeur, deux phrases se replient sur deux
   lignes. L'écart entre phrases doit rester franchement supérieur à
   l'interligne interne (.45em), sans quoi le repli se lit comme une phrase
   nouvelle. */
.cck-chronique__fragment p + p { margin-top: .8em; }

/* Même losange que le manifeste : c'est l'unité de ponctuation de la Maison. */
.cck-chronique__separateur {
  display: block;
  width: 7px;
  height: 7px;
  margin: clamp(30px, 2.4vw, 34px) auto 0;
  transform: rotate(45deg);
  background: var(--cck-cuivre);
}

/* --- Chute ---------------------------------------------------------------
   Change de famille pour sortir du récit : Cormorant contre IM Fell. La
   première ligne ferme un régime, la seconde en ouvre un autre — d'où
   l'écart d'encre entre les deux. */
.cck-chronique__chute {
  margin-top: clamp(30px, 2.4vw, 34px);
  font-family: var(--cck-serif);
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.45;
}

.cck-chronique__chute-avant,
.cck-chronique__chute-apres { display: block; }

.cck-chronique__chute-avant { color: var(--cck-encre-70); }
.cck-chronique__chute-apres { color: var(--cck-encre); }

/* ==========================================================================
   9. PREUVE 04 — LE CABINET · PIÈCE 001
   Bascule récit → objet. Quatrième forme de composition : trois colonnes
   inégales suspendues à une réglure pleine largeur, calées en haut, aux pieds
   irréguliers. Aucun jeton, aucune fonte, aucun breakpoint des sections
   validées n'est repris ni écrasé. Aucun JS. Un seul breakpoint, 1024 px,
   celui que partagent déjà le Livre I et la Cargaison.

   Rappel de l'avertissement de spécificité posé au bloc 8 : `.cck-maison p`
   pèse (0,1,1) et neutralise tout `margin-top` porté par une simple classe sur
   un <p>. Les marges de ce bloc sont donc portées par des éléments qui n'en
   sont pas — div, figure, dl, span — ou par des sélecteurs qualifiés. Aucune
   déclaration inerte n'est ajoutée ici, et la dette existante n'est pas
   touchée.
   ========================================================================== */
.cck-cabinet { background: var(--cck-sel); }

.cck-cabinet__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(48px, 5.5vw, 84px) 32px;
}

/* Aligné à gauche dès le premier mot : c'est ici que se joue la rupture avec
   l'axe médian de la Chronique, avant même que l'image soit vue. */
.cck-cabinet__porte {
  font-family: var(--cck-mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cck-rouge);
}

/* La ligne de registre à laquelle les trois colonnes sont suspendues. */
.cck-cabinet__reglure {
  height: 1px;
  background: var(--cck-filet);
  margin-top: 16px;
}

/* `align-items: start` est le cœur de la grammaire — les colonnes démarrent
   ensemble et se terminent à des hauteurs différentes.

   PASSE V1.1 — cohésion horizontale. La piste de la planche est figée à sa
   largeur utile (416 px = image ~392 + passe-partout) au lieu d'être une
   fraction : elle ne peut donc plus s'élargir au-delà de ce que l'image
   supporte, et tout l'espace rendu profite aux deux colonnes de texte. Les
   gouttières passent de 52 à 32 px : c'est ce resserrement qui lie les trois
   pistes en une seule fiche au lieu de trois blocs juxtaposés. La désignation
   gagne assez de largeur pour que « Une pièce imaginée par la Maison. » tienne
   sur une ligne, ce qui compacte la colonne du milieu.
   La désignation est figée elle aussi, à 252 px : mesurée, sa ligne la plus
   longue fait 234 px. Une piste en fraction la rendait plus large que son
   texte et rouvrait un écart avec le relevé — exactement le défaut que cette
   passe corrige. Seule la troisième piste reste en fraction : elle absorbe la
   largeur restante et cale ses filets sur la réglure du haut.
   Les proportions restent inchangées sous 1024 px, où la grille passe en
   colonne unique et redéfinit ses propres gouttières. */
.cck-cabinet__grille {
  display: grid;
  grid-template-columns: minmax(0, 416px) minmax(0, 252px) minmax(0, 1fr);
  gap: clamp(28px, 2.2vw, 32px);
  align-items: start;
  margin-top: clamp(30px, 3.2vw, 44px);
}

/* --- Colonne 1 : la planche montée ---------------------------------------
   Passe-partout : le filet ne touche pas l'image, une réserve de sel les
   sépare. Convention de planche montée, et cela distingue ce cadre du filet
   à fleur de la Chronique. */
.cck-cabinet__planche {
  margin: 0;
  max-width: 416px;
}

.cck-cabinet__cadre {
  border: 1px solid var(--cck-filet);
  padding: 11px;
}

.cck-cabinet__cadre picture { display: block; }

.cck-cabinet__image {
  display: block;
  width: 100%;
  height: auto;
}

/* La légende est de la copy, pas une note de bas de page : c'est elle qui
   empêche de lire un rendu d'étude comme la photographie d'un objet existant. */
.cck-cabinet__legende {
  margin: 14px 0 0;
  font-family: var(--cck-mono);
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: .1em;
  color: var(--cck-cuivre);
  text-wrap: pretty;
}

/* --- Colonne 2 : la désignation ------------------------------------------
   Titre plus contenu que ceux des trois modules précédents : ici, c'est le
   relevé qui porte le module, pas la typographie de titre. */
.cck-cabinet__titre {
  font-family: var(--cck-serif);
  font-weight: 600;
  line-height: 1;
  font-size: clamp(34px, 3.4vw, 46px);
}

.cck-cabinet__phrase {
  font-family: var(--cck-corps);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.5;
  color: var(--cck-encre-70);
  text-wrap: pretty;
}

/* Les deux phrases sont portées par des <span> et non des <p> : le reset
   local neutraliserait la marge d'un <p>. Même procédé que la chute de la
   Chronique. */
.cck-cabinet__phrase span { display: block; }
.cck-cabinet__phrase span:first-child { margin-top: 18px; }
.cck-cabinet__phrase span + span { margin-top: .35em; }

/* --- Colonne 3 : le relevé -----------------------------------------------
   Seul endroit de la page où la mono porte du contenu et non une étiquette.
   Filet entre chaque entrée, y compris en pied : le registre ne se referme
   pas, il s'arrête. */
.cck-cabinet__releve {
  margin: 0;
  border-top: 1px solid var(--cck-filet);
}

.cck-cabinet__entree {
  display: grid;
  grid-template-columns: minmax(72px, 30%) 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--cck-filet);
}

.cck-cabinet__entree dt {
  font-family: var(--cck-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cck-cuivre);
  padding-top: 4px;
}

.cck-cabinet__entree dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--cck-encre);
  text-wrap: pretty;
}

/* --- Colonne unique -------------------------------------------------------
   Même seuil que le Livre I et la Cargaison : les trois modules basculent
   ensemble. L'ordre du DOM est déjà l'ordre mobile — planche, désignation,
   relevé — donc aucune réorganisation de grille n'est nécessaire.
   La planche reste petite et calée à gauche : jamais pleine largeur, sinon le
   module se transforme en bannière suivie d'un vide. Le relevé, lui, prend
   toute la largeur et devient plus lisible qu'en desktop. */
@media (max-width: 1024px) {
  .cck-cabinet__grille {
    grid-template-columns: 1fr;
    gap: clamp(26px, 4vw, 36px);
  }

  .cck-cabinet__planche { max-width: 282px; }

  .cck-cabinet__phrase span:first-child { margin-top: 14px; }
}

/* ==========================================================================
   10. CONCLUSION — LE REGISTRE
   Cinquieme et derniere forme de la sequence, et la seule SANS IMAGE : apres
   quatre demonstrations visuelles, la Maison s'adresse au visiteur. Le champ
   n'est pas une boite mais une reglure traversant le conteneur, portant
   l'action a son extremite. Aucun jeton, aucune fonte, aucun breakpoint des
   sections validees n'est repris ni ecrase. Aucun JS. Un seul breakpoint,
   1024 px, celui que partagent deja le Livre I, la Cargaison et le Cabinet.

   Rappel de l'avertissement de specificite du bloc 8 : `.cck-maison h2` et
   `.cck-maison p` pesent (0,1,1). Les marges verticales portees par des <h2>
   et des <p> sont donc ecrites ici avec un selecteur qualifie (0,2,1) pour
   etre effectives. Aucune declaration inerte n'est ajoutee, et la dette
   existante n'est pas touchee.
   ========================================================================== */
.cck-registre {
  background: var(--cck-ivoire);
  scroll-margin-top: var(--cck-decalage-header);
}

/* Padding vertical superieur a tous les autres modules : c'est la derniere
   respiration de la page, et le vide est ici le principal outil de conversion. */
.cck-registre__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(64px, 7vw, 112px) 32px;
}

/* Cuivre et non rouge, sans numero de porte : le Registre n'est pas un
   cinquieme territoire, et cela se voit avant la premiere lecture. */
.cck-registre__eyebrow {
  font-family: var(--cck-mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cck-cuivre);
}

.cck-registre h2.cck-registre__titre {
  font-family: var(--cck-serif);
  font-weight: 600;
  line-height: 1.05;
  font-size: clamp(38px, 4.4vw, 58px);
  margin-top: clamp(18px, 2vw, 26px);
}

/* Mesure etroite : c'est sa tension avec la reglure pleine largeur qui fait
   la composition. */
.cck-registre p.cck-registre__phrase {
  font-family: var(--cck-corps);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--cck-encre-70);
  max-width: 26em;
  margin-top: clamp(18px, 2vw, 24px);
  text-wrap: pretty;
}

/* --- La reglure -----------------------------------------------------------
   Le filet est porte par le CONTENEUR, pas par le champ ni par l'action.
   C'est ce qui garantit une ligne rigoureusement continue : portes par les
   deux items, les filets se decalaient de 4,79 px, l'ecart de hauteur entre
   un champ a 22 px et un label a 12,5 px alignes sur leur ligne de base. `align-items: baseline` pose le placeholder et le label sur
   cette ligne comme deux inscriptions sur un registre. */
.cck-registre__signature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 0;
  margin-top: clamp(44px, 5vw, 80px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--cck-filet);
}

/* Etiquette accessible, retiree du flux : `position: absolute` evite qu'elle
   ne devienne une piste de la grille. */
.cck-registre__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* RESTAURATION DE CASCADE — production seulement, aucun changement de design.
   `kadence/assets/css/global.min.css` stylise `input[type=email], … , textarea`
   en (0,1,1) : fond blanc, bord gris 1 px, rayon 3 px, padding .4em .5em, ombre.
   Nos regles pesaient (0,1,0) et perdaient — la reglure devenait une boite.
   Les selecteurs sont requalifies en (0,2,0), rien d'autre n'est touche. */
.cck-registre .cck-registre__champ {
  width: 100%;
  font-family: var(--cck-corps);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.4;
  color: var(--cck-encre);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 16px 0 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.cck-registre__champ::placeholder {
  color: var(--cck-cuivre);
  opacity: 1;
}

/* L'action n'est pas un bouton : pas d'aplat, pas d'angle, pas d'ombre. Elle
   est le seul texte rouge interactif de la page — l'affordance vient de cette
   unicite et de sa position en bout de ligne. */
.cck-registre__action {
  font-family: var(--cck-mono);
  font-size: 12.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cck-rouge);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 0 0 16px;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  /* Kadence impose `line-height: 20px` et une ombre transparente aux <button>.
     Les deux declarations ci-dessous les neutralisent sans requalification :
     notre classe (0,1,0) suffit face a un selecteur d'element. */
  line-height: normal;
  box-shadow: none;
}

/* Cible interactive etendue a 43 px en desktop, la boite du label n'en faisant
   que 17. Un pseudo-element absolu et transparent, et non du padding : le
   padding aurait fait grandir la piste de la grille et POUSSE LA REGLURE vers
   le bas. Ici, zero effet de mise en page — la ligne, le label et la
   composition sont rigoureusement inchanges.
   L'extension est purement verticale : l'etendre vers la gauche volerait des
   clics au bord droit du champ. En colonne unique, ce pseudo-element est
   desactive : l'action y dispose deja de ses 46 px par son propre padding. */
.cck-registre__action::after {
  content: "";
  position: absolute;
  top: -13px;
  right: 0;
  bottom: -13px;
  left: 0;
}

/* Toute la ligne s'allume quand on entre dans le champ : c'est le registre que
   l'on s'apprete a signer. Le doublage par `box-shadow` epaissit le filet sans
   provoquer le moindre decalage de mise en page. */
.cck-registre__signature:focus-within {
  border-bottom-color: var(--cck-rouge);
  box-shadow: 0 1px 0 0 var(--cck-rouge);
}

/* Kadence pose aussi `input[type=email]:focus` en (0,2,1) : ombre portee et
   changement de couleur. On egalise la specificite ; notre feuille arrivant
   apres, elle l'emporte. */
.cck-registre .cck-registre__champ:focus,
.cck-registre .cck-registre__champ:focus-visible {
  color: var(--cck-encre);
  box-shadow: none;
  outline: none;
}

.cck-registre__action:hover,
.cck-registre__action:focus-visible {
  text-decoration: underline;
  text-underline-offset: .3em;
}

/* Meme convention de focus que les liens de la Maison. */
.cck-registre__action:focus-visible {
  outline: 1px solid rgba(139, 26, 26, .8);
  outline-offset: 5px;
}

/* --- Consentement ---------------------------------------------------------
   Visuellement secondaire — corps reduit, encre attenuee — mais pleinement
   lisible : interligne large, mesure limitee, et libelle cliquable qui etend
   la cible bien au-dela de la case. */
.cck-registre__consentement {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  max-width: 64ch;
  margin-top: clamp(26px, 2.8vw, 36px);
}

.cck-registre__consentement input {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--cck-rouge);
  cursor: pointer;
}

.cck-registre__consentement label {
  font-size: 14px;
  line-height: 1.65;
  color: var(--cck-encre-70);
  cursor: pointer;
  text-wrap: pretty;
}

/* STAGING : texte simple, volontairement pas souligne — il ne doit pas
   paraitre cliquable tant qu'il ne l'est pas. Devient un <a> en production. */
.cck-registre__confidentialite { color: var(--cck-cuivre); }

/* Hauteur reservee pour que l'annonce n'induise aucun decalage. */
.cck-registre p.cck-registre__retour {
  min-height: 1.65em;
  margin-top: clamp(18px, 2vw, 24px);
  font-size: 15px;
  line-height: 1.65;
  color: var(--cck-rouge);
}

/* Derniere phrase editoriale de la homepage, franchement detachee du
   formulaire. */
.cck-registre p.cck-registre__cloture {
  margin-top: clamp(44px, 5vw, 76px);
  font-family: var(--cck-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--cck-cuivre);
}

/* --- Colonne unique -------------------------------------------------------
   Meme seuil que les trois modules precedents. La reglure occupe toute la
   mesure, l'action passe dessous, alignee a gauche et dimensionnee sur son
   texte : jamais un bouton pleine largeur. Cible tactile portee a 44 px par
   le padding, sans introduire d'aplat. */
@media (max-width: 1024px) {
  /* Le champ et l'action ne sont plus sur la meme ligne : le filet redescend
     sur le champ seul, et l'action reprend le sien, en rouge. */
  .cck-registre__signature {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 0;
    border-bottom: 0;
    box-shadow: none;
  }

  .cck-registre .cck-registre__champ {
    padding: 0 0 14px;
    border-bottom: 1px solid var(--cck-filet);
  }

  /* Le conteneur n'a plus de filet en colonne unique : sans cette remise a
     zero, son ombre de doublage tracerait un trait rouge parasite sous le
     CTA au focus. La regle :focus-within du desktop pese (0,2,0) et survit
     a la requete media. */
  .cck-registre__signature:focus-within { box-shadow: none; }

  /* (0,3,0) : doit l'emporter sur la regle `:focus` (0,2,1) plus haut, qui
     neutralise l'ombre de Kadence. Sans cela, le doublage rouge du filet
     mobile disparaitrait. */
  .cck-registre .cck-registre__signature:focus-within .cck-registre__champ {
    border-bottom-color: var(--cck-rouge);
    box-shadow: 0 1px 0 0 var(--cck-rouge);
  }

  .cck-registre__action {
    justify-self: start;
    width: max-content;
    margin-top: 22px;
    padding: 14px 2px;
    border-bottom: 1px solid var(--cck-rouge);
  }

  .cck-registre__action::after { content: none; }
}
/* Correction centrage et espacement du manifeste */
.cck-maison .cck-manifeste__texte {
  margin: 16px auto 0;
}

.cck-maison .cck-manifeste__signature {
  margin: 24px auto 0;
}
.hero .lead {
  line-height: 1.7;
}

.hero .lead-suite {
  display: block;
  margin-top: 12px;
}
/* Aération éditoriale — section Livre I */
.cck-maison .cck-livre__titre {
  margin-top: 18px;
}

.cck-maison .cck-livre__accroche {
  margin-top: 22px;
}

.cck-maison .cck-livre__texte {
  margin-top: 24px;
  line-height: 1.72;
}
/* Espace sous le bouton du Livre I */
.cck-maison .cck-livre__micro {
  margin-top: 16px;
}
/* Espacement du statut Fiction CCK */
.cck-maison .cck-chronique__estampille {
  margin-top: clamp(28px, 2.4vw, 34px);
}
/* Chute de la chronique — composition plus naturelle */
.cck-maison .cck-chronique__chute {
  margin-top: 26px;
  line-height: 1.35;
}

.cck-chronique__chute-avant,
.cck-chronique__chute-apres {
  display: inline;
}
/* Chute harmonisée avec le fragment */
.cck-maison .cck-chronique__chute {
  margin-top: 26px;
  font-family: var(--cck-fell);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.4;
  color: var(--cck-encre-70);
}

.cck-chronique__chute-avant,
.cck-chronique__chute-apres {
  display: inline;
  color: inherit;
}
/* Alignement supérieur des deux colonnes du hero */
.hero .hero-grid {
  align-items: start;
}
/* Première phrase du hero sur une seule ligne en desktop */
.hero .lead-intro {
  display: block;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .hero .lead-intro {
    white-space: normal;
  }
}
/* Respiration de la transition vers les archives */
.cck-maison .cck-transition__texte {
  margin-top: 24px;
  line-height: 1.65;
}
/* Zoom matière — insigne */
.cck-cabinet__cadre {
  overflow: hidden;
  cursor: zoom-in;
}

.cck-cabinet__cadre picture {
  overflow: hidden;
}

.cck-cabinet__image {
  --cck-zoom-x: 50%;
  --cck-zoom-y: 50%;

  transform: scale(1);
  transform-origin: var(--cck-zoom-x) var(--cck-zoom-y);
  transition: transform 320ms cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .cck-cabinet__cadre:hover .cck-cabinet__image {
    transform: scale(1.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cck-cabinet__image {
    transition: none;
  }

  .cck-cabinet__cadre:hover .cck-cabinet__image {
    transform: none;
  }
}

/* ==========================================================================
   V4 — AJUSTEMENTS MOBILES CONSOLIDES
   Audit visuel 390 x 844. Ces regles restent strictement sous 760 px afin de
   conserver sans alteration la composition desktop validee.
   ========================================================================== */
@media (max-width: 760px) {
  /* Hero : une seule ligne de contexte et aucun faux CTA sans destination. */
  .hero .meta > span:nth-child(2),
  .hero .cta .btn-2 {
    display: none;
  }

  .principes > div {
    font-size: 15px;
    line-height: 1.55;
  }

  /* Fin du manifeste et introduction des quatre acces. */
  .cck-manifeste__inner {
    padding-bottom: 20px;
  }

  .cck-acces__inner {
    padding-top: 38px;
    padding-bottom: 44px;
  }

  .cck-acces__reglure {
    margin-top: 24px;
  }

  .cck-ligne {
    padding-top: 26px;
    padding-bottom: 30px;
  }

  .cck-ligne__corps {
    min-width: 0;
  }

  .cck-ligne__desc {
    max-width: none;
    line-height: 1.6;
  }

  .cck-ligne__meta {
    padding-top: 8px;
    margin-bottom: 4px;
  }

  /* Transition : phrase italique posee sur sa propre ligne. */
  .cck-transition__inner {
    padding-top: 42px;
    padding-bottom: 36px;
  }

  .cck-transition__titre {
    line-height: 1.18;
  }

  .cck-transition__titre .cck-it {
    display: block;
    margin-top: 6px;
  }

  .cck-maison .cck-transition__texte {
    margin-top: 20px;
    line-height: 1.7;
  }

  /* Livre I : rythme resserre et micro-mention maintenue sur une ligne. */
  .cck-livre__inner {
    padding-bottom: 28px;
  }

  .cck-livre__visuel {
    margin-top: 38px;
  }

  .cck-maison .cck-livre__accroche {
    line-height: 1.4;
  }

  .cck-livre__preuves {
    margin-top: 36px;
  }

  .cck-livre__preuve + .cck-livre__preuve {
    margin-top: 28px;
  }

  .cck-livre__cta {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }

  .cck-maison .cck-livre__micro {
    margin-top: 18px;
    font-size: 9.8px;
    letter-spacing: .1em;
    white-space: nowrap;
  }

  /* Cargaison : davantage de largeur utile pour les descriptions. */
  .cck-cargaison__texte {
    padding-top: 36px;
  }

  .cck-cargaison p.cck-cargaison__numero {
    margin-top: 8px;
  }

  .cck-cargaison p.cck-cargaison__phrase {
    margin-top: 14px;
  }

  .cck-cargaison__reperes {
    margin-top: 30px;
  }

  .cck-cargaison__repere {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 16px;
  }

  .cck-cargaison__repere dd {
    font-size: 15px;
    line-height: 1.55;
  }

  /* Chronique : conserve le souffle narratif sans etirer la page. */
  .cck-chronique__inner {
    padding-top: 38px;
    padding-bottom: 38px;
  }

  .cck-maison .cck-chronique__estampille {
    margin-top: 22px;
  }

  .cck-chronique__fragment p + p {
    margin-top: .6em;
  }

  /* Cabinet : image conservee, legende renforcee, zoom neutralise au tactile. */
  .cck-cabinet__inner {
    padding-top: 38px;
    padding-bottom: 40px;
  }

  .cck-cabinet__grille {
    gap: 20px;
  }

  .cck-cabinet__legende {
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .06em;
  }

  .cck-cabinet__cadre {
    cursor: default;
  }

  .cck-cabinet__image,
  .cck-cabinet__cadre:hover .cck-cabinet__image {
    transform: none;
  }

  /* Registre : suppression du vide technique reserve au message de retour. */
  .cck-registre__inner {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .cck-registre__signature {
    margin-top: 32px;
  }

  .cck-registre p.cck-registre__retour:empty {
    min-height: 0;
    margin-top: 0;
  }

  .cck-registre p.cck-registre__cloture {
    margin-top: 34px;
  }

  /* Footer : groupes legerement rapproches et marge laterale regularisee. */
  footer .wrap {
    padding-left: 26px;
    padding-right: 26px;
  }

  footer .f-main {
    row-gap: 28px;
  }
}