/* ROC Handbook. Feuille unique, ecrite pour ce site.
   Champ lexical : la reliure. Prefixe de classe : rel-
   Aucune requete externe : aucune police distante, aucun CDN, aucun script.
   Rayon zero, aucune ombre, aucun degrade. Un seul ornement : la bande de
   3 px en tranchefile, en tete de page et en tete de chaque emboitage.
   Lecture calee a GAUCHE sur 66ch ; rail collant de 240 px a DROITE des 1080 px. */

:root {
  /* toile de reliure, gardes, tanin du cuir, nerfs du dos, tranchefile */
  --toile: #f1eff5;
  --garde: #faf9fc;
  --garde-teinte: #e7e1ee;
  --tanin: #2a2430;
  --tanin-doux: #5a5265;
  --cuir: #5b2f63;
  --cuir-vif: #7b3f85;
  --nerf: #d7d1e0;
  --tranchefile: #274d52;

  --titrage: "Big Caslon", "Baskerville Old Face", "Sitka Display", "Bitstream Charter", "Liberation Serif", serif;
  --courante: Geneva, Tahoma, "DejaVu Sans", Verdana, "Liberation Sans", sans-serif;
  --cotation: "Cascadia Mono", "Andale Mono", "Nimbus Mono PS", "Liberation Mono", monospace;

  --etui: 1148px;
  --mesure: 66ch;
  --gouttiere: 240px;
  --entre-deux: 3rem;
  --filet: 1px;
  --bande: 3px;
  --marge-bloc: 2.5rem;
}

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

html { color-scheme: light; }

body {
  margin: 0;
  background: var(--toile);
  color: var(--tanin);
  font: 400 18px/1.75 var(--courante);
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

.rel-reliure { display: flow-root; }

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

a { color: var(--cuir); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover, a:focus { color: var(--cuir-vif); }

:focus-visible {
  outline: 2px solid var(--cuir-vif);
  outline-offset: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--titrage);
  font-weight: 400;
  color: var(--tanin);
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.95rem, 1.3rem + 2.4vw, 3rem); line-height: 1.12; letter-spacing: -0.005em; }
h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); line-height: 1.25; margin-top: 2.2rem; }
h3 { font-size: 1.15rem; line-height: 1.35; margin-top: 1.8rem; }
h4 { font-size: 1rem; line-height: 1.4; }

p, ul, ol, dl, table { margin: 0 0 1.25rem; }
ul, ol { padding-left: 1.35rem; }
li { margin-bottom: 0.45rem; }
strong { font-weight: 700; }

/* ---------------------------------------------------------------- etui */
/* L'etui tient la largeur : rien ne deborde de lui, jamais. */
.rel-etui {
  width: 100%;
  max-width: var(--etui);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* ------------------------------------------------------- tranchefile */
/* L'ornement unique du site. Rien d'autre ne decore. */
.rel-tranchefile {
  height: var(--bande);
  background: var(--tranchefile);
}

/* ------------------------------------------------------------- coiffe */
.rel-coiffe {
  background: var(--garde);
  border-bottom: var(--filet) solid var(--nerf);
}
.rel-coiffe__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.5rem;
  padding-block: 0.7rem;
}
.rel-coiffe__mark {
  font-family: var(--titrage);
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--cuir);
  text-decoration: none;
  white-space: nowrap;
}
.rel-coiffe__mark b { font-weight: 400; letter-spacing: 0.02em; }
.rel-coiffe__mark span {
  display: block;
  font-family: var(--courante);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--tanin-doux);
  letter-spacing: 0;
  white-space: normal;
}
.rel-coiffe nav { margin-left: auto; }
.rel-coiffe ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rel-onglet {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--tanin);
  text-decoration: none;
  border-bottom: var(--bande) solid transparent;
}
.rel-onglet:hover, .rel-onglet:focus { color: var(--cuir-vif); border-bottom-color: var(--nerf); }
.rel-onglet[aria-current="page"] { color: var(--cuir); border-bottom-color: var(--tranchefile); }

.rel-saut {
  position: absolute;
  left: -9999px;
}
.rel-saut:focus {
  position: static;
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--tranchefile);
  color: #ffffff;
}

/* --------------------------------------------------------------- mors */
.rel-mors {
  padding-block: 0.9rem 0;
  font-size: 0.875rem;
  color: var(--tanin-doux);
}
.rel-mors ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rel-mors li + li::before { content: "\203A"; margin-right: 0.35rem; color: var(--nerf); }
.rel-mors a { color: var(--tanin-doux); }
.rel-mors [aria-current="page"] { color: var(--tanin); }

/* -------------------------------------------------------------- garde */
/* Le panneau de garde : la reponse AVANT toute proposition. Ce n'est ni
   un heros photo ni un heros typographique : c'est un aplat a angles vifs
   qui porte la reponse directe et l'estampille de verification. */
