@charset "utf-8";

/* Louvenia, feuille de style unique.
   Vocabulaire de la maison : registre de sorties, souche, talon, colonnage,
   fiche article, etiquette, bordereau. Colonnes de journal separees par des
   filets fins, dents de ticket sur les separateurs, flottement lent et
   continu des seuls elements decoratifs. Mode clair integral. */

:root {
  --blanc: #FFFFFF;
  --myosotis-pale: #ECF2FB;
  --surface: #F7FAFE;
  --encre: #17233F;
  --encre-douce: #4E5C7B;
  --paille: #D5BE24;
  --paille-sombre: #C4AE1B;
  --paille-texte: #1E2438;
  --myosotis: #3F72B8;
  --myosotis-sombre: #2F5A94;
  --bordure: #C9D9EF;
  --bordure-forte: #A9C2E2;

  --titre: "Josefin Sans", "Trebuchet MS", "Segoe UI", sans-serif;
  --courant: "Lora", "Iowan Old Style", Georgia, serif;
  --mesure: "Unna", "Palatino Linotype", "Book Antiqua", serif;

  --souche: 1180px;
  --gouttiere: 34px;
  --dent: 14px;
  --entete-haut: 76px;
  --entete-court: 62px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete-haut) + 18px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--courant);
  font-size: 1.05rem;
  line-height: 1.72;
  font-weight: 400;
}

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

a { color: var(--myosotis-sombre); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--encre); text-decoration-color: var(--paille); }

:focus-visible {
  outline: 3px solid var(--myosotis);
  outline-offset: 2px;
  border-radius: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.18;
  color: var(--encre);
  margin: 0 0 0.6em;
}

h1 { font-size: 3.1rem; }
h2 { font-size: 2.05rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.05rem; letter-spacing: 0.04em; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; color: var(--encre); }

.lecture { max-width: 62ch; }
.doux { color: var(--encre-douce); }
.menu-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------
   1. Surtitres, filets, dents de ticket
   --------------------------------------------------------------- */

.surtitre {
  font-family: var(--mesure);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--myosotis-sombre);
  display: block;
  margin: 0 0 0.9rem;
}

.surtitre::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 1px;
  background: var(--paille);
  vertical-align: 0.28em;
  margin-right: 10px;
}

.filet-double {
  border: 0;
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  height: 3px;
  margin: 1.1rem 0 1.3rem;
  max-width: 96px;
}

.filet-page {
  border: 0;
  border-top: 1px solid var(--bordure);
  margin: 0;
}

/* Motif signature : dents de ticket. Un bloc de 14 pixels ferme chaque bande
   comme le talon detachable d un carnet a souches. */
.talon {
  height: var(--dent);
  background-image: radial-gradient(circle 7px at 7px 0, transparent 7px, var(--bordure) 7px);
  background-size: 22px var(--dent);
  background-repeat: repeat-x;
  background-position: 0 0;
  animation: derive-talon 14s ease-in-out infinite alternate;
}

.talon--paille {
  background-image: radial-gradient(circle 7px at 7px 0, transparent 7px, var(--paille) 7px);
}

.talon--myosotis {
  background-image: radial-gradient(circle 7px at 7px 0, transparent 7px, var(--myosotis) 7px);
}

.talon--retourne { transform: scaleY(-1); }

@keyframes derive-talon {
  from { background-position: 0 0; }
  to { background-position: 6px 0; }
}

/* ---------------------------------------------------------------
   2. Colonnage de journal
   --------------------------------------------------------------- */

.souche {
  width: min(100% - 2.4rem, var(--souche));
  margin-inline: auto;
}

.colonnage {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gouttiere);
  row-gap: 2.4rem;
}

.colonnage--filets > * { position: relative; }

.colonnage--filets > * + *::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: calc(var(--gouttiere) / -2);
  width: 1px;
  background: var(--bordure);
}

.tiers { grid-column: span 4; }
.quart { grid-column: span 3; }
.demi { grid-column: span 6; }
.sept { grid-column: span 7; }
.cinq { grid-column: span 5; }
.pleine { grid-column: 1 / -1; }

.bande { padding: 5.2rem 0 4.6rem; position: relative; }
.bande--myosotis { background: var(--myosotis-pale); }
.bande--surface { background: var(--surface); }
.bande--serree { padding: 3.4rem 0 3rem; }

.bande__coiffe { max-width: 46rem; margin-bottom: 3rem; }
.bande__coiffe--large { max-width: 58rem; }

/* ---------------------------------------------------------------
   3. Boutons
   --------------------------------------------------------------- */

.bouton-raphia,
.bouton-filet {
  display: inline-block;
  font-family: var(--titre);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 15px 30px;
  border-radius: 2px 2px 0 2px;
  cursor: pointer;
  position: relative;
  transition: background-color 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.bouton-raphia {
  background: var(--paille);
  color: var(--paille-texte);
  border: 1px solid var(--paille);
  box-shadow: none;
}

.bouton-raphia:hover {
  background: var(--paille-sombre);
  border-color: var(--paille-sombre);
  color: var(--paille-texte);
}

.bouton-raphia::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 4px;
  opacity: 0;
  background-image: radial-gradient(circle 4px at 4px 4px, var(--blanc) 4px, transparent 4px);
  background-size: 22px 4px;
  background-repeat: repeat-x;
  transition: opacity 0.18s ease;
}

.bouton-raphia:hover::after { opacity: 1; }

.bouton-filet {
  background: transparent;
  color: var(--encre);
  border: 1px solid var(--bordure-forte);
  box-shadow: inset 0 0 0 3px var(--blanc), inset 0 0 0 4px var(--bordure);
}

.bouton-filet:hover {
  border-color: var(--myosotis);
  box-shadow: inset 0 0 0 3px var(--blanc), inset 0 0 0 4px var(--myosotis);
  transform: translateX(2px);
  color: var(--encre);
}

.rangee-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 1.8rem;
}

/* ---------------------------------------------------------------
   4. En tete
   --------------------------------------------------------------- */

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--encre);
  color: var(--blanc);
  padding: 12px 20px;
  z-index: 60;
  font-family: var(--titre);
}

.evitement:focus { left: 8px; top: 8px; }

.entete {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--entete-haut);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--bordure);
  z-index: 50;
  transition: height 0.22s ease;
}

.entete__rang {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
}

