/* Repris du guide (guide/fonts/polices.py) : Onest figée en instances statiques, DM Serif Display, Ms Madi. */
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/Onest-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/Onest-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/Onest-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/Onest-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("fonts/Onest-800-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/Onest-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/Onest-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/Onest-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/Onest-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("fonts/Onest-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Serif Display"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/DMSerifDisplay-400i-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Serif Display"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/DMSerifDisplay-400i-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/DMSerifDisplay-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/DMSerifDisplay-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Ms Madi"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/MsMadi-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Ms Madi"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/MsMadi-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: "Cherry Bomb One"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/CherryBombOne.woff2") format("woff2"); }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   Kylie · Japan, done right — le site (piste P1 « Heart charm », choisie par Arthur le 2026-10-16 :
   « un truc assez girly », plus de profondeur dans les fonds et les sections).
   Mobile d'abord : tout se compose à 390 px, puis s'étend (640, 960, 1200).
   Fonds : crème et blush en alternance (halos et festons pour la profondeur), chocolat pour l'offre et le pied.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  --creme: #FFF7F3; --blush: #FBE3EA; --blush-2: #F7D3DF; --rose: #F4A9C4; --framboise: #D7375F; --framboise-f: #B42A4E;
  --choco: #2E1E1B; --choco-2: #5A4540; --gris: #8A7570; --or: #C9A25A; --blanc: #FFFFFF; --filet: #F0DCD8;
  --titre: "DM Serif Display", Georgia, serif; --ui: "Onest", system-ui, -apple-system, sans-serif; --main: "Ms Madi", cursive;
  --gouttiere: 20px; --max: 1180px; --rayon: 22px; --ombre: 0 18px 40px -18px rgba(46, 30, 27, .32);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--creme); color: var(--choco); font: 400 16px/1.6 var(--ui); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--framboise); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