.rel-garde {
  background: var(--garde-teinte);
  border-block: var(--filet) solid var(--nerf);
  margin-top: 1rem;
  padding-block: 1.35rem 1.3rem;
}
.rel-garde--tete { margin-top: 0; }
.rel-garde__mesure { max-width: 62ch; }
.rel-chasse {
  margin: 0 0 0.55rem;
  font-family: var(--cotation);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tranchefile);
}
.rel-garde h1 { margin-bottom: 0.5rem; }
.rel-garde__reponse {
  font-size: 1.125rem;
  line-height: 1.55;
  margin-bottom: 0.8rem;
}
.rel-signet {
  display: inline-block;
  margin: 0;
  padding: 0.3rem 0.6rem;
  background: var(--tranchefile);
  color: #ffffff;
  font-family: var(--cotation);
  font-size: 0.8125rem;
  line-height: 1.45;
  letter-spacing: 0.02em;
}

/* ----------------------------------------------------------- tomaison */
/* La bande numerotee : trois etapes de la carte du parcours, en clair,
   dans le panneau de garde de l'accueil et en tete de la carte. */
.rel-tomaison {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 0.95rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.rel-tomaison li {
  margin: 0;
  padding-top: 0.5rem;
  border-top: var(--bande) solid var(--tranchefile);
}
.rel-tomaison b {
  display: block;
  font-family: var(--cotation);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tranchefile);
  margin-bottom: 0.15rem;
}
.rel-tomaison span { display: block; font-size: 0.9375rem; line-height: 1.55; }

/* ---------------------------------------------------------- charniere */
/* La charniere articule la colonne de lecture et le rail. Une seule
   colonne sous 1080 px ; le rail passe alors en tete, replie. */
.rel-charniere {
  display: block;
  padding-block: 1.75rem 2.75rem;
}
.rel-justification {
  max-width: var(--mesure);
}
.rel-justification > :first-child { margin-top: 0; }

.rel-gouttiere {
  margin: 0 0 2rem;
  padding: 0;
  border-top: var(--filet) solid var(--nerf);
  border-bottom: var(--filet) solid var(--nerf);
}
.rel-gouttiere__titre {
  margin: 0;
  font-family: var(--cotation);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tranchefile);
  padding-block: 0.7rem 0.35rem;
}
.rel-gouttiere ul {
  margin: 0 0 0.9rem;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.rel-gouttiere li { margin-bottom: 0.4rem; }
.rel-gouttiere a { color: var(--tanin); }
.rel-gouttiere a:hover, .rel-gouttiere a:focus { color: var(--cuir-vif); }

/* -------------------------------------------------------------- nerf */
.rel-nerf {
  height: 0;
  margin: 2.25rem 0;
  border: 0;
  border-top: var(--filet) solid var(--nerf);
}

/* ----------------------------------------------------------- couture */
/* LA SIGNATURE DU MEDIA. Sous toute affirmation de droit et tout chiffre :
   la source, la section ou le chapitre, la version consultee, la date de
   lecture. Un filet, une chasse fixe, rien d'autre. */
.rel-couture {
  margin: -0.35rem 0 1.5rem;
  padding-top: 0.55rem;
  border-top: var(--filet) solid var(--nerf);
  font-family: var(--cotation);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--tanin-doux);
}
.rel-couture a { color: var(--tanin-doux); }
.rel-couture a:hover, .rel-couture a:focus { color: var(--cuir-vif); }

/* --------------------------------------------------------- feuillure */
.rel-feuillure {
  margin: 1.75rem 0;
  padding: 1.1rem 1.25rem;
  background: var(--garde);
  border-left: var(--bande) solid var(--tranchefile);
  border-top: var(--filet) solid var(--nerf);
  border-right: var(--filet) solid var(--nerf);
  border-bottom: var(--filet) solid var(--nerf);
}
.rel-feuillure > :last-child { margin-bottom: 0; }
.rel-feuillure h3 { margin-top: 0; }

/* ---------------------------------------------------------- pliure */
/* Une pliure est une bande de page : un intitule, une phrase, une grille. */
.rel-pliure { padding-block: 1.5rem 2.25rem; }
.rel-pliure--teinte { background: var(--garde); border-block: var(--filet) solid var(--nerf); }
.rel-pliure__tete { max-width: 62ch; margin-bottom: 1rem; }
.rel-pliure__tete h2 { margin-top: 0; margin-bottom: 0.4em; }
.rel-pliure__tete p { margin-bottom: 0; color: var(--tanin-doux); }

