/* ==========================================================================
   Argentelle, feuille de style unique
   Univers: fiche technique de coloration, carton coquille d oeuf,
   filets bordeaux mat, validations vert d eau.
   Nomenclature: vocabulaire de salon (cadre, case, filet, meche, patine,
   nuancier, repousse, fondu, rouleau).
   ========================================================================== */

:root {
  --coquille: #F5EFE3;
  --coquille-soutenu: #EDE4D4;
  --carton: #FBF7EF;
  --encre: #2E1015;
  --encre-douce: #6B4A50;
  --eau: #276855;
  --eau-sombre: #1F5646;
  --eau-texte: #F7F2E7;
  --bordeaux: #6E2233;
  --filet: #D8C9B4;

  --titre: "Orbitron", "Trebuchet MS", "DejaVu Sans", sans-serif;
  --courant: "Overpass", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --etiquette: "Signika", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --utile: 1160px;
  --gouttiere: 24px;
  --entete-haut: 78px;
  --entete-bas: 62px;
}

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

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--coquille);
  background-image: repeating-linear-gradient(0deg, rgba(110, 34, 51, .022) 0 1px, transparent 1px 3px);
  color: var(--encre);
  font-family: var(--courant);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.72;
  font-variant-numeric: tabular-nums;
}

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

h1, h2, h3, h4 {
  font-family: var(--titre);
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0 0 .6em;
  color: var(--encre);
  text-wrap: balance;
}

h1 { font-size: 2.8rem; font-weight: 700; }
h2 { font-size: 1.95rem; font-weight: 600; }
h3 { font-size: 1.2rem; font-weight: 500; }
h4 { font-size: 1.0625rem; font-weight: 500; }

p { margin: 0 0 1.1em; max-width: 66ch; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .45em; }

a {
  color: var(--eau-sombre);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
a:hover { color: var(--bordeaux); }

strong { font-weight: 600; }

:focus-visible {
  outline: 2px solid var(--bordeaux);
  outline-offset: 3px;
  box-shadow: 0 0 0 1px var(--eau-texte);
}

::selection { background: var(--eau); color: var(--eau-texte); }

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bordeaux);
  color: var(--eau-texte);
  padding: 12px 20px;
  font-family: var(--etiquette);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  z-index: 90;
}
.evitement:focus { left: 12px; top: 12px; color: var(--eau-texte); }

.hors-vue {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ------------------------------------------------------ trame et cadres -- */

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

.douze {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gouttiere);
}

.pave { padding: 88px 0; position: relative; }
.pave--serre { padding: 62px 0; }
.pave--alterne { background: var(--coquille-soutenu); }
.pave--alterne::before,
.pave--alterne::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--filet);
  position: absolute;
  left: 0; right: 0;
}
.pave--alterne::before { top: 0; }
.pave--alterne::after { bottom: 0; }

/* Motif signature repris en CSS: arcs concentriques ancres en bas au centre. */
.trame-arcs {
  background-image:
    repeating-radial-gradient(circle at bottom center, rgba(110, 34, 51, .16) 0 1px, rgba(0, 0, 0, 0) 1px 40px),
    repeating-radial-gradient(circle at bottom center, rgba(39, 104, 85, .12) 0 1px, rgba(0, 0, 0, 0) 1px 80px);
  background-repeat: no-repeat;
  background-position: bottom center;
}

/* Forme signature: double encadrement, case de reference, encoche de signature. */
.cadre {
  position: relative;
  background: var(--carton);
  border: 1px solid var(--filet);
  padding: 46px 26px 30px;
}
.cadre::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--bordeaux);
  pointer-events: none;
}
.cadre::after {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 14px;
  height: 14px;
  border: 1px solid var(--bordeaux);
  background: var(--coquille-soutenu);
  pointer-events: none;
}
.cadre > * { position: relative; z-index: 1; }

.case-ref {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 2;
  min-width: 132px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--coquille-soutenu);
  border: 1px solid var(--bordeaux);
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bordeaux);
  white-space: nowrap;
}

/* Case de reference posee dans le flux, hors cadre. */
.etiquette {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  background: var(--coquille-soutenu);
  border: 1px solid var(--bordeaux);
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bordeaux);
}
.etiquette--eau { border-color: var(--eau); color: var(--eau-sombre); background: var(--carton); }

.surtitre {
  display: block;
  margin-bottom: 16px;
}

.filet-eau {
  position: absolute;
  inset: 10px;
  border: 1px solid var(--eau);
  pointer-events: none;
}

.chapo {
  font-size: 1.1875rem;
  font-weight: 300;
  color: var(--encre-douce);
  max-width: 62ch;
}

.legende {
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bordeaux);
}

.menu-texte { font-size: .875rem; color: var(--encre-douce); }

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

.bouton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 30px 0 38px;
  border-radius: 3px;
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background-color .18s linear, transform .1s linear, border-color .18s linear;
}
.bouton::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  opacity: .55;
}
.bouton::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 9px;
  width: 0;
  height: 9px;
  transform: translateX(-50%);
  border: 1px solid currentColor;
  border-bottom: 0;
  border-radius: 40px 40px 0 0;
  opacity: 0;
  transition: width .18s linear, opacity .18s linear;
}
.bouton:hover::after { width: 62px; opacity: .8; }
.bouton:active { transform: translateY(1px); }

.bouton--principal {
  background: var(--eau);
  color: var(--eau-texte);
}
.bouton--principal:hover { background: var(--eau-sombre); color: var(--eau-texte); }

.bouton--second {
  background: transparent;
  color: var(--encre);
  border: 1px solid var(--filet);
  box-shadow: inset 0 0 0 1px var(--carton), inset 0 0 0 2px var(--bordeaux);
  padding: 0 26px 0 38px;
}
.bouton--second:hover {
  background: var(--coquille-soutenu);
  color: var(--encre);
  box-shadow: inset 0 0 0 1px var(--coquille-soutenu), inset 0 0 0 2px var(--eau);
}

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

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

.entete-salon {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--entete-haut);
  display: flex;
  align-items: center;
  background: rgba(245, 239, 227, .94);
  backdrop-filter: blur(8px);
  transition: height .2s linear;
}
.entete-salon::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--bordeaux);
  opacity: 0;
  transition: opacity .2s linear;
}
.entete-salon.est-posee { height: var(--entete-bas); }
.entete-salon.est-posee::after { opacity: 1; }

.entete-salon .utile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(100% - 2 * var(--gouttiere), var(--utile));
}

.logotype {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--encre);
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: .04em;
}
.logotype svg { flex: none; }
.logotype:hover { color: var(--bordeaux); }

