/* ==========================================================================
   Esthevia, feuille de style unique.
   Systeme de nommage: prefixe crn, pour carnet de tournee.
   Grille: reglures horizontales continues au pas de 32 pixels.
   Motif: moire par superposition de deux trames tres fines.
   Animation: entree laterale alternee, gauche puis droite.
   Mode clair integral, aucune variante sombre.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables de marque
   -------------------------------------------------------------------------- */

:root {
  --fond: #FBF6EC;
  --fond-alt: #F4ECDD;
  --surface: #FFFCF5;
  --texte: #16232F;
  --texte-doux: #4E5F70;
  --accent: #1A485C;
  --accent-sombre: #123647;
  --accent-texte: #FFFDF7;
  --corail: #E4735A;
  --bordure: #C9D6DE;

  --pas: 32px;
  --marge-carnet: 34px;
  --colonne: 68ch;
  --large: 1180px;
  --entete-h: 72px;

  --titre: "Kanit", "Trebuchet MS", "Segoe UI", sans-serif;
  --courant: "Mulish", "Helvetica Neue", Arial, sans-serif;
  --encre: "Trocchi", Georgia, "Times New Roman", serif;

  --reglure: rgba(201, 214, 222, 0.72);
  --trame-a: rgba(26, 72, 92, 0.15);
  --trame-b: rgba(26, 72, 92, 0.13);
  --courbe: cubic-bezier(0.22, 0.68, 0.28, 1);
}

/* --------------------------------------------------------------------------
   2. Base et rythme de carnet
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--texte);
  background-color: var(--fond);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--reglure) 0,
    var(--reglure) 1px,
    transparent 1px,
    transparent var(--pas)
  );
  background-position: 0 0;
  font-family: var(--courant);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
}

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

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

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-align: left;
  margin: 0 0 var(--pas);
  text-wrap: balance;
}

h1 { font-size: 3.1rem; }
h2 { font-size: 2.05rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.0625rem; }

p, li { max-width: var(--colonne); }
p { margin: 0 0 1.2rem; }

strong { font-weight: 700; }

.crn-doux { color: var(--texte-doux); font-size: 0.9375rem; }
.crn-note { font-size: 0.875rem; font-weight: 500; color: var(--texte-doux); }

.crn-chiffre { font-family: var(--encre); font-weight: 400; font-variant-numeric: tabular-nums; }

/* Surtitre en petites capitales, precede du double filet de la marque. */
.crn-surtitre {
  display: block;
  font-family: var(--encre);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
  padding-top: 14px;
  position: relative;
}

.crn-surtitre::before {
  content: "";
  position: absolute;
  top: 0;
  left: -12px;
  width: 96px;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 6px 0 -1px var(--bordure);
}

/* --------------------------------------------------------------------------
   3. Forme signature: le double filet debordant
   -------------------------------------------------------------------------- */

.crn-regle { position: relative; }

.crn-regle::before {
  content: "";
  position: absolute;
  top: 0;
  left: -12px;
  right: 0;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 6px 0 -1px var(--bordure);
}

.crn-regle-pied { position: relative; }

.crn-regle-pied::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -12px;
  right: 0;
  height: 2px;
  background: var(--bordure);
  box-shadow: 0 6px 0 -1px rgba(201, 214, 222, 0.6);
}

/* --------------------------------------------------------------------------
   4. Motif signature: la moire
   -------------------------------------------------------------------------- */

.crn-moire {
  background-image:
    repeating-linear-gradient(92deg, var(--trame-a) 0, var(--trame-a) 1px, transparent 1px, transparent 6px),
    repeating-linear-gradient(88deg, var(--trame-b) 0, var(--trame-b) 1px, transparent 1px, transparent 6.6px);
}

.crn-moire-voile {
  position: relative;
  isolation: isolate;
}

.crn-moire-voile > * { position: relative; z-index: 2; }

.crn-moire-voile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(251, 246, 236, 0.88);
  z-index: 1;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. Conteneurs et bandes de section
   -------------------------------------------------------------------------- */

.crn-intercalaire {
  width: min(100% - 40px, var(--large));
  margin-inline: auto;
}

.crn-bande {
  padding-block: calc(var(--pas) * 3);
  scroll-margin-top: calc(var(--entete-h) + var(--pas));
  position: relative;
}

.crn-bande--dense { background: rgba(232, 219, 196, 0.6); }

.crn-bande--accent {
  background-color: var(--accent);
  color: var(--accent-texte);
  padding-block: calc(var(--pas) * 2);
}

.crn-bande--accent h2,
.crn-bande--accent h3 { color: var(--accent-texte); }

.crn-bande--accent .crn-surtitre { color: #CFE3EC; }
.crn-bande--accent .crn-surtitre::before { background: var(--corail); box-shadow: 0 6px 0 -1px rgba(255, 253, 247, 0.45); }

.crn-entete-section {
  max-width: 46rem;
  margin-bottom: calc(var(--pas) * 1.5);
}

.crn-entete-section p { color: var(--texte-doux); margin-bottom: 0; }

/* --------------------------------------------------------------------------
   6. Boutons
   -------------------------------------------------------------------------- */

.crn-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 30px;
  border-radius: 4px;
  font-family: var(--courant);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: transform 200ms var(--courbe), background-color 200ms var(--courbe), border-color 200ms var(--courbe);
}

