/* ============================================================
   InkuPanda — système « Encre, papier, vermillon »
   Source de vérité : design-systems/inkupanda/DESIGN.md (studio KodeNoir)
   Chargé sur toutes les pages. Les styles propres à une page
   restent dans le <style> de cette page.
   ============================================================ */

:root{
  /* matières */
  --paper:        oklch(0.985 0.006 30);   /* #FFF9F7 */
  --paper-2:      oklch(0.955 0.010 55);   /* #F2ECE4 */
  --ink:          oklch(0.170 0.006 60);   /* #14110F */
  --ink-2:        oklch(0.230 0.008 60);   /* #1E1B19 */
  /* texte */
  --lavis:        oklch(0.490 0.015 60);   /* #6B625B */
  --lavis-on-ink: oklch(0.720 0.012 60);   /* #A79E96 */
  --rule:         oklch(0.850 0.013 70);   /* #D9D0C7 */
  --rule-on-ink:  oklch(0.300 0.008 60);   /* #2C2825 */
  /* accent unique */
  --seal:         oklch(0.600 0.220 30);   /* #E52A20 */
  --seal-hover:   oklch(0.540 0.220 30);   /* #C9231B */
  --seal-soft:    oklch(0.930 0.030 30);   /* #F8E1DE */
  --sakura:       oklch(0.860 0.045 25);   /* #F2C9C4 */
  --ok:           oklch(0.520 0.120 150);
  --warn:         oklch(0.640 0.140 75);

  /* les deux matières, redéfinies par section */
  --bg:   var(--paper);
  --fg:   var(--ink);
  --muted:var(--lavis);
  --line: var(--rule);

  --font-display: "Dela Gothic One", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --font-text:    "Instrument Sans", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --display-xl: clamp(3.6rem, 7.2vw, 7.6rem);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-hover: 200ms;
  --t-enter: 400ms;
  --wrap: 1680px;
  --gutter: clamp(1rem, 3vw, 3.5rem);
  --tear-h: 10rem;
}
html[lang="en"]{ --display-xl: clamp(3.8rem, 7.8vw, 8.2rem); }

*,*::before,*::after{ box-sizing:border-box; }
html{ font-size:18px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
/* La base GRANDIT sur telephone, elle ne retrecit pas.
   Avant : 17 px sous 640 px, contre 18 px sur ordinateur — et comme presque
   tout le site est en rem, tout l'ecran rapetissait la ou l'on a le moins de
   place. Mesure a 390 px : 43 a 56 elements par page sous 13 px. */
@media (max-width:640px){ html{ font-size:20px; } }

/* Effet de bord de la base a 19 px : les minimums des clamp sont en rem, donc
   ils MONTENT avec elle. --display-xl passait a 68 px de plancher et un mot
   comme « morceaux » ne tenait plus dans la colonne. On redescend les
   minimums sur telephone — le texte courant grossit, les titres non. */
@media (max-width:640px){
  :root{ --display-xl: clamp(2.6rem, 13vw, 4.2rem); }
  html[lang="en"]{ --display-xl: clamp(2.7rem, 13.5vw, 4.4rem); }
  .display--lg{ font-size:clamp(1.9rem, 8vw, 2.6rem); }
  .display--md{ font-size:clamp(1.4rem, 5.5vw, 1.8rem); }
  .price--lg{ font-size:2.1rem; }
  /* Un mot plus long que sa colonne doit pouvoir se couper plutot que
     de faire defiler toute la page. */
  .display, .price, h1, h2, h3{ overflow-wrap:break-word; }
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-text); line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-underline-offset:.18em; text-decoration-thickness:1px; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--fg); outline-offset:3px; }
/* L'attribut hidden n'est qu'un `display:none` de la feuille par défaut : toute
   règle qui pose un display (nos .panel, .field, .items… sont en grid ou flex)
   le bat sur la spécificité, et l'élément « caché » reste à l'écran. Vu sur le
   récapitulatif de promo-commande.html, visible avant tout envoi. */
[hidden]{ display:none !important; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- grain, une seule fois ---------- */
body::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px; mix-blend-mode:multiply;
}

