/* ==========================================================================
   Voiloria, feuille de style unique
   Vocabulaire de classes emprunte a l atelier de voiles :
   laize, pan, bati, peigne, biseau, ourlet, nuancier, retourne, jeu, parole.
   Grille isometrique a modules inclines, biseau constant de 18 degres,
   trame de tressage entrelace, retournement de carte au survol.
   ========================================================================== */

:root {
  --opalin: #FBF8F5;
  --creme: #F7EDE9;
  --surface: #FFFFFF;
  --encre: #1A2A31;
  --grisbleu: #5A6B72;
  --ciel: #0D5569;
  --ciel-fonce: #093F4F;
  --sur-ciel: #FFFFFF;
  --corail: #E07A66;
  --perle: #DCD3CE;

  --titre: "Yeseva One", "Times New Roman", Georgia, serif;
  --courant: "Hind", "Segoe UI", Roboto, Arial, sans-serif;
  --carton: "Quattrocento", "Iowan Old Style", Georgia, serif;

  --laize: 1180px;
  --gouttiere: 28px;

  /* biseau a 18 degres : 34 px de course horizontale pour 11 px de chute */
  --biseau: polygon(0 0, 100% 0, 100% 100%, 34px 100%, 0 calc(100% - 11px));
  --biseau-int: polygon(0 0, 100% 0, 100% 100%, 33px 100%, 0 calc(100% - 10px));
  --biseau-menu: polygon(0 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 7px));

  --ombre-basse: drop-shadow(0 10px 22px rgba(26, 42, 49, 0.07));
  --ombre-rase: drop-shadow(0 3px 8px rgba(26, 42, 49, 0.06));
}

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

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

body {
  margin: 0;
  padding-top: 76px;
  background-color: var(--opalin);
  color: var(--encre);
  font-family: var(--courant);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.68;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3, h4 { margin: 0 0 0.5em; }

h1 {
  font-family: var(--titre);
  font-weight: 400;
  font-size: clamp(2.1rem, 1.35rem + 2.5vw, 3.05rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

h2 {
  font-family: var(--titre);
  font-weight: 400;
  font-size: clamp(1.62rem, 1.15rem + 1.5vw, 2.15rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

h3 {
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.28;
}

h4 { font-family: var(--courant); font-weight: 600; font-size: 1.05rem; }

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

strong { font-weight: 600; }

::selection { background: rgba(13, 85, 105, 0.16); }

:focus-visible {
  outline: 3px solid var(--ciel);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Ossature : laize, pan, entetes de section
   -------------------------------------------------------------------------- */

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

.laize--etroite { width: min(100% - 2.5rem, 820px); }

.pan {
  position: relative;
  padding-block: clamp(3.4rem, 2rem + 4.4vw, 6.2rem);
}

.pan--creme { background: var(--creme); }
.pan--surface { background: var(--surface); }

.pan--ciel {
  background: var(--ciel);
  color: var(--sur-ciel);
  padding-block: clamp(2.6rem, 1.8rem + 2.6vw, 3.6rem);
}

.pan__entete { max-width: 720px; margin-bottom: 2.6rem; }
.pan__entete--haut { margin-bottom: 3.4rem; }

.pan__surtitre {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--carton);
  font-style: italic;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--ciel);
  margin: 0 0 0.9rem;
}

.pan__surtitre::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--ciel);
  flex: none;
}

.pan--ciel .pan__surtitre { color: var(--sur-ciel); }
.pan--ciel .pan__surtitre::before { background: var(--sur-ciel); }

.pan__chapeau {
  color: var(--grisbleu);
  font-size: 1.09rem;
}

.epingle {
  display: inline-block;
  font-family: var(--carton);
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  padding: 4px 12px 4px 10px;
  background: var(--creme);
  color: var(--ciel);
  clip-path: var(--biseau-menu);
}

.epingle--corail { background: rgba(224, 122, 102, 0.18); color: #7A2E1F; }

/* --------------------------------------------------------------------------
   Modules inclines et filet de bati
   -------------------------------------------------------------------------- */

.mod {
  position: relative;
  filter: var(--ombre-basse);
}

.mod__face {
  background: var(--surface);
  clip-path: var(--biseau);
  padding: 1.9rem 1.7rem 2.2rem;
  height: 100%;
}

/* fil de bati : le filet longe le biseau et depasse de 24 pixels */
.mod::after {
  content: "";
  position: absolute;
  left: -23px;
  bottom: 7px;
  width: 60px;
  height: 1px;
  background: var(--ciel);
  transform: rotate(18deg);
  transform-origin: 0 50%;
  pointer-events: none;
}

.mod--corail::after { background: var(--corail); }

/* --------------------------------------------------------------------------
   Trame de tressage entrelace
   -------------------------------------------------------------------------- */

.trame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.trame--pied {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(18deg, rgba(13, 85, 105, 0.10) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(162deg, rgba(224, 122, 102, 0.14) 0 1px, transparent 1px 24px);
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  font-family: var(--courant);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  position: relative;
  clip-path: var(--biseau-menu);
  transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.bouton--aplat {
  background: var(--ciel);
  color: var(--sur-ciel);
}

.bouton--aplat:hover { background: var(--ciel-fonce); color: var(--sur-ciel); }

.bouton--filet {
  background: var(--surface);
  color: var(--ciel);
  box-shadow: inset 0 0 0 1.5px var(--ciel);
}

.bouton--filet:hover {
  background: rgba(224, 122, 102, 0.12);
  box-shadow: inset 0 0 0 2px var(--ciel);
  color: var(--ciel);
}

.bouton--clair {
  background: var(--sur-ciel);
  color: var(--ciel);
}

.bouton--clair:hover { background: var(--creme); color: var(--ciel-fonce); }

.bouton-lot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: center;
  margin: 1.8rem 0 1.4rem;
}

.bouton-fil {
  position: relative;
  display: inline-block;
}

.bouton-fil::after {
  content: "";
  position: absolute;
  left: -22px;
  bottom: 4px;
  width: 0;
  height: 1px;
  background: var(--corail);
  transform: rotate(18deg);
  transform-origin: 100% 50%;
  transition: width 200ms ease;
}

.bouton-fil:hover::after { width: 24px; }

/* --------------------------------------------------------------------------
   En tete fixe et peigne de navigation
   -------------------------------------------------------------------------- */

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ciel);
  color: var(--sur-ciel);
  padding: 12px 20px;
  z-index: 90;
}

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

.bati {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: 76px;
  background: var(--opalin);
  transition: height 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  border-bottom: 1px solid transparent;
}

.bati--serre {
  height: 62px;
  border-bottom-color: var(--perle);
  box-shadow: 0 6px 14px rgba(26, 42, 49, 0.05);
}

.bati__rang {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}

.bati__mot {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--titre);
  font-size: 1.42rem;
  letter-spacing: 0.02em;
  color: var(--encre);
  text-decoration: none;
  flex: none;
}

.bati__mot:hover { color: var(--ciel); }

.bati__marque { width: 32px; height: 32px; flex: none; }

.bati__peigne {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 26px;
}

.bati__ancre {
  font-weight: 500;
  font-size: 0.97rem;
  color: var(--encre);
  text-decoration: none;
  position: relative;
  padding-bottom: 3px;
}

.bati__ancre::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1.5px;
  background: var(--ciel);
  transition: width 200ms ease;
}

