/* Bizonik : site vitrine. DA « Peaux » de l'app (16/10/2026).
   Aucun script, aucune ressource externe, aucun cookie. Polices hébergées ici.
   Six peaux, de l'ivoire au cacao ; une seule couleur d'action (cannelle en
   clair, miel en sombre) ; jamais de rouge ni de vert vifs. */
/* Généré par outils/polices.py : ne pas modifier à la main. */
@font-face { font-family: "Bricolage Grotesque"; src: url("/assets/fonts/bricolage-latin.57005c7f0f.woff2") format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+000A, U+0020, U+0025, U+0027-0029, U+002C-003B, U+003D-0057, U+0059-005A, U+0061-007A, U+007C, U+00A0, U+00AB, U+00BB, U+00C0, U+00C2, U+00C7-00CA, U+00CE, U+00D4, U+00D9-00DB, U+00E0-00E2, U+00E7-00EB, U+00EE-00EF, U+00F3-00F4, U+00F9, U+00FB-00FC, U+0152-0153, U+2013-2014, U+2019, U+201C-201D, U+2026, U+202F, U+20AC; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/assets/fonts/bricolage-latin-reste.d44a7c66ea.woff2") format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0000-0009, U+000B-001F, U+0021-0024, U+0026, U+002A-002B, U+003C, U+0058, U+005B-0060, U+007B, U+007D-009F, U+00A1-00AA, U+00AC-00BA, U+00BC-00BF, U+00C1, U+00C3-00C6, U+00CB-00CD, U+00CF-00D3, U+00D5-00D8, U+00DC-00DF, U+00E3-00E6, U+00EC-00ED, U+00F0-00F2, U+00F5-00F8, U+00FA, U+00FD-00FF, U+0131, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-2012, U+2015-2018, U+201A-201B, U+201E-2025, U+2027-202E, U+2030-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/assets/fonts/bricolage-latin-ext.1d04719f13.woff2") format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin.2eb52a2103.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+000A, U+0020, U+0025, U+0027-0029, U+002C-003B, U+003D-0057, U+0059-005A, U+0061-007A, U+007C, U+00A0, U+00AB, U+00BB, U+00C0, U+00C2, U+00C7-00CA, U+00CE, U+00D4, U+00D9-00DB, U+00E0-00E2, U+00E7-00EB, U+00EE-00EF, U+00F3-00F4, U+00F9, U+00FB-00FC, U+0152-0153, U+2013-2014, U+2019, U+201C-201D, U+2026, U+202F, U+20AC; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin-reste.3ad9ec65e8.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-0009, U+000B-001F, U+0021-0024, U+0026, U+002A-002B, U+003C, U+0058, U+005B-0060, U+007B, U+007D-009F, U+00A1-00AA, U+00AC-00BA, U+00BC-00BF, U+00C1, U+00C3-00C6, U+00CB-00CD, U+00CF-00D3, U+00D5-00D8, U+00DC-00DF, U+00E3-00E6, U+00EC-00ED, U+00F0-00F2, U+00F5-00F8, U+00FA, U+00FD-00FF, U+0131, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-2012, U+2015-2018, U+201A-201B, U+201E-2025, U+2027-202E, U+2030-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin-ext.a28eb6d3cc.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light dark;
  --peau-1: #f6ead9; --peau-2: #ebcfaa; --peau-3: #d9a874; --peau-4: #bd8550; --peau-5: #8a5a34; --peau-6: #4a2e1c;
  --page: #fbf6ef; --carte: #ffffff; --creux: #f3e9dc; --teinte: #f6ead9;
  --encre: #241811; --encre-2: #6b5d50; --filet: rgb(36 24 17 / .10);
  --accent: #bd8550; --accent-txt: #8a5a34;
  --action: #8a5a34; --sur-action: #fbf6ef;
  --ombre: 0 1px 2px rgb(36 24 17 / .04), 0 10px 30px -8px rgb(36 24 17 / .12);
  --ombre-forte: 0 2px 6px rgb(36 24 17 / .06), 0 30px 60px -20px rgb(74 46 28 / .35);
  --verre: rgb(251 246 239 / .72);
  --halo: rgb(217 168 116 / .22);
  --sombre-page: #1c130d; --sombre-carte: #2a1d14; --sombre-encre: #f6ead9; --sombre-encre-2: #c9b8a5;
  --rayon: 28px; --max: 72rem;
  --titre: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --texte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #110c09; --carte: #261d16; --creux: #3a2e24; --teinte: #432f1f;
    --encre: #f6ead9; --encre-2: #b8aa9b; --filet: rgb(246 234 217 / .12);
    --accent: #d9a874; --accent-txt: #ebcfaa;
    --action: #d9a874; --sur-action: #110c09;
    --ombre: 0 0 0 1px rgb(246 234 217 / .07), inset 0 1px 0 rgb(246 234 217 / .06);
    --ombre-forte: 0 0 0 1px rgb(246 234 217 / .08), 0 30px 60px -20px rgb(0 0 0 / .6);
    --verre: rgb(38 29 22 / .66);
    --halo: rgb(217 168 116 / .10);
    --sombre-page: #1e1611; --sombre-carte: #2c2219; --sombre-encre: #f6ead9; --sombre-encre-2: #c3b3a2;
  }
}
/* Bloc sombre : il redéfinit les couleurs pour tout ce qu'il contient. */
.sombre {
  --page: var(--sombre-page); --carte: var(--sombre-carte); --creux: #3a2b20; --teinte: #3b2a1d;
  --encre: var(--sombre-encre); --encre-2: var(--sombre-encre-2); --filet: rgb(246 234 217 / .12);
  --accent: #d9a874; --accent-txt: #ebcfaa; --action: #d9a874; --sur-action: #110c09;
  --ombre: 0 0 0 1px rgb(246 234 217 / .08), inset 0 1px 0 rgb(246 234 217 / .07);
  --halo: rgb(217 168 116 / .12);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 6rem; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; background: var(--page); color: var(--encre); font: 400 1.0625rem/1.6 var(--texte); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1rem; }
