/* Glyciane, feuille de relevé de repas
   Vocabulaire des classes: nappe, travée, relevé, réglette, marée, courbes,
   constat, geste, assiette, gain, témoin, barème, pli, feuillet, pied.
   Mode clair intégral, aucune variante sombre. */

/* ------------------------------------------------------------------ */
/* 1. Jetons de la marque                                              */
/* ------------------------------------------------------------------ */

:root {
  --fond: #ffffff;
  --fond-alt: #ebf4ef;
  --surface: #f8fbf9;
  --texte: #1e1b2e;
  --texte-doux: #565e76;
  --accent: #612fb8;
  --accent-dense: #4d2494;
  --accent-voile: rgba(97, 47, 184, 0.12);
  --accent-texte: #ffffff;
  --celadon: #2f7f62;
  --celadon-pale: #cfe4da;
  --celadon-voile: #eef6f2;
  --bordure: #d8e6de;

  --titre: "Chakra Petch", "Trebuchet MS", sans-serif;
  --courant: "Lato", "Segoe UI", Arial, sans-serif;
  --releve: "Azeret Mono", "Courier New", monospace;

  --travee: 1240px;
  --gouttiere: 28px;
  --coin: 4px;
  --entete-hauteur: 72px;

  --ombre-plate: 3px 3px 0 var(--celadon-pale);
  --ombre-fine: 1px 1px 0 var(--celadon-pale);
}

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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--courant);
  font-size: 1.06rem;
  font-weight: 400;
  line-height: 1.72;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

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

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

a:hover {
  color: var(--accent-dense);
}

h1,
h2,
h3,
h4 {
  font-family: var(--titre);
  letter-spacing: -0.015em;
  color: var(--texte);
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 {
  font-size: 3.05rem;
  font-weight: 700;
  line-height: 1.08;
}

h2 {
  font-size: 2.05rem;
  font-weight: 600;
  line-height: 1.16;
}

h3 {
  font-size: 1.32rem;
  font-weight: 600;
  line-height: 1.3;
}

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

ul {
  margin: 0 0 1.1em;
  padding-left: 1.15em;
}

li {
  margin-bottom: 0.45em;
}

strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

.chapeau {
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.62;
  color: var(--texte-doux);
  max-width: 60ch;
}

.mention {
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--texte-doux);
}

.surtitre {
  font-family: var(--releve);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin: 0 0 14px;
  padding-left: 16px;
  position: relative;
}

.surtitre::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 3px;
  background: linear-gradient(
    to bottom,
    var(--accent) 0 30%,
    transparent 30%,
    transparent calc(30% + 8px),
    var(--accent) calc(30% + 8px) 100%
  );
}

/* ------------------------------------------------------------------ */
/* 2. Trames: travée, réglette, marée, courbes                         */
/* ------------------------------------------------------------------ */

.travee {
  width: 100%;
  max-width: var(--travee);
  margin: 0 auto;
  padding: 0 24px;
}

.travee--etroite {
  max-width: 860px;
}

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

.reglette::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    to bottom,
    var(--accent) 0 26%,
    transparent 26%,
    transparent calc(26% + 8px),
    var(--accent) calc(26% + 8px) 100%
  );
}

.reglette--celadon::before {
  background: linear-gradient(
    to bottom,
    var(--celadon) 0 26%,
    transparent 26%,
    transparent calc(26% + 8px),
    var(--celadon) calc(26% + 8px) 100%
  );
}

/* Motif signature: lignes de marée horizontales dégradées.
   Huit traits de 1 pixel, espacement décroissant du bas vers le haut. */
.maree {
  height: 96px;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-image:
    linear-gradient(90deg, rgba(47, 127, 98, 0.62) 0%, rgba(47, 127, 98, 0.06) 74%, transparent 92%),
    linear-gradient(90deg, rgba(47, 127, 98, 0.5) 0%, rgba(47, 127, 98, 0.05) 66%, transparent 86%),
    linear-gradient(90deg, rgba(47, 127, 98, 0.46) 0%, rgba(47, 127, 98, 0.05) 78%, transparent 95%),
    linear-gradient(90deg, rgba(47, 127, 98, 0.38) 0%, rgba(47, 127, 98, 0.04) 58%, transparent 80%),
    linear-gradient(90deg, rgba(47, 127, 98, 0.32) 0%, rgba(47, 127, 98, 0.04) 70%, transparent 90%),
    linear-gradient(90deg, rgba(97, 47, 184, 0.26) 0%, rgba(97, 47, 184, 0.03) 52%, transparent 74%),
    linear-gradient(90deg, rgba(47, 127, 98, 0.22) 0%, rgba(47, 127, 98, 0.03) 62%, transparent 84%),
    linear-gradient(90deg, rgba(47, 127, 98, 0.16) 0%, transparent 56%);
  background-position:
    0 0,
    0 6px,
    0 14px,
    0 24px,
    0 36px,
    0 52px,
    0 72px,
    0 95px;
}

