/* ==========================================================================
   Onglivia, feuille de style unique
   Vocabulaire de classes : le dossier de pose, son onglet, ses fiches,
   son tiroir, ses etiquettes de lot et son releve de compteurs.
   Mode clair integral, aucune variante sombre.
   ========================================================================== */

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

:root {
  --ivoire: #FBF8F1;
  --sauge-pale: #EDF0E7;
  --carte: #FFFDF8;
  --encre: #1B2320;
  --encre-douce: #5A6660;
  --amethyste: #3D327B;
  --amethyste-fonce: #332969;
  --amethyste-appui: #2C2359;
  --sur-amethyste: #FBF7EE;
  --sauge: #6B8A70;
  --sauge-filet: #C4D0BE;
  --bordure: #DCD9CB;

  --titre: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --courant: "Libre Franklin", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --manuscrit: "Amatic SC", "Bradley Hand", "Segoe Script", cursive;

  --utile: 1160px;
  --gouttiere: 24px;
  --rayon-carte: 14px;
  --rayon-onglet: 10px;
  --hauteur-en-tete: 76px;

  --souffle-court: 140ms;
  --souffle-long: 620ms;
  --courbe: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Assises
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background-color: var(--ivoire);
  color: var(--encre);
  font-family: var(--courant);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.75;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.defilement-bloque { overflow: hidden; }

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

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

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

h1 { font-size: 3.4rem; }
h2 { font-size: 2.25rem; }
h3 { font-family: var(--courant); font-weight: 650; font-size: 1.3rem; letter-spacing: -0.005em; line-height: 1.35; }
h4 { font-family: var(--courant); font-weight: 600; font-size: 1.0625rem; letter-spacing: 0; line-height: 1.4; }

p { margin: 0 0 1.05em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.05em; padding-left: 1.15em; }
li { margin-bottom: 0.42em; }

strong { font-weight: 650; }

hr {
  border: 0;
  border-top: 1px solid var(--sauge-filet);
  margin: 2.4rem 0;
}

::selection { background: rgba(61, 50, 123, 0.16); }

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

.hors-ecran {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.saut-au-contenu {
  position: absolute;
  left: 16px;
  top: -70px;
  z-index: 200;
  background: var(--amethyste);
  color: var(--sur-amethyste);
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: top var(--souffle-court) var(--courbe);
}
.saut-au-contenu:focus { top: 14px; color: var(--sur-amethyste); }

/* --------------------------------------------------------------------------
   3. Le motif signature : degrade maille a taches douces
   -------------------------------------------------------------------------- */

.maille {
  position: relative;
  isolation: isolate;
  background-color: var(--ivoire);
  background-image:
    radial-gradient(58% 44% at 8% 6%, rgba(107, 138, 112, 0.14), rgba(107, 138, 112, 0) 72%),
    radial-gradient(62% 48% at 96% 92%, rgba(107, 138, 112, 0.14), rgba(107, 138, 112, 0) 74%),
    radial-gradient(46% 40% at 68% 20%, rgba(61, 50, 123, 0.07), rgba(61, 50, 123, 0) 76%),
    radial-gradient(40% 38% at 24% 84%, rgba(61, 50, 123, 0.07), rgba(61, 50, 123, 0) 78%),
    radial-gradient(52% 46% at 48% 50%, rgba(255, 255, 252, 0.40), rgba(255, 255, 252, 0) 80%);
  background-attachment: local;
  background-repeat: no-repeat;
}

.maille::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}

.maille-bande {
  height: 6px;
  background-image:
    radial-gradient(70% 300% at 12% 50%, rgba(107, 138, 112, 0.55), rgba(107, 138, 112, 0) 70%),
    radial-gradient(60% 260% at 52% 50%, rgba(61, 50, 123, 0.34), rgba(61, 50, 123, 0) 72%),
    radial-gradient(70% 300% at 90% 50%, rgba(107, 138, 112, 0.45), rgba(107, 138, 112, 0) 70%);
  background-color: var(--sauge-pale);
}

/* --------------------------------------------------------------------------
   4. Trame de page
   -------------------------------------------------------------------------- */

.pupitre {
  width: 100%;
  max-width: var(--utile);
  margin-inline: auto;
  padding-inline: 22px;
}

.pupitre--etroit { max-width: 820px; }

.plan {
  padding-block: 84px;
  position: relative;
}

.plan--sauge { background: var(--sauge-pale); }
.plan--serre { padding-block: 62px; }

.plan__intro { max-width: 62ch; margin-bottom: 40px; }
.plan__intro p { color: var(--encre-douce); font-size: 1.09rem; }

/* --------------------------------------------------------------------------
   5. La forme signature : le dossier et son onglet decale
   -------------------------------------------------------------------------- */

.dossier {
  position: relative;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  border-top-left-radius: 0;
  margin-top: 40px;
  padding: 34px 32px 30px;
}

.dossier::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--sauge-filet);
}

.onglet {
  position: absolute;
  top: -40px;
  left: 40px;
  height: 40px;
  min-width: 168px;
  max-width: 240px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--sauge-pale);
  border: 1px solid var(--bordure);
  border-bottom: 0;
  border-radius: var(--rayon-onglet) var(--rayon-onglet) 0 0;
  font-family: var(--manuscrit);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--encre);
  white-space: nowrap;
}

.onglet::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sauge);
  flex: none;
}

.onglet--court { min-width: 96px; max-width: 168px; padding: 0 14px; font-size: 1.28rem; }
.onglet--large { min-width: 210px; }
.onglet--proche { left: 26px; }
.onglet--loin { left: 64px; }

.onglet--phare {
  background: var(--amethyste);
  border-color: var(--amethyste);
  color: var(--sur-amethyste);
}
.onglet--phare::before { background: var(--sauge-filet); }

.dossier--phare { border-color: var(--amethyste); box-shadow: 0 0 0 1px rgba(61, 50, 123, 0.18); }

/* --------------------------------------------------------------------------
   6. En tete fixe
   -------------------------------------------------------------------------- */

.barre {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  height: var(--hauteur-en-tete);
  background: rgba(251, 248, 241, 0.92);
  backdrop-filter: blur(10px);
  transition: height 200ms var(--courbe), box-shadow 200ms var(--courbe), background 200ms var(--courbe);
}

