sautait de y=0 à y=55, un décalage cumulé (CLS) de 0,24 — très au-dessus du seuil de 0,1 considéré comme correct. Cette marge disparaît d'elle-même à l'injection : build() remet padding-top à 0 dans le même bloc synchrone que l'insertion, donc sans rendu intermédiaire. Hauteurs calées sur .top-nav-inner + sa bordure : 42+1 sur ordinateur, 54+1 sous 981px. html.km-nav-statique : pages qui portent DÉJÀ une nav dans leur HTML (index, à-propos, configurateur). Leur barre d'origine réserve la place toute seule — y ajouter cette marge créerait un vide en haut. */ body{padding-top:43px} @media(max-width:980px){ body{padding-top:55px} } html.km-nav-statique body{padding-top:0} /* ═══════════ TOP NAV — barre style Apple (copie index) ═══════════ */ header.km-shared-nav{ position:sticky;top:0;left:0;right:0;z-index:1000;display:block; background:linear-gradient(180deg, #ffffff, #f3f3f5); border-bottom:1px solid rgba(0,0,0,.08); box-shadow:0 1px 14px rgba(0,0,0,.05); font-family:var(--font-b); } .km-shared-nav .top-nav-inner{ position:relative; display:flex;align-items:center;justify-content:space-between; height:42px; padding:0 clamp(22px, 4vw, 48px); max-width:1480px;margin:0 auto; } /* ── Pastilles « feux tricolores » macOS ── Purement décoratives (aria-hidden + pointer-events:none) : elles donnent à la barre l'allure d'une fenêtre macOS sans jamais se comporter comme des boutons. Pastilles unies, sans glyphe à l'intérieur. */ .km-shared-nav .mac-dots{display:inline-flex;align-items:center;gap:8px;flex:none;pointer-events:none;user-select:none} .km-shared-nav .mac-dot{ width:12px;height:12px;border-radius:50%; box-shadow:inset 0 0 0 .5px rgba(0,0,0,.14); } .km-shared-nav .mac-dot.is-close{background:#ff5f57} .km-shared-nav .mac-dot.is-min{background:#febc2e} .km-shared-nav .mac-dot.is-zoom{background:#28c840} /* logo : absent de la barre sur PC (comme l'index) — visible sur mobile, où l'index affiche son logo dans le hero */ .km-shared-nav .top-nav-logo{display:none;align-items:center} .km-shared-nav .top-nav-logo img{height:34px;width:auto;filter:brightness(0);display:block} .km-shared-nav .top-nav-links{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); display:flex;align-items:center;gap:clamp(22px, 2.6vw, 40px); list-style:none;margin:0;padding:0; } .km-shared-nav .top-nav-links a{ position:relative;display:inline-block;padding:4px 2px; font-size:13px;font-weight:500;letter-spacing:-.01em; color:#1d1d1f;opacity:.82;cursor:pointer; transition:opacity .2s var(--ease), color .2s; } .km-shared-nav .top-nav-links a:hover{opacity:1} .km-shared-nav .top-nav-links a.active{opacity:1;font-weight:600} .km-shared-nav .top-nav-links a.active::after{ content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px; background:#1d1d1f;border-radius:2px; } .km-shared-nav .top-nav-icons{display:flex;align-items:center;gap:22px;margin-left:auto} .km-shared-nav .top-nav-icon{ display:inline-flex;align-items:center;justify-content:center; color:#1d1d1f;font-size:14px;line-height:1;opacity:.82;cursor:pointer; transition:opacity .2s var(--ease), transform .18s var(--ease); } .km-shared-nav .top-nav-icon:hover{opacity:1} .km-shared-nav .top-nav-icon:active{transform:scale(.92)} /* ── Zone tactile des icônes ── Le glyphe seul ne mesure que 14 à 16px : c'est la cible réelle du doigt, très en dessous des ~44px recommandés, d'où les taps qui ratent ou attrapent l'icône voisine. On agrandit la zone SANS toucher à la mise en page, via un pseudo-élément : le rendu visuel ne bouge pas d'un pixel. 36×40 et non 44×44 : avec un gap de 22px, des zones de 44px se chevaucheraient et l'icône voisine capterait le tap — on remplace un défaut par un autre. Réservé au pointeur grossier ; à la souris la cible n'a jamais posé problème. */ @media (pointer:coarse){ .km-shared-nav .top-nav-icon{position:relative} .km-shared-nav .top-nav-icon::after{ content:"";position:absolute;left:50%;top:50%; width:calc(100% + 20px);height:40px; transform:translate(-50%,-50%); } } .km-shared-nav .top-nav-login{gap:6px;font-size:13px;font-weight:600;background:none;border:none;white-space:nowrap} .km-shared-nav .top-nav-login span{font-size:13px} .km-shared-nav .top-nav-fr{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:12.5px;font-weight:500;color:#1d1d1f;opacity:.82} .km-shared-nav .top-nav-fr img{width:20px;height:auto;border-radius:2px;display:block} /* burger : uniquement mobile (l'index gère son mobile dans le hero) */ .km-shared-nav .kmn-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:8px} .km-shared-nav .kmn-burger span{display:block;width:22px;height:2px;background:#16181d;border-radius:2px;transition:.3s} /* ── responsive : ≤980px ── */ @media(max-width:980px){ .km-shared-nav .top-nav-links{display:none} .km-shared-nav .top-nav-fr{display:none} .km-shared-nav .top-nav-logo{display:inline-flex} /* pastilles macOS : métaphore « fenêtre de bureau » → masquées sur mobile (elles décaleraient aussi le logo, la barre étant en space-between) */ .km-shared-nav .mac-dots{display:none} .km-shared-nav .kmn-burger{display:flex} .km-shared-nav .top-nav-inner{height:54px;padding:0 18px} .km-shared-nav .top-nav-login span{display:none} .km-shared-nav .top-nav-icon{font-size:16px} } /* ── menu mobile (panneau coulissant) ── */ /* Pas d'opacity animée sur le parent : un backdrop-filter placé sous un ancêtre dont l'opacity s'anime est appliqué d'un bloc (« pop »). On pilote la visibilité seule, et le voile anime lui-même son fond + son flou. */ .kmn-mob{position:fixed;inset:0;z-index:2000;visibility:hidden;transition:visibility .45s var(--ease);font-family:var(--font-b)} .kmn-mob.open{visibility:visible} /* courbe régulière (pas var(--ease), trop « front-loaded » : le flou atteignait 95% en 140ms, ressenti comme un à-coup) */ .kmn-mob-veil{position:absolute;inset:0;background:rgba(8,8,12,0); -webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px); transition:background .5s cubic-bezier(.4,0,.2,1), -webkit-backdrop-filter .55s cubic-bezier(.4,0,.2,1), backdrop-filter .55s cubic-bezier(.4,0,.2,1)} .kmn-mob.open .kmn-mob-veil{background:rgba(8,8,12,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .kmn-mob-panel{position:absolute;top:0;right:0;height:100%;width:min(320px,84vw);background:#fff; box-shadow:-12px 0 40px rgba(0,0,0,.25);transform:translateX(100%);transition:transform .34s cubic-bezier(.16,1,.3,1); display:flex;flex-direction:column;padding:22px 22px 32px;gap:6px} .kmn-mob.open .kmn-mob-panel{transform:none} .kmn-mob-close{align-self:flex-end;width:38px;height:38px;background:#f0f1f4;border-radius:50%; color:#16181d;font-size:18px;margin-bottom:8px;display:flex;align-items:center;justify-content:center} .kmn-mob-panel a{padding:14px 6px;font-size:16px;font-weight:600;color:#16181d;border-bottom:1px solid #f0f1f4} .kmn-mob-auth{margin-top:18px;display:flex;align-items:center;justify-content:center;gap:8px;height:50px; border-radius:14px;background:#16181d;color:#fff;font-size:14px;font-weight:600;width:100%} /* ═══════════ MODALS — base (copie index / identique site-footer.css) ═══════════ */ .modal{ position:fixed;inset:0;z-index:9999; background:rgba(10,10,12,.55); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); display:flex;align-items:flex-end;justify-content:center; opacity:0;visibility:hidden;pointer-events:none; transition:opacity .32s ease, visibility 0s linear .4s; } .modal.show{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .25s ease, visibility 0s} @media (min-width:601px){.modal{align-items:center;padding:24px}} .modal-content{ position:relative; background:#ffffff;color:#1a1a1e; border-radius:28px 28px 0 0; border:1px solid rgba(0,0,0,.06); padding:32px 24px;width:100%;max-height:75vh; overflow-y:auto;overscroll-behavior:contain; touch-action:pan-y; scrollbar-width:none; box-shadow:0 -10px 60px rgba(0,0,0,.35); transform:translate3d(0,100%,0); transition:transform .45s cubic-bezier(.22,1,.36,1); } .modal.show .modal-content{transform:none} .modal-content::-webkit-scrollbar{display:none} .modal-content::before{content:"";display:block;width:42px;height:4px;background:rgba(0,0,0,.14);border-radius:2px;margin:0 auto 22px} @media (min-width:601px){ .modal-content{ border-radius:26px;max-width:520px;padding:40px 38px;max-height:88vh; box-shadow:0 30px 80px rgba(0,0,0,.45); transform:translate3d(0,20px,0) scale(.97);opacity:0; transition:transform .35s var(--ease), opacity .22s ease; } .modal.show .modal-content{transform:none;opacity:1} .modal-content::before{display:none} } .modal-eyebrow{font-size:11.5px;font-weight:700;color:var(--accent-2);letter-spacing:.22em;text-transform:uppercase;margin-bottom:10px} .modal-title{font-size:1.85rem;font-weight:800;color:#111;letter-spacing:-.025em;margin-bottom:8px;line-height:1.08} .modal-title em{font-family:var(--font-d);font-style:italic;color:var(--accent-2);font-weight:400} .modal-sub{font-size:14px;color:rgba(0,0,0,.5);margin-bottom:24px} .close-modal{ position:absolute;top:18px;right:18px; width:38px;height:38px;background:rgba(0,0,0,.05); border:1px solid rgba(0,0,0,.08);border-radius:50%; color:rgba(0,0,0,.55);font-size:13px;cursor:pointer; display:flex;align-items:center;justify-content:center;transition:all .2s; } .close-modal:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:rotate(90deg)} /* ═══════════ Auth / Connexion — base (copie index) ═══════════ */ #loginModal .auth-tabs{display:flex;gap:6px;background:#f0f0f2;border-radius:14px;padding:5px;margin-bottom:24px} #loginModal .auth-tab{ flex:1;padding:10px;border-radius:10px;font-weight:700;font-size:13.5px;color:rgba(0,0,0,.5); transition:background .25s var(--ease), color .25s, box-shadow .25s; } #loginModal .auth-tab.active{background:#fff;color:#111;box-shadow:0 2px 8px rgba(0,0,0,.08)} #loginModal .form-group{margin-bottom:14px} #loginModal .form-group label{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(0,0,0,.5);margin-bottom:7px} #loginModal .auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:rgba(0,0,0,.35);font-size:12px} #loginModal .auth-divider::before,#loginModal .auth-divider::after{content:"";flex:1;height:1px;background:rgba(0,0,0,.1)} #loginModal .auth-msg{font-size:13px;border-radius:11px;padding:11px 13px;margin-bottom:14px;display:none} #loginModal .auth-msg.err{display:block;background:rgba(220,38,38,.08);color:#c01c1c;border:1px solid rgba(220,38,38,.2)} #loginModal .auth-msg.ok{display:block;background:rgba(22,163,74,.08);color:#15803d;border:1px solid rgba(22,163,74,.2)} /* ═════ Modale connexion — refonte « atelier » (copie index, scopée #loginModal) ═════ */ #loginModal .modal-content.auth-modal{ max-width:880px;padding:0;border-radius:28px; display:flex;align-items:stretch; background:#fff;color:#14161c; border:1px solid rgba(20,24,40,.06); box-shadow:0 50px 130px rgba(8,12,30,.5), 0 12px 34px rgba(8,12,30,.16); font-family:var(--font-b); } #loginModal .modal-content::before{background:rgba(0,0,0,.14)} /* ── panneau visuel (gauche) : la montre, plein cadre ── */ #loginModal .auth-aside{ position:relative;flex:0 0 42%;overflow:hidden;isolation:isolate; border-radius:28px 0 0 28px; display:flex;flex-direction:column;justify-content:space-between;gap:44px; padding:30px 28px 28px;color:#fff; } #loginModal .auth-aside-bg{ position:absolute;inset:0;z-index:-2; background:#0a0a0c url("../images/fond2.webp") center/cover no-repeat; transform:scale(1.06); } #loginModal.show .auth-aside-bg{animation:authKen 16s ease-out both} @keyframes authKen{from{transform:scale(1.16)}to{transform:scale(1.03)}} #loginModal .auth-aside::before{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(205deg, rgba(8,8,12,.08) 0%, rgba(8,8,12,.46) 52%, rgba(8,8,12,.85) 100%); } #loginModal .auth-aside-logo img{height:62px;width:auto;filter:brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0,0,0,.35));opacity:.96} #loginModal .auth-aside-quote{ font-family:var(--font-d);font-style:italic;font-weight:400; font-size:clamp(22px, 2.4vw, 27px);line-height:1.25;letter-spacing:.01em; text-shadow:0 2px 18px rgba(0,0,0,.5);margin-bottom:18px; } #loginModal .auth-aside-quote em{color:var(--accent-soft)} #loginModal .auth-points{display:flex;flex-direction:column;gap:9px;list-style:none;margin:0;padding:0} #loginModal .auth-points li{ display:flex;align-items:center;gap:10px; font-size:12.5px;font-weight:500;color:rgba(255,255,255,.88);letter-spacing:.01em; } #loginModal .auth-points li i{ width:20px;height:20px;flex:none;border-radius:50%;font-size:8.5px; display:inline-flex;align-items:center;justify-content:center; color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); } /* ── panneau formulaire (droite) ── */ #loginModal .auth-main{flex:1;min-width:0;padding:32px 38px 20px;display:flex;flex-direction:column;justify-content:center} /* formulaires empilés dans la même cellule de grille : la pile garde la hauteur du plus grand → la modale ne change pas de taille entre onglets */ #loginModal .auth-stack{display:grid} #loginModal .auth-stack > .auth-form{ grid-area:1 / 1;display:flex;flex-direction:column; visibility:hidden;opacity:0;pointer-events:none; transition:opacity .3s var(--ease); } #loginModal.show .auth-stack > .auth-form.active{visibility:visible;opacity:1;pointer-events:auto} /* entrée en cascade du contenu à l'ouverture */ #loginModal .auth-head,#loginModal .auth-tabs,#loginModal .auth-stack,#loginModal .auth-trust{ opacity:0;transform:translateY(14px); transition:opacity .5s var(--ease), transform .6s var(--ease); } #loginModal.show .auth-head{opacity:1;transform:none;transition-delay:.1s} #loginModal.show .auth-tabs{opacity:1;transform:none;transition-delay:.18s} #loginModal.show .auth-stack{opacity:1;transform:none;transition-delay:.26s} #loginModal.show .auth-trust{opacity:1;transform:none;transition-delay:.36s} @media (prefers-reduced-motion: reduce){ #loginModal .auth-head,#loginModal .auth-tabs,#loginModal .auth-stack,#loginModal .auth-trust{opacity:1;transform:none;transition:none} #loginModal.show .auth-aside-bg{animation:none;transform:none} } /* en-tête (le médaillon logo ne sert que lorsque le visuel est masqué) */ #loginModal .auth-head{text-align:center;margin-bottom:18px} #loginModal .auth-crest{ display:none;width:50px;height:50px;margin:0 auto 12px;border-radius:16px; align-items:center;justify-content:center; background:linear-gradient(160deg,#fff,#eceef3); border:1px solid rgba(20,24,40,.07); box-shadow:0 10px 24px rgba(10,16,40,.14), inset 0 1px 0 #fff; } #loginModal .auth-crest img{width:30px;height:auto;filter:brightness(0)} #loginModal .modal-eyebrow{ display:inline-flex;align-items:center;gap:10px; color:var(--accent-2);letter-spacing:.26em;font-size:10px;margin-bottom:9px; } #loginModal .modal-eyebrow::before,#loginModal .modal-eyebrow::after{ content:"";width:26px;height:1px;background:currentColor;opacity:.4; } #loginModal .modal-title{font-size:1.7rem;letter-spacing:-.025em;margin-bottom:6px;color:#111} #loginModal .modal-title em{color:var(--accent-2)} /* min-height : 2 lignes réservées → le titre/sous-titre qui change entre onglets ne fait pas varier la hauteur de la modale */ #loginModal .modal-sub{font-size:13px;color:#8a90a0;margin:0 auto;max-width:300px;line-height:1.5;min-height:3em} /* onglets avec pastille glissante */ #loginModal .auth-tabs{position:relative;background:#f1f2f6;border-radius:14px;padding:4px;margin-bottom:16px;gap:0;overflow:hidden} #loginModal .auth-tabs::before{content:"";position:absolute;top:4px;left:4px;width:calc(50% - 4px);height:calc(100% - 8px); background:#fff;border-radius:11px;box-shadow:0 2px 8px rgba(10,16,40,.12); transition:transform .32s cubic-bezier(.22,1,.36,1)} #loginModal .auth-tabs:has(#tabRegister.active)::before{transform:translateX(100%)} #loginModal .auth-tab{position:relative;z-index:1;background:none!important;box-shadow:none!important; color:#8a90a0;font-weight:700;font-size:13px;padding:10px;transition:color .25s;text-align:center} #loginModal .auth-tab.active{color:#14161c} /* focus : pas d'anneau natif (il déborde de la barre et son rendu varie selon l'OS/navigateur) — anneau intérieur discret pour le clavier seul */ #loginModal .auth-tab:focus{outline:none} #loginModal .auth-tab:focus-visible{outline:2px solid rgba(47,109,255,.55);outline-offset:-4px;border-radius:11px} /* champs avec icône intégrée (labels masqués → compact) */ #loginModal .form-group{margin-bottom:11px;text-align:left} #loginModal .form-group label{display:none} #loginModal .auth-field{position:relative;display:flex;align-items:center} #loginModal .auth-field > i{position:absolute;left:16px;color:#b3b9c6;font-size:14px;pointer-events:none;transition:color .2s} #loginModal .auth-field:focus-within > i{color:var(--accent)} #loginModal .auth-field input{ width:100%;height:50px;padding:0 15px 0 45px;border-radius:14px;font-size:14.5px;color:#14161c; background:#f4f5f8;border:1.5px solid transparent;caret-color:var(--accent); transition:border-color .2s, background .2s, box-shadow .2s; } #loginModal .auth-field input:focus{outline:none;background:#fff;border-color:var(--accent);box-shadow:0 0 0 4px rgba(47,109,255,.1)} #loginModal .auth-field input::placeholder{color:#b3b9c6} /* afficher / masquer le mot de passe */ #loginModal .auth-field input[type="password"],#loginModal .auth-field input.has-toggle{padding-right:46px} #loginModal .pw-toggle{ position:absolute;right:7px;width:36px;height:36px;border-radius:11px; display:flex;align-items:center;justify-content:center; color:#9aa0ae;font-size:13px;transition:color .2s, background .2s; } #loginModal .pw-toggle:hover{color:#14161c;background:rgba(20,24,40,.05)} /* CTA noir premium + reflet au survol */ #loginModal .auth-submit{ position:relative;overflow:hidden; width:100%;margin-top:6px;height:52px;border-radius:14px; background:linear-gradient(180deg,#24272f,#000);color:#fff;font-weight:700;font-size:14.5px; display:flex;align-items:center;justify-content:center;gap:9px; box-shadow:0 12px 26px rgba(8,12,30,.3), inset 0 1px 0 rgba(255,255,255,.12); transition:transform .2s var(--ease), box-shadow .2s; } #loginModal .auth-submit::after{ content:"";position:absolute;top:0;bottom:0;left:-70%;width:50%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.16) 50%, transparent); transform:skewX(-18deg);transition:left .55s var(--ease); } #loginModal .auth-submit:hover::after{left:130%} #loginModal .auth-submit i{font-size:12px;transition:transform .25s var(--ease)} #loginModal .auth-submit:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(8,12,30,.42)} #loginModal .auth-submit:hover i{transform:translateX(4px)} #loginModal .auth-submit:active{transform:translateY(0)} /* état de chargement (connexion / envoi du lien de reset) : pas de reflet au survol pendant que la requête est en vol, sinon le bouton paraît toujours cliquable alors qu'il est désactivé */ #loginModal .auth-submit:disabled{opacity:.7;cursor:not-allowed;transform:none;box-shadow:none} #loginModal .auth-submit:disabled::after{display:none} #loginModal .auth-submit:disabled:hover i{transform:none} /* ── création de compte réussie ── Le bouton ne revient pas à son état initial : le compte existe, le reproposer n'aurait aucun sens. Il se fige sur une coche qui se dessine, le temps que l'œil l'attrape avant le message. */ #loginModal .auth-submit.is-ok{ background:linear-gradient(180deg,#1aa260,#0c7a45); box-shadow:0 14px 32px rgba(12,122,69,.34); animation:kmOkPop .34s var(--ease) both; } /* sans ça, le :disabled du bouton grise la confirmation */ #loginModal .auth-submit.is-ok:disabled{opacity:1;transform:none} #loginModal .auth-submit.is-ok::after{display:none} #loginModal .auth-submit .ok-check{ width:19px;height:19px;flex:none;fill:none;stroke:#fff;stroke-width:2.7; stroke-linecap:round;stroke-linejoin:round} #loginModal .auth-submit .ok-check path{ stroke-dasharray:24;stroke-dashoffset:24; animation:kmOkDraw .4s cubic-bezier(.65,0,.35,1) .08s forwards} @keyframes kmOkPop{0%{transform:scale(1)}45%{transform:scale(1.035)}100%{transform:scale(1)}} @keyframes kmOkDraw{to{stroke-dashoffset:0}} /* le trait reste dessiné, seul le mouvement disparaît */ @media (prefers-reduced-motion: reduce){ #loginModal .auth-submit.is-ok{animation:none} #loginModal .auth-submit .ok-check path{animation:none;stroke-dashoffset:0} } #loginModal .auth-divider{margin:14px 0;color:#aeb4c0;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em} #loginModal .auth-divider::before,#loginModal .auth-divider::after{background:rgba(20,24,40,.1)} #loginModal .oauth-btn{ width:100%;height:48px;padding:0 12px;border-radius:14px;background:#fff;color:#14161c;font-weight:600;font-size:14px; border:1.5px solid rgba(20,24,40,.12);display:flex;align-items:center;justify-content:center;gap:10px; transition:border-color .2s, background .2s, transform .2s, box-shadow .2s; } #loginModal .oauth-btn:hover{background:#fafbfc;border-color:rgba(20,24,40,.26);transform:translateY(-1px);box-shadow:0 8px 20px rgba(10,16,40,.08)} #loginModal .auth-switch{text-align:center;margin-top:13px;color:#8a90a0;font-size:12.5px} #loginModal .auth-switch a{color:var(--accent-2);font-weight:700;cursor:pointer;text-decoration:none} #loginModal .auth-switch a:hover{text-decoration:underline} /* messages d'état */ #loginModal .auth-msg{border-radius:12px;font-weight:500} /* bandeau de confiance */ #loginModal .auth-trust{display:flex;align-items:center;justify-content:center;gap:8px; margin-top:16px;padding-top:13px;border-top:1px solid rgba(20,24,40,.07); color:#a2a8b4;font-size:11px;letter-spacing:.02em} #loginModal .auth-trust i{font-size:10px;color:#a2a8b4} /* bouton fermer raffiné */ #loginModal .close-modal{top:16px;right:16px;width:34px;height:34px;background:#f1f2f6;border-color:transparent;color:#8a90a0;z-index:2} #loginModal .close-modal:hover{background:#14161c;color:#fff;border-color:#14161c;transform:none} /* ── écrans étroits : le visuel s'efface, le médaillon logo revient ── */ @media(max-width:760px){ #loginModal .auth-aside{display:none} #loginModal .auth-crest{display:flex} #loginModal .modal-content.auth-modal{max-width:500px} #loginModal .auth-main{padding:30px 34px 20px} } /* ── mobile compact (bottom sheet) ── */ /* ── mobile compact (bottom sheet) : TOUT doit tenir à l'écran, sans scroll ── */ @media(max-width:600px){ /* hauteur de feuille alignée sur le viewport réel (barre d'adresse comprise) */ .modal-content{max-height:92dvh} #loginModal .modal-content.auth-modal{flex-direction:column;border-radius:26px 26px 0 0;padding:14px 0 0} #loginModal .modal-content::before{margin:0 auto 10px} #loginModal .auth-main{padding:0 20px 14px} #loginModal .auth-head{margin-bottom:12px} #loginModal .auth-crest{width:42px;height:42px;border-radius:13px;margin-bottom:8px} #loginModal .auth-crest img{width:25px} #loginModal .modal-eyebrow{font-size:10px;letter-spacing:.18em;margin-bottom:6px} #loginModal .modal-title{font-size:1.3rem;margin-bottom:5px} #loginModal .modal-sub{font-size:12px;max-width:260px} #loginModal .auth-tabs{margin-bottom:12px} #loginModal .form-group{margin-bottom:8px} #loginModal .auth-field input{height:46px} #loginModal .auth-submit{height:50px} #loginModal .auth-divider{margin:10px 0} #loginModal .oauth-btn{height:46px} #loginModal .auth-switch{margin-top:10px} #loginModal .auth-trust{margin-top:10px;padding-top:9px} } /* ── petits écrans (iPhone SE…) : on resserre encore et on retire le superflu (badge logo, bandeau de confiance) pour rester sans scroll ── */ @media(max-width:600px) and (max-height:740px){ #loginModal .auth-crest{display:none} #loginModal .auth-trust{display:none} #loginModal .modal-sub{display:none} #loginModal .auth-head{margin-bottom:10px} #loginModal .modal-title{font-size:1.2rem} #loginModal .auth-tabs{margin-bottom:10px} #loginModal .form-group{margin-bottom:7px} #loginModal .auth-field input{height:44px} #loginModal .auth-submit{height:48px} #loginModal .auth-divider{margin:8px 0} #loginModal .oauth-btn{height:44px} } /* ═══ Menu utilisateur (connecté) : Suivi / Panier / Déconnexion ═══ */ .km-usermenu{ position:fixed;z-index:10080;min-width:224px; background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:16px; box-shadow:0 18px 50px rgba(0,0,0,.22);padding:6px; opacity:0;transform:translateY(-6px);pointer-events:none; transition:opacity .18s ease, transform .18s ease; } .km-usermenu.show{opacity:1;transform:none;pointer-events:auto} .km-usermenu a,.km-usermenu button{ display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px; border:0;border-radius:10px;background:none;cursor:pointer;text-align:left; font-size:14px;font-weight:600;color:#16181d; } .km-usermenu a:hover,.km-usermenu button:hover{background:#f2f3f6} .km-usermenu i{width:16px;text-align:center;color:#5b6270;font-size:13px} .km-usermenu hr{border:0;border-top:1px solid #f0f1f4;margin:4px 8px} .km-usermenu .km-um-out,.km-usermenu .km-um-out i{color:#c62828} /* ═══ Pastille du panier : nombre de configurations enregistrées ═══ */ .km-shared-nav .km-cart-link{position:relative} .km-shared-nav .km-cart-count{ position:absolute;top:-7px;right:-9px; min-width:14px;height:14px;padding:0 3.5px;border-radius:999px; background:#e5342a;color:#fff; font-size:8.5px;font-weight:800;line-height:1;letter-spacing:0; display:none;align-items:center;justify-content:center; box-shadow:0 0 0 1.5px #fff; /* fin liseré : détache sans alourdir */ pointer-events:none; } .km-shared-nav .km-cart-count.show{display:flex} @media(max-width:980px){ .km-shared-nav .km-cart-count{top:-6px;right:-8px;min-width:15px;height:15px;font-size:9px} } /* rebond de la pastille à l'ajout au panier — défini ici pour que la navbar partagée reste autonome (ne dépende pas du style.css de la page hôte) */ @keyframes badgePop{0%{transform:scale(1)}45%{transform:scale(1.45)}100%{transform:scale(1)}}