.maree--renversee {
  transform: scaleY(-1);
}

.maree--serree {
  height: 60px;
  background-position:
    0 0,
    0 4px,
    0 9px,
    0 15px,
    0 22px,
    0 32px,
    0 45px,
    0 59px;
}

/* Courbes topographiques, décor de fond */
.courbes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.courbes svg {
  width: 100%;
  height: 100%;
  display: block;
}

.courbes--echo {
  opacity: 0.45;
}

/* ------------------------------------------------------------------ */
/* 3. Boutons et effet de tampon appuyé                                */
/* ------------------------------------------------------------------ */

.bouton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 28px;
  border-radius: var(--coin);
  font-family: var(--courant);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
  overflow: hidden;
}

.bouton--plein {
  background: var(--accent);
  color: var(--accent-texte);
  box-shadow: var(--ombre-plate);
}

.bouton--plein:hover {
  background: var(--accent-dense);
  color: var(--accent-texte);
  box-shadow: var(--ombre-fine);
}

.bouton--contour {
  background: var(--fond);
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--ombre-plate);
}

.bouton--contour:hover {
  background: var(--celadon-voile);
  color: var(--accent-dense);
  box-shadow: var(--ombre-fine);
}

.bouton--compact {
  min-height: 42px;
  padding: 0 18px;
  font-size: 0.94rem;
}

.bouton--large {
  width: 100%;
}

/* Signature d animation: le tampon encreur posé puis relevé */
.tampon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-voile);
  opacity: 0;
  pointer-events: none;
}

.tampon:active {
  transform: translateY(2px);
  box-shadow: none;
}

.tampon.est-tamponne::after {
  animation: encrage 220ms ease-out forwards;
}

@keyframes encrage {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-texte);
  padding: 12px 20px;
  z-index: 200;
  font-weight: 700;
  text-decoration: none;
}

.evitement:focus {
  left: 12px;
  top: 12px;
  color: var(--accent-texte);
}

/* ------------------------------------------------------------------ */
/* 4. En tête et navigation                                            */
/* ------------------------------------------------------------------ */

.entete {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--entete-hauteur);
  background: var(--fond);
  border-bottom: 1px solid var(--bordure);
  z-index: 120;
  transition: border-color 200ms ease, border-width 200ms ease;
}

.entete--posee {
  border-bottom: 2px solid var(--accent);
}

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

.enseigne {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--texte);
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.34rem;
  letter-spacing: -0.02em;
}

.enseigne svg {
  flex: none;
}

.cap {
  display: flex;
  align-items: center;
  gap: 22px;
}

.cap__lien {
  font-size: 0.94rem;
  color: var(--texte);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.cap__lien:hover {
  color: var(--accent);
  border-bottom-color: var(--celadon-pale);
}

.plateau {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: var(--fond);
  border: 1.5px solid var(--bordure);
  border-radius: var(--coin);
  cursor: pointer;
}

.plateau span,
.plateau span::before,
.plateau span::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--texte);
  content: "";
  position: relative;
}

.plateau span::before {
  position: absolute;
  top: -6px;
}

.plateau span::after {
  position: absolute;
  top: 6px;
}

.panneau {
  position: fixed;
  inset: var(--entete-hauteur) 0 0 0;
  background: var(--fond);
  z-index: 110;
  padding: 16px 24px 40px;
  overflow-y: auto;
}

.panneau[hidden] {
  display: none;
}

.panneau__lien {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--bordure);
  font-size: 1.1rem;
  color: var(--texte);
  text-decoration: none;
}

.panneau__lien:hover {
  color: var(--accent);
}

.panneau .bouton {
  margin-top: 24px;
}

/* ------------------------------------------------------------------ */
/* 5. Hero, sept colonnes de texte et cinq de photographie             */
/* ------------------------------------------------------------------ */

.nappe {
  padding-top: var(--entete-hauteur);
}

.releve-hero {
  position: relative;
  background: var(--fond);
  padding: 72px 0 0;
  overflow: hidden;
}

.releve-hero__grille {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
  align-items: center;
}

.releve-hero__texte {
  grid-column: span 7;
}

.releve-hero__cliche {
  grid-column: span 5;
}

.releve-hero h1 {
  margin-bottom: 20px;
}

.releve-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 28px 0 26px;
}

.jauge {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 16px;
  background: var(--celadon-voile);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
}

.jauge__valeur {
  font-family: var(--releve);
  font-size: 1.28rem;
  font-weight: 700;
  color: var(--accent);
}

.jauge__libelle {
  font-size: 0.9rem;
  color: var(--texte-doux);
}

/* Traitement photographique imposé: filet céladon, aplat décalé, raccord dégradé */
.cliche {
  position: relative;
  display: block;
}

