/* ==========================================================================
   leCarnet · site vitrine
   Jetons repris de 07_DESIGN_SYSTEM.md (DS-J-01, DS-J-04, DS-J-06, DS-J-12 à DS-J-21)
   ========================================================================== */

@import url("assets/polices/polices.css");

:root {
  /* Couleurs · mode clair (DS-J-01) */
  --papier: #F6F1E7;
  --papier-eleve: #FCF9F2;
  --papier-creux: #EFE8DA;
  --encre: #211D19;
  --encre-2: #5A5149;
  --encre-3: #6F6559;
  --encre-fantome: #8C8175;
  --sanguine: #9A3A1F;
  --sanguine-appuyee: #8A3419;
  --bouton-fond: var(--sanguine-appuyee);
  --bouton-fond-presse: var(--sanguine);
  --sur-bouton: #FCF9F2;
  --filet: #D8CEBC;
  --filet-fort: #CFC4B0;
  --erreur: #B03A2E;
  --surligne: #F6E2A8;

  /* Palette indexée · teintes (DS-J-06), employées en fond de scène derrière les écrans */
  --teinte-sanguine: #F1D8CD;
  --teinte-ardoise: #D6DFE6;
  --teinte-ocre: #F2E6BC;
  --teinte-prune: #E2D6E4;
  --teinte-cafe: #E9D9C2;
  --teinte-bleu: #CFE0EC;

  /* Ombres (DS-J-16) */
  --ombre-pose: 0 1px 3px rgba(33, 29, 25, .10);
  --ombre-souleve: 0 8px 24px rgba(33, 29, 25, .14);
  --lisere: 0;

  /* Texture papier (DS-J-21) */
  --grain-opacite: .03;
  --grain-fusion: multiply;

  /* Silhouette des téléphones */
  --cadre-telephone: #211D19;
  --cadre-telephone-bord: #4A4238;
  --ombre-telephone: 0 12px 28px rgba(33, 29, 25, .18);

  /* Typographie (DS-J-12) : Source Serif 4 auto-hébergée, police système pour les commandes */
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;

  /* Rayons (DS-J-15) */
  --r-chip: 4px;
  --r-champ: 8px;
  --r-bouton: 10px;
  --r-carte: 12px;
  --r-feuille: 16px;

  /* Espacement (DS-J-14) */
  --s-xxs: 2px; --s-xs: 4px; --s-s: 8px; --s-sm: 12px; --s-m: 16px; --s-ml: 20px;
  --s-l: 24px; --s-xl: 32px; --s-xxl: 40px; --s-xxxl: 56px; --s-huge: 72px;

  --largeur: 1200px;
  --gouttiere: 16px;

  color-scheme: light;
}