h1, h2, h3 { font-family: var(--titre); font-weight: 750; letter-spacing: -.025em; line-height: 1.06; margin: 0 0 1rem; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 5.6vw, 3.6rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.3rem; letter-spacing: -.015em; line-height: 1.2; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--peau-2); color: #241811; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.passer { position: absolute; left: 1rem; top: -4rem; z-index: 50; background: var(--action); color: var(--sur-action); padding: .6rem 1rem; border-radius: 999px; text-decoration: none; font-weight: 600; }
.passer:focus { top: 1rem; }
.cadre { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 768px) { .cadre { padding: 0 2rem; } }
.surtitre { display: inline-flex; align-items: center; gap: .6rem; font: 600 .9rem/1.2 var(--texte); color: var(--accent-txt); letter-spacing: .01em; margin-bottom: 1rem; }
.chapo { font-size: 1.2rem; color: var(--encre-2); max-width: 36rem; }
.centre { text-align: center; } .centre .chapo { margin-left: auto; margin-right: auto; }
.fort { color: var(--encre); font-weight: 600; }

/* Les six peaux : la signature de marque. */
.peaux { display: inline-flex; gap: 3px; }
.peaux i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(36 24 17 / .10); }
.peaux i:nth-child(1) { background: var(--peau-1); } .peaux i:nth-child(2) { background: var(--peau-2); } .peaux i:nth-child(3) { background: var(--peau-3); }
.peaux i:nth-child(4) { background: var(--peau-4); } .peaux i:nth-child(5) { background: var(--peau-5); } .peaux i:nth-child(6) { background: var(--peau-6); box-shadow: inset 0 0 0 1px rgb(246 234 217 / .25); }
.bande { display: flex; gap: 3px; height: 6px; max-width: 14rem; }
.bande i { flex: 1; border-radius: 999px; }
.bande i:nth-child(1) { background: var(--peau-1); box-shadow: inset 0 0 0 1px rgb(36 24 17 / .12); } .bande i:nth-child(2) { background: var(--peau-2); } .bande i:nth-child(3) { background: var(--peau-3); }
.bande i:nth-child(4) { background: var(--peau-4); } .bande i:nth-child(5) { background: var(--peau-5); } .bande i:nth-child(6) { background: var(--peau-6); }

