/* ==========================================================================
   Vestilie, feuille de style unique.
   Vocabulaire de l atelier: tringle, portant, tuile, pastille, jauge, ourlet.
   Mode clair integral, aucune variante sombre.
   ========================================================================== */

:root {
  --lin: #FCFBF9;
  --indigo-delave: #EDF0F7;
  --surface: #FFFFFF;
  --ardoise: #14202E;
  --ardoise-douce: #4A5A6E;
  --cyan: #176D82;
  --cyan-appui: #125A6B;
  --indigo: #46508C;
  --filet: #D8DEE7;
  --sur-cyan: #FFFFFF;

  --titre: "Archivo Black", "Arial Black", Impact, sans-serif;
  --lecture: "Merriweather", Georgia, "Times New Roman", serif;
  --regie: "Yantramanav", "Helvetica Neue", Arial, sans-serif;

  --gouttiere: 20px;
  --encoche: 14px;
  --tringle-haut: 72px;
  --laize: 1180px;

  --pose-douce: 0 12px 32px rgba(20, 32, 46, 0.07);
  --pose-basse: 0 4px 14px rgba(20, 32, 46, 0.05);
}

/* Motif signature: traces de circuit imprime a angles droits, coudes a 45 degres,
   pastilles pleines. Motif de 240 sur 240 pixels, repete. */
:root {
  --piste-imprimee: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%2346508C' stroke-width='1'%3E%3Cpath d='M0 40 H52 L76 64 V138 H148 L172 114 V0'/%3E%3Cpath d='M240 196 H154 L130 172 V98 H196'/%3E%3Cpath d='M18 240 V182 H76 L92 166 H240'/%3E%3Cpath d='M0 112 H36 L52 96 H118 V20'/%3E%3Cpath d='M206 240 V214 H240'/%3E%3Cpath d='M240 56 H212 L196 72 V96'/%3E%3C/g%3E%3Cg fill='%2346508C'%3E%3Ccircle cx='52' cy='40' r='2.6'/%3E%3Ccircle cx='76' cy='138' r='2.6'/%3E%3Ccircle cx='172' cy='114' r='2.6'/%3E%3Ccircle cx='154' cy='196' r='2.6'/%3E%3Ccircle cx='130' cy='98' r='2.6'/%3E%3Ccircle cx='196' cy='98' r='2.6'/%3E%3Ccircle cx='76' cy='182' r='2.6'/%3E%3Ccircle cx='92' cy='166' r='2.6'/%3E%3Ccircle cx='52' cy='96' r='2.6'/%3E%3Ccircle cx='118' cy='20' r='2.6'/%3E%3Ccircle cx='206' cy='214' r='2.6'/%3E%3Ccircle cx='196' cy='72' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--tringle-haut) + 16px); }

body {
  margin: 0;
  background: var(--lin);
  color: var(--ardoise);
  font-family: var(--lecture);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 0.6em;
  color: var(--ardoise);
}

h1 { font-size: 3.1rem; }
h2 { font-size: 2.05rem; }
h3 { font-size: 1.3rem; letter-spacing: -0.01em; line-height: 1.22; }
h4 { font-size: 1.05rem; }

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

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

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

/* --------------------------------------------------------------------------
   Elements de langage communs
   -------------------------------------------------------------------------- */

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

.surtitre {
  font-family: var(--regie);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--indigo);
  margin: 0 0 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.surtitre::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  flex: none;
}

.chapo {
  font-family: var(--lecture);
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.68;
  color: var(--ardoise-douce);
  max-width: 62ch;
}

.regie {
  font-family: var(--regie);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.8125rem;
  color: var(--ardoise-douce);
}

.mention {
  font-family: var(--regie);
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ardoise-douce);
}

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--cyan);
  color: var(--sur-cyan);
  font-family: var(--regie);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.85rem 1.4rem;
  z-index: 200;
}
.evitement:focus { left: 0.75rem; top: 0.75rem; }

/* Tuile Vestilie: angles vifs, coin inferieur gauche encoche,
   filet exterieur de 1 pixel, filet interieur blanc de 3 pixels,
   pastille de 7 pixels posee sur le bord haut a 20 pixels du coin. */
.tuile {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-bottom-left-radius: var(--encoche);
  box-shadow: inset 0 0 0 3px var(--surface), var(--pose-douce);
  padding: 1.7rem 1.6rem 1.6rem;
}

.tuile::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 20px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
}

.tuile--calme { background: var(--indigo-delave); box-shadow: inset 0 0 0 3px var(--indigo-delave), var(--pose-basse); }
.tuile--nue { box-shadow: inset 0 0 0 3px var(--surface); }