.nav-ancres { display: flex; align-items: center; gap: 6px; }
.nav-ancres a {
  font-family: var(--courant);
  font-weight: 600;
  font-size: .9375rem;
  color: var(--encre);
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid transparent;
}
.nav-ancres a:hover,
.nav-ancres a.est-active { border-color: var(--bordeaux); color: var(--bordeaux); }

.entete-salon .bouton { height: 44px; padding: 0 20px 0 32px; font-size: .9375rem; }

.bouton-meches {
  display: none;
  width: 46px; height: 46px;
  background: transparent;
  border: 1px solid var(--bordeaux);
  border-radius: 2px;
  cursor: pointer;
  padding: 12px 10px;
  flex-direction: column;
  justify-content: space-between;
}
.bouton-meches span {
  display: block;
  height: 1px;
  background: var(--bordeaux);
  transition: transform .2s linear, opacity .2s linear;
}
.bouton-meches[aria-expanded="true"] span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.bouton-meches[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bouton-meches[aria-expanded="true"] span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

.panneau-meches {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--coquille);
  padding: calc(var(--entete-haut) + 20px) 0 40px;
  overflow-y: auto;
  transform: translateY(-100%);
  transition: transform .28s ease-out;
  visibility: hidden;
}
.panneau-meches.est-ouvert { transform: translateY(0); visibility: visible; }
.panneau-meches ul { list-style: none; margin: 0 0 24px; padding: 0; }
.panneau-meches li { margin: 0; border-bottom: 1px solid var(--filet); }
.panneau-meches li:first-child { border-top: 1px solid var(--filet); }
.panneau-meches a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 15px 4px;
  text-decoration: none;
  color: var(--encre);
  font-weight: 600;
}
.panneau-meches .rang {
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .1em;
  color: var(--bordeaux);
  min-width: 62px;
}
body.est-verrouillee { overflow: hidden; }

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

.dossier-ouverture {
  padding: calc(var(--entete-haut) + 46px) 0 74px;
  position: relative;
  overflow: hidden;
}
.arcs-fond {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 620px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
}
.dossier-ouverture .utile { position: relative; z-index: 1; }

.imprime {
  background: var(--carton);
  border: 1px solid var(--filet);
  position: relative;
  padding: 6px;
}
.imprime > .interieur {
  border: 1px solid var(--bordeaux);
  padding: 0;
}

.bande-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--bordeaux);
  background: var(--coquille-soutenu);
}
.bande-entete .intitule {
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bordeaux);
  margin: 0;
}

.ligne-champs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--bordeaux);
}
.champ-fiche {
  padding: 14px 18px 16px;
  border-right: 1px solid var(--filet);
  background: var(--carton);
}
.champ-fiche:last-child { border-right: 0; }
.champ-fiche .intitule {
  display: block;
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bordeaux);
  margin-bottom: 6px;
}
.champ-fiche .saisie {
  display: block;
  font-weight: 600;
  font-size: 1.0625rem;
  border-bottom: 1px solid var(--filet);
  padding-bottom: 6px;
}

.corps-dossier {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: var(--gouttiere);
  padding: 34px 22px 26px;
}
.corps-dossier .colonne-texte { grid-column: span 7; }
.corps-dossier .colonne-portrait { grid-column: span 4; }

.dossier-ouverture h1 { margin-bottom: 18px; }
.dossier-ouverture .chapo { margin-bottom: 22px; }

.liste-nette { list-style: none; padding: 0; margin: 0 0 8px; }
.liste-nette li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  max-width: 60ch;
}
.liste-nette li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 16px;
  height: 8px;
  border: 1px solid var(--eau);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
}

.cadre-photo {
  position: relative;
  background: var(--carton);
  border: 1px solid var(--filet);
  padding: 8px;
}
.cadre-photo::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: 8px;
  height: 90px;
  background: linear-gradient(to bottom, rgba(110, 34, 51, 0), rgba(110, 34, 51, .08));
  pointer-events: none;
}
.cadre-photo figcaption {
  margin-top: 10px;
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .08em;
  color: var(--bordeaux);
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

.pied-formulaire {
  border-top: 1px solid var(--bordeaux);
  background: var(--coquille-soutenu);
  padding: 20px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
}
.pied-formulaire .reassurance {
  margin: 0;
  max-width: 40ch;
  font-size: .9375rem;
  color: var(--encre-douce);
}
.pied-formulaire .reassurance strong { color: var(--bordeaux); }

/* ----------------------------------------------------------- compteurs -- */

.compteur {
  display: inline-flex;
  align-items: flex-end;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--bordeaux);
  font-variant-numeric: tabular-nums;
}
.compteur--petit { font-size: 2.2rem; }

.rouleau { display: inline-flex; }
.rouleau__col {
  display: block;
  height: 1em;
  overflow: hidden;
}
.rouleau__piste {
  display: block;
  transform: translateY(0);
  transition: transform 1100ms cubic-bezier(.2, .78, .28, 1);
}
.rouleau__chiffre { display: block; height: 1em; line-height: 1; }
.rouleau__fixe { display: block; height: 1em; line-height: 1; }

.arc-compteur { display: block; margin-top: 6px; }
.arc-compteur path {
  fill: none;
  stroke: var(--eau);
  stroke-width: 1;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 1100ms cubic-bezier(.2, .78, .28, 1);
}
.arc-compteur.est-trace path { stroke-dashoffset: 0; }

.mesure {
  display: block;
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bordeaux);
  margin-top: 8px;
}
.mesure + p { margin-top: 8px; font-size: .9375rem; color: var(--encre-douce); }

.trois-chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 34px;
  align-items: flex-end;
}
.trois-chiffres > div { min-width: 132px; }

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

.trois-cadres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); align-items: stretch; }
.trois-cadres .cadre { display: flex; flex-direction: column; }
.trois-cadres p:last-child { margin-bottom: 0; }

.releve {
  margin: 26px 0 0;
  border-top: 1px solid var(--filet);
  padding-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
}
.releve dt {
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bordeaux);
}
.releve dd { margin: 4px 0 0; font-size: .9375rem; color: var(--encre-douce); }

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

.suite-etapes { max-width: 900px; }
.etape-fondu {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 22px;
  padding: 26px 0;
  border-top: 1px solid var(--filet);
  position: relative;
}
.etape-fondu:first-child { border-top: 1px solid var(--bordeaux); }
.etape-fondu:last-child { border-bottom: 1px solid var(--bordeaux); }
.etape-fondu .numero {
  width: 62px; height: 62px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--bordeaux);
  background: var(--coquille-soutenu);
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--bordeaux);
}
.etape-fondu h3 { margin-bottom: .4em; }
.etape-fondu p:last-child { margin-bottom: 0; }
.etape-fondu .duree {
  display: inline-block;
  margin-bottom: 10px;
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--eau-sombre);
}

.paire-terrain { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 34px; align-items: start; }

/* ---------------------------------------------------- demonstration --- */

