/* ==========================================================================
   Releviane, feuille de style unique
   Univers porcelaine et bleu porcelaine, ambiance atelier.
   Nommage des classes: prefixe rlv, vocabulaire des relevailles
   (emballage, rabat, pli, volet, tirage, perfo, creneau, panneau, parole).
   Mode clair integral, aucune variante sombre.
   ========================================================================== */

:root {
  --porcelaine: #F6F3EF;
  --glacure: #E9EFF2;
  --email: #FFFFFF;
  --ardoise: #26313A;
  --ardoise-doux: #5B6B76;
  --terre: #C0402F;
  --terre-appuyee: #A2331F;
  --terre-claire: #F3E2DD;
  --bleu: #3E6B84;
  --bleu-clair: #DCE7ED;
  --bordure: #D9DFE3;
  --pli: #C7D2D9;

  --titre: "Bitter", Georgia, "Times New Roman", serif;
  --courant: "Ubuntu", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --compte: "Martian Mono", "Courier New", ui-monospace, monospace;

  --gouttiere: 28px;
  --marge: 72px;
  --biais: 26px;
  --levee: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- socle ---------- */

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

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background-color: var(--porcelaine);
  color: var(--ardoise);
  font-family: var(--courant);
  font-size: 1.05rem;
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--titre);
  line-height: 1.15;
  margin: 0 0 0.6em;
  letter-spacing: -0.005em;
}

h1 { font-size: 3.1rem; font-weight: 700; }
h2 { font-size: 2.05rem; font-weight: 700; }
h3 { font-size: 1.3rem; font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 600; }

p { margin: 0 0 1.1em; max-width: 66ch; }

a { color: var(--bleu); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--terre); }

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

ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: 0.4em; }

strong { font-weight: 500; }

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

.rlv-invisible {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.rlv-evitement {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 90;
  background: var(--terre);
  color: var(--email);
  padding: 10px 18px;
  font-family: var(--compte);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top 160ms ease;
}
.rlv-evitement:focus { top: 12px; color: var(--email); }

/* ---------- mesures communes ---------- */

.rlv-cadre {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.rlv-surtitre {
  font-family: var(--compte);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terre);
  margin: 0 0 14px;
  display: block;
}

.rlv-surtitre--bleu { color: var(--bleu); }

.rlv-chapeau {
  font-size: 1.15rem;
  color: var(--ardoise-doux);
  max-width: 62ch;
}

.rlv-compte {
  font-family: var(--compte);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.rlv-legende {
  font-size: 0.86rem;
  color: var(--ardoise-doux);
}

/* ---------- motif signature: perforations de pellicule ---------- */

.rlv-perfo { position: relative; }

.rlv-perfo::before,
.rlv-perfo::after {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  width: 14px;
  background-color: var(--porcelaine);
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 9px, rgba(0,0,0,0) 9px 18px);
  mask-image: repeating-linear-gradient(to bottom, #000 0 9px, rgba(0,0,0,0) 9px 18px);
  -webkit-mask-size: 6px 18px;
  mask-size: 6px 18px;
  -webkit-mask-position: 4px 0;
  mask-position: 4px 0;
  -webkit-mask-repeat: repeat-y;
  mask-repeat: repeat-y;
  pointer-events: none;
}
.rlv-perfo::before { left: 0; }
.rlv-perfo::after { right: 0; transform: scaleX(-1); }

.rlv-perfo--claire::before,
.rlv-perfo--claire::after { background-color: var(--email); }

.rlv-perfo--bleue::before,
.rlv-perfo--bleue::after { background-color: var(--bleu-clair); }

/* ---------- forme signature: le rabat plie ---------- */

.rlv-rabat {
  position: relative;
  background: var(--email);
  border: 1px solid var(--bordure);
  padding: 46px 30px 30px;
  clip-path: polygon(0 0, calc(100% - var(--biais)) 0, 100% var(--biais), 100% 100%, 0 100%);
}

.rlv-rabat::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 18px;
  background: var(--bleu-clair);
  border-bottom: 1px solid var(--pli);
  box-shadow: 0 1px 0 var(--email);
  clip-path: polygon(0 0, calc(100% - var(--biais)) 0, 100% var(--biais), 100% 100%, 0 100%);
}

.rlv-rabat--terre::before { background: var(--terre-claire); border-bottom-color: #E2BEB4; }

/* ---------- en tete ---------- */

.rlv-entete {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(246, 243, 239, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bordure);
  box-shadow: 0 1px 0 var(--bleu-clair);
  transition: padding 180ms ease;
}

.rlv-entete__interieur {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 84px;
  transition: height 180ms ease;
}

.rlv-entete.est-epingle .rlv-entete__interieur { height: 62px; }

.rlv-logotype {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.24rem;
  color: var(--ardoise);
  text-decoration: none;
  flex: 0 0 auto;
}
.rlv-logotype:hover { color: var(--terre); }
.rlv-logotype svg { flex: 0 0 auto; }

.rlv-ancres {
  display: flex;
  gap: 26px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.rlv-ancres li { margin: 0; }

.rlv-ancres a {
  position: relative;
  font-size: 0.95rem;
  color: var(--ardoise);
  text-decoration: none;
  padding-bottom: 6px;
}
.rlv-ancres a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--terre);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}
.rlv-ancres a:hover::after,
.rlv-ancres a.est-active::after { transform: scaleX(1); }

.rlv-entete .rlv-bouton { flex: 0 0 auto; }

.rlv-menu-declencheur {
  display: none;
  width: 44px; height: 40px;
  background: var(--email);
  border: 1px solid var(--pli);
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.rlv-menu-declencheur span {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--ardoise);
}

.rlv-panneau-mobile {
  display: none;
  position: fixed;
  left: 0; right: 0; top: 0;
  height: 100vh;
  background: var(--porcelaine);
  z-index: 60;
  padding: 26px 24px 40px;
  overflow-y: auto;
  border-bottom: 6px solid var(--terre);
}
.rlv-panneau-mobile.est-ouvert { display: block; }

.rlv-panneau-mobile__haut {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}

.rlv-panneau-fermer {
  background: none;
  border: 1px solid var(--pli);
  font-family: var(--compte);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 14px;
  cursor: pointer;
  color: var(--ardoise);
}

.rlv-panneau-mobile ul { list-style: none; margin: 0 0 26px; padding: 0; }
.rlv-panneau-mobile li { border-bottom: 1px solid var(--bordure); }
.rlv-panneau-mobile a {
  display: block;
  padding: 15px 2px;
  font-family: var(--titre);
  font-size: 1.3rem;
  color: var(--ardoise);
  text-decoration: none;
}

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

.rlv-bouton {
  display: inline-block;
  font-family: var(--courant);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  padding: 14px 26px;
  border: 0;
  cursor: pointer;
  background: var(--terre);
  color: var(--email);
  border-radius: 4px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  box-shadow: 0 2px 10px rgba(38, 49, 58, 0.12);
  transition: background-color 180ms ease, clip-path 180ms ease;
}
.rlv-bouton:hover {
  background: var(--terre-appuyee);
  color: var(--email);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}

.rlv-bouton--second {
  background: var(--email);
  color: var(--ardoise);
  border: 1.5px solid var(--bleu);
  box-shadow: none;
}
.rlv-bouton--second:hover {
  background: var(--bleu-clair);
  border-color: var(--terre);
  color: var(--ardoise);
}

.rlv-bouton--bande {
  background: var(--email);
  color: var(--terre);
}
.rlv-bouton--bande:hover { background: var(--porcelaine); color: var(--terre-appuyee); }

.rlv-bouton--large { display: block; width: 100%; text-align: center; }

/* ---------- tirage photographique et rideau ---------- */

.rlv-tirage {
  position: relative;
  background: var(--email);
  border: 1px solid var(--bordure);
  padding: 10px;
  clip-path: polygon(0 0, calc(100% - var(--biais)) 0, 100% var(--biais), 100% 100%, 0 100%);
}

.rlv-tirage__image { position: relative; overflow: hidden; }

.rlv-tirage__perfo {
  position: absolute;
  top: 10px; bottom: 10px;
  width: 14px;
  z-index: 3;
  pointer-events: none;
}
.rlv-tirage__perfo--gauche { left: 0; }
.rlv-tirage__perfo--droite { right: 0; }

.rlv-rideau {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 620ms var(--levee);
  will-change: clip-path;
}
.rlv-rideau.est-levee { clip-path: inset(0 0 0 0); }

.rlv-tirage__image::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--terre);
  opacity: 0;
  z-index: 2;
}
.rlv-tirage__image.est-levee::after { animation: rlv-filet 820ms var(--levee) forwards; }