/* Boutons */
.bouton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 1.6rem;
  font-family: var(--regie);
  font-weight: 500;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  border-bottom-left-radius: var(--encoche);
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.bouton::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 16px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transition: transform 0.28s ease;
}

.bouton:hover::after { transform: translateX(6px); }

.bouton--maitre { background: var(--cyan); color: var(--sur-cyan); }
.bouton--maitre::after { background: var(--sur-cyan); }
.bouton--maitre:hover { background: var(--cyan-appui); color: var(--sur-cyan); }

.bouton--filet {
  background: transparent;
  color: var(--ardoise);
  box-shadow: inset 0 0 0 2px var(--cyan);
}
.bouton--filet::after { background: var(--cyan); }
.bouton--filet:hover { background: var(--indigo-delave); box-shadow: inset 0 0 0 2px var(--indigo); color: var(--ardoise); }

.bouton--menu {
  min-height: 44px;
  padding: 0 0.9rem;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--filet);
  color: var(--ardoise);
  display: none;
}
.bouton--menu::after { display: none; }

.duo-boutons { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   Tringle, en tete fixe
   -------------------------------------------------------------------------- */

.tringle {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--tringle-haut);
  z-index: 120;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--filet);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

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

.tringle.est-descendue {
  border-bottom: 0;
  box-shadow: 0 6px 18px rgba(20, 32, 46, 0.07);
}

.tringle.est-descendue::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--indigo));
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ardoise);
}

.marque__mot {
  font-family: var(--titre);
  font-size: 1.3rem;
  letter-spacing: -0.03em;
}

.tringle__nav ul {
  display: flex;
  gap: 1.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tringle__lien {
  font-family: var(--regie);
  font-weight: 500;
  font-size: 0.79rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ardoise);
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
}
.tringle__lien:hover { color: var(--cyan); border-bottom-color: var(--cyan); }

/* Panneau de cintres, navigation mobile plein ecran */
.panneau {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--lin);
  padding: 1.5rem;
  display: none;
  flex-direction: column;
  overflow-y: auto;
}
.panneau[data-ouvert="oui"] { display: flex; }

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

.panneau__liste {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.panneau__liste a {
  display: block;
  font-family: var(--regie);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ardoise);
  text-decoration: none;
  padding: 0.95rem 0.6rem;
  border-bottom: 1px solid var(--filet);
}
.panneau__liste a:hover { color: var(--cyan); }

/* --------------------------------------------------------------------------
   Pupitre, hero en tableau de bord de tuiles
   -------------------------------------------------------------------------- */

.pupitre {
  position: relative;
  padding: calc(var(--tringle-haut) + 3.4rem) 0 3.6rem;
  background: var(--lin);
  overflow: hidden;
}

.pupitre::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--piste-imprimee);
  background-repeat: repeat;
  opacity: 0.16;
  pointer-events: none;
}

.pupitre::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--filet);
}

.pupitre__grille {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
  align-items: start;
}

.pupitre__maitresse {
  grid-column: span 7;
  padding: 2.4rem 2.2rem 2.2rem;
}

.pupitre__colonne {
  grid-column: span 5;
  display: grid;
  gap: var(--gouttiere);
}

.pupitre h1 { margin-bottom: 0.7rem; }

.pupitre__accroche { max-width: 46ch; }

.repere-chiffre {
  margin-top: 1.9rem;
  padding-top: 1.2rem;
  border-top: 1px dashed var(--filet);
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.repere-chiffre strong {
  font-family: var(--regie);
  font-weight: 700;
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  color: var(--cyan);
}

/* Tuile chiffree avec jauge a aiguille */
.cadran { display: grid; grid-template-columns: 92px 1fr; gap: 1rem; align-items: center; }

.jauge { position: relative; width: 92px; height: 50px; }
.jauge svg { width: 92px; height: 50px; overflow: visible; }
.jauge__arc { fill: none; stroke: var(--filet); stroke-width: 4; stroke-linecap: round; }
.jauge__lecture { fill: none; stroke: var(--cyan); stroke-width: 4; stroke-linecap: round; opacity: 0.28; }

/* Signature d animation: balayage d aiguille de jauge */
.jauge__aiguille {
  stroke: var(--cyan);
  stroke-width: 2;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 46px 46px;
  transition: transform 0.9s cubic-bezier(0.24, 0.9, 0.28, 1.06);
}

.est-balayee .jauge__aiguille { transform: rotate(var(--angle, 0deg)); }

.jauge__pivot { fill: var(--indigo); }

.cadran__valeur {
  font-family: var(--regie);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ardoise);
}