.entete__frise {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 6px;
  opacity: 0;
  background-image: radial-gradient(circle 3px at 3px 0, transparent 3px, var(--bordure) 3px);
  background-size: 12px 6px;
  background-repeat: repeat-x;
  transition: opacity 0.22s ease;
  pointer-events: none;
}

.entete.est-glissee { height: var(--entete-court); }
.entete.est-glissee .entete__frise { opacity: 1; }

.marque {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--encre);
}

.marque__mot {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.24rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.marque__sceau { width: 38px; height: 38px; flex: 0 0 38px; }
.marque__arche { animation: flotte-arche 11s ease-in-out infinite alternate; transform-origin: center; }

@keyframes flotte-arche {
  from { transform: translateY(0); }
  to { transform: translateY(-2px); }
}

.nav-souche { display: flex; align-items: center; gap: 1.5rem; }

.nav-souche__lien {
  font-family: var(--titre);
  font-size: 0.94rem;
  letter-spacing: 0.05em;
  color: var(--encre);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}

.nav-souche__lien:hover { border-bottom-color: var(--paille); color: var(--encre); }

.ouvre-panneau {
  display: none;
  background: var(--blanc);
  border: 1px solid var(--bordure-forte);
  border-radius: 2px 2px 0 2px;
  padding: 9px 14px;
  font-family: var(--titre);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--encre);
  cursor: pointer;
}

.panneau {
  position: fixed;
  inset: 0;
  background: var(--blanc);
  z-index: 70;
  padding: 26px 24px 40px;
  overflow-y: auto;
}

.panneau[hidden] { display: none; }

.panneau__rang {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.6rem;
}

.panneau__ferme {
  background: transparent;
  border: 1px solid var(--bordure-forte);
  border-radius: 2px;
  padding: 9px 14px;
  font-family: var(--titre);
  letter-spacing: 0.06em;
  cursor: pointer;
  color: var(--encre);
}

.panneau__liste { list-style: none; margin: 0; padding: 0; }

.panneau__liste li { border-bottom: 1px solid var(--bordure); }

.panneau__liste a {
  display: block;
  padding: 15px 0;
  font-family: var(--titre);
  font-size: 1.18rem;
  letter-spacing: 0.05em;
  color: var(--encre);
  text-decoration: none;
}

/* ---------------------------------------------------------------
   5. Hero, deux colonnes inegales
   --------------------------------------------------------------- */

.registre-tete {
  padding: calc(var(--entete-haut) + 4.2rem) 0 0;
  background:
    linear-gradient(180deg, var(--blanc) 0%, var(--blanc) 58%, var(--surface) 58%, var(--surface) 100%);
}

.registre-tete__grille {
  display: grid;
  grid-template-columns: 7fr 5fr;
  column-gap: calc(var(--gouttiere) * 1.5);
  align-items: start;
}

.registre-tete__texte { position: relative; padding-right: calc(var(--gouttiere) * 0.75); }

.registre-tete__texte::after {
  content: "";
  position: absolute;
  right: 0;
  top: 6px;
  bottom: 2.2rem;
  width: 1px;
  background: var(--bordure);
}

.registre-tete h1 { margin-bottom: 1.1rem; }

.chapo {
  font-size: 1.16rem;
  color: var(--encre-douce);
  max-width: 40ch;
}

.reassurance {
  margin-top: 2.4rem;
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  padding: 1.1rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
}

.reassurance__poste { display: flex; flex-direction: column; }

.reassurance__valeur {
  font-family: var(--mesure);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--encre);
}

.reassurance__mot {
  font-size: 0.82rem;
  color: var(--encre-douce);
  letter-spacing: 0.02em;
  margin-top: 6px;
  max-width: 20ch;
}

.registre-tete__visuel { position: relative; padding-bottom: 3.2rem; }

.pastille-etat {
  position: absolute;
  z-index: 2;
  font-family: var(--mesure);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  color: var(--encre);
  padding: 7px 14px;
  border-radius: 2px 2px 0 2px;
  box-shadow: 0 6px 18px rgba(23, 35, 63, 0.07);
}

.pastille-etat--reserve { left: -26px; top: 16%; animation: flottement 9s ease-in-out infinite alternate; }
.pastille-etat--prepare { right: -18px; top: 46%; animation: flottement 9s 3s ease-in-out infinite alternate; }
.pastille-etat--rendu { left: 6%; bottom: 2.4rem; animation: flottement 9s 6s ease-in-out infinite alternate; }

.pastille-etat span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--paille);
  margin-right: 8px;
}

.pastille-etat--prepare span { background: var(--myosotis); }
.pastille-etat--rendu span { background: var(--bordure-forte); }

@keyframes flottement {
  from { transform: translateY(0); }
  to { transform: translateY(-8px); }
}

/* ---------------------------------------------------------------
   6. Cadres photographiques
   --------------------------------------------------------------- */

.cadre-photo {
  position: relative;
  background: var(--blanc);
  padding: 10px;
  border: 1px solid var(--bordure);
  border-radius: 3px 3px 0 3px;
}

.cadre-photo img { border-radius: 2px 2px 0 2px; }

.cadre-photo__etiquette {
  position: absolute;
  right: -10px;
  bottom: 22px;
  background: var(--blanc);
  border: 1px solid var(--paille);
  border-left: 4px solid var(--paille);
  color: var(--paille-texte);
  font-family: var(--mesure);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  padding: 8px 14px;
  z-index: 3;
}

.cadre-photo--gauche .cadre-photo__etiquette { right: auto; left: -10px; border-left: 1px solid var(--paille); border-right: 4px solid var(--paille); }

.cadre-photo__voile {
  position: absolute;
  inset: 10px;
  background: var(--myosotis);
  opacity: 0.06;
  mix-blend-mode: multiply;
  pointer-events: none;
  border-radius: 2px 2px 0 2px;
}

/* ---------------------------------------------------------------
   7. Bande des pertes, trois colonnes de journal
   --------------------------------------------------------------- */

.perte { position: relative; }

.perte__rang {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 0.7rem;
}

.perte__montant {
  font-family: var(--mesure);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--encre);
}

.perte__unite {
  font-family: var(--mesure);
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--myosotis-sombre);
}

.perte h3 { margin-bottom: 0.5rem; }
.perte p { font-size: 1rem; color: var(--encre-douce); }

