/* ==========================================================================
   Taxappia, feuille de style unique
   Regime chromatique clair menthe et graphite, motif d appareillage de briques,
   grille hero a cercle central rayonnant et satellites,
   signature d animation par depliement vertical des blocs.
   ========================================================================== */

:root {
  --fond: #F2F8F4;
  --fond-alt: #E4EFE9;
  --surface: #FFFFFF;
  --texte: #101A17;
  --texte-doux: #4A5F58;
  --ambre: #F2B705;
  --ambre-texte: #182420;
  --vert: #0F6B57;
  --bordure: #C9DCD3;

  --graphite-voile: rgba(16, 26, 23, 0.20);
  --coupe: 18px;
  --filet: 3px;

  --titre: "Sora", "Trebuchet MS", sans-serif;
  --courant: "Urbanist", "Segoe UI", sans-serif;
  --registre: "Kreon", Georgia, serif;

  --travee-y: clamp(4.5rem, 8vw, 7.5rem);
  --largeur: 1220px;
  --gouttiere: clamp(1.1rem, 3vw, 2rem);

  --appareillage: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='56' viewBox='0 0 192 56'%3E%3Cg fill='none' stroke='%23C9DCD3' stroke-width='1'%3E%3Cpath d='M0 0.5H192M0 28.5H192'/%3E%3Cpath d='M0.5 0V28M96.5 0V28M48.5 28V56M144.5 28V56'/%3E%3C/g%3E%3C/svg%3E");
  --appareillage-graphite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='56' viewBox='0 0 192 56'%3E%3Cg fill='none' stroke='%23101A17' stroke-width='1'%3E%3Cpath d='M0 0.5H192M0 28.5H192'/%3E%3Cpath d='M0.5 0V28M96.5 0V28M48.5 28V56M144.5 28V56'/%3E%3C/g%3E%3C/svg%3E");
}

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

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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--courant);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--titre);
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 5vw, 3.25rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.15rem); font-weight: 600; }
h3 { font-size: 1.35rem; font-weight: 600; }
h4 { font-size: 1.0625rem; font-weight: 600; }

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

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

ul, ol { margin: 0 0 1.1em; padding-left: 1.15rem; }
li { margin-bottom: 0.45em; }

strong { font-weight: 700; }

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

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ambre);
  color: var(--ambre-texte);
  font-family: var(--titre);
  font-weight: 600;
  padding: 0.9rem 1.4rem;
  z-index: 90;
}
.evitement:focus { left: 0; }

.hors-ecran {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------ blocs communs --- */

.cadre {
  width: min(100% - 2 * var(--gouttiere), var(--largeur));
  margin-inline: auto;
}

.travee {
  position: relative;
  padding-block: var(--travee-y);
}

.travee--menthe { background: var(--fond-alt); }
.travee--graphite { background: var(--texte); color: var(--fond); }

.surtitre {
  font-family: var(--registre);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-doux);
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 1rem;
}
.surtitre::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--ambre);
  flex: none;
}
.travee--graphite .surtitre { color: #9FBFB2; }

.chapeau {
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--texte-doux);
  max-width: 62ch;
}
.travee--graphite .chapeau { color: #BFD6CB; }

.etiquette {
  font-family: var(--registre);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--bordure);
  background: var(--fond);
  color: var(--texte-doux);
  display: inline-block;
}
.etiquette--ambre { background: var(--ambre); border-color: var(--ambre); color: var(--ambre-texte); }
.etiquette--vert { background: var(--vert); border-color: var(--vert); color: #EAF6F1; }

.unite {
  font-family: var(--registre);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--texte-doux);
  display: block;
  letter-spacing: 0.04em;
}