.cadran__unite {
  display: block;
  font-family: var(--regie);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ardoise-douce);
  margin-top: 0.35rem;
}

/* Barre de progression du plafond d achats, meme balayage */
.plafond { margin-top: 0.9rem; }
.plafond__rail { height: 6px; background: var(--filet); border-radius: 3px; overflow: hidden; }
.plafond__part {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--cyan), var(--indigo));
  transition: width 0.9s cubic-bezier(0.24, 0.9, 0.28, 1.06);
}
.est-balayee .plafond__part { width: var(--part, 0%); }

/* --------------------------------------------------------------------------
   Rythme des sections
   -------------------------------------------------------------------------- */

.bande { padding: 4.6rem 0; position: relative; }
.bande--calme { background: var(--indigo-delave); }
.bande--serree { padding: 3.4rem 0; }

.bande--pistee::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--piste-imprimee);
  opacity: 0.16;
  pointer-events: none;
}
.bande--pistee > * { position: relative; }

.bande__entete { max-width: 60ch; margin-bottom: 2.4rem; }
.bande__entete--debord { margin-left: 0; }

/* Probleme: trois tuiles de couts */
.couts {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
}
.couts > li { grid-column: span 4; list-style: none; }
.couts { padding: 0; margin: 0; }

.cout__somme {
  font-family: var(--regie);
  font-weight: 700;
  font-size: 2.1rem;
  font-variant-numeric: tabular-nums;
  color: var(--cyan);
  display: block;
  line-height: 1;
  margin-bottom: 0.55rem;
}

.cout p { margin-bottom: 0; font-size: 1rem; }

/* Solution: quatre etapes reliees par un fil de circuit */
.fil-etapes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
  margin: 0;
  padding: 2.2rem 0 0;
  list-style: none;
}

.fil-etapes::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 6%;
  right: 6%;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--indigo) 0 10px, transparent 10px 18px);
  opacity: 0.55;
}

.etape { grid-column: span 3; position: relative; padding-top: 2.6rem; }

.etape__jeton {
  position: absolute;
  top: 12px;
  left: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cyan);
  color: var(--sur-cyan);
  font-family: var(--regie);
  font-weight: 700;
  font-size: 0.9rem;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 5px var(--lin);
}

.bande--calme .etape__jeton { box-shadow: 0 0 0 5px var(--indigo-delave); }

.etape h3 { margin-bottom: 0.4rem; }
.etape p { font-size: 1rem; margin-bottom: 0; }
.etape__delai {
  font-family: var(--regie);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--indigo);
  display: block;
  margin-bottom: 0.45rem;
}

/* Fonctionnalites: six tuiles sur trois colonnes */
.armoire {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fonction { grid-column: span 4; }
.fonction h3 { margin-bottom: 0.5rem; }
.fonction p { font-size: 1rem; margin-bottom: 0.7rem; }
.fonction p:last-child { margin-bottom: 0; }

.fonction__marque {
  font-family: var(--regie);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--indigo);
  display: block;
  margin-bottom: 0.6rem;
}

/* Avantages: quatre tuiles larges, chiffre en tete */
.gains {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gain { grid-column: span 6; display: grid; grid-template-columns: auto 1fr; gap: 1.3rem; align-items: start; }
.gain__chiffre {
  font-family: var(--regie);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--cyan);
  border-right: 1px solid var(--filet);
  padding-right: 1.3rem;
  min-width: 4.6rem;
}
.gain p { font-size: 1rem; margin-bottom: 0; }
.gain h3 { font-size: 1.15rem; }

/* Photographies dans la tuile signature */
.cadre-photo { padding: 0; overflow: hidden; }
.cadre-photo img { border-bottom-left-radius: var(--encoche); }
.cadre-photo--preuve { border-left: 3px solid var(--cyan); }

.cadre-photo figcaption {
  font-family: var(--regie);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ardoise-douce);
  padding: 0.9rem 1.1rem 1rem;
  border-top: 1px solid var(--filet);
}

.duo-photo {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
  align-items: center;
}
.duo-photo__image { grid-column: span 7; }
.duo-photo__mot { grid-column: span 5; }
.duo-photo--inverse .duo-photo__image { grid-column: 6 / span 7; grid-row: 1; }
.duo-photo--inverse .duo-photo__mot { grid-column: 1 / span 5; grid-row: 1; }