.crn-bouton::after {
  content: "";
  position: absolute;
  left: 4px;
  right: -4px;
  bottom: -6px;
  height: 3px;
  background: var(--corail);
  transition: left 200ms var(--courbe), right 200ms var(--courbe);
}

.crn-bouton:hover { transform: translateX(3px); }
.crn-bouton:hover::after { left: 0; right: 0; }

.crn-bouton--plein {
  background: var(--accent);
  color: var(--accent-texte);
  border: 1.5px solid var(--accent);
}

.crn-bouton--plein:hover { background: var(--accent-sombre); color: var(--accent-texte); }

.crn-bouton--contour {
  background: var(--fond);
  color: var(--texte);
  border: 1.5px solid var(--accent);
}

.crn-bouton--contour:hover { background: var(--fond-alt); border-width: 2px; color: var(--texte); }

.crn-bouton--clair {
  background: var(--accent-texte);
  color: var(--accent);
  border: 1.5px solid var(--accent-texte);
}

.crn-bouton--clair:hover { background: #FFFFFF; color: var(--accent-sombre); }

.crn-duo-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 22px;
  margin-block: calc(var(--pas) * 1.25);
}

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

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

/* Texte reserve aux technologies d assistance. */
.crn-hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

/* --------------------------------------------------------------------------
   7. En tete fixe
   -------------------------------------------------------------------------- */

.crn-entete {
  position: sticky;
  top: 0;
  z-index: 90;
  height: var(--entete-h);
  background: rgba(251, 246, 236, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--bordure);
  transition: box-shadow 220ms var(--courbe), border-color 220ms var(--courbe);
}

.crn-entete.est-posee {
  border-bottom-color: var(--accent);
  box-shadow: 0 6px 0 -3px rgba(26, 72, 92, 0.18);
}

.crn-entete__interieur {
  height: var(--entete-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

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

.crn-marque:hover { color: var(--accent); }
.crn-marque svg { display: block; }

.crn-nav { display: flex; align-items: center; gap: 26px; }

.crn-nav__lien {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--texte);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}

.crn-nav__lien:hover,
.crn-nav__lien.est-active { border-bottom-color: var(--corail); color: var(--accent); }

.crn-entete .crn-bouton { min-height: 44px; padding: 10px 20px; font-size: 0.9375rem; }

.crn-bouton-menu {
  display: none;
  width: 46px;
  height: 44px;
  padding: 0;
  background: var(--surface);
  border: 1.5px solid var(--accent);
  border-radius: 4px;
  cursor: pointer;
}

.crn-bouton-menu span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 4px auto;
  background: var(--accent);
  transition: transform 200ms var(--courbe), opacity 200ms var(--courbe);
}

.crn-bouton-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.crn-bouton-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.crn-bouton-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.crn-panneau {
  position: fixed;
  inset: var(--entete-h) 0 0 0;
  background: var(--fond);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--reglure) 0,
    var(--reglure) 1px,
    transparent 1px,
    transparent var(--pas)
  );
  padding: calc(var(--pas) * 1.5) 24px;
  overflow-y: auto;
  z-index: 95;
}

.crn-panneau[hidden] { display: none; }

.crn-panneau a {
  display: block;
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--texte);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid var(--bordure);
}

.crn-panneau a:hover { color: var(--accent); }
.crn-panneau .crn-bouton { margin-top: var(--pas); width: 100%; border-bottom: 1.5px solid var(--accent); }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.crn-hero {
  padding-block: calc(var(--pas) * 2.5) calc(var(--pas) * 3);
  position: relative;
  overflow: hidden;
}

.crn-hero__trame {
  position: absolute;
  top: 0;
  right: 0;
  width: 46%;
  height: calc(var(--pas) * 12);
  opacity: 0.85;
  pointer-events: none;
  mask-image: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.crn-hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: calc(var(--pas) * 1.5);
  align-items: start;
  position: relative;
  z-index: 2;
}

.crn-hero__texte {
  padding-left: var(--marge-carnet);
  border-left: 2px solid var(--corail);
}

.crn-hero__texte h1 { margin-bottom: 20px; }

.crn-hero__chapo {
  font-size: 1.1875rem;
  color: var(--texte-doux);
  max-width: 34rem;
}

.crn-jauge {
  margin-top: var(--pas);
  padding: 20px 22px 18px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 3px;
}

.crn-jauge__valeur {
  font-family: var(--encre);
  font-size: 2.4rem;
  line-height: 1.1;
  color: var(--accent);
  display: block;
}

.crn-jauge p { margin: 6px 0 0; font-size: 0.9375rem; color: var(--texte-doux); }

/* Cadre photo: filet marine, respiration creme, pastille de moire en angle. */
.crn-cadre {
  position: relative;
  background: var(--surface);
  padding: 8px;
  border: 1px solid var(--accent);
  border-radius: 3px;
}

.crn-cadre img { border-radius: 2px; }