.date-campagne {
  font-family: var(--registre);
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* bloc signature: coin superieur droit coupe et filet de base */
.bloc {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-bottom: var(--filet) solid var(--texte-doux);
  padding: 1.6rem 1.5rem 1.5rem;
  clip-path: polygon(0 0, calc(100% - var(--coupe)) 0, 100% var(--coupe), 100% 100%, 0 100%);
}
.bloc--appel { border-bottom-color: var(--ambre); }
.bloc--constat { border-bottom-color: var(--vert); }

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

.action {
  display: inline-block;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  padding: 16px 30px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  position: relative;
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

.action--ambre {
  background: var(--ambre);
  color: var(--ambre-texte);
  box-shadow: inset 0 -3px 0 0 var(--ambre-texte);
}
.action--ambre:hover {
  color: var(--ambre-texte);
  transform: translateY(3px);
  box-shadow: inset 0 -6px 0 0 var(--ambre-texte);
}
.action--ambre:active { transform: translateY(5px); box-shadow: inset 0 -1px 0 0 var(--ambre-texte); }

.action--filet {
  background: transparent;
  color: var(--texte);
  box-shadow: inset 0 0 0 2px var(--texte);
}
.action--filet:hover {
  background: var(--fond-alt);
  color: var(--texte);
  box-shadow: inset 0 0 0 2px var(--vert);
  transform: translateY(3px);
}
.action--filet:active { transform: translateY(5px); }

.action--clair {
  background: var(--ambre);
  color: var(--ambre-texte);
  box-shadow: inset 0 -3px 0 0 var(--ambre-texte);
}

.paire-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 1.8rem 0 1.4rem;
}

/* ------------------------------------------------------------ motif --- */

.appareillage {
  position: absolute;
  inset: 0;
  background-image: var(--appareillage);
  background-repeat: repeat;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
.appareillage--dense { opacity: 0.12; }
.appareillage--filigrane { opacity: 0.06; }

.travee > .cadre { position: relative; z-index: 1; }

/* ------------------------------------------------------------ entete --- */

.bandeau {
  position: fixed;
  inset: 0 0 auto 0;
  height: 76px;
  z-index: 60;
  background: rgba(242, 248, 244, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bordure);
  transition: height 200ms ease, border-color 200ms ease;
}
.bandeau.est-cale { height: 64px; border-bottom-color: var(--graphite-voile); }

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

.jauge-defilement {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 0;
  background: var(--ambre);
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--texte);
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}
.marque__bloc { flex: none; }
.marque__pia { color: var(--texte-doux); }

.ancres {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ancres a {
  font-family: var(--courant);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--texte);
  text-decoration: none;
  padding: 0.4rem 0;
  position: relative;
}
.ancres a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--ambre);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 180ms ease;
}
.ancres a:hover::after, .ancres a:focus-visible::after { transform: scaleY(1); }

.bouton-briques {
  display: none;
  background: transparent;
  border: 2px solid var(--texte);
  padding: 0.55rem 0.6rem;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.bouton-briques span {
  display: block;
  height: 2px;
  background: var(--texte);
  margin: 4px 0;
}
.bouton-briques span:nth-child(1) { width: 24px; margin-left: 0; }
.bouton-briques span:nth-child(2) { width: 18px; margin-left: 6px; }
.bouton-briques span:nth-child(3) { width: 24px; margin-left: 0; }

.panneau {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--fond);
  padding: 96px var(--gouttiere) 2rem;
  transform-origin: top center;
  transform: rotateX(-90deg);
  opacity: 0;
  visibility: hidden;
  transition: transform 300ms cubic-bezier(0.16, 0.84, 0.44, 1), opacity 200ms ease, visibility 300ms;
}
.panneau.est-ouvert { transform: rotateX(0); opacity: 1; visibility: visible; }
.panneau ul { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.panneau li { border-bottom: 1px solid var(--bordure); }
.panneau a {
  display: block;
  padding: 0.95rem 0;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--texte);
  text-decoration: none;
}

/* ------------------------------------------------------------- hero --- */

.rayonnement {
  position: relative;
  padding-block: calc(76px + var(--travee-y)) var(--travee-y);
  overflow: hidden;
}

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

.rayonnement__mot { grid-column: 1 / span 6; }

.rayonnement__cadran {
  grid-column: 7 / span 6;
  position: relative;
  min-height: 540px;
}

.cadran__filets {
  position: absolute;
  top: 50%; left: 50%;
  width: 520px; height: 520px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.disque-solde {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 320px; height: 320px;
  border-radius: 50%;
  background: var(--texte);
  color: var(--fond);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  z-index: 2;
}
.disque-solde__montant {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 2.75rem;
  line-height: 1;
  letter-spacing: -0.02em;
}
.disque-solde .unite { color: #9FBFB2; margin-top: 0.35rem; }
.disque-solde__separateur {
  width: 64px; height: 1px;
  background: rgba(242, 248, 244, 0.35);
  margin: 1.1rem 0;
}
.disque-solde__jours {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--ambre);
  line-height: 1;
}

.satellite {
  position: absolute;
  z-index: 3;
  width: 176px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-bottom: var(--filet) solid var(--texte-doux);
  padding: 0.75rem 0.85rem 0.7rem;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.satellite__valeur {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.1;
}
.satellite__intitule {
  font-family: var(--registre);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-doux);
  display: block;
  margin-top: 0.2rem;
}
.satellite--fideles { top: 2%; left: 4%; border-bottom-color: var(--vert); }
.satellite--perdues { top: 20%; right: -4%; border-bottom-color: var(--ambre); }
.satellite--nouvelles { bottom: 22%; right: -2%; }
.satellite--conventions { bottom: 0; left: 10%; }
.satellite--versement { top: 44%; left: -8%; border-bottom-color: var(--vert); }

.reassurance {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  border-left: var(--filet) solid var(--ambre);
  padding-left: 0.9rem;
  font-size: 0.9375rem;
  color: var(--texte-doux);
  max-width: 52ch;
}

.vue-hero {
  position: relative;
  z-index: 1;
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
  align-items: end;
}
.cliche {
  position: relative;
  background: var(--fond-alt);
  padding: 0 8px 8px 0;
}
.cliche::before {
  content: "";
  position: absolute;
  left: -8px; bottom: -8px;
  width: 100%; height: 100%;
  background: var(--fond-alt);
  z-index: 0;
}
.cliche img {
  position: relative;
  z-index: 1;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  filter: saturate(0.85) contrast(1.03);
}
.cliche--hero { grid-column: 1 / span 8; }
.legende-cliche {
  grid-column: 9 / span 4;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--texte-doux);
  border-top: 1px solid var(--bordure);
  padding-top: 0.9rem;
}
.legende-cliche p { margin-bottom: 0; }