.bati__ancre:hover::after, .bati__ancre:focus-visible::after { width: 100%; }

.bati__appel { flex: none; }
.bati__appel .bouton { min-height: 44px; padding: 0 20px; font-size: 0.95rem; }

.bati__declic {
  display: none;
  margin-left: auto;
  width: 46px;
  height: 42px;
  background: var(--surface);
  border: 1px solid var(--perle);
  color: var(--ciel);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  clip-path: var(--biseau-menu);
}

.bati__declic span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--ciel);
  box-shadow: 0 -6px 0 var(--ciel), 0 6px 0 var(--ciel);
}

/* panneau plein ecran sur mobile */
.panneau {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--surface);
  padding: 22px 24px 40px;
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 280ms;
}

.panneau[data-ouvert="oui"] { transform: none; visibility: visible; }

.panneau__haut { display: flex; align-items: center; justify-content: space-between; }

.panneau__fermer {
  width: 44px;
  height: 44px;
  background: var(--creme);
  border: 0;
  color: var(--ciel);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  clip-path: var(--biseau-menu);
}

.panneau__liste {
  list-style: none;
  margin: 2.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.panneau__liste li {
  transform: translateX(26px);
  opacity: 0;
  transition: transform 320ms ease, opacity 320ms ease;
}

.panneau[data-ouvert="oui"] .panneau__liste li { transform: none; opacity: 1; }
.panneau[data-ouvert="oui"] .panneau__liste li:nth-child(2) { transition-delay: 40ms; }
.panneau[data-ouvert="oui"] .panneau__liste li:nth-child(3) { transition-delay: 80ms; }
.panneau[data-ouvert="oui"] .panneau__liste li:nth-child(4) { transition-delay: 120ms; }
.panneau[data-ouvert="oui"] .panneau__liste li:nth-child(5) { transition-delay: 160ms; }
.panneau[data-ouvert="oui"] .panneau__liste li:nth-child(6) { transition-delay: 200ms; }
.panneau[data-ouvert="oui"] .panneau__liste li:nth-child(7) { transition-delay: 240ms; }

.panneau__ancre {
  display: block;
  padding: 13px 16px 15px;
  background: var(--opalin);
  color: var(--encre);
  text-decoration: none;
  font-weight: 500;
  clip-path: var(--biseau-menu);
}

.panneau__ancre:hover { background: var(--creme); color: var(--ciel); }
.panneau__pose { margin-top: 1.8rem; }

/* --------------------------------------------------------------------------
   Devanture : deux modules inclines en vis a vis
   -------------------------------------------------------------------------- */

.devanture {
  position: relative;
  padding-block: clamp(2.6rem, 1.6rem + 3.6vw, 4.6rem) clamp(3.2rem, 2rem + 4vw, 5.4rem);
  overflow: hidden;
}

.devanture__diagonale {
  position: absolute;
  left: -12%;
  right: -12%;
  top: 52%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--perle) 12%, var(--ciel) 52%, var(--perle) 88%, transparent);
  transform: rotate(-3.4deg);
  pointer-events: none;
}

.devanture__grille {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(1.8rem, 1rem + 2.6vw, 3.4rem);
  align-items: center;
  position: relative;
  z-index: 1;
}

.devanture__lot { padding-top: 0.6rem; }

.devanture__accroche { margin-bottom: 1rem; }

.devanture__sous {
  font-size: 1.16rem;
  color: var(--grisbleu);
  max-width: 34rem;
}

.jauge {
  margin-top: 1.6rem;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  max-width: 30rem;
  background: var(--surface);
  padding: 16px 20px 20px 18px;
  clip-path: var(--biseau-menu);
  border-left: 3px solid var(--corail);
}

.jauge__nombre {
  font-family: var(--titre);
  font-size: 2.05rem;
  line-height: 1;
  color: var(--ciel);
  flex: none;
}

.jauge__mot { font-size: 0.94rem; color: var(--grisbleu); margin: 0; }

.devanture__vue { position: relative; }
.devanture__vue .cadre-photo { transform: translateY(14px); }

/* cadre photo incline, liesere blanc et bande de trame */
.cadre-photo {
  position: relative;
  background: var(--surface);
  padding: 4px;
  clip-path: var(--biseau);
  filter: var(--ombre-basse);
}

.cadre-photo img { clip-path: var(--biseau-int); width: 100%; }

.cadre-photo__trame {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  height: 40px;
  pointer-events: none;
  opacity: 0.55;
}

.cadre-photo__legende {
  font-family: var(--carton);
  font-style: italic;
  font-size: 0.875rem;
  color: var(--grisbleu);
  margin: 0.9rem 0 0;
  padding-left: 34px;
  max-width: 42ch;
}