.encart-terrain {
  margin-top: 3.4rem;
  display: grid;
  grid-template-columns: 5fr 7fr;
  column-gap: calc(var(--gouttiere) * 1.4);
  align-items: center;
}

.encart-terrain__mot { border-left: 1px solid var(--bordure); padding-left: calc(var(--gouttiere) * 0.7); }

.citation-marge {
  font-family: var(--mesure);
  font-style: italic;
  font-size: 1.24rem;
  line-height: 1.6;
  color: var(--encre);
  margin: 0 0 1.1rem;
}

/* ---------------------------------------------------------------
   8. Quatre temps
   --------------------------------------------------------------- */

.temps__numero {
  font-family: var(--mesure);
  font-weight: 700;
  font-size: 2.9rem;
  line-height: 1;
  color: var(--paille);
  display: block;
  margin-bottom: 0.4rem;
}

.temps h3 { margin-bottom: 0.55rem; }
.temps p { font-size: 0.99rem; color: var(--encre-douce); }

.temps__delai {
  display: inline-block;
  margin-top: 0.9rem;
  font-family: var(--mesure);
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  color: var(--myosotis-sombre);
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  padding: 5px 0;
}

/* ---------------------------------------------------------------
   9. Fiches article
   --------------------------------------------------------------- */

.fiche {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 3px 3px 0 3px;
  padding: 26px 24px 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.bande--surface .fiche { background: var(--blanc); }

.fiche__ref {
  font-family: var(--mesure);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--myosotis-sombre);
}

.fiche h3 { margin: 0.5rem 0 0; font-size: 1.22rem; }

.fiche__filet {
  border: 0;
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  height: 3px;
  margin: 0.9rem 0 1rem;
}

.fiche p { font-size: 0.99rem; color: var(--encre-douce); }

.fiche__talon {
  margin: 1.4rem -24px 0;
  height: var(--dent);
  background-image: radial-gradient(circle 7px at 7px 14px, transparent 7px, var(--bordure) 7px);
  background-size: 22px var(--dent);
  background-repeat: repeat-x;
  animation: derive-talon 14s ease-in-out infinite alternate;
}

/* ---------------------------------------------------------------
   10. Gains
   --------------------------------------------------------------- */

.gain {
  border-top: 1px solid var(--bordure);
  padding-top: 1.2rem;
}

.gain__valeur {
  font-family: var(--mesure);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--encre);
  display: block;
}

.gain h3 { font-size: 1.12rem; margin: 0.6rem 0 0.4rem; }
.gain p { font-size: 0.97rem; color: var(--encre-douce); }

.debordement {
  position: relative;
  margin-top: 3.6rem;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 3px 3px 0 3px;
  padding: 2.2rem 2.4rem 2.4rem;
  width: calc(100% + 3.2rem);
  margin-left: -1.6rem;
}

.debordement h3 { margin-bottom: 0.8rem; }

/* ---------------------------------------------------------------
   11. Paroles de loueuses et compteur
   --------------------------------------------------------------- */

.parole {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 3px 3px 0 3px;
  padding: 26px 24px 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.parole blockquote {
  margin: 0;
  font-size: 1rem;
  color: var(--encre);
}

.parole__ouverture {
  font-family: var(--mesure);
  font-size: 2.4rem;
  line-height: 0.6;
  color: var(--paille);
  display: block;
  margin-bottom: 0.6rem;
}

.parole figcaption {
  margin-top: auto;
  padding-top: 1.2rem;
  font-family: var(--mesure);
  font-size: 0.9rem;
  color: var(--encre-douce);
}

.parole figcaption b {
  display: block;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: var(--encre);
}

.parole__talon {
  margin: 1.2rem -24px 0;
  height: var(--dent);
  background-image: radial-gradient(circle 7px at 7px 14px, transparent 7px, var(--bordure) 7px);
  background-size: 22px var(--dent);
  background-repeat: repeat-x;
  animation: derive-talon 14s ease-in-out infinite alternate;
}

.compteur {
  margin-top: 3.4rem;
  border-top: 1px solid var(--bordure-forte);
  border-bottom: 1px solid var(--bordure-forte);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.compteur__poste {
  padding: 1.6rem 1.2rem;
  border-left: 1px solid var(--bordure);
  text-align: left;
}

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

.compteur__valeur {
  font-family: var(--mesure);
  font-weight: 700;
  font-size: 2.3rem;
  line-height: 1;
  display: block;
  color: var(--encre);
}

.compteur__mot {
  font-size: 0.86rem;
  color: var(--encre-douce);
  display: block;
  margin-top: 0.5rem;
}

/* ---------------------------------------------------------------
   12. Baremes
   --------------------------------------------------------------- */

.baremes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--bordure-forte);
}

.bareme {
  padding: 2.2rem 1.8rem 2.4rem;
  border-left: 1px solid var(--bordure);
  background: var(--blanc);
  display: flex;
  flex-direction: column;
}

.bareme:first-child { border-left: 0; }

.bareme--phare {
  background: var(--surface);
  border-left: 1px solid var(--bordure-forte);
  border-right: 1px solid var(--bordure-forte);
  box-shadow: 0 14px 40px rgba(23, 35, 63, 0.07);
}

.bareme__marque {
  font-family: var(--mesure);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paille-texte);
  background: var(--paille);
  display: inline-block;
  padding: 4px 10px;
  margin-bottom: 1rem;
}

.bareme h3 { font-size: 1.5rem; margin-bottom: 0.4rem; }

.bareme__prix {
  font-family: var(--mesure);
  font-weight: 700;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--encre);
  display: block;
  margin: 0.8rem 0 0.2rem;
}

.bareme__unite {
  font-family: var(--mesure);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  color: var(--encre-douce);
  display: block;
  margin-bottom: 1rem;
}

.bareme__cible { font-size: 0.95rem; color: var(--encre-douce); min-height: 6.5rem; }

.bareme__inclus {
  list-style: none;
  margin: 1.2rem 0 1.8rem;
  padding: 0;
  border-top: 1px solid var(--bordure);
}

.bareme__inclus li {
  position: relative;
  padding: 0.7rem 0 0.7rem 22px;
  border-bottom: 1px solid var(--bordure);
  font-size: 0.94rem;
  color: var(--encre-douce);
  line-height: 1.55;
}