.crn-cadre__pastille {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 48px;
  height: 48px;
  border-radius: 3px;
  opacity: 0.1;
  pointer-events: none;
}

.crn-cadre__legende {
  margin: 10px 2px 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--texte-doux);
  max-width: none;
}

/* --------------------------------------------------------------------------
   9. Constats: trois lignes pleines du carnet
   -------------------------------------------------------------------------- */

.crn-constats { border-top: 2px solid var(--accent); margin-top: var(--pas); }

.crn-constat {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 12px 34px;
  align-items: start;
  padding-block: calc(var(--pas) * 0.9);
  border-bottom: 1px solid var(--bordure);
  position: relative;
}

.crn-constat::before {
  content: "";
  position: absolute;
  left: -12px;
  bottom: 6px;
  width: 12px;
  height: 1px;
  background: var(--bordure);
}

.crn-constat__chiffre {
  font-family: var(--encre);
  font-size: 2.4rem;
  line-height: 1.05;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.crn-constat__chiffre small {
  display: block;
  font-family: var(--courant);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-top: 6px;
}

.crn-constat h3 { margin-bottom: 8px; }
.crn-constat p { margin-bottom: 0; }

.crn-addition {
  margin-top: calc(var(--pas) * 1.25);
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--corail);
  border-radius: 3px;
}

.crn-addition p { margin-bottom: 0; max-width: 58ch; }

/* --------------------------------------------------------------------------
   10. Points de controle
   -------------------------------------------------------------------------- */

.crn-controles {
  border-top: 2px solid var(--accent);
  list-style: none;
  margin: 0;
  padding: 0;
}

.crn-etape {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 10px 28px;
  padding-block: calc(var(--pas) * 1.05);
  border-bottom: 1px solid var(--bordure);
}

.crn-etape__rang {
  font-family: var(--encre);
  font-size: 3rem;
  line-height: 1;
  color: var(--corail);
  font-variant-numeric: tabular-nums;
}

.crn-etape h3 { margin-bottom: 10px; }
.crn-etape p:last-child { margin-bottom: 0; }

.crn-etape__marque {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
  border-bottom: 2px solid var(--corail);
  padding-bottom: 2px;
}

/* --------------------------------------------------------------------------
   11. Fonctionnalites, la mallette
   -------------------------------------------------------------------------- */

.crn-mallette {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pas);
}

.crn-fiche {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 3px;
  padding: 26px 24px 24px;
  position: relative;
}

.crn-fiche::before {
  content: "";
  position: absolute;
  top: 0;
  left: -12px;
  right: 0;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 6px 0 -1px var(--bordure);
}

.crn-fiche h3 { margin: 14px 0 10px; }
.crn-fiche p { margin-bottom: 0; font-size: 1rem; }

.crn-fiche__onglet {
  font-family: var(--encre);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--corail);
}

.crn-mallette__aparte {
  grid-column: span 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: calc(var(--pas) * 1.25);
  align-items: center;
  padding-top: var(--pas);
  border-top: 1px solid var(--bordure);
}

.crn-mallette__aparte h3 { font-size: 1.55rem; }
.crn-mallette__aparte p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   12. Avantages
   -------------------------------------------------------------------------- */

.crn-gains {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--pas) * 1.25) calc(var(--pas) * 2);
}

.crn-gain {
  padding-top: 20px;
  border-top: 2px solid var(--accent);
  position: relative;
}

.crn-gain::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -12px;
  right: 0;
  height: 1px;
  background: var(--bordure);
}

.crn-gain__valeur {
  font-family: var(--encre);
  font-size: 2.6rem;
  line-height: 1.05;
  color: var(--accent);
  display: block;
  font-variant-numeric: tabular-nums;
}

.crn-gain h3 { margin: 6px 0 8px; }
.crn-gain p { margin-bottom: 0; }

.crn-gains__photo { margin-top: calc(var(--pas) * 1.5); }

.crn-duo-photo {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: calc(var(--pas) * 1.5);
  align-items: center;
}

/* --------------------------------------------------------------------------
   13. Preuve: voix de terrain et compteurs
   -------------------------------------------------------------------------- */

.crn-voix-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pas);
}

.crn-voix {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 3px;
  padding: 26px 24px 22px;
  margin: 0;
  position: relative;
}

.crn-voix::before {
  content: "";
  position: absolute;
  top: 0;
  left: -12px;
  right: 0;
  height: 2px;
  background: var(--corail);
  box-shadow: 0 6px 0 -1px var(--bordure);
}

.crn-voix blockquote {
  margin: 12px 0 18px;
  font-family: var(--encre);
  font-size: 1.0625rem;
  line-height: 1.62;
}

.crn-voix blockquote p { max-width: none; }
.crn-voix blockquote p:last-child { margin-bottom: 0; }

.crn-voix figcaption {
  padding-top: 14px;
  border-top: 1px solid var(--bordure);
  font-size: 0.9375rem;
  color: var(--texte-doux);
}

.crn-voix figcaption b { display: block; color: var(--texte); font-weight: 700; }

.crn-compteurs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pas);
  position: relative;
  z-index: 2;
}

.crn-compteur { padding-left: 18px; border-left: 2px solid rgba(255, 253, 247, 0.42); }