/* --------------------------------------------------------- probleme --- */

.axe-perte {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 2px 1fr;
  gap: 0 2.5rem;
  align-items: start;
  margin-top: 2.5rem;
}
.axe-perte__ligne {
  grid-column: 2;
  grid-row: 1 / span 6;
  background: linear-gradient(to bottom, transparent, var(--bordure) 10%, var(--bordure) 90%, transparent);
}
.constat {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-bottom: var(--filet) solid var(--ambre);
  padding: 1.5rem 1.4rem;
  margin-bottom: 1.6rem;
  clip-path: polygon(0 0, calc(100% - var(--coupe)) 0, 100% var(--coupe), 100% 100%, 0 100%);
}
.constat h3 { margin-bottom: 0.5rem; }
.constat p { margin-bottom: 0; font-size: 1rem; }
.constat__cout {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--registre);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--vert);
}
.axe-perte .constat:nth-of-type(odd) { grid-column: 1; }
.axe-perte .constat:nth-of-type(even) { grid-column: 3; margin-top: 3.2rem; }

.encart-defaut {
  margin-top: 1rem;
  background: var(--texte);
  color: var(--fond);
  border-bottom: var(--filet) solid var(--ambre);
  padding: 1.6rem 1.6rem 1.4rem;
  clip-path: polygon(0 0, calc(100% - var(--coupe)) 0, 100% var(--coupe), 100% 100%, 0 100%);
}
.encart-defaut p { color: #CFE2D8; margin-bottom: 0; }
.encart-defaut h3 { color: var(--fond); }

/* --------------------------------------------------------- solution --- */

.frise {
  position: relative;
  margin-top: 3rem;
  padding-left: 3.5rem;
}
.frise::before {
  content: "";
  position: absolute;
  left: 15px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--bordure);
}
.etape {
  position: relative;
  margin-bottom: 2.4rem;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-bottom: var(--filet) solid var(--texte-doux);
  padding: 1.5rem 1.6rem 1.3rem;
  clip-path: polygon(0 0, calc(100% - var(--coupe)) 0, 100% var(--coupe), 100% 100%, 0 100%);
}
.etape:last-child { margin-bottom: 0; }
.etape__jalon {
  position: absolute;
  left: -3.5rem; top: 1.4rem;
  width: 32px; height: 32px;
  background: var(--ambre);
  color: var(--ambre-texte);
  font-family: var(--titre);
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.etape__date {
  font-family: var(--registre);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vert);
  display: block;
  margin-bottom: 0.4rem;
}
.etape p:last-child { margin-bottom: 0; }

.solution__grille {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 3rem;
  align-items: start;
}
.cliche--terrain { margin-top: 1rem; }

/* --------------------------------------------- mur de fonctionnalites --- */

.mur {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: 3rem;
}
.brique {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-bottom: var(--filet) solid var(--texte-doux);
  padding: 1.6rem 1.5rem 1.4rem;
  clip-path: polygon(0 0, calc(100% - var(--coupe)) 0, 100% var(--coupe), 100% 100%, 0 100%);
}
.brique:nth-child(3n + 2) { margin-top: 28px; }
.brique:nth-child(3n) { margin-top: 56px; }
.brique h3 { margin-bottom: 0.55rem; }
.brique p { font-size: 1rem; margin-bottom: 0; }
.brique p + p { margin-top: 0.7rem; }
.brique__numero {
  font-family: var(--registre);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: var(--texte-doux);
  display: block;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid var(--bordure);
  padding-bottom: 0.5rem;
}

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