.barre.barre--refermee {
  height: 62px;
  border-bottom: 1px solid var(--sauge-filet);
  box-shadow: inset 0 -6px 10px -10px rgba(27, 35, 32, 0.35);
}

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

.enseigne {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.42rem;
  letter-spacing: 0.01em;
  color: var(--encre);
  text-decoration: none;
  flex: none;
}
.enseigne:hover { color: var(--encre); }
.enseigne__marque { width: 34px; height: 34px; flex: none; }

.cheminement { display: flex; align-items: center; gap: 26px; }
.cheminement a {
  position: relative;
  font-weight: 550;
  font-size: 0.9375rem;
  color: var(--encre);
  text-decoration: none;
  padding-block: 6px;
}
.cheminement a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--amethyste);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms var(--courbe);
}
.cheminement a:hover::after,
.cheminement a.est-active::after { transform: scaleX(1); }

.barre__actes { display: flex; align-items: center; gap: 12px; flex: none; }

/* --------------------------------------------------------------------------
   7. Boutons
   -------------------------------------------------------------------------- */

.bouton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 52px;
  padding: 0 28px 0 30px;
  border-radius: 10px;
  font-family: var(--courant);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: background var(--souffle-court) var(--courbe),
              transform var(--souffle-court) var(--courbe),
              border-color var(--souffle-court) var(--courbe);
}

.bouton::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 12px;
  background: var(--amethyste);
  border-radius: 1px;
}

.bouton--plein {
  background: var(--amethyste);
  color: var(--sur-amethyste);
}
.bouton--plein::before { background: var(--sauge-filet); }
.bouton--plein:hover { background: var(--amethyste-fonce); transform: translateY(-1px); color: var(--sur-amethyste); }
.bouton--plein:active { background: var(--amethyste-appui); transform: translateY(0); }

.bouton--filet {
  background: transparent;
  border: 1.5px solid var(--bordure);
  color: var(--encre);
}
.bouton--filet:hover { border-color: var(--sauge); background: var(--sauge-pale); color: var(--encre); }
.bouton--filet:active { background: var(--sauge-pale); transform: translateY(0); }

.bouton--menu {
  height: 44px;
  padding: 0 16px;
  font-size: 0.9375rem;
}

.bouton:focus-visible {
  outline: 2px solid var(--sauge);
  outline-offset: 3px;
  box-shadow: inset 0 0 0 1.5px var(--sur-amethyste);
}

.bouton--filet:focus-visible { box-shadow: inset 0 0 0 1.5px var(--carte); }

.tirette {
  display: none;
  width: 46px;
  height: 44px;
  border: 1.5px solid var(--bordure);
  border-radius: 10px;
  background: var(--carte);
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.tirette span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--encre);
  transition: transform 180ms var(--courbe), opacity 180ms var(--courbe);
}
.tirette[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.tirette[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.tirette[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.panneau {
  position: fixed;
  inset: 0;
  z-index: 88;
  background: var(--ivoire);
  padding: 96px 22px 40px;
  transform: translateY(-100%);
  transition: transform 320ms var(--courbe);
  overflow-y: auto;
}
.panneau[data-ouvert="true"] { transform: translateY(0); }
.panneau ul { list-style: none; margin: 0; padding: 0; }
.panneau li { border-bottom: 1px solid var(--bordure); margin: 0; }
.panneau a {
  display: block;
  padding: 17px 4px;
  font-family: var(--titre);
  font-size: 1.5rem;
  color: var(--encre);
  text-decoration: none;
}
.panneau a:hover { color: var(--amethyste); }
.panneau .bouton { margin-top: 26px; width: 100%; }
.panneau__note {
  margin-top: 22px;
  font-family: var(--manuscrit);
  font-size: 1.45rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sauge);
}

/* --------------------------------------------------------------------------
   8. Hero en carte dossier
   -------------------------------------------------------------------------- */

.entree {
  padding-top: calc(var(--hauteur-en-tete) + 56px);
  padding-bottom: 76px;
  background-color: var(--ivoire);
}

.entree__dossier {
  width: 100%;
  max-width: calc(var(--utile) * 10 / 12);
  margin-inline: auto;
  margin-top: 40px;
  padding: 0;
  overflow: visible;
}

.entree__corps {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 42px;
  padding: 40px 36px 34px;
}

.entree h1 { margin-bottom: 18px; }
.entree h1 .surligne {
  background-image: linear-gradient(transparent 62%, rgba(107, 138, 112, 0.3) 62%);
}

.entree__chapeau {
  font-size: 1.16rem;
  color: var(--encre-douce);
  margin-bottom: 26px;
}

.entree__actes { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }

.entree__mention {
  font-size: 0.875rem;
  color: var(--encre-douce);
  display: flex;
  align-items: center;
  gap: 8px;
}
.entree__mention svg { flex: none; color: var(--sauge); }

.entree__visuel {
  position: relative;
  border-radius: 12px;
  border-top-left-radius: 0;
  overflow: hidden;
  border: 1px solid var(--bordure);
  align-self: stretch;
  min-height: 320px;
}
.entree__visuel img { width: 100%; height: 100%; object-fit: cover; }
.entree__visuel::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(251, 248, 241, 0.55);
  border-radius: 10px;
  border-top-left-radius: 0;
  pointer-events: none;
}

.legende {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 30px 16px 12px;
  background: linear-gradient(transparent, rgba(107, 138, 112, 0.10) 30%, rgba(237, 240, 231, 0.92));
  font-family: var(--manuscrit);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre);
}

.bande-preuve {
  border-top: 1px solid var(--sauge-filet);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.bande-preuve > div {
  padding: 22px 26px;
  border-left: 1px solid var(--bordure);
}
.bande-preuve > div:first-child { border-left: 0; }
.bande-preuve dt {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-bottom: 4px;
}
.bande-preuve dd { margin: 0; font-size: 1.05rem; font-weight: 600; }

/* --------------------------------------------------------------------------
   9. Compteurs et tic visuel
   -------------------------------------------------------------------------- */

.releve {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--encre);
}