.bareme__inclus li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.16rem;
  width: 9px;
  height: 9px;
  background: var(--paille);
  border-radius: 2px 2px 0 2px;
}

.bareme .bouton-raphia,
.bareme .bouton-filet { margin-top: auto; text-align: center; }

.mention-tarif {
  margin-top: 1.6rem;
  font-size: 0.92rem;
  color: var(--encre-douce);
}

/* ---------------------------------------------------------------
   13. Constats, la foire aux questions
   --------------------------------------------------------------- */

.constats { border-top: 1px solid var(--bordure-forte); }

.constat {
  border-bottom: 1px solid var(--bordure);
  background: var(--blanc);
}

.constat summary {
  cursor: pointer;
  list-style: none;
  padding: 1.35rem 3rem 1.35rem 0;
  position: relative;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: 0.04em;
  color: var(--encre);
}

.constat summary::-webkit-details-marker { display: none; }

.constat summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 1.75rem;
  width: 13px;
  height: 13px;
  border-right: 2px solid var(--myosotis);
  border-bottom: 2px solid var(--myosotis);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.constat[open] summary::after { transform: rotate(-135deg); }

.constat__reponse { padding: 0 3rem 1.6rem 0; color: var(--encre-douce); font-size: 1rem; }
.constat__reponse p { max-width: 74ch; }

/* ---------------------------------------------------------------
   14. Bordereau de contact
   --------------------------------------------------------------- */

.bordereau-grille {
  display: grid;
  grid-template-columns: 5fr 7fr;
  column-gap: calc(var(--gouttiere) * 1.5);
  align-items: start;
}

.bordereau-grille__mot { position: relative; padding-right: calc(var(--gouttiere) * 0.75); }

.bordereau-grille__mot::after {
  content: "";
  position: absolute;
  right: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--bordure);
}

.bordereau {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 3px 3px 0 3px;
  padding: 26px 26px 0;
}

.bordereau__champ { margin-bottom: 1.1rem; }

.bordereau label {
  display: block;
  font-family: var(--titre);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  color: var(--encre);
}

.bordereau input[type="text"],
.bordereau input[type="email"],
.bordereau select,
.bordereau textarea {
  width: 100%;
  font-family: var(--courant);
  font-size: 1rem;
  color: var(--encre);
  background: var(--blanc);
  border: 1px solid var(--bordure-forte);
  border-radius: 2px 2px 0 2px;
  padding: 11px 13px;
}

.bordereau textarea { resize: vertical; min-height: 130px; }

.bordereau input:focus-visible,
.bordereau select:focus-visible,
.bordereau textarea:focus-visible { border-color: var(--myosotis); }

.bordereau__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

.bordereau__accord {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 14px;
  margin-bottom: 1.3rem;
}

.bordereau__accord label {
  font-family: var(--courant);
  font-weight: 400;
  font-size: 0.92rem;
  letter-spacing: 0;
  margin: 0;
  color: var(--encre-douce);
}

.bordereau__accord input { margin-top: 4px; flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--myosotis); }

.bordereau__talon {
  margin: 1.6rem -26px 0;
  height: var(--dent);
  background-image: radial-gradient(circle 7px at 7px 14px, transparent 7px, var(--paille) 7px);
  background-size: 22px var(--dent);
  background-repeat: repeat-x;
  animation: derive-talon 14s ease-in-out infinite alternate;
}

.bordereau__pied { font-size: 0.9rem; color: var(--encre-douce); margin-top: 1.2rem; }

.liste-puces { padding-left: 1.1rem; margin: 0 0 1.1rem; }
.liste-puces li { margin-bottom: 0.5rem; color: var(--encre-douce); }

/* ---------------------------------------------------------------
   15. Pied de page
   --------------------------------------------------------------- */

.pied {
  background: var(--myosotis-pale);
  border-top: 1px solid var(--bordure);
  padding-top: 3.6rem;
}

.pied__frise {
  height: var(--dent);
  background-image: radial-gradient(circle 7px at 7px 0, transparent 7px, var(--bordure) 7px);
  background-size: 22px var(--dent);
  background-repeat: repeat-x;
  animation: derive-talon 14s ease-in-out infinite alternate;
}

.pied__colonnes {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
  column-gap: var(--gouttiere);
  row-gap: 2.2rem;
  padding-bottom: 2.8rem;
}

.pied__colonne { position: relative; }
.pied__colonne + .pied__colonne { padding-left: calc(var(--gouttiere) / 2); }

.pied__colonne + .pied__colonne::before {
  content: "";
  position: absolute;
  left: calc(var(--gouttiere) / -2);
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: var(--bordure-forte);
}

.pied h4 {
  font-family: var(--mesure);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--myosotis-sombre);
  font-weight: 400;
  margin-bottom: 1rem;
}

.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 0.55rem; }
.pied a { color: var(--encre); text-decoration: none; font-size: 0.95rem; }
.pied a:hover { text-decoration: underline; text-decoration-color: var(--paille); }
.pied p { font-size: 0.94rem; color: var(--encre-douce); }

.pied__social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1rem; }

.pied__social a {
  border: 1px solid var(--bordure-forte);
  background: var(--blanc);
  padding: 6px 12px;
  font-family: var(--mesure);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  border-radius: 2px 2px 0 2px;
}

.pied__barre {
  border-top: 1px solid var(--bordure-forte);
  padding: 1.3rem 0 2rem;
  font-size: 0.88rem;
  color: var(--encre-douce);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  justify-content: space-between;
}

/* ---------------------------------------------------------------
   16. Pages internes
   --------------------------------------------------------------- */

.page-interne { padding: calc(var(--entete-haut) + 3.4rem) 0 0; }

.fil {
  font-family: var(--mesure);
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  color: var(--encre-douce);
  margin-bottom: 1.2rem;
}

.fil a { color: var(--myosotis-sombre); }

.texte-legal { max-width: 74ch; }
.texte-legal h2 { font-size: 1.55rem; margin-top: 2.6rem; }
.texte-legal h3 { font-size: 1.14rem; margin-top: 1.8rem; }
.texte-legal ul { padding-left: 1.15rem; }
.texte-legal li { margin-bottom: 0.55rem; }
.texte-legal dl { margin: 0 0 1.4rem; }
.texte-legal dt { font-family: var(--titre); font-weight: 600; letter-spacing: 0.04em; margin-top: 0.9rem; }
.texte-legal dd { margin: 0.2rem 0 0; color: var(--encre-douce); }