.demonstration { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 34px; align-items: center; }
.regle-mois {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid var(--bordeaux);
  background: var(--carton);
  margin-top: 22px;
}
.regle-mois div {
  padding: 12px 6px;
  border-right: 1px solid var(--filet);
  text-align: center;
  font-size: .8125rem;
}
.regle-mois div:last-child { border-right: 0; }
.regle-mois .mois {
  display: block;
  font-family: var(--etiquette);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--bordeaux);
}
.regle-mois .etat { display: block; color: var(--encre-douce); }
.regle-mois .ingrat { background: var(--coquille-soutenu); }

/* ----------------------------------------------------- fonctionnalites -- */

.grille-outils { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); }
.carte-outil { position: relative; overflow: hidden; }
.carte-outil .arcs-coin {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 180px;
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}
.carte-outil h3 { margin-bottom: .5em; }
.carte-outil p:last-child { margin-bottom: 0; }

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

.deux-gains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 54px; }
.gain {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding: 30px 0;
  border-bottom: 1px solid var(--filet);
}
.gain h3 { margin-bottom: .35em; }
.gain p:last-child { margin-bottom: 0; }

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

.bandeau-chiffres {
  border-top: 1px solid var(--bordeaux);
  border-bottom: 1px solid var(--bordeaux);
  background: var(--coquille-soutenu);
  padding: 40px 0;
  margin-bottom: 44px;
}
.bandeau-chiffres .utile {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gouttiere);
}
.bandeau-chiffres .colonne { border-left: 1px solid var(--filet); padding-left: 18px; }
.bandeau-chiffres .colonne:first-child { border-left: 0; padding-left: 0; }

.trois-temoins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); }
.temoin { display: flex; flex-direction: column; }
.temoin blockquote { margin: 0 0 18px; }
.temoin blockquote p:last-child { margin-bottom: 0; }
.temoin figcaption {
  margin-top: auto;
  border-top: 1px solid var(--filet);
  padding-top: 14px;
  font-size: .9375rem;
  color: var(--encre-douce);
}
.temoin figcaption .nom { display: block; font-weight: 600; color: var(--encre); font-size: 1rem; }

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

.trois-formules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); align-items: stretch; }
.formule { display: flex; flex-direction: column; padding-bottom: 34px; }
.formule--phare { padding: 52px 30px 38px; background: var(--carton); }
.formule .prix {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--bordeaux);
  display: block;
  margin: 4px 0 2px;
}
.formule .unite {
  display: block;
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--eau-sombre);
  margin-bottom: 14px;
}
.formule .pour { font-size: .9375rem; color: var(--encre-douce); border-top: 1px solid var(--filet); padding-top: 14px; }
.formule ul { list-style: none; padding: 0; margin: 0 0 24px; }
.formule li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
  font-size: .9375rem;
  line-height: 1.6;
}
.formule li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 24px;
  height: 12px;
  border: 1px solid var(--eau);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
}
.formule .bouton { margin-top: auto; }
.note-tarifs { margin-top: 26px; font-size: .9375rem; color: var(--encre-douce); max-width: 78ch; }

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

.pile-questions { max-width: 860px; margin-inline: auto; }
.question-veille {
  border-top: 1px solid var(--filet);
  background: transparent;
}
.question-veille:first-of-type { border-top: 1px solid var(--bordeaux); }
.question-veille:last-of-type { border-bottom: 1px solid var(--bordeaux); }
.question-veille summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 30px;
  gap: 16px;
  align-items: baseline;
  padding: 20px 6px;
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1.0625rem;
}
.question-veille summary::-webkit-details-marker { display: none; }
.question-veille summary:hover { background: var(--coquille-soutenu); }
.question-veille summary .rang {
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bordeaux);
}
.question-veille summary .croix {
  justify-self: end;
  width: 18px; height: 18px;
  border: 1px solid var(--bordeaux);
  position: relative;
  align-self: center;
}
.question-veille summary .croix::before,
.question-veille summary .croix::after {
  content: "";
  position: absolute;
  background: var(--bordeaux);
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.question-veille summary .croix::before { width: 8px; height: 1px; }
.question-veille summary .croix::after { width: 1px; height: 8px; transition: opacity .18s linear; }
.question-veille[open] summary .croix::after { opacity: 0; }
.reponse-veille { padding: 0 6px 24px 98px; }
.reponse-veille p:last-child { margin-bottom: 0; }

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

.brief-contact { position: relative; }
.deux-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px var(--gouttiere); }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ--plein { grid-column: 1 / -1; }
.champ label,
.consentement span {
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bordeaux);
}
.champ input,
.champ select,
.champ textarea {
  font-family: var(--courant);
  font-size: 1rem;
  color: var(--encre);
  background: var(--coquille);
  border: 1px solid var(--filet);
  border-bottom: 1px solid var(--bordeaux);
  border-radius: 0;
  padding: 12px 14px;
  width: 100%;
}
.champ textarea { resize: vertical; min-height: 132px; }
.champ input:hover,
.champ select:hover,
.champ textarea:hover { background: var(--carton); }

.consentement {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border-top: 1px solid var(--filet);
  padding-top: 18px;
}
.consentement input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--eau); }
.consentement span {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--courant);
  font-weight: 400;
  font-size: .9375rem;
  color: var(--encre-douce);
}
.suite-envoi {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  border-top: 1px solid var(--bordeaux);
  padding-top: 20px;
}
.suite-envoi p { margin: 0; font-size: .9375rem; color: var(--encre-douce); max-width: 44ch; }

.colonne-contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 34px; align-items: start; }
.recap-contact dl { margin: 0; }
.recap-contact dt {
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bordeaux);
  margin-top: 16px;
}
.recap-contact dt:first-child { margin-top: 0; }
.recap-contact dd { margin: 4px 0 0; font-size: .9375rem; color: var(--encre-douce); }

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

.entete-page { padding: calc(var(--entete-haut) + 56px) 0 30px; }
.fil { font-size: .875rem; color: var(--encre-douce); margin-bottom: 16px; }
.fil a { color: var(--eau-sombre); }
.corps-page { padding: 20px 0 80px; }
.corps-page h2 { margin-top: 46px; }
.corps-page h3 { margin-top: 30px; }
.corps-page .cadre { margin: 30px 0; }
.corps-page ul li { max-width: 66ch; }

.deux-colonnes-page { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 40px; align-items: start; }
.encadre-lateral { position: sticky; top: 110px; }
.encadre-lateral ul { list-style: none; padding: 0; margin: 0; }
.encadre-lateral li { border-bottom: 1px solid var(--filet); padding: 8px 0; font-size: .9375rem; }
.encadre-lateral li:last-child { border-bottom: 0; }