.assise {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  margin-top: 2.6rem;
}
.chiffre-cle {
  background: rgba(242, 248, 244, 0.06);
  border: 1px solid rgba(201, 220, 211, 0.28);
  border-bottom: var(--filet) solid var(--ambre);
  padding: 1.5rem 1.3rem 1.3rem;
  clip-path: polygon(0 0, calc(100% - var(--coupe)) 0, 100% var(--coupe), 100% 100%, 0 100%);
}
.chiffre-cle__valeur {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--fond);
  letter-spacing: -0.02em;
}
.chiffre-cle .unite { color: var(--ambre); margin-top: 0.4rem; }
.chiffre-cle p { color: #BFD6CB; font-size: 0.9375rem; margin: 0.9rem 0 0; }

.rang-briques {
  margin-top: 2.8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
}
.rang-briques figcaption {
  font-family: var(--registre);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  color: #BFD6CB;
  max-width: 42ch;
}

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

.compteurs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-bottom: 3rem;
}
.compteur {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-bottom: var(--filet) solid var(--vert);
  padding: 1.3rem 1.2rem 1.1rem;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.compteur__valeur {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.02em;
}

.temoignages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.temoignage {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-bottom: var(--filet) solid var(--texte-doux);
  padding: 1.7rem 1.5rem 1.4rem;
  margin: 0;
  clip-path: polygon(0 0, calc(100% - var(--coupe)) 0, 100% var(--coupe), 100% 100%, 0 100%);
  display: flex;
  flex-direction: column;
}
.temoignage:nth-child(2) { margin-top: 28px; }
.temoignage:nth-child(3) { margin-top: 56px; }
.temoignage blockquote { margin: 0 0 1.2rem; }
.temoignage blockquote p { font-size: 1rem; }
.temoignage blockquote p:last-child { margin-bottom: 0; }
.temoignage figcaption {
  margin-top: auto;
  border-top: 1px solid var(--bordure);
  padding-top: 0.9rem;
  font-size: 0.875rem;
  color: var(--texte-doux);
}
.temoignage figcaption b {
  display: block;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1rem;
  color: var(--texte);
}
.cachet {
  align-self: flex-start;
  margin-bottom: 1rem;
}

/* ------------------------------------------------------------ tarifs --- */

.licences {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  align-items: start;
  margin-top: 3rem;
}
.licence {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-bottom: var(--filet) solid var(--texte-doux);
  padding: 1.8rem 1.6rem 1.6rem;
  clip-path: polygon(0 0, calc(100% - var(--coupe)) 0, 100% var(--coupe), 100% 100%, 0 100%);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.licence--avancee {
  margin-block: -24px;
  border: 2px solid var(--texte);
  border-bottom: 6px solid var(--ambre);
}
.licence__prix {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 2.75rem;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-top: 0.6rem;
}
.licence__cible {
  font-size: 0.9375rem;
  color: var(--texte-doux);
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  padding: 0.9rem 0;
  margin: 1.2rem 0;
}
.licence__inclus {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6rem;
  font-size: 0.9375rem;
}
.licence__inclus li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.7rem;
  line-height: 1.5;
}
.licence__inclus li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5em;
  width: 9px; height: 9px;
  background: var(--vert);
}
.licence .action { margin-top: auto; text-align: center; }
.mention-tarif {
  margin-top: 2.2rem;
  font-size: 0.9375rem;
  color: var(--texte-doux);
  max-width: 78ch;
}

/* --------------------------------------------------------------- faq --- */

.registre-faq {
  max-width: 820px;
  margin: 2.6rem auto 0;
}
.question {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-bottom: var(--filet) solid var(--texte-doux);
  margin-bottom: 0.9rem;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.question summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 3.2rem 1.05rem 1.3rem;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.0625rem;
  position: relative;
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
  content: "";
  position: absolute;
  right: 1.3rem; top: 1.5rem;
  width: 14px; height: 2px;
  background: var(--texte);
  box-shadow: 0 0 0 0 transparent;
}
.question summary::before {
  content: "";
  position: absolute;
  right: 1.65rem; top: 1.1rem;
  width: 2px; height: 14px;
  background: var(--ambre);
  transition: transform 200ms ease;
}
.question[open] summary::before { transform: scaleY(0); }
.question__reponse { padding: 0 1.3rem 1.3rem; }
.question__reponse p { font-size: 1rem; margin-bottom: 0.7rem; }
.question__reponse p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------- contact --- */

.pupitre {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2.6rem;
  margin-top: 2.6rem;
  align-items: start;
}

.formulaire {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-bottom: var(--filet) solid var(--ambre);
  padding: 1.9rem 1.8rem 1.7rem;
  clip-path: polygon(0 0, calc(100% - var(--coupe)) 0, 100% var(--coupe), 100% 100%, 0 100%);
}
.duo-champs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.champ { margin-bottom: 1.1rem; }
.champ label {
  display: block;
  font-family: var(--registre);
  font-size: 0.8125rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-bottom: 0.35rem;
}
.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-bottom: 2px solid var(--texte-doux);
  padding: 0.75rem 0.85rem;
  border-radius: 0;
}
.champ textarea { resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  border-bottom-color: var(--ambre);
  background: var(--surface);
}
.champ--accord {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.9375rem;
  color: var(--texte-doux);
  margin-bottom: 1.4rem;
}
.champ--accord label {
  font-family: var(--courant);
  font-size: 0.9375rem;
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
}
.champ--accord input { margin-top: 0.35rem; accent-color: var(--vert); }
.sous-formulaire {
  margin-top: 1.2rem;
  font-size: 0.875rem;
  color: var(--texte-doux);
}

.rappel {
  background: var(--fond-alt);
  border: 1px solid var(--bordure);
  border-bottom: var(--filet) solid var(--vert);
  padding: 1.6rem 1.5rem;
  clip-path: polygon(0 0, calc(100% - var(--coupe)) 0, 100% var(--coupe), 100% 100%, 0 100%);
}
.rappel h3 { font-size: 1.1rem; }
.calendrier {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
  font-size: 0.9375rem;
}
.calendrier li {
  border-bottom: 1px dotted var(--bordure);
  padding-bottom: 0.55rem;
  margin-bottom: 0.55rem;
}
.calendrier li:last-child { border-bottom: 0; }
.calendrier b {
  display: block;
  font-family: var(--registre);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vert);
}