/* Preuve sociale */
.temoins {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
  margin: 0 0 2.4rem;
  padding: 0;
  list-style: none;
}
.temoignage { grid-column: span 4; display: flex; flex-direction: column; }
.temoignage blockquote { margin: 0 0 1.2rem; font-size: 1rem; }
.temoignage blockquote p:last-child { margin-bottom: 0; }
.temoignage figcaption {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--filet);
  font-family: var(--regie);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ardoise-douce);
}
.temoignage figcaption b {
  display: block;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ardoise);
  font-size: 0.8125rem;
}

.compteurs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
  margin: 0;
  padding: 1.8rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-bottom-left-radius: var(--encoche);
}
.compteurs::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--piste-imprimee);
  opacity: 0.10;
  border-bottom-left-radius: var(--encoche);
  pointer-events: none;
}
.compteur { grid-column: span 3; position: relative; }
.compteur b {
  display: block;
  font-family: var(--regie);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--ardoise);
}
.compteur span {
  font-family: var(--regie);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ardoise-douce);
  display: block;
  margin-top: 0.3rem;
}

/* Tarifs */
.rythmes {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.formule { grid-column: span 4; display: flex; flex-direction: column; }
.formule--avancee { transform: translateY(-12px); box-shadow: inset 0 0 0 3px var(--surface), 0 0 0 2px var(--cyan), var(--pose-douce); }

.formule__fanion {
  font-family: var(--regie);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  display: block;
  margin-bottom: 0.5rem;
}
.formule h3 { margin-bottom: 0.35rem; }
.formule__prix {
  font-family: var(--regie);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ardoise);
  display: block;
  margin: 0.7rem 0 0.2rem;
}
.formule__unite { display: block; font-family: var(--regie); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ardoise-douce); }
.formule__cible { font-size: 0.96rem; color: var(--ardoise-douce); margin: 1rem 0 1.1rem; }
.formule__inclus { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: 0.6rem; }
.formule__inclus li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.96rem;
  line-height: 1.55;
}
.formule__inclus li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
}
.formule .bouton { margin-top: auto; width: 100%; }

/* FAQ */
.questions { display: grid; gap: 0.9rem; max-width: 62rem; }
.question { padding: 0; }
.question summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 3rem 1.15rem 1.5rem;
  font-family: var(--regie);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--ardoise);
  position: relative;
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
  content: "";
  position: absolute;
  right: 1.4rem;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -8px;
  border-right: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}
.question[open] summary::after { transform: rotate(225deg); margin-top: -3px; }
.question__reponse { padding: 0 1.5rem 1.4rem; }
.question__reponse p { font-size: 1rem; margin-bottom: 0.8rem; }
.question__reponse p:last-child { margin-bottom: 0; }

/* Contact */
.atelier-contact {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
  align-items: start;
}
.atelier-contact__formulaire { grid-column: span 7; }
.atelier-contact__reperes { grid-column: span 5; display: grid; gap: var(--gouttiere); }

.champs { display: grid; gap: 1.05rem; }
.champ { display: grid; gap: 0.35rem; }
.champ label, .champs > .champ > label {
  font-family: var(--regie);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ardoise-douce);
}
.champ input[type="text"],
.champ input[type="email"],
.champ select,
.champ textarea {
  font-family: var(--lecture);
  font-size: 1rem;
  color: var(--ardoise);
  background: var(--surface);
  border: 1px solid var(--filet);
  border-bottom-left-radius: var(--encoche);
  padding: 0.75rem 0.9rem;
  width: 100%;
}
.champ textarea { resize: vertical; line-height: 1.6; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { border-color: var(--cyan); }

.champ--aveu {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
}
.champ--aveu label {
  font-family: var(--lecture);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ardoise-douce);
}
.champ--aveu input { margin-top: 0.35rem; width: 18px; height: 18px; accent-color: var(--cyan); }

.reperes-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.reperes-liste li { padding-left: 1.35rem; position: relative; font-size: 0.98rem; }
.reperes-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  background: var(--indigo);
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   Ourlet, pied de page
   -------------------------------------------------------------------------- */

.ourlet {
  background: var(--indigo-delave);
  border-top: 1px solid var(--filet);
  padding: 3.4rem 0 1.6rem;
  margin-top: 0;
}

.ourlet__colonnes {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
}
.ourlet__bloc { grid-column: span 3; }
.ourlet__bloc--large { grid-column: span 3; }

.ourlet h2, .ourlet h3, .ourlet p, .ourlet li { color: var(--ardoise); }

.ourlet__titre {
  font-family: var(--regie);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--indigo);
  margin: 0 0 0.9rem;
}