/* Couleurs · mode sombre (DS-J-04, DS-J-05, DS-J-17) — une lampe de bureau, pas une inversion.
   Le bloc est écrit deux fois : pour le réglage du système et pour le choix explicite du visiteur. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #15120E;
    --papier-eleve: #1F1B16;
    --papier-creux: #100E0B;
    --encre: #EFE7D8;
    --encre-2: #B5A895;
    --encre-3: #95897A;
    --encre-fantome: #8A7E70;
    --sanguine: #E08A63;
    --sanguine-appuyee: #D97A55;
    --bouton-fond: var(--sanguine);
    --bouton-fond-presse: var(--sanguine-appuyee);
    --sur-bouton: #15120E;
    --filet: #332D25;
    --filet-fort: #3C352B;
    --erreur: #E8705E;
    --surligne: #4A3F1C;
    --teinte-sanguine: #5A3327;
    --teinte-ardoise: #2C3F4C;
    --teinte-ocre: #544418;
    --teinte-prune: #43344F;
    --teinte-cafe: #4A3826;
    --teinte-bleu: #26445A;
    --ombre-pose: none;
    --ombre-souleve: none;
    --lisere: 1;
    --grain-opacite: .018;
    --grain-fusion: screen;
    --cadre-telephone: #2A241D;
    --cadre-telephone-bord: #5A5044;
    --ombre-telephone: 0 12px 32px rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papier: #15120E;
  --papier-eleve: #1F1B16;
  --papier-creux: #100E0B;
  --encre: #EFE7D8;
  --encre-2: #B5A895;
  --encre-3: #95897A;
  --encre-fantome: #8A7E70;
  --sanguine: #E08A63;
  --sanguine-appuyee: #D97A55;
  --bouton-fond: var(--sanguine);
  --bouton-fond-presse: var(--sanguine-appuyee);
  --sur-bouton: #15120E;
  --filet: #332D25;
  --filet-fort: #3C352B;
  --erreur: #E8705E;
  --surligne: #4A3F1C;
  --teinte-sanguine: #5A3327;
  --teinte-ardoise: #2C3F4C;
  --teinte-ocre: #544418;
  --teinte-prune: #43344F;
  --teinte-cafe: #4A3826;
  --teinte-bleu: #26445A;
  --ombre-pose: none;
  --ombre-souleve: none;
  --lisere: 1;
  --grain-opacite: .018;
  --grain-fusion: screen;
  --cadre-telephone: #2A241D;
  --cadre-telephone-bord: #5A5044;
  --ombre-telephone: 0 12px 32px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

/* Écrans et logotype : la variante suit l’apparence de la page */
.ecran-sombre { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ecran-clair { display: none; }
  :root:not([data-theme="light"]) .ecran-sombre { display: block; }
}
:root[data-theme="dark"] .ecran-clair { display: none; }
:root[data-theme="dark"] .ecran-sombre { display: block; }

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Grain : une tuile de 256 px, fusion multiply / screen, au-dessus du fond et sous le contenu (DS-J-21).
   Les scènes, cartes et images sont opaques : la texture ne passe jamais dessous (DS-J-23). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("assets/grain-256.png") repeat 0 0 / 256px 256px;
  opacity: var(--grain-opacite);
  mix-blend-mode: var(--grain-fusion);
  pointer-events: none;
  z-index: 0;
}
@media (prefers-reduced-transparency: reduce) { body::before { display: none; } }

.page { position: relative; z-index: 1; }

img, svg { display: block; max-width: 100%; }
a { color: var(--sanguine); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--sanguine); outline-offset: 3px; border-radius: var(--r-chip); }
::selection { background: var(--surligne); color: var(--encre); }
figure { margin: 0; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; margin: 0; padding: 0; }

.conteneur {
  width: min(100% - 2 * var(--gouttiere), var(--largeur));
  margin-inline: auto;
}
@media (min-width: 720px) { :root { --gouttiere: 32px; } }

/* Lien d’évitement : invisible jusqu’au focus clavier */
.lecture-seule {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.lecture-seule:focus {
  position: fixed; top: var(--s-m); left: var(--s-m); width: auto; height: auto; clip: auto; z-index: 30;
  padding: var(--s-sm) var(--s-m); background: var(--papier-eleve); color: var(--encre);
  border-radius: var(--r-bouton); box-shadow: var(--ombre-souleve); border: 1px solid var(--filet-fort);
}

/* --------------------------------------------------------------------------
   Typographie
   -------------------------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: 0.005em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(40px, 6.4vw, 72px); line-height: 1.05; color: var(--sanguine); }
h2 { font-size: clamp(30px, 4vw, 42px); line-height: 1.15; color: var(--encre); }
h3 { font-size: 22px; line-height: 28px; color: var(--encre); }

p { margin: 0; }
.editorial {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 30px;
  letter-spacing: 0.005em;
  color: var(--encre);
  text-wrap: pretty;
}
.editorial + .editorial { margin-top: var(--s-m); }
.secondaire { font-size: 15px; line-height: 20px; letter-spacing: -0.01em; color: var(--encre-2); }
.legende { font-size: 13px; line-height: 18px; letter-spacing: -0.005em; color: var(--encre-3); }
.micro {
  display: inline-flex; align-items: center; gap: var(--s-sm);
  font-size: 11px; line-height: 13px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--sanguine);
}
.micro::before { content: ""; width: 20px; height: 1px; background: var(--sanguine); }
.chiffres { font-variant-numeric: tabular-nums; }
em { font-style: italic; }
strong { font-weight: 600; }

/* --------------------------------------------------------------------------
   Barre de navigation
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--papier);
  background: color-mix(in srgb, var(--papier) 90%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 0.5px solid var(--filet);
}
@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--papier); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.nav .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-m);
  min-height: 64px;
}
.logotype { display: inline-flex; align-items: center; min-height: 44px; }
.logotype img { width: 118px; height: auto; }   /* ≥ 88 pt, DS-I-02 */
.logotype:hover { text-decoration: none; }
.nav-liens { display: flex; align-items: center; gap: var(--s-m); }
.nav-liens a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding-inline: var(--s-s); color: var(--encre); font-size: 15px; line-height: 20px;
}
.nav-liens a:hover { color: var(--sanguine); }
.nav-liens .bouton-compact { white-space: nowrap; color: var(--sur-bouton); }
.nav-liens .bouton-compact:hover { color: var(--sur-bouton); }
@media (max-width: 899px) {
  .nav-liens li:not(.nav-cta):not(.nav-tarifs) { display: none; }
  .nav-liens { gap: var(--s-xs); }
}
@media (max-width: 479px) {
  .nav-liens li.nav-tarifs { display: none; }
  .logotype img { width: 100px; }
}