.crn-compteur__valeur {
  display: block;
  font-family: var(--encre);
  font-size: 2.5rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.crn-compteur p { margin: 6px 0 0; font-size: 0.9375rem; color: #DCEAF1; max-width: 26ch; }

.crn-bande--accent .crn-trame-fond {
  position: absolute;
  inset: 0;
  opacity: 0.55;
  z-index: 1;
  pointer-events: none;
  --trame-a: rgba(255, 253, 247, 0.22);
  --trame-b: rgba(255, 253, 247, 0.18);
}

/* --------------------------------------------------------------------------
   14. Tarifs
   -------------------------------------------------------------------------- */

.crn-formules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pas);
  align-items: stretch;
  border-top: 2px solid var(--accent);
  padding-top: var(--pas);
}

.crn-formule {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 3px;
  padding: 26px 24px 24px;
}

.crn-formule--retenue {
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 6px rgba(26, 72, 92, 0.06);
}

.crn-formule__etiquette {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 12px;
  padding: 4px 12px;
  background: var(--accent);
  color: var(--accent-texte);
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

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

.crn-formule__prix {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-block: 14px;
  border-bottom: 1px solid var(--bordure);
  margin-bottom: 16px;
}

.crn-formule__prix .crn-chiffre { font-size: 3.4rem; line-height: 1; color: var(--accent); }
.crn-formule__prix span:last-child { font-size: 0.9375rem; color: var(--texte-doux); max-width: 12ch; line-height: 1.35; }

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

.crn-formule__liste {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  flex-grow: 1;
}

.crn-formule__liste li {
  position: relative;
  padding: 10px 0 10px 26px;
  border-bottom: 1px solid rgba(201, 214, 222, 0.55);
  font-size: 0.9375rem;
  line-height: 1.55;
  max-width: none;
}

.crn-formule__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 14px;
  height: 2px;
  background: var(--corail);
}

.crn-formules__note { margin-top: calc(var(--pas) * 0.9); }

/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */

.crn-questions {
  max-width: 52rem;
  border-top: 2px solid var(--accent);
}

.crn-question {
  border-bottom: 1px solid var(--bordure);
  background: transparent;
}

.crn-question summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  cursor: pointer;
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.1875rem;
  line-height: 1.35;
  list-style: none;
}

.crn-question summary::-webkit-details-marker { display: none; }

.crn-question summary::after {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 6px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 220ms var(--courbe);
}

.crn-question[open] summary::after { transform: rotate(-135deg); }
.crn-question[open] summary { color: var(--accent); }
.crn-question__reponse { padding: 0 0 22px; }
.crn-question__reponse p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   16. Formulaire
   -------------------------------------------------------------------------- */

.crn-contact__grille {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: calc(var(--pas) * 1.75);
  align-items: start;
}

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

.crn-contact__reperes {
  list-style: none;
  margin: var(--pas) 0 0;
  padding: 0;
}

.crn-contact__reperes li {
  padding: 12px 0 12px 24px;
  border-top: 1px solid var(--bordure);
  position: relative;
  font-size: 0.9375rem;
}

.crn-contact__reperes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 12px;
  height: 2px;
  background: var(--corail);
}

.crn-formulaire {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 3px;
  padding: 28px 26px;
  position: relative;
}

.crn-formulaire::before {
  content: "";
  position: absolute;
  top: 0;
  left: -12px;
  right: 0;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 6px 0 -1px var(--bordure);
}

.crn-champ { margin-bottom: 18px; }

.crn-champ label {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 6px;
}

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

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

.crn-champ input:focus,
.crn-champ select:focus,
.crn-champ textarea:focus { border-color: var(--accent); background: var(--surface); }

.crn-champ--paire {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 0;
}

.crn-consentement {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 16px 0 20px;
  border-top: 1px solid var(--bordure);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.crn-consentement input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--accent); }

.crn-formulaire button { width: 100%; }

.crn-formulaire__suite {
  margin: calc(var(--pas) * 0.9) 0 0;
  font-size: 0.875rem;
  color: var(--texte-doux);
  max-width: none;
}

/* --------------------------------------------------------------------------
   17. Pages internes: colonne de lecture
   -------------------------------------------------------------------------- */

.crn-fil {
  font-size: 0.875rem;
  color: var(--texte-doux);
  padding-block: 18px;
}

.crn-fil a { color: var(--texte-doux); }

.crn-lecture { max-width: 46rem; }
.crn-lecture h2 { font-size: 1.7rem; margin-top: calc(var(--pas) * 1.5); }
.crn-lecture h3 { margin-top: var(--pas); }
.crn-lecture ul, .crn-lecture ol { padding-left: 20px; }
.crn-lecture li { margin-bottom: 8px; }

.crn-chapo {
  font-size: 1.1875rem;
  color: var(--texte-doux);
  max-width: 42rem;
}

.crn-encadre {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--accent);
  border-radius: 3px;
  padding: 22px 24px;
  margin-block: var(--pas);
}

.crn-encadre p:last-child { margin-bottom: 0; }
.crn-encadre h3 { margin-top: 0; }