.auteur-tete {
  display: grid;
  grid-template-columns: 7fr 5fr;
  column-gap: calc(var(--gouttiere) * 1.5);
  align-items: start;
}

.auteur-tete__portrait { position: relative; }

.auteur-corps { column-count: 1; }
.auteur-corps h2 { margin-top: 2.6rem; }

.plan-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bordure-forte); }

.plan-liste li {
  border-bottom: 1px solid var(--bordure);
  padding: 1.1rem 0;
  display: grid;
  grid-template-columns: 15rem 1fr;
  column-gap: var(--gouttiere);
}

.plan-liste a { font-family: var(--titre); font-weight: 600; letter-spacing: 0.04em; }
.plan-liste span { color: var(--encre-douce); font-size: 0.98rem; }

.carton-central {
  max-width: 46rem;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 3px 3px 0 3px;
  padding: 2.6rem 2.4rem 0;
}

.carton-central__talon {
  margin: 2rem -2.4rem 0;
  height: var(--dent);
  background-image: radial-gradient(circle 7px at 7px 14px, transparent 7px, var(--paille) 7px);
  background-size: 22px var(--dent);
  background-repeat: repeat-x;
  animation: derive-talon 14s ease-in-out infinite alternate;
}

/* ---------------------------------------------------------------
   17. Entree au defilement
   --------------------------------------------------------------- */

.a-lever { opacity: 0; transform: translateY(16px); }

.a-lever.est-levee {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* ---------------------------------------------------------------
   18. Adaptations
   --------------------------------------------------------------- */

@media (max-width: 1024px) {
  :root { --gouttiere: 26px; }
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.8rem; }
  .tiers { grid-column: span 6; }
  .quart { grid-column: span 6; }
  .compteur { grid-template-columns: repeat(2, 1fr); }
  .compteur__poste:nth-child(3) { border-left: 0; padding-left: 0; }
  .baremes { grid-template-columns: 1fr; }
  .bareme { border-left: 0; border-top: 1px solid var(--bordure); }
  .bareme--phare { border-left: 0; border-right: 0; border-top: 3px solid var(--paille); }
  .bareme__cible { min-height: 0; }
  .pied__colonnes { grid-template-columns: 1fr 1fr; }
  .pied__colonne:nth-child(3) { padding-left: 0; }
  .pied__colonne:nth-child(3)::before { display: none; }
}

@media (max-width: 860px) {
  .nav-souche { display: none; }
  .ouvre-panneau { display: inline-block; }
  .registre-tete__grille,
  .encart-terrain,
  .bordereau-grille,
  .auteur-tete { grid-template-columns: 1fr; row-gap: 2.4rem; }
  .registre-tete__texte::after,
  .bordereau-grille__mot::after { display: none; }
  .registre-tete__texte,
  .bordereau-grille__mot { padding-right: 0; }
  .encart-terrain__mot { border-left: 0; padding-left: 0; border-top: 1px solid var(--bordure); padding-top: 1.4rem; }
  .pastille-etat--reserve { left: 4px; }
  .pastille-etat--prepare { right: 4px; }
  .plan-liste li { grid-template-columns: 1fr; row-gap: 0.4rem; }
}

@media (max-width: 640px) {
  :root { --entete-haut: 66px; }
  h1 { font-size: 2.05rem; }
  h2 { font-size: 1.55rem; }
  body { font-size: 1rem; }
  .bande { padding: 3.4rem 0 3rem; }
  .tiers, .quart, .demi, .sept, .cinq { grid-column: 1 / -1; }
  /* Sur mobile, les filets verticaux du colonnage deviennent des filets horizontaux. */
  .colonnage--filets > * + *::before {
    left: 0;
    right: 0;
    top: -1.2rem;
    bottom: auto;
    width: auto;
    height: 1px;
  }
  .compteur { grid-template-columns: 1fr; }
  .compteur__poste { border-left: 0; padding-left: 0; border-top: 1px solid var(--bordure); }
  .compteur__poste:first-child { border-top: 0; }
  .pied__colonnes { grid-template-columns: 1fr; }
  .pied__colonne + .pied__colonne { padding-left: 0; }
  .pied__colonne + .pied__colonne::before { display: none; }
  .debordement { width: 100%; margin-left: 0; padding: 1.6rem; }
  .bordereau__duo { grid-template-columns: 1fr; }
  .cadre-photo__etiquette { right: 6px; bottom: 16px; }
  .cadre-photo--gauche .cadre-photo__etiquette { left: 6px; right: auto; }
  .bareme__prix { font-size: 2.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .talon,
  .fiche__talon,
  .parole__talon,
  .bordereau__talon,
  .carton-central__talon,
  .pied__frise { background-position: 0 0 !important; }
  .marque__arche,
  .pastille-etat--reserve,
  .pastille-etat--prepare,
  .pastille-etat--rendu { transform: none !important; }
  .a-lever { opacity: 1; transform: none; }
}

@media print {
  .entete, .panneau, .ouvre-panneau, .talon, .pied__frise { display: none; }
  body { font-size: 11pt; }
}
/* ---------------------------------------------------------------
   19. Le Registre des sorties, magazine du site

   Section ajoutee apres la mise en ligne du site: aucune regle ci dessus
   n est modifiee. Le vocabulaire de classes reste celui de la maison:
   registre (le magazine), sortie (un article verse au registre),
   carte-sortie (la fiche de sommaire), talon (la dent de ticket),
   souche (le conteneur), fil (le fil d Ariane), etiquette d angle.

   Palette, polices, colonnes de journal separees par des filets fins,
   angle inferieur droit vif, frise de dents de ticket en fin de bloc et
   flottement lent de 14 secondes des seuls elements decoratifs: le magazine
   emploie exactement les memes moyens que le reste du site.

   Regle structurante: le corps des articles est du HTML nu, sans le moindre
   attribut class. Les balises h2, h3, p, ul, ol, li, table, thead, tbody, tr,
   th, td, blockquote, aside, figure, figcaption, strong, em et a sont donc
   mises en forme ici en tant que descendantes de .sortie-corps, pour qu un
   article ne paraisse jamais non style faute de classe. */

/* ------------------------------------------ 19.1 Page du magazine et ouverture */

.registre-page { padding: calc(var(--entete-haut) + 3.4rem) 0 4.6rem; }

.registre-une {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 3px 3px 0 3px;
  padding: 2.8rem 2.6rem 0;
  margin-bottom: 3.2rem;
}

.registre-une h1 { margin-bottom: 0.7rem; }

.registre-une__chapo {
  font-size: 1.14rem;
  color: var(--encre-douce);
  max-width: 72ch;
}

.registre-une__reperes {
  margin-top: 2.2rem;
  border-top: 1px solid var(--bordure-forte);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.registre-une__reperes div {
  padding: 1.4rem 1.4rem 1.4rem 0;
  border-left: 1px solid var(--bordure);
  padding-left: 1.4rem;
}

.registre-une__reperes div:first-child { border-left: 0; padding-left: 0; }

.registre-une__reperes b {
  display: block;
  font-family: var(--mesure);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--encre);
}

.registre-une__reperes span {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.86rem;
  color: var(--encre-douce);
}

.registre-une__talon {
  margin: 2.2rem -2.6rem 0;
  height: var(--dent);
  background-image: radial-gradient(circle 7px at 7px 14px, transparent 7px, var(--paille) 7px);
  background-size: 22px var(--dent);
  background-repeat: repeat-x;
  animation: derive-talon 14s ease-in-out infinite alternate;
}

.registre-sommaire-coiffe { max-width: 58rem; margin-bottom: 2.6rem; }

/* ------------------------------------------ 19.2 Grille de cartes et carte d article */

.registre-grille {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--gouttiere);
  row-gap: 2.6rem;
  align-items: stretch;
}