.conteneur { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gouttiere); }
.s { position: relative; padding: 72px 0; overflow: hidden; }
.s--blush { background: var(--blush); }
.s--choco { background: var(--choco); color: #fff; }
.s--creme { background: var(--creme); }
/* profondeur : halos doux et grain du papier (une seule texture, sur le blush) */
.s--blush::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: url("img/grain.png"); background-size: 220px; mix-blend-mode: multiply; }
.halo { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2px); z-index: 0; }
.halo--rose { background: radial-gradient(circle, rgba(247, 211, 223, .9) 0%, rgba(247, 211, 223, .35) 45%, rgba(247, 211, 223, 0) 70%); }
.halo--creme { background: radial-gradient(circle, rgba(255, 247, 243, .95) 0%, rgba(255, 247, 243, .4) 45%, rgba(255, 247, 243, 0) 70%); }
.halo--nuit { background: radial-gradient(circle, rgba(215, 55, 95, .35) 0%, rgba(215, 55, 95, .1) 45%, rgba(215, 55, 95, 0) 70%); }
.s > .conteneur { position: relative; z-index: 1; }
/* festons : le bord dentelé d'une section blush ou chocolat, comme un napperon */
.festons { position: absolute; left: 0; right: 0; height: 18px; z-index: 2; pointer-events: none;
  -webkit-mask: radial-gradient(circle at 12px 0, transparent 11px, #000 11.5px) 0 0 / 24px 18px repeat-x;
          mask: radial-gradient(circle at 12px 0, transparent 11px, #000 11.5px) 0 0 / 24px 18px repeat-x; }
.festons--haut { top: -1px; transform: scaleY(-1); }
.festons--bas { bottom: -1px; }
.festons.creme { background: var(--creme); } .festons.blush { background: var(--blush); } .festons.choco { background: var(--choco); }

/* ── Titres ───────────────────────────────────────────────────────────────────────────────────── */
.surtitre { display: inline-flex; align-items: center; gap: 8px; font: 800 12px/1.2 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--framboise); }
.surtitre::before { content: ""; width: 13px; height: 12px; flex: none; background: center / contain no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21C5 15.8 1.5 11.6 1.5 7 1.5 3.8 4 1.5 7 1.5c2.2 0 3.9 1.2 5 2.9 1.1-1.7 2.8-2.9 5-2.9 3 0 5.5 2.3 5.5 5.5 0 4.6-3.5 8.8-10.5 14Z' fill='%23D7375F'/%3E%3C/svg%3E"); }
.s--choco .surtitre { color: var(--rose); }
.h2 { font: 400 clamp(34px, 8.6vw, 54px)/1.02 var(--titre); letter-spacing: -.01em; margin-top: 12px; text-wrap: balance; }
.h2 em { color: var(--framboise); }
.s--choco .h2 em { color: var(--rose); }
.chapo { font-size: 17px; line-height: 1.55; color: var(--choco-2); margin-top: 14px; max-width: 620px; text-wrap: pretty; }
.s--choco .chapo { color: rgba(255, 255, 255, .82); }
.tete-s { position: relative; margin-bottom: 34px; }
.tete-s--centre { text-align: center; } .tete-s--centre .chapo { margin-left: auto; margin-right: auto; }
.main { font: 400 30px/1 var(--main); color: var(--framboise); }
.main--l { font-size: 42px; }

/* ── Boutons, pastilles, prix ─────────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 8px 8px 24px;
  border-radius: 99px; background: var(--framboise); color: #fff; font: 700 16px/1.1 var(--ui); text-decoration: none; border: 0; cursor: pointer;
  box-shadow: 0 12px 26px -12px rgba(215, 55, 95, .75), inset 0 -2px 0 rgba(0, 0, 0, .12); transition: transform .2s, box-shadow .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(215, 55, 95, .8), inset 0 -2px 0 rgba(0, 0, 0, .12); }
.btn .rond { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--framboise); flex: none; }
.btn .rond svg { width: 17px; height: 17px; }
.btn--plein { width: 100%; }
.btn--fantome { background: transparent; color: var(--choco); box-shadow: inset 0 0 0 1.5px var(--choco); padding: 8px 24px; }
.btn--fantome:hover { box-shadow: inset 0 0 0 1.5px var(--choco), 0 10px 22px -14px rgba(46, 30, 27, .5); }
.btn--blanc { background: #fff; color: var(--choco); box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .5); }
.btn--blanc .rond { background: var(--framboise); color: #fff; }
.prix-rond { position: relative; width: 98px; height: 98px; border-radius: 50%; background: var(--framboise); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-8deg);
  box-shadow: 0 14px 26px -12px rgba(46, 30, 27, .55); flex: none; }
.prix-rond::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .8); }
.prix-rond small { font: 800 9.5px/1 var(--ui); letter-spacing: .16em; }
.prix-rond b { font: 400 34px/1 var(--titre); margin-top: 3px; }
.puce { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 11px; border-radius: 99px; background: #fff;
  font: 700 12px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--filet); }
.puce svg { width: 12px; height: 12px; color: var(--framboise); }
.coeur-ico { width: 1em; height: 1em; display: inline-block; vertical-align: -.12em; }
.provisoire { display: inline-block; font: 600 11px/1.3 var(--ui); color: var(--gris); }
.s--choco .provisoire { color: rgba(255, 255, 255, .6); }

/* ── En-tête ───────────────────────────────────────────────────────────────────────────────────── */
.entete { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .25s, box-shadow .25s; }
.entete__in { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.entete__logo { display: block; height: 46px; }
.entete__logo img { height: 100%; width: auto; }
.entete__logo .sur-fonce { display: block; } .entete__logo .sur-clair { display: none; }
.entete__nav { display: none; }
.entete__droite { display: flex; align-items: center; gap: 10px; }
.entete__mini { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 99px; background: rgba(255, 255, 255, .95);
  color: var(--choco); font: 700 14px/1 var(--ui); text-decoration: none; box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .45); }
.entete__burger { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .18); display: grid; place-items: center; cursor: pointer; color: #fff; }
.entete__burger svg { width: 22px; height: 22px; }
.entete.solide { background: rgba(255, 247, 243, .94); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  box-shadow: 0 1px 0 var(--filet); }
.entete.solide .sur-fonce { display: none; } .entete.solide .sur-clair { display: block; }
.entete.solide .entete__burger { background: var(--blush); color: var(--choco); }
.entete.solide .entete__mini { background: var(--framboise); color: #fff; }
.menu { position: fixed; inset: 0; z-index: 60; background: var(--creme); display: flex; flex-direction: column; padding: 18px var(--gouttiere) 28px;
  transform: translateY(-102%); transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
.menu.ouvert { transform: none; }
.menu__haut { display: flex; justify-content: space-between; align-items: center; }
.menu__haut img { height: 46px; width: auto; }
.menu__fermer { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--blush); display: grid; place-items: center; cursor: pointer; }
.menu__fermer svg { width: 20px; height: 20px; }
.menu ul { margin-top: 34px; display: grid; gap: 4px; }
.menu li a { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; border-bottom: 1px dashed var(--or);
  font: 400 30px/1.1 var(--titre); text-decoration: none; }
.menu li a span { font: 700 12px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.menu .btn { margin-top: auto; }
.menu__illu { position: absolute; right: -40px; bottom: 120px; width: 260px; opacity: .55; mix-blend-mode: multiply; pointer-events: none; }

/* ── Héros ─────────────────────────────────────────────────────────────────────────────────────── */
.heros { position: relative; min-height: 100svh; min-height: 780px; background: var(--choco); color: #fff; overflow: hidden; }
.heros__photo { position: absolute; inset: 0; }
.heros__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.heros__voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(46, 30, 27, .82) 0%, rgba(46, 30, 27, .58) 25%,
  rgba(46, 30, 27, 0) 42%, rgba(46, 30, 27, 0) 58%, rgba(46, 30, 27, .72) 76%, #2E1E1B 94%); }
.heros__in { position: relative; z-index: 2; min-height: inherit; display: flex; flex-direction: column; padding-top: 92px; padding-bottom: 28px; }
.heros .surtitre { color: var(--rose); }
.heros h1 { font: 400 clamp(46px, 13vw, 92px)/.95 var(--titre); letter-spacing: -.01em; margin-top: 12px; }
.heros h1 em { color: var(--rose); display: block; }
.heros__chapo { margin-top: 14px; font-size: 16.5px; line-height: 1.5; color: rgba(255, 255, 255, .9); max-width: 470px; }
.heros__bas { margin-top: auto; position: relative; }
.heros__livre { position: relative; height: 236px; margin: 0 0 18px auto; width: 230px; }
.heros__livre .feuille { position: absolute; border-radius: 5px; overflow: hidden; box-shadow: 0 18px 30px -10px rgba(0, 0, 0, .55); background: #fff; }
.heros__livre .feuille img { width: 100%; height: 100%; object-fit: cover; }
.heros__livre .f1 { width: 128px; height: 181px; left: 100px; top: 32px; transform: rotate(10deg); }
.heros__livre .f2 { width: 128px; height: 181px; left: 58px; top: 16px; transform: rotate(3deg); }
.heros__livre .f3 { width: 136px; height: 192px; left: 0; top: 8px; transform: rotate(-6deg); }
.heros__prix { position: absolute; left: -96px; top: 60px; }
.heros__feuilleter { position: absolute; right: 0; bottom: -6px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
  border-radius: 99px; background: rgba(255, 255, 255, .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #fff; font: 600 13px/1 var(--ui); text-decoration: none; }
.heros .btn--plein { margin-top: 6px; }
.preuve-ligne { display: flex; align-items: center; gap: 10px; margin-top: 14px; font: 500 14px/1.3 var(--ui); color: rgba(255, 255, 255, .92); }
.preuve-ligne img { width: 26px; height: 26px; border-radius: 7px; }
.preuve-ligne b { font-weight: 800; }
.heros__collage { display: none; }

/* ── Bande de preuves (carte qui chevauche le héros) ──────────────────────────────────────────── */
.preuves { position: relative; z-index: 3; margin-top: -28px; }
.preuves__carte { background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre); padding: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.preuves__item { display: flex; flex-direction: column; gap: 2px; padding: 4px 2px; }
.preuves__item b { font: 400 30px/1 var(--titre); color: var(--choco); }
.preuves__item b em { color: var(--framboise); font-style: normal; }
.preuves__item span { font-size: 13px; line-height: 1.35; color: var(--gris); }
.preuves__item .appi { width: 22px; height: 22px; border-radius: 6px; margin-bottom: 6px; }
.preuves__source { grid-column: 1 / -1; font-size: 11.5px; color: var(--gris); border-top: 1px dashed var(--or); padding-top: 10px; }

/* ── Ce qu'il y a dedans ───────────────────────────────────────────────────────────────────────── */
.carrousel { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: 6px var(--gouttiere) 18px;
  margin: 0 calc(-1 * var(--gouttiere)); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.carrousel::-webkit-scrollbar { display: none; }
.carrousel > * { scroll-snap-align: start; flex: 0 0 82%; min-width: 0; }
.chap { position: relative; background: #fff; border-radius: var(--rayon); overflow: hidden; box-shadow: 0 1px 0 var(--filet), 0 14px 30px -22px rgba(46, 30, 27, .45);
  display: flex; flex-direction: column; }
.chap__illu { position: relative; height: 170px; background: var(--creme); overflow: hidden; }
.chap__illu img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.chap__num { position: absolute; left: 14px; top: 12px; width: 34px; height: 34px; border-radius: 50%; background: var(--framboise); color: #fff;
  display: grid; place-items: center; font: 400 17px/1 var(--titre); box-shadow: 0 6px 14px -6px rgba(215, 55, 95, .8); }
.chap__corps { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.chap__corps h3 { font: 400 24px/1.1 var(--titre); }
.chap__corps p { font-size: 14.5px; line-height: 1.5; color: var(--choco-2); }
.chap__pages { margin-top: auto; padding-top: 8px; font: 800 11px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--framboise-f); }
.sticker { position: absolute; z-index: 2; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(46, 30, 27, .18)); }

/* ── Itinéraires ───────────────────────────────────────────────────────────────────────────────── */
.it__onglets { display: inline-flex; gap: 6px; padding: 6px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px var(--filet); margin-bottom: 22px; }
.it__onglets button { border: 0; background: transparent; height: 44px; padding: 0 18px; border-radius: 99px; font: 700 15px/1 var(--ui); cursor: pointer; color: var(--choco-2); }
.it__onglets button[aria-selected="true"] { background: var(--framboise); color: #fff; box-shadow: 0 8px 18px -10px rgba(215, 55, 95, .8); }
.it__grille { display: grid; gap: 18px; }
.it__carte { position: relative; border-radius: var(--rayon); overflow: hidden; background: #fff; box-shadow: 0 1px 0 var(--filet), var(--ombre); }
.it__carte svg { display: block; width: 100%; height: auto; }
.it__jours { display: grid; gap: 10px; }
.it__jour { display: grid; grid-template-columns: 68px 1fr; gap: 12px; align-items: start; padding: 12px 14px; border-radius: 16px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--filet); }
.it__jour .j { display: grid; place-items: center; height: 30px; border-radius: 99px; background: var(--blush); color: var(--framboise-f); font: 800 11.5px/1 var(--ui); letter-spacing: .06em; }
.it__jour b { font: 400 19px/1.15 var(--titre); display: block; }
.it__jour span { font-size: 14px; color: var(--choco-2); line-height: 1.45; }
.it__jour.verrou { position: relative; color: transparent; }
.it__jour.verrou > * { filter: blur(5px); user-select: none; }
.it__note { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--choco); color: #fff; font-size: 14px; line-height: 1.4; }
.it__note svg { width: 20px; height: 20px; flex: none; color: var(--rose); }

/* ── Feuilleter : les vraies pages du guide ───────────────────────────────────────────────────── */
.feuil__rail { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: 8px var(--gouttiere) 22px;
  margin: 0 calc(-1 * var(--gouttiere)); scrollbar-width: none; }
.feuil__rail::-webkit-scrollbar { display: none; }
.feuil__page { flex: 0 0 72%; scroll-snap-align: center; margin: 0; }
.feuil__page img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 22px 40px -22px rgba(46, 30, 27, .6), 0 0 0 1px rgba(46, 30, 27, .06); background: #fff; }
.feuil__page figcaption { margin-top: 10px; font-size: 13px; color: var(--gris); text-align: center; }
.feuil__curseur { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
.feuil__curseur button { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; background: var(--blush-2); cursor: pointer; }
.feuil__curseur button.actif { background: var(--framboise); width: 26px; border-radius: 99px; }

/* ── Vous me l'avez demandé : commentaires TikTok ──────────────────────────────────────────────── */
.dem__grille { display: grid; gap: 24px; align-items: start; }
.tel { position: relative; width: 300px; max-width: 100%; margin: 0 auto; aspect-ratio: 402 / 820; border-radius: 44px; background: #111;
  padding: 10px; box-shadow: 0 30px 60px -30px rgba(46, 30, 27, .7); }
.tel__ecran { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: #000; }
.tel__video { position: absolute; inset: 0 0 46% 0; }
.tel__video img { width: 100%; height: 100%; object-fit: cover; }
.tel__video .vues { position: absolute; left: 12px; bottom: 10px; color: #fff; font: 700 12px/1.2 var(--ui); text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.tel__feuille { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; background: #fff; border-radius: 18px 18px 0 0; padding: 12px 12px 0;
  color: #161823; font-family: -apple-system, "SF Pro Text", var(--ui); }
.tel__feuille h4 { text-align: center; font: 700 12.5px/1 inherit; margin-bottom: 10px; }
.com { display: grid; grid-template-columns: 30px 1fr 30px; gap: 8px; margin-bottom: 11px; align-items: start; }
.com img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.com p { font-size: 12px; line-height: 1.35; }
.com small { display: block; font-size: 10.5px; color: #8a8b91; margin-top: 3px; }
.com .like { text-align: center; font-size: 10px; color: #8a8b91; }
.com .like svg { width: 15px; height: 15px; display: block; margin: 0 auto 2px; }
.rep { display: grid; gap: 12px; }
.rep__item { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; padding: 14px 16px; border-radius: 18px; background: #fff;
  box-shadow: 0 1px 0 var(--filet), 0 12px 24px -20px rgba(46, 30, 27, .5); }
.rep__item .ico { width: 44px; height: 44px; border-radius: 14px; background: var(--blush); color: var(--framboise); display: grid; place-items: center; }
.rep__item .ico svg { width: 22px; height: 22px; }
.rep__item q { display: block; font: 600 14px/1.35 var(--ui); quotes: "“" "”"; }
.rep__item span { display: block; margin-top: 4px; font-size: 14px; color: var(--choco-2); line-height: 1.45; }
.rep__item span b { color: var(--framboise-f); }



/* ── À propos ──────────────────────────────────────────────────────────────────────────────────── */
.ap__grille { display: grid; gap: 26px; }
.ap__portrait { position: relative; width: 100%; max-width: 380px; margin: 0 auto; }
.ap__portrait > .ap__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 200px 200px 28px 28px; box-shadow: var(--ombre); }
.ap__portrait .charme { position: absolute; right: 8px; top: 30%; width: 48px; }
.ap__portrait .signature { position: absolute; left: -10px; bottom: -34px; width: 170px; height: auto; }
.ap__texte p + p { margin-top: 12px; }
.ap__texte p { font-size: 16.5px; line-height: 1.65; color: var(--choco-2); }
.ap__texte p b { color: var(--choco); }
.ap__chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }
.ap__chiffres div { padding: 12px; border-radius: 16px; background: var(--blush); }
.ap__chiffres b { display: block; font: 400 28px/1 var(--titre); color: var(--framboise); }
.ap__chiffres span { display: block; font-size: 12.5px; line-height: 1.35; color: var(--choco-2); margin-top: 4px; }
.reseaux { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.reseau { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 99px; background: #fff; text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--filet); }
.reseau img { width: 34px; height: 34px; border-radius: 9px; }
.reseau b { font: 700 15px/1.1 var(--ui); display: block; }
.reseau span { font-size: 12.5px; color: var(--gris); }

/* ── L'eSIM qu'elle utilise (son partenaire) ──────────────────────────────────────────────────── */
.es__carte { position: relative; border-radius: 28px; background: #fff; box-shadow: var(--ombre); padding: 22px 18px; overflow: hidden; }
.es__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.es__tete img { height: 34px; width: auto; }
.es__tag { font: 800 10.5px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--framboise-f); background: var(--blush); padding: 6px 9px; border-radius: 7px; }
.es__carte h3 { font: 400 28px/1.1 var(--titre); margin-top: 16px; }
.es__carte > p { font-size: 15.5px; line-height: 1.55; color: var(--choco-2); margin-top: 8px; }
.es__tuiles { display: grid; gap: 10px; margin-top: 18px; }
.es__tuile { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; background: var(--creme); }
.es__tuile .ico { width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(145deg, #F27A9C, #D7375F); color: #fff; display: grid; place-items: center; }
.es__tuile .ico svg { width: 22px; height: 22px; }
.es__tuile b { display: block; font: 700 15px/1.2 var(--ui); }
.es__tuile span { font-size: 13.5px; color: var(--choco-2); }
.es__bas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.code { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; border: 1.5px dashed var(--framboise); background: var(--blush);
  font: 800 15px/1 var(--ui); letter-spacing: .14em; }
.code small { font: 600 12px/1 var(--ui); letter-spacing: 0; color: var(--framboise-f); }
.es__mention { font-size: 12px; color: var(--gris); margin-top: 12px; }

/* ── L'offre ──────────────────────────────────────────────────────────────────────────────────── */
.of__carte { position: relative; border-radius: 30px; background: var(--creme); color: var(--choco); overflow: hidden; box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .8); }
.of__haut { position: relative; padding: 26px 20px 22px; background: linear-gradient(160deg, #F7D3DF, #FBE3EA 60%); text-align: center; }
.of__haut .main { font-size: 34px; }
.of__prix { font: 400 92px/.9 var(--titre); color: var(--framboise); margin-top: 6px; }
.of__prix small { font: 700 14px/1 var(--ui); color: var(--choco-2); display: block; margin-top: 10px; letter-spacing: .04em; }
.of__livre { position: relative; width: 210px; height: 220px; margin: 18px auto 0; }
.of__livre .feuille { position: absolute; border-radius: 5px; overflow: hidden; box-shadow: 0 18px 30px -12px rgba(46, 30, 27, .55); background: #fff; }
.of__livre .feuille img { width: 100%; height: 100%; object-fit: cover; }
.of__corps { padding: 22px 20px 24px; }
.of__liste { display: grid; gap: 10px; }
.of__liste li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; }
.of__liste .ico { width: 40px; height: 40px; border-radius: 12px; background: var(--blush); color: var(--framboise); display: grid; place-items: center; }
.of__liste .ico svg { width: 20px; height: 20px; }
.of__liste b { display: block; font: 700 15.5px/1.25 var(--ui); }
.of__liste span { font-size: 14px; color: var(--choco-2); line-height: 1.45; }
.of__rassure { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-top: 14px; font: 600 12.5px/1.3 var(--ui); color: var(--gris); }
.of__rassure span { display: inline-flex; align-items: center; gap: 6px; }
.of__rassure svg { width: 14px; height: 14px; color: var(--framboise); }

/* ── FAQ ──────────────────────────────────────────────────────────────────────────────────────── */
.faq { display: grid; gap: 10px; }
.faq details { border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--filet); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; font: 700 16px/1.35 var(--ui); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--blush); color: var(--framboise); display: grid; place-items: center; transition: transform .2s; }
.faq summary .plus svg { width: 15px; height: 15px; }
.faq details[open] summary .plus { transform: rotate(45deg); }
.faq details p { padding: 0 18px 18px; font-size: 15px; line-height: 1.6; color: var(--choco-2); }

/* ── Appel final ──────────────────────────────────────────────────────────────────────────────── */
.final { text-align: center; }
.final__illu { width: min(520px, 100%); margin: 0 auto -10px; mix-blend-mode: multiply; }
.final .h2 { max-width: 640px; margin-left: auto; margin-right: auto; }
.final .btn { margin-top: 22px; }

/* ── Pied de page ─────────────────────────────────────────────────────────────────────────────── */
.pied { position: relative; background: var(--choco); color: #fff; padding: 60px 0 calc(110px + env(safe-area-inset-bottom)); overflow: hidden; }
.pied__logo { width: 220px; }
.pied__phrase { margin-top: 10px; font-size: 15px; color: rgba(255, 255, 255, .78); max-width: 360px; }
.pied__guide { display: grid; grid-template-columns: 74px 1fr; gap: 14px; align-items: center; margin-top: 26px; padding: 14px; border-radius: 20px;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.pied__guide img { width: 74px; height: 105px; object-fit: cover; border-radius: 4px; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .7); }
.pied__guide b { font: 400 20px/1.15 var(--titre); display: block; }
.pied__guide .btn { margin-top: 10px; min-height: 44px; font-size: 14px; padding-left: 18px; }
.pied__guide .btn .rond { width: 30px; height: 30px; }
.pied__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 34px; }
.pied__cols h4 { font: 800 11px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--rose); margin-bottom: 12px; }
.pied__cols a { display: block; padding: 6px 0; color: rgba(255, 255, 255, .86); text-decoration: none; font-size: 15px; }
.pied__cols a:hover { color: #fff; text-decoration: underline; }
.pied__reseaux { display: flex; gap: 10px; margin-top: 28px; }
.pied__reseaux a { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 99px; background: rgba(255, 255, 255, .08);
  color: #fff; text-decoration: none; font: 600 14px/1 var(--ui); }
.pied__reseaux img { width: 30px; height: 30px; border-radius: 8px; }
.pied__bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 34px; padding-top: 18px;
  border-top: 1px dashed rgba(201, 162, 90, .6); font-size: 12.5px; color: rgba(255, 255, 255, .6); }
.pied__haut { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font: 700 13px/1 var(--ui); }
.pied__haut svg { width: 16px; height: 16px; transform: rotate(-90deg); }
.pied__geant { position: absolute; right: -30px; bottom: 40px; width: 420px; opacity: .06; pointer-events: none; }

/* ── Barre d'achat fixe ───────────────────────────────────────────────────────────────────────── */
.barre { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 247, 243, .96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 -1px 0 var(--filet), 0 -16px 30px -24px rgba(46, 30, 27, .5);
  display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; transform: translateY(110%); transition: transform .3s; }
.barre.visible { transform: none; }
.barre img { width: 44px; height: 62px; object-fit: cover; border-radius: 3px; box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .5); }
.barre b { display: block; font: 400 17px/1.1 var(--titre); }
.barre span { font-size: 12.5px; color: var(--gris); }
.barre .btn { min-height: 46px; padding: 6px 6px 6px 18px; font-size: 15px; }
.barre .btn .rond { width: 32px; height: 32px; }

/* ── Apparitions ──────────────────────────────────────────────────────────────────────────────── */
.apparait { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.apparait.vu { opacity: 1; transform: none; }
.carrousel .apparait, .feuil__rail .apparait { opacity: 1; transform: none; }

/* ═══════════════════════════════ 640 px et plus ═══════════════════════════════ */
@media (min-width: 640px) {
  :root { --gouttiere: 28px; }
  .s { padding: 92px 0; }
  .carrousel > * { flex-basis: 46%; }
  .feuil__page { flex-basis: 40%; }
  .preuves__carte { grid-template-columns: repeat(4, 1fr); padding: 22px 26px; }
  .es__tuiles { grid-template-columns: repeat(3, 1fr); }
  .es__tuile { grid-template-columns: 1fr; }
  .barre { left: 50%; right: auto; bottom: 18px; width: 560px; margin-left: -280px; border-radius: 22px; padding: 10px 12px; }
  .pied__cols { grid-template-columns: repeat(3, 1fr); }
}
/* ═══════════════════════════════ 960 px et plus ═══════════════════════════════ */
@media (min-width: 960px) {
  .entete__in { height: 76px; }
  .entete__logo { height: 54px; }
  .entete__burger { display: none; }
  .entete__nav { display: flex; gap: 30px; }
  .entete__nav a { font: 600 15px/1 var(--ui); text-decoration: none; color: #fff; opacity: .92; }
  .entete.solide .entete__nav a { color: var(--choco); }
  .entete__nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
  .entete__mini { height: 46px; padding: 0 20px; }
  /* héros d'ordinateur : crème, halos, texte à gauche, collage de ses photos et le guide à droite */
  .heros { background: var(--creme); color: var(--choco); min-height: 820px; }
  .heros__photo, .heros__voile { display: none; }
  .heros .surtitre { color: var(--framboise); }
  .heros h1 em { color: var(--framboise); }
  .heros__chapo { color: var(--choco-2); font-size: 19px; max-width: 520px; }
  .heros__in { padding-top: 150px; padding-bottom: 80px; display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 30px; align-items: start; }
  .heros__texte { grid-column: 1; }
  .heros__bas { grid-column: 1; margin-top: 30px; }
  .heros__livre, .heros__feuilleter { display: none; }
  .heros .btn--plein { width: auto; }
  .heros__ctas { display: flex; gap: 14px; align-items: center; }
  .preuve-ligne { color: var(--choco); }
  .heros__collage { display: block; grid-column: 2; grid-row: 1 / span 2; position: relative; height: 640px; }
  .heros__collage .ph { position: absolute; border-radius: 28px; overflow: hidden; box-shadow: var(--ombre); background: #eadad5; }
  .heros__collage .ph img { width: 100%; height: 100%; object-fit: cover; }
  .heros__collage .p1 { left: 170px; top: 0; width: 330px; height: 500px; z-index: 2; }
  .heros__collage .p2 { left: 20px; top: 90px; width: 190px; height: 270px; transform: rotate(-5deg); z-index: 1; }
  .heros__collage .p3 { right: -10px; top: 400px; width: 180px; height: 240px; transform: rotate(5deg); z-index: 3; }
  .heros__collage .livre { position: absolute; left: 0; top: 330px; width: 300px; height: 300px; z-index: 4; }
  .heros__collage .livre .feuille { position: absolute; border-radius: 5px; overflow: hidden; box-shadow: 0 22px 36px -14px rgba(46, 30, 27, .6); background: #fff; }
  .heros__collage .livre .feuille img { width: 100%; height: 100%; object-fit: cover; }
  .heros__collage .livre .f1 { width: 158px; height: 224px; left: 120px; top: 34px; transform: rotate(9deg); }
  .heros__collage .livre .f2 { width: 158px; height: 224px; left: 66px; top: 18px; transform: rotate(2deg); }
  .heros__collage .livre .f3 { width: 168px; height: 238px; left: 0; top: 8px; transform: rotate(-6deg); }
  .heros__collage .prix-rond { position: absolute; left: -64px; top: 520px; z-index: 5; }
  .heros__collage .charme { position: absolute; left: 395px; top: -30px; width: 54px; z-index: 6; }
  .heros__collage .sticker { z-index: 5; }
  .heros__halo1 { width: 760px; height: 760px; right: -200px; top: -120px; }
  .heros__halo2 { width: 520px; height: 520px; left: -220px; bottom: -220px; }
  .preuves { margin-top: -64px; }
  .carrousel { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; margin: 0; padding: 0; gap: 18px; }
  .carrousel > * { flex: none; }
  .it__grille { grid-template-columns: 1.25fr 1fr; gap: 28px; align-items: start; }
  .feuil__rail { display: grid; grid-template-columns: repeat(6, 1fr); overflow: visible; margin: 0; padding: 8px 0 0; }
  .feuil__page { flex: none; }
  .feuil__page:nth-child(odd) { transform: rotate(-1.5deg); } .feuil__page:nth-child(even) { transform: rotate(1.5deg) translateY(14px); }
  .feuil__curseur { display: none; }
  .dem__grille { grid-template-columns: 340px 1fr; gap: 44px; align-items: center; }
  .ap__grille { grid-template-columns: 420px 1fr; gap: 54px; align-items: start; }
  .of__carte { display: grid; grid-template-columns: 1fr 1.1fr; max-width: 980px; margin: 0 auto; }
  .of__haut { display: flex; flex-direction: column; justify-content: center; padding: 40px; }
  .of__corps { padding: 38px 40px; }
  .faq { grid-template-columns: 1fr 1fr; align-items: start; }
  .pied__grille { display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; }
  .pied__cols { margin-top: 0; }
  .es__carte { padding: 34px 36px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 30px; align-items: center; }
  .es__tuiles { grid-template-columns: 1fr; margin-top: 0; }
  .es__tuile { grid-template-columns: 46px 1fr; }
}
@media (min-width: 1200px) {
  .heros h1 { font-size: 96px; }
}

/* ── Lien en bio (/links/) ────────────────────────────────────────────────────────────────────── */
.page-liens { background: var(--creme); }
.lb { position: relative; min-height: 100svh; overflow: hidden; padding: 64px var(--gouttiere) 40px; }
.lb__in { position: relative; z-index: 1; max-width: 440px; margin: 0 auto; text-align: center; }
.lb__av { width: 104px; height: 104px; border-radius: 50%; overflow: hidden; margin: 0 auto; box-shadow: 0 0 0 4px #fff, 0 0 0 5.5px var(--rose), var(--ombre); }
.lb__av img { width: 100%; height: 100%; object-fit: cover; }
.lb__logo { width: 170px; margin: 10px auto 0; }
.lb__acc { font-size: 16px; line-height: 1.45; color: var(--choco-2); margin-top: 8px; }
.lb__liens { display: grid; gap: 12px; margin-top: 22px; text-align: left; }
.lb__lien { display: grid; grid-template-columns: 56px 1fr 20px; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 20px; background: #fff;
  text-decoration: none; box-shadow: 0 1px 0 var(--filet), 0 10px 22px -18px rgba(46, 30, 27, .5); transition: transform .2s; }
.lb__lien:hover { transform: translateY(-2px); }
.lb__lien.p { background: var(--framboise); color: #fff; box-shadow: 0 14px 28px -14px rgba(215, 55, 95, .8); }
.lb__lien .vis { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; background: var(--blush); }
.lb__lien .vis img { width: 100%; height: 100%; object-fit: cover; }
.lb__lien .vis.livret { height: 76px; border-radius: 4px; box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .5); }
.lb__lien b { display: block; font: 700 16px/1.2 var(--ui); }
.lb__lien span { display: block; font-size: 13px; line-height: 1.35; opacity: .8; margin-top: 2px; }
.lb__lien .tag { display: inline-block; font: 800 10px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; background: var(--blush); color: var(--framboise-f);
  padding: 5px 7px; border-radius: 6px; margin-top: 6px; opacity: 1; }
.lb__lien > svg { width: 18px; height: 18px; }
.lb__res { display: flex; justify-content: center; gap: 14px; margin-top: 24px; }
.lb__res img { width: 40px; height: 40px; border-radius: 11px; }
.lb__pied { margin-top: 26px; font: 700 13px/1 var(--ui); color: var(--gris); letter-spacing: .04em; }
.page-simple .s { min-height: 60vh; }
[hidden] { display: none !important; }

/* héros mobile : le chapeau passe sous le guide pour laisser son visage libre */
.heros__texte .heros__chapo { display: none; }
.heros__chapo--bas { margin: 0 0 14px; font-size: 15.5px; color: rgba(255, 255, 255, .92); }
.heros__second { display: none; }
@media (min-width: 960px) {
  .heros__texte .heros__chapo { display: block; }
  .heros__chapo--bas { display: none; }
  .heros__second { display: inline-flex; }
}

/* téléphone : les stickers des titres montent dans la marge haute de la section (jamais sur un mot). Les listes
   s'empilent : Arthur ne veut pas de cartes qui défilent à l'horizontale (2026-10-17). */
@media (max-width: 639px) {
  .tete-s .sticker { top: -62px !important; right: 2px !important; width: 62px !important; }
}

/* offre : l'éventail du livre (les feuilles n'avaient pas de taille hors du héros) */
.of__livre { width: 232px; height: 232px; }
.of__livre .f1 { width: 140px; height: 198px; left: 84px; top: 22px; transform: rotate(9deg); }
.of__livre .f2 { width: 140px; height: 198px; left: 46px; top: 12px; transform: rotate(2deg); }
.of__livre .f3 { width: 150px; height: 212px; left: 2px; top: 4px; transform: rotate(-6deg); }
.s--choco .of__carte .provisoire { color: var(--gris); }
/* eSIM : le hublot accroché au coin de la carte, hors du texte */
.es__cadre { position: relative; }
@media (min-width: 960px) {
  .of__livre { transform: scale(1.18); transform-origin: 50% 0; margin-bottom: 40px; }
}

/* ordinateur : le héros est clair, l'en-tête prend le logo encre et des liens foncés dès le haut de page */
@media (min-width: 960px) {
  .entete .entete__logo .sur-fonce { display: none; }
  .entete .entete__logo .sur-clair { display: block; }
  .entete .entete__nav a { color: var(--choco); }
  .entete .entete__mini { background: var(--framboise); color: #fff; }
}

/* eSIM : « My partner » sous le logo, le coin haut droit reste au hublot */
.es__carte .es__tag { display: inline-block; margin-top: 14px; }
.es__carte h3 { margin-top: 10px; }
/* À propos : la signature déborde sous le portrait, on lui laisse la place avant le texte */
.ap__portrait { margin-bottom: 46px; }
/* héros ordinateur : la pastille de prix à droite du guide, plus sur lui ni sur les boutons */
@media (min-width: 960px) {
  .heros__collage .prix-rond { left: 312px; top: 548px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   Refonte du 2026-10-16 (retours d'Arthur sur l'aperçu) : plus de festons (« le truc cranté en mode nappe, c'est moche »),
   le ruban de la couverture entre les sections, le bento eSIM de PlanJapan, des vraies pages du guide pour illustrer,
   des itinéraires sans carte, « Book my trip », un vrai iPhone, l'offre et le pied de page illustrés.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
.festons { display: none !important; }

/* ── ruban défilant ── */
.defile { position: relative; z-index: 4; margin: -6px -30px; padding: 13px 0; background: var(--framboise); color: #fff; transform: rotate(-1.6deg); overflow: hidden; }
.defile__piste { display: flex; align-items: center; gap: 20px; width: max-content; animation: defile 46s linear infinite; font: 800 13px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.defile__piste i { font-style: normal; color: var(--rose); }
@keyframes defile { to { transform: translateX(-33.333%); } }

/* ── pastille PlanJapan du héros ── */
.pj-pill { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 8px 16px 8px 10px; border-radius: 99px; background: #fff; color: var(--choco);
  text-decoration: none; font: 600 13.5px/1.2 var(--ui); box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .55); }
.pj-pill img { height: 24px; width: auto; } .pj-pill b { color: var(--framboise); }
.heros__fond { display: none; }

/* ── bento eSIM ── */
.bento__tete { display: grid; gap: 18px; margin-bottom: 26px; }
.bento__tete .tete-s { margin-bottom: 0; }
.bento__offre { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 16px; border-radius: 22px; background: #fff; box-shadow: var(--ombre); }
.bento__offre img { height: 30px; width: auto; }
.bento__offre .btn { grid-column: 1 / -1; width: 100%; }

/* ── ce qu'il y a dedans : une vraie page par partie ── */
.chap2 { display: flex; flex-direction: column; border-radius: 22px; background: #fff; box-shadow: 0 1px 0 var(--filet), var(--ombre); overflow: hidden; }
.chap2__page { position: relative; height: 230px; background: linear-gradient(160deg, var(--blush-2), var(--blush)); overflow: hidden; }
.chap2__page img { position: absolute; left: 50%; top: 22px; width: 64%; transform: translateX(-50%) rotate(-3deg); border-radius: 4px;
  box-shadow: 0 18px 30px -12px rgba(46, 30, 27, .55); transition: transform .3s; }
.chap2:hover .chap2__page img { transform: translateX(-50%) rotate(0) translateY(-6px); }
.chap2__corps { position: relative; padding: 18px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.chap2__num { position: absolute; right: 16px; top: -20px; width: 40px; height: 40px; border-radius: 50%; background: var(--framboise); color: #fff; display: grid; place-items: center;
  font: 400 20px/1 var(--titre); box-shadow: 0 0 0 4px #fff; }
.chap2__corps h3 { font: 400 24px/1.1 var(--titre); padding-right: 40px; }
.chap2__corps p { font-size: 14.5px; line-height: 1.5; color: var(--choco-2); }
.chap2--cta { justify-content: center; gap: 12px; padding: 26px 22px; background: var(--choco); color: #fff; }
.chap2--cta h3 { font: 400 30px/1.05 var(--titre); color: #fff; }
.chap2--cta .main { color: var(--rose); }

/* ── itinéraires sans carte : la ligne du trajet, puis les jours ── */
.it2 { display: grid; gap: 18px; }
.it2__route { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; padding: 18px 16px 16px; border-radius: 24px; background: #fff; box-shadow: 0 1px 0 var(--filet), var(--ombre);
  scrollbar-width: none; scroll-snap-type: x mandatory; }
.it2__route::-webkit-scrollbar { display: none; }
.it2__arret { flex: 0 0 96px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; scroll-snap-align: start; }
.it2__ph { width: 74px; height: 74px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--rose); margin-bottom: 6px; }
.it2__ph img { width: 100%; height: 100%; object-fit: cover; }
.it2__arret b { font: 400 18px/1.1 var(--titre); }
.it2__arret .nuits { display: inline-block; padding: 3px 9px; border-radius: 99px; background: var(--framboise); color: #fff; font: 800 10.5px/1.2 var(--ui); letter-spacing: .06em; text-transform: uppercase; }
.it2__arret small { font-size: 12px; color: var(--gris); line-height: 1.3; }
.it2__trajet { flex: 0 0 74px; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 22px; position: relative; }
.it2__trajet::before { content: ""; position: absolute; left: -8px; right: -8px; top: 15px; border-top: 2.5px dashed var(--rose); z-index: 0; }
.it2__trajet span { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--blush); color: var(--framboise); }
.it2__trajet span svg { width: 17px; height: 17px; }
.it2__trajet small { font: 700 10.5px/1.25 var(--ui); color: var(--choco-2); text-align: center; }
.it2__jours { display: grid; gap: 10px; }
.it2__jour { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; padding: 14px; border-radius: 18px; background: #fff; box-shadow: 0 1px 0 var(--filet), var(--ombre); }
.it2__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(145deg, #F27A9C, var(--framboise)); color: #fff; }
.it2__ico svg { width: 21px; height: 21px; }
.it2__jour .chip { display: inline-block; padding: 4px 10px; border-radius: 99px; background: var(--blush); color: var(--framboise-f); font: 800 11px/1.2 var(--ui); letter-spacing: .06em; text-transform: uppercase; }
.it2__jour b { display: block; font: 400 20px/1.15 var(--titre); margin-top: 6px; }
.it2__jour p { font-size: 14.5px; line-height: 1.45; color: var(--choco-2); margin-top: 2px; }
.it2__jour.verrou > :not(.it2__cadenas) { filter: blur(5px); user-select: none; }
.it2__cadenas { position: absolute; inset: 0; display: grid; place-items: center; }
.it2__cadenas { font: 800 12px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.it2__cadenas svg { width: 16px; height: 16px; }
.it2__jour.verrou .it2__cadenas { display: flex; justify-content: center; align-items: center; gap: 8px; }
.it2__jour.verrou .it2__cadenas::before { content: ""; position: absolute; inset: auto; width: 150px; height: 36px; border-radius: 99px; background: var(--choco); z-index: -1; }

/* ── Book my trip ── */
.ad { display: inline-block; font: 800 10px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--choco); padding: 3px 6px; border-radius: 4px; vertical-align: 2px; }
.bk { display: grid; gap: 12px; }
.bk__carte { display: grid; grid-template-columns: 46px 1fr; gap: 14px; padding: 16px; border-radius: 20px; background: #fff; box-shadow: 0 1px 0 var(--filet), var(--ombre); }
.bk__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--blush); color: var(--framboise); }
.bk__ico svg { width: 22px; height: 22px; }
.bk__carte b { font: 700 16.5px/1.2 var(--ui); } .bk__carte p { font-size: 14.5px; line-height: 1.45; color: var(--choco-2); margin-top: 4px; }
.bk__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bk__btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 99px; background: var(--framboise); color: #fff; text-decoration: none; font: 800 13.5px/1 var(--ui);
  box-shadow: 0 10px 20px -12px rgba(215, 55, 95, .8); }
.bk__btn svg { width: 15px; height: 15px; } .bk__btn--2 { background: #fff; color: var(--framboise-f); box-shadow: inset 0 0 0 2px var(--framboise); }
.bk__carte--pj { grid-template-columns: 1fr auto; align-items: center; text-decoration: none; color: inherit; background: var(--blush); box-shadow: inset 0 0 0 2px var(--framboise), var(--ombre); }
.bk__carte--pj img { grid-column: 1 / -1; height: 30px; width: auto; }

/* ── On me demande : vrai iPhone, réponses illustrées ── */
.dem__tel { position: relative; max-width: 320px; margin: 0 auto; }
.dem__tel > img:first-child { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(46, 30, 27, .28)); }
.rep2__liste { display: grid; gap: 12px; }
.rep2 { display: grid; grid-template-columns: 78px 1fr; gap: 14px; align-items: center; padding: 14px; border-radius: 20px; background: #fff; box-shadow: 0 1px 0 var(--filet), var(--ombre); }
.rep2__page { width: 78px; height: auto; border-radius: 4px; box-shadow: 0 10px 18px -10px rgba(46, 30, 27, .55); transform: rotate(-3deg); }
.rep2 q { display: block; font: 400 19px/1.2 var(--titre); quotes: "“" "”"; }
.rep2 p { font-size: 14px; line-height: 1.45; color: var(--choco-2); margin-top: 4px; }
.rep2__tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 10px; border-radius: 99px; background: var(--blush); color: var(--framboise-f); font: 800 11px/1 var(--ui); letter-spacing: .06em; text-transform: uppercase; }
.rep2__tag svg { width: 14px; height: 14px; }

/* ── l'offre : étiquette de prix, contenu en chiffres, illustration ── */

/* ── pied de page illustré, clair ── */
.pied2 { position: relative; background: var(--blush); color: var(--choco); padding: 0 0 calc(110px + env(safe-area-inset-bottom)); overflow: hidden; }
.pied2__grille { padding-top: 24px; }
.pied2__logo { width: 200px; }
.pied2__phrase { margin-top: 10px; font-size: 15px; color: var(--choco-2); max-width: 360px; }
.pied2 .pied__guide { background: #fff; box-shadow: var(--ombre); }
.pied2 .pied__guide b { color: var(--choco); }
.pied2 .pied__cols h4 { color: var(--framboise); }
.pied2 .pied__cols a { color: var(--choco-2); }
.pied2 .pied__cols a:hover { color: var(--framboise); }
.pied2__pj a { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; padding: 14px 16px; border-radius: 18px; background: #fff; text-decoration: none; color: inherit; box-shadow: var(--ombre); }
.pied2__pj small { font: 800 11px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.pied2__pj img { height: 26px; width: auto; }
.pied2 .pied__reseaux a { background: #fff; color: var(--choco); }
.pied2 .pied__bas { color: var(--gris); border-color: rgba(46, 30, 27, .12); }
.pied2 .pied__haut { color: var(--choco); }

@media (min-width: 640px) {
  .bento__tete { grid-template-columns: 1fr 340px; align-items: end; }
  .bk { grid-template-columns: 1fr 1fr; }
  .bk__carte--pj { grid-column: 1 / -1; }
  .it2__jours { grid-template-columns: 1fr 1fr; }
  .rep2 { grid-template-columns: 96px 1fr; } .rep2__page { width: 96px; }
}
@media (min-width: 960px) {
  .defile { margin: -8px -40px; }
  .heros__fond { display: block; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(90deg, rgba(255, 247, 243, .97) 0%, rgba(255, 247, 243, .9) 34%, rgba(255, 247, 243, .3) 60%, rgba(255, 247, 243, .1) 100%),
                url("img/illu/panorama-fuji.webp") right bottom / cover no-repeat; }
  .heros .pj-pill { box-shadow: 0 10px 24px -14px rgba(46, 30, 27, .4), inset 0 0 0 1px var(--filet); }
  .chap2__grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  /* huit parties sur deux rangs, puis l'appel en bandeau sur toute la largeur */
  .chap2--cta { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 32px; }
  .chap2--cta .main { font-size: 34px; }
  .it2__route { justify-content: center; }
  .it2__jours { grid-template-columns: repeat(3, 1fr); }
  .bk { grid-template-columns: repeat(3, 1fr); }
  .bk__carte--pj { grid-column: 1 / -1; grid-template-columns: auto 1fr auto; }
  .bk__carte--pj img { grid-column: auto; height: 34px; }
  .dem__grille { grid-template-columns: 340px 1fr; gap: 50px; align-items: center; }
  .pied2__grille { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; padding-top: 30px; }
}
/* le ruban incliné déborde volontairement : on le rogne au bord de la page, sans barre de défilement */
html, body { overflow-x: clip; }
main { overflow-x: clip; }

/* deux sections crème qui se suivent (#book puis #flip, la FAQ puis la fin) : une seule marge entre elles, pas deux */
.s--creme + .s--creme { padding-top: 8px; }

/* « Book my trip » : la carte PlanJapan a son bouton ; le pied de page aussi (2026-10-16) */
.bk__pj-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bk__carte--pj .bk__pj-cta { grid-column: 1 / -1; }
.pied2__cta { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 99px; background: var(--framboise); color: #fff; font: 800 13.5px/1 var(--ui); }
.pied2__cta svg { width: 15px; height: 15px; }
@media (min-width: 960px) {
  .bk__carte--pj .bk__pj-cta { grid-column: auto; }
  /* la tuile des applis remplit la hauteur de sa rangée : 4 colonnes, la pastille en bas */
}

/* ═══ Retours d'Arthur du 2026-10-17 ═══════════════════════════════════════════════════════════════
   Héros mobile : « le guide vient recouvrir la tête de Kylie, on ne se rend pas compte de ce qu'il y a derrière ».
   Le visage reste libre (la photo couvre le héros, son visage tombe vers 36-46 % de la hauteur) : le guide et son prix
   descendent sur le bas de la photo (le pull, la rambarde), un peu plus petits. */
@media (max-width: 959px) {
  .heros__bas { margin-top: 0; padding-top: 196px; }
  .heros__livre { height: 190px; width: 200px; margin: 0 0 12px auto; }
  .heros__livre .f1 { width: 108px; height: 153px; left: 90px; top: 26px; }
  .heros__livre .f2 { width: 108px; height: 153px; left: 50px; top: 12px; }
  .heros__livre .f3 { width: 118px; height: 167px; left: 0; top: 4px; }
  .heros__prix { left: calc(240px - 100vw); top: 64px; }   /* 20 px du bord gauche, quelle que soit la largeur */
  .heros__voile { background: linear-gradient(180deg, rgba(46, 30, 27, .82) 0%, rgba(46, 30, 27, .55) 22%, rgba(46, 30, 27, 0) 34%,
    rgba(46, 30, 27, 0) 50%, rgba(46, 30, 27, .55) 64%, rgba(46, 30, 27, .9) 80%, #2E1E1B 94%); }
}

/* Bande de chiffres sous le héros : « la police est trop fine, elle ne me correspond pas » (Arthur, 2026-10-17).
   Les chiffres prennent la police du logo (Cherry Bomb One, celle de l'« Autocollant bulle »), en autocollant framboise. */
.preuves__item b { font: 400 34px/1 "Cherry Bomb One", var(--titre); color: var(--framboise); letter-spacing: .01em; text-shadow: 2px 2px 0 var(--rose); }
.preuves__item b em { font-size: .6em; color: var(--choco); text-shadow: none; margin-left: 3px; }
.preuves__item span { font-size: 14px; font-weight: 600; color: var(--choco-2); }
@media (min-width: 960px) { .preuves__item b { font-size: 40px; } }

/* ── Spots offerts : de vraies fiches de restaurant (2026-10-17) ─────────────────────────────────
   Le noren (rideau de la boutique) à sa couleur, le blason numéroté, le sceau « Kylie’s pick », la ligne de
   reçu plat → prix, les infos pratiques en pastilles. Les spots verrouillés : sans nom ni adresse, l'indice et le prix. */
.tops { display: grid; gap: 34px; }
.top { position: relative; border-radius: 26px; background: #fff; box-shadow: 0 1px 0 var(--filet), var(--ombre); }
.top__visuel { position: relative; height: 250px; border-radius: 26px 26px 0 0; overflow: hidden; }
.top__visuel > img { width: 100%; height: 100%; object-fit: cover; }
.top__noren { position: absolute; left: 16px; right: 16px; top: 0; height: 58px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; z-index: 2; }
.top__noren::before { content: ""; position: absolute; left: -8px; right: -8px; top: 0; height: 7px; border-radius: 0 0 4px 4px; background: #5B3F2A; z-index: 1; }
.top__noren i { display: block; height: 100%; border-radius: 0 0 7px 7px; background: var(--noren);
  background-image: linear-gradient(180deg, rgba(0, 0, 0, .22), transparent 16px), linear-gradient(90deg, rgba(255, 255, 255, .08), transparent 55%);
  box-shadow: 0 8px 14px -8px rgba(0, 0, 0, .55); }
.top__mon { position: absolute; left: 50%; top: 13px; z-index: 2; width: 38px; height: 38px; margin-left: -19px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--noren); font: 400 22px/1 "Cherry Bomb One", var(--titre); box-shadow: 0 0 0 2px var(--noren), 0 0 0 4px rgba(255, 255, 255, .85); }
.top__sceau { position: absolute; right: 16px; bottom: 14px; z-index: 3; width: 76px; height: 76px; border-radius: 50%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; background: #E2BC66; color: #3B2A10; transform: rotate(-10deg); box-shadow: 0 10px 18px -8px rgba(46, 30, 27, .55); }
.top__sceau::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1.5px dashed rgba(59, 42, 16, .5); }
.top__sceau small { font: 800 9px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; }
.top__sceau b { font: 400 21px/1 "Cherry Bomb One", var(--titre); margin-top: 3px; }
.top__corps { padding: 20px 20px 22px; }
.top__verdict { font: 400 30px/1 var(--main); color: var(--framboise); }
.top h3 { font: 400 30px/1.05 var(--titre); margin-top: 8px; }
.top__lieu { display: flex; align-items: center; gap: 6px; margin-top: 6px; font: 600 14.5px/1.3 var(--ui); color: var(--gris); }
.top__lieu svg { width: 16px; height: 16px; color: var(--framboise); flex: none; }
.top__recu { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1.5px dashed var(--blush-2); font: 600 16px/1.3 var(--ui); color: var(--choco); }
.top__recu i { flex: 1; min-width: 12px; border-bottom: 2px dotted var(--blush-2); transform: translateY(-4px); }
.top__recu b { color: var(--framboise-f); font-weight: 800; text-align: right; white-space: nowrap; }
.top__infos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding: 0; list-style: none; }
.top__infos li { padding: 6px 11px; border-radius: 99px; background: var(--creme); box-shadow: inset 0 0 0 1px var(--filet); font: 600 13px/1.25 var(--ui); color: var(--choco-2); }
.top__maps { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font: 800 13px/1 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--framboise); text-decoration: none; }
.top__maps svg { width: 16px; height: 16px; }
.verr { margin-top: 34px; padding: 20px 16px 18px; border-radius: 26px; background: var(--blush); }
.verr__titre { display: flex; align-items: center; gap: 10px; font: 400 25px/1.15 var(--titre); color: var(--choco); }
.verr__titre svg { width: 22px; height: 22px; color: var(--framboise); flex: none; }
.verr__liste { display: grid; gap: 10px; margin-top: 14px; }
.verr__ligne { display: grid; grid-template-columns: 78px 1fr; gap: 14px; align-items: start; padding: 10px 14px 12px 10px; border-radius: 18px; background: #fff; }
.verr__ph { position: relative; width: 78px; height: 92px; border-radius: 14px; overflow: hidden; }
.verr__ph img { width: 100%; height: 100%; object-fit: cover; filter: blur(4px) saturate(.9); transform: scale(1.18); }
.verr__ph span { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(46, 30, 27, .32); color: #fff; }
.verr__ph svg { width: 22px; height: 22px; }
.verr__type { display: block; font: 800 11px/1.25 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--framboise); }
.verr__txt b { display: flex; align-items: center; gap: 6px; margin-top: 4px; font: 400 19px/1.15 var(--titre); color: var(--choco); }
.verr__txt b svg { width: 14px; height: 14px; color: var(--gris); flex: none; }
.verr__txt small { display: block; margin-top: 3px; font: 600 13px/1.3 var(--ui); color: var(--gris); }
.verr__txt p { margin-top: 5px; font-size: 14.5px; line-height: 1.45; color: var(--choco-2); }
.verr__prix { display: inline-block; margin-top: 8px; padding: 5px 10px; border-radius: 99px; background: var(--creme); font: 800 13px/1 var(--ui); color: var(--framboise-f); }
.verr__cta { margin-top: 16px; }
.verr__cta .btn { width: 100%; justify-content: space-between; }

/* ── Pour qui : trois cas empilés, illustrés, avec la page par où commencer ── */
.cas__liste { display: grid; gap: 16px; }
.cas { display: grid; grid-template-columns: 124px 1fr; gap: 14px 16px; align-items: center; padding: 12px; border-radius: 24px; background: #fff; box-shadow: 0 1px 0 var(--filet), var(--ombre); }
.cas__ph { position: relative; height: 158px; }
.cas__ph > img:first-child { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.cas__coche { position: absolute; left: -8px; top: -8px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--framboise); color: #fff; box-shadow: 0 0 0 4px #fff; }
.cas__coche svg { width: 20px; height: 20px; stroke-width: 3; }
.cas__sticker { position: absolute; left: -12px; bottom: -12px; width: 52px; height: auto; transform: rotate(-10deg); }
.cas h3 { font: 400 25px/1.08 var(--titre); color: var(--choco); }
.cas h3 span { color: var(--framboise); }
.cas__corps p { margin-top: 8px; font-size: 15.5px; line-height: 1.5; color: var(--choco-2); }
.cas__lien { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 16px; background: var(--blush); color: var(--choco); text-decoration: none; font: 600 14px/1.25 var(--ui); }
.cas__lien span { color: var(--choco-2); }
.cas__lien b { font-weight: 800; color: var(--framboise-f); }
.cas__lien b small { margin-left: 6px; font-weight: 700; color: var(--gris); }
.cas__lien svg { width: 16px; height: 16px; margin-left: auto; color: var(--framboise); flex: none; }

/* ── À propos : trois souvenirs, chacun avec sa photo et la page du guide qui en est sortie ── */
.souv__bloc { margin-top: 46px; }
.souv__titre { text-align: center; }
.souv__titre .main { font-size: 36px; line-height: 1; color: var(--framboise); }
.souv__liste { display: grid; gap: 26px; margin-top: 18px; }
.souv { display: grid; grid-template-columns: 128px 1fr; gap: 18px; align-items: start; margin: 0; }
.souv__polaroid { position: relative; padding: 7px 7px 30px; border-radius: 4px; background: #fff; box-shadow: 0 14px 26px -14px rgba(46, 30, 27, .45), 0 0 0 1px var(--filet); transform: rotate(-3deg); }
.souv:nth-child(2) .souv__polaroid { transform: rotate(2.5deg); }
.souv__polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
.souv__polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font-size: 25px; line-height: 1; color: var(--choco); }
.souv__txt b { display: block; font: 400 22px/1.15 var(--titre); color: var(--choco); }
.souv__txt p { margin-top: 6px; font-size: 15.5px; line-height: 1.5; color: var(--choco-2); }
.souv__page { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 11px; border-radius: 99px; background: var(--blush); font: 700 12.5px/1.2 var(--ui); color: var(--framboise-f); }
.souv__page svg { width: 14px; height: 14px; flex: none; }

/* ── L'offre : le prix, puis six vrais morceaux du guide ── */
.of3__grille { display: grid; gap: 26px; }
.of3__prix { position: relative; padding: 26px 20px 22px; border-radius: 30px; background: #fff; box-shadow: 0 1px 0 var(--filet), var(--ombre); text-align: center; }
.of3__prix .of__livre { margin: 0 auto; }
.of3__ticket { max-width: 360px; margin: 18px auto 0; padding: 14px 18px; border-radius: 14px; background: var(--creme); text-align: left; font: 600 14.5px/1.35 var(--ui); color: var(--choco-2);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 8px, #000 8.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 8px, #000 8.5px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 50%, transparent 8px, #000 8.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 8px, #000 8.5px) right / 51% 100% no-repeat; }
.of3__ticket p { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.of3__ticket p + p { margin-top: 9px; padding-top: 9px; border-top: 1.5px dashed var(--blush-2); }
.of3__ticket s { color: var(--gris); text-decoration-color: var(--framboise); text-decoration-thickness: 2px; white-space: nowrap; }
.of3__ticket .moi { color: var(--choco); font-weight: 800; }
.of3__ticket .moi b { font-size: 18px; color: var(--framboise); }
.of3__montant { margin-top: 18px; font: 400 78px/.9 "Cherry Bomb One", var(--titre); color: var(--framboise); text-shadow: 3px 3px 0 var(--rose); }
.of3__montant small { display: block; margin-top: 10px; font: 700 14px/1.2 var(--ui); letter-spacing: .02em; color: var(--choco-2); text-shadow: none; }
.of3__prix .btn { width: 100%; margin-top: 18px; justify-content: space-between; }
.of3__prix .of__rassure { justify-content: center; }
.of3__tuiles { display: grid; gap: 14px; }
.tuile { display: grid; grid-template-rows: auto 1fr; border-radius: 22px; background: #fff; box-shadow: 0 1px 0 var(--filet), var(--ombre); overflow: hidden; }
.tuile__vis { display: grid; place-items: center; height: 196px; padding: 18px; overflow: hidden; background: var(--creme) radial-gradient(circle at 1px 1px, var(--blush-2) 1px, transparent 1.6px) 0 0 / 14px 14px; }
.tuile__vis img { display: block; max-width: 100%; max-height: 160px; width: auto; height: auto; transform: rotate(-1.5deg); filter: drop-shadow(0 10px 14px rgba(46, 30, 27, .2)); }
.tuile:nth-child(even) .tuile__vis img { transform: rotate(1.5deg); }
/* le reçu est long : on en montre le haut, qui sort de l'imprimante */
.tuile--long .tuile__vis { place-items: start center; padding: 16px 0 0; }
.tuile--long .tuile__vis img { width: 78%; max-width: 330px; max-height: none;
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 97%); mask-image: linear-gradient(180deg, #000 58%, transparent 97%); }
.tuile__txt { padding: 16px 18px 20px; }
.tuile__txt b { display: block; font: 400 24px/1.1 var(--titre); color: var(--choco); }
.tuile__txt p { margin-top: 6px; font-size: 15.5px; line-height: 1.5; color: var(--choco-2); }

@media (min-width: 640px) {
  .verr__liste { grid-template-columns: 1fr 1fr; }
  .of3__tuiles { grid-template-columns: 1fr 1fr; }
  .souv { grid-template-columns: 170px 1fr; }
}
@media (min-width: 960px) {
  .tops { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .top__visuel { height: 280px; }
  .verr { padding: 24px; }
  .verr__liste { grid-template-columns: repeat(3, 1fr); }
  .verr__cta { display: flex; justify-content: center; }
  .verr__cta .btn { width: auto; min-width: 380px; }
  .cas__liste { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .cas { grid-template-columns: 1fr; align-content: start; padding: 14px; }
  .cas__ph { height: 250px; }
  .cas__sticker { left: auto; right: -14px; bottom: -14px; width: 60px; transform: rotate(10deg); }
  .cas__corps { padding: 4px 6px 0; }
  .souv__liste { grid-template-columns: repeat(3, 1fr); gap: 34px; }
  .souv { grid-template-columns: 1fr; }
  .souv__polaroid { width: 74%; }
  .of3__grille { grid-template-columns: 370px 1fr; align-items: start; gap: 30px; }
  .of3__prix { position: sticky; top: 96px; }
}

/* ── eSIM resserrée (2026-10-17) : les points secondaires du bento en pastilles ── */
.es__puces { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.es__puces li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px 8px 10px; border-radius: 99px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--filet); font: 600 14px/1.2 var(--ui); color: var(--choco); }
.es__puces svg { width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: #12B76A; color: #fff; stroke-width: 3; }

/* ── Pied de page : l'illustration en bas, fondue dans le fond rose (référence d'Arthur, 2026-10-17) ── */
.pied2 { padding: 0; }
.pied2__grille { padding-top: 56px; }
.pied2__fin { position: relative; z-index: 0; margin-top: -36px; height: clamp(210px, 40vw, 560px); overflow: hidden; pointer-events: none; }
.pied2__fin img { position: absolute; left: 50%; bottom: 0; width: max(100%, 820px); max-width: none; height: auto; transform: translateX(-50%); }
.pied2__fin::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30%; z-index: 1; background: linear-gradient(180deg, var(--blush), rgba(251, 227, 234, 0)); }
.pied2 > .conteneur { position: relative; z-index: 1; }
@media (max-width: 639px) { .pied2__fin img { transform: translateX(-44%); } }
@media (max-width: 639px) {
  .pied2__fin { height: 250px; margin-top: -8px; }
  .es__puces { gap: 6px; }
  .es__puces li { padding: 7px 11px 7px 8px; font-size: 13px; }
  .es__puces svg { width: 14px; height: 14px; }
}

/* ── Production (2026-10-17) : caisse (liste d'attente, puis commande), pages légales, pages de service ── */
.page-caisse .caisse { display: block; max-width: 560px; margin: 0; }
.caisse__intro { font-size: 17px; line-height: 1.55; color: var(--choco); }
.caisse__form { display: grid; gap: 14px; margin-top: 18px; }
.caisse__champ { display: grid; gap: 6px; font: 700 13px/1.2 var(--ui); letter-spacing: .04em; color: var(--choco-2); }
.caisse__champ input { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--filet); background: #fff; font: 500 16px/1.3 var(--ui); color: var(--choco); }
.caisse__champ input:focus { outline: none; border-color: var(--framboise); box-shadow: 0 0 0 3px var(--blush); }
.caisse__case { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 14.5px; line-height: 1.45; color: var(--choco-2); cursor: pointer; }
.caisse__case input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--framboise); }
.caisse__case a { color: var(--framboise-f); }
.caisse__piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.caisse__form .btn { width: 100%; justify-content: space-between; }
.caisse__form .btn:disabled { opacity: .6; cursor: default; }
.caisse__retour { min-height: 1.4em; font: 600 14.5px/1.4 var(--ui); color: var(--framboise-f); }
.caisse__form.envoye .caisse__retour { color: #12794A; }
.caisse__note { margin-top: 16px; font-size: 13.5px; line-height: 1.5; color: var(--gris); }
.caisse__note a { color: var(--framboise-f); }
.caisse__liste { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.caisse__liste li { display: flex; align-items: center; gap: 9px; font: 600 15px/1.35 var(--ui); color: var(--choco); }
.caisse__liste svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--framboise); color: #fff; stroke-width: 3; flex: none; }

.legal { font-size: 16px; line-height: 1.65; color: var(--choco-2); }
.legal section + section { margin-top: 30px; }
.legal h2 { font: 400 26px/1.15 var(--titre); color: var(--choco); margin-bottom: 10px; }
.legal p + p, .legal p + ul, .legal ul + p, .legal dl + p, .legal p + dl { margin-top: 10px; }
.legal ul { padding-left: 20px; }
.legal li + li { margin-top: 6px; }
.legal a { color: var(--framboise-f); }
.legal b, .legal strong { color: var(--choco); }
.legal .fiche, .service .fiche { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 10px 0 0; padding: 16px 18px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--filet); }
.legal .fiche dt, .service .fiche dt { font: 700 13px/1.5 var(--ui); color: var(--gris); }
.legal .fiche dd, .service .fiche dd { margin: 0; font-size: 15px; color: var(--choco); }
.legal__maj { margin-top: 34px; font-size: 13.5px; color: var(--gris); }

.service { padding-top: 120px; }
.service .surtitre { margin-bottom: 6px; }
.service__titre { margin-bottom: 18px; }
.service__acces { margin: 22px 0 10px; padding: 22px; border-radius: 22px; background: #fff; box-shadow: var(--ombre); }
.service__acces .btn { width: 100%; justify-content: space-between; }
.service__meta { margin-top: 10px; font: 700 13px/1.4 var(--ui); color: var(--choco-2); }
.service__note { margin-top: 4px; font-size: 13.5px; color: var(--gris); }
.service__bloc { margin-top: 28px; }
.service__bloc h2 { font: 400 24px/1.15 var(--titre); color: var(--choco); margin-bottom: 8px; }
.service__bloc p { font-size: 15.5px; line-height: 1.6; color: var(--choco-2); }
.service__bloc p + p, .service__bloc p + div, .service__bloc div + p { margin-top: 10px; }
.service__bloc a, .service .chapo a { color: var(--framboise-f); }
.service__lien { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.service__lien input { min-width: 0; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--filet); background: #fff; font: 500 14px/1.3 var(--ui); color: var(--choco); }
.service__form { display: grid; gap: 10px; max-width: 460px; margin-top: 18px; }
.service__form label { font: 700 13px/1.2 var(--ui); color: var(--choco-2); }
.service__form input { padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--filet); background: #fff; font: 500 16px/1.3 var(--ui); }
.service__signature { margin-top: 28px; font-size: 30px; color: var(--framboise); }

/* l'encadré de la garantie légale (conditions de vente, section 10 : la loi parle d'un « encadré ») */
.legal .encadre { padding: 18px 20px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--rose); }
.legal .encadre h2 { margin-top: 0; }

/* ── bento PlanJapon d’origine ── */
  /* ===== pj-bento — « Ce que les autres eSIM ne font pas » (maquette B claire, 2026-09-26) =====
     Tout est préfixé pjb- : ce bloc rejoint la feuille globale des sections. Animations en
     transform/opacity/dash seulement, suspendues hors écran (.pj-offscreen de pj-motion.js),
     coupées en prefers-reduced-motion (html sans .motion). */
  .pj-bento { background: var(--bg-soft); position: relative; overflow: hidden; }
  .pj-bento__in { max-width: var(--page-width); margin: 0 auto; padding: var(--sec-y) var(--page-margin); position: relative; }

  .pjb-grid { display: grid; gap: 16px; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 300px 300px 300px 280px; }
  .pjb-t--ip { grid-area: 1 / 1 / 3 / 6; }
  .pjb-t--apps { grid-area: 1 / 6 / 2 / 13; }
  .pjb-t--unl { grid-area: 2 / 6 / 3 / 13; }
  .pjb-t--land { grid-area: 3 / 1 / 4 / 8; }
  .pjb-t--qr { grid-area: 3 / 8 / 4 / 13; }
  .pjb-t--hot { grid-area: 4 / 1 / 5 / 5; }
  .pjb-t--net { grid-area: 4 / 5 / 5 / 9; }
  .pjb-t--sup { grid-area: 4 / 9 / 5 / 13; }

  .pjb-t { position: relative; min-width: 0; display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(46, 30, 27, .04), 0 24px 48px -34px rgba(46, 30, 27, .3); }
  .pjb-t__tx { padding: 22px 24px 0; position: relative; z-index: 3; }
  .pjb-t__tx h3 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; color: var(--ink); }
  .pjb-t__tx p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--sub); }
  .pjb-t__ill { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; container-type: size; isolation: isolate; }
  .pjb-flag { display: block; flex: none; clip-path: circle(50%); }

  /* icônes d'apps officielles : liseré « verre » d'iOS 26 rogné dans les PNG, filet sombre INTÉRIEUR
     (invisible sur les icônes colorées, il détache les blanches), jamais de contour clair */
  .pjb-ai { position: relative; display: block; flex: none; width: var(--s, 48px); height: var(--s, 48px); border-radius: 20%; overflow: hidden; }
  .pjb-ai img { display: block; width: 100%; height: 100%; border-radius: inherit; }
  .pjb-ai::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(46, 30, 27, .08); pointer-events: none; }

  @keyframes pjbMarquee { to { transform: translateX(-50%); } }
  @keyframes pjbMarqueeR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
  @keyframes pjbFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
  @keyframes pjbPulse { from { transform: scale(1); opacity: .75; } to { transform: scale(4.2); opacity: 0; } }
  @keyframes pjbBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

  /* 1 · chemin des données */
  .pjb-route { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 20px; container-type: normal; }
  .pjb-rt { position: relative; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; border-radius: 16px; padding: 12px 14px; background: var(--bg-soft); border: 1px solid var(--line); }
  .pjb-rt--us { background: linear-gradient(160deg, #FDECF1 0%, #FFF7F3 100%); border-color: var(--red-border); }
  .pjb-rt__hd { display: flex; align-items: center; gap: 10px; }
  .pjb-rt__logo { width: 34px; height: 34px; flex: none; border-radius: 10px; }
  .pjb-rt__logos { display: flex; flex: none; padding-right: 6px; }
  .pjb-rt__logos img { width: 26px; height: 26px; border-radius: 8px; margin-right: -6px; box-shadow: 0 0 0 2px var(--bg-soft); }
  .pjb-rt__t { flex: 1; min-width: 0; line-height: 1.25; }
  .pjb-rt__t b { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink); }
  .pjb-rt__ip { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; color: #067647; background: #DCFAE6; border-radius: 999px; padding: 3px 5px 3px 8px; }
  .pjb-rt__ip .pjb-flag { width: 15px; height: 15px; }
  .pjb-rt__ip--ko { color: #B54708; background: #FEF0C7; }
  .pjb-rt__ip--ko .pjb-flag + .pjb-flag { margin-left: -6px; }
  .pjb-rt__track { position: relative; flex: 1 1 auto; min-height: 84px; }
  .pjb-rt__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .pjb-rt__rail { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
  .pjb-rt__glow { fill: none; stroke: rgba(215, 55, 95, .14); stroke-width: 11; stroke-linecap: round; }
  .pjb-rt--us .pjb-rt__rail { stroke: #D7375F; }
  .pjb-rt--them .pjb-rt__rail { stroke: #98A2B3; stroke-width: 3; stroke-dasharray: 1 6; }
  .pjb-rt__stn { position: absolute; left: var(--sx, 0); top: var(--sy, 0); z-index: 2; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; box-shadow: 0 0 0 1px var(--line), 0 6px 14px -8px rgba(46, 30, 27, .35); }
  .pjb-rt--us .pjb-rt__stn { box-shadow: 0 0 0 1px var(--red-border), 0 6px 14px -8px rgba(215, 55, 95, .45); }
  .pjb-rt__stn > svg { width: 17px; height: 17px; }
  .pjb-rt__stn--flag .pjb-flag { width: 26px; height: 26px; }
  .pjb-rt__stn--roam { width: 48px; margin-left: -24px; border-radius: 999px; background: #FFFAEB; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 0 2px #F79009, 0 6px 14px -8px rgba(247, 144, 9, .6); }
  .pjb-rt__stn--roam .pjb-flag { width: 19px; height: 19px; }
  .pjb-rt__stn--roam .pjb-flag + .pjb-flag { margin-left: -3px; }
  .pjb-rt__lbl { position: absolute; left: var(--sx, 0); top: calc(var(--sy, 0px) + 19px); z-index: 2; transform: translateX(-50%); font-size: 10.5px; font-weight: 700; color: #344054; white-space: nowrap; }
  .pjb-rt__lbl--a { transform: translateX(-15px); }
  .pjb-rt__lbl--b { transform: translateX(calc(-100% + 15px)); }
  .pjb-rt__lbl--roam { color: #B54708; }
  .pjb-rt__pkt { position: absolute; left: 0; top: 0; z-index: 1; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(215, 55, 95, .18), 0 0 10px 2px rgba(215, 55, 95, .4); offset-rotate: 0deg; offset-anchor: 50% 50%; opacity: 0; }
  .pjb-rt--them .pjb-rt__pkt { background: #F79009; box-shadow: 0 0 0 3px rgba(247, 144, 9, .2); }
  html.motion .pjb-t.is-live .pjb-rt--us .pjb-rt__pkt { animation: pjbPktUs 1.8s cubic-bezier(.45, .05, .35, 1) infinite; }
  html.motion .pjb-t.is-live .pjb-rt--them .pjb-rt__pkt { animation: pjbPktThem 4.4s linear infinite; }
  @keyframes pjbPktUs { 0% { offset-distance: 0%; opacity: 0; } 8%, 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
  @keyframes pjbPktThem { 0% { offset-distance: 0%; opacity: 0; animation-timing-function: ease-in; } 6% { opacity: 1; } 40% { offset-distance: 50%; animation-timing-function: linear; } 64% { offset-distance: 50%; animation-timing-function: ease-in; } 94% { offset-distance: 100%; opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
  .pjb-rt__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; font-size: 11.5px; }
  .pjb-rt__spd { display: inline-flex; align-items: center; gap: 5px; color: var(--red); font-weight: 700; white-space: nowrap; }
  .pjb-rt__spd b { color: var(--ink); font-size: 13px; font-weight: 800; }
  .pjb-rt__spd svg { width: 14px; height: 14px; }
  .pjb-rt__spd--ko, .pjb-rt__spd--ko b { color: #B54708; }
  .pjb-rt__res { display: inline-flex; align-items: center; gap: 6px; color: #344054; font-weight: 600; white-space: nowrap; }
  .pjb-rt__res svg { width: 16px; height: 16px; flex: none; border-radius: 50%; padding: 3px; box-sizing: border-box; color: #fff; }
  .pjb-rt__res--ok svg { background: var(--ok); }
  .pjb-rt__res--ko svg { background: #D7375F; }

  /* 2 · applis : trois rangées qui défilent sans trou (pj-bento.js remplit chaque piste) */
  .pjb-rows { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
  .pjb-row { overflow: hidden; padding: 2px 0; }
  .pjb-mq { display: flex; width: max-content; }
  .pjb-mq > .pjb-ai { margin-right: 12px; box-shadow: 0 8px 18px -10px rgba(46, 30, 27, .38); }
  html.motion .pjb-mq { animation: pjbMarquee 40s linear infinite; }
  html.motion .pjb-row--r .pjb-mq { animation-name: pjbMarqueeR; }
  .pjb-zero { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; display: flex; align-items: center; gap: 11px; padding: 10px 16px 10px 10px; border-radius: 18px; background: rgba(255, 255, 255, .95); border: 1px solid var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 20px 40px -18px rgba(46, 30, 27, .4), 0 0 0 6px rgba(18, 183, 106, .12); white-space: nowrap; }
  .pjb-zero__ok { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 14px -4px rgba(18, 183, 106, .55); }
  .pjb-zero__ok svg { width: 19px; height: 19px; }
  .pjb-zero b { display: block; font-size: 16px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }

  /* 3 · illimité : ∞ qui court + compteur de Go qui ne s'arrête jamais */
  .pjb-inf { position: absolute; left: 3%; top: 50%; width: 53%; height: auto; transform: translateY(-50%); overflow: visible; }
  .pjb-inf__base { fill: none; stroke: #FBE3EA; stroke-width: 13; stroke-linecap: round; }
  .pjb-inf__glow { fill: none; stroke: rgba(215, 55, 95, .12); stroke-width: 24; stroke-linecap: round; stroke-dasharray: 20 80; }
  .pjb-inf__run { fill: none; stroke: url(#pjbInfG); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 20 80; }
  .pjb-inf__run--2 { opacity: .45; stroke-dasharray: 10 90; }
  html.motion .pjb-inf__glow, html.motion .pjb-inf__run { animation: pjbInf 3.4s linear infinite; }
  html.motion .pjb-inf__run--2 { animation-delay: -1.7s; }
  @keyframes pjbInf { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
  .pjb-meter { position: absolute; right: 5%; top: 50%; transform: translateY(-50%); width: 38%; padding: 14px 14px 12px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 36px -24px rgba(46, 30, 27, .4); }
  .pjb-meter__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--sub); }
  .pjb-meter__row small { font-size: 11px; }
  .pjb-meter__row b { font-size: 21px; color: var(--ink); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .pjb-meter__bar { position: relative; height: 7px; border-radius: 999px; background: #F2F4F7; margin: 8px 0 12px; overflow: hidden; }
  .pjb-meter__bar i { position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(115deg, #D7375F 0 12px, #E8608A 12px 24px); background-size: 52px 100%; }
  html.motion .pjb-meter__bar i { animation: pjbStripe .9s linear infinite; }
  @keyframes pjbStripe { to { background-position: 52px 0; } }
  .pjb-meter__row--ok, .pjb-meter__row--ko { justify-content: flex-start; font-weight: 600; margin-top: 6px; }
  .pjb-meter__row--ok { color: var(--ink); }
  .pjb-meter__row--ko { color: #667085; }
  .pjb-meter__row--ko s { text-decoration-color: #D7375F; text-decoration-thickness: 1.5px; }
  .pjb-okd, .pjb-kod { width: 18px; height: 18px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; }
  .pjb-okd { background: var(--ok); }
  .pjb-kod { background: #D7375F; }
  .pjb-okd svg, .pjb-kod svg { width: 10px; height: 10px; }

  /* 3 bis · fiche data : rechargeable — l'anneau de Go se vide, « +10 Go » arrive, il se remplit.
     Au repos (mouvements réduits, tuile hors écran) : l'état rechargé. pathLength 100 : dashoffset 38 = 62 % */
  .pjb-ring { position: absolute; left: 7%; top: 50%; width: min(40%, 176px); aspect-ratio: 1; transform: translateY(-50%); }
  .pjb-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
  .pjb-ring__base { fill: none; stroke: #FBE3EA; stroke-width: 13; }
  .pjb-ring__val { fill: none; stroke: url(#pjbTopG); stroke-width: 13; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 38; }
  .pjb-ring__go { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(22px, 8cqw, 36px); font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
  .pjb-ring__plus { position: absolute; right: -16%; top: 0; padding: 4px 10px; border-radius: 999px; background: var(--ok); color: #fff; font-size: 13px; font-weight: 800; white-space: nowrap; box-shadow: 0 10px 20px -10px rgba(46, 30, 27, .45); }
  .pjb-top__n { display: grid; justify-items: end; }
  .pjb-top__n > span { grid-area: 1 / 1; }
  .pjb-top__a { opacity: 0; }
  .pjb-meter--top .pjb-meter__bar i { background: linear-gradient(90deg, #F4A9C4, #D7375F); background-size: 100% 100%; transform-origin: left center; transform: scaleX(.62); }
  html.motion .pjb-meter--top .pjb-meter__bar i { animation: none; }
  html.motion .pjb-t--top.is-live .pjb-ring__val { animation: pjbTopRing 6.4s ease-in-out infinite; }
  html.motion .pjb-t--top.is-live .pjb-meter__bar i { animation: pjbTopBar 6.4s ease-in-out infinite; }
  html.motion .pjb-t--top.is-live .pjb-ring__plus { animation: pjbTopPlus 6.4s ease-in-out infinite; }
  html.motion .pjb-t--top.is-live .pjb-top__a { animation: pjbTopA 6.4s ease-in-out infinite; }
  html.motion .pjb-t--top.is-live .pjb-top__b { animation: pjbTopB 6.4s ease-in-out infinite; }
  @keyframes pjbTopRing { 0%, 36% { stroke-dashoffset: 88; } 50%, 88% { stroke-dashoffset: 38; } 100% { stroke-dashoffset: 88; } }
  @keyframes pjbTopBar { 0%, 36% { transform: scaleX(.12); } 50%, 88% { transform: scaleX(.62); } 100% { transform: scaleX(.12); } }
  @keyframes pjbTopPlus { 0%, 36% { opacity: 0; transform: translateY(8px) scale(.7); } 44%, 84% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(-4px) scale(.9); } }
  @keyframes pjbTopA { 0%, 40% { opacity: 1; } 46%, 92% { opacity: 0; } 100% { opacity: 1; } }
  @keyframes pjbTopB { 0%, 40% { opacity: 0; } 46%, 92% { opacity: 1; } 100% { opacity: 0; } }

  /* 4 · vol vers Tokyo (carte en points ; épingles et bulle placées par pj-bento.js) */
  .pjb-trip { position: absolute; left: 50%; top: 50%; width: min(100%, calc(100cqh * var(--arn, 3.2135))); aspect-ratio: var(--ar, 118.9 / 37); transform: translate(-50%, -46%); }
  .pjb-trip__map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
  .pjb-trip__w { fill: none; stroke: #D0D5DD; stroke-width: .62; stroke-linecap: round; }
  .pjb-trip__ko { fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; }
  .pjb-trip__dep { fill: none; stroke: var(--navy); stroke-width: .8; stroke-linecap: round; }
  .pjb-trip__jp { fill: none; stroke: #98A2B3; stroke-width: .8; stroke-linecap: round; }
  .pjb-trip__arc { fill: none; stroke: #98A2B3; stroke-width: .45; stroke-dasharray: 1.2 1.4; stroke-linecap: round; }
  .pjb-trip__pin { position: absolute; left: 0; top: 0; z-index: 2; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--ink); background: #fff; border-radius: 999px; padding: 3px 9px 3px 3px; white-space: nowrap; box-shadow: 0 0 0 1px var(--line), 0 8px 18px -10px rgba(46, 30, 27, .45); }
  .pjb-trip__pin::after { content: ""; position: absolute; left: var(--stem, 50%); top: 100%; width: 2px; height: 8px; margin-left: -1px; background: #D0D5DD; }
  .pjb-trip__pin.is-below::after { top: auto; bottom: 100%; }
  .pjb-trip__flag { width: 18px; height: 18px; }
  .pjb-trip__rings { position: absolute; left: 0; top: 0; z-index: 1; width: 0; height: 0; }
  .pjb-trip__rings i { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; border: 1.6px solid #FF6B5F; opacity: 0; }
  .pjb-trip__plane { position: absolute; left: 0; top: 0; z-index: 3; width: 26px; height: 26px; offset-rotate: auto; offset-anchor: 50% 50%; opacity: 0; }
  .pjb-trip__plane svg { display: block; width: 100%; height: 100%; fill: var(--navy); filter: drop-shadow(0 4px 5px rgba(46, 30, 27, .22)); }
  .pjb-trip__hello { position: absolute; left: 0; top: 0; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px; border-radius: 14px; background: #fff; color: var(--ink); white-space: nowrap; box-shadow: 0 0 0 1px var(--line), 0 18px 34px -16px rgba(46, 30, 27, .45); opacity: 0; }
  .pjb-trip__hello b { display: block; font-size: 12.5px; font-weight: 800; }
  .pjb-trip__hello small { display: block; font-size: 10.5px; color: #067647; font-weight: 700; }
  .pjb-trip__sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
  .pjb-trip__sig i { width: 3.5px; border-radius: 1px; background: var(--ok); }
  .pjb-trip__sig i:nth-child(1) { height: 30%; }
  .pjb-trip__sig i:nth-child(2) { height: 55%; }
  .pjb-trip__sig i:nth-child(3) { height: 78%; }
  .pjb-trip__sig i:nth-child(4) { height: 100%; }
  html.motion .pjb-t.is-live .pjb-trip__plane { animation: pjbTripPlane 7s linear infinite; }
  html.motion .pjb-t.is-live .pjb-trip__jp { animation: pjbTripJp 7s linear infinite; }
  html.motion .pjb-t.is-live .pjb-trip__dep { animation: pjbTripDep 7s linear infinite; }
  html.motion .pjb-t.is-live .pjb-trip__rings i { animation: pjbTripRing 7s ease-out infinite; }
  html.motion .pjb-t.is-live .pjb-trip__rings i:nth-child(2) { animation-delay: .35s; }
  html.motion .pjb-t.is-live .pjb-trip__hello { animation: pjbTripHello 7s cubic-bezier(.2, .7, .2, 1) infinite; }
  @keyframes pjbTripPlane { 0% { offset-distance: 0%; opacity: 0; animation-timing-function: cubic-bezier(.45, .05, .35, .95); } 5% { opacity: 1; offset-distance: 0%; animation-timing-function: cubic-bezier(.4, .1, .3, 1); } 48% { offset-distance: 100%; opacity: 1; } 52%, 100% { offset-distance: 100%; opacity: 0; } }
  @keyframes pjbTripJp { 0%, 47% { stroke: #98A2B3; } 50%, 92% { stroke: #D7375F; } 97%, 100% { stroke: #98A2B3; } }
  @keyframes pjbTripDep { 0% { stroke: #2E90FA; } 8%, 100% { stroke: #16233B; } }
  @keyframes pjbTripRing { 0%, 48% { opacity: 0; transform: scale(.6); } 50% { opacity: .95; transform: scale(.8); } 68%, 100% { opacity: 0; transform: scale(3.4); } }
  @keyframes pjbTripHello { 0%, 50% { opacity: 0; transform: translateY(10px) scale(.94); } 55%, 91% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(-4px); } }
  html:not(.motion) .pjb-trip__jp { stroke: var(--red); }
  html:not(.motion) .pjb-trip__hello { opacity: 1; }

  /* 5 · QR par email + avion en papier */
  .pjb-fly { position: absolute; left: 2%; top: 2%; width: 66%; height: 72%; overflow: visible; z-index: 1; }
  .pjb-fly__trail { fill: none; stroke: #98A2B3; stroke-width: 1.2; stroke-dasharray: 3 4; }
  .pjb-mail { position: absolute; right: 7%; bottom: 9%; width: min(62%, 240px); background: #fff; color: var(--ink); border-radius: 16px; padding: 10px; box-shadow: 0 0 0 1px var(--line), 0 24px 44px -24px rgba(46, 30, 27, .5); z-index: 2; }
  html.motion .pjb-mail { animation: pjbFloat 4.4s ease-in-out infinite; }
  .pjb-mail__head { display: flex; gap: 7px; align-items: center; line-height: 1.2; }
  .pjb-mail__head b { display: block; font-size: 10.5px; font-weight: 800; }
  .pjb-mail__head small { display: block; font-size: 9px; color: var(--sub); }
  .pjb-mail__av { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--red-pale); display: grid; place-items: center; }
  .pjb-mail__av img { width: 13px; height: auto; }
  .pjb-mail__qr { position: relative; width: 50%; aspect-ratio: 1; margin: 8px auto 2px; padding: 5%; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
  .pjb-qr { display: block; width: 100%; height: 100%; }
  .pjb-mail__scan { position: absolute; left: 4%; right: 4%; top: 8%; height: 2px; border-radius: 2px; background: var(--red); box-shadow: 0 0 10px 2px rgba(215, 55, 95, .45); }
  html.motion .pjb-mail__scan { animation: pjbScan 1.8s ease-in-out infinite alternate; }
  @keyframes pjbScan { 0% { top: 8%; } 100% { top: 88%; } }

  /* 6 · partage de connexion */
  .pjb-radar-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
  .pjb-radar-lines path { fill: none; stroke: #E4E7EC; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
  .pjb-radar-lines .pjb-rl { stroke: var(--ok); stroke-width: 1.6; stroke-dasharray: 4 5; }
  html.motion .pjb-radar-lines .pjb-rl { animation: pjbAnts 1s linear infinite; animation-delay: var(--d, 0s); }
  @keyframes pjbAnts { to { stroke-dashoffset: -18; } }
  .pjb-radar { position: absolute; left: 50%; top: 54%; width: 0; height: 0; }
  .pjb-radar i { position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; border-radius: 50%; border: 1.5px solid rgba(18, 183, 106, .45); opacity: 0; }
  html.motion .pjb-radar i { animation: pjbPulse 2.7s ease-out infinite; }
  html.motion .pjb-radar i:nth-child(2) { animation-delay: .9s; }
  html.motion .pjb-radar i:nth-child(3) { animation-delay: 1.8s; }
  .pjb-core { position: absolute; left: 50%; top: 54%; z-index: 2; width: 64px; height: 64px; transform: translate(-50%, -50%); border-radius: 21%; overflow: hidden; box-shadow: 0 0 0 6px rgba(52, 199, 89, .14), 0 14px 26px -12px rgba(44, 188, 76, .6); }
  .pjb-core img { display: block; width: 100%; height: 100%; }
  .pjb-dv { position: absolute; left: var(--x); top: var(--y); z-index: 2; width: 42px; height: 42px; transform: translate(-50%, -50%); border-radius: 13px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink); box-shadow: 0 10px 20px -12px rgba(46, 30, 27, .4); }
  .pjb-dv svg { width: 22px; height: 22px; }
  .pjb-dv i { position: absolute; right: -4px; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: #32D583; border: 2px solid #fff; }
  html.motion .pjb-dv i { animation: pjbBlink 2s ease-in-out infinite; animation-delay: var(--d, 0s); }

  /* 7 · réseau : 99 % + carte du Japon en points */
  .pjb-t--net .pjb-t__tx { max-width: 64%; }
  .pjb-t--net .pjb-t__ill { position: static; }
  .pjb-jmap { position: absolute; right: -2%; top: 8%; z-index: 1; height: 86%; width: auto; aspect-ratio: 76 / 70; }
  .pjb-jmap__dots { fill: #C4CAD4; }
  .pjb-jmap__line { fill: none; stroke: rgba(215, 55, 95, .35); stroke-width: .45; stroke-dasharray: 1 1.1; }
  .pjb-jmap__run { fill: none; stroke: var(--red); stroke-width: .9; stroke-linecap: round; stroke-dasharray: 14 200; stroke-dashoffset: 14; }
  html.motion .pjb-jmap__run { animation: pjbRun 3.2s linear infinite; }
  @keyframes pjbRun { to { stroke-dashoffset: -100; } }
  .pjb-jmap__city circle { fill: var(--red); }
  .pjb-jmap__city .pjb-jmap__pr { fill: none; stroke: var(--red); stroke-width: .5; transform-box: fill-box; transform-origin: center; opacity: 0; }
  html.motion .pjb-jmap__city .pjb-jmap__pr { animation: pjbPulse 2.6s ease-out infinite; animation-delay: var(--d, 0s); }
  .pjb-stat { position: absolute; left: 24px; bottom: 20px; z-index: 2; display: flex; flex-direction: column; }
  .pjb-stat b { font-size: 46px; line-height: 1; font-weight: 900; letter-spacing: -.04em; color: var(--red); white-space: nowrap; }
  .pjb-stat span { margin-top: 4px; max-width: 150px; font-size: 12px; font-weight: 600; color: var(--sub); }

  /* 8 · support (WhatsApp en clair) */
  .pjb-chat-top { position: absolute; left: 6%; right: 6%; top: 6%; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 13px; background: #fff; border: 1px solid var(--line); color: var(--ink); box-shadow: 0 12px 26px -16px rgba(46, 30, 27, .4); font-size: 10.5px; line-height: 1.2; }
  .pjb-chat-top .pjb-ai { --s: 26px; }
  .pjb-chat-top b { display: block; font-weight: 800; font-size: 11px; }
  .pjb-chat-top small { display: flex; align-items: center; gap: 4px; color: #067647; font-weight: 600; font-size: 9.5px; }
  .pjb-chat-top small i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
  .pjb-chat { position: absolute; left: 6%; right: 26%; top: 36%; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
  .pjb-bub { display: block; max-width: 84%; padding: 7px 10px; border-radius: 14px; font-size: 11px; line-height: 1.35; font-weight: 500; color: var(--ink); box-shadow: 0 8px 18px -12px rgba(46, 30, 27, .45); }
  .pjb-bub--me { align-self: flex-end; background: #D9FDD3; border-bottom-right-radius: 4px; }
  .pjb-bub--us { position: relative; align-self: flex-start; min-width: 52px; min-height: 28px; background: #F2F4F7; border-bottom-left-radius: 4px; }
  .pjb-bub__msg { display: block; }
  .pjb-typing { position: absolute; left: 10px; top: 50%; display: flex; gap: 3px; transform: translateY(-50%); opacity: 0; }
  .pjb-typing i { width: 5px; height: 5px; border-radius: 50%; background: #98A2B3; }
  html.motion .pjb-t.is-live .pjb-typing i { animation: pjbBlink .9s ease-in-out infinite; }
  html.motion .pjb-t.is-live .pjb-typing i:nth-child(2) { animation-delay: .15s; }
  html.motion .pjb-t.is-live .pjb-typing i:nth-child(3) { animation-delay: .3s; }
  html.motion .pjb-t.is-live .pjb-bub--me { animation: pjbBubMe 6.5s cubic-bezier(.2, .7, .2, 1) infinite; }
  html.motion .pjb-t.is-live .pjb-bub--us { animation: pjbBubUs 6.5s cubic-bezier(.2, .7, .2, 1) infinite; }
  html.motion .pjb-t.is-live .pjb-typing { animation: pjbTyping 6.5s linear infinite; }
  html.motion .pjb-t.is-live .pjb-bub__msg { animation: pjbMsg 6.5s linear infinite; }
  @keyframes pjbBubMe { 0%, 4% { opacity: 0; transform: translateY(10px) scale(.95); } 10%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
  @keyframes pjbBubUs { 0%, 18% { opacity: 0; transform: translateY(10px) scale(.95); } 24%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
  @keyframes pjbTyping { 0%, 22% { opacity: 0; } 24%, 44% { opacity: 1; } 46%, 100% { opacity: 0; } }
  @keyframes pjbMsg { 0%, 45% { opacity: 0; } 48%, 100% { opacity: 1; } }
  .pjb-masc { position: absolute; right: -1%; bottom: -12%; z-index: 1; width: 34cqw; max-width: none; height: auto; }

  /* tablette */
  @media (max-width: 1024px) and (min-width: 761px) {
    .pjb-grid { grid-template-rows: 320px 320px 330px 290px 290px; }
    .pjb-t--ip { grid-area: 1 / 1 / 3 / 7; }
    .pjb-t--apps { grid-area: 1 / 7 / 2 / 13; }
    .pjb-t--unl { grid-area: 2 / 7 / 3 / 13; }
    .pjb-t--land { grid-area: 3 / 1 / 4 / 13; }
    .pjb-t--qr { grid-area: 4 / 1 / 5 / 7; }
    .pjb-t--hot { grid-area: 4 / 7 / 5 / 13; }
    .pjb-t--net { grid-area: 5 / 1 / 6 / 7; }
    .pjb-t--sup { grid-area: 5 / 7 / 6 / 13; }
    .pjb-meter { width: 44%; }
    .pjb-chat-top { right: auto; width: min(64%, 240px); }
    .pjb-chat { right: 34%; }
    .pjb-masc { width: 38cqw; }
  }

  /* mobile : une colonne (QR + partage côte à côte), aucun texte d'illustration sous 11 px */
  @media (max-width: 760px) {
    .pjb-grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: 12px; }
    .pjb-t { grid-area: auto / 1 / auto / -1; border-radius: 20px; }
    .pjb-t--qr, .pjb-t--hot { grid-column: auto; }
    .pjb-t__tx { padding: 18px 18px 0; }
    .pjb-t__tx h3 { font-size: 18px; }
    .pjb-t__tx p { font-size: 14px; }
    .pjb-t--qr .pjb-t__tx, .pjb-t--hot .pjb-t__tx { padding: 14px 12px 0; }
    .pjb-t--qr h3, .pjb-t--hot h3 { font-size: 15px; }
    .pjb-t--qr p { font-size: 12.5px; line-height: 1.45; }
    .pjb-t__ill { flex: none; }
    .pjb-t--ip .pjb-t__ill { height: auto; }
    .pjb-t--apps .pjb-t__ill { height: 196px; }
    .pjb-t--unl .pjb-t__ill { height: 190px; }
    .pjb-t--land .pjb-t__ill { height: 176px; }
    .pjb-t--qr .pjb-t__ill, .pjb-t--hot .pjb-t__ill { height: 148px; }
    .pjb-t--sup .pjb-t__ill { height: 200px; }

    .pjb-route { padding: 12px 12px 16px; gap: 10px; }
    .pjb-route .pjb-rt { flex: none; padding: 10px 12px; }
    .pjb-rt--us .pjb-rt__track { min-height: 70px; }
    .pjb-rt--them .pjb-rt__track { min-height: 112px; }
    .pjb-rt__lbl { font-size: 11px; }
    .pjb-rt__foot { font-size: 12px; }

    .pjb-mq > .pjb-ai { --s: 42px; }
    .pjb-zero { padding: 8px 12px 8px 8px; gap: 8px; }
    .pjb-zero__ok { width: 30px; height: 30px; }
    .pjb-zero b { font-size: 14px; }

    .pjb-inf { width: 50%; left: 2%; }
    .pjb-meter { width: 44%; right: 4%; padding: 10px; }
    .pjb-meter__row, .pjb-meter__row small { font-size: 11.5px; }
    .pjb-meter__row b { font-size: 17px; }
    .pjb-ring { left: 5%; width: min(40%, 150px); }
    .pjb-ring__plus { right: -12%; padding: 3px 8px; font-size: 12px; }

    .pjb-trip__pin { padding: 2px 8px 2px 2px; }
    .pjb-trip__flag { width: 15px; height: 15px; }
    .pjb-trip__hello { padding: 6px 10px 6px 8px; }
    .pjb-trip__hello b { font-size: 11.5px; }

    .pjb-mail { width: 76%; right: 6%; bottom: 7%; padding: 7px; }
    .pjb-mail__head small { display: none; }
    .pjb-mail__av { width: 18px; height: 18px; }
    .pjb-mail__qr { width: 44%; margin-top: 5px; }

    .pjb-dv { width: 34px; height: 34px; border-radius: 11px; }
    .pjb-dv svg { width: 18px; height: 18px; }
    .pjb-core { width: 52px; height: 52px; }

    .pjb-t--net .pjb-t__tx { max-width: none; }
    .pjb-t--net .pjb-t__ill { position: relative; height: 200px; }
    .pjb-jmap { right: 3%; top: 0; height: 100%; }
    .pjb-stat { left: 18px; bottom: 18px; }
    .pjb-stat b { font-size: 40px; }
    .pjb-stat span { font-size: 12.5px; }

    .pjb-chat-top { right: auto; width: min(64%, 240px); padding: 4px 6px; gap: 6px; }
    .pjb-chat-top b { font-size: 11.5px; }
    .pjb-chat-top small { font-size: 10.5px; }
    .pjb-chat { right: 29%; top: 38%; gap: 4px; }
    .pjb-bub { max-width: 100%; padding: 7px 10px; border-radius: 13px; font-size: 12px; }
    .pjb-masc { width: 38cqw; }
  }

.pj-bento{--red:#D7375F;--red-dark:#B42A4E;--red-pale:#FBE3EA;--red-border:#F2BFD0;--ink:#2E1E1B;--navy:#2E1E1B;--sub:#5A4540;--line:#F0DCD8;--bg-soft:#FFF7F3;--ok:#12B76A;
  --page-width:1200px;--page-margin:0px;--sec-y:0px;font-family:var(--ui);font-size:14px;line-height:1.6;color:var(--ink);background:transparent;margin-top:28px}
.pj-bento__in{padding:0;max-width:none}
:where(.pj-bento) *{margin:0}
:where(.pj-bento) img,:where(.pj-bento) svg{display:block;max-width:100%;height:auto}
:where(.pj-bento) b,:where(.pj-bento) strong{font-weight:bolder}
.pj-bento .pjb-t__tx h3{font:400 23px/1.12 var(--titre);letter-spacing:0;color:var(--choco)}
.pj-bento .pjb-t__tx p{font-size:14px;color:var(--choco-2)}
.pj-bento .pjb-t{border-radius:22px}
.pj-offscreen *,.pj-offscreen *::before,.pj-offscreen *::after{animation-play-state:paused!important}
/* trois tuiles sur deux rangées ; sur mobile, l'IP (la plus haute) laisse la place aux applis et à l'illimité */
.pj-bento .pjb-grid{grid-template-rows:300px 300px}
@media (max-width:1024px) and (min-width:761px){.pj-bento .pjb-grid{grid-template-rows:320px 320px}}
@media (max-width:760px){.pj-bento .pjb-t--ip{display:none}}