.releve__arc {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--amethyste);
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-45deg);
  opacity: 0.25;
  transition: opacity 90ms linear;
}
.releve.tic-actif .releve__arc { opacity: 1; }
.releve.tic-fige .releve__arc { opacity: 1; }

.releve__nombre {
  display: inline-block;
  transform: scale(1);
  transition: transform 90ms var(--courbe);
}
.releve.tic-actif .releve__nombre { transform: scale(1.04); }

.releve__onde {
  position: absolute;
  left: 5px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border: 1px solid var(--sauge);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.releve.tic-actif .releve__onde { animation: onde-catalyse 220ms linear; }

@keyframes onde-catalyse {
  from { transform: scale(1); opacity: 0.85; }
  to { transform: scale(4.2); opacity: 0; }
}

/* --------------------------------------------------------------------------
   10. Section probleme, tiroir irregulier
   -------------------------------------------------------------------------- */

.surtitre {
  font-family: var(--manuscrit);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sauge);
  margin: 0 0 10px;
}

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

.tiroir .dossier { margin-top: 46px; }
.tiroir .dossier:nth-child(2) { margin-top: 66px; }
.tiroir .dossier:nth-child(3) { margin-top: 40px; }

.dossier__cout {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--sauge-filet);
  font-size: 0.9375rem;
  color: var(--encre-douce);
}
.dossier__cout b { color: var(--encre); font-weight: 650; }

.constat {
  margin-top: 46px;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 40px;
  align-items: center;
}
.constat__image {
  position: relative;
  border: 1px solid var(--bordure);
  border-radius: 12px;
  border-top-left-radius: 0;
  overflow: hidden;
}
.constat__image img { width: 100%; }
.constat blockquote {
  margin: 0;
  padding-left: 22px;
  border-left: 2px solid var(--amethyste);
  font-family: var(--titre);
  font-size: 1.5rem;
  line-height: 1.4;
}
.constat cite {
  display: block;
  margin-top: 14px;
  font-family: var(--courant);
  font-size: 0.875rem;
  font-style: normal;
  color: var(--encre-douce);
}

/* --------------------------------------------------------------------------
   11. Solution, quatre etapes reliees par un filet sauge
   -------------------------------------------------------------------------- */

.protocole {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gouttiere);
  margin-top: 44px;
}
.protocole::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: var(--sauge-filet);
  z-index: 0;
}

.etape { position: relative; z-index: 1; }
.etape__rang {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--carte);
  border: 1px solid var(--sauge);
  color: var(--amethyste);
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.etape h3 { margin-bottom: 8px; }
.etape p { font-size: 0.9875rem; color: var(--encre-douce); }

.chrono {
  margin-top: 46px;
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: 34px;
  align-items: center;
  padding: 26px 28px;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
}
.chrono__cadran {
  display: flex;
  align-items: center;
  gap: 18px;
}
.chrono__valeur {
  font-size: 2.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.chrono__paliers { display: flex; gap: 6px; }
.chrono__palier {
  width: 26px;
  height: 8px;
  border-radius: 2px;
  background: var(--sauge-pale);
  border: 1px solid var(--sauge-filet);
  transition: background 90ms linear, border-color 90ms linear;
}
.chrono__palier.est-allume { background: var(--amethyste); border-color: var(--amethyste); }
.chrono p { font-size: 0.9875rem; color: var(--encre-douce); }

.etiquette {
  display: inline-block;
  font-family: var(--manuscrit);
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre);
  background: var(--sauge-pale);
  border: 1px solid var(--sauge-filet);
  border-radius: 6px;
  padding: 1px 11px;
  line-height: 1.5;
}
.etiquette--violette {
  background: rgba(61, 50, 123, 0.10);
  border-color: rgba(61, 50, 123, 0.28);
  color: var(--amethyste);
}

/* --------------------------------------------------------------------------
   12. Fonctionnalites, grille trois colonnes a onglets courts
   -------------------------------------------------------------------------- */

.rangee-fiches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gouttiere) var(--gouttiere);
  row-gap: 56px;
}
.rangee-fiches .dossier { margin-top: 40px; padding: 28px 26px 26px; }
.rangee-fiches h3 { margin-bottom: 10px; }
.rangee-fiches p { font-size: 0.9875rem; color: var(--encre-douce); }

.fiche__pastille {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--sauge-pale);
  border: 1px solid var(--sauge-filet);
  color: var(--sauge);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

/* --------------------------------------------------------------------------
   13. Avantages, deux colonnes larges avec compteur
   -------------------------------------------------------------------------- */

.gains {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 52px;
}
.gain {
  padding: 24px 0 22px;
  border-top: 1px solid var(--sauge-filet);
}
.gain h3 { margin: 14px 0 8px; }
.gain p { color: var(--encre-douce); font-size: 0.9875rem; }
.gain__unite {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sauge);
  margin-left: 4px;
}

.gains__appui {
  margin-top: 46px;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 40px;
  align-items: center;
}
.gains__appui .constat__image { border-top-left-radius: 0; }

/* --------------------------------------------------------------------------
   14. Preuve sociale
   -------------------------------------------------------------------------- */

.bandeau-chiffres {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  overflow: hidden;
}
.bandeau-chiffres > div {
  padding: 28px 24px;
  border-left: 1px solid var(--bordure);
}
.bandeau-chiffres > div:first-child { border-left: 0; }
.bandeau-chiffres p {
  margin: 10px 0 0;
  font-size: 0.9375rem;
  color: var(--encre-douce);
}

.attestations {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gouttiere);
  margin-top: 62px;
}
.attestations .dossier { margin-top: 40px; padding: 28px 26px 24px; }
.attestations blockquote {
  margin: 0 0 18px;
  font-size: 1.02rem;
  line-height: 1.7;
}
.attestations blockquote p { margin-bottom: 0.8em; }
.attestations figure { margin: 0; }
.attestations figcaption {
  border-top: 1px solid var(--sauge-filet);
  padding-top: 14px;
  font-size: 0.875rem;
  color: var(--encre-douce);
}
.attestations figcaption b {
  display: block;
  font-family: var(--courant);
  font-weight: 650;
  font-size: 0.9375rem;
  color: var(--encre);
}

/* --------------------------------------------------------------------------
   15. Tarifs
   -------------------------------------------------------------------------- */