.crn-defs { margin: 0; }
.crn-defs dt { font-weight: 700; margin-top: 16px; }
.crn-defs dd { margin: 4px 0 0; color: var(--texte-doux); max-width: var(--colonne); }

.crn-tableau {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--pas);
  font-size: 0.9375rem;
}

.crn-tableau th,
.crn-tableau td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--bordure);
  vertical-align: top;
}

.crn-tableau thead th { background: var(--fond-alt); font-family: var(--titre); font-weight: 600; }

.crn-defilant { overflow-x: auto; }

/* Page auteur */
.crn-portrait {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: calc(var(--pas) * 1.25);
  align-items: start;
  padding-top: var(--pas);
}

.crn-portrait img { border: 1px solid var(--accent); background: var(--surface); padding: 8px; border-radius: 3px; }

.crn-profils {
  list-style: none;
  margin: var(--pas) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.crn-profils a {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  background: var(--surface);
}

.crn-profils a:hover { background: var(--accent); color: var(--accent-texte); }

/* Plan du site */
.crn-sommaire { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--accent); }

.crn-sommaire li {
  padding: 18px 0;
  border-bottom: 1px solid var(--bordure);
  max-width: none;
}

.crn-sommaire a { font-family: var(--titre); font-weight: 600; font-size: 1.15rem; text-decoration: none; }
.crn-sommaire a:hover { text-decoration: underline; }
.crn-sommaire p { margin: 6px 0 0; color: var(--texte-doux); font-size: 0.9375rem; }

/* Pages courtes: merci et 404 */
.crn-message {
  min-height: 52vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: calc(var(--pas) * 3);
}

.crn-message h1 { max-width: 22ch; }

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

.crn-pied {
  background: var(--fond-alt);
  border-top: 2px solid var(--accent);
  padding-top: calc(var(--pas) * 2);
  margin-top: calc(var(--pas) * 2);
}

.crn-pied__grille {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.35fr;
  gap: calc(var(--pas) * 1.25);
  padding-bottom: calc(var(--pas) * 1.5);
}

.crn-pied h2 {
  font-size: 0.8125rem;
  font-family: var(--encre);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bordure);
}

.crn-pied ul { list-style: none; margin: 0; padding: 0; }
.crn-pied li { margin-bottom: 9px; font-size: 0.9375rem; max-width: none; }
.crn-pied a { color: var(--texte); text-decoration: none; }
.crn-pied a:hover { color: var(--accent); text-decoration: underline; }
.crn-pied p { font-size: 0.9375rem; color: var(--texte-doux); }

.crn-pied__position { max-width: 30ch; }

.crn-pied__reseaux {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 16px;
  font-size: 0.875rem;
  font-weight: 600;
}

.crn-pied__barre {
  border-top: 1px solid var(--bordure);
  padding-block: 20px;
  font-size: 0.875rem;
  color: var(--texte-doux);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: space-between;
}

.crn-pied__barre p { margin: 0; max-width: none; }

/* --------------------------------------------------------------------------
   19. Signature d animation: entree laterale alternee
   -------------------------------------------------------------------------- */

.crn-glisse {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 420ms var(--courbe), transform 420ms var(--courbe);
  will-change: opacity, transform;
}

.crn-glisse--droite { transform: translateX(28px); }

.crn-glisse.est-entree {
  opacity: 1;
  transform: translateX(0);
}

.crn-glisse[data-retard="1"] { transition-delay: 90ms; }
.crn-glisse[data-retard="2"] { transition-delay: 180ms; }

/* --------------------------------------------------------------------------
   20. Adaptations d ecran
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .crn-mallette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crn-mallette__aparte { grid-column: span 2; }
  .crn-voix-grille { grid-template-columns: 1fr; }
  .crn-compteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crn-formules { grid-template-columns: 1fr; }
  .crn-contact__grille { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .crn-nav { display: none; }
  .crn-entete .crn-bouton { display: none; }
  .crn-bouton-menu { display: block; }
  .crn-hero__grille { grid-template-columns: 1fr; }
  .crn-duo-photo { grid-template-columns: 1fr; }
  .crn-mallette__aparte { grid-template-columns: 1fr; }
  .crn-portrait { grid-template-columns: 1fr; }
  .crn-portrait img { max-width: 260px; }
  .crn-pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  h1 { font-size: 2.3rem; }
  h2 { font-size: 1.75rem; }
  .crn-mallette { grid-template-columns: 1fr; }
  .crn-mallette__aparte { grid-column: span 1; }
  .crn-gains { grid-template-columns: 1fr; }
  .crn-constat { grid-template-columns: 1fr; gap: 8px; }
  .crn-etape { grid-template-columns: 1fr; gap: 4px; }
  .crn-etape__rang { font-size: 2.2rem; }
  .crn-champ--paire { grid-template-columns: 1fr; gap: 0; }
  .crn-champ--paire .crn-champ { margin-bottom: 18px; }
  .crn-hero__texte { padding-left: 18px; }
  .crn-pied__grille { grid-template-columns: 1fr; }
  .crn-compteurs { grid-template-columns: 1fr; }
  .crn-duo-boutons .crn-bouton { width: 100%; }
}

@media (max-width: 480px) {
  .crn-formule__prix .crn-chiffre { font-size: 2.8rem; }
  .crn-jauge__valeur { font-size: 2rem; }
}

@media print {
  .crn-entete, .crn-panneau, .crn-bouton, .crn-formulaire { display: none; }
  body { background: #FFFFFF; }
}

/* --------------------------------------------------------------------------
   21. Mouvement reduit
   -------------------------------------------------------------------------- */

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

  .crn-glisse {
    transform: none;
    transition: opacity 200ms linear;
  }

  .crn-glisse.est-entree { transform: none; }

  .crn-bouton,
  .crn-bouton::after,
  .crn-question summary::after,
  .crn-bouton-menu span {
    transition: none;
  }

  .crn-bouton:hover { transform: none; }
}
/* ==========================================================================
   22. Magazine, Carnet de tournee
   Ajout posterieur, aucune regle existante n est modifiee.
   Memes variables, meme double filet debordant, meme moire, meme entree
   laterale alternee que le reste du site. Le corps des articles est du HTML
   nu: les balises y sont mises en forme sans aucune classe.
   ========================================================================== */