.portrait-auteur { max-width: 260px; }
.liens-profils { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 8px; list-style: none; }
.liens-profils a {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--filet);
  background: var(--carton);
  text-decoration: none;
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bordeaux);
}
.liens-profils a:hover { border-color: var(--eau); color: var(--eau-sombre); }

.centre-court { max-width: 720px; margin-inline: auto; text-align: left; }
.grand-numero {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 4.4rem;
  line-height: 1;
  color: var(--bordeaux);
  margin: 0 0 10px;
}

.table-plan { width: 100%; border-collapse: collapse; margin: 20px 0 34px; }
.table-plan caption {
  text-align: left;
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bordeaux);
  padding-bottom: 10px;
}
.table-plan th, .table-plan td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border: 1px solid var(--filet);
  font-size: .9375rem;
}
.table-plan th { background: var(--coquille-soutenu); font-family: var(--etiquette); font-weight: 600; letter-spacing: .06em; color: var(--bordeaux); }

/* ----------------------------------------------------------- pied de page */

.pied-nuancier {
  background: var(--coquille-soutenu);
  border-top: 1px solid var(--bordeaux);
  padding: 62px 0 26px;
}
.colonnes-pied {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 3fr));
  gap: 34px var(--gouttiere);
}
.colonnes-pied h2 {
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bordeaux);
  margin-bottom: 14px;
}
.colonnes-pied ul { list-style: none; padding: 0; margin: 0; }
.colonnes-pied li { margin-bottom: 8px; font-size: .9375rem; }
.colonnes-pied a { color: var(--encre); text-decoration: none; }
.colonnes-pied a:hover { color: var(--eau-sombre); text-decoration: underline; }
.colonnes-pied p { font-size: .9375rem; color: var(--encre-douce); }

.reseau-pied {
  margin-top: 40px;
  border-top: 1px solid var(--filet);
  padding-top: 20px;
  font-size: .875rem;
  color: var(--encre-douce);
}
.reseau-pied ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; margin: 8px 0 0; }
.reseau-pied a { color: var(--encre-douce); }

.barre-pied {
  margin-top: 26px;
  border-top: 1px solid var(--bordeaux);
  padding-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  font-size: .875rem;
  color: var(--encre-douce);
}

/* ------------------------------------------------- entree au defilement -- */

.au-defilement {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease-out, transform .5s ease-out;
}
.au-defilement.est-vue { opacity: 1; transform: none; }

/* ------------------------------------------------------------ mobiles --- */