/* -------------------------------------------------------------- pied --- */

.pied {
  position: relative;
  background: var(--texte);
  color: #CFE2D8;
  padding-block: 3.6rem 0;
  overflow: hidden;
}
.pied a { color: #CFE2D8; text-decoration: none; }
.pied a:hover { color: var(--ambre); text-decoration: underline; }
.pied__colonnes {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 2.2rem;
}
.pied h2, .pied h3 { color: var(--fond); }
.pied h3 {
  font-family: var(--registre);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9FBFB2;
  margin-bottom: 1rem;
}
.pied ul { list-style: none; padding: 0; margin: 0; font-size: 0.9375rem; }
.pied li { margin-bottom: 0.55rem; }
.pied__marque {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--fond);
  margin-bottom: 0.9rem;
}
.pied__phrase { font-size: 0.9375rem; color: #A9C6BA; max-width: 34ch; }
.reseaux { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.875rem; margin-top: 1rem; }
.pied__editeur { font-size: 0.875rem; color: #A9C6BA; margin-top: 1rem; }
.mur-pied {
  position: relative;
  z-index: 1;
  margin-top: 2.8rem;
  opacity: 0.75;
}
.pied__barre {
  position: relative;
  z-index: 1;
  margin-top: 1.6rem;
  border-top: 1px solid rgba(201, 220, 211, 0.22);
  padding-block: 1.3rem 1.6rem;
  font-size: 0.8125rem;
  color: #A9C6BA;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  justify-content: space-between;
}

/* ------------------------------------------------- pages secondaires --- */

.page-interne { padding-block: calc(76px + 3.2rem) var(--travee-y); }
.fil { font-size: 0.8125rem; font-family: var(--registre); letter-spacing: 0.06em; color: var(--texte-doux); margin-bottom: 1.2rem; }
.fil a { color: var(--texte-doux); }

.texte-long { max-width: 74ch; }
.texte-long h2 { margin-top: 2.6rem; }
.texte-long h3 { margin-top: 1.9rem; }
.texte-long ul { max-width: 68ch; }

.article-auteur {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 3rem;
  align-items: start;
}
.portrait {
  position: relative;
  background: var(--fond-alt);
  padding: 0 8px 8px 0;
}
.portrait img {
  position: relative;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.fiche-auteur {
  margin-top: 1.6rem;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-bottom: var(--filet) solid var(--ambre);
  padding: 1.3rem 1.2rem;
  font-size: 0.9375rem;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.fiche-auteur ul { list-style: none; padding: 0; margin: 0.6rem 0 0; }

.plan-liste {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.3rem;
  margin-top: 2.2rem;
  list-style: none;
  padding: 0;
}
.plan-liste > li {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-bottom: var(--filet) solid var(--vert);
  padding: 1.2rem 1.2rem 1rem;
  margin: 0;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.plan-liste h3 { font-size: 1.1rem; margin-bottom: 0.35rem; }
.plan-liste p { font-size: 0.9375rem; margin: 0; }

.avis-central {
  text-align: center;
  max-width: 700px;
  margin-inline: auto;
}
.avis-central p { margin-inline: auto; }
.avis-central .paire-actions { justify-content: center; }

/* --------------------------------------------------------- animation --- */

.scene { perspective: 900px; }

.deplie {
  opacity: 0;
  transform: rotateX(-82deg);
  transform-origin: top center;
  transition: transform 420ms cubic-bezier(0.16, 0.84, 0.44, 1), opacity 420ms cubic-bezier(0.16, 0.84, 0.44, 1);
  transition-delay: var(--retard, 0ms);
  will-change: transform, opacity;
}
.deplie.est-deplie { opacity: 1; transform: rotateX(0); }

.question[open] .question__reponse {
  animation: deploiement-reponse 260ms cubic-bezier(0.16, 0.84, 0.44, 1);
  transform-origin: top center;
}
@keyframes deploiement-reponse {
  from { opacity: 0; transform: rotateX(-60deg); }
  to { opacity: 1; transform: rotateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .deplie {
    transform: none;
    transition: opacity 160ms linear;
    transition-delay: 0ms;
  }
  .deplie.est-deplie { transform: none; }
  .panneau { transition: opacity 120ms linear, visibility 120ms; transform: none; }
  .question[open] .question__reponse { animation: none; }
  .action { transition: none; }
}

/* ------------------------------------------------------- adaptations --- */

@media (max-width: 1080px) {
  .rayonnement__mot { grid-column: 1 / span 12; }
  .rayonnement__cadran { grid-column: 1 / span 12; min-height: 620px; }
  .cliche--hero { grid-column: 1 / span 12; }
  .legende-cliche { grid-column: 1 / span 12; }
  .solution__grille { grid-template-columns: 1fr; }
  .pupitre { grid-template-columns: 1fr; }
  .pied__colonnes { grid-template-columns: 1fr 1fr; }
  .article-auteur { grid-template-columns: 1fr; }
  .portrait { max-width: 300px; }
}

@media (max-width: 900px) {
  .ancres, .bandeau .action { display: none; }
  .bouton-briques { display: block; }
  .mur { grid-template-columns: repeat(2, 1fr); }
  .brique:nth-child(3n + 2), .brique:nth-child(3n) { margin-top: 0; }
  .brique:nth-child(even) { margin-top: 28px; }
  .assise { grid-template-columns: repeat(2, 1fr); }
  .compteurs { grid-template-columns: repeat(2, 1fr); }
  .temoignages { grid-template-columns: 1fr; }
  .temoignage:nth-child(2), .temoignage:nth-child(3) { margin-top: 0; }
  .licences { grid-template-columns: 1fr; }
  .licence--avancee { margin-block: 0; }
}

@media (max-width: 760px) {
  .rayonnement__cadran {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
  }
  .cadran__filets { display: none; }
  .disque-solde {
    position: static;
    transform: none;
    width: 280px; height: 280px;
    margin-bottom: 0.6rem;
  }
  .satellite {
    position: static;
    width: 100%;
    max-width: 420px;
  }
  .axe-perte { grid-template-columns: 1fr; }
  .axe-perte__ligne { display: none; }
  .axe-perte .constat:nth-of-type(odd),
  .axe-perte .constat:nth-of-type(even) { grid-column: 1; margin-top: 0; }
  .duo-champs { grid-template-columns: 1fr; }
  .plan-liste { grid-template-columns: 1fr; }
  .pied__colonnes { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .mur { grid-template-columns: 1fr; }
  .brique:nth-child(even) { margin-top: 0; }
  .assise { grid-template-columns: 1fr; }
  .compteurs { grid-template-columns: 1fr; }
  .frise { padding-left: 2.8rem; }
  .etape__jalon { left: -2.8rem; width: 28px; height: 28px; }
}

/* ==========================================================================
   Magazine, Le Registre du Solde
   Section ajoutee a la suite de la feuille de style du site, sans modifier
   aucune regle existante. Memes variables de couleur, meme forme signature
   (bloc a coin superieur droit coupe et filet de base de trois pixels),
   meme motif d appareillage de briques (rangees decalees d un demi module),
   meme signature d animation (depliement vertical, classe .deplie).
   Le corps redactionnel ne porte aucune classe: les balises nues sont mises
   en forme comme descendantes de .corps-article.
   ========================================================================== */

/* ------------------------------------------------- entete du magazine --- */

.magazine-entete {
  position: relative;
  background: var(--fond-alt);
  padding-block: calc(76px + 3.4rem) 2.8rem;
  overflow: hidden;
}
.magazine-entete > .cadre { position: relative; z-index: 1; }
.magazine-entete h1 { max-width: 20ch; }
.magazine-entete .chapeau { max-width: 68ch; }

.magazine-reperes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  align-items: center;
  margin: 1.6rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--bordure);
  max-width: none;
  font-family: var(--registre);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

/* ------------------------------------- grille de cartes en appareillage --- */

.registre-cartes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 2.8rem 0 0;
  padding: 0;
  list-style: none;
}
.registre-cartes > li { margin: 0; display: flex; }
.registre-cartes > li:nth-child(3n + 2) { margin-top: 28px; }
.registre-cartes > li:nth-child(3n) { margin-top: 56px; }

.carte-article {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-bottom: var(--filet) solid var(--texte-doux);
  clip-path: polygon(0 0, calc(100% - var(--coupe)) 0, 100% var(--coupe), 100% 100%, 0 100%);
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.carte-article:hover,
.carte-article:focus-within {
  transform: translateY(3px);
  border-bottom-color: var(--ambre);
  box-shadow: inset 0 -3px 0 0 var(--ambre);
}

.carte-article__vignette {
  margin: 0;
  background: var(--fond-alt);
  line-height: 0;
}
.carte-article__vignette img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.03);
}

.carte-article__corps {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.3rem 1.3rem 1.2rem;
}

.carte-article__angle {
  font-family: var(--registre);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vert);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  max-width: none;
}
.carte-article__angle::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--ambre);
  flex: none;
}

.carte-article__titre {
  font-family: var(--titre);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin: 0 0 0.6rem;
}
.carte-article__titre a { color: var(--texte); text-decoration: none; }
.carte-article__titre a:hover,
.carte-article__titre a:focus-visible { color: var(--vert); text-decoration: underline; }

.carte-article__extrait {
  font-size: 0.9375rem;
  color: var(--texte-doux);
  margin: 0 0 1.2rem;
  max-width: none;
}

.carte-article__pied {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  justify-content: space-between;
  border-top: 1px solid var(--bordure);
  padding-top: 0.75rem;
  max-width: none;
  font-family: var(--registre);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--texte-doux);
}