/* --------------------------------------------------------------------------
   Glissade : trois bandeaux decales vers la droite
   -------------------------------------------------------------------------- */

.glissade { display: grid; gap: 20px; }

.glissade__cran { position: relative; }
.glissade__cran:nth-child(2) { margin-left: 32px; }
.glissade__cran:nth-child(3) { margin-left: 64px; }

.glissade__cran .mod__face {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 26px;
  align-items: start;
  padding: 1.7rem 1.8rem 2rem 1.6rem;
}

.glissade__cout {
  font-family: var(--titre);
  font-size: 1.72rem;
  line-height: 1.1;
  color: var(--ciel);
  margin: 0;
}

.glissade__unite {
  display: block;
  font-family: var(--carton);
  font-style: italic;
  font-size: 0.84rem;
  color: var(--grisbleu);
  margin-top: 6px;
  letter-spacing: 0.03em;
}

.glissade__cran h3 { margin-bottom: 0.4rem; }
.glissade__cran p { margin-bottom: 0; }

.glissade__somme {
  margin-top: 2.4rem;
  margin-left: 64px;
  font-family: var(--carton);
  font-style: italic;
  color: var(--encre);
  border-left: 3px solid var(--ciel);
  padding-left: 18px;
  max-width: 54ch;
}

/* --------------------------------------------------------------------------
   Montee : quatre etapes sur une ligne isometrique montante
   -------------------------------------------------------------------------- */

.montee {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: end;
}

.montee__pas { position: relative; }
.montee__pas:nth-child(1) { transform: translateY(54px); }
.montee__pas:nth-child(2) { transform: translateY(36px); }
.montee__pas:nth-child(3) { transform: translateY(18px); }
.montee__pas:nth-child(4) { transform: translateY(0); }

.montee__pas .mod__face { padding: 1.6rem 1.5rem 1.9rem; }

.montee__rang {
  position: relative;
  display: inline-block;
  font-family: var(--titre);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--ciel);
  margin-bottom: 0.6rem;
}

.montee__rang .trame {
  inset: -10px -14px;
  width: auto;
  height: auto;
  z-index: -1;
  opacity: 0.9;
}

.montee__pas h3 { font-size: 1.18rem; }
.montee__pas p { font-size: 0.98rem; color: var(--grisbleu); margin-bottom: 0; }

.montee-socle { height: 54px; }

/* --------------------------------------------------------------------------
   Mosaique de six modules retournables
   -------------------------------------------------------------------------- */

.mosaique {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.retourne {
  perspective: 1400px;
  min-height: 268px;
  filter: var(--ombre-rase);
}

.retourne__pivot {
  position: relative;
  display: grid;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.retourne:hover .retourne__pivot,
.retourne:focus-within .retourne__pivot { transform: rotateY(176deg); }

.retourne__face {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--surface);
  clip-path: var(--biseau);
  padding: 1.7rem 1.6rem 2rem;
  box-shadow: inset 0 0 0 1px var(--perle);
}

.retourne__envers {
  transform: rotateY(180deg);
  background: var(--creme);
}

.retourne__etiquette {
  font-family: var(--carton);
  font-style: italic;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--ciel);
  display: block;
  margin-bottom: 0.5rem;
}

.retourne h3 { font-size: 1.12rem; margin-bottom: 0.45rem; }
.retourne p { font-size: 0.97rem; color: var(--grisbleu); margin-bottom: 0; }

.retourne__detail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 0.94rem;
}

.retourne__detail li {
  position: relative;
  padding-left: 20px;
  color: var(--encre);
}

.retourne__detail li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 11px;
  height: 7px;
  background: var(--ciel);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 4px 100%);
}

/* --------------------------------------------------------------------------
   Gains : benefices mesures
   -------------------------------------------------------------------------- */

.gains {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 30px;
}

.gain {
  position: relative;
  padding: 0 0 0 26px;
  border-left: 1px solid var(--perle);
}

.gain::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  width: 3px;
  height: 44px;
  background: var(--ciel);
}

.gain__mesure {
  font-family: var(--titre);
  font-size: 1.85rem;
  line-height: 1.1;
  color: var(--ciel);
  display: block;
  margin-bottom: 0.3rem;
}

.gain h3 { font-size: 1.08rem; margin-bottom: 0.35rem; }
.gain p { font-size: 0.98rem; color: var(--grisbleu); margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Paroles : temoignages
   -------------------------------------------------------------------------- */

.paroles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

.parole { position: relative; }
.parole:nth-child(2), .parole:nth-child(4) { margin-top: 26px; }

.parole .mod__face { padding: 1.8rem 1.7rem 1.9rem; }

.parole blockquote {
  margin: 0 0 1.1rem;
  font-family: var(--carton);
  font-style: italic;
  font-size: 1.03rem;
  line-height: 1.62;
  color: var(--encre);
}

.parole blockquote p:last-child { margin-bottom: 0; }

.parole figcaption {
  font-size: 0.9rem;
  color: var(--grisbleu);
  padding-top: 0.9rem;
  border-top: 1px solid var(--perle);
}

.parole figcaption b { display: block; color: var(--encre); font-weight: 600; font-size: 0.97rem; }

/* bande de chiffres cles sur trame */
.compteur {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  z-index: 1;
}

.compteur__poste { text-align: left; }

.compteur__nombre {
  display: block;
  font-family: var(--titre);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--sur-ciel);
}

.compteur__mot {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 22ch;
}

/* --------------------------------------------------------------------------
   Jeux de formules
   -------------------------------------------------------------------------- */

.jeux {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: stretch;
}

.jeu { perspective: 1600px; min-height: 620px; filter: var(--ombre-basse); }
.jeu--retenu { margin-top: -24px; }

.jeu__pivot {
  position: relative;
  display: grid;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.jeu:hover .jeu__pivot, .jeu:focus-within .jeu__pivot { transform: rotateY(176deg); }

.jeu__face {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--surface);
  clip-path: var(--biseau);
  padding: 1.9rem 1.7rem 2rem;
  box-shadow: inset 0 0 0 1px var(--perle);
  display: flex;
  flex-direction: column;
}