.rel-serie {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* -------------------------------------------------------- emboitage */
/* L'emboitage remplace la carte : un bloc autonome, coiffe de sa bande de
   3 px, avec son emplacement d'image. Le lien se pose sur le titre, sur
   deux a six mots, jamais sur le bloc entier. */
.rel-emboitage {
  margin: 0;
  background: var(--garde);
  border: var(--filet) solid var(--nerf);
  border-top: var(--bande) solid var(--tranchefile);
  display: flex;
  flex-direction: column;
}
.rel-emboitage__vue {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--garde-teinte);
  border-bottom: var(--filet) solid var(--nerf);
}
.rel-emboitage__corps { padding: 1rem 1.15rem 1.15rem; }

/* Les six portes sont un emboitage COUCHE : la vignette a gauche, le nom de la
   rubrique a droite. C'est la regle qui prime sur l'accueil : un acheteur de
   lien doit LIRE les rubriques sans derouler, pas seulement en voir le haut. */
.rel-serie--portes .rel-emboitage__vue {
  aspect-ratio: 3 / 2;
  border-bottom: var(--filet) solid var(--nerf);
}
.rel-emboitage__titre {
  font-size: 1.1875rem;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}
.rel-emboitage__titre a { text-decoration-thickness: 1px; }
.rel-emboitage__note { margin: 0; font-size: 0.9375rem; line-height: 1.6; }
.rel-emboitage__cote {
  margin: 0.7rem 0 0;
  font-family: var(--cotation);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--tanin-doux);
}

/* --------------------------------------------------------- brochage */
/* Le registre date : la date en gouttiere a gauche, le texte a droite.
   Ni grille de vignettes, ni journal deux colonnes. */
.rel-brochage {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--filet) solid var(--nerf);
}
.rel-cousu {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem 1.75rem;
  margin: 0;
  padding: 1rem 0 1.15rem;
  border-bottom: var(--filet) solid var(--nerf);
}
.rel-cousu__date {
  margin: 0;
  font-family: var(--cotation);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--tranchefile);
}
.rel-cousu__titre {
  font-family: var(--titrage);
  font-size: 1.0625rem;
  line-height: 1.3;
  margin: 0 0 0.35rem;
}
.rel-cousu__corps { margin: 0; font-size: 0.9375rem; line-height: 1.65; }
.rel-cousu__corps + .rel-couture { margin-top: 0.6rem; }

/* -------------------------------------------------------- depliant */
/* La carte du parcours. Le tableau defile dans SON conteneur ; le corps de
   la page ne defile jamais horizontalement, a aucune largeur. */
.rel-depliant {
  margin: 1.5rem 0;
  overflow-x: auto;
  border: var(--filet) solid var(--nerf);
  background: var(--garde);
  -webkit-overflow-scrolling: touch;
}
.rel-depliant:focus-visible { outline: 2px solid var(--cuir-vif); outline-offset: 2px; }
.rel-depliant table {
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  min-width: 68rem;
  font-size: 0.9375rem;
  line-height: 1.55;
}
/* Largeurs tenues a la main : laissee libre, la colonne des delais tombe a un
   mot par ligne et le tableau devient illisible avant d'etre faux. */
.rel-depliant col:nth-child(1) { width: 9%; }
.rel-depliant col:nth-child(2) { width: 20%; }
.rel-depliant col:nth-child(3) { width: 9%; }
.rel-depliant col:nth-child(4) { width: 23%; }
.rel-depliant col:nth-child(5) { width: 10%; }
.rel-depliant col:nth-child(6) { width: 11%; }
.rel-depliant col:nth-child(7) { width: 18%; }
.rel-depliant caption {
  caption-side: top;
  text-align: left;
  padding: 0.85rem 1rem;
  font-family: var(--cotation);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--tanin-doux);
  border-bottom: var(--filet) solid var(--nerf);
}
.rel-depliant th, .rel-depliant td {
  padding: 0.55rem 0.8rem;
  text-align: left;
  vertical-align: top;
  border-bottom: var(--filet) solid var(--nerf);
  border-right: var(--filet) solid var(--nerf);
}
.rel-depliant thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--tranchefile);
  color: #ffffff;
  font-family: var(--cotation);
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.rel-depliant tbody th {
  font-family: var(--courante);
  font-weight: 700;
  font-size: 0.9375rem;
  background: var(--garde-teinte);
}
.rel-depliant td:last-child, .rel-depliant th:last-child { border-right: 0; }
.rel-depliant tbody tr:last-child th, .rel-depliant tbody tr:last-child td { border-bottom: 0; }
.rel-depliant__acte { font-family: var(--cotation); font-size: 0.8125rem; }