.ourlet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.ourlet ul a {
  font-family: var(--regie);
  font-size: 0.9rem;
  color: var(--ardoise);
  text-decoration: none;
}
.ourlet ul a:hover { color: var(--cyan); text-decoration: underline; }
.ourlet p { font-size: 0.92rem; color: var(--ardoise-douce); }

.plaque {
  margin-top: 2.6rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--filet);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  justify-content: space-between;
  font-family: var(--regie);
  font-size: 0.8125rem;
  color: var(--ardoise-douce);
}
.plaque a { color: var(--ardoise); }

/* --------------------------------------------------------------------------
   Pages internes
   -------------------------------------------------------------------------- */

.feuillet { padding: calc(var(--tringle-haut) + 3rem) 0 4rem; }
.feuillet h1 { font-size: 2.6rem; margin-bottom: 0.8rem; }
.feuillet h2 { font-size: 1.55rem; margin-top: 2.4rem; }
.feuillet h3 { font-size: 1.15rem; margin-top: 1.7rem; }
.feuillet ul, .feuillet ol { max-width: 66ch; padding-left: 1.2rem; }
.feuillet li { margin-bottom: 0.5rem; }
.feuillet dl { max-width: 66ch; }
.feuillet dt { font-family: var(--regie); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.8rem; color: var(--indigo); margin-top: 1rem; }
.feuillet dd { margin: 0.2rem 0 0; }

.fil {
  font-family: var(--regie);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ardoise-douce);
  margin-bottom: 1.2rem;
}
.fil a { color: var(--ardoise-douce); text-decoration: none; }
.fil a:hover { color: var(--cyan); }

.portrait-auteur {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
  align-items: start;
  margin-bottom: 2.6rem;
}
.portrait-auteur__image { grid-column: span 4; padding: 0; overflow: hidden; }
.portrait-auteur__image img { border-bottom-left-radius: var(--encoche); }
.portrait-auteur__mot { grid-column: span 8; }

.profils { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.profils a {
  display: inline-block;
  font-family: var(--regie);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ardoise);
  padding: 0.55rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-bottom-left-radius: 10px;
}
.profils a:hover { border-color: var(--cyan); color: var(--cyan); }

.sommaire-pages { list-style: none; padding: 0; display: grid; gap: var(--gouttiere); grid-template-columns: repeat(12, 1fr); }
.sommaire-pages > li { grid-column: span 6; }
.sommaire-pages h3 { margin-bottom: 0.35rem; }
.sommaire-pages p { font-size: 0.98rem; margin-bottom: 0; }

.grand-blanc { text-align: left; max-width: 46rem; }

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

.au-vu { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; }
.au-vu.est-posee { opacity: 1; transform: none; }

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

@media (max-width: 1080px) {
  .pupitre__maitresse { grid-column: span 12; }
  .pupitre__colonne { grid-column: span 12; grid-template-columns: repeat(3, 1fr); }
  .gain { grid-column: span 12; }
  .duo-photo__image, .duo-photo__mot,
  .duo-photo--inverse .duo-photo__image, .duo-photo--inverse .duo-photo__mot { grid-column: span 12; grid-row: auto; }
  .ourlet__bloc { grid-column: span 6; }
  .portrait-auteur__image, .portrait-auteur__mot { grid-column: span 12; }
  .portrait-auteur__image { max-width: 320px; }
}