/* --------------------------------------------------------------------------
   Boutons (DS-C-17, DS-J-02, DS-J-05) et badges des magasins
   -------------------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-s);
  min-height: 48px;
  padding: 0 var(--s-l);
  border-radius: var(--r-bouton);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 22px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out;
  text-decoration: none;
}
.bouton:hover { text-decoration: none; }
.bouton-principal { background: var(--bouton-fond); color: var(--sur-bouton); }
.bouton-principal:hover, .bouton-principal:active { background: var(--bouton-fond-presse); }
.bouton-secondaire { background: transparent; color: var(--sanguine); border-color: var(--encre-fantome); }
.bouton-secondaire:hover { border-color: var(--sanguine); }
.bouton-compact { min-height: 44px; padding: 0 var(--s-m); font-size: 15px; }

.magasins { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-sm); }
.magasins a { display: inline-flex; border-radius: 7px; }
.magasins img { height: 48px; width: auto; }
.magasins a:hover { text-decoration: none; opacity: .92; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .magasins a { box-shadow: 0 0 0 1px var(--encre-fantome); } }
:root[data-theme="dark"] .magasins a { box-shadow: 0 0 0 1px var(--encre-fantome); }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { padding-block: var(--s-huge); }
@media (max-width: 719px) { .section { padding-block: var(--s-xxxl); } }
.section + .section { border-top: 0.5px solid var(--filet); }
.entete { margin-bottom: var(--s-xxl); }
.entete .micro { margin-bottom: var(--s-sm); }
.entete h2 + .editorial { margin-top: var(--s-m); }

/* Deux colonnes texte / scène. L’ordre du document est toujours texte puis écran ;
   la classe .inverse ne permute que l’affichage sur grand écran. */
.duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-xl);
  align-items: center;
}
@media (min-width: 880px) {
  .duo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-huge); }
  .duo.inverse { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .duo.inverse > .duo-texte { order: 2; }
  .duo.inverse > .duo-media { order: 1; }
}
.duo-texte .micro { margin-bottom: var(--s-sm); }
.duo-texte h2 { margin-bottom: var(--s-ml); }
.duo-texte .editorial { max-width: 46ch; }

.points { display: grid; gap: var(--s-sm); margin-top: var(--s-l); }
.points li {
  position: relative;
  padding-left: var(--s-ml);
  font-size: 17px;
  line-height: 24px;
  color: var(--encre);
  letter-spacing: -0.01em;
}
.points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--encre-fantome);
}
.points-2col { margin-top: var(--s-l); }
@media (min-width: 640px) { .points-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-l); } }

/* --------------------------------------------------------------------------
   Scènes : une plaque de couleur de la palette derrière les écrans
   -------------------------------------------------------------------------- */
.scene {
  position: relative;
  border-radius: var(--r-feuille);
  padding: var(--s-xxl) var(--s-xl);
  background: var(--scene-fond, var(--papier-eleve));
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--s-l);
  border-top: calc(0.5px * var(--lisere)) solid var(--filet-fort);
  overflow: hidden;
}
.scene.ocre { --scene-fond: var(--teinte-ocre); }
.scene.cafe { --scene-fond: var(--teinte-cafe); }
.scene.ardoise { --scene-fond: var(--teinte-ardoise); }
.scene.sanguine { --scene-fond: var(--teinte-sanguine); }
.scene.prune { --scene-fond: var(--teinte-prune); }
.scene.bleu { --scene-fond: var(--teinte-bleu); }
.scene.papier { --scene-fond: var(--papier-eleve); box-shadow: var(--ombre-pose); }
/* L’élastique de l’icône (DS-I-04), sur la couverture du hero et sur la dernière scène */
.scene.couverture::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: max(24px, 3.5%);
  width: 20px;
  background: var(--sanguine);
}
@media (max-width: 719px) { .scene { padding: var(--s-l) var(--s-m); gap: var(--s-m); } .scene.couverture::after { width: 12px; right: 6%; } }