@keyframes rlv-filet {
  0% { transform: translateY(100%); opacity: 1; }
  76% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0); opacity: 0; }
}

.rlv-tirage__mention {
  font-family: var(--compte);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ardoise-doux);
  margin: 10px 4px 2px;
}

/* ---------- hero, emballage deplie ---------- */

.rlv-ouverture {
  background:
    linear-gradient(to bottom, var(--porcelaine) 0 70%, var(--glacure) 70% 100%);
  padding: 62px 0 0;
  overflow: hidden;
}

.rlv-emballage {
  display: grid;
  grid-template-columns: 4fr 3fr 5fr;
  gap: 0;
  align-items: stretch;
}

.rlv-emballage__rabat {
  background: var(--porcelaine);
  padding: 8px var(--gouttiere) 44px 0;
  border-right: 1px solid var(--pli);
  box-shadow: 2px 0 0 var(--email), inset -2px 0 4px -3px rgba(38, 49, 58, 0.35);
}

.rlv-emballage__rabat h1 { margin-bottom: 0.4em; }

.rlv-emballage__accroche {
  font-size: 1.12rem;
  color: var(--ardoise-doux);
  max-width: 34ch;
}

.rlv-emballage__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

.rlv-emballage__pli {
  background: var(--glacure);
  padding: 34px 22px 34px 26px;
  border-right: 1px solid var(--pli);
  box-shadow: 2px 0 0 var(--email), inset -2px 0 4px -3px rgba(38, 49, 58, 0.35);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rlv-emballage__chiffre {
  font-family: var(--compte);
  font-variant-numeric: tabular-nums;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.05;
  color: var(--terre);
  margin: 0 0 10px;
}

.rlv-emballage__mesure {
  font-size: 0.92rem;
  color: var(--ardoise);
  margin: 0 0 22px;
  max-width: 26ch;
}
.rlv-emballage__mesure:last-child { margin-bottom: 0; }

.rlv-emballage__volet {
  padding: 12px 0 0 var(--gouttiere);
  transform: translateY(12px);
}

/* ---------- rythme des sections ---------- */

.rlv-section { padding: 78px 0; }
.rlv-section--glacure { background: var(--glacure); }
.rlv-section--serre { padding: 58px 0; }

.rlv-section__entete { max-width: 68ch; margin-bottom: 42px; }

.rlv-bande {
  position: relative;
  background: var(--terre);
  color: var(--email);
  padding: 34px 0;
  clip-path: polygon(0 0, calc(100% - 46px) 0, 100% 46px, 100% 100%, 0 100%);
}
.rlv-bande a { color: var(--email); }

/* ---------- probleme, deux rabats inegaux ---------- */

.rlv-debordement {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--gouttiere);
  align-items: start;
}