.jeu__face > .epingle { align-self: flex-start; }

.jeu--retenu .jeu__face { box-shadow: inset 0 0 0 2px var(--ciel); }

.jeu__envers { transform: rotateY(180deg); background: var(--creme); }

.jeu__nom {
  font-family: var(--titre);
  font-size: 1.55rem;
  margin-bottom: 0.2rem;
}

.jeu__prix {
  font-family: var(--titre);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--ciel);
  margin: 0.7rem 0 0.2rem;
}

.jeu__unite {
  font-family: var(--carton);
  font-style: italic;
  font-size: 0.86rem;
  color: var(--grisbleu);
  display: block;
  margin-bottom: 1rem;
}

.jeu__cible {
  font-size: 0.96rem;
  color: var(--grisbleu);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--perle);
}

.jeu__liste {
  list-style: none;
  margin: 1.1rem 0 1.6rem;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 0.95rem;
}

.jeu__liste li { position: relative; padding-left: 22px; }

.jeu__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 12px;
  height: 8px;
  background: var(--ciel);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 4px 100%);
}

.jeu__pose { margin-top: auto; }
.jeu__pose .bouton { width: 100%; }

.jeu__envers h3 { font-size: 1.15rem; }
.jeu__envers p { font-size: 0.96rem; }

.jeux__note {
  margin-top: 2.4rem;
  font-size: 0.95rem;
  color: var(--grisbleu);
  max-width: 70ch;
}

/* --------------------------------------------------------------------------
   Questions
   -------------------------------------------------------------------------- */

.questions {
  display: grid;
  gap: 14px;
  max-width: 880px;
}

.question {
  background: var(--surface);
  clip-path: var(--biseau);
  filter: var(--ombre-rase);
}

.question__intitule {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 1.15rem 1.5rem 1.15rem 1.4rem;
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
  color: var(--encre);
}

.question__intitule::-webkit-details-marker { display: none; }

.question__intitule::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 13px;
  height: 13px;
  margin-top: 0.45em;
  border-right: 2px solid var(--ciel);
  border-bottom: 2px solid var(--ciel);
  transform: rotate(45deg);
  transition: transform 220ms ease;
}

.question[open] .question__intitule::after { transform: rotate(225deg); }

.question__intitule:hover { color: var(--ciel); }

.question__reponse {
  padding: 0 1.5rem 1.5rem 1.4rem;
  color: var(--grisbleu);
}

.question__reponse p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Commande : bloc de contact
   -------------------------------------------------------------------------- */

.atelier {
  position: relative;
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(1.8rem, 1rem + 2.4vw, 3.2rem);
  align-items: start;
  z-index: 1;
}

.atelier__mot p { color: var(--grisbleu); }
.atelier__mot .epingle { margin-bottom: 1rem; }

.atelier__voie {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--perle);
  font-size: 0.95rem;
}

.commande {
  position: relative;
  background: var(--surface);
  clip-path: var(--biseau);
  filter: var(--ombre-basse);
  padding: 2rem 1.9rem 2.2rem;
}

.commande__rang {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 20px;
}

.commande__champ { display: grid; gap: 6px; margin-bottom: 16px; }

.commande__libelle {
  font-family: var(--carton);
  font-style: italic;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  color: var(--encre);
}

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

.commande textarea { resize: vertical; min-height: 118px; }

.commande input:focus, .commande select:focus, .commande textarea:focus {
  outline: 3px solid var(--ciel);
  outline-offset: 2px;
  background: var(--surface);
}

.commande__aval {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 0.92rem;
  color: var(--grisbleu);
  margin: 6px 0 1.4rem;
}

.commande__aval input { width: 20px; height: 20px; accent-color: var(--ciel); margin-top: 3px; }

.commande__suite { font-size: 0.88rem; color: var(--grisbleu); margin: 1.1rem 0 0; }

/* --------------------------------------------------------------------------
   Pages de texte suivi
   -------------------------------------------------------------------------- */

.plume { padding-block: clamp(2.6rem, 1.8rem + 3vw, 4.4rem); }

.plume h2 {
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--perle);
}

.plume h3 { margin-top: 1.7rem; }

.plume ul, .plume ol { max-width: 66ch; padding-left: 1.2rem; }
.plume li { margin-bottom: 0.5rem; }

.plume dl { max-width: 66ch; }
.plume dt { font-weight: 600; margin-top: 0.9rem; }
.plume dd { margin: 0 0 0.4rem; color: var(--grisbleu); }

.chemin {
  font-size: 0.87rem;
  color: var(--grisbleu);
  margin-bottom: 1.4rem;
}

.chemin a { color: var(--grisbleu); }

.plume__chapeau {
  font-size: 1.1rem;
  color: var(--grisbleu);
  max-width: 62ch;
}

.portrait {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 30px;
  align-items: start;
  margin: 2.2rem 0 2.6rem;
}

.portrait .cadre-photo { filter: var(--ombre-rase); }

.portrait__socle { font-size: 0.95rem; color: var(--grisbleu); }

.reseau-liens {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.reseau-liens a {
  display: inline-block;
  padding: 7px 14px;
  background: var(--surface);
  color: var(--ciel);
  text-decoration: none;
  font-size: 0.9rem;
  border: 1px solid var(--perle);
  clip-path: var(--biseau-menu);
}

.reseau-liens a:hover { background: var(--creme); }

.sommaire {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 1.8rem;
}

.sommaire__fiche { position: relative; }
.sommaire__fiche .mod__face { padding: 1.5rem 1.5rem 1.7rem; }
.sommaire__fiche h3 { font-size: 1.1rem; margin-bottom: 0.3rem; }
.sommaire__fiche p { font-size: 0.96rem; color: var(--grisbleu); margin-bottom: 0.7rem; }

.avis-court {
  background: var(--creme);
  padding: 1.4rem 1.6rem;
  clip-path: var(--biseau-menu);
  margin: 1.8rem 0;
  max-width: 66ch;
}

.avis-court p:last-child { margin-bottom: 0; }

/* pages courtes : merci et 404 */
.halte {
  min-height: 62vh;
  display: grid;
  align-content: center;
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}

.halte__bloc {
  position: relative;
  background: var(--surface);
  clip-path: var(--biseau);
  padding: 2.6rem 2.4rem 2.8rem;
  max-width: 720px;
  filter: var(--ombre-basse);
}

/* --------------------------------------------------------------------------
   Ourlet : pied de page
   -------------------------------------------------------------------------- */

.ourlet {
  position: relative;
  background: var(--creme);
  padding-block: clamp(2.8rem, 2rem + 2.6vw, 4rem) 0;
  margin-top: 0;
  overflow: hidden;
}

.ourlet__grille {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 34px 30px;
}

.ourlet__titre {
  font-family: var(--carton);
  font-style: italic;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--ciel);
  margin: 0 0 0.9rem;
}