@media (max-width: 900px) {
  h1 { font-size: 2.05rem; }
  h2 { font-size: 1.55rem; }
  .tringle__nav, .tringle .bouton--maitre { display: none; }
  .bouton--menu { display: inline-flex; }
  .couts > li { grid-column: span 12; }
  .etape { grid-column: span 6; }
  .fil-etapes::before { display: none; }
  .fonction { grid-column: span 6; }
  .temoignage { grid-column: span 12; }
  .compteur { grid-column: span 6; }
  .formule { grid-column: span 12; }
  .formule--avancee { transform: none; }
  .atelier-contact__formulaire, .atelier-contact__reperes { grid-column: span 12; }
  .sommaire-pages > li { grid-column: span 12; }
  .pupitre__colonne { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  body { font-size: 1rem; }
  .bande { padding: 3.2rem 0; }
  .pupitre { padding-top: calc(var(--tringle-haut) + 2.2rem); }
  .pupitre__maitresse { padding: 1.6rem 1.3rem 1.5rem; }
  .etape { grid-column: span 12; }
  .fonction { grid-column: span 12; }
  .ourlet__bloc { grid-column: span 12; }
  .gain { grid-template-columns: 1fr; }
  .gain__chiffre { border-right: 0; border-bottom: 1px solid var(--filet); padding: 0 0 0.5rem; }
  .duo-boutons .bouton { width: 100%; }
}

@media print {
  .tringle, .panneau, .duo-boutons, .bouton { display: none; }
  body { background: #FFFFFF; }
}

/* Respect du reglage systeme: l aiguille est peinte a sa valeur finale. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms;
    animation-iteration-count: 1;
    transition-duration: 0.001ms;
  }
  .au-vu { opacity: 1; transform: none; }
  .jauge__aiguille { transform: rotate(var(--angle, 0deg)); }
  .plafond__part { width: var(--part, 0%); }
}

/* Sans script actif, rien ne reste masque: les tuiles sont posees et les
   aiguilles de jauge sont peintes directement a leur valeur. */
@media (scripting: none) {
  .au-vu { opacity: 1; transform: none; }
  .jauge__aiguille { transform: rotate(var(--angle, 0deg)); }
  .plafond__part { width: var(--part, 0%); }
  .panneau { display: none; }
}
/* ==========================================================================
   La Jauge des tenues, section magazine.
   Ajoutee en fin de feuille, aucune regle precedente n est modifiee.
   Meme palette, meme tuile encochee a pastille, meme motif de circuit imprime
   et meme balayage que le tableau de bord: le magazine est une piece du site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Enveloppe des pages du magazine, sous la tringle fixe
   -------------------------------------------------------------------------- */

.kiosque { padding: calc(var(--tringle-haut) + 3rem) 0 4.4rem; position: relative; }

.kiosque__entete { max-width: 64ch; margin-bottom: 2.8rem; }
.kiosque__entete h1 { font-size: 2.85rem; margin-bottom: 0.75rem; }
.kiosque__entete .chapo { max-width: 64ch; }

.kiosque__reperes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--regie);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ardoise-douce);
}
.kiosque__reperes li { display: inline-flex; align-items: center; gap: 0.5rem; }
.kiosque__reperes li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  flex: none;
}

/* --------------------------------------------------------------------------
   Grille du sommaire et carte d article
   -------------------------------------------------------------------------- */

.sommaire {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sommaire > li { grid-column: span 4; display: flex; }

/* La carte reprend la tuile Vestilie: le filet interieur blanc de 3 pixels
   devient ici un vrai retrait, pour que la photo se pose dans le cadre. */
.fiche {
  padding: 3px;
  display: flex;
  flex-direction: column;
  width: 100%;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.fiche:hover {
  transform: translateY(-4px);
  border-color: var(--cyan);
  box-shadow: inset 0 0 0 3px var(--surface), 0 18px 38px rgba(20, 32, 46, 0.11);
}
.fiche:focus-within { border-color: var(--cyan); }

.fiche__cadre {
  display: block;
  overflow: hidden;
  background: var(--indigo-delave);
}
.fiche__cadre img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.55s ease;
}
.fiche:hover .fiche__cadre img { transform: scale(1.035); }

/* Rail de lecture: le balayage du plafond d achats, transpose a la duree. */
.fiche__rail {
  display: block;
  height: 3px;
  background: var(--filet);
  overflow: hidden;
}
.fiche__part {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--cyan), var(--indigo));
  transition: width 0.9s cubic-bezier(0.24, 0.9, 0.28, 1.06);
}
.est-balayee .fiche__part { width: var(--part, 0%); }

.fiche__texte {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.35rem 1.4rem 1.45rem;
}

.fiche__angle {
  font-family: var(--regie);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--indigo);
  margin: 0 0 0.7rem;
  max-width: none;
}

.fiche__titre {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.17rem;
  line-height: 1.26;
  letter-spacing: -0.01em;
  margin: 0 0 0.65rem;
  max-width: none;
}
.fiche__titre a { color: var(--ardoise); text-decoration: none; }
.fiche__titre a:hover { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }

.fiche__extrait {
  font-size: 0.98rem;
  line-height: 1.66;
  color: var(--ardoise-douce);
  margin: 0 0 1.2rem;
  max-width: none;
}

.fiche__pied {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  align-items: center;
  font-family: var(--regie);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ardoise-douce);
  padding-top: 0.9rem;
  border-top: 1px solid var(--filet);
}
.fiche__duree { display: inline-flex; align-items: center; gap: 0.45rem; }
.fiche__duree::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  flex: none;
}

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