.rlv-fuite {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--bordure);
}
.rlv-fuite li {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--bordure);
  box-shadow: 0 1px 0 var(--email);
  margin: 0;
}
.rlv-fuite b {
  font-family: var(--compte);
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--terre);
}
.rlv-fuite span { color: var(--ardoise); }

.rlv-note {
  background: var(--email);
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--bleu);
  padding: 24px 24px 24px 22px;
}
.rlv-note p:last-child { margin-bottom: 0; }

/* ---------- solution, quatre volets numerotes ---------- */

.rlv-volets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gouttiere);
  counter-reset: volet;
}

.rlv-volet {
  position: relative;
  background: var(--email);
  border: 1px solid var(--bordure);
  padding: 44px 22px 24px;
  clip-path: polygon(0 0, calc(100% - var(--biais)) 0, 100% var(--biais), 100% 100%, 0 100%);
}
.rlv-volet::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 18px;
  background: var(--bleu-clair);
  border-bottom: 1px solid var(--pli);
  clip-path: polygon(0 0, calc(100% - var(--biais)) 0, 100% var(--biais), 100% 100%, 0 100%);
}
.rlv-volet__rang {
  counter-increment: volet;
  font-family: var(--compte);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--terre);
  display: block;
  margin-bottom: 10px;
}
.rlv-volet__rang::before { content: "geste " counter(volet) " sur 4"; }
.rlv-volet p { font-size: 0.98rem; margin-bottom: 0; }

/* ---------- fonctionnalites, cartes a rabat ---------- */

.rlv-outils {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gouttiere);
}

.rlv-carte {
  position: relative;
  background: var(--email);
  border: 1px solid var(--bordure);
  padding: 44px 24px 26px;
  clip-path: polygon(0 0, calc(100% - var(--biais)) 0, 100% var(--biais), 100% 100%, 0 100%);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 320ms var(--levee), transform 320ms var(--levee);
}
.rlv-carte.est-levee { opacity: 1; transform: none; }
.rlv-carte::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 18px;
  background: var(--bleu-clair);
  border-bottom: 1px solid var(--pli);
  clip-path: polygon(0 0, calc(100% - var(--biais)) 0, 100% var(--biais), 100% 100%, 0 100%);
}
.rlv-carte h3 { margin-bottom: 0.45em; }
.rlv-carte p { font-size: 0.98rem; margin-bottom: 0; }
.rlv-carte__etiquette {
  font-family: var(--compte);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bleu);
  display: block;
  margin-bottom: 8px;
}

/* ---------- avantages ---------- */

.rlv-gains {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gouttiere) 0;
  border-top: 1px solid var(--pli);
}
.rlv-gain {
  padding: 26px 26px 26px 0;
  border-right: 1px solid var(--bordure);
  box-shadow: 1px 0 0 var(--email);
}
.rlv-gain:nth-child(3n) { border-right: 0; box-shadow: none; }
.rlv-gain__mesure {
  font-family: var(--compte);
  font-variant-numeric: tabular-nums;
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--terre);
  display: block;
  margin-bottom: 8px;
}
.rlv-gain h3 { font-size: 1.1rem; }
.rlv-gain p { font-size: 0.96rem; margin-bottom: 0; }

/* ---------- preuve sociale ---------- */

.rlv-paroles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gouttiere);
  margin-bottom: 46px;
}

.rlv-parole {
  position: relative;
  background: var(--email);
  border: 1px solid var(--bordure);
  padding: 44px 24px 24px;
  margin: 0;
  clip-path: polygon(0 0, calc(100% - var(--biais)) 0, 100% var(--biais), 100% 100%, 0 100%);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 380ms var(--levee), transform 380ms var(--levee);
}
.rlv-parole.est-levee { opacity: 1; transform: none; }
.rlv-parole::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 18px;
  background: var(--terre-claire);
  border-bottom: 1px solid #E2BEB4;
  clip-path: polygon(0 0, calc(100% - var(--biais)) 0, 100% var(--biais), 100% 100%, 0 100%);
}
.rlv-parole blockquote { margin: 0 0 18px; padding: 0; }
.rlv-parole blockquote p { font-size: 1rem; margin-bottom: 0.8em; }
.rlv-parole blockquote p:last-child { margin-bottom: 0; }
.rlv-parole figcaption {
  border-top: 1px solid var(--bordure);
  box-shadow: 0 1px 0 var(--email);
  padding-top: 14px;
  font-size: 0.88rem;
  color: var(--ardoise-doux);
}
.rlv-parole figcaption b { display: block; color: var(--ardoise); font-weight: 500; }
.rlv-parole__avant-apres {
  font-family: var(--compte);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--terre);
  display: block;
  margin-bottom: 12px;
}

.rlv-releve {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--pli);
  border: 1px solid var(--pli);
}
.rlv-releve div {
  background: var(--porcelaine);
  padding: 24px 20px;
}
.rlv-section--glacure .rlv-releve div { background: var(--glacure); }
.rlv-releve dt {
  font-family: var(--compte);
  font-variant-numeric: tabular-nums;
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--ardoise);
  margin-bottom: 6px;
}
.rlv-releve dd { margin: 0; font-size: 0.9rem; color: var(--ardoise-doux); }

/* ---------- tarifs, trois panneaux ---------- */

.rlv-panneaux {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gouttiere);
  align-items: start;
}

.rlv-panneau {
  position: relative;
  background: var(--email);
  border: 1px solid var(--bordure);
  padding: 46px 26px 30px;
  clip-path: polygon(0 0, calc(100% - var(--biais)) 0, 100% var(--biais), 100% 100%, 0 100%);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.rlv-panneau::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 18px;
  background: var(--bleu-clair);
  border-bottom: 1px solid var(--pli);
  clip-path: polygon(0 0, calc(100% - var(--biais)) 0, 100% var(--biais), 100% 100%, 0 100%);
}
.rlv-panneau--depliee {
  margin-top: -24px;
  border-color: var(--terre);
  box-shadow: 0 10px 30px rgba(38, 49, 58, 0.1);
}
.rlv-panneau--depliee::before { background: var(--terre); border-bottom-color: var(--terre-appuyee); }