/* ------------------------------------------------ page d un article --- */

.page-article { padding-block: calc(76px + 3rem) 0; }
.page-article > .cadre {
  width: min(100% - 2 * var(--gouttiere), 880px);
}

.entete-article { margin-bottom: 2.2rem; }
.entete-article h1 { font-size: clamp(2.05rem, 4.2vw, 2.85rem); }

.entete-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.4rem;
  margin: 0 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--bordure);
  max-width: none;
  font-family: var(--registre);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.entete-article__meta time { color: var(--texte); }
.entete-article__lecture {
  border-left: var(--filet) solid var(--ambre);
  padding-left: 0.7rem;
}

.exergue {
  font-family: var(--titre);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.32rem);
  line-height: 1.34;
  letter-spacing: -0.02em;
  color: var(--texte);
  border-left: var(--filet) solid var(--ambre);
  padding-left: 1.1rem;
  margin: 1.6rem 0 0;
  max-width: 62ch;
}

.cliche--une { margin: 0 0 2.6rem; }
.cliche--une img { width: 100%; }

/* ------------------------------- corps redactionnel en balises nues --- */

.corps-article {
  max-width: 68ch;
  font-size: 1.0625rem;
  line-height: 1.68;
}
.corps-article > :first-child { margin-top: 0; }