.cliche::before {
  content: "";
  position: absolute;
  inset: 10px -10px -10px 10px;
  background: var(--celadon-voile);
  z-index: 0;
}

.cliche img {
  position: relative;
  z-index: 1;
  border: 1px solid var(--celadon-pale);
  border-radius: 0;
  width: 100%;
}

.cliche::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: 40px;
  z-index: 2;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(235, 244, 239, 0.85) 62%, #ffffff 100%);
  pointer-events: none;
}

.cliche__legende {
  position: relative;
  z-index: 3;
  margin: 22px 0 0;
  font-family: var(--releve);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--texte-doux);
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* 6. Rythme des sections                                              */
/* ------------------------------------------------------------------ */

.plage {
  position: relative;
  padding: 84px 0;
}

.plage--alt {
  background: var(--fond-alt);
}

.plage--surface {
  background: var(--surface);
}

.plage--serree {
  padding: 60px 0;
}

.plage--debord {
  padding-bottom: 120px;
}

.plage__chapeau {
  max-width: 720px;
  margin-bottom: 46px;
}

.plage__chapeau--decale {
  margin-left: auto;
  margin-right: 0;
  text-align: left;
}

/* ------------------------------------------------------------------ */
/* 7. Problème: trois colonnes de constats chiffrés                    */
/* ------------------------------------------------------------------ */

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

.constat {
  position: relative;
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  padding: 26px 24px 24px 26px;
}

.constat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    to bottom,
    var(--accent) 0 26%,
    transparent 26%,
    transparent calc(26% + 8px),
    var(--accent) calc(26% + 8px) 100%
  );
}

.constat__valeur {
  display: block;
  font-family: var(--releve);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 8px;
}

.constat p {
  margin-bottom: 0;
  font-size: 1rem;
  color: var(--texte-doux);
}

.constat h3 {
  font-size: 1.14rem;
  margin-bottom: 10px;
}

.bilan-visuel {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 44px;
  align-items: center;
}

/* ------------------------------------------------------------------ */
/* 8. Solution: quatre gestes en bande horizontale                     */
/* ------------------------------------------------------------------ */

.gestes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
}

.geste {
  position: relative;
  padding: 34px 26px 34px 28px;
  border-right: 1px solid var(--bordure);
  background: var(--fond);
}

.geste:last-child {
  border-right: 0;
}

.geste::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 3px;
  background: linear-gradient(
    to bottom,
    var(--accent) 0 26%,
    transparent 26%,
    transparent calc(26% + 8px),
    var(--accent) calc(26% + 8px) 100%
  );
}

.geste__rang {
  display: inline-block;
  font-family: var(--releve);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--accent-texte);
  background: var(--accent);
  padding: 3px 10px;
  border-radius: 2px;
  margin-bottom: 14px;
}

.geste h3 {
  font-size: 1.2rem;
}

.geste p {
  font-size: 0.99rem;
  color: var(--texte-doux);
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* 9. Fonctionnalités: grille trois par trois                          */
/* ------------------------------------------------------------------ */

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

.assiette {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  padding: 28px 24px 26px 28px;
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.assiette::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    to bottom,
    var(--celadon) 0 26%,
    transparent 26%,
    transparent calc(26% + 8px),
    var(--celadon) calc(26% + 8px) 100%
  );
}

.assiette:hover {
  box-shadow: var(--ombre-plate);
}

.assiette__etiquette {
  font-family: var(--releve);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--celadon);
  display: block;
  margin-bottom: 10px;
}

.assiette h3 {
  font-size: 1.2rem;
}

.assiette p {
  font-size: 0.99rem;
  color: var(--texte-doux);
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* 10. Avantages: deux colonnes larges, chiffre et explication         */
/* ------------------------------------------------------------------ */

.gains {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
}

.gain {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 22px;
  padding: 26px 0;
  border-bottom: 1px solid var(--bordure);
  align-items: start;
}

.gain__chiffre {
  font-family: var(--releve);
  font-size: 1.72rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}

.gain__unite {
  display: block;
  font-family: var(--releve);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-top: 6px;
}

.gain h3 {
  font-size: 1.14rem;
  margin-bottom: 8px;
}

.gain p {
  margin-bottom: 0;
  font-size: 0.99rem;
  color: var(--texte-doux);
}

.cabinet {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 48px;
  align-items: center;
  margin-top: 64px;
}

/* ------------------------------------------------------------------ */
/* 11. Preuve sociale                                                  */
/* ------------------------------------------------------------------ */

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

.temoin {
  position: relative;
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  padding: 28px 26px 24px 28px;
  display: flex;
  flex-direction: column;
}

.temoin::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    to bottom,
    var(--accent) 0 26%,
    transparent 26%,
    transparent calc(26% + 8px),
    var(--accent) calc(26% + 8px) 100%
  );
}