.ourlet__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ourlet__liste a { color: var(--encre); text-decoration: none; font-size: 0.95rem; }
.ourlet__liste a:hover { color: var(--ciel); text-decoration: underline; }

.ourlet__position { font-size: 0.95rem; color: var(--grisbleu); max-width: 34ch; }

.ourlet__editeur { font-size: 0.88rem; color: var(--grisbleu); margin-top: 1rem; }

.ourlet__voisins {
  position: relative;
  z-index: 1;
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--perle);
  font-size: 0.87rem;
  color: var(--grisbleu);
}

.ourlet__voisins ul {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.ourlet__voisins a { color: var(--grisbleu); text-decoration: none; }
.ourlet__voisins a:hover { color: var(--ciel); text-decoration: underline; }

.ourlet__barre {
  position: relative;
  z-index: 1;
  margin-top: 2.2rem;
  padding: 1.1rem 0 1.4rem;
  border-top: 1px solid var(--perle);
  font-size: 0.85rem;
  color: var(--grisbleu);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   Apparition au defilement
   -------------------------------------------------------------------------- */

.au-fil {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.au-fil[data-vu="oui"] { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Adaptations
   -------------------------------------------------------------------------- */

@media (max-width: 1040px) {
  .mosaique { grid-template-columns: repeat(2, 1fr); }
  .montee { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .montee__pas:nth-child(1) { transform: translateY(28px); }
  .montee__pas:nth-child(2) { transform: translateY(0); }
  .montee__pas:nth-child(3) { transform: translateY(28px); }
  .montee__pas:nth-child(4) { transform: translateY(0); }
  .montee-socle { height: 28px; }
  .jeux { grid-template-columns: 1fr; }
  .jeu { min-height: 0; }
  .jeu--retenu { margin-top: 0; }
  .ourlet__grille { grid-template-columns: repeat(2, 1fr); }
  .portrait { grid-template-columns: 200px 1fr; }
}

@media (max-width: 880px) {
  .bati__peigne, .bati__appel { display: none; }
  .bati__declic { display: inline-flex; }
  .devanture__grille { grid-template-columns: 1fr; }
  .devanture__diagonale { display: none; }
  .devanture__vue .cadre-photo { transform: none; }
  .atelier { grid-template-columns: 1fr; }
  .compteur { grid-template-columns: repeat(2, 1fr); gap: 26px 20px; }
  .glissade__cran .mod__face { grid-template-columns: 1fr; gap: 12px; }
  .sommaire { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  body { padding-top: 68px; }
  .bati { height: 68px; }
  .bati--serre { height: 60px; }
  .mosaique { grid-template-columns: 1fr; }
  .montee { grid-template-columns: 1fr; }
  .montee__pas { transform: none !important; }
  .montee-socle { display: none; }
  .paroles { grid-template-columns: 1fr; }
  .parole:nth-child(2), .parole:nth-child(4) { margin-top: 0; }
  .gains { grid-template-columns: 1fr; }
  .glissade__cran:nth-child(2), .glissade__cran:nth-child(3) { margin-left: 0; }
  .glissade__somme { margin-left: 0; }
  .commande__rang { grid-template-columns: 1fr; }
  .ourlet__grille { grid-template-columns: 1fr; }
  .portrait { grid-template-columns: 1fr; }
  .portrait .cadre-photo { max-width: 240px; }
  .retourne { min-height: 0; }
  .retourne__pivot { transform: none !important; }
  .retourne__endroit { display: block; }
  .retourne__envers { position: static; transform: none; margin-top: 10px; }
  .jeu__pivot { transform: none !important; }
  .jeu__envers { position: static; transform: none; margin-top: 12px; }
  .retourne__face, .jeu__face { backface-visibility: visible; -webkit-backface-visibility: visible; }
  .retourne__pivot, .jeu__pivot { display: block; }
  .retourne__face, .jeu__face { grid-area: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .retourne__pivot, .jeu__pivot, .panneau, .panneau__liste li, .au-fil {
    transition-duration: 160ms !important;
  }
  .retourne:hover .retourne__pivot,
  .retourne:focus-within .retourne__pivot,
  .jeu:hover .jeu__pivot,
  .jeu:focus-within .jeu__pivot { transform: none; }
  .retourne__envers, .jeu__envers {
    transform: none;
    opacity: 0;
    transition: opacity 160ms linear;
  }
  .retourne:hover .retourne__envers,
  .retourne:focus-within .retourne__envers,
  .jeu:hover .jeu__envers,
  .jeu:focus-within .jeu__envers { opacity: 1; }
  .retourne:hover .retourne__endroit,
  .retourne:focus-within .retourne__endroit,
  .jeu:hover .jeu__endroit,
  .jeu:focus-within .jeu__endroit { opacity: 0; }
  .retourne__face, .jeu__face { backface-visibility: visible; -webkit-backface-visibility: visible; }
  .retourne:hover .mod::after, .retourne:focus-within .mod::after { transform: translateX(4px) rotate(18deg); }
  .au-fil { opacity: 1; transform: none; }
}

@media print {
  .bati, .panneau, .ourlet__voisins, .bouton-lot { display: none; }
  body { padding-top: 0; }
}
/* ==========================================================================
   Magazine : Nuances et longueurs
   Section ajoutee a la suite, aucune regle precedente n est modifiee.
   Meme palette, meme biseau a 18 degres, meme trame de tressage entrelace
   et meme retournement de carte au survol que le reste du site.
   Toutes les classes du magazine sont prefixees par revue, sauf celles
   deja definies plus haut (laize, pan, mod, epingle, chemin, cadre-photo,
   bouton, bouton-fil, au-fil), qui sont reprises telles quelles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bandes, trame et entetes de section du magazine
   -------------------------------------------------------------------------- */

.revue {
  position: relative;
  padding-block: clamp(2.6rem, 1.8rem + 3.4vw, 4.8rem);
}

.revue--creme { background: var(--creme); }
.revue--surface { background: var(--surface); }
.revue--opalin { background: var(--opalin); }

/* variante en CSS pur du tressage entrelace, deux familles de traits croises */
.revue-trame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    repeating-linear-gradient(18deg, rgba(13, 85, 105, 0.10) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(162deg, rgba(224, 122, 102, 0.14) 0 1px, transparent 1px 24px);
}

.revue-laize { position: relative; z-index: 1; }

.revue__entete { max-width: 760px; margin-bottom: 2.8rem; }
.revue__chapeau { color: var(--grisbleu); font-size: 1.09rem; max-width: 62ch; }

.revue__compte {
  font-family: var(--carton);
  font-style: italic;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  color: var(--ciel);
  border-left: 3px solid var(--corail);
  padding-left: 14px;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Nuancier : grille de cartes d article
   Les cartes sont posees comme des cartons de nuancier ranges en biais.
   -------------------------------------------------------------------------- */

.revue-nuancier {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.revue-nuancier--trois { grid-template-columns: repeat(3, 1fr); }

/* le decalage isometrique : une carte sur trois remonte, comme un le de tulle */
.revue-nuancier > *:nth-child(3n + 2) { margin-top: 22px; }

/* --------------------------------------------------------------------------
   Carte d article
   -------------------------------------------------------------------------- */

.revue-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  filter: var(--ombre-rase);
  transition: filter 200ms ease;
}

.revue-carte:hover, .revue-carte:focus-within { filter: var(--ombre-basse); }

/* fil de bati : le filet longe le biseau et depasse de 24 pixels */
.revue-carte::after {
  content: "";
  position: absolute;
  left: -23px;
  bottom: 7px;
  width: 60px;
  height: 1px;
  background: var(--ciel);
  transform: rotate(18deg);
  transform-origin: 0 50%;
  pointer-events: none;
  transition: background-color 200ms ease, width 200ms ease;
}

.revue-carte:hover::after, .revue-carte:focus-within::after {
  background: var(--corail);
  width: 84px;
}

/* vue : le bloc image qui porte le retournement de carte */
.revue-carte__vue {
  position: relative;
  perspective: 1400px;
  margin: 0;
}

.revue-carte__pivot {
  position: relative;
  display: grid;
  transform-style: preserve-3d;
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.revue-carte:hover .revue-carte__pivot,
.revue-carte:focus-within .revue-carte__pivot { transform: rotateY(176deg); }

.revue-carte__face {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--surface);
  clip-path: var(--biseau);
  padding: 4px;
  overflow: hidden;
}

.revue-carte__face img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  clip-path: var(--biseau-int);
}

.revue-carte__envers {
  transform: rotateY(180deg);
  background: var(--creme);
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 8px;
  padding: 1.4rem 1.5rem 1.7rem;
  text-align: left;
}

.revue-carte__envers .revue-carte__marque {
  font-family: var(--carton);
  font-style: italic;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  color: var(--ciel);
  display: block;
}

.revue-carte__envers .revue-carte__ouvrir {
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--encre);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.revue-carte__envers .revue-carte__ouvrir::before {
  content: "";
  width: 22px;
  height: 10px;
  flex: none;
  background: var(--ciel);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 6px 100%);
}

.revue-carte__corps {
  position: relative;
  background: var(--surface);
  clip-path: var(--biseau);
  padding: 1.4rem 1.5rem 1.7rem;
  box-shadow: inset 0 0 0 1px var(--perle);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: -6px;
}

.revue-carte__titre {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.24rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}

.revue-carte__titre a {
  color: var(--encre);
  text-decoration: none;
  background-image: linear-gradient(var(--ciel), var(--ciel));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1.5px;
  transition: background-size 220ms ease, color 180ms ease;
}

.revue-carte__titre a:hover,
.revue-carte__titre a:focus-visible { color: var(--ciel); background-size: 100% 1.5px; }

.revue-carte__extrait {
  font-size: 0.97rem;
  color: var(--grisbleu);
  margin: 0;
  max-width: none;
}

.revue-carte__pied {
  margin: auto 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--perle);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  font-family: var(--carton);
  font-style: italic;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--grisbleu);
}

.revue-carte__pied time { font-style: italic; }

.revue-carte__duree {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ciel);
}

.revue-carte__duree::before {
  content: "";
  width: 14px;
  height: 8px;
  flex: none;
  background: var(--corail);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 5px 100%);
}

/* carte mise en avant, sur la page d accueil et en tete de sommaire */
.revue-carte--retenue .revue-carte__corps { box-shadow: inset 0 0 0 2px var(--ciel); }

/* --------------------------------------------------------------------------
   Entete d article : fil d Ariane, angle, dates et temps de lecture
   -------------------------------------------------------------------------- */

.revue-tete {
  position: relative;
  background: var(--opalin);
  padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.4rem) clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  border-bottom: 1px solid var(--perle);
}

.revue-tete .chemin { margin-bottom: 1.2rem; }
.revue-tete .epingle { margin-bottom: 1rem; }

.revue-tete h1 { max-width: 22ch; margin-bottom: 0.6rem; }
.revue-tete--large h1 { max-width: 20ch; }

.revue-jalons {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 22px;
  margin: 1.2rem 0 0;
  padding: 0;
  max-width: none;
  list-style: none;
  font-family: var(--carton);
  font-style: italic;
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  color: var(--grisbleu);
}

.revue-jalons > * {
  position: relative;
  padding-left: 16px;
}

.revue-jalons > *::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 10px;
  height: 6px;
  background: var(--ciel);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 4px 100%);
}