/* --------------------------------------------------------------------------
   Téléphones : une silhouette d’iPhone dessinée en CSS autour de l’écran 393 × 852
   (u = 1/393 de la largeur d’écran ; le corps ajoute 20 u de bordure de chaque côté, soit 433 u)
   -------------------------------------------------------------------------- */
.telephone {
  position: relative;
  container-type: inline-size;
  width: min(100%, 300px);
  flex: 0 1 300px;
  --u: 0.23095cqw;
}
@supports not (width: 1cqw) { .telephone { --u: 0.69px; } }
.iphone-corps {
  position: relative;
  padding: 4.62%;                          /* 20 u, résolu contre la largeur du conteneur */
  border-radius: calc(72 * var(--u));
  background: var(--cadre-telephone);
  box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--cadre-telephone-bord), var(--ombre-telephone);
}
.iphone-ecran {
  position: relative;
  border-radius: calc(55 * var(--u));
  overflow: hidden;
  aspect-ratio: 393 / 852;
  background: var(--papier);
}
/* Pas de display ici : la règle .ecran-sombre doit pouvoir masquer la variante inutile, qui n’est alors pas téléchargée */
.iphone-ecran img { width: 100%; height: 100%; object-fit: cover; }
.iphone-ilot {
  position: absolute;
  top: calc(31 * var(--u));
  left: 50%;
  width: calc(126 * var(--u));
  height: calc(37 * var(--u));
  border-radius: 999px;
  background: #050403;
  transform: translateX(-50%);
}
.iphone-bouton {
  position: absolute;
  width: calc(3.5 * var(--u));
  border-radius: calc(1.5 * var(--u));
  background: var(--cadre-telephone-bord);
}
.iphone-bouton.silence { left: calc(-3 * var(--u)); top: calc(186 * var(--u)); height: calc(30 * var(--u)); }
.iphone-bouton.volume-haut { left: calc(-3 * var(--u)); top: calc(234 * var(--u)); height: calc(60 * var(--u)); }
.iphone-bouton.volume-bas { left: calc(-3 * var(--u)); top: calc(306 * var(--u)); height: calc(60 * var(--u)); }
.iphone-bouton.marche { right: calc(-3 * var(--u)); top: calc(254 * var(--u)); height: calc(96 * var(--u)); }

/* --------------------------------------------------------------------------
   Tablette : une silhouette d’iPad à l’horizontale autour de l’écran 1194 × 834
   (v = 1/1194 de la largeur d’écran ; le corps ajoute 40 v de bordure de chaque côté, soit 1274 v)
   -------------------------------------------------------------------------- */
.tablette {
  position: relative;
  container-type: inline-size;
  width: min(100%, 960px);
  --v: 0.078493cqw;
}
@supports not (width: 1cqw) { .tablette { --v: 0.7535px; } }
.ipad-corps {
  position: relative;
  padding: 3.1397%;                        /* 40 v, résolu contre la largeur du conteneur */
  border-radius: calc(58 * var(--v));      /* 18 v d’écran + 40 v de bordure : coins concentriques */
  background: var(--cadre-telephone);
  box-shadow: inset 0 0 0 calc(2.5 * var(--v)) var(--cadre-telephone-bord), var(--ombre-telephone);
}
.ipad-ecran {
  position: relative;
  border-radius: calc(18 * var(--v));
  overflow: hidden;
  aspect-ratio: 1194 / 834;
  background: var(--papier);
}
.ipad-ecran img { width: 100%; height: 100%; object-fit: cover; }
/* La caméra avant, au milieu du grand côté, comme sur l’iPad tenu à l’horizontale */
.ipad-camera {
  position: absolute;
  top: calc(16 * var(--v));
  left: 50%;
  width: calc(8 * var(--v));
  height: calc(8 * var(--v));
  border-radius: 50%;
  background: #050403;
  transform: translateX(-50%);
}
.scene.large { padding: var(--s-xxxl) var(--s-xxl); }
/* Raccourcis clavier : dans la police du texte, jamais coupés */
kbd { font: inherit; white-space: nowrap; }
@media (max-width: 719px) { .scene.large { padding: var(--s-l) var(--s-m); } }