.temoin blockquote {
  margin: 0 0 20px;
  font-size: 1.02rem;
}

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

.temoin figcaption {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--bordure);
  font-size: 0.9rem;
  color: var(--texte-doux);
}

.temoin figcaption b {
  display: block;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--texte);
}

.temoin__avant-apres {
  font-family: var(--releve);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--celadon);
  margin-bottom: 14px;
  display: block;
}

.compteurs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gouttiere);
  padding: 34px 0 0;
}

.compteur {
  text-align: left;
}

.compteur__valeur {
  display: block;
  font-family: var(--releve);
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}

.compteur__libelle {
  display: block;
  margin-top: 8px;
  font-size: 0.92rem;
  color: var(--texte-doux);
}

/* ------------------------------------------------------------------ */
/* 12. Tarifs                                                          */
/* ------------------------------------------------------------------ */

.bareme {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gouttiere);
  align-items: stretch;
}

.formule {
  position: relative;
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  padding: 30px 26px 28px 30px;
  display: flex;
  flex-direction: column;
}

.formule::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    to bottom,
    var(--accent) 0 26%,
    transparent 26%,
    transparent calc(26% + 8px),
    var(--accent) calc(26% + 8px) 100%
  );
}

.formule--retenue {
  border-color: var(--accent);
  box-shadow: var(--ombre-plate);
}

.formule__fanion {
  position: absolute;
  top: -13px;
  right: 20px;
  font-family: var(--releve);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--accent-texte);
  padding: 4px 12px;
  border-radius: 2px;
}

.formule h3 {
  font-size: 1.36rem;
  margin-bottom: 6px;
}

.formule__prix {
  font-family: var(--releve);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--texte);
  line-height: 1.1;
  display: block;
  margin: 14px 0 2px;
}

.formule__unite {
  display: block;
  font-family: var(--releve);
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-bottom: 16px;
}

.formule__cible {
  font-size: 0.97rem;
  color: var(--texte-doux);
}

.formule__liste {
  list-style: none;
  padding: 0;
  margin: 18px 0 24px;
  border-top: 1px solid var(--bordure);
  padding-top: 18px;
  font-size: 0.96rem;
}

.formule__liste li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 12px;
  color: var(--texte-doux);
}

.formule__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 12px;
  height: 2px;
  background: var(--celadon);
}

.formule .bouton {
  margin-top: auto;
}

.bareme__note {
  margin-top: 34px;
  padding: 20px 24px;
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  position: relative;
  z-index: 1;
}

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

/* ------------------------------------------------------------------ */
/* 13. FAQ, colonne centrée de huit colonnes                           */
/* ------------------------------------------------------------------ */

.plis {
  max-width: 830px;
  margin: 0 auto;
  border-top: 1px solid var(--bordure);
}

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

.pli__bouton {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--titre);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--texte);
  overflow: hidden;
}

.pli__bouton:hover {
  color: var(--accent);
}

.pli__marque {
  flex: none;
  width: 22px;
  height: 22px;
  position: relative;
  margin-top: 5px;
}

.pli__marque::before,
.pli__marque::after {
  content: "";
  position: absolute;
  background: var(--accent);
}

.pli__marque::before {
  left: 0;
  right: 0;
  top: 10px;
  height: 2px;
}

.pli__marque::after {
  top: 0;
  bottom: 0;
  left: 10px;
  width: 2px;
  transition: transform 180ms ease;
}

.pli__bouton[aria-expanded="true"] .pli__marque::after {
  transform: scaleY(0);
}

.pli__reponse {
  padding: 0 0 24px;
}

.pli__reponse[hidden] {
  display: none;
}

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

/* ------------------------------------------------------------------ */
/* 14. Contact                                                         */
/* ------------------------------------------------------------------ */

.feuillet {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 48px;
  align-items: start;
}

.feuillet__form {
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  padding: 32px 30px;
  box-shadow: var(--ombre-plate);
}

.feuillet__garde {
  background: var(--fond-alt);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  padding: 28px 26px;
  position: relative;
}

.feuillet__garde h3 {
  font-size: 1.16rem;
}

.feuillet__garde ul {
  padding-left: 0;
  list-style: none;
  margin-bottom: 0;
}

.feuillet__garde li {
  position: relative;
  padding-left: 20px;
  font-size: 0.97rem;
  color: var(--texte-doux);
  margin-bottom: 14px;
}

.feuillet__garde li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 11px;
  height: 2px;
  background: var(--accent);
}

.rang-champs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.champ {
  display: block;
  margin-bottom: 18px;
}

.champ label,
.champ > span {
  display: block;
  font-family: var(--releve);
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texte);
  margin-bottom: 7px;
}

.champ input[type="text"],
.champ input[type="email"],
.champ select,
.champ textarea {
  width: 100%;
  font-family: var(--courant);
  font-size: 1rem;
  color: var(--texte);
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  padding: 12px 14px;
  line-height: 1.5;
}