.registre-grille > li { margin: 0; position: relative; }

/* Filets de colonne du journal, entre deux cartes d une meme rangee. */
.registre-grille > li::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: calc(var(--gouttiere) / -2);
  width: 1px;
  background: var(--bordure);
}

.registre-grille > li:nth-child(3n + 1)::before { display: none; }

.carte-sortie {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 3px 3px 0 3px;
  padding: 10px 10px 0;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.bande--surface .carte-sortie,
.bande--myosotis .carte-sortie { background: var(--blanc); }

.carte-sortie:hover,
.carte-sortie:focus-within {
  border-color: var(--bordure-forte);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(23, 35, 63, 0.09);
}

/* Cadre photographique de la maison: liseré blanc, filet myosotis, voile bleute. */
.carte-sortie__vue {
  position: relative;
  display: block;
  border: 1px solid var(--bordure);
  border-radius: 2px 2px 0 2px;
  overflow: hidden;
}

.carte-sortie__vue img {
  width: 100%;
  height: auto;
  filter: saturate(0.94);
}

.carte-sortie__vue::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--myosotis);
  opacity: 0.06;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.carte-sortie__corps {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.2rem 0.9rem 0;
}

.carte-sortie__angle {
  align-self: flex-start;
  font-family: var(--mesure);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paille-texte);
  background: var(--paille);
  border-radius: 2px 2px 0 2px;
  padding: 4px 10px;
  margin-bottom: 0.9rem;
}

.carte-sortie__titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.16rem;
  letter-spacing: 0.04em;
  line-height: 1.28;
  margin: 0;
}

.carte-sortie__titre a { color: var(--encre); text-decoration: none; }

.carte-sortie__titre a:hover,
.carte-sortie__titre a:focus-visible {
  color: var(--myosotis-sombre);
  text-decoration: underline;
  text-decoration-color: var(--paille);
}

/* Double filet horizontal sous le titre, echo des filets de colonne. */
.carte-sortie__filet {
  border: 0;
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  height: 3px;
  margin: 0.9rem 0 1rem;
}

.carte-sortie__extrait {
  flex: 1;
  font-size: 0.96rem;
  color: var(--encre-douce);
  margin: 0 0 1.1rem;
}

.carte-sortie__pied {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 1.2rem;
  align-items: baseline;
  margin: 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--bordure);
  font-family: var(--mesure);
  font-size: 0.84rem;
  letter-spacing: 0.05em;
  color: var(--encre-douce);
}

.carte-sortie__pied b {
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--encre);
}

.carte-sortie__talon {
  margin: 1.2rem -10px 0;
  height: var(--dent);
  background-image: radial-gradient(circle 7px at 7px 14px, transparent 7px, var(--bordure) 7px);
  background-size: 22px var(--dent);
  background-repeat: repeat-x;
  animation: derive-talon 14s ease-in-out infinite alternate;
}

/* ------------------------------------------ 19.3 Derniers articles, page d accueil */

.registre-derniers__pied {
  margin-top: 2.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--bordure-forte);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.8rem;
}

.registre-derniers__pied p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--encre-douce);
  max-width: 58ch;
}

/* ------------------------------------------ 19.4 Entete d article */

.sortie-tete {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 3px 3px 0 3px;
  padding: 2.4rem 2.6rem 0;
  margin-bottom: 2.4rem;
}

.sortie-tete .fil { margin-bottom: 1.1rem; }
.sortie-tete h1 { margin-bottom: 1rem; }

.sortie-angle {
  display: inline-block;
  font-family: var(--mesure);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paille-texte);
  background: var(--paille);
  border-radius: 2px 2px 0 2px;
  padding: 5px 11px;
  margin-bottom: 1rem;
}

/* Chapeau en exergue: filet paille a gauche, fond blanc, comme la souche d un
   bordereau agrafee en tete de dossier. */
.sortie-exergue {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-left: 5px solid var(--paille);
  border-radius: 2px 2px 0 2px;
  padding: 1.2rem 1.5rem;
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.66;
  color: var(--encre);
  max-width: 76ch;
}

.sortie-jalons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 1.9rem;
  align-items: baseline;
  margin: 1.8rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--bordure);
  font-family: var(--mesure);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  color: var(--encre-douce);
}

.sortie-jalons b { font-weight: 700; font-size: 1.05rem; color: var(--encre); }
.sortie-jalons a { color: var(--myosotis-sombre); }

.sortie-tete__talon {
  margin: 1.8rem -2.6rem 0;
  height: var(--dent);
  background-image: radial-gradient(circle 7px at 7px 14px, transparent 7px, var(--bordure) 7px);
  background-size: 22px var(--dent);
  background-repeat: repeat-x;
  animation: derive-talon 14s ease-in-out infinite alternate;
}