.revue-jalons b { font-family: var(--courant); font-style: normal; font-weight: 600; color: var(--ciel); }
.revue-jalons a { color: var(--ciel); }

/* exergue du chapeau, en Quattrocento italique le long d un filet bleu */
.revue-exergue {
  font-family: var(--carton);
  font-style: italic;
  font-size: 1.14rem;
  line-height: 1.62;
  color: var(--encre);
  border-left: 3px solid var(--corail);
  padding-left: 20px;
  margin: 1.4rem 0 0;
  max-width: 60ch;
}

/* image a la une de l article */
.revue-vue { margin: 0 0 0.9rem; }
.revue-vue .cadre-photo { filter: var(--ombre-basse); }

.revue-legende {
  font-family: var(--carton);
  font-style: italic;
  font-size: 0.875rem;
  color: var(--grisbleu);
  margin: 0 0 2.2rem;
  padding-left: 34px;
  max-width: 52ch;
}

/* --------------------------------------------------------------------------
   Corps d article : balises nues, mesure de lecture confortable
   Le texte verse par les redactrices ne porte aucune classe : chaque balise
   est donc mise en forme comme descendante de .revue-corps.
   -------------------------------------------------------------------------- */

.revue-corps {
  max-width: 66ch;
  font-size: 1.0625rem;
  line-height: 1.68;
}