.champ input:hover,
.champ select:hover,
.champ textarea:hover {
  border-color: var(--celadon);
}

.champ textarea {
  resize: vertical;
  min-height: 132px;
}

.champ__aide {
  display: block;
  margin-top: 6px;
  font-size: 0.84rem;
  color: var(--texte-doux);
}

.consentement {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 6px 0 22px;
  font-size: 0.92rem;
  color: var(--texte-doux);
  line-height: 1.55;
}

.consentement input {
  margin-top: 4px;
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  flex: none;
}

.consentement label {
  font-family: var(--courant);
  font-size: 0.92rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--texte-doux);
  margin: 0;
}

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

.pied {
  background: var(--surface);
  border-top: 1px solid var(--bordure);
}

.pied__colonnes {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1.6fr;
  gap: 42px;
  padding: 58px 0 44px;
}

.pied h2,
.pied h3 {
  font-size: 0.96rem;
  font-family: var(--releve);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

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

.pied li {
  margin-bottom: 10px;
}

.pied a {
  color: var(--texte);
  text-decoration: none;
  font-size: 0.96rem;
}

.pied a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.pied__positionnement {
  font-size: 0.96rem;
  color: var(--texte-doux);
  max-width: 34ch;
}

.pied__social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 16px;
}

.pied__social a {
  font-family: var(--releve);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--celadon-pale);
}

.pied__editeur {
  font-size: 0.88rem;
  color: var(--texte-doux);
  margin-top: 16px;
}

.pied__barre {
  border-top: 1px solid var(--bordure);
  padding: 20px 0 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  font-size: 0.86rem;
  color: var(--texte-doux);
}

.pied__reseau {
  padding: 0 0 32px;
}

.pied__reseau ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.pied__reseau a {
  font-size: 0.86rem;
  color: var(--texte-doux);
}

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

.fil {
  font-family: var(--releve);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-doux);
  padding: 28px 0 0;
}

.fil a {
  color: var(--texte-doux);
  text-decoration: none;
  border-bottom: 1px solid var(--celadon-pale);
}

.fil a:hover {
  color: var(--accent);
}

.article-legal {
  max-width: 800px;
  padding: 40px 0 80px;
}

.article-legal h2 {
  font-size: 1.56rem;
  margin-top: 46px;
}

.article-legal h3 {
  font-size: 1.16rem;
  margin-top: 30px;
}

.article-legal ul {
  max-width: 68ch;
}

.identite-editeur {
  background: var(--fond-alt);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  padding: 24px 26px;
  margin: 24px 0;
}

.identite-editeur ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.98rem;
}

.identite-editeur li {
  padding: 7px 0;
  border-bottom: 1px solid var(--bordure);
}

.identite-editeur li:last-child {
  border-bottom: 0;
}

.portrait {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: start;
  margin: 36px 0 44px;
}

.portrait img {
  border: 1px solid var(--celadon-pale);
}

.profils {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.profils a {
  font-family: var(--releve);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  padding: 8px 14px;
  display: inline-block;
  background: var(--fond);
}

.profils a:hover {
  border-color: var(--accent);
  background: var(--celadon-voile);
}

.sommaire {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gouttiere);
  margin: 32px 0 48px;
}

.sommaire__fiche {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  padding: 22px 22px 20px 26px;
}

.sommaire__fiche::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    to bottom,
    var(--celadon) 0 26%,
    transparent 26%,
    transparent calc(26% + 8px),
    var(--celadon) calc(26% + 8px) 100%
  );
}

.sommaire__fiche h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.sommaire__fiche p {
  margin-bottom: 0;
  font-size: 0.97rem;
  color: var(--texte-doux);
}

.page-courte {
  min-height: 52vh;
  display: flex;
  align-items: center;
  padding: 80px 0 100px;
  position: relative;
  overflow: hidden;
}

.page-courte__bloc {
  position: relative;
  z-index: 1;
  max-width: 680px;
}

/* ------------------------------------------------------------------ */
/* 17. Apparition au défilement                                        */
/* ------------------------------------------------------------------ */

.paraitre {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 520ms ease, transform 520ms ease;
}