.sortie-vue { margin: 0; }

.sortie-legende {
  font-family: var(--mesure);
  font-size: 0.84rem;
  letter-spacing: 0.05em;
  color: var(--encre-douce);
  margin: 0.9rem 0 2.4rem;
}

/* ------------------------------------------ 19.5 Corps redactionnel, balises nues */

.sortie-feuille {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 3px 3px 0 3px;
  padding: 2.8rem 2.8rem 2.6rem;
}

.sortie-corps {
  font-size: 1.05rem;
  line-height: 1.72;
  color: var(--encre);
}

.sortie-corps > :first-child { margin-top: 0; }
.sortie-corps > :last-child { margin-bottom: 0; }

.sortie-corps h2 {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.72rem;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: var(--encre);
  margin: 2.4rem 0 0.9rem;
  padding: 0 0 0.7rem;
  border-bottom: 1px solid var(--bordure);
  box-shadow: 0 3px 0 -2px var(--bordure);
}

.sortie-corps h3 {
  position: relative;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.22rem;
  letter-spacing: 0.05em;
  line-height: 1.32;
  color: var(--encre);
  margin: 1.9rem 0 0.6rem;
  padding-left: 21px;
}

.sortie-corps h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.44em;
  width: 10px;
  height: 10px;
  background: var(--paille);
  border-radius: 2px 2px 0 2px;
}

.sortie-corps p { margin: 0 0 1.1em; }

.sortie-corps strong { font-weight: 600; color: var(--encre); }
.sortie-corps em { font-style: italic; }

.sortie-corps a {
  color: var(--myosotis-sombre);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--bordure-forte);
  transition: color 0.18s ease, background-color 0.18s ease;
}

.sortie-corps a:hover,
.sortie-corps a:focus-visible {
  color: var(--encre);
  background: var(--myosotis-pale);
  text-decoration-color: var(--paille);
}

.sortie-corps ul,
.sortie-corps ol {
  margin: 0 0 1.35em;
  padding-left: 0;
  list-style: none;
}

.sortie-corps li { margin-bottom: 0.55em; }
.sortie-corps li:last-child { margin-bottom: 0; }
.sortie-corps li > ul,
.sortie-corps li > ol { margin: 0.55em 0 0; }

.sortie-corps ul > li { position: relative; padding-left: 24px; }

.sortie-corps ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 9px;
  height: 9px;
  background: var(--paille);
  border-radius: 2px 2px 0 2px;
}

.sortie-corps ol { counter-reset: sortie-pas; }

.sortie-corps ol > li {
  position: relative;
  padding-left: 40px;
  counter-increment: sortie-pas;
}

.sortie-corps ol > li::before {
  content: counter(sortie-pas);
  position: absolute;
  left: 0;
  top: 0.1em;
  min-width: 26px;
  padding: 1px 6px;
  text-align: center;
  background: var(--blanc);
  border: 1px solid var(--bordure-forte);
  border-radius: 2px 2px 0 2px;
  font-family: var(--mesure);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--encre);
}

/* Tableau recapitulatif: filets fins de colonne, en tete myosotis tres clair,
   chiffres et intitules en Unna comme partout ou le produit compte. */
.sortie-corps table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5em;
  border: 1px solid var(--bordure-forte);
  background: var(--blanc);
  font-size: 0.95rem;
  line-height: 1.55;
}

.sortie-corps caption {
  caption-side: top;
  text-align: left;
  font-family: var(--mesure);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--myosotis-sombre);
  padding-bottom: 0.6rem;
}

.sortie-corps thead th {
  background: var(--myosotis-pale);
  color: var(--encre);
  font-family: var(--mesure);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: left;
  padding: 11px 14px;
  border-right: 1px solid var(--bordure-forte);
  border-bottom: 1px solid var(--bordure-forte);
}

.sortie-corps thead th:last-child { border-right: 0; }

.sortie-corps tbody th {
  text-align: left;
  font-weight: 600;
  font-family: var(--titre);
  letter-spacing: 0.03em;
  background: var(--surface);
}

.sortie-corps tbody th,
.sortie-corps tbody td {
  padding: 11px 14px;
  border-top: 1px solid var(--bordure);
  border-right: 1px solid var(--bordure);
  vertical-align: top;
}

.sortie-corps tbody th:last-child,
.sortie-corps tbody td:last-child { border-right: 0; }
.sortie-corps tbody tr:nth-child(even) td { background: var(--surface); }

/* Encadre: fiche de surface bleutee fermee par une frise de dents de ticket,
   construite sans element supplementaire puisque le corps ne porte aucune classe. */
.sortie-corps aside {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-top: 3px solid var(--paille);
  border-radius: 3px 3px 0 3px;
  padding: 1.5rem 1.6rem 2.1rem;
  margin: 0 0 1.6em;
}

.sortie-corps aside::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--dent);
  background-image: radial-gradient(circle 7px at 7px 14px, transparent 7px, var(--bordure) 7px);
  background-size: 22px var(--dent);
  background-repeat: repeat-x;
  animation: derive-talon 14s ease-in-out infinite alternate;
}

.sortie-corps aside > :last-child { margin-bottom: 0; }
.sortie-corps aside p { color: var(--encre); }

/* Citation: voix de la loueuse, en Unna comme les temoignages du site. */
.sortie-corps blockquote {
  margin: 0 0 1.5em;
  padding: 0.2rem 0 0.2rem 1.4rem;
  border-left: 3px solid var(--paille);
  font-family: var(--mesure);
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--encre);
}

.sortie-corps blockquote > :last-child { margin-bottom: 0; }

.sortie-corps figure {
  margin: 0 0 1.6em;
  padding: 10px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 3px 3px 0 3px;
}

.sortie-corps figure img { border-radius: 2px 2px 0 2px; }

.sortie-corps figcaption {
  font-family: var(--mesure);
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  color: var(--encre-douce);
  padding-top: 0.7rem;
}

/* Mesure de lecture, posee en fin de section pour l emporter a specificite egale
   sur les regles de balises ci dessus: le texte courant ne depasse jamais
   68 signes par ligne. Le tableau, l encadre et la figure vont chercher toute
   la largeur de la feuille, comme une planche depliee a cote de la colonne. */
.sortie-corps > p,
.sortie-corps > h2,
.sortie-corps > h3,
.sortie-corps > ul,
.sortie-corps > ol,
.sortie-corps > blockquote { max-width: 68ch; }