.revue-corps > h2 {
  font-family: var(--titre);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 1.94rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 2.6rem 0 0.9rem;
  padding-left: 34px;
  position: relative;
}

.revue-corps > h2:first-child { margin-top: 0; }

.revue-corps > h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.44em;
  width: 22px;
  height: 12px;
  background: var(--ciel);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 7px 100%);
}

.revue-corps > h3 {
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1.24rem;
  line-height: 1.3;
  color: var(--encre);
  margin: 1.9rem 0 0.6rem;
  padding-left: 34px;
  position: relative;
}

.revue-corps > h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.56em;
  width: 16px;
  height: 1px;
  background: var(--corail);
}

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

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

.revue-corps a {
  color: var(--ciel);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(13, 85, 105, 0.45);
  transition: color 160ms ease, text-decoration-color 160ms ease, background-color 160ms ease;
}

.revue-corps a:hover, .revue-corps a:focus-visible {
  color: var(--ciel-fonce);
  text-decoration-color: var(--corail);
  background: rgba(224, 122, 102, 0.12);
}

.revue-corps ul, .revue-corps ol {
  margin: 0 0 1.4em;
  padding: 0 0 0 34px;
}

.revue-corps ul { list-style: none; }

.revue-corps ul > li {
  position: relative;
  margin-bottom: 0.62em;
  padding-left: 2px;
}

/* puce en petit biseau, le meme angle que la grille */
.revue-corps ul > li::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 0.62em;
  width: 12px;
  height: 8px;
  background: var(--ciel);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 4px 100%);
}

.revue-corps ol { list-style: none; counter-reset: revue-pas; }

.revue-corps ol > li {
  position: relative;
  margin-bottom: 0.62em;
  counter-increment: revue-pas;
}

.revue-corps ol > li::before {
  content: counter(revue-pas);
  position: absolute;
  left: -34px;
  top: 0.06em;
  width: 24px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--creme);
  color: var(--ciel);
  font-family: var(--titre);
  font-size: 0.9rem;
  line-height: 1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 7px 100%, 0 calc(100% - 3px));
}

.revue-corps li > ul, .revue-corps li > ol { margin-top: 0.5em; margin-bottom: 0.2em; }

/* tableau recapitulatif */
.revue-corps table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.7em;
  font-size: 0.97rem;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--perle);
}

.revue-corps thead th {
  background: var(--ciel);
  color: var(--sur-ciel);
  font-family: var(--courant);
  font-weight: 600;
  font-size: 0.92rem;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 0;
}

.revue-corps tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--encre);
  background: var(--creme);
  padding: 11px 14px;
  vertical-align: top;
}

.revue-corps td {
  padding: 11px 14px;
  vertical-align: top;
  border-top: 1px solid var(--perle);
  color: var(--encre);
}

.revue-corps tbody tr:nth-child(even) td { background: rgba(247, 237, 233, 0.5); }

/* encadre : le meme module incline que les cartes du site */
.revue-corps aside {
  position: relative;
  background: var(--creme);
  clip-path: var(--biseau);
  padding: 1.5rem 1.6rem 1.7rem;
  margin: 1.9rem 0;
}

.revue-corps aside::after {
  content: "";
  position: absolute;
  left: -23px;
  bottom: 7px;
  width: 60px;
  height: 1px;
  background: var(--corail);
  transform: rotate(18deg);
  transform-origin: 0 50%;
  pointer-events: none;
}

.revue-corps aside > :last-child { margin-bottom: 0; }
.revue-corps aside p { font-size: 1rem; }

.revue-corps aside ul > li::before { background: var(--corail); }

/* citation */
.revue-corps blockquote {
  margin: 1.9rem 0;
  padding: 0.2rem 0 0.2rem 22px;
  border-left: 3px solid var(--ciel);
  font-family: var(--carton);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--encre);
}

.revue-corps blockquote p { margin-bottom: 0.6em; }
.revue-corps blockquote > :last-child { margin-bottom: 0; }

/* figure et legende, si une redactrice en pose une */
.revue-corps figure { margin: 1.9rem 0; }
.revue-corps figure img { clip-path: var(--biseau); }

.revue-corps figcaption {
  font-family: var(--carton);
  font-style: italic;
  font-size: 0.875rem;
  color: var(--grisbleu);
  margin-top: 0.7rem;
  padding-left: 34px;
}

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

.revue-appel {
  position: relative;
  background: var(--surface);
  clip-path: var(--biseau);
  padding: 2rem 2rem 2.3rem;
  max-width: 760px;
  filter: var(--ombre-basse);
}

.revue-appel__titre {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin: 0 0 0.7rem;
}