/* ---------- En-tête : capsule en verre, comme les barres de l'app ---------- */
.entete { position: sticky; top: .75rem; z-index: 40; margin: .75rem auto 0; padding: 0 .75rem; max-width: calc(var(--max) - 1rem); }
.capsule { display: flex; align-items: center; gap: 1rem; padding: .5rem .5rem .5rem .75rem; border-radius: 999px; background: var(--verre);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), 0 0 0 1px var(--filet), 0 12px 32px -14px rgb(36 24 17 / .28); }
@media (prefers-color-scheme: dark) { .capsule { box-shadow: inset 0 1px 0 rgb(246 234 217 / .10), 0 0 0 1px var(--filet), 0 12px 32px -14px rgb(0 0 0 / .7); } }
@media (prefers-reduced-transparency: reduce) { .capsule { background: var(--carte); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.marque { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font: 750 1.25rem/1 var(--titre); letter-spacing: -.02em; flex-shrink: 0; }
.marque img { width: 36px; height: 36px; border-radius: 10px; }
.nav { display: none; gap: .25rem; margin: 0 auto; }
.nav a, .langue { text-decoration: none; font-weight: 500; font-size: .95rem; padding: .55rem .9rem; border-radius: 999px; color: var(--encre-2); transition: background .25s, color .25s; }
.nav a:hover, .langue:hover { color: var(--encre); background: rgb(189 133 80 / .12); }
.nav a[aria-current="page"] { color: var(--encre); background: var(--carte); box-shadow: var(--ombre); }
.entete .btn { padding: .65rem 1.1rem; font-size: .95rem; }
.droite { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
@media (min-width: 960px) { .nav { display: flex; } .droite { margin-left: 0; } .menu { display: none; } }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { background: rgb(189 133 80 / .12); }
.menu summary svg { width: 22px; height: 22px; }
.menu .ferme { display: none; } .menu[open] .ouvre { display: none; } .menu[open] .ferme { display: block; }
.feuille { position: absolute; right: 0; top: calc(100% + .6rem); width: min(20rem, calc(100vw - 2rem)); padding: .6rem; border-radius: 24px; background: var(--verre);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: 0 0 0 1px var(--filet), 0 24px 48px -16px rgb(36 24 17 / .35); display: grid; }
@media (prefers-reduced-transparency: reduce) { .feuille { background: var(--carte); } }
.feuille a { text-decoration: none; padding: .85rem 1rem; border-radius: 16px; font-weight: 550; }
.feuille a:hover, .feuille a[aria-current="page"] { background: var(--carte); }
@media (prefers-reduced-motion: no-preference) { .menu[open] .feuille { animation: monte .38s cubic-bezier(.34, 1.4, .64, 1) backwards; } }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; padding: .85rem 1.5rem; border-radius: 999px; border: 0;
  font: 650 1.02rem/1.1 var(--texte); text-decoration: none; cursor: pointer; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s, background .3s; }
.btn svg { width: 18px; height: 18px; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(.97); }
.btn-action { background: var(--action); color: var(--sur-action); box-shadow: 0 1px 0 rgb(255 255 255 / .18) inset, 0 10px 24px -10px rgb(138 90 52 / .7); }
.btn-action:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgb(255 255 255 / .18) inset, 0 16px 30px -12px rgb(138 90 52 / .8); }
.btn-doux { background: var(--teinte); color: var(--accent-txt); }
.btn-doux:hover { transform: translateY(-2px); }
.store { display: inline-flex; align-items: center; gap: .65rem; min-height: 48px; padding: .55rem 1.2rem .55rem 1rem; border-radius: 999px; background: var(--carte); color: var(--encre); box-shadow: var(--ombre); text-decoration: none; }
.store svg { width: 22px; height: 22px; }
.store span { display: grid; line-height: 1.15; font-weight: 650; }
.store small { font-size: .72rem; font-weight: 500; color: var(--encre-2); }
a.store:hover { transform: translateY(-2px); }
.rassure { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: 1.4rem; font-size: .92rem; color: var(--encre-2); list-style: none; padding: 0; }
.rassure li { display: inline-flex; align-items: center; gap: .4rem; }
.rassure svg { width: 16px; height: 16px; color: var(--accent-txt); }
.lien { display: inline-flex; align-items: center; gap: .4rem; font-weight: 650; color: var(--accent-txt); text-decoration: none; }
.lien svg { width: 18px; height: 18px; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.lien:hover svg { transform: translateX(3px); }

/* ---------- Sections ---------- */
.sec { position: relative; padding: 5rem 0; }
@media (min-width: 900px) { .sec { padding: 7rem 0; } }
.sec.sombre { background: var(--page); color: var(--encre); }
.sec.teinte { background: linear-gradient(180deg, var(--creux), var(--page)); }
.halo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.halo::before { content: ""; position: absolute; width: 60rem; height: 60rem; left: 50%; top: -30rem; transform: translateX(-10%); background: radial-gradient(closest-side, var(--halo), transparent); }
.sec > .cadre { position: relative; z-index: 1; }
.tete-sec { max-width: 42rem; margin-bottom: 3rem; }
.tete-sec.centre { margin-left: auto; margin-right: auto; }

/* ---------- Accueil : héros ---------- */
.heros { padding: 3.5rem 0 4rem; overflow: hidden; }
.heros .grille { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 960px) { .heros { padding: 5rem 0 6rem; } .heros .grille { grid-template-columns: 1.05fr .95fr; gap: 2rem; } }
.heros h1 em { font-style: normal; color: var(--accent-txt); }
.heros .actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.scene { position: relative; display: grid; place-items: center; min-height: 31rem; isolation: isolate; }
.scene::before { content: ""; position: absolute; width: min(34rem, 110%); aspect-ratio: 1; z-index: -2; background: radial-gradient(closest-side, var(--halo), transparent); pointer-events: none; }
.scene .bande { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); width: 10rem; }
.tels { position: relative; display: flex; justify-content: center; align-items: flex-end; }
.tel { position: relative; width: 15.5rem; aspect-ratio: 390 / 844; padding: 9px; border-radius: 44px; background: #120c08; box-shadow: var(--ombre-forte), inset 0 0 0 1.5px rgb(255 255 255 / .12); }
.tel img, .tel picture { width: 100%; height: 100%; border-radius: 36px; object-fit: cover; object-position: top; }
.tel picture img { border-radius: 36px; }
.tel::after { content: ""; position: absolute; top: 18px; left: 50%; width: 30%; height: 20px; transform: translateX(-50%); border-radius: 999px; background: #120c08; }
.tels .tel + .tel { margin-left: -4.5rem; transform: translateY(-2.5rem) rotate(4deg); z-index: -1; width: 13.5rem; }
.tels .tel:first-child { transform: rotate(-3deg); }
@media (min-width: 960px) { .tel { width: 17rem; } .tels .tel + .tel { width: 15rem; } }

/* ---------- Mythe ---------- */
.mythe .trio { display: flex; justify-content: center; align-items: flex-end; gap: clamp(1rem, 4vw, 3rem); margin: 3rem auto 0; max-width: 46rem; }
.mythe .trio svg { height: auto; }
.mythe .trio .l { width: 22%; color: var(--peau-3); } .mythe .trio .g { width: 30%; color: var(--peau-4); } .mythe .trio .b { width: 42%; color: var(--peau-2); }
.mythe .sol { height: 2px; max-width: 46rem; margin: 0 auto; background: linear-gradient(90deg, transparent, var(--filet) 20%, var(--filet) 80%, transparent); }
.mythe h2 .barre { position: relative; white-space: nowrap; }
.mythe h2 .faux { color: var(--accent); }

/* ---------- Fonctionnalités en rangées alternées ---------- */
.rangees { display: grid; gap: 5rem; }
.rangee { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .rangee { grid-template-columns: 1fr 1fr; gap: 4rem; } .rangee:nth-child(even) .visuel { order: -1; } }
.rangee .visuel { position: relative; display: grid; place-items: center; padding: 2.5rem 1rem; border-radius: 36px; background: var(--creux); overflow: hidden; }
.rangee .visuel::before { content: ""; position: absolute; inset: auto -20% -40% -20%; height: 70%; background: radial-gradient(closest-side, var(--halo), transparent); }
.rangee .visuel .tel { width: 15rem; }
.carte-ecran { position: relative; width: min(19rem, 100%); border-radius: 30px; overflow: hidden; box-shadow: var(--ombre-forte); }
.carte-ecran img { width: 100%; }
.puces { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1.25rem 0 0; }
.puces li { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem; border-radius: 999px; background: var(--carte); box-shadow: var(--ombre); font-size: .92rem; font-weight: 550; }
.puces svg { width: 16px; height: 16px; color: var(--accent-txt); }
.formule-tag { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem .35rem .45rem; border-radius: 999px; background: var(--teinte); color: var(--accent-txt); font-size: .85rem; font-weight: 650; margin-bottom: 1rem; }
.formule-tag svg { width: 22px; height: 22px; color: var(--peau-4); }
.formule-tag.gratuit { padding-left: .8rem; }

/* ---------- Chiffres ---------- */
.chiffres { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 900px) { .chiffres { grid-template-columns: repeat(4, 1fr); } }
.chiffre { padding: 1.6rem 1.4rem; border-radius: var(--rayon); background: var(--carte); box-shadow: var(--ombre); }
.chiffre b { display: block; font: 800 clamp(2.2rem, 4vw, 3rem)/1 var(--titre); letter-spacing: -.03em; color: var(--accent-txt); margin-bottom: .5rem; }
.chiffre span { color: var(--encre-2); font-size: .98rem; }

/* ---------- Formules ---------- */
.offres { display: grid; gap: 1.25rem; align-items: stretch; }
@media (min-width: 900px) { .offres { grid-template-columns: repeat(3, 1fr); } }
.offre { position: relative; display: flex; flex-direction: column; padding: 1.75rem; border-radius: var(--rayon); background: var(--carte); box-shadow: var(--ombre); }
.offre .tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.offre .tete { min-height: 52px; }
.offre .tete svg { height: 48px; width: auto; color: var(--peau-4); }
.offre h3 { font-size: 1.6rem; margin: 0; }
.offre .accroche { color: var(--encre-2); min-height: 3.2em; }
.prix { font: 800 2.4rem/1 var(--titre); letter-spacing: -.03em; margin: .5rem 0 .25rem; }
.prix small { font: 500 1rem var(--texte); color: var(--encre-2); letter-spacing: 0; }
.prix-an { font-size: .95rem; color: var(--encre-2); margin-bottom: 1.25rem; }
.offre ul { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .6rem; font-size: .98rem; }
.offre li { display: grid; grid-template-columns: 20px 1fr; gap: .6rem; align-items: start; }
.offre li svg { width: 20px; height: 20px; margin-top: .1rem; color: var(--accent-txt); }
.offre .btn { margin-top: auto; }
.offre.vedette { background: var(--sombre-page); color: var(--sombre-encre); --encre-2: var(--sombre-encre-2); --accent-txt: #ebcfaa; --teinte: #3b2a1d; --carte: #2a1d14; box-shadow: var(--ombre-forte); }
@media (prefers-color-scheme: dark) { .offre.vedette { background: #3a2b20; box-shadow: 0 0 0 1.5px var(--peau-3), var(--ombre-forte); } }
.offre.vedette .tete svg { color: var(--peau-3); }
.offre.vedette .btn-action { background: #d9a874; color: #110c09; }
.etiquette { position: absolute; top: -.8rem; left: 1.75rem; padding: .3rem .8rem; border-radius: 999px; background: var(--peau-3); color: #241811; font-size: .8rem; font-weight: 700; }
.mentions { margin-top: 2rem; font-size: .9rem; color: var(--encre-2); max-width: 52rem; }
.encart { display: grid; gap: 1rem; align-items: center; padding: 1.5rem 1.75rem; margin-top: 2rem; border-radius: var(--rayon); background: var(--teinte); }
@media (min-width: 760px) { .encart { grid-template-columns: auto 1fr auto; } }
.encart svg.ic { width: 40px; height: 40px; color: var(--accent-txt); }
.encart p { margin: 0; }

/* Tableau comparatif */
.tableau-cadre { overflow-x: auto; border-radius: var(--rayon); background: var(--carte); box-shadow: var(--ombre); scrollbar-width: none; }
.tableau-cadre::-webkit-scrollbar { display: none; }
table { width: 100%; border-collapse: collapse; min-width: 36rem; font-size: .97rem; }
th, td { padding: .9rem 1rem; text-align: center; border-bottom: 1px solid var(--filet); }
th:first-child, td:first-child { text-align: left; }
thead th { font: 700 1.05rem var(--titre); padding-top: 1.25rem; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody th { font-weight: 500; }
td svg { width: 20px; height: 20px; margin: 0 auto; color: var(--accent-txt); }
td .non { display: inline-block; width: 12px; height: 2px; border-radius: 2px; background: var(--filet); vertical-align: middle; }
.col-vedette { background: rgb(189 133 80 / .08); }

/* ---------- Confiance / données ---------- */
.trois { display: grid; gap: 1rem; }
@media (min-width: 900px) { .trois { grid-template-columns: repeat(3, 1fr); } }
.tuile { padding: 1.6rem; border-radius: var(--rayon); background: var(--carte); box-shadow: var(--ombre); }
.tuile .ic { width: 48px; height: 48px; padding: 12px; border-radius: 16px; background: var(--teinte); color: var(--accent-txt); margin-bottom: 1rem; }
.tuile h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.tuile p { margin: 0; color: var(--encre-2); font-size: .98rem; }
.sante { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; margin-top: 1.5rem; padding: 1.25rem 1.5rem; border-radius: 22px; background: var(--teinte); font-size: .95rem; }
.sante svg { width: 24px; height: 24px; color: var(--accent-txt); margin-top: .15rem; }
.sante p { margin: 0; }

/* ---------- Questions ---------- */
.faq { display: grid; gap: .75rem; max-width: 50rem; }
.faq.centre { margin: 0 auto; text-align: left; }
.faq details { border-radius: 22px; background: var(--carte); box-shadow: var(--ombre); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 1.4rem; font-weight: 650; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--accent-txt); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq .rep { padding: 0 1.4rem 1.25rem; color: var(--encre-2); }
.faq .rep p:last-child { margin-bottom: 0; }
.faq .rep a { color: var(--accent-txt); }
@media (prefers-reduced-motion: no-preference) { .faq details[open] .rep { animation: monte .4s cubic-bezier(.34, 1.3, .64, 1) backwards; } }

/* ---------- Appel final ---------- */
.final { text-align: center; }
.final .logo { width: 88px; height: 88px; margin: 0 auto 1.5rem; border-radius: 24px; box-shadow: 0 0 0 1px rgb(246 234 217 / .12), 0 20px 40px -12px rgb(0 0 0 / .6); }
.final .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2rem; }

/* ---------- Pages intérieures ---------- */
.tete-page { padding: 4rem 0 2.5rem; }
@media (min-width: 900px) { .tete-page { padding: 5.5rem 0 3rem; } }
.doc { max-width: 46rem; }
.doc-carte { padding: 1.75rem 1.4rem; border-radius: var(--rayon); background: var(--carte); box-shadow: var(--ombre); margin-bottom: 5rem; }
@media (min-width: 768px) { .doc-carte { padding: 3rem 3.25rem; } }
.doc-carte h1 { font-size: clamp(2.1rem, 4.6vw, 3rem); }
.doc-carte h2 { font-size: 1.45rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--filet); }
.doc-carte h3 { font-size: 1.1rem; margin-top: 1.75rem; }
.doc-carte a { color: var(--accent-txt); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.doc-carte ul, .doc-carte ol { padding-left: 1.25rem; margin: 0 0 1rem; }
.doc-carte li { margin-bottom: .35rem; }
.doc-carte li::marker { color: var(--accent); }
.doc-carte table { min-width: 0; font-size: .92rem; margin-bottom: 1rem; }
.doc-carte th, .doc-carte td { text-align: left; vertical-align: top; padding: .6rem .5rem; }
.doc-carte .table-wrap, .doc-carte .tableau-doc { overflow-x: auto; }
.doc-carte blockquote { margin: 1rem 0; padding: 1rem 1.25rem; border-radius: 18px; background: var(--teinte); }
.doc-carte hr { border: 0; border-top: 1px solid var(--filet); margin: 2rem 0; }
.doc-carte code { font-size: .9em; }
.contact { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 760px) { .contact { grid-template-columns: 1fr 1fr; } }

/* ---------- Pied de page ---------- */
.pied { padding: 4rem 0 2.5rem; font-size: .93rem; }
.pied .haut { display: grid; gap: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--filet); }
@media (min-width: 900px) { .pied .haut { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.pied h2 { font: 650 .95rem var(--texte); letter-spacing: 0; margin-bottom: .9rem; color: var(--encre); }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.pied a { color: var(--encre-2); text-decoration: none; }
.pied a:hover { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
.pied .legal { padding-top: 1.75rem; color: var(--encre-2); font-size: .85rem; }
.pied .legal a { text-decoration: underline; }
.pied .marque { margin-bottom: 1rem; }
.pied .devise { color: var(--encre-2); max-width: 20rem; }

/* ---------- 404 ---------- */
.introuvable { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 4rem 0; }
.introuvable .cascade > svg { width: min(22rem, 80%); margin: 0 auto 2rem; color: var(--peau-3); }

/* ---------- Mouvement : rebonds légers, jamais indispensables ---------- */
@keyframes monte { from { opacity: 0; transform: translateY(14px) scale(.985); } 70% { opacity: 1; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
@keyframes pose { from { opacity: 0; transform: translateY(26px) rotate(var(--r, 0deg)); } 75% { opacity: 1; transform: translateY(-3px) rotate(var(--r, 0deg)); } to { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); } }
@media (prefers-reduced-motion: no-preference) {
  .cascade > * { animation: monte .7s cubic-bezier(.34, 1.3, .64, 1) backwards; }
  .cascade > :nth-child(2) { animation-delay: .07s; } .cascade > :nth-child(3) { animation-delay: .14s; } .cascade > :nth-child(4) { animation-delay: .21s; } .cascade > :nth-child(5) { animation-delay: .28s; } .cascade > :nth-child(6) { animation-delay: .35s; }
  .tels .tel:first-child { --r: -3deg; animation: pose .9s .15s cubic-bezier(.34, 1.3, .64, 1) backwards; }
  /* Apparition au défilement : seulement là où le navigateur sait la lier au
     défilement. Ailleurs, tout est visible d'emblée (rien ne reste caché). */
  @supports (animation-timeline: view()) {
    .apparait { animation: monte linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media print { .apparait, .cascade > * { animation: none !important; opacity: 1 !important; transform: none !important; } .entete, .menu { display: none; } }
/* Téléphone : les visuels ne débordent jamais de l'écran. */
.heros .grille > *, .rangee > * { min-width: 0; }
@media (max-width: 959px) {
  .scene { min-height: 0; padding: 1rem 0 2rem; }
  .tel { width: 12.5rem; border-radius: 36px; padding: 7px; }
  .tel img, .tel picture, .tel picture img { border-radius: 30px; }
  .tels .tel + .tel { width: 11rem; margin-left: -3.5rem; }
  .rangee .visuel .tel { width: 13rem; }
  .mythe .trio { padding: 0 .5rem; }
}
@media (max-width: 380px) { .entete .btn { padding: .6rem .9rem; } .marque span { display: none; } }
@media (max-width: 520px) { .chiffre { padding: 1.2rem 1.1rem; } .chiffre span { font-size: .9rem; display: block; line-height: 1.45; } }
.sombre { background: var(--page); color: var(--encre); }
.introuvable .actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.5rem; }
.introuvable .btn, .introuvable .lien { white-space: nowrap; }
.doc { padding-top: 3rem; } @media (min-width: 900px) { .doc { padding-top: 4.5rem; } }
.btn { white-space: nowrap; } @media (max-width: 479px) { .droite .langue { display: none; } }

/* =====================================================================
   v3 (28/10/2026) : connexion, « Comment ça marche », compte web + iPhone,
   pastilles du haut de page, pied de page complet, petits rebonds au survol.
   Toujours sans script ; « réduire les animations » coupe tout (règle plus haut).
   ===================================================================== */
/* Lien « Se connecter » : discret, à côté du bouton principal. */
.connexion { display: none; text-decoration: none; font-weight: 600; font-size: .95rem; padding: .55rem .9rem; border-radius: 999px; color: var(--encre); transition: background .25s, color .25s; }
.connexion:hover { background: rgb(189 133 80 / .12); }
@media (min-width: 560px) { .connexion { display: inline-flex; } }
.feuille-compte { display: grid; gap: .5rem; margin-top: .4rem; padding: .75rem .4rem .3rem; border-top: 1px solid var(--filet); }
.feuille-compte .btn { justify-content: center; }
.feuille-compte .btn svg { width: 18px; height: 18px; }
.feuille-compte p { margin: 0; padding: 0 .6rem; font-size: .85rem; color: var(--encre-2); text-align: center; }
.deja { margin: 1rem 0 0; font-size: .95rem; color: var(--encre-2); }
.deja a { display: inline-flex; align-items: center; gap: .3rem; font-weight: 650; color: var(--accent-txt); text-decoration: none; }
.deja a svg { width: 16px; height: 16px; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.deja a:hover svg { transform: translateX(3px); }
.final .deja { text-align: center; color: var(--encre-2); }
.final .chapo { margin-left: auto; margin-right: auto; }

/* Haut de page : trois pastilles en verre autour des téléphones (des fonctions réelles, pas des chiffres). */
.pastilles { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.pastille { position: absolute; display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .9rem; border-radius: 999px; font-size: .88rem; font-weight: 650; white-space: nowrap;
  background: var(--verre); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 0 0 1px var(--filet), 0 14px 30px -14px rgb(36 24 17 / .35); }
@media (prefers-color-scheme: dark) { .pastille { box-shadow: inset 0 1px 0 rgb(246 234 217 / .10), 0 0 0 1px var(--filet), 0 14px 30px -14px rgb(0 0 0 / .7); } }
@media (prefers-reduced-transparency: reduce) { .pastille { background: var(--carte); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.pastille svg { width: 18px; height: 18px; color: var(--accent-txt); }
.pastille.p1 { left: -1.25rem; top: 30%; } .pastille.p2 { right: -.5rem; top: 58%; } .pastille.p3 { left: .5rem; bottom: 9%; }
@media (max-width: 959px) { .pastille { font-size: .8rem; padding: .45rem .75rem; } .pastille.p1 { left: 1%; top: 0; } .pastille.p2 { right: 1%; top: 48%; } .pastille.p3 { left: 3%; bottom: 6%; } }
@media (max-width: 359px) { .pastille.p2 { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .pastille { animation: monte .7s cubic-bezier(.34, 1.3, .64, 1) backwards; }
  .pastille.p1 { animation-delay: .55s; } .pastille.p2 { animation-delay: .7s; } .pastille.p3 { animation-delay: .85s; }
}

/* Comment ça marche : trois cartes, un vrai visuel chacune. */
.etapes { display: grid; gap: 1.25rem; list-style: none; padding: 0; margin: 0; counter-reset: etape; }
@media (min-width: 900px) { .etapes { grid-template-columns: repeat(3, 1fr); } }
.etape { display: flex; flex-direction: column; border-radius: var(--rayon); background: var(--carte); box-shadow: var(--ombre); overflow: hidden; }
.etape-visuel { position: relative; height: 15rem; display: grid; place-items: start center; padding: 1.5rem 1.5rem 0; background: var(--creux); overflow: hidden; }
.etape-visuel img, .etape-visuel picture { width: min(15rem, 100%); border-radius: 22px 22px 0 0; box-shadow: var(--ombre-forte); }
.etape-visuel.adresse { place-items: center; align-content: center; gap: 1rem; padding: 1.5rem; }
.etape-visuel.adresse img { width: 56px; height: 56px; border-radius: 16px; box-shadow: var(--ombre-forte); }
.etape-visuel.adresse .bande { width: 8rem; }
.barre-adresse { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1.1rem; border-radius: 999px; background: var(--carte); box-shadow: var(--ombre); font-weight: 600; font-size: .95rem; color: var(--encre); }
.barre-adresse svg { width: 15px; height: 15px; color: var(--accent-txt); }
.etape-texte { position: relative; padding: 1.5rem 1.5rem 1.6rem; }
.etape .num { display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: .8rem; border-radius: 999px; background: var(--action); color: var(--sur-action); font: 750 1rem/1 var(--titre); }
.etape h3 { margin-bottom: .35rem; }
.etape p { margin: 0; color: var(--encre-2); font-size: .98rem; }
.actions-centre { display: flex; justify-content: center; margin-top: 2.5rem; }

/* Un seul compte, partout. */
.compte-grille { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .compte-grille { grid-template-columns: 1.1fr .9fr; gap: 4rem; } }
.compte .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; }
.compte .btn svg { width: 18px; height: 18px; }
.appareils { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; max-width: 26rem; margin: 0 auto; justify-items: center; }
.app-tuile { display: grid; justify-items: center; gap: .6rem; width: 100%; padding: 1.6rem 1rem; border-radius: var(--rayon); background: var(--carte); box-shadow: var(--ombre); font-weight: 650; }
.app-tuile svg { width: 44px; height: 44px; color: var(--accent); }
.lien-sync { display: flex; align-items: center; gap: .35rem; color: var(--accent); }
.lien-sync i { width: 1.1rem; height: 2px; border-radius: 2px; background: currentColor; opacity: .55; }
.lien-sync svg { width: 26px; height: 26px; }
.appareils .barre-adresse { grid-column: 1 / -1; margin-top: .5rem; }

/* Pied de page complet. */
.pied-compte { display: flex; align-items: center; gap: .4rem; margin: 1.25rem 0 0; color: var(--encre-2); font-size: .88rem; }
.pied-compte svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.pied-compte span { margin-left: .2rem; }
.pied-langue { margin: 1.4rem 0 0; }
.pied-langue a { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem; border-radius: 999px; box-shadow: 0 0 0 1px var(--filet); }
.pied-langue svg { width: 16px; height: 16px; }
.pied .legal p { margin-bottom: .5rem; }

/* Petits rebonds au survol (pointeur seulement, jamais au toucher). */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tuile, .offre, .etape, .chiffre, .app-tuile { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s; }
  .tuile:hover, .offre:hover, .etape:hover, .chiffre:hover, .app-tuile:hover { transform: translateY(-4px); }
  .etape-visuel img { transition: transform .5s cubic-bezier(.34, 1.4, .64, 1); }
  .etape:hover .etape-visuel img { transform: translateY(-6px); }
}

/* Téléphone : haut de page plus serré, pour voir les téléphones plus tôt. */
@media (max-width: 959px) {
  .heros { padding: 2rem 0 2.5rem; }
  .heros .grille { gap: 1.5rem; }
  .heros .chapo { font-size: 1.08rem; }
  .heros .actions { margin-top: 1.5rem; }
  .rassure { margin-top: 1rem; }
  .scene { padding: 2.5rem 0 1rem; }
  .etape-visuel { height: 13rem; }
}
/* v3 : rangées de fonctions plus serrées, compte plus présent. */
.rangees { gap: 3.5rem; }
@media (min-width: 900px) { .rangees { gap: 4.5rem; } .rangee .visuel { padding: 2rem 1rem; } }
.appareils { max-width: 30rem; }
.app-tuile { padding: 2rem 1rem; }
.app-tuile svg { width: 52px; height: 52px; }
/* v3 : la feuille du menu est DANS la capsule en verre ; un flou imbriqué ne voit rien derrière (défaut de la v2, texte de la page lisible à travers).
   Fond presque plein, même teinte que le verre. */
.feuille { background: #fbf6ef; -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-color-scheme: dark) { .feuille { background: #261d16; } }
/* v3 : le tableau comparatif tient dans l'écran du téléphone (avant : seule la colonne « Gratuit » se voyait, le reste défilait sans indice). */
@media (max-width: 640px) { table { min-width: 0; font-size: .86rem; } th, td { padding: .7rem .4rem; } thead th { font-size: .92rem; } th:first-child, td:first-child { padding-left: .9rem; } }
/* v3 : quatre tuiles = une rangée de quatre sur ordinateur (plus de tuile seule sur sa ligne). */
@media (min-width: 900px) { .trois:has(> .tuile:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); } }

/* =====================================================================
   v4 (28/10/2026) : plus rapide, même rendu une fois les animations finies.
   ===================================================================== */
/* Captures : <picture> ne fait que proposer AVIF / WebP et les tailles ; l'image garde sa place et son style d'avant. */
picture { display: contents; }
/* Téléphone : le haut de page et les apparitions au défilement glissent avec le même petit rebond, mais sans partir de l'invisible
   (le texte du haut s'affiche tout de suite, moins de travail d'affichage). */
@keyframes glisse { from { transform: translateY(14px) scale(.985); } 70% { transform: translateY(-2px); } to { transform: none; } }
@media (max-width: 959px) and (prefers-reduced-motion: no-preference) {
  .cascade > *, .pastille { animation-name: glisse; }
  @supports (animation-timeline: view()) { .apparait { animation-name: glisse; } }
}
/* Transitions douces entre les pages du site (Safari 18.2+, Chrome 126+ ; ailleurs rien ne change). Sans script. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
}