.sortie-corps aside p,
.sortie-corps aside ul,
.sortie-corps aside ol,
.sortie-corps blockquote p,
.sortie-corps th p,
.sortie-corps td p { max-width: none; }

/* ------------------------------------------ 19.6 Appel a l action de fin d article */

.sortie-appel {
  margin-top: 2.6rem;
  background: var(--myosotis-pale);
  border: 1px solid var(--bordure);
  border-radius: 3px 3px 0 3px;
  padding: 2.2rem 2.4rem 0;
}

.sortie-appel__titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: var(--encre);
  margin: 0 0 0.7rem;
}

.sortie-appel p { color: var(--encre-douce); max-width: 68ch; }

.sortie-appel__talon {
  margin: 2rem -2.4rem 0;
  height: var(--dent);
  background-image: radial-gradient(circle 7px at 7px 14px, transparent 7px, var(--paille) 7px);
  background-size: 22px var(--dent);
  background-repeat: repeat-x;
  animation: derive-talon 14s ease-in-out infinite alternate;
}

/* ------------------------------------------ 19.7 Encart auteur */

.sortie-auteur {
  margin-top: 2.6rem;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 3px 3px 0 3px;
  padding: 1.8rem 2rem;
  display: grid;
  grid-template-columns: 96px 1fr;
  column-gap: 1.6rem;
  align-items: start;
}

.sortie-auteur img {
  border: 1px solid var(--bordure);
  border-radius: 2px 2px 0 2px;
  padding: 4px;
  background: var(--blanc);
}

.sortie-auteur__nom {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.16rem;
  letter-spacing: 0.06em;
  color: var(--encre);
  margin: 0 0 2px;
}

.sortie-auteur__role {
  display: block;
  font-family: var(--mesure);
  font-size: 0.84rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--myosotis-sombre);
  margin-bottom: 0.9rem;
}

.sortie-auteur p { font-size: 0.96rem; color: var(--encre-douce); }
.sortie-auteur p:last-child { margin-bottom: 0; }

/* ------------------------------------------ 19.8 Bloc A lire aussi */

.sortie-liasse { margin-top: 3.2rem; }

.sortie-liasse__titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: var(--encre);
  margin: 0 0 0.5rem;
}

.sortie-liasse__intro { color: var(--encre-douce); margin-bottom: 1.8rem; }

.sortie-liasse__mur {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--gouttiere);
  row-gap: 2.2rem;
}

.sortie-liasse__mur > * { position: relative; }

.sortie-liasse__mur > * + *::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: calc(var(--gouttiere) / -2);
  width: 1px;
  background: var(--bordure);
}

/* ------------------------------------------ 19.9 Sommaire date de la page auteur */

.registre-sommaire {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--bordure-forte);
}

.registre-sommaire li {
  display: grid;
  grid-template-columns: 13rem 1fr;
  column-gap: var(--gouttiere);
  row-gap: 0.4rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--bordure);
  margin: 0;
}

.registre-sommaire time {
  font-family: var(--mesure);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: var(--myosotis-sombre);
  padding-top: 2px;
}

.registre-sommaire a {
  font-family: var(--titre);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.registre-sommaire span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.94rem;
  color: var(--encre-douce);
}

/* ------------------------------------------ 19.10 Adaptations du magazine */

@media (max-width: 1024px) {
  .registre-grille,
  .sortie-liasse__mur { grid-template-columns: repeat(2, 1fr); }
  .registre-grille > li:nth-child(3n + 1)::before { display: block; }
  .registre-grille > li:nth-child(2n + 1)::before { display: none; }
  .sortie-liasse__mur > *:nth-child(3)::before { display: none; }
  .registre-une__reperes { grid-template-columns: 1fr; }
  .registre-une__reperes div { border-left: 0; padding-left: 0; border-top: 1px solid var(--bordure); }
  .registre-une__reperes div:first-child { border-top: 0; }
}

@media (max-width: 860px) {
  .registre-une,
  .sortie-tete { padding: 1.9rem 1.6rem 0; }
  .registre-une__talon { margin-left: -1.6rem; margin-right: -1.6rem; }
  .sortie-tete__talon { margin-left: -1.6rem; margin-right: -1.6rem; }
  .sortie-feuille { padding: 1.9rem 1.6rem 1.8rem; }
  .registre-sommaire li { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .registre-page { padding-top: calc(var(--entete-haut) + 2.2rem); }
  .registre-grille,
  .sortie-liasse__mur { grid-template-columns: 1fr; }
  /* Sur mobile, les filets verticaux du colonnage deviennent des filets horizontaux. */
  .registre-grille > li::before,
  .sortie-liasse__mur > * + *::before {
    left: 0;
    right: 0;
    top: -1.3rem;
    bottom: auto;
    width: auto;
    height: 1px;
    display: block;
  }
  .registre-grille > li:first-child::before,
  .sortie-liasse__mur > *:first-child::before { display: none; }
  .sortie-corps h2 { font-size: 1.45rem; }
  .sortie-corps table { font-size: 0.86rem; }
  .sortie-corps thead th,
  .sortie-corps tbody th,
  .sortie-corps tbody td { padding: 8px 10px; }
  .sortie-auteur { grid-template-columns: 1fr; row-gap: 1.1rem; }
  .sortie-appel { padding: 1.6rem 1.4rem 0; }
  .sortie-appel__talon { margin-left: -1.4rem; margin-right: -1.4rem; }
  .sortie-exergue { padding: 1rem 1.1rem; font-size: 1.05rem; }
}

/* Maillage du reseau, bandeau de pied de page. Mise en page seulement:
   les couleurs, la police et le survol restent ceux du site.
   grid-column et flex-basis font tenir le bandeau sur toute la largeur,
   que le pied de page soit une grille ou une boite flexible.
   Les raccourcis margin et padding sont evites: ils ecraseraient le retrait
   interieur d une colonne dont le bandeau herite la classe. */
[data-reseau-bloc]{grid-column:1/-1;flex-basis:100%;width:100%;margin-top:26px;padding-top:18px}
[data-reseau-titre]{font-size:.8rem;line-height:1.3;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;margin:0 0 12px}
ul[data-reseau]{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin:0;padding:0}
ul[data-reseau] li{margin:0;padding:0}