.corps-article h2 {
  position: relative;
  font-family: var(--titre);
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 2.9rem 0 0.9rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--bordure);
}
.corps-article h2::before {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 52px; height: 3px;
  background: var(--ambre);
}

.corps-article h3 {
  font-family: var(--titre);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 2.1rem 0 0.6rem;
}
.corps-article h3::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--vert);
  margin-right: 0.6rem;
  vertical-align: 0.14em;
}

.corps-article p { margin: 0 0 1.15em; }
.corps-article strong { font-weight: 700; color: var(--texte); }
.corps-article em { font-style: italic; }

.corps-article a {
  color: var(--vert);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.corps-article a:hover,
.corps-article a:focus-visible {
  color: var(--texte);
  background: rgba(242, 183, 5, 0.24);
}

.corps-article ul,
.corps-article ol {
  list-style: none;
  padding-left: 0;
  margin: 1.3rem 0 1.6rem;
  max-width: 68ch;
}
.corps-article ul li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.6rem;
}
.corps-article ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 9px; height: 9px;
  background: var(--vert);
}
.corps-article ol { counter-reset: registre; }
.corps-article ol li {
  position: relative;
  counter-increment: registre;
  padding-left: 2.6rem;
  margin-bottom: 0.7rem;
  min-height: 26px;
}
.corps-article ol li::before {
  content: counter(registre);
  position: absolute;
  left: 0; top: 0.12em;
  width: 26px; height: 26px;
  background: var(--ambre);
  color: var(--ambre-texte);
  font-family: var(--titre);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 26px;
  text-align: center;
}
.corps-article li ul,
.corps-article li ol { margin: 0.6rem 0 0.2rem; }