/* --------------------------------------------------------------------------
   22.1 Entete du magazine et de ses pages
   -------------------------------------------------------------------------- */

.crn-mag-entete {
  padding-block: calc(var(--pas) * 1.5) var(--pas);
  border-bottom: 2px solid var(--accent);
  position: relative;
  overflow: hidden;
}

.crn-mag-entete__trame {
  position: absolute;
  top: 0;
  right: 0;
  width: 38%;
  height: calc(var(--pas) * 8);
  opacity: 0.8;
  pointer-events: none;
  mask-image: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.crn-mag-entete__texte {
  position: relative;
  z-index: 2;
  padding-left: var(--marge-carnet);
  border-left: 2px solid var(--corail);
  max-width: 48rem;
}

.crn-mag-entete h1 { margin-bottom: 18px; }

.crn-mag-entete__chapo {
  font-size: 1.1875rem;
  color: var(--texte-doux);
  max-width: 40rem;
  margin-bottom: 0;
}

/* Compteur d articles, pose sur la reglure sous le chapeau. */
.crn-mag-compte {
  display: block;
  margin-top: var(--pas);
  padding-top: 14px;
  font-family: var(--encre);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  position: relative;
}

.crn-mag-compte::before {
  content: "";
  position: absolute;
  top: 0;
  left: -12px;
  width: 96px;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 6px 0 -1px var(--bordure);
}

/* --------------------------------------------------------------------------
   22.2 Grille de cartes d article
   -------------------------------------------------------------------------- */

.crn-mag-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--pas) * 1.25) var(--pas);
  padding-top: var(--pas);
}

.crn-carte {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 3px;
  padding: 22px 22px 20px;
  position: relative;
  transition: border-color 220ms var(--courbe), box-shadow 220ms var(--courbe), transform 220ms var(--courbe);
}

/* Le double filet debordant coiffe chaque carte, comme une ligne de carnet
   qui continue au dela du bloc. */
.crn-carte::before {
  content: "";
  position: absolute;
  top: 0;
  left: -12px;
  right: 0;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 6px 0 -1px var(--bordure);
  transition: background-color 220ms var(--courbe);
}

.crn-carte:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 5px rgba(26, 72, 92, 0.05);
  transform: translateX(3px);
}

.crn-carte:hover::before { background: var(--corail); }
.crn-carte:focus-within { border-color: var(--accent); }

/* Cadre photo de la carte: memes huit pixels de respiration creme. */
.crn-carte__cadre {
  margin: 12px 0 16px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 3px;
  position: relative;
}

.crn-carte__cadre img {
  border-radius: 2px;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.crn-carte__pastille {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 40px;
  height: 40px;
  border-radius: 3px;
  opacity: 0.1;
  pointer-events: none;
}

.crn-carte__angle {
  font-family: var(--encre);
  font-size: 0.8125rem;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--corail);
  margin: 0;
  max-width: none;
}

.crn-carte__titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  max-width: none;
}

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

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

.crn-carte__extrait {
  font-size: 0.9375rem;
  color: var(--texte-doux);
  margin-bottom: 16px;
  max-width: none;
  flex-grow: 1;
}

/* Pied de carte: la date et le temps de lecture posent sur une reglure. */
.crn-carte__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--bordure);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--texte-doux);
  max-width: none;
}

.crn-carte__pied time { font-variant-numeric: tabular-nums; }

.crn-carte__duree,
.crn-art-meta__duree {
  position: relative;
  padding-left: 22px;
}

.crn-carte__duree::before,
.crn-art-meta__duree::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 2px;
  background: var(--corail);
}

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

.crn-art-entete {
  padding-block: var(--pas) calc(var(--pas) * 0.75);
}

.crn-art-entete__texte {
  max-width: 52rem;
  padding-left: var(--marge-carnet);
  border-left: 2px solid var(--corail);
}

.crn-art-entete h1 {
  font-size: 2.55rem;
  margin-bottom: 20px;
  max-width: 24ch;
}

.crn-art-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 22px;
  margin: 0 0 20px;
  padding-top: 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--texte-doux);
  max-width: none;
  position: relative;
}