/* -------------------------------------------------------- collation */
.rel-collation {
  margin: 2.5rem 0 0;
  padding: 1.2rem 0 0;
  border-top: var(--bande) solid var(--tranchefile);
}
.rel-collation h2 { margin-top: 0; font-size: 1.1875rem; }
.rel-collation ul { margin: 0; padding-left: 1.2rem; }
.rel-collation li { font-size: 0.9375rem; line-height: 1.6; }

/* ---------------------------------------------------------- reclame */
/* La reclame : le mot que l'imprimeur portait au bas de la page pour
   annoncer la suivante. Ici, les pages a lire ensuite, en phrase. */
.rel-reclame {
  margin: 2.5rem 0 0;
  padding: 1.2rem 1.25rem;
  background: var(--garde-teinte);
  border-top: var(--bande) solid var(--tranchefile);
}
.rel-reclame h2 { margin: 0 0 0.75rem; font-size: 1.1875rem; }
.rel-reclame ul { margin: 0; padding-left: 1.2rem; }
.rel-reclame li { font-size: 0.9375rem; line-height: 1.65; }

/* -------------------------------------------------------------- dos */
.rel-dos {
  margin-top: 3rem;
  background: var(--garde);
  border-top: var(--bande) solid var(--tranchefile);
  padding-block: 2rem 1.5rem;
  font-size: 0.9375rem;
}
.rel-dos__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}
.rel-dos h2 {
  font-family: var(--cotation);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tranchefile);
  margin: 0 0 0.6rem;
}
.rel-dos ul { margin: 0; padding: 0; list-style: none; }
.rel-dos li { margin-bottom: 0.4rem; line-height: 1.55; }
.rel-dos a { color: var(--tanin); }
.rel-dos a:hover, .rel-dos a:focus { color: var(--cuir-vif); }
.rel-dos__pied {
  margin: 1.75rem 0 0;
  padding-top: 1rem;
  border-top: var(--filet) solid var(--nerf);
  font-family: var(--cotation);
  font-size: 0.8125rem;
  color: var(--tanin-doux);
}

/* ------------------------------------------------------- figure page */
.rel-planche { margin: 1.75rem 0 0; }
.rel-planche img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--garde-teinte);
  border: var(--filet) solid var(--nerf);
}
.rel-planche figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--tanin-doux);
}

/* ------------------------------------------------- 600 px et au-dela */
@media (min-width: 600px) {
  .rel-etui { padding-inline: 2rem; }
  /* La planche devient une BANDE : la page est un imprime, pas un album. */
  .rel-planche img { aspect-ratio: 24 / 7; }
  .rel-serie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rel-tomaison { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
  .rel-cousu { grid-template-columns: 9.5rem minmax(0, 1fr); }
  .rel-dos__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .rel-garde { padding-block: 1.55rem 1.5rem; }
}

/* ------------------------------------------------ 900 px et au-dela */
@media (min-width: 600px) {
  .rel-serie--portes .rel-emboitage { flex-direction: row; align-items: stretch; }
  .rel-serie--portes .rel-emboitage__vue {
    width: 7.5rem;
    flex: 0 0 7.5rem;
    aspect-ratio: auto;
    align-self: stretch;
    border-bottom: 0;
    border-right: var(--filet) solid var(--nerf);
  }
  .rel-serie--portes .rel-emboitage__corps { padding: 0.85rem 1rem 0.9rem; }
  .rel-serie--portes .rel-emboitage__note {
    font-size: 0.875rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (min-width: 900px) {
  .rel-serie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ----------------------------------------------- 1080 px et au-dela */
/* La charniere s'ouvre : lecture a gauche sur 66ch, rail collant a droite.
   Le rail sert (sommaire de page et etapes de la carte), il ne decore pas. */
@media (min-width: 1080px) {
  .rel-charniere {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--gouttiere);
    gap: var(--entre-deux);
    align-items: start;
  }
  .rel-gouttiere {
    position: sticky;
    top: 1.5rem;
    margin: 0;
    border-top: var(--bande) solid var(--tranchefile);
    border-bottom: 0;
  }
  .rel-gouttiere__titre { padding-top: 0.8rem; }
}

/* ------------------------------------------------------ preferences */
@media (prefers-contrast: more) {
  :root {
    --toile: #ffffff;
    --garde: #ffffff;
    --garde-teinte: #ded5e8;
    --nerf: #6f6580;
    --tanin-doux: #3d3646;
    --filet: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
  body { background: #ffffff; font-size: 11pt; }
  .rel-coiffe nav, .rel-gouttiere, .rel-reclame, .rel-saut { display: none; }
  .rel-charniere { display: block; }
  .rel-justification { max-width: none; }
  .rel-depliant { overflow: visible; border: 1px solid #000000; }
  .rel-depliant table { min-width: 0; }
  .rel-couture { color: #000000; }
  .rel-justification a::after { content: " (" attr(href) ")"; font-family: var(--cotation); font-size: 9pt; }
}