.rlv-panneau__marque {
  font-family: var(--compte);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terre);
  display: block;
  margin-bottom: 10px;
}
.rlv-panneau h3 { margin-bottom: 0.35em; }
.rlv-panneau__cible { font-size: 0.92rem; color: var(--ardoise-doux); min-height: 4.6em; }
.rlv-panneau__prix {
  font-family: var(--compte);
  font-variant-numeric: tabular-nums;
  font-size: 2.3rem;
  font-weight: 600;
  color: var(--ardoise);
  display: block;
  line-height: 1.1;
}
.rlv-panneau__unite {
  font-family: var(--compte);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ardoise-doux);
  display: block;
  margin: 4px 0 20px;
}
.rlv-panneau ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  border-top: 1px solid var(--bordure);
}
.rlv-panneau li {
  position: relative;
  padding: 11px 0 11px 24px;
  border-bottom: 1px solid var(--bordure);
  font-size: 0.94rem;
  margin: 0;
}
.rlv-panneau li::before {
  content: "";
  position: absolute;
  left: 2px; top: 20px;
  width: 9px; height: 9px;
  background: var(--bleu);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.rlv-panneau--depliee li::before { background: var(--terre); }
.rlv-panneau .rlv-bouton { margin-top: auto; }

.rlv-tarifs__pied {
  margin-top: 34px;
  font-size: 0.92rem;
  color: var(--ardoise-doux);
  max-width: 76ch;
}

/* ---------- FAQ ---------- */

.rlv-questions {
  border-top: 1px solid var(--pli);
  max-width: 82ch;
}

.rlv-question { border-bottom: 1px solid var(--bordure); box-shadow: 0 1px 0 var(--email); }

.rlv-question__bouton {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  background: none;
  border: 0;
  padding: 20px 4px;
  text-align: left;
  cursor: pointer;
  font-family: var(--titre);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--ardoise);
}
.rlv-question__bouton:hover { color: var(--terre); }
.rlv-question__signe {
  font-family: var(--compte);
  font-size: 0.9rem;
  color: var(--terre);
  flex: 0 0 auto;
  transition: transform 200ms ease;
}
.rlv-question__bouton[aria-expanded="true"] .rlv-question__signe { transform: rotate(45deg); }

.rlv-question__reponse { padding: 0 4px 22px; max-width: 72ch; }
.rlv-question__reponse[hidden] { display: none; }
.rlv-question__reponse p:last-child { margin-bottom: 0; }

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

.rlv-guichet {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--gouttiere);
  align-items: start;
}

.rlv-formulaire {
  position: relative;
  background: var(--email);
  border: 1px solid var(--bordure);
  padding: 46px 30px 30px;
  clip-path: polygon(0 0, calc(100% - var(--biais)) 0, 100% var(--biais), 100% 100%, 0 100%);
}
.rlv-formulaire::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 18px;
  background: var(--terre-claire);
  border-bottom: 1px solid #E2BEB4;
  clip-path: polygon(0 0, calc(100% - var(--biais)) 0, 100% var(--biais), 100% 100%, 0 100%);
}

.rlv-champ { margin-bottom: 18px; }
.rlv-champ--duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.rlv-formulaire label {
  display: block;
  font-size: 0.88rem;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--ardoise);
}

.rlv-formulaire input[type="text"],
.rlv-formulaire input[type="email"],
.rlv-formulaire select,
.rlv-formulaire textarea {
  width: 100%;
  font-family: var(--courant);
  font-size: 1rem;
  color: var(--ardoise);
  background: var(--porcelaine);
  border: 1px solid var(--pli);
  border-radius: 3px;
  padding: 11px 12px;
}
.rlv-formulaire textarea { resize: vertical; min-height: 130px; }
.rlv-formulaire input:focus,
.rlv-formulaire select:focus,
.rlv-formulaire textarea:focus { background: var(--email); }

.rlv-consentement {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--ardoise-doux);
  margin-bottom: 22px;
}
.rlv-consentement input { margin-top: 5px; }

.rlv-formulaire__suite {
  margin-top: 18px;
  font-size: 0.88rem;
  color: var(--ardoise-doux);
}

.rlv-guichet__texte ul { list-style: none; padding: 0; }
.rlv-guichet__texte li {
  padding: 12px 0 12px 22px;
  border-bottom: 1px solid var(--bordure);
  box-shadow: 0 1px 0 var(--email);
  position: relative;
  font-size: 0.96rem;
}
.rlv-guichet__texte li::before {
  content: "";
  position: absolute;
  left: 0; top: 21px;
  width: 9px; height: 9px;
  background: var(--terre);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* ---------- pages internes ---------- */

.rlv-page { padding: 56px 0 78px; }
.rlv-page__entete { max-width: 70ch; margin-bottom: 40px; }
.rlv-fil {
  font-family: var(--compte);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ardoise-doux);
  margin-bottom: 18px;
}
.rlv-fil a { color: var(--bleu); text-decoration: none; }
.rlv-fil a:hover { text-decoration: underline; }

.rlv-texte { max-width: 74ch; }
.rlv-texte h2 { margin-top: 1.6em; }
.rlv-texte h3 { margin-top: 1.3em; }
.rlv-texte ul { padding-left: 1.1em; }
.rlv-texte ul li { margin-bottom: 0.5em; }

.rlv-duo-auteur {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 46px;
}