.grille-formules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gouttiere);
  align-items: start;
  margin-top: 20px;
}
.formule { margin-top: 46px; padding: 0; overflow: hidden; }
.formule--phare { margin-top: 26px; }
.formule__interieur { padding: 26px 26px 28px; }
.formule__cible {
  font-size: 0.9375rem;
  color: var(--encre-douce);
  min-height: 4.2em;
  margin-bottom: 16px;
}
.formule__prix {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--sauge-filet);
  margin-bottom: 18px;
}
.formule__montant {
  font-family: var(--courant);
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.formule__unite { font-size: 0.875rem; color: var(--encre-douce); }
.formule__inclus { list-style: none; margin: 0 0 24px; padding: 0; }
.formule__inclus li {
  position: relative;
  padding-left: 24px;
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 11px;
}
.formule__inclus li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  border: 1px solid var(--sauge);
  background: var(--sauge-pale);
}
.formule .bouton { width: 100%; }
.tarifs__note {
  margin-top: 30px;
  font-size: 0.9375rem;
  color: var(--encre-douce);
  text-align: center;
}

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */

.questions {
  max-width: calc(var(--utile) * 8 / 12);
  margin-inline: auto;
}
.question {
  border-bottom: 1px solid var(--bordure);
  background: transparent;
}
.question:first-of-type { border-top: 1px solid var(--bordure); }
.question summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  position: relative;
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1.06rem;
  line-height: 1.5;
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 30px;
  width: 11px;
  height: 11px;
  border-right: 1.5px solid var(--amethyste);
  border-bottom: 1.5px solid var(--amethyste);
  transform: rotate(45deg);
  transition: transform 200ms var(--courbe);
}
.question[open] summary::after { transform: rotate(-135deg); top: 34px; }
.question summary:hover { color: var(--amethyste); }
.question__reponse { padding: 0 40px 24px 0; }
.question__reponse p { color: var(--encre-douce); }

/* --------------------------------------------------------------------------
   17. Formulaire
   -------------------------------------------------------------------------- */

.echange { padding: 0; }
.echange__interieur {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 44px;
  padding: 38px 34px 34px;
}
.echange__mots p { color: var(--encre-douce); }
.echange__mots h2 { font-size: 2rem; }
.echange__reperes { list-style: none; margin: 22px 0 0; padding: 0; }
.echange__reperes li {
  position: relative;
  padding-left: 22px;
  font-size: 0.9375rem;
  margin-bottom: 10px;
}
.echange__reperes li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.66em;
  width: 8px; height: 8px;
  background: var(--sauge);
  border-radius: 50%;
}

.champs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
}
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ--pleine { grid-column: 1 / -1; }
.champ label,
.consentement span.intitule {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--encre-douce);
}
.champ input,
.champ select,
.champ textarea {
  font-family: var(--courant);
  font-size: 1rem;
  color: var(--encre);
  background: var(--ivoire);
  border: 1px solid var(--bordure);
  border-radius: 9px;
  padding: 12px 13px;
  width: 100%;
}
.champ textarea { resize: vertical; min-height: 128px; line-height: 1.6; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: 2px solid var(--sauge);
  outline-offset: 2px;
  border-color: var(--sauge);
  background: var(--carte);
}
.champ__aide { font-size: 0.8125rem; color: var(--encre-douce); text-transform: none; letter-spacing: 0; font-weight: 400; }

.consentement {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 0.9375rem;
  line-height: 1.55;
  padding: 14px 0 2px;
}
.consentement input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--amethyste); flex: none; }

.envoi { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 6px; }
.envoi p { font-size: 0.875rem; color: var(--encre-douce); margin: 0; }

/* --------------------------------------------------------------------------
   18. Pied de page
   -------------------------------------------------------------------------- */

.pied {
  background: var(--sauge-pale);
  border-top: 1px solid var(--bordure);
  padding-top: 62px;
}
.pied__colonnes {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 40px;
  padding-bottom: 46px;
}
.pied h2 {
  font-family: var(--manuscrit);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sauge);
  margin-bottom: 16px;
}
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 9px; }
.pied a { color: var(--encre); text-decoration: none; font-size: 0.9375rem; }
.pied a:hover { color: var(--amethyste); text-decoration: underline; }
.pied__mot { font-size: 0.9375rem; color: var(--encre-douce); margin: 14px 0 18px; max-width: 34ch; }
.pied__profils { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.pied__profils a { font-size: 0.875rem; text-decoration: underline; text-decoration-color: var(--sauge-filet); }
.pied__editeur { font-size: 0.875rem; color: var(--encre-douce); margin-top: 16px; line-height: 1.7; }
.pied__barre {
  border-top: 1px solid var(--bordure);
  padding: 20px 0 26px;
  font-size: 0.875rem;
  color: var(--encre-douce);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   19. Pages interieures
   -------------------------------------------------------------------------- */

.tete-interieure {
  padding-top: calc(var(--hauteur-en-tete) + 52px);
  padding-bottom: 34px;
  background-color: var(--ivoire);
}
.tete-interieure h1 { font-size: 2.7rem; max-width: 22ch; }
.tete-interieure p { font-size: 1.1rem; color: var(--encre-douce); max-width: 66ch; }

.fil {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--encre-douce);
  margin-bottom: 16px;
}
.fil a { text-decoration: none; }
.fil a:hover { text-decoration: underline; }

.texte-long { padding-bottom: 86px; }
.texte-long h2 { margin-top: 46px; font-size: 1.85rem; }
.texte-long h3 { margin-top: 30px; }
.texte-long .dossier h2:first-child,
.texte-long .dossier h3:first-child { margin-top: 0; }
.texte-long ul li { margin-bottom: 0.55em; }
.texte-long dl { margin: 0 0 1.2em; }
.texte-long dt { font-weight: 650; margin-top: 14px; }
.texte-long dd { margin: 3px 0 0; color: var(--encre-douce); }

.portrait {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 30px;
  align-items: start;
}
.portrait img {
  border-radius: 12px;
  border-top-left-radius: 0;
  border: 1px solid var(--bordure);
  width: 220px;
  height: auto;
}
.portrait__mots p { font-size: 1.02rem; }

.liste-profils { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.liste-profils a {
  display: inline-block;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  padding: 8px 15px;
  font-size: 0.9375rem;
  text-decoration: none;
  background: var(--carte);
}
.liste-profils a:hover { border-color: var(--sauge); background: var(--sauge-pale); }

.plan-liste { list-style: none; margin: 0; padding: 0; }
.plan-liste > li {
  border-bottom: 1px solid var(--bordure);
  padding: 18px 0;
  margin: 0;
}
.plan-liste a { font-family: var(--courant); font-weight: 650; font-size: 1.06rem; text-decoration: none; }
.plan-liste a:hover { text-decoration: underline; }
.plan-liste p { margin: 5px 0 0; color: var(--encre-douce); font-size: 0.9375rem; }

.centre-page {
  min-height: 62vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--hauteur-en-tete) + 40px);
  padding-bottom: 70px;
}
.centre-page .dossier { max-width: 720px; margin-inline: auto; }
.centre-page .bouton { margin-top: 8px; margin-right: 10px; }