.crn-art-meta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -12px;
  right: 0;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 6px 0 -1px var(--bordure);
}

.crn-art-meta__angle {
  font-family: var(--encre);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--corail);
}

.crn-art-meta time { font-variant-numeric: tabular-nums; }

/* Chapeau en exergue: la seule serif de la page, sur fond de surface. */
.crn-art-chapo {
  font-family: var(--encre);
  font-size: 1.1875rem;
  line-height: 1.62;
  color: var(--texte);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--accent);
  border-radius: 3px;
  padding: 20px 24px;
  margin: 0 0 var(--pas);
  max-width: 44rem;
}

/* Image a la une, calee entre deux reglures. */
.crn-art-photo {
  margin: 0 0 var(--pas);
  max-width: 60rem;
}

.crn-art-photo img { width: 100%; }

.crn-art-photo figcaption {
  margin: 10px 2px 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--texte-doux);
  max-width: none;
}

/* --------------------------------------------------------------------------
   22.4 Corps redactionnel, balises nues
   Aucun attribut class n existe dans le corps: tout est mis en forme ici,
   en tant que descendant du conteneur.
   -------------------------------------------------------------------------- */

.crn-art-corps {
  max-width: var(--colonne);
  font-size: 1.0625rem;
  line-height: 1.7;
}

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

.crn-art-corps p { margin: 0 0 1.2rem; max-width: none; }

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

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

.crn-art-corps a:hover {
  color: var(--accent-sombre);
  text-decoration-color: var(--corail);
  text-decoration-thickness: 2px;
}

/* Intertitres: le h2 porte le double filet debordant de la marque. */
.crn-art-corps h2 {
  font-family: var(--titre);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--texte);
  margin: calc(var(--pas) * 1.5) 0 16px;
  padding-top: 16px;
  position: relative;
}

.crn-art-corps h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: -12px;
  right: 0;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 6px 0 -1px var(--bordure);
}

.crn-art-corps h3 {
  font-family: var(--titre);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--texte);
  margin: var(--pas) 0 12px;
  padding-left: 16px;
  border-left: 3px solid var(--corail);
}

/* Listes: la puce est un filet corail, dans le style des reglures. */
.crn-art-corps ul,
.crn-art-corps ol {
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
}

.crn-art-corps li {
  position: relative;
  padding: 8px 0 8px 30px;
  border-bottom: 1px solid rgba(201, 214, 222, 0.55);
  max-width: none;
  line-height: 1.6;
}

.crn-art-corps li:last-child { border-bottom: 0; }

.crn-art-corps ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 16px;
  height: 2px;
  background: var(--corail);
}

.crn-art-corps ol { counter-reset: reglure; }

.crn-art-corps ol > li { counter-increment: reglure; }

.crn-art-corps ol > li::before {
  content: counter(reglure);
  position: absolute;
  left: 0;
  top: 8px;
  font-family: var(--encre);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.crn-art-corps li > ul,
.crn-art-corps li > ol { margin: 8px 0 0; }

/* Tableau recapitulatif, chiffres tabulaires et reglures horizontales. */
.crn-art-corps table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--pas) 0;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  border-top: 2px solid var(--accent);
}

.crn-art-corps caption {
  caption-side: top;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--texte-doux);
  padding-bottom: 10px;
}

.crn-art-corps th,
.crn-art-corps td {
  text-align: left;
  vertical-align: top;
  padding: 11px 14px;
  border-bottom: 1px solid var(--bordure);
  max-width: none;
}

.crn-art-corps thead th {
  background: var(--fond-alt);
  font-family: var(--titre);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.35;
}

.crn-art-corps tbody th { font-weight: 700; }
.crn-art-corps tbody tr:nth-child(even) { background: rgba(255, 252, 245, 0.7); }

/* Encadre: meme traitement que les encadres des pages internes. */
.crn-art-corps aside {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--accent);
  border-radius: 3px;
  padding: 20px 24px;
  margin: var(--pas) 0;
}

.crn-art-corps aside > *:last-child { margin-bottom: 0; }
.crn-art-corps aside p { font-size: 1rem; }
.crn-art-corps aside li { border-bottom-color: rgba(201, 214, 222, 0.4); }

/* Citation: l encre du carnet, filet corail en marge. */
.crn-art-corps blockquote {
  margin: var(--pas) 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--corail);
  font-family: var(--encre);
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--texte);
}

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

.crn-art-corps figure {
  margin: var(--pas) 0;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 3px;
}

.crn-art-corps figcaption {
  margin: 10px 2px 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--texte-doux);
}

/* --------------------------------------------------------------------------
   22.5 Appel a l action de fin d article
   -------------------------------------------------------------------------- */

.crn-art-suite {
  max-width: var(--colonne);
  margin-top: calc(var(--pas) * 1.25);
  padding: 24px 26px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 3px;
  position: relative;
}

.crn-art-suite::before {
  content: "";
  position: absolute;
  top: 0;
  left: -12px;
  right: 0;
  height: 2px;
  background: var(--corail);
  box-shadow: 0 6px 0 -1px var(--bordure);
}