.rlv-portrait {
  background: var(--email);
  border: 1px solid var(--bordure);
  padding: 10px;
  clip-path: polygon(0 0, calc(100% - var(--biais)) 0, 100% var(--biais), 100% 100%, 0 100%);
}

.rlv-profils { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.rlv-profils li { margin: 0; }
.rlv-profils a {
  display: inline-block;
  font-family: var(--compte);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ardoise);
  background: var(--email);
  border: 1px solid var(--pli);
  padding: 9px 13px;
}
.rlv-profils a:hover { border-color: var(--terre); color: var(--terre); }

.rlv-sommaire { list-style: none; padding: 0; }
.rlv-sommaire > li {
  background: var(--email);
  border: 1px solid var(--bordure);
  padding: 18px 20px;
  margin-bottom: 14px;
}
.rlv-sommaire h3 { margin-bottom: 0.3em; font-size: 1.1rem; }
.rlv-sommaire p { margin-bottom: 0; font-size: 0.95rem; color: var(--ardoise-doux); }

.rlv-message-court {
  background: var(--email);
  border: 1px solid var(--bordure);
  border-top: 4px solid var(--terre);
  padding: 34px 30px;
  max-width: 70ch;
}

/* ---------- pied de page ---------- */

.rlv-pied {
  position: relative;
  background: var(--glacure);
  border-top: 1px solid var(--pli);
  box-shadow: inset 0 1px 0 var(--email);
  padding: 58px 0 0;
}

.rlv-pied__colonnes {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1.6fr;
  gap: var(--gouttiere);
  padding-bottom: 44px;
}

.rlv-pied h2 {
  font-family: var(--compte);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bleu);
  margin-bottom: 16px;
}
.rlv-pied ul { list-style: none; padding: 0; margin: 0; }
.rlv-pied li { margin-bottom: 9px; }
.rlv-pied a { color: var(--ardoise); text-decoration: none; font-size: 0.94rem; }
.rlv-pied a:hover { color: var(--terre); text-decoration: underline; }
.rlv-pied p { font-size: 0.92rem; color: var(--ardoise-doux); }

.rlv-pied__barre {
  border-top: 1px solid var(--pli);
  box-shadow: 0 -1px 0 var(--email) inset;
  padding: 20px 0 26px;
  font-size: 0.86rem;
  color: var(--ardoise-doux);
}
.rlv-pied__barre p { margin: 0; max-width: none; }

/* ---------- reglages ecran ---------- */

@media (min-width: 1360px) {
  .rlv-cadre { padding: 0 var(--marge); }
}

@media (max-width: 1080px) {
  .rlv-outils { grid-template-columns: repeat(2, 1fr); }
  .rlv-volets { grid-template-columns: repeat(2, 1fr); }
  .rlv-paroles { grid-template-columns: 1fr; }
  .rlv-gains { grid-template-columns: repeat(2, 1fr); }
  .rlv-gain:nth-child(3n) { border-right: 1px solid var(--bordure); }
  .rlv-gain:nth-child(2n) { border-right: 0; box-shadow: none; }
  .rlv-releve { grid-template-columns: repeat(2, 1fr); }
  .rlv-panneaux { grid-template-columns: 1fr; }
  .rlv-panneau--depliee { margin-top: 0; }
  .rlv-duo-auteur { grid-template-columns: 1fr; }
  .rlv-portrait { max-width: 300px; }
  .rlv-pied__colonnes { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .rlv-ancres { display: none; }
  .rlv-entete .rlv-bouton { display: none; }
  .rlv-menu-declencheur { display: flex; margin-left: auto; }
  .rlv-emballage { grid-template-columns: 1fr; }
  .rlv-emballage__rabat,
  .rlv-emballage__pli {
    border-right: 0;
    border-bottom: 1px solid var(--pli);
    box-shadow: 0 2px 0 var(--email);
    padding-right: 0;
  }
  .rlv-emballage__pli { padding: 26px 0; }
  .rlv-emballage__volet { padding-left: 0; transform: none; padding-top: 30px; }
  .rlv-emballage__mesure { max-width: none; }
  .rlv-debordement { grid-template-columns: 1fr; }
  .rlv-guichet { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  h1 { font-size: 2.15rem; }
  h2 { font-size: 1.6rem; }
  .rlv-section { padding: 52px 0; }
  .rlv-ouverture { padding-top: 38px; }
  .rlv-outils { grid-template-columns: 1fr; }
  .rlv-volets { grid-template-columns: 1fr; }
  .rlv-gains { grid-template-columns: 1fr; }
  .rlv-gain { border-right: 0 !important; box-shadow: none !important; padding-right: 0; }
  .rlv-releve { grid-template-columns: 1fr; }
  .rlv-pied__colonnes { grid-template-columns: 1fr; }
  .rlv-champ--duo { grid-template-columns: 1fr; }
  .rlv-emballage__chiffre { font-size: 2.1rem; }
  .rlv-fuite li { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 480px) {
  .rlv-perfo::before,
  .rlv-perfo::after,
  .rlv-tirage__perfo { display: none; }
  .rlv-cadre { padding: 0 18px; }
  .rlv-rabat, .rlv-formulaire, .rlv-panneau { padding-left: 20px; padding-right: 20px; }
}

/* ---------- mouvement reduit ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rlv-rideau,
  .rlv-rideau.est-levee { clip-path: none; transition: none; }
  .rlv-carte,
  .rlv-parole { opacity: 1; transform: none; transition: none; }
  .rlv-tirage__image.est-levee::after { animation: none; opacity: 0; }
  .rlv-bouton, .rlv-ancres a::after, .rlv-question__signe { transition: none; }
}

/* ---------- impression ---------- */

@media print {
  .rlv-entete, .rlv-panneau-mobile, .rlv-evitement { display: none; }
  body { background: #FFFFFF; font-size: 11pt; }
  .rlv-rideau { clip-path: none; }
}
/* ==========================================================================
   Magazine, Le Cahier des relevailles
   Section ajoutee apres la construction du site, sans modifier une seule
   regle precedente. Le magazine n est pas un module rapporte: il reprend les
   variables de la palette porcelaine, la forme signature du rabat plie
   (bande haute de 18 pixels, angle superieur droit coupe en biais, filet
   double), le motif de perforations de pellicule sur les bords des images et
   la signature d animation, le rideau qui se leve de bas en haut.
   Le corps des articles est du HTML semantique nu, sans aucun attribut class:
   tout y est mis en forme par selecteur de balise, en descendance de
   .rlv-corps, pour qu un article ne paraisse jamais non style.
   ========================================================================== */

/* ---------- grille de cartes d article ---------- */

.rlv-mag-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gouttiere);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rlv-mag-grille--trois { grid-template-columns: repeat(3, 1fr); }

/* ---------- carte d article ---------- */

.rlv-mag-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--email);
  border: 1px solid var(--bordure);
  padding: 18px 0 0;
  margin: 0;
  clip-path: polygon(0 0, calc(100% - var(--biais)) 0, 100% var(--biais), 100% 100%, 0 100%);
  transition: border-color 180ms ease, box-shadow 180ms ease, clip-path 180ms ease;
}

.rlv-mag-carte::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 18px;
  background: var(--bleu-clair);
  border-bottom: 1px solid var(--pli);
  box-shadow: 0 1px 0 var(--email);
  clip-path: polygon(0 0, calc(100% - var(--biais)) 0, 100% var(--biais), 100% 100%, 0 100%);
  z-index: 2;
}