@media (max-width: 1080px) {
  .nav-ancres a { padding: 6px 7px; font-size: .875rem; }
  .colonnes-pied { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  h1 { font-size: 2.2rem; }
  .nav-ancres, .entete-salon .bouton { display: none; }
  .bouton-meches { display: flex; }
  .corps-dossier { grid-template-columns: minmax(0, 1fr); }
  .corps-dossier .colonne-texte,
  .corps-dossier .colonne-portrait { grid-column: auto; }
  .ligne-champs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .champ-fiche:nth-child(2n) { border-right: 0; }
  .champ-fiche:nth-child(-n+2) { border-bottom: 1px solid var(--filet); }
  .trois-cadres, .grille-outils, .trois-temoins, .trois-formules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deux-gains { grid-template-columns: minmax(0, 1fr); }
  .paire-terrain, .demonstration, .colonne-contact, .deux-colonnes-page { grid-template-columns: minmax(0, 1fr); }
  .encadre-lateral { position: static; }
  .bandeau-chiffres .utile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bandeau-chiffres .colonne:nth-child(odd) { border-left: 0; padding-left: 0; }
  .regle-mois { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  body { font-size: 1rem; }
  h1 { font-size: 1.95rem; }
  h2 { font-size: 1.55rem; }
  .pave { padding: 58px 0; }
  .dossier-ouverture { padding-top: calc(var(--entete-haut) + 26px); }
  .trois-cadres, .grille-outils, .trois-temoins, .trois-formules { grid-template-columns: minmax(0, 1fr); }
  .ligne-champs { grid-template-columns: minmax(0, 1fr); }
  .champ-fiche { border-right: 0; border-bottom: 1px solid var(--filet); }
  .deux-champs { grid-template-columns: minmax(0, 1fr); }
  .gain { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .etape-fondu { grid-template-columns: minmax(0, 1fr); }
  .reponse-veille { padding-left: 6px; }
  .question-veille summary { grid-template-columns: 60px minmax(0, 1fr) 22px; gap: 10px; }
  .regle-mois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compteur { font-size: 2.6rem; }
  .colonnes-pied { grid-template-columns: minmax(0, 1fr); }
  .arcs-fond { width: 460px; }
  .cadre { padding: 44px 18px 26px; }
  .grand-numero { font-size: 3.2rem; }
}

@media (max-width: 420px) {
  .case-ref, .etiquette { font-size: .75rem; letter-spacing: .06em; min-width: 0; }
  .bouton { width: 100%; }
}

@media print {
  .entete-salon, .panneau-meches, .bouton-meches, .arcs-fond { display: none; }
  body { background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .au-defilement { opacity: 1; transform: none; }
  .arc-compteur path { stroke-dashoffset: 0; }
  .panneau-meches { transition: none; }
}
/* ==========================================================================
   MAGAZINE, Le Carnet de demarcation
   Section ajoutee en fin de feuille: aucune regle precedente n est modifiee.
   Meme carton coquille d oeuf, memes doubles filets bordeaux, memes cases de
   reference en Signika petites capitales, meme faisceau d arcs en demi
   cercles et memes compteurs a rouleaux que le dossier de transition.
   Nomenclature de salon poursuivie: carnet, fiche, feuillet, releve, renvoi.
   Le corps redactionnel ne porte aucune classe: toutes ses balises sont
   mises en forme comme descendantes de .corps-article.
   ========================================================================== */

/* ----------------------------------------------- en tete du carnet ------ */

.entete-carnet {
  position: relative;
  overflow: hidden;
  padding: calc(var(--entete-haut) + 48px) 0 30px;
  background: var(--coquille-soutenu);
  border-bottom: 1px solid var(--filet);
}
.entete-carnet .utile { position: relative; z-index: 1; }
.entete-carnet h1 { margin-bottom: 16px; }
.entete-carnet .chapo { margin-bottom: 24px; max-width: 68ch; }

/* Releve d ouverture: deux compteurs a rouleaux et la date de mise en ligne. */
.releve-carnet {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 18px 46px;
  border-top: 1px solid var(--bordeaux);
  padding-top: 20px;
}
.releve-carnet > div { min-width: 132px; }
.releve-carnet .etiquette { align-self: center; }
.compteur--carnet { font-size: 2.4rem; }

/* ------------------------------------------- grille et fiches d article - */

.grille-carnet {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
  align-items: stretch;
}
.grille-carnet--large { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.fiche-carnet {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--carton);
  border: 1px solid var(--filet);
  padding: 36px 18px 22px;
  transition: background-color .18s linear, transform .1s linear;
  /* Rappel du motif: trois arcs en filigrane ancres en bas au centre. */
  background-image:
    repeating-radial-gradient(circle at bottom center, rgba(110, 34, 51, .13) 0 1px, rgba(0, 0, 0, 0) 1px 40px);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 240px 130px;
}
.fiche-carnet::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--bordeaux);
  pointer-events: none;
  transition: border-color .18s linear;
}
.fiche-carnet::after {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 14px;
  height: 14px;
  border: 1px solid var(--bordeaux);
  background: var(--coquille-soutenu);
  pointer-events: none;
}
.fiche-carnet > * { position: relative; z-index: 1; }
.fiche-carnet:hover { background-color: var(--coquille-soutenu); }
.fiche-carnet:hover::before { border-color: var(--eau); }
.fiche-carnet:focus-within::before { border-color: var(--eau); }

/* Passe partout de 8 pixels en coquille d oeuf, comme le carton d une fiche. */
.fiche-carnet .cliche {
  margin: 0 0 16px;
  padding: 8px;
  background: var(--coquille);
  border: 1px solid var(--filet);
}
.fiche-carnet .cliche img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.fiche-carnet h3,
.fiche-carnet .titre-fiche {
  position: static;
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.22;
  letter-spacing: -.02em;
  margin: 0 0 10px;
  color: var(--encre);
  text-wrap: balance;
}
.fiche-carnet a.renvoi {
  color: inherit;
  text-decoration: none;
}
.fiche-carnet a.renvoi::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
.fiche-carnet a.renvoi:hover { color: var(--bordeaux); }
.fiche-carnet p {
  font-size: .9375rem;
  line-height: 1.62;
  color: var(--encre-douce);
  margin: 0 0 16px;
  max-width: none;
}
.fiche-carnet .releve-fiche {
  margin: auto 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: baseline;
  border-top: 1px solid var(--filet);
  padding-top: 12px;
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bordeaux);
}
.fiche-carnet .releve-fiche time { font-variant-numeric: tabular-nums; }
.fiche-carnet .releve-fiche .duree { color: var(--eau-sombre); }

/* Premiere fiche du sommaire, posee sur deux colonnes. */
.fiche-carnet--tete { grid-column: span 2; }
.fiche-carnet--tete .titre-fiche,
.fiche-carnet--tete h3 { font-size: 1.55rem; }
.fiche-carnet--tete .cliche img { aspect-ratio: 12 / 5; }
.fiche-carnet--tete p { font-size: 1.0625rem; }

/* --------------------------------------- section du sommaire du carnet -- */

.sommaire-carnet { padding: 62px 0 88px; }
.sommaire-carnet .rang-sommaire {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  border-bottom: 1px solid var(--bordeaux);
  padding-bottom: 12px;
  margin-bottom: 28px;
}
.sommaire-carnet .rang-sommaire p {
  margin: 0;
  font-size: .9375rem;
  color: var(--encre-douce);
  max-width: 62ch;
}

/* ------------------------------------------------- entete d un article -- */

.entete-article {
  position: relative;
  overflow: hidden;
  padding: calc(var(--entete-haut) + 44px) 0 8px;
  background: var(--coquille-soutenu);
  border-bottom: 1px solid var(--filet);
}
.entete-article .utile { position: relative; z-index: 1; }

.fil-carnet {
  font-size: .875rem;
  color: var(--encre-douce);
  margin: 0 0 18px;
  max-width: none;
}
.fil-carnet a { color: var(--eau-sombre); }
.fil-carnet .separateur {
  display: inline-block;
  width: 18px;
  height: 9px;
  margin: 0 8px;
  border: 1px solid var(--filet);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  vertical-align: middle;
}
.fil-carnet .courant { color: var(--bordeaux); }

.entete-article h1 { margin-bottom: 18px; max-width: 24ch; }

.reperes-article {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  border-top: 1px solid var(--bordeaux);
  border-bottom: 1px solid var(--filet);
  padding: 12px 0;
  margin-bottom: 24px;
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bordeaux);
}
.reperes-article .lecture {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--eau-sombre);
}
.compteur--lecture {
  font-size: 1.35rem;
  color: var(--eau-sombre);
  line-height: 1;
}
.reperes-article time { font-variant-numeric: tabular-nums; }
.reperes-article .maj { color: var(--encre-douce); }

/* Image a la une, posee dans son passe partout de carton. */
.cliche-une {
  margin: 0 0 6px;
  padding: 8px;
  background: var(--coquille);
  border: 1px solid var(--filet);
}
.cliche-une img { width: 100%; height: auto; }
.cliche-une figcaption {
  margin-top: 8px;
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bordeaux);
}

/* --------------------------------------------------- corps de l article - */

.feuillet-article { padding: 34px 0 82px; }

.exergue {
  position: relative;
  border-top: 1px solid var(--bordeaux);
  border-bottom: 1px solid var(--bordeaux);
  padding: 22px 0 22px 26px;
  margin: 0 0 34px;
  max-width: 70ch;
  font-size: 1.1875rem;
  font-weight: 300;
  line-height: 1.62;
  color: var(--encre-douce);
}
.exergue::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 3px;
  background: var(--eau);
}

/* Le corps est du HTML nu: chaque balise est mise en forme ici. */
.corps-article {
  max-width: 68ch;
  font-size: 1.0625rem;
  line-height: 1.72;
}
.corps-article > * { max-width: none; }

.corps-article h2 {
  position: relative;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.95rem;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--encre);
  margin: 52px 0 .55em;
  padding-top: 22px;
  border-top: 1px solid var(--filet);
  text-wrap: balance;
}
.corps-article h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 48px;
  height: 24px;
  border: 1px solid var(--bordeaux);
  border-bottom: 0;
  border-radius: 48px 48px 0 0;
  transform: translateY(-24px);
  background: transparent;
}
.corps-article > h2:first-child { margin-top: 0; }

.corps-article h3 {
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--bordeaux);
  margin: 34px 0 .5em;
  padding-left: 16px;
  border-left: 2px solid var(--eau);
}

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

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