/* --------------------------------------------------------------------------
   20. Apparitions au defilement
   -------------------------------------------------------------------------- */

.a-paraitre {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--souffle-long) var(--courbe), transform var(--souffle-long) var(--courbe);
}
.a-paraitre.est-parue { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   21. Adaptations
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .pied__colonnes { grid-template-columns: 1fr 1fr; gap: 34px; }
  .bandeau-chiffres { grid-template-columns: 1fr 1fr; }
  .bandeau-chiffres > div:nth-child(3) { border-left: 0; }
  .bandeau-chiffres > div:nth-child(n+3) { border-top: 1px solid var(--bordure); }
}

@media (max-width: 940px) {
  h1 { font-size: 2.6rem; }
  h2 { font-size: 1.95rem; }
  .cheminement, .barre__actes .bouton { display: none; }
  .tirette { display: flex; }
  .entree__corps { grid-template-columns: 1fr; gap: 30px; }
  .entree__visuel { min-height: 0; }
  .bande-preuve { grid-template-columns: 1fr; }
  .bande-preuve > div { border-left: 0; border-top: 1px solid var(--bordure); }
  .bande-preuve > div:first-child { border-top: 0; }
  .tiroir, .rangee-fiches, .attestations, .grille-formules { grid-template-columns: 1fr 1fr; }
  .protocole { grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .protocole::before { display: none; }
  .constat, .gains__appui, .chrono, .echange__interieur { grid-template-columns: 1fr; gap: 26px; }
  .portrait { grid-template-columns: 1fr; }
  .questions { max-width: none; }
}

@media (max-width: 640px) {
  :root { --hauteur-en-tete: 68px; }
  h1 { font-size: 2.3rem; }
  h2 { font-size: 1.7rem; }
  body { font-size: 1.0313rem; }
  .plan { padding-block: 58px; }
  .entree { padding-top: calc(var(--hauteur-en-tete) + 36px); padding-bottom: 52px; }
  .entree__corps { padding: 30px 20px 26px; }
  .dossier { padding: 26px 20px 24px; }
  .onglet { left: 22px; min-width: 150px; font-size: 1.3rem; padding: 0 16px; }
  .tiroir, .rangee-fiches, .attestations, .grille-formules,
  .gains, .protocole, .bandeau-chiffres, .champs { grid-template-columns: 1fr; }
  .bandeau-chiffres > div { border-left: 0; border-top: 1px solid var(--bordure); }
  .bandeau-chiffres > div:first-child { border-top: 0; }
  .formule--phare { margin-top: 46px; }
  .tiroir .dossier:nth-child(2), .tiroir .dossier:nth-child(3) { margin-top: 46px; }
  .releve { font-size: 2.5rem; }
  .pied__colonnes { grid-template-columns: 1fr; }
  .entree__actes .bouton { width: 100%; }
  .formule__cible { min-height: 0; }
}

@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;
  }
  .a-paraitre { opacity: 1; transform: none; }
  .releve__onde { display: none; }
  .releve__arc { opacity: 1; }
}

@media print {
  .barre, .panneau, .saut-au-contenu, .tirette { display: none !important; }
  body { background: #fff; }
  .dossier { break-inside: avoid; }
}
/* ==========================================================================
   22. LE DOSSIER DE POSE, magazine d Onglivia
   Rien n est ajoute au vocabulaire de la maison sans raison: le magazine
   reprend la carte dossier, son onglet decale, la maille a taches douces,
   les etiquettes en Amatic SC et le tic visuel des compteurs.
   Le sommaire se lit comme un tiroir ouvert, l article comme une fiche
   sortie de ce tiroir et posee a plat sur la table de pose.
   Aucune regle des sections 1 a 21 n est modifiee.
   ========================================================================== */

/* --------------------------------------------------------------------------
   22.1 Reperes communs au magazine
   -------------------------------------------------------------------------- */

.duree {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--encre-douce);
  white-space: nowrap;
}
.duree::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--sauge);
  border-right-color: transparent;
  transform: rotate(-45deg);
}