.corps-article table {
  width: 100%;
  margin: 2rem 0;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-bottom: var(--filet) solid var(--texte-doux);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.corps-article thead th {
  background: var(--texte);
  color: var(--fond);
  font-family: var(--registre);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.8rem 0.95rem;
}
.corps-article tbody th {
  font-family: var(--titre);
  font-weight: 600;
  text-align: left;
}
.corps-article td,
.corps-article tbody th {
  padding: 0.8rem 0.95rem;
  border-top: 1px solid var(--bordure);
  vertical-align: top;
}
.corps-article tbody tr:nth-child(even) { background: var(--fond-alt); }

.corps-article blockquote {
  margin: 2.1rem 0;
  padding: 1.4rem 1.5rem 1.2rem;
  background: var(--fond-alt);
  border: 1px solid var(--bordure);
  border-bottom: var(--filet) solid var(--ambre);
  clip-path: polygon(0 0, calc(100% - var(--coupe)) 0, 100% var(--coupe), 100% 100%, 0 100%);
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.36;
  letter-spacing: -0.02em;
}
.corps-article blockquote p:last-child { margin-bottom: 0; }

.corps-article aside {
  margin: 2.2rem 0;
  padding: 1.5rem 1.5rem 1.3rem;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-bottom: var(--filet) solid var(--vert);
  clip-path: polygon(0 0, calc(100% - var(--coupe)) 0, 100% var(--coupe), 100% 100%, 0 100%);
  font-size: 1rem;
}
.corps-article aside p:last-child,
.corps-article aside ul:last-child,
.corps-article aside ol:last-child { margin-bottom: 0; }

.corps-article figure {
  margin: 2.2rem 0;
  background: var(--fond-alt);
  padding: 0 8px 8px 0;
}
.corps-article figure img {
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  filter: saturate(0.85) contrast(1.03);
}
.corps-article figcaption {
  font-family: var(--registre);
  font-size: 0.875rem;
  color: var(--texte-doux);
  padding: 0.7rem 0.8rem 0.2rem 0;
}

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

.appel-article {
  margin: 2.8rem 0;
  background: var(--texte);
  color: var(--fond);
  border-bottom: var(--filet) solid var(--ambre);
  padding: 1.9rem 1.8rem 1.7rem;
  clip-path: polygon(0 0, calc(100% - var(--coupe)) 0, 100% var(--coupe), 100% 100%, 0 100%);
}
.appel-article__titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--fond);
  margin: 0 0 0.7rem;
  max-width: none;
}
.appel-article p { color: #CFE2D8; max-width: 58ch; }
.appel-article .action { margin-top: 0.6rem; }

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

.encart-auteur {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 1.4rem;
  align-items: start;
  margin: 2.8rem 0;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-bottom: var(--filet) solid var(--texte-doux);
  padding: 1.6rem 1.6rem 1.4rem;
  clip-path: polygon(0 0, calc(100% - var(--coupe)) 0, 100% var(--coupe), 100% 100%, 0 100%);
}
.encart-auteur img {
  background: var(--fond-alt);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.encart-auteur__role {
  font-family: var(--registre);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin: 0 0 0.3rem;
  max-width: none;
}
.encart-auteur__nom {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  margin: 0 0 0.55rem;
  max-width: none;
}
.encart-auteur p { font-size: 0.9375rem; margin-bottom: 0.6rem; }
.encart-auteur p:last-child { margin-bottom: 0; }

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

.lire-aussi__intitule {
  font-family: var(--titre);
  font-weight: 600;
  font-size: clamp(1.45rem, 3vw, 1.75rem);
  letter-spacing: -0.02em;
  line-height: 1.14;
  margin: 0 0 1.7rem;
  max-width: none;
}

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

.carte-liee {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-bottom: var(--filet) solid var(--texte-doux);
  clip-path: polygon(0 0, calc(100% - var(--coupe)) 0, 100% var(--coupe), 100% 100%, 0 100%);
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.carte-liee:nth-child(2) { margin-top: 24px; }
.carte-liee:nth-child(3) { margin-top: 48px; }
.carte-liee:hover,
.carte-liee:focus-within {
  transform: translateY(3px);
  border-bottom-color: var(--ambre);
  box-shadow: inset 0 -3px 0 0 var(--ambre);
}
.carte-liee__lien { display: block; text-decoration: none; color: var(--texte); }
.carte-liee__vignette { display: block; background: var(--fond-alt); line-height: 0; }
.carte-liee__vignette img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.03);
}
.carte-liee__titre {
  display: block;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  padding: 1.1rem 1.2rem 0;
}
.carte-liee__lien:hover .carte-liee__titre,
.carte-liee__lien:focus-visible .carte-liee__titre { color: var(--vert); text-decoration: underline; }
.carte-liee__accroche {
  font-size: 0.9rem;
  color: var(--texte-doux);
  margin: 0.55rem 0 0;
  padding: 0 1.2rem 1.2rem;
  max-width: none;
}

/* ------------------------- section magazine de la page d accueil --- */

.magazine-accueil__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--bordure);
}
.magazine-accueil__pied p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--texte-doux);
  max-width: 52ch;
}

/* ---------------------------- liste des articles de la page auteur --- */

.journal-articles {
  list-style: none;
  padding: 0;
  margin: 2.2rem 0 0;
  border-top: 1px solid var(--bordure);
}
.journal-articles li {
  margin: 0;
  border-bottom: 1px solid var(--bordure);
  padding: 0.95rem 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.3rem 1.6rem;
  align-items: baseline;
}
.journal-articles a {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--texte);
  text-decoration: none;
}
.journal-articles a:hover,
.journal-articles a:focus-visible { color: var(--vert); text-decoration: underline; }
.journal-articles__date {
  font-family: var(--registre);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-doux);
  white-space: nowrap;
}

/* -------------------------------------------- adaptations du magazine --- */

@media (max-width: 1080px) {
  .registre-cartes { grid-template-columns: repeat(2, 1fr); }
  .registre-cartes > li:nth-child(3n + 2),
  .registre-cartes > li:nth-child(3n) { margin-top: 0; }
  .registre-cartes > li:nth-child(even) { margin-top: 28px; }
  .lire-aussi__grille { grid-template-columns: repeat(2, 1fr); }
  .carte-liee:nth-child(3) { margin-top: 0; }
}

@media (max-width: 760px) {
  .magazine-entete { padding-block: calc(76px + 2.4rem) 2.2rem; }
  .page-article { padding-block: calc(76px + 2.2rem) 0; }
  .registre-cartes { grid-template-columns: 1fr; }
  .registre-cartes > li:nth-child(even) { margin-top: 0; }
  .lire-aussi__grille { grid-template-columns: 1fr; }
  .carte-liee:nth-child(2) { margin-top: 0; }
  .encart-auteur { grid-template-columns: 1fr; }
  .journal-articles li { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .corps-article table { display: block; overflow-x: auto; }
}

/* Intitule de colonne du pied de page sur les pages du magazine, ou les niveaux
   de titre h2 et h3 sont reserves au corps redactionnel des articles. */
.pied__titre {
  font-family: var(--registre);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9FBFB2;
  margin: 0 0 1rem;
  max-width: none;
}

/* Bloc de la page auteur qui recense les articles publies dans le magazine. */
.journal {
  margin-top: 3.4rem;
  padding-top: 2.6rem;
  border-top: 1px solid var(--bordure);
}
.journal h2 { margin-bottom: 0.8rem; }