.corps-article a {
  color: var(--eau-sombre);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.corps-article a:hover {
  color: var(--bordeaux);
  background: var(--coquille-soutenu);
}

.corps-article ul,
.corps-article ol { margin: 0 0 1.35em; padding-left: 0; list-style: none; }
.corps-article ul li {
  position: relative;
  padding-left: 34px;
  margin-bottom: .6em;
}
/* Puce du projet: un demi cercle vert d eau, comme sur les formules. */
.corps-article ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 24px;
  height: 12px;
  border: 1px solid var(--eau);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
}
.corps-article ol { counter-reset: rang-carnet; }
.corps-article ol li {
  position: relative;
  padding-left: 44px;
  margin-bottom: .6em;
  counter-increment: rang-carnet;
}
.corps-article ol li::before {
  content: counter(rang-carnet, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .1em;
  width: 30px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bordeaux);
  background: var(--coquille-soutenu);
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .06em;
  color: var(--bordeaux);
  font-variant-numeric: tabular-nums;
}
.corps-article li ul,
.corps-article li ol { margin: .5em 0 0; }

/* Tableau recapitulatif, trame de la fiche technique. */
.corps-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 1.8em;
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
  background: var(--carton);
}
.corps-article thead th {
  background: var(--coquille-soutenu);
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bordeaux);
}
.corps-article th,
.corps-article td {
  text-align: left;
  vertical-align: top;
  padding: 11px 14px;
  border: 1px solid var(--filet);
  line-height: 1.6;
}
.corps-article tbody th {
  font-family: var(--courant);
  font-weight: 600;
  color: var(--encre);
  background: var(--coquille);
}
.corps-article tbody tr:hover td { background: var(--coquille); }

/* Encadre: la forme signature complete, double filet et encoche. */
.corps-article aside {
  position: relative;
  background: var(--carton);
  border: 1px solid var(--filet);
  padding: 28px 24px 22px;
  margin: 0 0 1.8em;
}
.corps-article aside::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--bordeaux);
  pointer-events: none;
}
.corps-article aside::after {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 14px;
  height: 14px;
  border: 1px solid var(--bordeaux);
  background: var(--coquille-soutenu);
  pointer-events: none;
}
.corps-article aside > * { position: relative; z-index: 1; }
.corps-article aside > :last-child { margin-bottom: 0; }
.corps-article aside p { font-size: 1rem; }

/* Citation: filet vert d eau et retrait, sans guillemets decoratifs. */
.corps-article blockquote {
  margin: 0 0 1.8em;
  padding: 4px 0 4px 26px;
  border-left: 3px solid var(--eau);
  font-size: 1.1875rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--encre-douce);
}
.corps-article blockquote p:last-child { margin-bottom: 0; }

.corps-article figure {
  margin: 0 0 1.8em;
  padding: 8px;
  background: var(--coquille);
  border: 1px solid var(--filet);
}
.corps-article figcaption {
  margin-top: 8px;
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bordeaux);
}

/* --------------------------------------------- appel a l action final --- */

.appel-carnet {
  position: relative;
  background: var(--coquille-soutenu);
  border: 1px solid var(--filet);
  padding: 40px 26px 30px;
  margin: 40px 0 34px;
  max-width: 68ch;
}
.appel-carnet::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--bordeaux);
  pointer-events: none;
}
.appel-carnet > * { position: relative; z-index: 1; }
.appel-carnet p { font-size: 1rem; }
.appel-carnet p:last-of-type { margin-bottom: 20px; }
.appel-carnet .bouton { margin-bottom: 0; }

/* --------------------------------------------------- encart de l auteur - */

.encart-auteur {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  background: var(--carton);
  border: 1px solid var(--filet);
  padding: 40px 26px 26px;
  margin: 0 0 40px;
  max-width: 68ch;
}
.encart-auteur::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--bordeaux);
  pointer-events: none;
}
.encart-auteur::after {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 14px;
  height: 14px;
  border: 1px solid var(--bordeaux);
  background: var(--coquille-soutenu);
  pointer-events: none;
}
.encart-auteur > * { position: relative; z-index: 1; }
.encart-auteur img {
  width: 96px;
  height: 96px;
  border: 1px solid var(--filet);
  padding: 4px;
  background: var(--coquille);
}
.encart-auteur .nom-auteur {
  display: block;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -.02em;
  color: var(--encre);
  margin: 0 0 8px;
}
.encart-auteur p { font-size: .9375rem; color: var(--encre-douce); margin-bottom: .8em; }
.encart-auteur p:last-child { margin-bottom: 0; }

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

.lire-aussi {
  border-top: 1px solid var(--bordeaux);
  padding-top: 30px;
}
.lire-aussi .intitule-renvois {
  display: block;
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bordeaux);
  margin-bottom: 20px;
}
.trois-renvois {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
  align-items: stretch;
}
.carte-liee {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--carton);
  border: 1px solid var(--filet);
  padding: 8px 8px 20px;
  transition: background-color .18s linear;
}
.carte-liee::before {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 5px;
  top: 5px;
  border: 1px solid var(--bordeaux);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s linear;
}
.carte-liee:hover { background: var(--coquille-soutenu); }
.carte-liee:hover::before { opacity: 1; }
.carte-liee:focus-within::before { opacity: 1; }
.carte-liee > * { position: relative; z-index: 1; }
.carte-liee img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--filet);
  margin-bottom: 14px;
}
.carte-liee .titre-liee {
  position: static;
  display: block;
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.24;
  letter-spacing: -.02em;
  margin: 0 8px 8px;
  color: var(--encre);
  text-wrap: balance;
}
.carte-liee .titre-liee a { color: inherit; text-decoration: none; }
.carte-liee .titre-liee a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
.carte-liee .titre-liee a:hover { color: var(--bordeaux); }
.carte-liee .accroche {
  margin: 0 8px;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--encre-douce);
  max-width: none;
}

/* ---------------------------- derniers articles sur la page d accueil --- */

.derniers-articles .rang-sommaire {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  border-bottom: 1px solid var(--bordeaux);
  padding-bottom: 12px;
  margin-bottom: 28px;
}
.derniers-articles .rang-sommaire .etiquette { flex: none; }
.derniers-articles .suite-carnet {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}
.derniers-articles .suite-carnet p {
  margin: 0;
  font-size: .9375rem;
  color: var(--encre-douce);
  max-width: 52ch;
}

/* ------------------------- liste datee des articles sur la page auteur -- */

.liste-carnet { list-style: none; padding: 0; margin: 18px 0 26px; }
.liste-carnet li {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 6px 22px;
  align-items: baseline;
  border-bottom: 1px solid var(--filet);
  padding: 14px 4px;
  margin: 0;
}
.liste-carnet li:first-child { border-top: 1px solid var(--bordeaux); }
.liste-carnet li:last-child { border-bottom: 1px solid var(--bordeaux); }
.liste-carnet .repere {
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bordeaux);
  font-variant-numeric: tabular-nums;
}
.liste-carnet a { color: var(--encre); text-decoration: none; font-weight: 600; }
.liste-carnet a:hover { color: var(--eau-sombre); text-decoration: underline; }
.liste-carnet .angle-liste {
  display: block;
  font-size: .875rem;
  color: var(--encre-douce);
  font-weight: 400;
}