.derniers__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  margin-top: 2.2rem;
}
.derniers__pied p {
  margin: 0;
  max-width: 46ch;
  font-size: 0.98rem;
  color: var(--ardoise-douce);
}

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

.article { padding: calc(var(--tringle-haut) + 2.4rem) 0 4.4rem; }

.entete-article { max-width: 68ch; margin-bottom: 2.2rem; }
.entete-article h1 { font-size: 2.75rem; margin: 0.4rem 0 1rem; }

.entete-article__marques {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.4rem;
  align-items: center;
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
  font-family: var(--regie);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ardoise-douce);
}
.entete-article__marques li { display: inline-flex; align-items: center; gap: 0.5rem; }
.entete-article__marques li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  flex: none;
}
.entete-article__marques .est-angle { color: var(--indigo); font-weight: 500; letter-spacing: 0.14em; }

/* Meme balayage que la barre du plafond d achats: la duree de lecture est
   rapportee a une echelle de dix minutes. */
.entete-article__lecture { max-width: 22rem; margin: 0 0 1.6rem; }
.entete-article__rail { display: block; height: 6px; background: var(--filet); border-radius: 3px; overflow: hidden; }
.entete-article__part {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--cyan), var(--indigo));
  transition: width 0.9s cubic-bezier(0.24, 0.9, 0.28, 1.06);
}
.est-balayee .entete-article__part { width: var(--part, 0%); }

/* Exergue du chapeau: tuile calme, filet cyan sur le bord gauche. */
.exergue {
  font-family: var(--lecture);
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.68;
  color: var(--ardoise);
  max-width: 66ch;
  margin: 0 0 2.2rem;
  padding: 1.4rem 1.5rem 1.4rem 1.6rem;
  background: var(--indigo-delave);
  border-left: 3px solid var(--cyan);
  border-bottom-left-radius: var(--encoche);
}
.exergue p { margin: 0; max-width: none; }

.article__photo { padding: 3px; margin: 0 0 2.6rem; }
.article__photo img { width: 100%; height: auto; border-bottom-left-radius: var(--encoche); }

/* --------------------------------------------------------------------------
   Corps redactionnel: aucune classe, uniquement des balises nues.
   Chaque balise est mise en forme comme descendante de .corps, pour qu un
   article ne puisse jamais paraitre non style faute d attribut.
   -------------------------------------------------------------------------- */

.corps { max-width: 66ch; }

.corps > *:first-child { margin-top: 0; }
.corps > h2:first-child { padding-top: 0; border-top: 0; }
.corps > h2:first-child::before { display: none; }

.corps h2 {
  font-size: 1.72rem;
  line-height: 1.16;
  margin: 2.9rem 0 0.9rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--filet);
  position: relative;
}
.corps h2::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
}

.corps h3 {
  font-size: 1.16rem;
  line-height: 1.28;
  margin: 2rem 0 0.7rem;
  color: var(--indigo);
}

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

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

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

.corps ul, .corps ol { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.corps li { margin: 0 0 0.7rem; padding-left: 1.5rem; position: relative; }
.corps li:last-child { margin-bottom: 0; }

.corps ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
}

.corps ol { counter-reset: piste; }
.corps ol > li { counter-increment: piste; padding-left: 2.3rem; }
.corps ol > li::before {
  content: counter(piste);
  position: absolute;
  left: 0;
  top: 0.1em;
  min-width: 1.6rem;
  text-align: center;
  font-family: var(--regie);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--indigo);
  border-bottom: 2px solid var(--cyan);
  padding-bottom: 1px;
}

.corps li ul, .corps li ol { margin: 0.6rem 0 0; }

/* Tableau recapitulatif: en tete en Yantramanav, filets discrets,
   coin inferieur gauche encoche comme les tuiles. */
.corps table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.8rem;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-bottom-left-radius: var(--encoche);
  font-size: 0.97rem;
}
.corps thead th {
  font-family: var(--regie);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  color: var(--sur-cyan);
  background: var(--cyan);
  padding: 0.75rem 0.9rem;
  border: 0;
}
.corps tbody th {
  font-family: var(--regie);
  font-weight: 700;
  font-size: 0.9rem;
  text-align: left;
  color: var(--ardoise);
}
.corps td, .corps tbody th {
  padding: 0.75rem 0.9rem;
  border-top: 1px solid var(--filet);
  vertical-align: top;
  line-height: 1.6;
}
.corps tbody tr:nth-child(even) { background: var(--indigo-delave); }