.date-pose {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Le fil d Ariane du magazine reprend le fil des pages interieures,
   avec un peu plus d air parce qu il porte trois niveaux. */
.fil--magazine { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.fil--magazine span[aria-hidden] { color: var(--sauge); }
.fil--magazine .fil__ici { color: var(--encre); }

/* --------------------------------------------------------------------------
   22.2 Tete du magazine et bandeau de reperes
   -------------------------------------------------------------------------- */

.tete-magazine {
  padding-top: calc(var(--hauteur-en-tete) + 52px);
  padding-bottom: 46px;
  background-color: var(--ivoire);
}
.tete-magazine__carte { max-width: calc(var(--utile) * 10 / 12); margin-inline: auto; }
.tete-magazine__corps {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 40px;
  align-items: start;
}
.tete-magazine h1 { font-size: 3.1rem; margin-bottom: 16px; }
.tete-magazine__chapeau { font-size: 1.14rem; color: var(--encre-douce); }
.tete-magazine__mode {
  border-left: 1px solid var(--sauge-filet);
  padding-left: 30px;
}
.tete-magazine__mode p { font-size: 0.9875rem; color: var(--encre-douce); margin-bottom: 0.9em; }
.tete-magazine__mode .etiquette { margin-bottom: 14px; }

.reperes-magazine {
  border-top: 1px solid var(--sauge-filet);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 30px;
}
.reperes-magazine > div {
  padding: 24px 26px 22px;
  border-left: 1px solid var(--bordure);
}
.reperes-magazine > div:first-child { border-left: 0; padding-left: 0; }
.reperes-magazine .releve { font-size: 2.4rem; }
.reperes-magazine p {
  margin: 10px 0 0;
  font-size: 0.9375rem;
  color: var(--encre-douce);
  max-width: 30ch;
}

/* --------------------------------------------------------------------------
   22.3 Le sommaire, un tiroir de fiches
   -------------------------------------------------------------------------- */

.sommaire {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gouttiere);
  row-gap: 62px;
  align-items: start;
  margin-top: 18px;
}

/* Les onglets ne s alignent pas: le tiroir doit se voir comme un vrai tiroir. */
.sommaire .fiche-pose:nth-child(3n+2) { margin-top: 58px; }
.sommaire .fiche-pose:nth-child(3n) { margin-top: 46px; }

.fiche-pose {
  position: relative;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  border-top-left-radius: 0;
  overflow: hidden;
  transition: border-color var(--souffle-court) var(--courbe),
              transform var(--souffle-court) var(--courbe),
              box-shadow var(--souffle-court) var(--courbe);
}
.fiche-pose::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--sauge-filet);
  z-index: 2;
}
.fiche-pose:hover {
  border-color: var(--sauge);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -18px rgba(27, 35, 32, 0.55);
}
.fiche-pose:focus-within { border-color: var(--amethyste); }

.fiche-pose .onglet { z-index: 3; }
.fiche-pose:hover .onglet { border-color: var(--sauge); }

.fiche-pose__vue {
  display: block;
  position: relative;
  background: var(--sauge-pale);
  border-bottom: 1px solid var(--bordure);
}
.fiche-pose__vue img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.fiche-pose__vue::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(transparent 62%, rgba(107, 138, 112, 0.14));
}

.fiche-pose__corps {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 24px 20px;
}

.fiche-pose__reperes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin: 0 0 12px;
}

.fiche-pose__titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.42rem;
  letter-spacing: -0.015em;
  line-height: 1.24;
  margin: 0 0 12px;
  text-wrap: balance;
}
.fiche-pose__titre a { color: var(--encre); text-decoration: none; }
.fiche-pose__titre a:hover { color: var(--amethyste); text-decoration: underline; text-decoration-thickness: 1px; }

.fiche-pose__extrait {
  font-size: 0.9875rem;
  color: var(--encre-douce);
  margin: 0 0 18px;
  max-width: none;
}

.fiche-pose__pied {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--sauge-filet);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 14px;
  font-size: 0.875rem;
  color: var(--encre-douce);
}
.fiche-pose__rang {
  font-family: var(--manuscrit);
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sauge);
}
.fiche-pose__ouvrir { font-weight: 600; color: var(--amethyste); }
.fiche-pose:hover .fiche-pose__ouvrir { text-decoration: underline; }

.magazine-suite {
  margin-top: 62px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px 34px;
  padding-top: 26px;
  border-top: 1px solid var(--sauge-filet);
}
.magazine-suite p { margin: 0; font-size: 0.9875rem; color: var(--encre-douce); }

/* --------------------------------------------------------------------------
   22.4 Entete d un article
   -------------------------------------------------------------------------- */

.article-pose { display: block; }

.tete-article {
  padding-top: calc(var(--hauteur-en-tete) + 48px);
  padding-bottom: 40px;
  background-color: var(--ivoire);
}
.tete-article__carte { max-width: calc(var(--utile) * 10 / 12); margin-inline: auto; }
.tete-article h1 { font-size: 2.9rem; margin-bottom: 20px; }

.reperes-article {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--sauge-filet);
  max-width: none;
}

.chapo-article {
  position: relative;
  margin: 0;
  padding: 20px 24px 20px 26px;
  background: var(--sauge-pale);
  border: 1px solid var(--bordure);
  border-left: 2px solid var(--amethyste);
  border-radius: 0 var(--rayon-onglet) var(--rayon-onglet) 0;
  font-family: var(--titre);
  font-size: 1.28rem;
  line-height: 1.5;
  color: var(--encre);
  max-width: 62ch;
}

.tete-article__mention {
  margin-top: 20px;
  font-size: 0.9375rem;
  color: var(--encre-douce);
}

.photo-article {
  max-width: calc(var(--utile) * 10 / 12);
  margin: 34px auto 0;
  position: relative;
  border: 1px solid var(--bordure);
  border-radius: 12px;
  border-top-left-radius: 0;
  overflow: hidden;
}
.photo-article img { width: 100%; height: auto; }
.photo-article::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(251, 248, 241, 0.55);
  border-radius: 10px;
  border-top-left-radius: 0;
  pointer-events: none;
}
.photo-article figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 30px 18px 12px;
  background: linear-gradient(transparent, rgba(107, 138, 112, 0.10) 30%, rgba(237, 240, 231, 0.92));
  font-family: var(--manuscrit);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre);
}

/* --------------------------------------------------------------------------
   22.5 Corps de l article, HTML semantique nu
   Le texte verse par la redaction ne porte aucun attribut class, style ni id.
   Toutes les balises sont donc mises en forme ici comme descendantes
   du conteneur .corps-article, avec la forme signature du projet.
   -------------------------------------------------------------------------- */

.corps-plan { padding-block: 54px 76px; }

.corps-article {
  max-width: 68ch;
  margin-inline: auto;
  font-size: 1.0625rem;
  line-height: 1.75;
}

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

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

.corps-article h2 {
  position: relative;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.95rem;
  letter-spacing: -0.015em;
  line-height: 1.16;
  margin: 2.5em 0 0.55em;
  padding-top: 18px;
  border-top: 1px solid var(--sauge-filet);
  text-wrap: balance;
}
.corps-article h2::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 64px;
  height: 3px;
  background: var(--amethyste);
  border-radius: 0 0 2px 2px;
}