.paraitre.parue {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------------ */
/* 18. Adaptations d écran                                             */
/* ------------------------------------------------------------------ */

@media (max-width: 1080px) {
  :root {
    --gouttiere: 22px;
  }

  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 1.78rem;
  }

  .releve-hero__texte,
  .releve-hero__cliche {
    grid-column: span 12;
  }

  .releve-hero {
    padding-top: 48px;
  }

  .constats,
  .atelier,
  .temoins,
  .bareme {
    grid-template-columns: repeat(2, 1fr);
  }

  .gestes {
    grid-template-columns: repeat(2, 1fr);
  }

  .geste:nth-child(2n) {
    border-right: 0;
  }

  .geste:nth-child(-n + 2) {
    border-bottom: 1px solid var(--bordure);
  }

  .gains {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .cabinet,
  .bilan-visuel,
  .feuillet,
  .portrait {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .compteurs {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }

  .pied__colonnes {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media (max-width: 760px) {
  body {
    font-size: 1.02rem;
  }

  h1 {
    font-size: 2.08rem;
  }

  h2 {
    font-size: 1.56rem;
  }

  .cap {
    display: none;
  }

  .cap--pied {
    display: block;
  }

  .plateau {
    display: inline-flex;
  }

  .entete__cta {
    display: none;
  }

  .plage {
    padding: 56px 0;
  }

  .plage--debord {
    padding-bottom: 76px;
  }

  .constats,
  .atelier,
  .temoins,
  .bareme,
  .gestes,
  .sommaire {
    grid-template-columns: 1fr;
  }

  .geste {
    border-right: 0;
    border-bottom: 1px solid var(--bordure);
  }

  .geste:last-child {
    border-bottom: 0;
  }

  .gain {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .rang-champs {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .compteurs,
  .pied__colonnes {
    grid-template-columns: 1fr;
  }

  .feuillet__form {
    padding: 24px 20px;
  }

  .maree {
    height: 64px;
  }

  .releve-hero__actions .bouton {
    width: 100%;
  }
}

@media (min-width: 761px) {
  .panneau {
    display: none;
  }
}

@media print {
  .entete,
  .panneau,
  .maree,
  .courbes {
    display: none;
  }

  body {
    color: #000;
  }
}

/* ------------------------------------------------------------------ */
/* 19. Mouvement réduit                                                */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .paraitre {
    opacity: 1;
    transform: none;
  }

  .tampon:active {
    transform: none;
    background-color: var(--accent-dense);
  }

  .bouton--contour.tampon:active {
    background-color: var(--celadon-voile);
  }

  .tampon.est-tamponne::after {
    animation: none;
    opacity: 0;
  }
}
/* ------------------------------------------------------------------ */
/* 20. Le Relevé d’Assiette, magazine du site                          */
/* ------------------------------------------------------------------ */
/* Le magazine n est pas un module rapporté: il rejoue la feuille de
   relevé du reste du site. Filet vertical violet interrompu au tiers
   supérieur sur chaque carte et chaque encadré, lignes de marée en
   séparation, photographies posées sur un aplat céladon décalé de
   10 pixels, surtitres et repères chiffrés en Azeret Mono, tampon
   appuyé au clic sur les cartes et les boutons.
   Tout ce qui suit s ajoute aux règles précédentes, sans en modifier
   aucune. Le corps des articles ne porte aucune classe: ses balises
   nues sont mises en forme comme descendantes de .article-corps. */

/* 20.1 En tête de la page d index du magazine                        */

.releve-tete {
  position: relative;
  padding: 40px 0 8px;
}

.releve-tete h1 {
  max-width: 20ch;
  margin-bottom: 18px;
}

.releve-tete .chapeau {
  max-width: 66ch;
}

.releve-jauge {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--releve);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.releve-jauge li {
  margin: 0;
  padding-left: 14px;
  position: relative;
}

.releve-jauge li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--celadon);
}

.releve-jauge b {
  color: var(--accent);
  font-weight: 700;
}

/* 20.2 Grille de cartes d article                                     */

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

.fiches--trio {
  grid-template-columns: repeat(3, 1fr);
}

/* 20.3 Carte d article                                                */

.fiche {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  padding: 0 0 22px;
  transition: box-shadow 180ms ease, border-color 180ms ease;
}

.fiche::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    var(--accent) 0 26%,
    transparent 26%,
    transparent calc(26% + 8px),
    var(--accent) calc(26% + 8px) 100%
  );
}

.fiche:hover {
  box-shadow: var(--ombre-plate);
  border-color: var(--celadon-pale);
}

.fiche__vue {
  position: relative;
  margin: 0;
  display: block;
  border-bottom: 1px solid var(--celadon-pale);
}

.fiche__vue img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Raccord dégradé du céladon vers le blanc, comme sur les clichés du site */
.fiche__vue::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(235, 244, 239, 0.82) 62%, #ffffff 100%);
}

.fiche__texte {
  padding: 20px 22px 0 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.fiche__angle {
  display: block;
  font-family: var(--releve);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--celadon);
  margin-bottom: 10px;
}

.fiche__titre {
  font-size: 1.16rem;
  line-height: 1.34;
  margin-bottom: 10px;
}

.fiche__titre a {
  color: var(--texte);
  text-decoration: none;
}

.fiche__titre a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fiche__extrait {
  font-size: 0.97rem;
  color: var(--texte-doux);
  margin-bottom: 16px;
  max-width: none;
}

.fiche__jalons {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--bordure);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-family: var(--releve);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-doux);
  max-width: none;
}