/* Intitules de colonnes du pied de page dans le magazine.
   Une page d article ne porte aucun h2 hors du corps redactionnel: les intitules
   de colonnes reprennent donc l apparence de .colonnes-pied h2 sur un paragraphe,
   sans rien changer au pied de page des autres pages du site. */
.colonnes-pied .rubrique-pied {
  font-family: var(--etiquette);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bordeaux);
  margin: 0 0 14px;
  max-width: none;
}

/* Les cases de reference restent posees sur le filet exterieur de leur bloc,
   meme quand la regle de pile du bloc passe ses enfants en position relative. */
.fiche-carnet > .case-ref,
.carte-liee > .case-ref,
.encart-auteur > .case-ref,
.appel-carnet > .case-ref,
.corps-article aside > .case-ref {
  position: absolute;
  top: 5px;
  left: 5px;
}

/* ------------------------------------------------ mobiles du magazine --- */

@media (max-width: 960px) {
  .grille-carnet,
  .grille-carnet--large,
  .trois-renvois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fiche-carnet--tete { grid-column: span 2; }
  .entete-article h1 { max-width: none; }
}

@media (max-width: 700px) {
  .grille-carnet,
  .grille-carnet--large,
  .trois-renvois { grid-template-columns: minmax(0, 1fr); }
  .fiche-carnet--tete { grid-column: auto; }
  .fiche-carnet--tete .titre-fiche,
  .fiche-carnet--tete h3 { font-size: 1.3rem; }
  .fiche-carnet--tete .cliche img { aspect-ratio: 3 / 2; }
  .sommaire-carnet { padding: 46px 0 62px; }
  .corps-article h2 { font-size: 1.55rem; margin-top: 42px; }
  .encart-auteur { grid-template-columns: minmax(0, 1fr); }
  .liste-carnet li { grid-template-columns: minmax(0, 1fr); }
  .exergue { padding-left: 18px; }
  .compteur--carnet { font-size: 2rem; }
}