.telephone-legende { margin-top: var(--s-sm); text-align: center; }
figure.avec-legende { display: grid; justify-items: center; width: min(100%, 280px); flex: 0 1 280px; min-width: 0; }
figure.avec-legende .telephone { width: 100%; flex: none; }

/* Dans une scène : les téléphones sont droits, alignés, jamais décalés */
.scene .telephone { width: min(100%, 280px); flex: 0 1 280px; }
.scene.seul .telephone { width: min(100%, 300px); flex-basis: 300px; }
@media (max-width: 719px) {
  .scene .telephone { width: min(100%, 280px); }
  .scene.paire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
  .scene.paire .telephone { width: 100%; }
}

/* --------------------------------------------------------------------------
   Hero : titre centré, badges, puis la couverture avec trois écrans
   -------------------------------------------------------------------------- */
.hero { padding-block: var(--s-xxxl) var(--s-huge); }
@media (min-width: 880px) { .hero { padding-block: 88px var(--s-huge); } }
.hero-texte { max-width: 1000px; margin-inline: auto; text-align: center; display: grid; justify-items: center; gap: var(--s-ml); }
.hero-texte h1 { max-width: 760px; }
.hero-texte .accroche { font-size: 21px; line-height: 33px; text-wrap: balance; }
.hero-texte .magasins { justify-content: center; margin-top: var(--s-s); }
.hero .couverture { margin-top: var(--s-xxxl); padding: var(--s-xxxl) 88px var(--s-xxxl) var(--s-xxl); gap: var(--s-xxl); align-items: flex-end; }
.hero .couverture .telephone { width: min(100%, 280px); flex: 0 1 280px; }
@media (max-width: 879px) {
  .hero .couverture { padding: var(--s-xl) var(--s-m); gap: var(--s-m); }
  .hero .couverture .telephone:nth-child(3) { display: none; }
}
@media (max-width: 479px) {
  .hero .couverture { margin-top: var(--s-xl); }
  .hero .couverture .telephone:nth-child(1) { display: none; }
  .hero .couverture .telephone { width: min(100%, 240px); flex-basis: 240px; }
  .hero-texte .micro::before { display: none; }
}

/* --------------------------------------------------------------------------
   Cartes
   -------------------------------------------------------------------------- */
.carte {
  background: var(--papier-eleve);
  border-radius: var(--r-carte);
  padding: var(--s-m);
  box-shadow: var(--ombre-pose);
  border-top: calc(0.5px * var(--lisere)) solid var(--filet-fort);
}

/* Manuscrit : le filet de marge de l’éditeur */
.marge-sanguine { border-left: 3px solid var(--sanguine); padding-left: var(--s-ml); margin-bottom: var(--s-m); }

/* Univers : planche de quatre téléphones dans une scène ; bande défilante sur téléphone */
.planche { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-l); align-items: start; width: 100%; }
.planche .telephone { width: 100%; flex: none; }
@media (max-width: 879px) and (min-width: 720px) { .planche { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px) {
  .scene.univers { padding-inline: 0; }
  .planche {
    display: flex;
    gap: var(--s-m);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: var(--s-m);
    padding-bottom: var(--s-xs);
    scrollbar-width: none;
  }
  .planche::-webkit-scrollbar { display: none; }
  .planche figure { flex: 0 0 min(70vw, 260px); scroll-snap-align: center; }
}

/* Trois propriétés : trois cartes */
.trio { display: grid; grid-template-columns: 1fr; gap: var(--s-m); }
@media (min-width: 720px) { .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-l); } }
.trio .carte { padding: var(--s-l) var(--s-ml); display: grid; gap: var(--s-s); align-content: start; }
.trio .carte::before { content: ""; width: 28px; height: 3px; background: var(--sanguine); border-radius: 2px; margin-bottom: var(--s-xs); }
.trio h3 { font-size: 22px; line-height: 28px; }
.trio p { font-size: 15px; line-height: 22px; color: var(--encre-2); letter-spacing: -0.01em; }

