/* NOVA · assets/vente/vente.css · v1.04 · le socle commun des pages publiques de vente (index.html, journee.html) :
   les couleurs, l'en-tête, les boutons, les cadres de capture, les cartes, le pied. Une page n'y ajoute que ce qui
   n'appartient qu'à elle. Les couleurs sont celles de docs/design/NOVA-design-tokens.css (thème clair).
   v1.01 : « Se connecter » reste dans l'en-tête à toutes les largeurs (il était masqué sous 900 px : sur téléphone,
   un membre ne le trouvait plus qu'en bas de page ; l'ancienne page de vente le montrait toujours).
   v1.02 : le post Instagram (.insta), partagé par la journée et la fiche de Léa : une vraie photo, le compte, le texte
   et ses hashtags (William : « ça ne fait pas vendeur », sur le dégradé orange qui tenait lieu d'image).
   v1.03 : le téléphone a sa barre d'état (heure, encoche, réseau, batterie), blanche, et l'écran de l'app commence
   juste dessous : l'encoche ne masque plus le haut des captures (William : « comme sur mon téléphone »). Tout est
   proportionnel à la largeur du téléphone (unités cqw), du grand téléphone du haut de page aux petits de la visite.
   v1.04 : la loupe (avec /assets/vente/loupe.js) : chaque capture s'agrandit d'un clic, en très haute définition. */