.fiche__jalons b {
  color: var(--accent);
  font-weight: 700;
}

/* 20.4 En tête d article, fil d Ariane, angle, dates, temps de lecture */

.article-tete {
  position: relative;
  padding: 26px 0 10px;
}

.article-tete .fil {
  padding-top: 0;
}

.article-tete h1 {
  margin: 14px 0 20px;
}

.article-angle {
  display: inline-block;
  font-family: var(--releve);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--celadon-voile);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  padding: 6px 12px;
  margin-top: 18px;
}

/* Exergue du chapeau, sur le filet de mesure de la marque */
.article-exergue {
  position: relative;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.62;
  color: var(--texte-doux);
  max-width: 64ch;
  margin: 0 0 24px;
  padding-left: 22px;
}

.article-exergue::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 3px;
  background: linear-gradient(
    to bottom,
    var(--accent) 0 26%,
    transparent 26%,
    transparent calc(26% + 8px),
    var(--accent) calc(26% + 8px) 100%
  );
}

.article-jalons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0 0 10px;
  padding: 14px 0;
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  font-family: var(--releve);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-doux);
  max-width: none;
}

.article-jalons b {
  color: var(--accent);
  font-weight: 700;
}

.article-jalons a {
  color: var(--texte-doux);
  text-decoration: none;
  border-bottom: 1px solid var(--celadon-pale);
}

.article-jalons a:hover {
  color: var(--accent);
}

/* 20.5 Image à la une de l article                                    */

.article-vue {
  margin: 0 0 12px;
}

.article-legende {
  font-family: var(--releve);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin: 20px 0 40px;
  max-width: none;
}

/* 20.6 Corps d article, balises nues, mesure de lecture de 68 signes   */

.article-corps {
  max-width: 68ch;
  font-size: 1.06rem;
  line-height: 1.72;
}

.article-corps > h2 {
  position: relative;
  font-size: 1.72rem;
  line-height: 1.2;
  margin: 2em 0 0.6em;
  padding-left: 22px;
}

.article-corps > h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: linear-gradient(
    to bottom,
    var(--accent) 0 26%,
    transparent 26%,
    transparent calc(26% + 8px),
    var(--accent) calc(26% + 8px) 100%
  );
}

.article-corps > h3 {
  position: relative;
  font-size: 1.24rem;
  line-height: 1.3;
  margin: 1.7em 0 0.5em;
  padding-left: 22px;
}

.article-corps > h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 12px;
  height: 2px;
  background: var(--celadon);
}

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

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

.article-corps ul li,
.article-corps ol li {
  position: relative;
  margin: 0 0 0.6em;
  padding-left: 26px;
}

.article-corps ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 10px;
  height: 2px;
  background: var(--celadon);
}

.article-corps ol {
  counter-reset: releve-etape;
}

.article-corps ol > li {
  counter-increment: releve-etape;
  padding-left: 34px;
}

.article-corps ol > li::before {
  content: counter(releve-etape);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--releve);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.9;
}

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

.article-corps strong {
  font-weight: 700;
  color: var(--texte);
}

.article-corps em {
  font-style: italic;
}

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

.article-corps a:hover {
  color: var(--accent-dense);
  background: var(--celadon-voile);
}

/* Tableau récapitulatif, colonnes de relevé alignées */
.article-corps table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.6em;
  font-size: 0.98rem;
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--accent);
  background: var(--fond);
}

.article-corps thead {
  background: var(--fond-alt);
}

.article-corps th {
  text-align: left;
  font-family: var(--releve);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte);
  padding: 12px 14px;
  border-bottom: 1px solid var(--bordure);
  vertical-align: top;
}

.article-corps tbody th {
  background: var(--surface);
  font-family: var(--courant);
  font-size: 0.98rem;
  letter-spacing: 0;
  text-transform: none;
}

.article-corps td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--bordure);
  vertical-align: top;
  color: var(--texte-doux);
}

.article-corps tbody tr:last-child th,
.article-corps tbody tr:last-child td {
  border-bottom: 0;
}

/* Encadré, la fiche épinglée à côté de l assiette */
.article-corps aside {
  position: relative;
  background: var(--celadon-voile);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  padding: 22px 24px 22px 26px;
  margin: 0 0 1.6em;
}

.article-corps aside::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    to bottom,
    var(--celadon) 0 26%,
    transparent 26%,
    transparent calc(26% + 8px),
    var(--celadon) calc(26% + 8px) 100%
  );
}

.article-corps aside p:last-child,
.article-corps aside ul:last-child,
.article-corps aside ol:last-child {
  margin-bottom: 0;
}

/* Citation, filet de mesure à gauche */
.article-corps blockquote {
  position: relative;
  margin: 0 0 1.6em;
  padding: 4px 0 4px 26px;
  font-size: 1.14rem;
  line-height: 1.6;
  color: var(--texte);
}