.corps-article h3 {
  font-family: var(--courant);
  font-weight: 650;
  font-size: 1.24rem;
  letter-spacing: -0.005em;
  line-height: 1.4;
  margin: 1.9em 0 0.5em;
  padding-left: 16px;
  border-left: 2px solid var(--sauge);
}

.corps-article ul,
.corps-article ol {
  margin: 0 0 1.35em;
  padding-left: 0;
  list-style: none;
}
.corps-article li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.6em;
}
.corps-article ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  border: 1px solid var(--sauge);
  background: var(--sauge-pale);
}
.corps-article ol { counter-reset: pas-de-pose; }
.corps-article ol > li { counter-increment: pas-de-pose; padding-left: 34px; }
.corps-article ol > li::before {
  content: counter(pas-de-pose);
  position: absolute;
  left: 0;
  top: 0.16em;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--sauge-pale);
  border: 1px solid var(--sauge-filet);
  color: var(--amethyste);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.corps-article li ul,
.corps-article li ol { margin: 0.5em 0 0.2em; }

.corps-article strong { font-weight: 650; color: var(--encre); }
.corps-article em { font-style: italic; }

.corps-article a {
  color: var(--amethyste);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--sauge-filet);
}
.corps-article a:hover {
  color: var(--amethyste-fonce);
  text-decoration-color: var(--amethyste);
}

/* Tableau recapitulatif: en tete sur fond sauge, filets fins, chiffres tabulaires. */
.corps-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.9em 0;
  font-size: 0.9375rem;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  border-top-left-radius: 0;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.corps-article thead { background: var(--sauge-pale); }
.corps-article th {
  text-align: left;
  font-family: var(--courant);
  font-weight: 650;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--encre);
  padding: 13px 15px;
  border-bottom: 1px solid var(--sauge-filet);
  vertical-align: bottom;
}
.corps-article td {
  padding: 13px 15px;
  border-bottom: 1px solid var(--bordure);
  vertical-align: top;
  line-height: 1.6;
}
.corps-article tbody tr:last-child td { border-bottom: 0; }
.corps-article tbody tr:nth-child(even) { background: rgba(237, 240, 231, 0.45); }

/* Encadre: la forme signature en miniature, un onglet colle sur le bord haut. */
.corps-article aside {
  position: relative;
  margin: 2.2em 0;
  padding: 26px 26px 22px;
  background: var(--sauge-pale);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  border-top-left-radius: 0;
}
.corps-article aside::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 26px;
  width: 84px;
  height: 12px;
  background: var(--sauge-pale);
  border: 1px solid var(--bordure);
  border-bottom: 0;
  border-radius: var(--rayon-onglet) var(--rayon-onglet) 0 0;
}
.corps-article aside p:last-child { margin-bottom: 0; }
.corps-article aside li { margin-bottom: 0.45em; }

/* Citation: filet amethyste et serif ample, comme le constat de la page d accueil. */
.corps-article blockquote {
  margin: 2em 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--amethyste);
  font-family: var(--titre);
  font-size: 1.32rem;
  line-height: 1.45;
  color: var(--encre);
}
.corps-article blockquote p { margin-bottom: 0.6em; }
.corps-article blockquote p:last-child { margin-bottom: 0; }

.corps-article figure {
  margin: 2em 0;
  border: 1px solid var(--bordure);
  border-radius: 12px;
  border-top-left-radius: 0;
  overflow: hidden;
}
.corps-article figcaption {
  padding: 12px 16px;
  background: var(--sauge-pale);
  border-top: 1px solid var(--bordure);
  font-size: 0.875rem;
  color: var(--encre-douce);
}

/* --------------------------------------------------------------------------
   22.6 Appel a l action et encart auteur
   -------------------------------------------------------------------------- */

.appel-article {
  max-width: calc(var(--utile) * 10 / 12);
  margin: 62px auto 0;
  padding: 0;
  overflow: hidden;
}
.appel-article__corps { padding: 30px 32px 28px; }
.appel-article__titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.72rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 12px;
  max-width: 26ch;
}
.appel-article p { color: var(--encre-douce); }
.appel-article .bouton { margin-top: 18px; }

.encart-auteur {
  max-width: calc(var(--utile) * 10 / 12);
  margin: 46px auto 0;
  padding: 28px 30px 26px;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  border-top-left-radius: 0;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 26px;
  align-items: start;
}
.encart-auteur img {
  width: 96px;
  height: 96px;
  border-radius: 10px;
  border-top-left-radius: 0;
  border: 1px solid var(--bordure);
  object-fit: cover;
}
.encart-auteur p { font-size: 0.9875rem; color: var(--encre-douce); }
.encart-auteur__nom {
  font-family: var(--courant);
  font-weight: 650;
  font-size: 1.06rem;
  color: var(--encre);
  margin-bottom: 2px;
}
.encart-auteur__role {
  font-family: var(--manuscrit);
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sauge);
  margin-bottom: 12px;
}
.encart-auteur__lien { margin-top: 12px; }

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

.zone-aussi {
  background: var(--sauge-pale);
  border-top: 1px solid var(--bordure);
  padding-block: 66px;
}
.zone-aussi__titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 2rem;
  letter-spacing: -0.015em;
  line-height: 1.14;
  margin: 0 0 10px;
}
.zone-aussi__intro { color: var(--encre-douce); margin-bottom: 34px; }

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

.carte-aussi {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  border-top-left-radius: 0;
  overflow: hidden;
  transition: border-color var(--souffle-court) var(--courbe),
              transform var(--souffle-court) var(--courbe);
}
.carte-aussi:hover { border-color: var(--sauge); transform: translateY(-2px); }
.carte-aussi__vue { display: block; border-bottom: 1px solid var(--bordure); }
.carte-aussi__vue img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.carte-aussi__titre {
  margin: 0;
  padding: 18px 20px 0;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.16rem;
  letter-spacing: -0.01em;
  line-height: 1.28;
}
.carte-aussi__titre a { color: var(--encre); text-decoration: none; }
.carte-aussi__titre a:hover { color: var(--amethyste); text-decoration: underline; }
.carte-aussi__accroche {
  margin: 10px 0 0;
  padding: 0 20px 20px;
  font-size: 0.9375rem;
  color: var(--encre-douce);
  max-width: none;
}