.rlv-mag-carte:hover {
  border-color: var(--terre);
  box-shadow: 0 10px 26px rgba(38, 49, 58, 0.1);
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
}

.rlv-mag-carte__vue {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--glacure);
  margin: 0;
}

.rlv-mag-carte__vue img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 320ms var(--levee);
}
.rlv-mag-carte:hover .rlv-mag-carte__vue img { transform: scale(1.02); }

/* Perforations de pellicule sur les deux bords de l image, jamais plus. */
.rlv-mag-carte__vue::before,
.rlv-mag-carte__vue::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: 14px;
  background-color: var(--email);
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 9px, rgba(0,0,0,0) 9px 18px);
  mask-image: repeating-linear-gradient(to bottom, #000 0 9px, rgba(0,0,0,0) 9px 18px);
  -webkit-mask-size: 6px 18px;
  mask-size: 6px 18px;
  -webkit-mask-position: 4px 0;
  mask-position: 4px 0;
  -webkit-mask-repeat: repeat-y;
  mask-repeat: repeat-y;
  pointer-events: none;
  z-index: 2;
}
.rlv-mag-carte__vue::before { left: 0; }
.rlv-mag-carte__vue::after { right: 0; transform: scaleX(-1); }

.rlv-mag-carte__texte {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 20px 22px 22px;
}

.rlv-mag-carte__angle {
  font-family: var(--compte);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bleu);
  margin: 0 0 10px;
}

.rlv-mag-carte__titre {
  font-family: var(--titre);
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.24;
  margin: 0 0 0.5em;
}
.rlv-mag-carte__titre a { color: var(--ardoise); text-decoration: none; }
.rlv-mag-carte__titre a:hover { color: var(--terre); text-decoration: underline; }

.rlv-mag-carte__extrait {
  font-size: 0.95rem;
  color: var(--ardoise-doux);
  margin: 0 0 18px;
  max-width: none;
}

.rlv-mag-carte__jalons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--bordure);
  box-shadow: inset 0 1px 0 var(--email);
  font-family: var(--compte);
  font-variant-numeric: tabular-nums;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ardoise-doux);
  max-width: none;
}

/* ---------- entete d article ---------- */

.rlv-article { padding: 46px 0 0; }

.rlv-article__entete { max-width: 74ch; margin-bottom: 34px; }

.rlv-article__angle {
  font-family: var(--compte);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terre);
  display: block;
  margin: 0 0 14px;
}

.rlv-article__titre { margin-bottom: 0.45em; }

.rlv-jalons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0 0 30px;
  padding: 12px 0;
  border-top: 1px solid var(--pli);
  border-bottom: 1px solid var(--bordure);
  box-shadow: 0 1px 0 var(--email);
  font-family: var(--compte);
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ardoise-doux);
  max-width: none;
}
.rlv-jalons time { color: var(--ardoise); }

/* ---------- exergue du chapeau ---------- */

.rlv-exergue {
  position: relative;
  background: var(--glacure);
  border: 1px solid var(--bordure);
  padding: 40px 28px 26px;
  margin: 0 0 34px;
  max-width: 74ch;
  font-size: 1.14rem;
  line-height: 1.6;
  color: var(--ardoise);
  clip-path: polygon(0 0, calc(100% - var(--biais)) 0, 100% var(--biais), 100% 100%, 0 100%);
}
.rlv-exergue::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 18px;
  background: var(--terre-claire);
  border-bottom: 1px solid #E2BEB4;
  box-shadow: 0 1px 0 var(--email);
  clip-path: polygon(0 0, calc(100% - var(--biais)) 0, 100% var(--biais), 100% 100%, 0 100%);
}

/* ---------- image a la une de l article ---------- */

.rlv-article__tirage { margin: 0 0 40px; max-width: 900px; }

/* ---------- corps redactionnel, balises nues ---------- */

.rlv-corps {
  max-width: 68ch;
  font-size: 1.05rem;
  line-height: 1.68;
}