@media print {
  .lire-aussi, .appel-carnet, .derniers-articles { display: none; }
  .corps-article { 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}

/* En tete: aucun libelle ne se coupe en deux lignes. La gouttiere et la taille
   du texte cedent avant le mot, jamais l inverse. */
header a, header button { white-space: nowrap; }
header nav[class] { column-gap: clamp(10px, 1.3vw, 26px); }
/* Entre le menu de bureau et le menu replie du telephone, la barre est a l etroit:
   la gouttiere et le corps du texte cedent d un cran plutot que de deborder. */
@media (max-width: 1220px) {
  header nav[class] { column-gap: clamp(8px, 1vw, 16px); }
  header nav[class] a, header nav[class] button { font-size: 0.93em; letter-spacing: 0; }
  /* Le bouton de l en tete se resserre lui aussi: c est la piece la plus large
     de la barre, et c est elle qui sortait de la fenetre. */
  header a[class*="bouton"], header a[class*="cta"] { padding-left: 14px; padding-right: 14px; }
}

/*xn:start*/
/* Pages ressources: portail, guide pilier, comparatifs, outils, aimant.
   Un seul bloc, prefixe xn-, ajoute a la feuille du site. Il ne redefinit
   aucune classe existante et emprunte au site ses couleurs et ses polices. */
:root{
  --xn-bg:#F5EFE3;--xn-soft:#EDE4D4;--xn-surface:#FBF7EF;--xn-text:#2E1015;
  --xn-muted:#6B4A50;--xn-accent:#6E2233;--xn-on-accent:#F7F2E7;--xn-line:#D8C9B4;
  --xn-h:"Orbitron", "Trebuchet MS", "DejaVu Sans", sans-serif;--xn-b:"Overpass", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
.xn-main{background:var(--xn-bg);color:var(--xn-text);font-family:var(--xn-b);line-height:1.65}
.xn-main *,.xn-main *::before,.xn-main *::after{box-sizing:border-box}
.xn-wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 clamp(18px,4vw,32px)}
.xn-wrap--narrow{max-width:800px}
.xn-band{padding:clamp(34px,5.2vw,68px) 0}
.xn-band--soft{background:var(--xn-soft)}
.xn-band--surface{background:var(--xn-surface)}
.xn-main h1,.xn-main h2,.xn-main h3,.xn-main h4{font-family:var(--xn-h);color:var(--xn-text);line-height:1.16;margin:0 0 .55em;text-wrap:balance}
.xn-main h1{font-size:clamp(1.95rem,4.4vw,3.05rem);letter-spacing:-.01em}
.xn-main h2{font-size:clamp(1.4rem,2.7vw,2.05rem);margin-top:1.6em}
.xn-main h3{font-size:clamp(1.08rem,1.7vw,1.3rem);margin-top:1.4em}
.xn-main p{margin:0 0 1.05em;color:var(--xn-text)}
.xn-main a{color:var(--xn-accent);text-underline-offset:3px}
.xn-main a:hover{text-decoration:none}
.xn-crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.83rem;color:var(--xn-muted);padding:22px 0 0;margin:0}
.xn-crumb a{color:var(--xn-muted)}
.xn-crumb span[aria-hidden]{opacity:.5}
.xn-eyebrow{display:inline-block;font-family:var(--xn-h);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--xn-accent);margin:0 0 .7em}
.xn-lead{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--xn-muted);max-width:64ch}
.xn-hd{padding:clamp(26px,4vw,52px) 0 clamp(18px,3vw,32px)}
.xn-meta{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:.83rem;color:var(--xn-muted);margin:.4em 0 0;padding:0;list-style:none}
.xn-prose>*:first-child{margin-top:0}
.xn-prose ul,.xn-prose ol{margin:0 0 1.2em;padding-left:1.25em}
.xn-prose li{margin:0 0 .5em}
.xn-note{border-left:3px solid var(--xn-accent);background:var(--xn-surface);padding:14px 18px;margin:0 0 1.3em;font-size:.95rem;color:var(--xn-muted)}
.xn-card{background:var(--xn-surface);border:1px solid var(--xn-line);border-radius:4px;padding:clamp(18px,2.4vw,26px)}
.xn-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));margin:0;padding:0;list-style:none}
.xn-grid h3{margin-top:0}
.xn-grid p{font-size:.94rem;color:var(--xn-muted);margin-bottom:.8em}
.xn-tag{display:inline-block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-family:var(--xn-h);color:var(--xn-muted);margin:0 0 .6em}
.xn-btn,.xn-main a.xn-btn{display:inline-block;font-family:var(--xn-h);font-size:.95rem;letter-spacing:.02em;padding:13px 24px;border-radius:3px;border:1px solid var(--xn-accent);background:var(--xn-accent);color:var(--xn-on-accent);text-decoration:none;cursor:pointer;text-align:center}
.xn-btn:hover,.xn-main a.xn-btn:hover{filter:brightness(1.09);text-decoration:none}
.xn-btn--ghost,.xn-main a.xn-btn--ghost{background:transparent;color:var(--xn-accent)}
.xn-actions{display:flex;flex-wrap:wrap;gap:12px;margin:1.4em 0 0}
.xn-tablewrap{overflow-x:auto;border:1px solid var(--xn-line);border-radius:4px;background:var(--xn-surface)}
.xn-table{width:100%;border-collapse:collapse;min-width:640px;font-size:.94rem}
.xn-table th,.xn-table td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--xn-line);vertical-align:top}
.xn-table thead th{font-family:var(--xn-h);font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;background:var(--xn-soft);color:var(--xn-text)}
.xn-table tbody th{font-weight:600;color:var(--xn-text);width:26%}
.xn-table td:first-of-type{color:var(--xn-text)}
.xn-table .xn-yes{color:var(--xn-accent);font-weight:600}
.xn-faq dt{font-family:var(--xn-h);font-size:1.06rem;margin:1.4em 0 .4em;color:var(--xn-text)}
.xn-faq dd{margin:0;color:var(--xn-muted)}
.xn-toc{background:var(--xn-surface);border:1px solid var(--xn-line);border-radius:4px;padding:20px 24px;margin:0 0 2em}
.xn-toc p{font-family:var(--xn-h);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--xn-muted);margin:0 0 .7em}
.xn-toc ol{margin:0;padding-left:1.2em;columns:2;column-gap:32px}
.xn-toc li{margin:0 0 .42em;font-size:.94rem;break-inside:avoid}
@media(max-width:640px){.xn-toc ol{columns:1}}
.xn-check{list-style:none;margin:0;padding:0}
.xn-check li{position:relative;padding:0 0 .62em 30px;color:var(--xn-text)}
.xn-check li::before{content:"";position:absolute;left:2px;top:.42em;width:13px;height:8px;border-left:2.5px solid var(--xn-accent);border-bottom:2.5px solid var(--xn-accent);transform:rotate(-45deg)}
.xn-form{display:grid;gap:14px;max-width:520px}
.xn-form label{font-family:var(--xn-h);font-size:.86rem;letter-spacing:.03em;display:block;margin:0 0 5px;color:var(--xn-text)}
.xn-form input[type=text],.xn-form input[type=email],.xn-form input[type=number]{width:100%;padding:11px 13px;border:1px solid var(--xn-line);border-radius:3px;background:var(--xn-surface);color:var(--xn-text);font:inherit;font-size:1rem}
.xn-form input:focus-visible,.xn-btn:focus-visible,.xn-main a:focus-visible{outline:3px solid var(--xn-accent);outline-offset:2px}
.xn-consent{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--xn-muted)}
.xn-consent input{margin-top:.25em;flex:0 0 auto}
.xn-tool{display:grid;gap:26px;grid-template-columns:minmax(280px,1fr) minmax(260px,.85fr);align-items:start}
@media(max-width:820px){.xn-tool{grid-template-columns:1fr}}
.xn-out{background:var(--xn-surface);border:1px solid var(--xn-line);border-radius:4px;padding:22px 24px;position:sticky;top:16px}
@media(min-width:821px){.xn-sticky{position:sticky;top:16px}}
.xn-out__row{padding:0 0 16px;margin:0 0 16px;border-bottom:1px solid var(--xn-line)}
.xn-out__row:last-child{border:0;margin:0;padding:0}
.xn-out__lab{font-family:var(--xn-h);font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;color:var(--xn-muted);margin:0 0 .3em}
.xn-out__val{font-family:var(--xn-h);font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.05;color:var(--xn-accent);margin:0}
.xn-out__row--first .xn-out__val{font-size:clamp(2rem,4.6vw,2.9rem)}
.xn-out__note{font-size:.86rem;color:var(--xn-muted);margin:.35em 0 0}
.xn-field__help{font-size:.83rem;color:var(--xn-muted);margin:5px 0 0}
.xn-hint{font-size:.85rem;color:var(--xn-muted);margin:1.2em 0 0}
.xn-cta{background:var(--xn-accent);color:var(--xn-on-accent);border-radius:4px;padding:clamp(24px,3.4vw,40px)}
.xn-cta h2,.xn-cta p{color:var(--xn-on-accent)}
.xn-cta h2{margin-top:0}
.xn-cta a{color:var(--xn-on-accent)}
.xn-cta .xn-btn,.xn-main .xn-cta a.xn-btn{background:var(--xn-on-accent);color:var(--xn-accent);border-color:var(--xn-on-accent)}
.xn-cta .xn-btn--ghost,.xn-main .xn-cta a.xn-btn--ghost{background:transparent;color:var(--xn-on-accent)}
.xn-links{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.xn-links a{font-family:var(--xn-h);font-size:1rem}
.xn-links span{display:block;font-family:var(--xn-b);font-size:.89rem;color:var(--xn-muted)}

/* Appel vers l article pilier, insere dans les neuf articles du magazine */
.xn-pillar{border:1px solid var(--xn-line);border-left:4px solid var(--xn-accent);background:var(--xn-surface);
  border-radius:3px;padding:16px 20px;margin:1.8em 0;font-family:var(--xn-b);line-height:1.55}
.xn-pillar__k{font-family:var(--xn-h);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--xn-accent);margin:0 0 .35em}
.xn-pillar__t{font-family:var(--xn-h);font-size:1.1rem;margin:0 0 .3em;line-height:1.25}
.xn-pillar__t a{color:var(--xn-text)}
.xn-pillar__d{font-size:.9rem;color:var(--xn-muted);margin:0}

/* Le lien de menu ajoute. La barre qui l accueille etait calibree au pixel:
   on l autorise a passer a la ligne plutot qu a casser un libelle en trois. */
.xn-navlink{white-space:nowrap}
nav:has(> .xn-navlink){flex-wrap:wrap}
nav:has(> .xn-navlink) > a{white-space:nowrap}
@media(min-width:1024px){nav:has(> .xn-navlink){font-size:.93em;column-gap:clamp(.7rem,1.45vw,1.5rem);row-gap:.3rem}}

/* Bloc de liens ajoute au pied de page de chaque page du site */
.xn-foot{border-top:1px solid currentColor;margin:26px 0 0;padding:20px 0 2px;font-size:.9rem}
.xn-foot__t{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;margin:0 0 10px;opacity:.72}
.xn-foot__l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px 22px}
.xn-foot__l a{color:inherit;text-decoration:underline;text-underline-offset:3px;opacity:.92}
.xn-foot__l a:hover{opacity:1}
@media(prefers-reduced-motion:reduce){.xn-main *{animation:none!important;transition:none!important}}
/*xn:end*/