/* ---------- typographie ---------- */
.display{ font-family:var(--font-display); font-weight:400; text-transform:uppercase; line-height:.86; letter-spacing:-.005em; margin:0; text-wrap:balance; }
.display--xl{ font-size:var(--display-xl); }
.display--lg{ font-size:clamp(2.2rem, 4.2vw, 4rem); }
.display--md{ font-size:clamp(1.6rem, 2.4vw, 2.2rem); line-height:.95; }
.mono{ font-family:var(--font-mono); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; }
.muted{ color:var(--muted); }
.lead{ font-size:1.1rem; max-width:62ch; }
p{ max-width:65ch; margin:0 0 1em; }
.kanji{ font-family:var(--font-display); font-feature-settings:"palt"; line-height:1; }

/* numéro · TITRE · ( annotation ) */
.sec-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1rem; margin:0 0 1.6rem; }
.sec-head .n{ font-family:var(--font-mono); font-weight:700; color:var(--seal); font-size:1rem; letter-spacing:.04em; }
.sec-head .t{ font-family:var(--font-display); text-transform:uppercase; font-size:clamp(1.5rem, 2.2vw, 2rem); line-height:1; margin:0; }
.sec-head .p{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }

/* ---------- mise en page ---------- */
.wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:var(--gutter); }
.grid{ display:grid; gap:var(--gutter); grid-template-columns:repeat(12, minmax(0,1fr)); }
.col-12{ grid-column:span 12; } .col-8{ grid-column:span 8; } .col-7{ grid-column:span 7; }
.col-6{ grid-column:span 6; } .col-5{ grid-column:span 5; } .col-4{ grid-column:span 4; } .col-3{ grid-column:span 3; }
@media (max-width:900px){ .grid > *{ grid-column:span 12; } }

/* ---------- les deux matières ---------- */
.sheet{ position:relative; background:var(--bg); color:var(--fg); padding-top:clamp(3.5rem, 7vw, 6.5rem); padding-bottom:calc(clamp(3.5rem, 7vw, 6.5rem) + var(--tear-h)); }
.sheet--last{ padding-bottom:clamp(3.5rem, 7vw, 6.5rem); }
.sheet--paper{ --bg:var(--paper); --fg:var(--ink); --muted:var(--lavis); --line:var(--rule); }
.sheet--ink  { --bg:var(--ink);   --fg:var(--paper); --muted:var(--lavis-on-ink); --line:var(--rule-on-ink); }
.sheet--ink .sec-head .n{ color:var(--seal); }