.rlv-corps > *:first-child { margin-top: 0; }

.rlv-corps p { max-width: none; margin: 0 0 1.15em; }

.rlv-corps h2 {
  position: relative;
  font-family: var(--titre);
  font-size: 1.62rem;
  font-weight: 700;
  line-height: 1.18;
  margin: 2.1em 0 0.55em;
  padding-top: 22px;
}
.rlv-corps h2::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 76px; height: 4px;
  background: var(--terre);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 0 100%);
}

.rlv-corps h3 {
  font-family: var(--titre);
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.28;
  margin: 1.7em 0 0.45em;
  padding-left: 16px;
  border-left: 3px solid var(--pli);
}

.rlv-corps ul,
.rlv-corps ol {
  list-style: none;
  margin: 0 0 1.4em;
  padding: 0;
}

.rlv-corps ul li {
  position: relative;
  padding: 0 0 0 26px;
  margin-bottom: 0.55em;
}
.rlv-corps ul li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.62em;
  width: 10px; height: 10px;
  background: var(--bleu);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.rlv-corps ol { counter-reset: rlv-etape; }
.rlv-corps ol li {
  position: relative;
  counter-increment: rlv-etape;
  padding: 0 0 0 34px;
  margin-bottom: 0.55em;
}
.rlv-corps ol li::before {
  content: counter(rlv-etape);
  position: absolute;
  left: 0; top: 0.1em;
  font-family: var(--compte);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--terre);
}

.rlv-corps li ul,
.rlv-corps li ol { margin: 0.5em 0 0.2em; }

.rlv-corps strong { font-weight: 700; color: var(--ardoise); }
.rlv-corps em { font-style: italic; }

.rlv-corps a { color: var(--bleu); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rlv-corps a:hover { color: var(--terre); }

/* tableau recapitulatif */
.rlv-corps table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.6em;
  background: var(--email);
  border: 1px solid var(--bordure);
  font-size: 0.95rem;
}
.rlv-corps thead { background: var(--bleu-clair); }
.rlv-corps th {
  text-align: left;
  font-family: var(--compte);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ardoise);
  padding: 12px 14px;
  border-bottom: 1px solid var(--pli);
  vertical-align: bottom;
}
.rlv-corps td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--bordure);
  vertical-align: top;
}
.rlv-corps tbody tr:last-child td { border-bottom: 0; }
.rlv-corps tbody tr:nth-child(even) { background: var(--porcelaine); }
.rlv-corps tbody th {
  font-family: var(--courant);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  background: var(--glacure);
  border-bottom: 1px solid var(--bordure);
}

/* encadre */
.rlv-corps aside {
  position: relative;
  background: var(--email);
  border: 1px solid var(--bordure);
  padding: 42px 24px 22px;
  margin: 0 0 1.7em;
  clip-path: polygon(0 0, calc(100% - var(--biais)) 0, 100% var(--biais), 100% 100%, 0 100%);
}
.rlv-corps aside::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 18px;
  background: var(--bleu-clair);
  border-bottom: 1px solid var(--pli);
  box-shadow: 0 1px 0 var(--email);
  clip-path: polygon(0 0, calc(100% - var(--biais)) 0, 100% var(--biais), 100% 100%, 0 100%);
}
.rlv-corps aside > *:last-child { margin-bottom: 0; }
.rlv-corps aside p { font-size: 0.98rem; }

/* citation */
.rlv-corps blockquote {
  position: relative;
  background: var(--glacure);
  border-left: 4px solid var(--terre);
  padding: 20px 24px;
  margin: 0 0 1.7em;
  font-style: italic;
  color: var(--ardoise);
}
.rlv-corps blockquote p { font-size: 1.02rem; }
.rlv-corps blockquote > *:last-child { margin-bottom: 0; }

/* figure eventuelle du corps */
.rlv-corps figure {
  margin: 0 0 1.7em;
  background: var(--email);
  border: 1px solid var(--bordure);
  padding: 10px;
  clip-path: polygon(0 0, calc(100% - var(--biais)) 0, 100% var(--biais), 100% 100%, 0 100%);
}
.rlv-corps figcaption {
  font-family: var(--compte);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ardoise-doux);
  margin: 10px 4px 2px;
}

/* ---------- appel a l action de fin d article ---------- */

.rlv-appel {
  position: relative;
  background: var(--email);
  border: 1px solid var(--bordure);
  padding: 44px 28px 28px;
  margin: 44px 0 0;
  max-width: 74ch;
  clip-path: polygon(0 0, calc(100% - var(--biais)) 0, 100% var(--biais), 100% 100%, 0 100%);
}
.rlv-appel::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 18px;
  background: var(--terre);
  border-bottom: 1px solid var(--terre-appuyee);
  box-shadow: 0 1px 0 var(--email);
  clip-path: polygon(0 0, calc(100% - var(--biais)) 0, 100% var(--biais), 100% 100%, 0 100%);
}
.rlv-appel__intitule {
  font-family: var(--titre);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.5em;
  color: var(--ardoise);
}
.rlv-appel p { font-size: 0.99rem; }

/* ---------- encart auteur ---------- */

.rlv-encart-auteur {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 22px;
  align-items: start;
  background: var(--glacure);
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--bleu);
  padding: 24px 26px;
  margin: 40px 0 0;
  max-width: 74ch;
}
.rlv-encart-auteur__photo {
  width: 96px;
  height: 96px;
  border: 1px solid var(--bordure);
  background: var(--email);
  padding: 4px;
  object-fit: cover;
}
.rlv-encart-auteur__nom {
  font-family: var(--titre);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 2px;
  color: var(--ardoise);
}
.rlv-encart-auteur__role {
  font-family: var(--compte);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terre);
  margin: 0 0 12px;
}
.rlv-encart-auteur p { font-size: 0.95rem; margin-bottom: 0.8em; max-width: none; }
.rlv-encart-auteur p:last-child { margin-bottom: 0; }