/* Encadre recapitulatif: tuile calme, pastille sur le bord haut. */
.corps aside {
  position: relative;
  margin: 0 0 1.9rem;
  padding: 1.4rem 1.5rem 1.2rem;
  background: var(--indigo-delave);
  border: 1px solid var(--filet);
  border-bottom-left-radius: var(--encoche);
  font-size: 1rem;
}
.corps aside::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 20px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
}
.corps aside > *:last-child { margin-bottom: 0; }

/* Citation: filet cyan au bord gauche, texte en Merriweather leger. */
.corps blockquote {
  margin: 0 0 1.9rem;
  padding: 0.2rem 0 0.2rem 1.4rem;
  border-left: 3px solid var(--cyan);
  font-weight: 300;
  font-size: 1.12rem;
  line-height: 1.7;
  color: var(--ardoise);
}
.corps blockquote > *:last-child { margin-bottom: 0; }

.corps figure { margin: 0 0 1.9rem; }
.corps figure img { border-bottom-left-radius: var(--encoche); }
.corps figcaption {
  font-family: var(--regie);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ardoise-douce);
  margin-top: 0.6rem;
}

/* --------------------------------------------------------------------------
   Rappel produit en fin d article
   -------------------------------------------------------------------------- */

.relance { max-width: 66ch; margin: 2.8rem 0 0; }
.relance p { max-width: none; }
.relance .bouton { margin-top: 0.6rem; }

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

.encart-auteur {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 1.3rem;
  align-items: start;
  max-width: 66ch;
  margin: 3rem 0 0;
}
.encart-auteur img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 1px solid var(--filet);
  border-bottom-left-radius: 10px;
}
.encart-auteur__nom {
  font-family: var(--regie);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--indigo);
  margin: 0 0 0.4rem;
  max-width: none;
}
.encart-auteur p { font-size: 0.98rem; max-width: none; }
.encart-auteur p:last-child { margin-bottom: 0; }

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

.lire-aussi { margin-top: 3.4rem; }
.lire-aussi__grille {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
  margin-top: 1.6rem;
}
.liee {
  grid-column: span 4;
  padding: 3px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.liee:hover {
  transform: translateY(-4px);
  border-color: var(--cyan);
  box-shadow: inset 0 0 0 3px var(--surface), 0 18px 38px rgba(20, 32, 46, 0.11);
}
.liee__cadre { display: block; overflow: hidden; background: var(--indigo-delave); }
.liee__cadre img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.55s ease; }
.liee:hover .liee__cadre img { transform: scale(1.035); }
.liee__texte { padding: 1.15rem 1.25rem 1.3rem; }
.liee__titre {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.28;
  letter-spacing: -0.01em;
  margin: 0 0 0.55rem;
  max-width: none;
}
.liee__titre a { color: var(--ardoise); text-decoration: none; }
.liee__titre a:hover { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.liee__accroche {
  font-size: 0.94rem;
  line-height: 1.62;
  color: var(--ardoise-douce);
  margin: 0;
  max-width: none;
}

/* --------------------------------------------------------------------------
   Liste des articles sur auteur.html et plan-du-site.html
   -------------------------------------------------------------------------- */

.parutions { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; max-width: 62rem; }
.parutions > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem 1.4rem;
  align-items: baseline;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--filet);
}
.parutions a { color: var(--ardoise); text-decoration: none; }
.parutions a:hover { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.parutions__date {
  font-family: var(--regie);
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ardoise-douce);
  white-space: nowrap;
}

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

@media (max-width: 1080px) {
  .sommaire > li { grid-column: span 6; }
  .liee { grid-column: span 6; }
}

@media (max-width: 900px) {
  .kiosque__entete h1 { font-size: 2.05rem; }
  .entete-article h1 { font-size: 2.05rem; }
  .corps h2 { font-size: 1.5rem; }
  .sommaire > li { grid-column: span 12; }
  .liee { grid-column: span 12; }
}

@media (max-width: 620px) {
  .kiosque { padding-top: calc(var(--tringle-haut) + 2rem); }
  .article { padding-top: calc(var(--tringle-haut) + 1.6rem); }
  .corps table { display: block; overflow-x: auto; }
  .encart-auteur { grid-template-columns: 1fr; }
  .relance .bouton { width: 100%; }
  .parutions > li { grid-template-columns: 1fr; }
}

/* Un lien de plus dans la tringle depuis l ouverture du magazine: la navigation
   se resserre juste avant de basculer dans le panneau plein ecran. */
@media (max-width: 1080px) {
  .tringle__nav ul { gap: 0.95rem; }
  .tringle__lien { font-size: 0.75rem; letter-spacing: 0.07em; }
}

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