.crn-art-suite__titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.25;
  margin: 0 0 10px;
  max-width: none;
}

.crn-art-suite p { color: var(--texte-doux); }
.crn-art-suite .crn-bouton { margin-top: 6px; }

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

.crn-art-auteur {
  max-width: var(--colonne);
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px 22px;
  align-items: start;
  margin-top: calc(var(--pas) * 1.5);
  padding-top: 22px;
  border-top: 2px solid var(--accent);
  position: relative;
}

.crn-art-auteur::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -12px;
  right: 0;
  height: 1px;
  background: var(--bordure);
}

.crn-art-auteur img {
  border: 1px solid var(--accent);
  background: var(--surface);
  padding: 5px;
  border-radius: 3px;
}

.crn-art-auteur__nom {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.25;
  margin: 0 0 4px;
  max-width: none;
}

.crn-art-auteur__role {
  font-family: var(--encre);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--corail);
  margin: 0 0 10px;
  max-width: none;
}

.crn-art-auteur p { font-size: 0.9375rem; color: var(--texte-doux); }
.crn-art-auteur p:last-child { margin-bottom: 0; }

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

.crn-aussi { padding-block: calc(var(--pas) * 1.5) calc(var(--pas) * 2); }

.crn-aussi__titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  max-width: none;
}

.crn-aussi__intro {
  color: var(--texte-doux);
  margin-bottom: var(--pas);
  max-width: 44rem;
}

.crn-aussi__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pas);
  border-top: 2px solid var(--accent);
  padding-top: var(--pas);
}

.crn-aussi__carte {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 3px;
  padding: 18px 20px 20px;
  transition: border-color 220ms var(--courbe), transform 220ms var(--courbe);
}

.crn-aussi__carte:hover {
  border-color: var(--accent);
  transform: translateX(3px);
}

.crn-aussi__carte img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--bordure);
  border-radius: 2px;
  margin-bottom: 14px;
}

.crn-aussi__lien {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
  margin: 0 0 8px;
  max-width: none;
}

.crn-aussi__lien a { color: var(--texte); text-decoration: none; }
.crn-aussi__lien a:hover { color: var(--accent); text-decoration: underline; }

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

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

.crn-derniers__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: calc(var(--pas) * 1.25);
  padding-top: 18px;
  border-top: 1px solid var(--bordure);
}

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

/* --------------------------------------------------------------------------
   22.9 Liste des articles sur la page auteur et le plan du site
   -------------------------------------------------------------------------- */

.crn-mag-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--accent);
}

.crn-mag-liste li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 24px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--bordure);
  max-width: none;
}

.crn-mag-liste a {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
  text-decoration: none;
}

.crn-mag-liste a:hover { text-decoration: underline; }

.crn-mag-liste time {
  font-family: var(--encre);
  font-size: 0.875rem;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.crn-mag-liste p {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.9375rem;
  color: var(--texte-doux);
}

/* --------------------------------------------------------------------------
   22.10 Adaptations d ecran du magazine
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .crn-mag-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crn-aussi__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .crn-art-entete h1 { font-size: 2.1rem; }
}

@media (max-width: 700px) {
  .crn-mag-grille { grid-template-columns: 1fr; }
  .crn-aussi__grille { grid-template-columns: 1fr; }
  .crn-mag-entete__texte,
  .crn-art-entete__texte { padding-left: 18px; }
  .crn-art-entete h1 { font-size: 1.95rem; max-width: none; }
  .crn-art-corps h2 { font-size: 1.45rem; }
  .crn-art-auteur { grid-template-columns: 1fr; }
  .crn-mag-liste li { grid-template-columns: 1fr; }
  /* Un tableau large defile dans sa propre boite plutot que d elargir la page. */
  .crn-art-corps table { display: block; overflow-x: auto; }
}

@media print {
  .crn-carte:hover,
  .crn-aussi__carte:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   22.11 Intitules de colonne du pied de page, dans le magazine
   Les pages d article ne portent qu un seul niveau de titre hors du corps
   redactionnel: leurs colonnes de pied de page emploient donc un paragraphe,
   mis en forme exactement comme les intitules du reste du site.
   -------------------------------------------------------------------------- */

.crn-pied .crn-pied__rubrique {
  font-size: 0.8125rem;
  font-family: var(--encre);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bordure);
  max-width: none;
}

/* --------------------------------------------------------------------------
   22.12 Mouvement reduit dans le magazine
   Le glissement lateral des cartes disparait, la mise en evidence du survol
   reste entiere: bordure marine, filet corail et ombre basse.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .crn-carte,
  .crn-aussi__carte { transition: border-color 200ms linear; }

  .crn-carte:hover,
  .crn-aussi__carte:hover { transform: none; }

  .crn-carte::before { transition: 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:#FBF6EC;--xn-soft:#F4ECDD;--xn-surface:#FFFCF5;--xn-text:#16232F;
  --xn-muted:#4E5F70;--xn-accent:#1A485C;--xn-on-accent:#FFFDF7;--xn-line:#C9D6DE;
  --xn-h:"Kanit", "Trebuchet MS", "Segoe UI", sans-serif;--xn-b:"Mulish", "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*/