/* ---------- bloc A lire aussi ---------- */

.rlv-lire-aussi { padding: 70px 0; margin-top: 62px; }

.rlv-lire-aussi__entete { margin-bottom: 32px; }
.rlv-lire-aussi__titre {
  font-family: var(--titre);
  font-size: 2.05rem;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.4em;
  color: var(--ardoise);
}

.rlv-lire-aussi__grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gouttiere);
}

.rlv-carte-liee {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--email);
  border: 1px solid var(--bordure);
  padding: 18px 0 0;
  clip-path: polygon(0 0, calc(100% - var(--biais)) 0, 100% var(--biais), 100% 100%, 0 100%);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.rlv-carte-liee::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 18px;
  background: var(--bleu-clair);
  border-bottom: 1px solid var(--pli);
  box-shadow: 0 1px 0 var(--email);
  clip-path: polygon(0 0, calc(100% - var(--biais)) 0, 100% var(--biais), 100% 100%, 0 100%);
  z-index: 2;
}
.rlv-carte-liee:hover { border-color: var(--terre); box-shadow: 0 8px 22px rgba(38, 49, 58, 0.1); }

.rlv-carte-liee__vue {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--glacure);
}
.rlv-carte-liee__vue img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.rlv-carte-liee__vue::before,
.rlv-carte-liee__vue::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: 14px;
  background-color: var(--email);
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 9px, rgba(0,0,0,0) 9px 18px);
  mask-image: repeating-linear-gradient(to bottom, #000 0 9px, rgba(0,0,0,0) 9px 18px);
  -webkit-mask-size: 6px 18px;
  mask-size: 6px 18px;
  -webkit-mask-position: 4px 0;
  mask-position: 4px 0;
  -webkit-mask-repeat: repeat-y;
  mask-repeat: repeat-y;
  pointer-events: none;
  z-index: 2;
}
.rlv-carte-liee__vue::before { left: 0; }
.rlv-carte-liee__vue::after { right: 0; transform: scaleX(-1); }

.rlv-carte-liee__titre {
  font-family: var(--titre);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.26;
  margin: 18px 20px 0.45em;
  max-width: none;
}
.rlv-carte-liee__titre a { color: var(--ardoise); text-decoration: none; }
.rlv-carte-liee__titre a:hover { color: var(--terre); text-decoration: underline; }

.rlv-carte-liee__accroche {
  font-size: 0.92rem;
  color: var(--ardoise-doux);
  margin: 0 20px 20px;
  max-width: none;
}

.rlv-lire-aussi__suite { margin: 30px 0 0; }

/* ---------- section Derniers articles de la page d accueil ---------- */

.rlv-derniers__pied {
  margin: 34px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.rlv-derniers__mention {
  font-family: var(--compte);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ardoise-doux);
  margin: 0;
  max-width: none;
}

/* ---------- listes d articles des pages internes ---------- */

ul.rlv-liste-articles { list-style: none; padding: 0; margin: 0; }
ul.rlv-liste-articles > li {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 8px 22px;
  align-items: baseline;
  padding: 15px 0;
  margin: 0;
  border-bottom: 1px solid var(--bordure);
  box-shadow: 0 1px 0 var(--email);
}
ul.rlv-liste-articles > li:first-child { border-top: 1px solid var(--pli); }
.rlv-liste-articles__date {
  font-family: var(--compte);
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ardoise-doux);
}
.rlv-liste-articles__titre { margin: 0; max-width: none; }
.rlv-liste-articles__titre a { color: var(--ardoise); text-decoration: none; }
.rlv-liste-articles__titre a:hover { color: var(--terre); text-decoration: underline; }
.rlv-liste-articles__angle {
  display: block;
  font-family: var(--compte);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bleu);
  margin-top: 4px;
}

/* ---------- intitules de colonne du pied de page des pages du magazine ----------
   Les pages d article ne portent aucun h2 en dehors du corps redactionnel:
   les intitules du pied de page y sont donc des paragraphes, mis en forme
   exactement comme les h2 du pied de page du reste du site. */

.rlv-pied p.rlv-pied__intitule {
  font-family: var(--compte);
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bleu);
  margin: 0 0 16px;
  max-width: none;
}

/* ---------- adaptations d ecran du magazine ---------- */

@media (max-width: 1080px) {
  .rlv-mag-grille,
  .rlv-mag-grille--trois,
  .rlv-lire-aussi__grille { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .rlv-mag-grille,
  .rlv-mag-grille--trois,
  .rlv-lire-aussi__grille { grid-template-columns: 1fr; }
  .rlv-lire-aussi { padding: 52px 0; margin-top: 46px; }
  .rlv-lire-aussi__titre { font-size: 1.6rem; }
  .rlv-corps h2 { font-size: 1.42rem; }
  .rlv-corps table { display: block; overflow-x: auto; }
  ul.rlv-liste-articles > li { grid-template-columns: 1fr; }
  .rlv-encart-auteur { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .rlv-mag-carte__vue::before,
  .rlv-mag-carte__vue::after,
  .rlv-carte-liee__vue::before,
  .rlv-carte-liee__vue::after { display: none; }
  .rlv-exergue, .rlv-appel { padding-left: 20px; padding-right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .rlv-mag-carte,
  .rlv-carte-liee,
  .rlv-mag-carte__vue img { transition: none; }
  .rlv-mag-carte:hover .rlv-mag-carte__vue img { transform: none; }
}

@media print {
  .rlv-lire-aussi, .rlv-appel { display: none; }
  .rlv-corps { max-width: none; }
}

/* 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}