.revue-appel p { color: var(--grisbleu); }
.revue-appel .bouton-lot { margin-bottom: 0; }

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

.revue-auteur {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 22px 26px;
  align-items: start;
  background: var(--surface);
  clip-path: var(--biseau);
  padding: 1.7rem 1.8rem 1.9rem;
  box-shadow: inset 0 0 0 1px var(--perle);
  max-width: 780px;
}

.revue-auteur img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  clip-path: var(--biseau-menu);
}

.revue-auteur__nom {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.2;
  margin: 0 0 0.15rem;
}

.revue-auteur__role {
  display: block;
  font-family: var(--carton);
  font-style: italic;
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  color: var(--ciel);
  margin-bottom: 0.7rem;
}

.revue-auteur p { font-size: 0.98rem; color: var(--grisbleu); }
.revue-auteur > div > :last-child { margin-bottom: 0; }

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

.revue-aussi { position: relative; }

.revue-aussi__titre {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

.revue-aussi__intro { color: var(--grisbleu); margin-bottom: 1.9rem; }

.revue-aussi__mur {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.revue-aussi__mur .revue-carte__corps { gap: 0.5rem; }
.revue-aussi__mur .revue-carte__titre { font-size: 1.08rem; }

/* filet de separation, a l angle de la grille */
.revue-filet {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--ciel) 0 64px, var(--perle) 64px);
  margin: 2.6rem 0;
}

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

.revue-derniers { position: relative; }

.revue-derniers__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 30px;
  margin-bottom: 2.4rem;
}

.revue-derniers__mot { max-width: 640px; }
.revue-derniers__mot p { color: var(--grisbleu); margin-bottom: 0; }
.revue-derniers__pose { flex: none; }

.revue-derniers .revue-nuancier > *:nth-child(3n + 2) { margin-top: 22px; }

.revue-suite {
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}

/* --------------------------------------------------------------------------
   Sommaire du magazine, liste datee de la page auteur
   -------------------------------------------------------------------------- */

.revue-releve {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
  border-top: 1px solid var(--perle);
}

.revue-releve li {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 6px 22px;
  align-items: baseline;
  padding: 0.85rem 0.9rem 0.85rem 0;
  border-bottom: 1px solid var(--perle);
  transition: background-color 180ms ease, padding-left 180ms ease;
}

.revue-releve li:hover { background: var(--surface); padding-left: 0.9rem; }

.revue-releve__date {
  font-family: var(--carton);
  font-style: italic;
  font-size: 0.84rem;
  letter-spacing: 0.03em;
  color: var(--grisbleu);
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.revue-releve__date::before {
  content: "";
  width: 12px;
  height: 8px;
  flex: none;
  background: var(--ciel);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 4px 100%);
}

.revue-releve a { color: var(--encre); text-decoration: none; font-weight: 500; }
.revue-releve a:hover { color: var(--ciel); text-decoration: underline; }

.revue-releve__angle {
  display: block;
  font-family: var(--carton);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--grisbleu);
  margin-top: 3px;
}

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

@media (max-width: 1040px) {
  .revue-nuancier, .revue-nuancier--trois, .revue-aussi__mur { grid-template-columns: repeat(2, 1fr); }
  .revue-nuancier > *:nth-child(3n + 2) { margin-top: 0; }
  .revue-nuancier > *:nth-child(2n) { margin-top: 20px; }
  .revue-derniers .revue-nuancier > *:nth-child(3n + 2) { margin-top: 0; }
  .revue-aussi__mur > *:nth-child(2n) { margin-top: 0; }
}

@media (max-width: 880px) {
  .revue-derniers__entete { flex-direction: column; align-items: flex-start; }
  .revue-tete h1, .revue-tete--large h1 { max-width: none; }
}

@media (max-width: 720px) {
  .revue-nuancier, .revue-nuancier--trois, .revue-aussi__mur { grid-template-columns: 1fr; }
  .revue-nuancier > *, .revue-aussi__mur > * { margin-top: 0 !important; }
  .revue-carte__pivot { transform: none !important; display: block; }
  .revue-carte__face { grid-area: auto; backface-visibility: visible; -webkit-backface-visibility: visible; }
  .revue-carte__envers { display: none; }
  .revue-auteur { grid-template-columns: 1fr; }
  .revue-releve li { grid-template-columns: 1fr; }
  .revue-corps table { display: block; overflow-x: auto; }
  .revue-corps > h2, .revue-corps > h3 { padding-left: 26px; }
  .revue-corps > h2::before { width: 18px; }
  .revue-legende, .revue-corps figcaption { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .revue-carte__pivot { transition-duration: 160ms !important; }
  .revue-carte:hover .revue-carte__pivot,
  .revue-carte:focus-within .revue-carte__pivot { transform: none; }
  .revue-carte__envers {
    transform: none;
    opacity: 0;
    transition: opacity 160ms linear;
  }
  .revue-carte:hover .revue-carte__envers,
  .revue-carte:focus-within .revue-carte__envers { opacity: 1; }
  .revue-carte:hover .revue-carte__endroit,
  .revue-carte:focus-within .revue-carte__endroit { opacity: 0; }
  .revue-carte__face { backface-visibility: visible; -webkit-backface-visibility: visible; }
  .revue-carte:hover::after, .revue-carte:focus-within::after { width: 60px; transform: translateX(4px) rotate(18deg); }
}

@media print {
  .revue-carte__envers, .revue-trame, .revue-appel .bouton-lot { display: none; }
  .revue-corps { max-width: none; }
}

/* Le magazine ajoute une entree au peigne de navigation. Entre 881 et 1180
   pixels, la gouttiere et le corps des ancres se resserrent legerement pour
   que la barre tienne sur une seule ligne, sans toucher aux regles du haut. */
@media (min-width: 881px) and (max-width: 1180px) {
  .bati__peigne { gap: 18px; }
  .bati__ancre { font-size: 0.93rem; }
}

/* L etiquette d angle reste a sa largeur de texte dans une carte en colonne. */
.revue-carte__corps > .epingle { align-self: flex-start; }

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