:root{
  --accent:#F2693C; --accent-strong:#E25420; --accent-soft:#FCEEE6;
  --accent-gradient:linear-gradient(180deg,#F4783F,#EF5A2A);
  --bg-gradient:linear-gradient(135deg,#FDF2EC 0%,#FBFAF9 45%,#E9ECF7 100%);
  --surface:#FFFFFF; --border:#F0F0F3; --track:#F4F4F6;
  --text-title:#1F2430; --text-body:#3F4654; --text-muted:#7A828F; --text-label:#9AA0AB;
  --ok:#15A34A; --ok-soft:#DCFBE7; --info:#3B7DEA; --info-soft:#E2ECFD; --violet:#8B5CF6; --violet-soft:#EDE7FE;
  --warn:#E8910C; --warn-soft:#FDF0D3; --rose:#DB2777; --rose-soft:#FCE7F0; --danger:#E5484D;
  --r-card:18px; --r-pill:999px;
  --shadow-soft:0 4px 24px rgba(30,36,48,.05); --shadow-lift:0 24px 60px rgba(30,36,48,.12);
  --font-heading:'Poppins',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif;
  --nuit:#171B26; --haut-entete:72px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--haut-entete) + 12px)}
body{font-family:var(--font-body);color:var(--text-body);background:var(--bg-gradient);-webkit-font-smoothing:antialiased;line-height:1.55}
/* v1.00 — height:auto OBLIGATOIRE : une image qui porte ses attributs width/height (utiles contre les sauts de mise en
   page) reçoit sinon la HAUTEUR de l'attribut (1 800 px) tout en prenant la largeur de son cadre : écrasée ou zoomée.
   C'est le défaut de la page de vente v5.10/v5.11. */
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4{font-family:var(--font-heading);color:var(--text-title);letter-spacing:-.02em;line-height:1.12}
.w{max-width:1200px;margin:0 auto;padding:0 32px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 12.5px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-strong)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.grad-txt{background:linear-gradient(90deg,#F4783F,#E25420 55%,#C2410C);-webkit-background-clip:text;background-clip:text;color:transparent}

/* boutons : un seul plein par écran, les autres en léger */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 26px;border-radius:var(--r-pill);font:600 15.5px var(--font-body);border:0;cursor:pointer;white-space:nowrap;transition:transform .15s,box-shadow .15s,border-color .15s,color .15s}
.btn svg{width:18px;height:18px}
.btn-plein,.btn-primary{background:var(--accent-gradient);color:#fff;box-shadow:0 10px 26px rgba(239,90,42,.30)}
.btn-plein:hover,.btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(239,90,42,.36)}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-leger{background:var(--surface);color:var(--text-title);border:1px solid var(--border);box-shadow:var(--shadow-soft)}
.btn-doux{background:var(--accent-soft);color:var(--accent-strong)}
.btn-sec{background:#fff;border:1.5px solid var(--border);color:var(--text-title)}
.btn-sec:hover{border-color:var(--accent);color:var(--accent-strong)}
.btn-rond{width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent-strong);display:grid;place-items:center;margin-left:-10px}
.btn-rond svg{width:13px;height:13px;fill:currentColor}

/* en-tête : le menu simple, des liens */
.top{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(251,250,249,.82);border-bottom:1px solid rgba(31,36,48,.06)}
.top .w{display:flex;align-items:center;gap:28px;height:var(--haut-entete)}
.top .logo img{height:34px;width:auto}
.top nav{display:flex;gap:26px;margin-left:12px}
.top nav a{font:500 14.5px var(--font-body);color:var(--text-body)}
.top nav a:hover,.top nav a.on{color:var(--accent-strong)}
.top .droite{margin-left:auto;display:flex;align-items:center;gap:12px}
.top .btn{height:42px;padding:0 20px;font-size:14px}
.lien-connexion{font:600 14px var(--font-body);color:var(--text-title);white-space:nowrap}

/* cadres de capture : le navigateur et le téléphone */
.navig{background:#fff;border-radius:16px;box-shadow:0 40px 90px rgba(30,36,48,.18),0 0 0 1px rgba(31,36,48,.06);overflow:hidden}
.navig-barre{height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#F6F6F8;border-bottom:1px solid var(--border)}
.navig-barre i{width:11px;height:11px;border-radius:50%;background:#E2E3E8;flex:none}
.navig-barre i:nth-child(1){background:#FF6159}.navig-barre i:nth-child(2){background:#FFBD2E}.navig-barre i:nth-child(3){background:#28C941}
.navig-barre span{margin-left:14px;flex:1;max-width:360px;height:20px;border-radius:6px;background:#fff;font:500 11px var(--font-body);color:var(--text-label);display:flex;align-items:center;padding:0 10px}
.navig img{width:100%}
.tel{width:270px;border-radius:44px;background:#14171F;padding:11px;box-shadow:0 40px 80px rgba(30,36,48,.28)}
/* l'écran : 390 x 898 = la barre d'état (54) + la capture de l'app (390 x 844), entière, jamais recouverte */
.tel-ecran{position:relative;overflow:hidden;background:#fff;aspect-ratio:390/898;padding-top:13.85%;border-radius:13.7% / 5.95%;container-type:inline-size}
.tel-ecran img{width:100%;height:100%;object-fit:cover;object-position:top}
.tel-ecran::before{content:"";position:absolute;top:2.8cqw;left:50%;transform:translateX(-50%);width:32cqw;height:9.4cqw;border-radius:99px;background:#14171F;z-index:2}
.tel-ecran::after{content:"9:41";position:absolute;top:0;left:0;right:0;height:13.85cqw;display:flex;align-items:center;padding-left:12cqw;font:600 4.3cqw/1 var(--font-body);color:var(--text-title);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 12'%3E%3Cg fill='%231F2430'%3E%3Crect x='0' y='8' width='3' height='4' rx='1'/%3E%3Crect x='4.5' y='6' width='3' height='6' rx='1'/%3E%3Crect x='9' y='3.5' width='3' height='8.5' rx='1'/%3E%3Crect x='13.5' y='1' width='3' height='11' rx='1'/%3E%3Cpath d='M27.5 4.2a11 11 0 0 1 15 0l-1.7 1.8a8.6 8.6 0 0 0-11.6 0Z'/%3E%3Cpath d='M30.4 7.2a6.9 6.9 0 0 1 9.2 0l-1.7 1.8a4.5 4.5 0 0 0-5.8 0Z'/%3E%3Cpath d='M33.3 10.2a2.6 2.6 0 0 1 3.4 0L35 12Z'/%3E%3Crect x='48.5' y='1.5' width='18' height='9' rx='2.6' fill='none' stroke='%231F2430' stroke-opacity='.4'/%3E%3Crect x='50.5' y='3.5' width='14' height='5' rx='1.3'/%3E%3Crect x='67.5' y='4.6' width='1.6' height='2.8' rx='.8' fill-opacity='.4'/%3E%3C/g%3E%3C/svg%3E") no-repeat right 8.5cqw center / 17cqw auto;z-index:1}

/* la loupe : une capture s'agrandit d'un clic (loupe.js) */
.loupable{cursor:zoom-in}
.navig.loupable,.ecran-visite .tel.loupable{position:relative}
.loupable::after{content:"Agrandir";position:absolute;right:12px;bottom:12px;z-index:4;display:flex;align-items:center;height:30px;padding:0 12px 0 31px;border-radius:999px;background:rgba(255,255,255,.95) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2430' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' x2='14' y1='3' y2='10'/%3E%3Cline x1='3' x2='10' y1='21' y2='14'/%3E%3C/svg%3E") no-repeat 11px center / 13px;box-shadow:0 6px 18px rgba(30,36,48,.18);font:600 12px var(--font-body);color:var(--text-title);opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;pointer-events:none}
.loupable:hover::after,.loupable:focus-visible::after{opacity:1;transform:none}
.loupable:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
@media(hover:none){ .ecran-visite .navig.loupable::after{opacity:.96;transform:none} }
.loupe{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:28px 88px;background:rgba(15,18,26,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.loupe.on{display:flex;animation:loupeEntre .22s ease}
@keyframes loupeEntre{from{opacity:0}to{opacity:1}}
html.loupe-ouverte{overflow:hidden}
.loupe-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;max-width:100%;max-height:100%}
.loupe-cadre{max-width:100%}
.loupe .navig{width:min(1700px,calc((100vh - 160px) * 1.6),calc(100vw - 176px));box-shadow:0 30px 90px rgba(0,0,0,.5)}
.loupe .tel{width:min(470px,calc((100vh - 182px) * .4343 + 22px));box-shadow:0 30px 90px rgba(0,0,0,.5)}
@supports(height:100dvh){ .loupe .navig{width:min(1700px,calc((100dvh - 160px) * 1.6),calc(100vw - 176px))} .loupe .tel{width:min(470px,calc((100dvh - 182px) * .4343 + 22px))} }
.loupe figcaption{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px 14px;color:#E7EAF0;font:500 15px var(--font-body);text-align:center;max-width:760px}
.loupe-num{color:#9AA3B4;font-size:13px;font-variant-numeric:tabular-nums}
.loupe-b{position:absolute;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .15s}
.loupe-b:hover{background:rgba(255,255,255,.24)}
.loupe-b[hidden]{display:none}
.loupe-b svg{width:22px;height:22px}
.loupe-x{top:18px;right:18px}
.loupe-g{left:22px;top:50%;transform:translateY(-50%)}
.loupe-d{right:22px;top:50%;transform:translateY(-50%)}
@media(max-width:900px){
  .loupe{padding:70px 12px 84px}
  .loupe .navig{width:min(calc(100vw - 24px),calc((100vh - 230px) * 1.6))}
  .loupe .tel{width:min(calc(100vw - 24px),calc((100vh - 252px) * .4343 + 22px));border-radius:36px;padding:9px}
  @supports(height:100dvh){ .loupe .navig{width:min(calc(100vw - 24px),calc((100dvh - 230px) * 1.6))} .loupe .tel{width:min(calc(100vw - 24px),calc((100dvh - 252px) * .4343 + 22px))} }
  .loupe-g,.loupe-d{top:auto;bottom:18px;transform:none}
  .loupe-g{left:calc(50% - 64px)}.loupe-d{right:calc(50% - 64px)}
  .loupe figcaption{font-size:14px}
}

/* le post Instagram préparé par Léa */
.insta{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;color:var(--text-body)}
.insta-tete{display:flex;align-items:center;gap:10px;padding:10px 12px}
.insta-tete img{width:32px;height:32px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--accent)}
.insta-tete b{display:block;font:600 13px var(--font-body);color:var(--text-title);line-height:1.2}
.insta-tete span{display:block;font-size:11.5px;color:var(--text-muted);line-height:1.2}
.insta-tete svg{width:18px;height:18px;margin-left:auto;color:var(--text-title)}
.insta-photo img{width:100%}   /* la photo entière, au format portrait 4:5 d'Instagram : jamais recadrée */
.insta-acts{display:flex;align-items:center;gap:14px;padding:10px 12px 4px;color:var(--text-title)}
.insta-acts svg{width:21px;height:21px}
.insta-acts .coeur{color:var(--danger);fill:var(--danger)}
.insta-acts .fin{margin-left:auto}
.insta-aime{padding:2px 12px 0;font:600 12.5px var(--font-body);color:var(--text-title)}
.insta-texte{padding:4px 12px 12px;font-size:13px;line-height:1.5}
.insta-texte b{color:var(--text-title);font-weight:600}
.insta-texte .tags{color:var(--info)}

/* sections, cartes, couleurs d'icônes */
.sec{padding:110px 0}
.sec-tete{max-width:720px;margin:0 auto 56px;text-align:center}
.sec-tete h2{font-size:44px;margin:14px 0 16px}
.sec-tete p{font-size:18px;color:var(--text-muted)}
.carte{background:var(--surface);border-radius:22px;box-shadow:var(--shadow-soft);border:1px solid rgba(31,36,48,.04)}
.ic-rond{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none}
.ic-rond svg{width:22px;height:22px}
.c-corail{background:var(--accent-soft);color:var(--accent-strong)}.c-bleu{background:var(--info-soft);color:var(--info)}
.c-vert{background:var(--ok-soft);color:var(--ok)}.c-violet{background:var(--violet-soft);color:var(--violet)}
.c-ambre{background:var(--warn-soft);color:var(--warn)}.c-rose{background:var(--rose-soft);color:var(--rose)}

/* pied */
.pied{padding:56px 0 40px;border-top:1px solid rgba(31,36,48,.07);margin-top:40px}
.pied .w{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap}
.pied img{height:28px;width:auto}
.pied p{font-size:13px;color:var(--text-label);margin-top:12px;max-width:380px}
.pied p a{color:var(--text-muted)}
.pied nav{display:flex;gap:22px;flex-wrap:wrap;font-size:13.5px;color:var(--text-muted)}
.pied nav a:hover{color:var(--accent-strong)}

@media(max-width:900px){
  :root{--haut-entete:64px}
  .w{padding:0 20px}
  .top .w{gap:16px}
  .top nav{display:none}   /* le menu disparaît ; « Se connecter » et « Commencer » restent */
  .sec{padding:72px 0}
  .sec-tete h2{font-size:31px}.sec-tete p{font-size:16px}
}
@media(max-width:420px){
  .top .logo img{height:28px}
  .top .droite{gap:14px}
  .top .btn{height:40px;padding:0 15px;font-size:13.5px}
  .lien-connexion{font-size:13.5px}
}
@media(max-width:374px){   /* très petits téléphones : la connexion d'abord ; « Voir les offres » est juste dessous */
  .top .logo img{height:26px}
  .top .droite .btn{display:none}
}
@media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} }