/* ═══════════════════════════════════════════════════════════════ ATELIER ANGLE NOIR — navigation sur téléphone Un menu plein écran à un seul niveau, une barre d'actions sous le pouce, et des zones tactiles à la bonne taille. Tout est piloté par la classe .menu-open posée sur . Rien au-dessus de 900 px n'est touché. ═══════════════════════════════════════════════════════════════ */ /* la croix n'existe que sur téléphone : sur ordinateur elle ne doit pas laisser un bouton vide dans la page */ .menu-fermer{ display:none; } @media (max-width:1024px){ /* ── le panneau ───────────────────────────────────────────── */ .nav-links{ display:flex !important; flex-direction:column; align-items:stretch; gap:0; position:fixed; inset:0; z-index:300; background:#0e0e0c; padding:calc(72px + env(safe-area-inset-top,0px)) 0 calc(28px + env(safe-area-inset-bottom,0px)); overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; opacity:0; visibility:hidden; pointer-events:none; -webkit-transform:translate3d(0,-14px,0); transform:translate3d(0,-14px,0); -webkit-transition:opacity .26s ease, visibility .26s ease, -webkit-transform .34s cubic-bezier(.16,1,.3,1); transition:opacity .26s ease, visibility .26s ease, transform .34s cubic-bezier(.16,1,.3,1); } /* panneau fermé : rien de ce qu'il contient ne doit être atteignable */ .nav-links *{ pointer-events:none !important; } html.menu-open .nav-links, html.menu-open .nav-links *{ pointer-events:auto !important; } html.menu-open .nav-links{ opacity:1; visibility:visible; pointer-events:auto; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); } html.menu-open{ overflow:hidden; } html.menu-open body{ overflow:hidden; } /* la barre du haut reste au-dessus du panneau, pour le burger */ nav{ z-index:320 !important; } html.menu-open nav{ background:transparent !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; border-bottom-color:transparent !important; -webkit-transform:none !important; transform:none !important; } html.menu-open nav.scrolled::after{ display:none; } /* ── les entrées : une seule profondeur, 56 px de haut ───── */ .nav-links > a, .nav-dropdown > a{ display:flex; align-items:center; min-height:56px; padding:0 26px; font-size:.94rem !important; letter-spacing:.13em !important; text-transform:uppercase; color:#f5f2ec !important; border-bottom:.5px solid rgba(200,169,110,.13); } .nav-links > a:active{ background:rgba(200,169,110,.09); } /* « Services » et « Estimer » deviennent des intitulés de groupe */ .nav-dropdown{ position:static; } .nav-dropdown > a{ min-height:auto; padding:26px 26px 9px; font-size:.58rem !important; letter-spacing:.3em !important; color:var(--gold,#c8a96e) !important; border-bottom:none; pointer-events:none; /* c'est un titre, plus un lien */ } .nav-dropdown > a::after{ display:none !important; } /* plus de chevron */ /* le sous-menu est déplié dans le panneau — mais UNIQUEMENT quand le panneau est ouvert. Sans cette condition, il reste cliquable par-dessus la page et détourne les taps : c'est ce qui cassait les estimateurs. */ .nav-dropdown .dropdown-menu{ display:flex !important; position:static !important; opacity:1 !important; visibility:inherit !important; /* suit le panneau, jamais l'inverse */ pointer-events:none !important; -webkit-transform:none !important; transform:none !important; min-width:0; width:auto; background:transparent !important; border:none !important; box-shadow:none !important; flex-direction:column; } html.menu-open .nav-dropdown .dropdown-menu{ visibility:visible !important; pointer-events:auto !important; } .nav-dropdown .dropdown-menu a{ display:flex; align-items:center; min-height:56px; padding:0 26px !important; font-size:.94rem !important; letter-spacing:.13em !important; text-transform:uppercase; color:rgba(245,242,236,.82) !important; background:transparent !important; border-bottom:.5px solid rgba(200,169,110,.13) !important; opacity:1 !important; -webkit-transform:none !important; transform:none !important; transition:background .18s !important; } .nav-dropdown .dropdown-menu a:active{ background:rgba(200,169,110,.09) !important; } /* le bouton de rendez-vous, en bas du panneau */ .nav-links .nav-cta{ display:block !important; margin:30px 26px 0; min-height:54px; line-height:54px; padding:0 !important; text-align:center; background:var(--gold,#c8a96e) !important; color:#0e0e0c !important; border:none !important; font-size:.68rem !important; letter-spacing:.16em !important; } /* ── la croix de fermeture ────────────────────────────────── */ .menu-fermer{ position:fixed; top:calc(14px + env(safe-area-inset-top,0px)); right:12px; z-index:330; width:46px; height:46px; display:none; align-items:center; justify-content:center; background:none; border:0; padding:0; cursor:pointer; -webkit-appearance:none; appearance:none; } html.menu-open .menu-fermer{ display:flex; } .menu-fermer::before,.menu-fermer::after{ content:''; position:absolute; width:21px; height:1px; background:#f5f2ec; } .menu-fermer::before{ -webkit-transform:rotate(45deg); transform:rotate(45deg); } .menu-fermer::after{ -webkit-transform:rotate(-45deg); transform:rotate(-45deg); } html.menu-open .burger{ visibility:hidden; } /* ── la cascade à l'ouverture ─────────────────────────────── */ .nav-links > *, .nav-dropdown .dropdown-menu a{ opacity:0; -webkit-transform:translate3d(0,10px,0); transform:translate3d(0,10px,0); } html.menu-open .nav-links > *, html.menu-open .nav-dropdown .dropdown-menu a{ opacity:1; -webkit-transform:translate3d(0,0,0) !important; transform:translate3d(0,0,0) !important; -webkit-transition:opacity .34s ease var(--md,0s), -webkit-transform .42s cubic-bezier(.16,1,.3,1) var(--md,0s); transition:opacity .34s ease var(--md,0s), transform .42s cubic-bezier(.16,1,.3,1) var(--md,0s); } /* ── LA BARRE D'ACTIONS, SOUS LE POUCE ───────────────────── */ #sticky-bar{ display:grid !important; grid-template-columns:1fr 1fr 1fr; align-items:stretch; padding:0 !important; background:#12120f !important; border-top:.5px solid rgba(200,169,110,.3); padding-bottom:env(safe-area-inset-bottom,0px) !important; text-align:left !important; } html.menu-open #sticky-bar{ display:none !important; } #sticky-bar .sb-act{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:58px; font-family:'Outfit',system-ui,sans-serif; font-size:.56rem; letter-spacing:.17em; text-transform:uppercase; color:rgba(245,242,236,.9); border-left:.5px solid rgba(200,169,110,.16); -webkit-tap-highlight-color:transparent; } #sticky-bar .sb-act:first-child{ border-left:none; } #sticky-bar .sb-act:active{ background:rgba(200,169,110,.1); } #sticky-bar .sb-act svg{ width:17px; height:17px; stroke:var(--gold,#c8a96e); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; } /* l'action principale est la seule pleine */ #sticky-bar .sb-act.sb-pri{ background:var(--gold,#c8a96e); color:#0e0e0c; font-weight:500; } #sticky-bar .sb-act.sb-pri svg{ stroke:#0e0e0c; } /* le contenu ne doit pas finir sous la barre */ body{ padding-bottom:calc(58px + env(safe-area-inset-bottom,0px)); } /* ── LES ZONES TACTILES ──────────────────────────────────── */ /* on agrandit la surface sensible sans déplacer le texte */ .svc-link,.porte-go,.footer-col a,.blog-card a,.proj a, a.btn,a.cta,.qa summary,.faq summary{ position:relative; } .svc-link::before,.porte-go::before{ content:''; position:absolute; left:0; right:0; top:calc(50% - 22px); height:44px; } .footer-col a{ display:inline-block; padding:9px 0; } .qa summary,.faq summary,details > summary{ min-height:44px; padding-top:12px; padding-bottom:12px; } /* ── LE LOGO qui chevauchait le burger sur les petits écrans ── */ .nav-logo{ font-size:.78rem !important; letter-spacing:.08em !important; } .nav-logo img{ height:30px !important; } .burger{ min-width:46px; min-height:46px; justify-content:center; } } /* sur les écrans très étroits, la marque seule */ @media (max-width:400px){ .nav-logo span,.nav-logo i{ display:none; } .nav-logo{ font-size:.72rem !important; } #sticky-bar .sb-act{ font-size:.5rem; letter-spacing:.12em; } } /* ── LE GARDE-FOU ─────────────────────────────────────────── */ @media (max-width:1024px) and (prefers-reduced-motion:reduce){ .nav-links, .nav-links > *, .nav-dropdown .dropdown-menu a{ -webkit-transition:none !important; transition:none !important; -webkit-transform:none !important; transform:none !important; } .nav-links > *,.nav-dropdown .dropdown-menu a{ opacity:1; } } /* ═══════════════════════════════════════════════════════════════ LE CHIFFRAGE RESTE LE CHIFFRAGE Tant que le visiteur remplit l'estimateur, la page ne doit pas le déposer dans les services ou le pied de page d'un coup de pouce. Tout revient dès que le résultat est affiché. ═══════════════════════════════════════════════════════════════ */ @media (max-width:1024px){ html.outil-focus .horsembed, html.outil-focus footer, html.outil-focus #sticky-bar{ display:none !important; } /* l'outil occupe l'écran : plus de vide à faire défiler sous lui */ html.outil-focus body{ padding-bottom:0 !important; overscroll-behavior-y:contain; } html.outil-focus .step{ min-height:calc(100vh - 72px); } } /* les boutons d'outil du studio de plan : atteignables au doigt */ @media (max-width:1024px){ .tbtn{ min-height:44px !important; padding:0 16px !important; display:inline-flex !important; align-items:center; font-size:13px !important; } .tbtn.file{ font-weight:500; } .tools{ gap:8px; } } /* ═══ TYPOGRAPHIE SUR TÉLÉPHONE (09/2026) : des titres qui s'imposent, des paragraphes qui respirent. Les pages fixent leurs tailles en clamp() calées sur l'écran d'ordinateur ; sous 720 px on relève les titres et on ouvre les paragraphes, sans toucher aux outils (estimation, DPE) qui ont leur peau. */ @media (max-width:720px){ body:not(.outil) h1, body:not(.outil) .hero-title{ font-size:clamp(2.35rem,10.5vw,3.1rem) !important; line-height:1.06 !important; letter-spacing:-.015em; } body:not(.outil) h2, body:not(.outil) .section-title{ font-size:clamp(1.9rem,8vw,2.5rem) !important; line-height:1.12 !important; } body:not(.outil) h3{ font-size:1.35rem !important; line-height:1.25 !important; } body:not(.outil) p, body:not(.outil) li{ font-size:1rem !important; line-height:1.72 !important; } body:not(.outil) .chapeau, body:not(.outil) .hero-sub, body:not(.outil) .lead{ font-size:1.12rem !important; line-height:1.55 !important; } body:not(.outil) .section-label, body:not(.outil) .label, body:not(.outil) .eyebrow{ font-size:.62rem !important; letter-spacing:.26em !important; } body:not(.outil) .stat-number{ font-size:2.3rem !important; } body:not(.outil) .stat-label{ font-size:.62rem !important; } body:not(.outil) section, body:not(.outil) .preuve{ padding-left:1.25rem !important; padding-right:1.25rem !important; } body:not(.outil) .preuve-n{ font-size:4.2rem !important; } body:not(.outil) .preuve-h{ font-size:1.25rem !important; } /* les longs paragraphes se lisent mieux courts : on borne la largeur, pas le texte */ body:not(.outil) p{ max-width:100% !important; } } /* ═══════════════════════════════════════════════════════════════ LE CHIFFRAGE NE PASSE PAS SOUS LA BARRE La barre d'actions est fixée en bas de l'écran. Tant que le visiteur est dans un estimateur, le total qui s'actualise se retrouvait masqué derrière elle. Dans un outil en cinq étapes, l'outil EST l'appel à l'action : la barre s'efface. ═══════════════════════════════════════════════════════════════ */ @media (max-width:1024px){ :root{ --barre-bas:calc(58px + env(safe-area-inset-bottom,0px)); } html.page-outil #sticky-bar{ display:none !important; } html.page-outil body{ padding-bottom:0 !important; } /* garde-fou : si la barre revient, rien ne finit dessous */ html:not(.page-outil) .step, html:not(.page-outil) .result{ padding-bottom:calc(var(--barre-bas) + 18px); } }