/* Relecture · types de remarque (DS-J-09) */
.types { display: flex; flex-wrap: wrap; gap: var(--s-s); margin-top: var(--s-l); }
.types li {
  display: inline-flex; align-items: center; gap: var(--s-s);
  padding: 6px 10px 6px 8px;
  border-radius: var(--r-chip);
  background: var(--papier-creux);
  font-size: 15px; line-height: 20px; color: var(--encre);
}
.types li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--pastille); }
.types .typo { --pastille: #5A5149; }
.types .incoherence { --pastille: #9A3A1F; }
.types .rythme { --pastille: #5E3B6B; }
.types .ressenti { --pastille: #3A5566; }
.types .suggestion { --pastille: #1F5F86; }
.types .question { --pastille: #7E6110; }
.types .coeur { --pastille: #A6365A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .types .typo { --pastille: #B5A895; }
  :root:not([data-theme="light"]) .types .incoherence { --pastille: #E08A63; }
  :root:not([data-theme="light"]) .types .rythme { --pastille: #B693C9; }
  :root:not([data-theme="light"]) .types .ressenti { --pastille: #8FB0C4; }
  :root:not([data-theme="light"]) .types .suggestion { --pastille: #6FAFD8; }
  :root:not([data-theme="light"]) .types .question { --pastille: #D9B84F; }
  :root:not([data-theme="light"]) .types .coeur { --pastille: #E3849B; }
}
:root[data-theme="dark"] .types .typo { --pastille: #B5A895; }
:root[data-theme="dark"] .types .incoherence { --pastille: #E08A63; }
:root[data-theme="dark"] .types .rythme { --pastille: #B693C9; }
:root[data-theme="dark"] .types .ressenti { --pastille: #8FB0C4; }
:root[data-theme="dark"] .types .suggestion { --pastille: #6FAFD8; }
:root[data-theme="dark"] .types .question { --pastille: #D9B84F; }
:root[data-theme="dark"] .types .coeur { --pastille: #E3849B; }

/* Une phrase, du papier (72 au-dessus et en dessous) */
.sans-ecran { padding-block: 96px; text-align: center; }
@media (max-width: 719px) { .sans-ecran { padding-block: var(--s-huge); } }
.sans-ecran h2.sanguine { color: var(--sanguine); font-size: clamp(30px, 4.6vw, 54px); line-height: 1.16; font-weight: 500; max-width: 1080px; margin-inline: auto; }
.sans-ecran .editorial { margin: var(--s-l) auto 0; max-width: 920px; text-wrap: balance; }
.sans-ecran .secondaire { margin-top: var(--s-m); }

/* Export : quatre formats en typographie, puis le dossier */
.formats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-sm); }
@media (min-width: 720px) { .formats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-m); } }
.format { display: grid; gap: var(--s-s); padding: var(--s-ml) var(--s-m); }
.format-nom { font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 34px; letter-spacing: 0; color: var(--encre); }
.dossier { margin-top: var(--s-m); padding: var(--s-l); }
.dossier h3 { margin-bottom: var(--s-s); }

/* --------------------------------------------------------------------------
   Tarifs
   -------------------------------------------------------------------------- */
.offres { display: grid; grid-template-columns: 1fr; gap: var(--s-m); align-items: start; }
@media (min-width: 800px) { .offres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-l); } }
.offre { padding: var(--s-l); display: grid; gap: var(--s-m); }
.offre h3 { font-size: 26px; line-height: 32px; }
.offre .prix { font-family: var(--serif); font-size: 34px; line-height: 40px; font-weight: 600; color: var(--encre); letter-spacing: 0; }
.offre .prix small { font-family: var(--sans); font-size: 15px; line-height: 20px; font-weight: 400; color: var(--encre-2); letter-spacing: -0.01em; margin-left: var(--s-xs); }
.offre .points { margin-top: 0; }
.offre .points li::before { background: var(--sanguine); }
.offre .filet { height: 0.5px; background: var(--filet); }
.tarif-choix { display: grid; gap: var(--s-s); }
.tarif-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-m); padding: var(--s-sm) 0; border-bottom: 0.5px solid var(--filet); }
.tarif-ligne:last-child { border-bottom: 0; }
.tarif-ligne .prix { font-size: 26px; line-height: 32px; white-space: nowrap; flex-shrink: 0; }
.tarif-ligne .secondaire { text-align: right; max-width: 26ch; }
@media (max-width: 479px) {
  .tarif-ligne { flex-wrap: wrap; row-gap: var(--s-xs); }
  .tarif-ligne .secondaire { flex-basis: 100%; text-align: left; max-width: none; }
}

/* --------------------------------------------------------------------------
   Questions
   -------------------------------------------------------------------------- */
.questions details { border-top: 0.5px solid var(--filet); }
.questions details:last-child { border-bottom: 0.5px solid var(--filet); }
.questions summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-m);
  padding: var(--s-ml) 0;
  font-family: var(--serif); font-size: 21px; line-height: 28px; font-weight: 600; color: var(--encre);
}
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  border-right: 1.5px solid var(--sanguine);
  border-bottom: 1.5px solid var(--sanguine);
  transform: rotate(45deg);
  margin-right: 6px;
  transition: transform 120ms ease-out;
}
.questions details[open] summary::after { transform: rotate(-135deg); }
.questions summary:hover { color: var(--sanguine); }
.questions .reponse { padding: 0 var(--s-xxl) var(--s-l) 0; }
@media (prefers-reduced-motion: reduce) { .questions summary::after { transition: none; } }

/* --------------------------------------------------------------------------
   Télécharger
   -------------------------------------------------------------------------- */
.telecharger .scene { display: grid; justify-items: center; text-align: center; gap: var(--s-m); padding: var(--s-xxxl) var(--s-xl); }
.telecharger .icone-app { width: 96px; height: 96px; border-radius: 22px; box-shadow: var(--ombre-pose); margin-bottom: var(--s-s); }
.telecharger .editorial { max-width: 52ch; }
.telecharger .magasins { justify-content: center; margin-top: var(--s-s); }
.telecharger .scene > * { position: relative; z-index: 1; }
@media (max-width: 719px) { .telecharger .scene { padding: var(--s-xl) 44px; } }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.pied { border-top: 0.5px solid var(--filet); padding-block: var(--s-xl) var(--s-l); }
.pied-haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-s) var(--s-xl); }
.pied .logotype img { width: 96px; }
.pied-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-l); }
.pied-liens a { display: inline-flex; align-items: center; min-height: 44px; color: var(--encre-2); font-size: 15px; line-height: 20px; }
.pied-liens a:hover { color: var(--sanguine); }
.pied-liens a[aria-current="page"] { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pied-bas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-s) var(--s-l);
  margin-top: var(--s-m); padding-top: var(--s-m); border-top: 0.5px solid var(--filet);
}
.apparence { display: inline-flex; align-items: center; gap: var(--s-s); min-height: 44px; font-size: 15px; line-height: 20px; color: var(--encre-2); }
.apparence select {
  font: inherit; font-size: 15px; color: var(--encre); background: var(--papier-creux);
  border: 1px solid var(--encre-fantome); border-radius: var(--r-champ); padding: 6px 10px; min-height: 36px;
}

/* --------------------------------------------------------------------------
   Pages légales : sommaire à gauche, texte à droite, sur toute la largeur
   -------------------------------------------------------------------------- */
.legal { padding-block: var(--s-xxl) var(--s-huge); }
.legal-entete {
  display: grid; gap: var(--s-sm); justify-items: start;
  padding-bottom: var(--s-xl); margin-bottom: var(--s-xxl); border-bottom: 0.5px solid var(--filet);
}
.legal-entete h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.08; }
.legal-entete .editorial { max-width: 70ch; }

/* Retour : petit rond avec chevron, libellé à l’extérieur (DS-J-34) */
.retour {
  display: inline-flex; align-items: center; gap: var(--s-s); min-height: 44px;
  color: var(--encre); font-size: 15px; line-height: 20px; font-weight: 500; margin-bottom: var(--s-s);
}
.retour:hover { text-decoration: none; color: var(--sanguine); }
.retour-rond {
  position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--papier-creux); border: 0.5px solid var(--filet-fort);
}
.retour-rond::after {
  content: ""; position: absolute; left: 13px; top: 11.5px; width: 8px; height: 8px;
  border-left: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: rotate(45deg);
}

.legal-corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-xxl); }
@media (min-width: 960px) {
  .legal-corps { grid-template-columns: 260px minmax(0, 1fr); gap: var(--s-huge); align-items: start; }
  .sommaire { position: sticky; top: 96px; }
}
@media (max-width: 959px) {
  .sommaire { padding: var(--s-m) var(--s-ml); background: var(--papier-eleve); border-radius: var(--r-carte); box-shadow: var(--ombre-pose); }
}
.sommaire .micro { margin-bottom: var(--s-sm); }
.sommaire ol { display: grid; gap: 2px; counter-reset: sommaire; }
.sommaire li { counter-increment: sommaire; }
.sommaire a { display: flex; gap: var(--s-sm); padding: 6px 0; color: var(--encre-2); font-size: 15px; line-height: 20px; }
.sommaire a::before { content: counter(sommaire, decimal-leading-zero); min-width: 20px; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.sommaire a:hover { color: var(--sanguine); text-decoration: none; }

.legal-texte section { scroll-margin-top: 88px; }
.legal-texte section + section { margin-top: var(--s-xxl); padding-top: var(--s-xxl); border-top: 0.5px solid var(--filet); }
.legal-texte h2 { font-size: 26px; line-height: 32px; margin-bottom: var(--s-m); }
.legal-texte h3 { font-size: 20px; line-height: 26px; margin: var(--s-l) 0 var(--s-s); }
.legal-texte p, .legal-texte li, .legal-texte dd {
  font-family: var(--serif); font-size: 18px; line-height: 29px; letter-spacing: 0.005em; color: var(--encre); text-wrap: pretty;
}
.legal-texte p + p, .legal-texte p + ul, .legal-texte ul + p, .legal-texte .fiche + p, .legal-texte p + .fiche { margin-top: var(--s-sm); }
.legal-texte ul { margin: var(--s-sm) 0 0; padding-left: 1.25em; }
.legal-texte li + li { margin-top: var(--s-xs); }
.legal-texte li::marker { color: var(--encre-fantome); }
.legal-texte .clause {
  margin-top: var(--s-m); padding-left: var(--s-ml); border-left: 3px solid var(--sanguine); font-style: italic;
}
.fiche { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-s) var(--s-l); margin: var(--s-sm) 0 0; }
.fiche dt { font-size: 15px; line-height: 29px; color: var(--encre-2); }
.fiche dd { margin: 0; }
@media (max-width: 559px) { .fiche { grid-template-columns: 1fr; gap: 0; } .fiche dd { margin-bottom: var(--s-s); } }