/* --------------------------------------------------------------------------
   22.8 Derniers articles sur la page d accueil
   -------------------------------------------------------------------------- */

.derniers-articles .sommaire { grid-template-columns: repeat(3, 1fr); row-gap: 56px; }
.derniers-articles .sommaire .fiche-pose:nth-child(3n+2) { margin-top: 54px; }
.derniers-articles .sommaire .fiche-pose:nth-child(3n) { margin-top: 42px; }
.derniers-articles__suite {
  margin-top: 46px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
}
.derniers-articles__suite p { margin: 0; font-size: 0.9375rem; color: var(--encre-douce); }

/* --------------------------------------------------------------------------
   22.9 Liste des parutions, page auteur et plan du site
   -------------------------------------------------------------------------- */

.parutions { list-style: none; margin: 0; padding: 0; }
.texte-long ul.parutions li,
ul.parutions > li {
  display: grid;
  grid-template-columns: 176px 1fr;
  gap: 8px 26px;
  align-items: baseline;
  padding: 16px 0;
  margin: 0;
  border-bottom: 1px solid var(--bordure);
}
ul.parutions > li:first-child { border-top: 1px solid var(--bordure); }
.parutions__repere { display: flex; flex-direction: column; gap: 5px; }
.parutions a {
  font-family: var(--courant);
  font-weight: 650;
  font-size: 1.04rem;
  line-height: 1.45;
  text-decoration: none;
}
.parutions a:hover { text-decoration: underline; }
.parutions p { margin: 5px 0 0; font-size: 0.9375rem; color: var(--encre-douce); }

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

@media (max-width: 1080px) {
  .sommaire,
  .derniers-articles .sommaire { grid-template-columns: 1fr 1fr; }
  .sommaire .fiche-pose:nth-child(3n+2),
  .sommaire .fiche-pose:nth-child(3n) { margin-top: 40px; }
  .sommaire .fiche-pose:nth-child(even) { margin-top: 58px; }
  .derniers-articles .sommaire .fiche-pose:nth-child(3n+2),
  .derniers-articles .sommaire .fiche-pose:nth-child(3n) { margin-top: 40px; }
  .derniers-articles .sommaire .fiche-pose:nth-child(even) { margin-top: 54px; }
}

@media (max-width: 940px) {
  .tete-magazine h1 { font-size: 2.5rem; }
  .tete-article h1 { font-size: 2.35rem; }
  .tete-magazine__corps { grid-template-columns: 1fr; gap: 28px; }
  .tete-magazine__mode { border-left: 0; border-top: 1px solid var(--sauge-filet); padding-left: 0; padding-top: 24px; }
  .reperes-magazine { grid-template-columns: 1fr; }
  .reperes-magazine > div { border-left: 0; padding-left: 0; border-top: 1px solid var(--bordure); }
  .reperes-magazine > div:first-child { border-top: 0; }
  .aussi-grille { grid-template-columns: 1fr 1fr; }
  .aussi-grille .carte-aussi:nth-child(3) { grid-column: 1 / -1; }
  .corps-article { max-width: none; }
}

@media (max-width: 640px) {
  .tete-magazine h1 { font-size: 2.1rem; }
  .tete-article h1 { font-size: 2rem; }
  .tete-magazine { padding-top: calc(var(--hauteur-en-tete) + 34px); }
  .tete-article { padding-top: calc(var(--hauteur-en-tete) + 32px); }
  .sommaire,
  .derniers-articles .sommaire,
  .aussi-grille { grid-template-columns: 1fr; }
  .sommaire .fiche-pose,
  .sommaire .fiche-pose:nth-child(even),
  .sommaire .fiche-pose:nth-child(3n+2),
  .sommaire .fiche-pose:nth-child(3n),
  .derniers-articles .sommaire .fiche-pose,
  .derniers-articles .sommaire .fiche-pose:nth-child(even),
  .derniers-articles .sommaire .fiche-pose:nth-child(3n+2),
  .derniers-articles .sommaire .fiche-pose:nth-child(3n) { margin-top: 44px; }
  .aussi-grille .carte-aussi:nth-child(3) { grid-column: auto; }
  .corps-article h2 { font-size: 1.6rem; }
  .corps-article h3 { font-size: 1.14rem; }
  .corps-article table { font-size: 0.875rem; }
  .corps-article th, .corps-article td { padding: 10px 11px; }
  .corps-article blockquote { font-size: 1.16rem; padding-left: 18px; }
  .corps-article aside { padding: 24px 20px 20px; }
  .chapo-article { font-size: 1.14rem; padding: 18px 18px 18px 20px; }
  .appel-article__corps { padding: 26px 20px 24px; }
  .appel-article .bouton { width: 100%; }
  .encart-auteur { grid-template-columns: 1fr; gap: 18px; padding: 24px 20px 22px; }
  .texte-long ul.parutions li,
  ul.parutions > li { grid-template-columns: 1fr; }
  .magazine-suite { flex-direction: column; align-items: flex-start; }
  .magazine-suite .bouton { width: 100%; }
}

/* Rubriques du pied de page dans le magazine. Le contrat du gabarit reserve les
   balises h2 et h3 au corps redactionnel: les intitules de colonnes du pied de
   page y sont donc des paragraphes, qui reprennent exactement l aspect de .pied h2. */
.pied__rubrique {
  font-family: var(--manuscrit);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sauge);
  margin: 0 0 16px;
  max-width: none;
}

/* Maillage du reseau, bandeau de pied de page. Mise en page seulement:
   les couleurs, la police et le survol restent ceux du site.
   grid-column et flex-basis font tenir le bandeau sur toute la largeur,
   que le pied de page soit une grille ou une boite flexible.
   Les raccourcis margin et padding sont evites: ils ecraseraient le retrait
   interieur d une colonne dont le bandeau herite la classe. */
[data-reseau-bloc]{grid-column:1/-1;flex-basis:100%;width:100%;margin-top:26px;padding-top:18px}
[data-reseau-titre]{font-size:.8rem;line-height:1.3;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;margin:0 0 12px}
ul[data-reseau]{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin:0;padding:0}
ul[data-reseau] li{margin:0;padding:0}