/* Maquettes du haut de page sur téléphone : réglages communs aux 4 versions */
:root { --encre:#0b0d12; --encre-douce:#444b5c; --gris:#8a91a1; --trait:rgb(11 13 18/.08); --verre:rgb(255 255 255/.55); --ombre:0 1px 2px rgb(20 40 80/.06),0 12px 32px -12px rgb(20 40 80/.22); --doux:cubic-bezier(.2,0,0,1); }
* { box-sizing:border-box; margin:0; }
html { -webkit-font-smoothing:antialiased; }
body { font-family:"Inter Tight",system-ui,sans-serif; color:var(--encre); line-height:1.45; background:#9cc9f2 url(../images/ciel.webp) center top/cover fixed; min-height:100dvh; padding-bottom:96px; overflow-x:hidden; }
a,button { font:inherit; color:inherit; }
img,video { display:block; max-width:100%; }
/* Barre du haut : la marque en lettres seules, un prix et un menu à deux traits fins */
.haut { position:sticky; top:10px; z-index:10; margin:10px 12px 0; height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 6px 0 18px; border-radius:18px; background:rgb(255 255 255/.58); backdrop-filter:blur(24px) saturate(1.6); -webkit-backdrop-filter:blur(24px) saturate(1.6); box-shadow:inset 0 0 0 1px rgb(255 255 255/.7), 0 8px 24px -12px rgb(20 40 80/.25); }
.marque { display:flex; align-items:baseline; gap:5px; font-weight:900; font-size:19px; letter-spacing:-.06em; text-decoration:none; color:var(--encre); }
.marque em { font-family:"Instrument Serif",serif; font-weight:400; font-size:21px; letter-spacing:0; color:inherit; }
.haut-droite { display:flex; align-items:center; gap:4px; }
.haut-cta { height:40px; padding:0 16px; display:flex; align-items:center; border-radius:12px; background:var(--encre); color:#fff; font-size:14px; font-weight:700; text-decoration:none; font-variant-numeric:tabular-nums; }
.burger { width:40px; height:40px; border:0; background:none; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; }
.burger i { display:block; width:18px; height:1.5px; border-radius:1px; background:var(--encre); }
.burger i:last-child { width:12px; margin-left:6px; }
/* Titre */
h1 { font-size:36px; font-weight:800; letter-spacing:-.045em; line-height:1.02; text-wrap:balance; }
h1 em { font-family:"Instrument Serif",serif; font-weight:400; letter-spacing:-.01em; }
.tetes-t { display:inline-flex; vertical-align:-.12em; margin-inline:2px; }
.tetes-t > span { width:.9em; height:.9em; border-radius:50%; border:2px solid #fff; margin-left:-.28em; overflow:hidden; background:#e8f1fb; }
.tetes-t > span:first-child { margin-left:0; }
.tetes-t img { width:100%; height:100%; object-fit:cover; object-position:50% 8%; scale:1.9; transform-origin:50% 18%; }
.chapo { font-size:16px; color:var(--encre-douce); margin-top:10px; text-wrap:pretty; }
.badge { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; padding:6px 12px; border-radius:999px; background:var(--verre); border:1px solid rgb(255 255 255/.8); }
.badge img { width:15px; height:15px; }
/* Barre Claude : la phrase va à la ligne au lieu d'être coupée */
.chat { display:grid; grid-template-columns:22px minmax(0,1fr) 38px; gap:10px; align-items:start; padding:12px; border-radius:20px; background:rgb(255 255 255/.9); box-shadow:var(--ombre); text-align:start; }
.chat > img { width:22px; height:22px; margin-top:2px; animation:tourne 6s linear infinite; }
.chat p { font-size:15px; line-height:1.4; min-height:2.8em; }
.chat button { width:38px; height:38px; border-radius:12px; border:0; background:#d97757; color:#fff; display:grid; place-items:center; align-self:end; }
@keyframes tourne { to { rotate:360deg; } }
/* Têtes d'agents */
.t { width:34px; height:34px; border-radius:50%; overflow:hidden; background:#e8f1fb; flex:none; border:2px solid #fff; }
.t img { width:100%; height:100%; object-fit:cover; object-position:50% 8%; scale:1.9; transform-origin:50% 18%; }
.etiquette { position:absolute; left:10px; bottom:10px; display:flex; padding:2px; border-radius:50%; background:rgb(255 255 255/.95); box-shadow:0 2px 8px rgb(0 0 0/.15); }
.etiquette .t { width:24px; height:24px; border-width:0; }
/* Carte Meta */
.meta { background:#fff; padding:14px; display:flex; flex-direction:column; gap:7px; }
.meta-haut { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--encre-douce); }
.meta-haut img { width:16px; }
.meta-roas { display:flex; align-items:baseline; gap:8px; }
.meta-roas b { font-size:34px; font-weight:800; letter-spacing:-.04em; line-height:1; }
.meta-roas span { font-size:12.5px; color:var(--encre-douce); line-height:1.2; }
.meta-l { display:flex; justify-content:space-between; font-size:13px; color:var(--encre-douce); border-top:1px solid var(--trait); padding-top:6px; font-variant-numeric:tabular-nums; }
.meta-l b { color:var(--encre); }
/* Boutons */
.btn { display:flex; align-items:center; justify-content:center; min-height:52px; border-radius:999px; font-weight:700; font-size:16px; text-decoration:none; transition:scale .15s; }
.btn:active { scale:.96; }
.noir { background:var(--encre); color:#fff; }
.blanc { background:#fff; box-shadow:0 0 0 1px var(--trait); }
/* Barre d'achat collée en bas */
.achat { position:fixed; left:12px; right:12px; bottom:12px; z-index:10; display:flex; align-items:center; justify-content:space-between; padding:8px 8px 8px 18px; border-radius:999px; background:rgb(255 255 255/.85); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:var(--ombre); }
.achat b { font-size:18px; display:block; line-height:1.1; }
.achat small { color:var(--encre-douce); font-size:12.5px; }
.achat a { padding:0 22px; min-height:46px; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }

/* Carte des chiffres : les commandes qui tombent sur le téléphone, façon notifications */
.ventes { position:relative; display:flex; flex-direction:column; justify-content:center; padding:14px 10px; background:#000; }
.ventes > img.fond { position:absolute!important; inset:0; width:100%!important; height:100%!important; object-fit:cover; filter:blur(3px) brightness(.8); scale:1.08; }
.notifs { position:relative; display:flex; flex-direction:column; gap:8px; }
.notif { display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:9px; align-items:center; padding:10px; border-radius:16px; background:rgb(245 245 247/.82); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); text-align:start; opacity:0; translate:0 -10px; transition:opacity .5s var(--doux), translate .5s var(--doux); }
body.envoye .notif { opacity:1; translate:0 0; }
body.envoye .notif:nth-child(2) { transition-delay:.25s; } body.envoye .notif:nth-child(3) { transition-delay:.5s; }
.notif img { width:30px!important; height:30px!important; padding:5px; border-radius:8px; background:#fff; object-fit:contain!important; }
.notif b { display:block; font-size:13px; line-height:1.25; }
.notif span { display:block; font-size:12px; color:var(--encre-douce); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notif small { font-size:11px; color:var(--gris); align-self:start; }
.ventes .etiquette { z-index:1; }