.tableau-conteneur { margin-top: var(--s-m); overflow-x: auto; }
.tableau { width: 100%; min-width: 620px; border-collapse: collapse; }
.tableau th, .tableau td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 0.5px solid var(--filet); }
.tableau thead th { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--encre-2); border-bottom-color: var(--filet-fort); }
.tableau tbody th, .tableau td { font-size: 15px; line-height: 21px; color: var(--encre); letter-spacing: -0.01em; }
.tableau tbody th { font-weight: 500; }

/* Sur téléphone, chaque ligne devient une petite fiche : son intitulé, puis chaque colonne nommée */
@media (max-width: 639px) {
  .tableau { min-width: 0; }
  .tableau, .tableau tbody, .tableau tr, .tableau th, .tableau td { display: block; }
  .tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tableau tbody { border-top: 0.5px solid var(--filet-fort); }
  .tableau tr { padding: var(--s-sm) 0; border-bottom: 0.5px solid var(--filet); }
  .tableau tbody th, .tableau td { padding: 0; border: 0; }
  .tableau tbody th { margin-bottom: var(--s-xs); font-weight: 600; }
  .tableau td { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-s); }
  .tableau td + td { margin-top: var(--s-xs); }
  .tableau td::before { content: attr(data-label); content: attr(data-label) / ""; font-size: 13px; color: var(--encre-2); }
}

/* Éléments à compléter avant la mise en ligne : surlignés, impossibles à manquer */
.a-completer {
  background: var(--surligne); color: var(--encre); padding: 1px 6px; border-radius: 4px;
  font-family: var(--sans); font-size: 0.82em; letter-spacing: 0;
}
/* Numéros de textes (« 2021-1362 », « 122-4 ») jamais coupés au trait d’union */
.insecable { white-space: nowrap; }