.article-corps blockquote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    to bottom,
    var(--accent) 0 26%,
    transparent 26%,
    transparent calc(26% + 8px),
    var(--accent) calc(26% + 8px) 100%
  );
}

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

.article-corps figure {
  margin: 0 0 1.6em;
}

.article-corps figcaption {
  font-family: var(--releve);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-top: 12px;
}

/* 20.7 Appel à l action de fin d article                              */

.article-appel {
  position: relative;
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  padding: 28px 28px 26px 30px;
  margin: 44px 0 0;
  max-width: 68ch;
}

.article-appel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    to bottom,
    var(--accent) 0 26%,
    transparent 26%,
    transparent calc(26% + 8px),
    var(--accent) calc(26% + 8px) 100%
  );
}

/* Hors article, l appel n a pas de colonne de texte a laquelle s aligner:
   il se centre alors dans sa travee. */
.article-appel--centre {
  margin-left: auto;
  margin-right: auto;
}

.article-appel__titre {
  font-family: var(--titre);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0 0 12px;
}

.article-appel p {
  max-width: none;
}

.article-appel .bouton {
  margin-top: 6px;
}

/* 20.8 Encart auteur                                                  */

.article-auteur {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  padding: 26px 26px 24px 28px;
}

.article-auteur::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    to bottom,
    var(--celadon) 0 26%,
    transparent 26%,
    transparent calc(26% + 8px),
    var(--celadon) calc(26% + 8px) 100%
  );
}

.article-auteur img {
  border: 1px solid var(--celadon-pale);
  border-radius: var(--coin);
}

.article-auteur__nom {
  font-family: var(--titre);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
}

.article-auteur__role {
  display: block;
  font-family: var(--releve);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--celadon);
  margin-bottom: 12px;
}

.article-auteur p {
  font-size: 0.99rem;
  color: var(--texte-doux);
  margin-bottom: 0.8em;
  max-width: 62ch;
}

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

/* 20.9 Bloc A lire aussi                                              */

.article-aussi {
  margin-top: 48px;
}

.article-aussi__titre {
  font-family: var(--titre);
  font-size: 1.56rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 10px;
}

.article-aussi__intro {
  color: var(--texte-doux);
  margin-bottom: 28px;
}

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

.aussi__carte {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: var(--coin);
  padding: 0 0 20px;
  transition: box-shadow 180ms ease;
}

.aussi__carte::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    var(--celadon) 0 26%,
    transparent 26%,
    transparent calc(26% + 8px),
    var(--celadon) calc(26% + 8px) 100%
  );
}

.aussi__carte:hover {
  box-shadow: var(--ombre-plate);
}

.aussi__vue {
  position: relative;
  display: block;
  border-bottom: 1px solid var(--celadon-pale);
}

.aussi__vue img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.aussi__vue::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(235, 244, 239, 0.82) 62%, #ffffff 100%);
}

.aussi__titre {
  font-family: var(--titre);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.32;
  margin: 18px 20px 8px 22px;
  max-width: none;
}

.aussi__titre a {
  color: var(--texte);
  text-decoration: none;
}

.aussi__titre a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.aussi__accroche {
  font-size: 0.95rem;
  color: var(--texte-doux);
  margin: 0 20px 0 22px;
  max-width: none;
}

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

/* Sur la page d accueil, les cartes reposent sur le blanc de la nappe:
   la surface presque blanche les detache, comme les cartes de l atelier. */
.derniers .fiche {
  background: var(--surface);
}

.derniers .fiches {
  margin-top: 6px;
}

.derniers__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--bordure);
}

.derniers__pied p {
  margin: 0;
  color: var(--texte-doux);
  font-size: 0.97rem;
  max-width: 52ch;
}

/* 20.11 Rubriques du pied de page dans le magazine                    */
/* Les pages du magazine reservent h2 et h3 au corps redactionnel:
   les intitules de colonnes du pied de page y passent donc en h4,
   avec exactement la meme allure que sur le reste du site. */

.pied h4 {
  font-size: 0.96rem;
  font-family: var(--releve);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

/* 20.12 Adaptations d écran du magazine                               */

@media (max-width: 1080px) {
  .fiches,
  .fiches--trio,
  .aussi__mur {
    grid-template-columns: repeat(2, 1fr);
  }

  .article-tete h1 {
    max-width: none;
  }
}

@media (max-width: 760px) {
  .fiches,
  .fiches--trio,
  .aussi__mur {
    grid-template-columns: 1fr;
  }

  .article-corps > h2 {
    font-size: 1.44rem;
  }

  .article-corps > h3 {
    font-size: 1.14rem;
  }

  .article-corps table {
    display: block;
    overflow-x: auto;
  }

  .article-auteur {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .article-appel {
    padding: 24px 20px 22px 22px;
  }
}

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