/* déchirure : la section qui arrive passe DEVANT la précédente */
.sheet--torn{ margin-top:calc(-1 * var(--tear-h)); padding-top:calc(var(--tear-h) + clamp(2rem, 4vw, 4rem)); z-index:2; background:transparent; }
.sheet--torn::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--bg);
  -webkit-mask:url(../images/paper/tear-top.webp) top center / 100% var(--tear-h) no-repeat,
               linear-gradient(#000,#000) 0 var(--tear-h) / 100% calc(100% - var(--tear-h)) no-repeat;
          mask:url(../images/paper/tear-top.webp) top center / 100% var(--tear-h) no-repeat,
               linear-gradient(#000,#000) 0 var(--tear-h) / 100% calc(100% - var(--tear-h)) no-repeat;
}
/* ombre dure de la déchirure */
.sheet--torn::after{
  content:""; position:absolute; left:0; right:0; top:2px; height:var(--tear-h); z-index:-2; pointer-events:none;
  background:var(--ink); opacity:.14;
  -webkit-mask:url(../images/paper/tear-top.webp) top center / 100% 100% no-repeat;
          mask:url(../images/paper/tear-top.webp) top center / 100% 100% no-repeat;
}
.sheet--paper.sheet--torn::after{ opacity:.18; }
.sheet--ink.sheet--torn::after{ background:var(--paper); opacity:.10; }
/* Pages internes : déchirure plus courte que sur l'accueil.
   La réserve d'un chevauchement de 10rem se voit quand la section est
   courte — et les pages de service le sont. 7.5rem reste dans la fourchette
   6–9rem du système, et c'est une variable, pas une exception par page. */
.pages{ --tear-h:7.5rem; }
.pages .sheet{ padding-bottom:calc(clamp(2.5rem, 5vw, 4.5rem) + var(--tear-h)); padding-top:clamp(2.5rem, 5vw, 4.5rem); }
.pages .sheet--torn{ padding-top:calc(var(--tear-h) + clamp(1.5rem, 3vw, 3rem)); }
/* une suite numérotée en fin de section ne traîne pas sa marge */
.steps:last-child, .stats:last-child, .items:last-child{ margin-bottom:0; }

/* la première section n'a rien au-dessus */
.sheet:first-of-type{ margin-top:0; }
/* Pas de règle « .pages » pour les masques : un url() de CSS se résout par
   rapport à la FEUILLE DE STYLE, pas au document, donc ../images/paper/…
   vise déjà le bon fichier depuis n'importe quelle profondeur de page.
   La règle qui vivait ici redéfinissait mask-image avec UNE seule valeur, ce
   qui ramenait le masque à une couche : sur les pages internes le fond encre
   disparaissait partout sauf sur la bande déchirée, et le texte papier se
   retrouvait blanc sur blanc. */

/* tuile de papier déchirée (produits sur encre) */
.tile{
  position:relative; background:var(--paper); color:var(--ink); padding:1rem;
  -webkit-mask:url(../images/paper/tear-top.webp) top / 100% 2.2rem no-repeat,
               linear-gradient(#000,#000) 0 2.2rem / 100% calc(100% - 4.4rem) no-repeat,
               url(../images/paper/tear-bottom.webp) bottom / 100% 2.2rem no-repeat;
          mask:url(../images/paper/tear-top.webp) top / 100% 2.2rem no-repeat,
               linear-gradient(#000,#000) 0 2.2rem / 100% calc(100% - 4.4rem) no-repeat,
               url(../images/paper/tear-bottom.webp) bottom / 100% 2.2rem no-repeat;
  padding-block:2.6rem;
}

/* ---------- composants ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--font-text); font-weight:700; font-size:.95rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.95rem 1.6rem; border:1px solid transparent; border-radius:0; text-decoration:none; cursor:pointer;
  transition:background-color var(--t-hover), color var(--t-hover), transform var(--t-hover) var(--ease);
  min-height:44px;
}
.btn--seal{ background:var(--seal); color:#fff; }
.btn--seal:hover{ background:var(--seal-hover); }
.btn--ink{ background:var(--ink); color:var(--paper); }
.btn--ink:hover{ background:var(--ink-2); }
.btn--paper{ background:var(--paper); color:var(--ink); }
.btn--paper:hover{ background:var(--paper-2); }
.btn--ghost{ background:transparent; color:var(--fg); border-color:currentColor; }
.btn--ghost:hover{ background:var(--fg); color:var(--bg); }
.btn:active{ transform:translateY(1px); }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }

.tag{ display:inline-block; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; border:1px solid currentColor; padding:.32rem .6rem; white-space:nowrap; }
.tags{ display:flex; flex-wrap:wrap; gap:.5rem; }

.seal{
  display:inline-grid; place-items:center; width:2.6rem; height:2.6rem; background:var(--seal); color:var(--paper);
  font-family:var(--font-display); font-size:1rem; line-height:1; transform:rotate(-3deg); user-select:none;
}
.seal--lg{ width:4.2rem; height:4.2rem; font-size:1.7rem; }

.badge-brush{
  position:relative; display:inline-block; padding:.55rem 1.6rem; color:var(--paper);
  font-family:var(--font-display); font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; line-height:1;
  transform:rotate(-2deg); isolation:isolate;
}
.badge-brush::before{
  content:""; position:absolute; inset:-.35rem -.9rem; z-index:-1; background:var(--ink);
  -webkit-mask:url(../images/generated/brush-badge-alpha.webp) center / 100% 100% no-repeat;
          mask:url(../images/generated/brush-badge-alpha.webp) center / 100% 100% no-repeat;
}
.badge-brush--seal::before{ background:var(--seal); }

.price{ font-family:var(--font-display); color:var(--seal); font-variant-numeric:tabular-nums; line-height:1; }
.price--lg{ font-size:2.6rem; } .price--md{ font-size:1.4rem; }
.price small{ display:block; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:.35rem; }

.rule{ border:0; border-top:1px solid var(--line); margin:0; }

/* ---------- icônes (jeu maison, _shell/icons.svg) ----------
   Le sprite est injecté en clair en tête de <body> : Safari ne suit pas
   <use href="externe.svg#id">. Il ne doit rien occuper dans le flux.
   Le trait vit ICI et pas dans les symboles : une icone hérite de la
   couleur du texte, et l'épaisseur reste la même d'un bout à l'autre. */
.icon-sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.icon{
  width:1.15em; height:1.15em; flex:none; vertical-align:-.18em;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.icon--lg{ width:1.7em; height:1.7em; stroke-width:1.5; }
.icon--xl{ width:2.6em; height:2.6em; stroke-width:1.3; }
.icon--seal{ color:var(--seal); }

/* champs */
.field{ display:grid; gap:.4rem; }
.field label{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.field input,.field select,.field textarea{
  font:inherit; font-size:1rem; color:var(--fg); background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:.7rem 0; border-radius:0; width:100%; min-height:44px;
}
.field textarea{ resize:vertical; min-height:8rem; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-bottom:2px solid var(--fg); }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2314110F' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .2rem center; padding-right:1.6rem; }
.sheet--ink .field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23FFF9F7' stroke-width='1.6'/%3E%3C/svg%3E"); }

/* ---------- ruban ---------- */
.ribbon{ overflow:hidden; min-width:0; max-width:100%; border-block:1px solid var(--line); padding-block:.55rem;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.ribbon__track{ display:flex; width:max-content; gap:2.4rem; animation:ribbon var(--duration,28s) linear infinite; will-change:transform; }
.ribbon:hover .ribbon__track,.ribbon.is-paused .ribbon__track{ animation-play-state:paused; }
.ribbon__item{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; display:inline-flex; align-items:center; gap:2.4rem; }
.ribbon__item::after{ content:""; width:.4rem; height:.4rem; background:var(--seal); }
@keyframes ribbon{ to{ transform:translateX(calc(-50% - 1.2rem)); } }
@media (prefers-reduced-motion:reduce){ .ribbon__track{ animation:none; } }

/* ---------- en-tête ---------- */
.topbar{ background:var(--ink); color:var(--paper); font-family:var(--font-mono); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; }
.topbar .wrap{ display:flex; align-items:center; gap:1.2rem; min-height:2.2rem; }
.topbar .ticker{ flex:1; min-width:0; overflow:hidden;  /* min-width:0 obligatoire :
    un element flex ne descend PAS sous la largeur de son contenu (min-width:auto par
    defaut), donc sans lui le ruban du haut elargit toute la page sur telephone.
    .ribbon le porte deja ; .topbar .ticker l'avait oublie. */ -webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }
.topbar .ticker-content{ display:inline-flex; width:max-content; gap:3rem; animation:ribbon 60s linear infinite; }
.topbar .ticker-item{ white-space:nowrap; }
.topbar .links{ display:flex; align-items:center; gap:.9rem; white-space:nowrap; }
.topbar a{ text-decoration:none; }
.topbar a:hover{ color:var(--sakura); }
.lang{ display:inline-flex; border:1px solid var(--rule-on-ink); }
.lang .lang-btn{ background:transparent; border:0; color:var(--lavis-on-ink); padding:.15rem .5rem; cursor:pointer; font:inherit; letter-spacing:.06em; }
.lang .lang-btn.active{ background:var(--paper); color:var(--ink); }
@media (max-width:640px){ .topbar .links .sep, .topbar .links .top-link:last-child{ display:none; } }

.header{ position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid var(--rule); }
.header .wrap{ display:flex; align-items:center; gap:1.5rem; min-height:4.4rem; }
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; font-family:var(--font-display); font-size:1.15rem; text-transform:uppercase; line-height:.9; }
.brand img{ width:2.6rem; height:2.6rem; object-fit:contain; }
.brand .k{ font-size:.8rem; color:var(--seal); letter-spacing:.06em; }
.nav-menu{ list-style:none; margin:0 0 0 auto; padding:0; display:flex; gap:1.6rem; }
.nav-link{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; padding:.4rem 0; position:relative; }
.nav-link::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--seal); transition:right var(--t-hover) var(--ease); }
.nav-link:hover::after,.nav-link.active::after{ right:0; }
.nav-actions{ display:flex; align-items:center; gap:1rem; }
.nav-icon{ position:relative; display:inline-grid; place-items:center; width:2.6rem; height:2.6rem; text-decoration:none; }
.nav-icon svg{ width:1.3rem; height:1.3rem; }
.cart-badge{ position:absolute; top:.15rem; right:.1rem; min-width:1.15rem; height:1.15rem; padding:0 .25rem; background:var(--seal); color:#fff; font-family:var(--font-mono); font-size:.62rem; line-height:1.15rem; text-align:center; }
.burger{ display:none; width:2.6rem; height:2.6rem; background:none; border:0; cursor:pointer; flex-direction:column; justify-content:center; gap:5px; }
.burger span{ display:block; height:2px; background:var(--ink); transition:transform var(--t-hover), opacity var(--t-hover); }
@media (max-width:900px){
  .nav-menu{ position:fixed; inset:0; top:0; background:var(--paper); flex-direction:column; justify-content:center; padding:2rem var(--gutter); gap:1.2rem; transform:translateY(-102%); transition:transform 320ms var(--ease); z-index:49;
    -webkit-mask:linear-gradient(#000,#000) 0 0 / 100% calc(100% - 4rem) no-repeat, url(../images/paper/tear-bottom.webp) bottom / 100% 4rem no-repeat;
            mask:linear-gradient(#000,#000) 0 0 / 100% calc(100% - 4rem) no-repeat, url(../images/paper/tear-bottom.webp) bottom / 100% 4rem no-repeat; }
  .nav-menu.active{ transform:none; }
  .nav-menu .nav-link{ font-family:var(--font-display); font-size:2.2rem; letter-spacing:0; }
  .burger{ display:flex; z-index:51; }
  .burger.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .burger.active span:nth-child(2){ opacity:0; }
  .burger.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .header .wrap{ gap:.8rem; }
}

/* ---------- pied de page arraché ---------- */
.footer{ position:relative; background:var(--ink); color:var(--paper); margin-top:calc(-1 * var(--tear-h)); padding-top:calc(var(--tear-h) + 3rem); padding-bottom:3rem; z-index:2;
  -webkit-mask:url(../images/paper/tear-top.webp) top center / 100% var(--tear-h) no-repeat, linear-gradient(#000,#000) 0 var(--tear-h) / 100% calc(100% - var(--tear-h)) no-repeat;
          mask:url(../images/paper/tear-top.webp) top center / 100% var(--tear-h) no-repeat, linear-gradient(#000,#000) 0 var(--tear-h) / 100% calc(100% - var(--tear-h)) no-repeat; }
.footer a{ text-decoration:none; }
.footer a:hover{ color:var(--sakura); }
.footer__word{ font-family:var(--font-display); font-size:clamp(3rem, 12vw, 13rem); line-height:.82; text-transform:uppercase; letter-spacing:-.01em; margin:0 0 2rem; color:var(--paper); opacity:.96; }
.footer__grid{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:var(--gutter); }
.footer__col h3{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--lavis-on-ink); margin:0 0 .8rem; font-weight:500; }
.footer__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.footer__bottom{ margin-top:2.5rem; padding-top:1.2rem; border-top:1px solid var(--rule-on-ink); display:flex; flex-wrap:wrap; gap:.6rem 2rem; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--lavis-on-ink); }
.footer__bottom p{ margin:0; }
@media (max-width:900px){ .footer__grid > *{ grid-column:span 6 !important; } }
@media (max-width:640px){ .footer__grid > *{ grid-column:span 12 !important; } }

/* ---------- révélation à l'entrée, une seule fois ---------- */
.js .reveal{ opacity:0; transform:translateY(14px); transition:opacity var(--t-enter) var(--ease), transform var(--t-enter) var(--ease); transition-delay:calc(var(--i, 0) * 50ms); }
.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ============================================================
   PAGES ÉDITORIALES — vocabulaire partagé
   Monté ici depuis le <style> de index.html : .steps et .stats y
   étaient enfermés, donc inutilisables par les 13 autres pages.
   Le système interdit « trois cartes à icône ronde » et « une icône
   collée à chaque titre » : ces blocs portent le contenu par la
   typographie et le filet, pas par des pictogrammes.
   ============================================================ */

/* suite numérotée — 1. TITRE + description */
.steps{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gutter); margin:0 0 clamp(2.5rem, 5vw, 4rem); padding:0; list-style:none; }
.steps li{ border-top:2px solid var(--fg); padding-top:1rem; }
.steps .n{ font-family:var(--font-mono); font-weight:700; color:var(--seal); font-size:1rem; display:block; margin-bottom:.6rem; }
.steps h3{ margin:0 0 .35rem; font-family:var(--font-display); text-transform:uppercase; font-size:1.2rem; line-height:1; }
.steps p{ margin:0; color:var(--muted); font-size:.95rem; }
.steps--long{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.steps--5{ grid-template-columns:repeat(5, minmax(0,1fr)); }
@media (max-width:1100px){ .steps--5{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
/* suite verticale : la même liste quand elle tient dans une colonne étroite */
.steps--stack{ grid-template-columns:1fr; gap:0; margin:0; }
.steps--stack li{ border-top:1px solid var(--line); padding:.75rem 0 .35rem; }
.steps--stack .n{ margin-bottom:.2rem; }
.steps--stack h3{ font-size:1rem; }

/* chiffres */
.stats{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gutter); }
.stat{ border-top:2px solid var(--fg); padding-top:1rem; }
.stat .v{ font-family:var(--font-display); font-size:clamp(2.8rem, 5vw, 4.6rem); line-height:.9; font-variant-numeric:tabular-nums; }
.stat .v.is-seal{ color:var(--seal); }
.stat .l{ font-family:var(--font-mono); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:.5rem; }

@media (max-width:900px){ .steps,.stats{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .steps,.stats,.steps--long{ grid-template-columns:1fr; } }

/* grille à bordures partagées — remplace les rangées de cartes à icône */
.items{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0; border-top:1px solid var(--line); }
.items > *{ border-bottom:1px solid var(--line); border-right:1px solid var(--line); padding:1.5rem 1.4rem 1.9rem; display:grid; gap:.35rem; align-content:start; }
.items > *:nth-child(4n){ border-right:0; }
.items .n{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.08em; color:var(--muted); }
.items h3{ margin:.15rem 0 .15rem; font-family:var(--font-display); text-transform:uppercase; font-size:1.05rem; line-height:1.05; }
.items p{ margin:0; color:var(--muted); font-size:.92rem; max-width:34ch; }
/* 2 et 3 colonnes : la bordure de droite tombe sur la dernière de chaque rangée */
.items--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.items--3 > *:nth-child(4n){ border-right:1px solid var(--line); }
.items--3 > *:nth-child(3n){ border-right:0; }
.items--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.items--2 > *:nth-child(4n){ border-right:1px solid var(--line); }
.items--2 > *:nth-child(2n){ border-right:0; }
/* une liste étiquette/valeur imbriquée dans une case : plus serrée, sans filet haut */
.deflist--tight{ margin-top:.5rem; }
.deflist--tight dt{ padding:.45rem 1rem .45rem 0; border-top:0; }
.deflist--tight dd{ padding:.45rem 0; border-top:0; font-size:.92rem; color:var(--muted); }

@media (max-width:900px){
  .items{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .items > *:nth-child(4n){ border-right:1px solid var(--line); }
  .items > *:nth-child(2n){ border-right:0; }
}
@media (max-width:560px){
  .items{ grid-template-columns:1fr; }
  .items > *{ border-right:0; }
}

/* étiquette / valeur — remplace les listes à crochets verts */
.deflist{ display:grid; grid-template-columns:auto 1fr; margin:0; }
.deflist dt{ font-family:var(--font-mono); font-size:.76rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); padding:.85rem 1.6rem .85rem 0; border-top:1px solid var(--line); white-space:nowrap; }
.deflist dd{ margin:0; padding:.85rem 0; border-top:1px solid var(--line); }
@media (max-width:560px){
  .deflist{ grid-template-columns:1fr; }
  .deflist dt{ padding-bottom:.1rem; }
  .deflist dd{ padding-top:.1rem; border-top:0; }
}

/* encadré de colonne latérale */
.panel{ border:1px solid var(--line); padding:1.6rem 1.4rem; display:grid; gap:.8rem; align-content:start; }
.panel h3{ margin:0; font-family:var(--font-display); text-transform:uppercase; font-size:1.1rem; line-height:1.05; }
.panel p{ margin:0; color:var(--muted); font-size:.94rem; }
.panel .note{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.panel--seal{ border-color:var(--seal); }

/* colonne latérale collante, seulement quand il y a la place */
@media (min-width:901px){ .sticky-col{ position:sticky; top:6rem; align-self:start; } }

/* liens de service connexe */
.related{ display:grid; gap:0; border-top:1px solid var(--line); }
.related a{ display:flex; align-items:center; gap:.8rem; padding:.9rem 0; border-bottom:1px solid var(--line); text-decoration:none; font-family:var(--font-mono); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; transition:padding-left var(--t-hover) var(--ease); }
.related a:hover{ padding-left:.6rem; }
.related a .icon{ color:var(--muted); }

/* ============================================================
   LISIBILITE MOBILE — plus gros ET plus gras
   ------------------------------------------------------------
   Mesure a 390 px : toute la couche « petite » de l'accueil etait en
   IBM Plex Mono graisse 400, entre 13,7 et 14,8 px — le bandeau qui defile,
   « Connexion », FR/EN, les annotations ( … ), les libelles de chiffres, les
   etiquettes de formulaire. Une mono etroite et claire, avec de
   l'interlettrage par-dessus : a cette taille elle pese bien moins qu'une
   sans-serif equivalente.

   ECART ASSUME au design system (qui prescrit .72-.85rem en 400-500) : il ne
   vaut que sous 640 px. Sur ordinateur la finesse de la mono fonctionne ; sur
   un telephone elle disparait.
   ============================================================ */
@media (max-width:640px){

  /* --- la mono : plus grande, franchement grasse, moins espacee --- */
  .mono,
  .tag,
  .sec-head .p,
  .items .n,
  .deflist dt,
  .field label,
  .panel .note,
  .stat .l,
  .footer__col h3,
  .footer__bottom,
  .related a,
  .ribbon__item,
  .topbar,
  .topbar .ticker-item,
  .topbar .top-link,
  .topbar .lang-btn,
  .nav-link,
  .price small,
  .combo .incl,
  .pin__hint{
    font-size:.88rem;
    font-weight:700;
    letter-spacing:.03em;
  }

  /* le numero de section, lui, mene la ligne */
  .sec-head .n{ font-size:1.05rem; font-weight:700; }

  /* --- les bandeaux qui defilent : c'est ce qui se lisait le moins --- */
  .topbar .wrap{ min-height:2.8rem; }
  .ribbon{ padding-block:.7rem; }

  /* --- titres --- */
  .sec-head .t{ font-size:1.45rem; }
  .items h3, .steps h3{ font-size:1.15rem; }
  .panel h3{ font-size:1.2rem; }

  /* --- texte courant --- */
  p, li, dd{ font-size:1.05rem; }
  .steps p, .items p, .deflist dd, .panel p{ font-size:1.02rem; }
  .lead{ font-size:1.2rem; line-height:1.5; }
  strong, b{ font-weight:700; }

  /* Les champs restent a 1rem minimum : sous ce seuil, iOS zoome. */
  .field input, .field select, .field textarea{ font-size:1rem; }

  /* --- les liens du menu plein ecran --- */
  .nav-menu .nav-link{ font-size:2.4rem; letter-spacing:0; }

  /* --- de la place dans l'en-tete ---
     Mesure a 390 px apres le passage en gras : les kanji de la marque
     s'etendaient de 169 a 186 px et .nav-actions demarrait a 174 — ils se
     CHEVAUCHAIENT. Les kanji sont decoratifs (aria-hidden) et le hero en
     porte deja une paire : on les retire du bandeau sur telephone. */
  .brand .k{ display:none; }
  .brand{ gap:.5rem; }
  .header .wrap{ gap:.5rem; }
  .nav-actions{ gap:.4rem; }
}

@media (max-width:560px){
  /* Le ruban du haut n'avait plus que 133 px pour defiler. Le lien
     « Connexion » sort : l'icone de compte de l'en-tete fait deja le travail,
     et elle est une cible tactile de 52 px. FR/EN reste, lui n'a pas
     d'equivalent ailleurs. */
  .topbar .links .top-link{ display:none; }
}

/* ---------- notifications de main.js : reprises dans le système ---------- */
.notif{ font-family:var(--font-text); }