/* ============================================================ GROUPE LICINA — design-tokens.css · v1.0 Rôles définis par le brief §4.1. Identité typographique validée par le client : serif atelier + mono technique. Ne pas renommer les variables ; le CSS des pages s'y réfère. ============================================================ */ :root{ /* — Encre & papier — */ --encre:#16222F; /* bleu nuit — titres, texte, panneaux sombres */ --encre-2:#2B3D50; /* sombre secondaire, hover sur fond sombre */ --papier:#F5F1E8; /* fond de page — ivoire chaud */ --carte:#FDFBF5; /* cartes / surfaces surélevées */ --ligne:#DCD4C2; /* filets, bordures, grille blueprint */ --gris-texte:#5A6674; /* texte atténué sur papier (AA) */ --papier-70:rgba(245,241,232,.74); /* — Accents métier (éléments d'identité uniquement) — */ --ambre:#D98E33; --ambre-hover:#C57F26; --ambre-texte:#8F5710; --vert:#4C7A50; --vert-texte:#3A5F3E; --terre:#B65C38; --terre-texte:#94472A; /* Variantes éclaircies d'un cran — fonds --encre uniquement */ --ambre-clair:#E9AA55; --vert-clair:#7FAE84; --terre-clair:#D68B67; /* — États — */ --focus:#16222F; /* anneau 2px, décalé de 2px */ --erreur:#A3352C; /* erreurs formulaire — jamais un accent métier */ /* — Typographie — */ --font-display:'Cinzel','Cinzel Fallback',serif; --font-body:'Inter','Inter Fallback',sans-serif; --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', monospace; --fs-h1:clamp(2.05rem, 5.2vw, 3.15rem); --fs-h2:clamp(1.45rem, 3vw, 2.05rem); --fs-h3:1.2rem; --fs-body:1rem; --lh-body:1.65; --fs-eyebrow:.78rem; --ls-eyebrow:.12em; --fs-mono-s:.74rem; /* — Espacements — */ --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4.5rem; --sec-pad:clamp(3.25rem, 7vw, 5.5rem); /* — Gabarit — */ --container:1140px; --gutter:24px; --header-h:72px; /* — La Ligne Licina (rail vertical) — */ --rail-x:calc(var(--gutter) + 8px); /* centre de la ligne, depuis le bord du conteneur */ --rail-ind:44px; /* retrait du contenu au-delà du gutter */ --rail-c:var(--encre); /* — Rayons — */ --r-card:10px; --r-btn:8px; --r-chip:999px; /* — Ombres (quasi aucune — brief §5) — */ --shadow-sticky:0 -4px 16px rgba(22,34,47,.10); --shadow-header:0 4px 14px rgba(22,34,47,.06); /* — Accent actif (défaut : ambre / Accueil) — */ --accent:var(--ambre); --accent-texte:var(--ambre-texte); --accent-clair:var(--ambre-clair); } /* Bascule d'accent par métier — classe portée par */ .m-transport {--accent:var(--ambre);--accent-texte:var(--ambre-texte);--accent-clair:var(--ambre-clair);} .m-distribution{--accent:var(--vert); --accent-texte:var(--vert-texte); --accent-clair:var(--vert-clair);} .m-renovation {--accent:var(--terre);--accent-texte:var(--terre-texte);--accent-clair:var(--terre-clair);} @media (min-width:900px){ :root{--rail-x:calc(var(--gutter) + 20px); --rail-ind:80px;} } /* ============================================================ GROUPE LICINA — styles.css · v1.0 Prototype statique : HTML + CSS uniquement, zéro JS. Polices auto-hébergées (fonts/). Tokens : design-tokens.css. ============================================================ */ /* — Polices — */ @font-face{font-family:'Cinzel';font-style:normal;font-weight:400 900;font-display:swap;src:url('/assets/fonts/cinzel.woff2') format('woff2');} @font-face{font-family:'Cinzel Fallback';src:local('Georgia');ascent-override:76.43%;descent-override:29.13%;line-gap-override:0.00%;size-adjust:127.71%;} @font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter.woff2') format('woff2');} @font-face{font-family:'Inter Fallback';src:local('Arial');ascent-override:90.30%;descent-override:22.48%;line-gap-override:0.00%;size-adjust:107.28%;} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/plexmono-400.woff2') format('woff2');} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/plexmono-500.woff2') format('woff2');} /* — Base — */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font:400 var(--fs-body)/var(--lh-body) var(--font-body);background:var(--papier);color:var(--encre);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} img,svg{display:block;max-width:100%} p{margin:0;max-width:65ch;text-wrap:pretty} ul,ol{list-style:none;margin:0;padding:0} h1,h2{margin:0;font-family:var(--font-display);font-weight:700;color:var(--encre);letter-spacing:.012em;text-wrap:balance} h1{font-size:var(--fs-h1);line-height:1.14} h2{font-size:var(--fs-h2);line-height:1.2} h3{margin:0;font:600 var(--fs-h3)/1.35 var(--font-body);color:var(--encre);text-wrap:balance} a{color:var(--ambre-texte);text-underline-offset:3px} a:hover{color:var(--encre)} ::selection{background:var(--encre);color:var(--papier)} :focus-visible{outline:2px solid var(--focus);outline-offset:2px} [id]{scroll-margin-top:calc(var(--header-h) + 16px)} .container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)} .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} .skip-link{position:fixed;top:-120px;left:16px;z-index:120;background:var(--encre);color:var(--papier);padding:.7rem 1.05rem;border-radius:var(--r-btn);text-decoration:none;font-weight:600;transition:top .15s} .skip-link:focus{top:12px;color:var(--papier)} .mono-s{font:500 var(--fs-mono-s)/1.6 var(--font-mono);letter-spacing:.07em} /* — Eyebrow (repère mono + nœud accent) — */ .eyebrow{display:inline-flex;align-items:center;gap:.6em;font:500 var(--fs-eyebrow)/1.3 var(--font-mono);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--gris-texte)} .eyebrow::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none} /* — Wordmark (LICINA / descripteur dessous — direction validée) — */ .wordmark{display:inline-flex;flex-direction:column;gap:.3rem;line-height:1;text-decoration:none;color:var(--encre)} .wm-l{font:700 1.32rem/1 var(--font-display);letter-spacing:.16em;position:relative;display:inline-block;padding-right:.2em} .wm-g{font:400 .58rem/1 var(--font-display);letter-spacing:.52em;color:var(--encre-2)} .wordmark--foot{margin:0} .wordmark--foot .wm-l{font-size:1.5rem} /* Lockup héro microsite : LICINA + métier en accent */ .lockup{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.15rem} .lockup .lk-l{font:700 1.08rem/1 var(--font-display);letter-spacing:.24em;color:var(--encre);position:relative;display:inline-block} .wm-a{position:relative;display:inline-block} .wm-sw{position:absolute;left:0;top:.0755em;width:1.35em;max-width:none;height:.72em;overflow:visible;pointer-events:none} .wm-sw path{fill:currentColor} .lockup .lk-d{font:700 .8rem/1 var(--font-display);letter-spacing:.5em;color:var(--accent-texte)} /* — Boutons — */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font:600 1rem/1 var(--font-body);padding:.9rem 1.5rem;min-height:48px;border-radius:var(--r-btn);border:1.5px solid transparent;text-decoration:none;color:var(--encre);cursor:pointer;transition:background-color .15s,color .15s,border-color .15s} .btn--p{background:var(--ambre);color:var(--encre)} .btn--p:hover{background:var(--ambre-hover);color:var(--encre)} .btn--g{border-color:var(--encre);background:transparent;color:var(--encre)} .btn--g:hover{background:var(--encre);color:var(--papier)} .btn--g:hover .ic{color:var(--papier)} .btn--wa{border-color:var(--ligne);background:var(--carte);color:var(--encre)} .btn--wa:hover{border-color:var(--encre-2);color:var(--encre)} .btn--s{padding:.7rem 1.5rem;min-height:44px;font-size:.92rem} .btn .ic{width:18px;height:18px} .sec--dark .btn--g{border-color:var(--papier);color:var(--papier)} .sec--dark .btn--g:hover{background:var(--papier);color:var(--encre)} .sec--dark .btn--g:hover .ic{color:var(--encre)} /* — Puces techniques — */ .chips{display:flex;flex-wrap:wrap;gap:.5rem} .chip{font:500 .7rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--encre-2);padding:.55rem .8rem;border:1px solid var(--ligne);border-radius:var(--r-chip);background:var(--carte);white-space:nowrap} @media (max-width:400px){.chip{white-space:normal;line-height:1.35}} /* — Icônes (traits 1.75, un seul point accent) — */ .ic{width:22px;height:22px;flex:none;color:var(--encre)} .ic path,.ic circle,.ic rect,.ic line{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round} .ic .ic-dot{fill:var(--accent);stroke:none} .sec--dark .ic{color:var(--papier)} .sec--dark .ic .ic-dot{fill:var(--accent-clair)} /* ============================================================ HEADER ============================================================ */ .site-head{position:sticky;top:0;z-index:80;background:rgba(245,241,232,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--ligne)} .head-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--header-h)} .nav-burger{appearance:none;padding:0} .nav-burger{display:grid;place-items:center;width:46px;height:46px;border:1.5px solid var(--ligne);border-radius:var(--r-btn);background:var(--carte);cursor:pointer} .nb-i{position:relative;width:20px;height:2px;background:var(--encre);transition:background .15s} .nb-i::before,.nb-i::after{content:'';position:absolute;left:0;width:20px;height:2px;background:var(--encre);transition:transform .18s} .nb-i::before{top:-6px} .nb-i::after{top:6px} .nav-burger[aria-expanded="true"] .nb-i{background:transparent} .nav-burger[aria-expanded="true"] .nb-i::before{transform:translateY(6px) rotate(45deg)} .nav-burger[aria-expanded="true"] .nb-i::after{transform:translateY(-6px) rotate(-45deg)} .nav-burger:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .site-nav{display:none} .site-nav a{text-decoration:none;color:var(--encre)} @media (max-width:840px){ /* header backdrop-filter = fixed containing block */ .site-nav{position:fixed;top:var(--header-h);left:0;width:100%;height:calc(100dvh - var(--header-h));z-index:75;background:var(--papier);flex-direction:column;align-items:stretch;gap:0;padding:1.4rem var(--gutter) 2.2rem;overflow:auto} .site-nav.is-open{display:flex} .site-nav a{font:600 1.15rem/1.3 var(--font-body);padding:1.05rem .1rem;border-bottom:1px solid var(--ligne)} .site-nav a[aria-current]{color:var(--accent-texte)} .site-nav .nav-devis{margin-top:1.4rem;border:0;justify-content:center;padding:.95rem 1.5rem} body.nav-open{overflow:hidden} } @media (min-width:841px){ .nav-burger{display:none} .site-nav{display:flex;align-items:center;gap:1.7rem} .site-nav a{font:500 .95rem/1 var(--font-body);padding:.55rem .1rem;position:relative} .site-nav a:hover{color:var(--accent-texte)} .site-nav a[aria-current]{color:var(--accent-texte)} .site-nav a[aria-current]::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--accent)} .site-nav .nav-devis{margin-left:.5rem;padding:.7rem 1.5rem} .site-nav .nav-devis::after{display:none} } /* ============================================================ LA LIGNE LICINA — rail vertical continu ============================================================ */ .rail{position:relative;padding-top:var(--sec-pad);padding-bottom:var(--sec-pad);padding-left:calc(var(--gutter) + var(--rail-ind));--node-off:calc(var(--rail-x) - var(--gutter) - var(--rail-ind))} .rail::before{content:'';position:absolute;top:0;bottom:0;left:calc(var(--rail-x) - 1px);width:2px;background:var(--rail-c)} .sec--dark .rail::before{background:rgba(245,241,232,.55)} .rail--end::before{bottom:auto;height:var(--rail-endh,104px)} .rail--end::after{content:'';position:absolute;left:calc(var(--rail-x) - 6px);top:calc(var(--rail-endh,104px) - 5px);width:11px;height:11px;background:var(--encre);transform:rotate(45deg)} /* Arrêts sur la ligne (nœud + amorce) */ .stop{position:relative} .stop::before{content:'';position:absolute;z-index:2;left:calc(var(--node-off) - 7px);top:var(--node-y,24px);width:14px;height:14px;border-radius:50%;background:var(--accent);border:2.5px solid var(--encre)} .stop::after{content:'';position:absolute;left:calc(var(--node-off) + 7px);top:calc(var(--node-y,24px) + 6px);height:2px;width:calc(-1*var(--node-off) - 11px);background:var(--ligne)} /* Départ de la ligne (héro) */ .ligne-depart{width:14px;height:104px;margin-left:calc(var(--rail-x) - var(--gutter) - 7px);margin-top:clamp(1.7rem,4vw,2.6rem);display:flex;flex-direction:column;align-items:center} .ld-node{width:14px;height:14px;border-radius:50%;background:var(--encre);flex:none} .ld-line{width:2px;flex:1;background:var(--encre);transform-origin:top center;animation:ld-draw .6s ease-out .1s both} @keyframes ld-draw{from{transform:scaleY(0)}} /* ============================================================ SECTIONS ============================================================ */ .sec-head{display:grid;gap:.85rem;margin-bottom:clamp(1.8rem,4vw,2.7rem)} .sec-head .lede{color:var(--gris-texte);max-width:62ch} .sec--dark{background:var(--encre);color:var(--papier)} .sec--dark h2,.sec--dark h3{color:var(--papier)} .sec--dark p{color:var(--papier-70)} .sec--dark .eyebrow{color:var(--papier-70)} .sec--dark .eyebrow::before{background:var(--accent-clair)} .sec--dark a{color:var(--papier)} .sec--dark .sec-head .lede{color:var(--papier-70)} /* — Héro — */ .hero .container{padding-top:clamp(2.4rem,6vw,4rem);padding-bottom:0} .hero h1{margin-top:.95rem} .hero-sub{margin:1.15rem 0 1.65rem;color:var(--gris-texte);font-size:1.05rem} .hero-grid{display:grid;gap:2.6rem} .hero-solo{max-width:820px} .cta-row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center} .hero .chips{margin-top:1.5rem;gap:.45rem 1.5rem} .hero .chip{border:0;background:none;padding:0;color:var(--gris-texte);display:inline-flex;align-items:center;gap:.55em} .hero .chip::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--encre-2);flex:none} @media (max-width:899px){.hero h1{max-width:24ch}.hero-sub{max-width:52ch}} /* — Cartes génériques — */ .card{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r-card);padding:1.4rem} /* — Cartes métiers (arrêts de la Ligne, Accueil) — */ .stops{display:flex;flex-direction:column;gap:1.4rem} .mcard{position:relative;background:var(--carte);border:1px solid var(--ligne);border-top:3px solid var(--accent);border-radius:var(--r-card);padding:1.5rem 1.6rem;display:grid;gap:1.15rem;--node-y:26px} .mc-name{font:500 .74rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-texte)} .mc-promise{font:700 clamp(1.25rem,2.2vw,1.5rem)/1.3 var(--font-display);color:var(--encre);margin:.6rem 0 1rem;letter-spacing:.01em;text-wrap:balance} .disc{display:inline-flex;align-items:center;gap:.45rem;font:600 .95rem/1 var(--font-body);color:var(--accent-texte);text-decoration:none} .disc:hover{color:var(--encre)} .blist{display:grid;gap:.55rem;align-content:center} .blist li{display:flex;gap:.6rem;align-items:baseline;font-size:.96rem;color:var(--encre-2)} .blist li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none;transform:translateY(-2px)} .acc-t{--accent:var(--ambre);--accent-texte:var(--ambre-texte);--accent-clair:var(--ambre-clair)} .acc-d{--accent:var(--vert);--accent-texte:var(--vert-texte);--accent-clair:var(--vert-clair)} .acc-r{--accent:var(--terre);--accent-texte:var(--terre-texte);--accent-clair:var(--terre-clair)} /* — Engagements — */ .egrid{display:grid;gap:1rem} .ecard{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r-card);padding:1.35rem 1.4rem;display:grid;gap:.5rem;align-content:start} .ecard .ic{width:25px;height:25px;margin-bottom:.35rem} .ecard h3{font-size:1.04rem} .ecard p{font-size:.95rem;color:var(--gris-texte)} /* — Bande sombre : synergie / pourquoi — */ .syn-grid{display:grid;gap:2.6rem;align-items:center} .syn-svg{width:100%;height:auto} .syn-svg .sline{fill:none;stroke:var(--papier);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke} .syn-svg .syn-o{fill:var(--papier)} .syn-svg text{font-family:var(--font-mono)} .whys{display:grid;gap:1.2rem;max-width:780px} .why{display:flex;gap:.95rem;align-items:flex-start} .why .ic{margin-top:2px} .why p{color:var(--papier-70)} .why b{color:var(--papier);font-weight:600} .xsell{margin-top:2rem;max-width:780px;border:1px solid rgba(245,241,232,.3);border-radius:var(--r-card);padding:1.05rem 1.2rem;font-size:.95rem} .xsell a{text-decoration:underline;text-underline-offset:3px} /* — Bloc franchise — */ .franchise{max-width:760px;border:1px solid var(--ligne);border-radius:var(--r-card);background:var(--carte);padding:1.5rem 1.65rem} .franchise h2{font:700 1.28rem/1.3 var(--font-display);margin:.55rem 0 .6rem;letter-spacing:.01em} .franchise p{color:var(--gris-texte)} /* — Fiche technique — */ .fiche{position:relative;border:1px solid var(--ligne);border-radius:var(--r-card);padding:clamp(1.2rem,3vw,2rem);background:linear-gradient(rgba(220,212,194,.42) 1px,transparent 1px),linear-gradient(90deg,rgba(220,212,194,.42) 1px,transparent 1px),var(--carte);background-size:26px 26px,26px 26px,auto} .fiche-grid{display:grid;gap:1.7rem} .fiche-stamp{justify-self:start;font:500 .68rem/1.6 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--encre-2);border:1px solid var(--ligne);background:var(--carte);padding:.55rem .8rem;border-radius:6px} .fiche-cap{margin-top:.8rem;font:500 .68rem/1.5 var(--font-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--gris-texte)} .specs{display:grid;gap:.62rem;margin-top:1.15rem} .spec{display:flex;align-items:baseline;gap:.7rem;font:500 .78rem/1.5 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--gris-texte)} .spec .lead{flex:1;border-bottom:2px dotted var(--ligne);min-width:22px;transform:translateY(-3px)} .spec .v{color:var(--encre);font-weight:500;text-align:right} .fiche--mini{padding:1.15rem 1.25rem} .fiche--mini .specs{margin-top:1rem;gap:.5rem} .fiche--mini .fiche-stamp{padding:.45rem .65rem;font-size:.62rem} .fiche--mini .fiche-head{display:flex;justify-content:space-between;align-items:center;gap:.8rem;margin-bottom:.9rem} /* — SVG techniques (trait 2px constant) — */ .tsvg{width:100%;height:auto} .tsvg .k{fill:none;stroke:var(--encre);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke} .tsvg .kh{fill:none;stroke:var(--ligne);stroke-width:1.5;vector-effect:non-scaling-stroke} .tsvg .kd{fill:none;stroke:var(--encre-2);stroke-width:1.25;vector-effect:non-scaling-stroke} .tsvg .kfill{fill:var(--carte)} .tsvg .vbox{fill:var(--carte);stroke:var(--ligne);stroke-width:1.5} .tsvg .fdot{fill:var(--accent)} .tsvg .fdot--e{fill:var(--encre)} .tsvg text{font-family:var(--font-mono);letter-spacing:.08em;fill:var(--gris-texte)} .tsvg .tt{fill:var(--encre);font-weight:500} /* — Carte de zone — */ .zone-grid{display:grid;gap:2.4rem;align-items:start} .map-card{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r-card);padding:1rem} .map-svg .dot{fill:var(--encre)} .map-svg .rivb{fill:none;stroke:var(--ligne);stroke-width:7;stroke-linecap:round} .map-svg .rivc{fill:none;stroke:var(--encre-2);stroke-width:1.2;opacity:.45} .map-svg .ring{fill:none;stroke:var(--encre-2);stroke-width:1.5;stroke-dasharray:5 7} .map-svg text{font-family:var(--font-mono);letter-spacing:.07em;fill:var(--gris-texte)} .map-svg .tt{fill:var(--encre);font-weight:500} .map-svg .fdot{fill:var(--accent)} .map-svg .kfill{fill:var(--carte);stroke:var(--encre);stroke-width:2} .map-svg .kd{fill:none;stroke:var(--encre-2);stroke-width:1.25} .communes{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem;max-width:640px} .zone-note{margin-top:1.2rem;color:var(--gris-texte);font-size:.95rem} /* — Étapes / méthode (arrêts sur la Ligne) — */ .steps{display:grid;gap:2.1rem;max-width:680px} .step{--node-y:5px} .step-k{display:inline-block;font:500 .72rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--encre);background:var(--carte);border:1px solid var(--ligne);border-radius:6px;padding:.42rem .6rem} .step-k--time{color:var(--accent-texte)} .step h3{margin:.65rem 0 .35rem} .step p{color:var(--gris-texte);max-width:56ch} /* — Cartes services (Transport) & prestations — */ .scards{display:grid;gap:1rem} .scard{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r-card);padding:1.4rem;display:grid;gap:.55rem;align-content:start} .scard .ic{width:25px;height:25px;margin-bottom:.3rem} .scard h3{font-size:1.05rem} .scard p{font-size:.95rem;color:var(--gris-texte)} .scard-badge{font:500 .64rem/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-texte)} .scard--lead{border-top:3px solid var(--accent)} .scard--lead h3{font:700 1.4rem/1.25 var(--font-display);letter-spacing:.01em} .scard--lead p{font-size:1rem} .scope-note{margin-top:1.1rem;max-width:760px;border:1px dashed var(--ligne);border-radius:var(--r-card);padding:1rem 1.15rem;color:var(--gris-texte);font-size:.95rem;background:transparent} .scope-note b{color:var(--encre);font-weight:600} /* — Repères tarifaires (optionnel, masqué par défaut) — */ .tarifs{max-width:640px;border:1px solid var(--ligne);border-radius:var(--r-card);overflow:hidden;background:var(--carte)} .tarif{display:flex;justify-content:space-between;gap:1rem;padding:.95rem 1.15rem;font:500 .8rem/1.5 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--gris-texte);border-top:1px solid var(--ligne)} .tarif:first-child{border-top:0} .tarif .v{color:var(--encre)} /* — FAQ — */ .faq{max-width:800px} .faq details{border-top:1px solid var(--ligne)} .faq details:last-child{border-bottom:1px solid var(--ligne)} .faq summary{display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;padding:1.08rem .1rem;font:600 1.02rem/1.45 var(--font-body);color:var(--encre);cursor:pointer;list-style:none} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:'+' / '';flex:none;font:400 1.3rem/1 var(--font-mono);color:var(--accent-texte);transform:translateY(2px)} .faq details[open] summary::after{content:'−' / ''} .faq details p{padding:0 .1rem 1.3rem;color:var(--gris-texte)} .faq summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px} /* ============================================================ FORMULAIRES ============================================================ */ .form-wrap{display:grid;gap:2.2rem;align-items:start} .fastpaths{display:flex;flex-wrap:wrap;gap:.7rem;margin:.3rem 0 1.7rem} .form-card{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r-card);padding:clamp(1.3rem,3vw,2rem);display:grid;gap:1.2rem;max-width:760px} .f-grid{display:grid;gap:1.15rem} .form-card p,.form-card .f-field{max-width:none} .f-full{grid-column:1/-1} .f-field label{display:block;font:600 .88rem/1.3 var(--font-body);color:var(--encre);margin-bottom:.45rem} .req{color:var(--encre-2)} .f-field input,.f-field select,.f-field textarea{width:100%;min-height:48px;padding:.72rem .85rem;font:400 1rem/1.4 var(--font-body);color:var(--encre);background:var(--carte);border:1.5px solid var(--ligne);border-radius:var(--r-btn)} .f-field input::placeholder,.f-field textarea::placeholder{color:rgba(90,102,116,.72)} .f-field input:focus-visible,.f-field select:focus-visible,.f-field textarea:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--encre-2)} .f-field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%2316222F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .85rem center;background-size:14px;padding-right:2.5rem} .f-field textarea{min-height:112px;resize:vertical} .f-hint{margin-top:.4rem;font-size:.8rem;color:var(--gris-texte)} .hp{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);border:0} .turnstile-slot{min-height:65px;display:flex;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed var(--ligne);border-radius:var(--r-btn);background:rgba(220,212,194,.16)} .turnstile-slot span{font:500 .68rem/1.5 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gris-texte);text-align:center;padding-inline:.8rem} .form-noscript{border:1.5px solid var(--erreur);border-radius:var(--r-btn);background:rgba(163,53,44,.05);padding:.9rem 1rem;font-size:.92rem;color:var(--encre)} .form-foot{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap} .f-req{font:500 .68rem/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gris-texte)} .consent{font-size:.78rem;line-height:1.55;color:var(--gris-texte);max-width:none} .consent a{color:var(--gris-texte)} .consent a:hover{color:var(--encre)} /* États (annexe états-formulaire + branchés par le dev) */ .is-error input,.is-error select,.is-error textarea{border-color:var(--erreur)} .f-msg{display:flex;gap:.45rem;margin-top:.45rem;font:500 .84rem/1.45 var(--font-body);color:var(--erreur)} .f-msg .em{flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--erreur);display:grid;place-items:center;font:700 .62rem/1 var(--font-mono);margin-top:2px} .spinner{width:1em;height:1em;border:2.5px solid rgba(22,34,47,.3);border-top-color:var(--encre);border-radius:50%;animation:spin .7s linear infinite} @keyframes spin{to{transform:rotate(1turn)}} .alert{display:flex;gap:.85rem;align-items:flex-start;padding:1.05rem 1.15rem;border-radius:var(--r-card);border:1.5px solid var(--encre);background:var(--carte);font-size:.95rem;color:var(--encre)} .alert b{display:block;font-weight:600;margin-bottom:.1rem} .alert p{color:var(--gris-texte)} .alert--err,.alert--spam{border-color:var(--erreur)} .alert--err b,.alert--spam b{color:var(--erreur)} .alert .ic{width:20px;height:20px;margin-top:2px} .alert--err .ic,.alert--spam .ic{color:var(--erreur)} .alert a{color:var(--encre);font-weight:600} /* — Cartes contact — */ .ccards{display:grid;gap:1rem} .ccard{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r-card);padding:1.5rem;display:grid;gap:.4rem;align-content:start;text-decoration:none;color:var(--encre)} a.ccard:hover{border-color:var(--encre-2);color:var(--encre)} .ccard .ic{width:26px;height:26px;margin-bottom:.55rem} .ccard-t{font:500 .7rem/1 var(--font-mono);letter-spacing:.15em;text-transform:uppercase;color:var(--gris-texte)} .ccard-big{font:700 1.18rem/1.35 var(--font-display);letter-spacing:.03em;overflow-wrap:anywhere} .ccard p{font-size:.92rem;color:var(--gris-texte)} .side-info{display:grid;gap:1rem;align-content:start} .side-info .card{display:grid;gap:.35rem} .side-info .card p{font-size:.95rem;color:var(--gris-texte)} .side-info .card .f-h{font:500 .7rem/1 var(--font-mono);letter-spacing:.15em;text-transform:uppercase;color:var(--gris-texte);margin-bottom:.3rem} /* ============================================================ FOOTER + BARRE MOBILE ============================================================ */ .site-foot{border-top:1px solid var(--ligne);background:var(--carte)} .foot-grid{display:grid;gap:2.3rem;padding-block:3.2rem 3.6rem} .f-col{display:grid;gap:.4rem;align-content:start;justify-items:start} .f-col a{color:var(--encre);text-decoration:none;font-size:.95rem;padding:.14rem 0} .f-col a:hover{color:var(--ambre-texte);text-decoration:underline;text-underline-offset:3px} .f-col p{font-size:.92rem;color:var(--gris-texte)} .f-h{font:500 .68rem/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gris-texte);margin:0 0 .6rem} .f-mission{margin-top:.7rem} .f-nap{margin-top:.9rem} .mobile-bar{display:none} @media (max-width:768px){ body{padding-bottom:84px} .mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;background:var(--carte);border-top:1px solid var(--ligne);box-shadow:var(--shadow-sticky);padding:.55rem .6rem calc(.55rem + env(safe-area-inset-bottom))} .mobile-bar a{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:48px;border-radius:var(--r-btn);font:600 .86rem/1 var(--font-body);color:var(--encre);text-decoration:none;border:1.5px solid var(--ligne);background:var(--carte)} .mobile-bar .ic{width:17px;height:17px} .mobile-bar .mb-devis{background:var(--ambre);border-color:var(--ambre)} } /* ============================================================ ANNEXE — planche d'états ============================================================ */ .spec-grid{display:grid;gap:1.4rem} .spec-item{border:1px solid var(--ligne);border-radius:var(--r-card);padding:1.3rem;background:var(--carte);display:grid;gap:.9rem;align-content:start} .spec-item .lab{font:500 .68rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gris-texte)} .demo-focus input{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--encre-2)} /* ============================================================ RESPONSIVE ============================================================ */ @media (min-width:620px){.foot-grid{grid-template-columns:1fr 1fr}} @media (min-width:700px){.egrid{grid-template-columns:1fr 1fr}.ccards{grid-template-columns:1fr 1fr}} @media (min-width:720px){.f-grid{grid-template-columns:1fr 1fr}} @media (min-width:760px){.scard--lead{grid-template-columns:auto 1fr;gap:1.4rem;align-items:start}.scard--lead .ic{width:32px;height:32px}} @media (min-width:860px){.mcard{grid-template-columns:1.05fr .95fr;gap:2rem}.ccards{grid-template-columns:repeat(3,1fr)}} @media (min-width:900px){.scards{grid-template-columns:repeat(3,1fr)}.scards--4{grid-template-columns:1fr 1fr}.scard--lead{grid-column:1/-1}.spec-grid{grid-template-columns:1fr 1fr}} @media (min-width:940px){.fiche-grid{grid-template-columns:1.55fr 1fr;align-items:start}.syn-grid{grid-template-columns:1fr 1.05fr}} @media (min-width:900px){ .hero-grid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:3.2rem;align-items:start} .zone-grid{grid-template-columns:1.08fr .92fr;gap:3rem} .form-wrap--side{grid-template-columns:1.15fr .85fr;gap:3rem} } @media (min-width:1020px){.foot-grid{grid-template-columns:1.35fr 1fr 1fr 1.15fr}} /* — Motion : un seul dessin de ligne, respect de reduced-motion — */ @supports (animation-timeline: view()){ .draw-view{stroke-dasharray:1;stroke-dashoffset:1;animation:pdraw 1ms linear both;animation-timeline:view();animation-range:entry 25% cover 55%} @keyframes pdraw{to{stroke-dashoffset:0}} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none !important;transition:none !important} } /* — Sélecteur de langue — */ .lang-sw{display:flex;gap:2px;align-items:center;border:1.5px solid var(--ligne);border-radius:var(--r-btn);padding:2px;background:var(--carte)} .lang-sw button{appearance:none;border:0;background:transparent;cursor:pointer;font:600 .72rem/1 var(--font-mono);letter-spacing:.1em;color:var(--gris-texte);padding:.5rem .55rem;border-radius:calc(var(--r-btn) - 3px);min-height:34px} .lang-sw button:hover{color:var(--encre)} .lang-sw button[aria-pressed="true"]{background:var(--encre);color:var(--papier)} .lang-sw button:focus-visible{outline:2px solid var(--focus);outline-offset:2px} @media (max-width:840px){ .site-nav .lang-sw{margin-top:1.4rem;align-self:flex-start} .site-nav .lang-sw button{padding:.6rem .8rem;font-size:.8rem;min-height:44px} } @media (min-width:841px){.site-nav .lang-sw{margin-left:.7rem}} /* — Groupes de prestations — */ .grp+.grp{margin-top:2.4rem} .grp-h{display:flex;align-items:center;gap:1rem;margin-bottom:1.1rem} .grp-h h3{font:500 .72rem/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gris-texte)} .grp-h .r{flex:1;height:1px;background:var(--ligne)} /* — Pages légales — */ .sec--legal>.container{padding-block:var(--sec-pad)} .sec--legal h1{font-size:var(--fs-h2);line-height:1.2} .legal{max-width:76ch;display:grid;gap:2.1rem} .legal>section{display:grid;gap:.7rem} .legal h3{font:600 1.04rem/1.35 var(--font-body);color:var(--encre)} .legal p,.legal li{color:var(--gris-texte);font-size:.97rem;line-height:1.72} .legal ul{display:grid;gap:.45rem} .legal li{padding-left:1.15rem;position:relative} .legal li::before{content:'';position:absolute;left:0;top:.66em;width:4px;height:4px;border-radius:50%;background:var(--encre-2)} .legal .ent{border:1px solid var(--ligne);border-radius:var(--r-card);padding:1.2rem 1.3rem;background:var(--carte);display:grid;gap:.35rem} .legal .ent b{color:var(--encre);font:600 1rem/1.35 var(--font-body)} .legal .ent p{font:500 .82rem/1.75 var(--font-mono)} .legal .upd{font:500 .68rem/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gris-texte)} /* — Héro cinétique (Accueil — piste V5 retenue) — */ .flip{display:inline-block;height:1.18em;overflow:hidden;vertical-align:bottom} .flip .fl{display:block;animation:flip5 10s cubic-bezier(.65,0,.2,1) infinite} .flip .fl span{display:block;height:1.18em;line-height:1.18} .flip .w-t{color:var(--ambre-texte)} .flip .w-d{color:var(--vert-texte)} .flip .w-r{color:var(--terre-texte)} @keyframes flip5{0%,27%{transform:translateY(0)}33.3%,60.3%{transform:translateY(-25%)}66.6%,93.6%{transform:translateY(-50%)}100%{transform:translateY(-75%)}} .tick-wrap{margin-top:clamp(2rem,5vw,3rem);border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);padding-block:.95rem;overflow:hidden;display:flex} .tick{display:flex;flex:none;min-width:100%;animation:tk 32s linear infinite} .tick p{display:flex;gap:2.6rem;padding-right:2.6rem;flex:none;max-width:none;font:500 .7rem/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gris-texte);white-space:nowrap} .tick .tk-dot{color:var(--ambre-texte)} @keyframes tk{to{transform:translateX(-50%)}} /* ============================================================ W2 ADDITIONS — SPEC §5 items 2-7 ============================================================ */ /* — Utilities — */ .pt-0{padding-top:0} .mb-0{margin-bottom:0} [hidden]{display:none!important} /* — Consent banner (SPEC §6, verbatim) — */ .consent-banner{position:fixed;inset-inline:0;bottom:0;z-index:120;background:var(--encre);color:var(--papier);padding:1rem 0 calc(1rem + env(safe-area-inset-bottom))} .cb-in{display:flex;flex-wrap:wrap;gap:.9rem 1.4rem;align-items:center;justify-content:space-between} .consent-banner p{margin:0;font:400 .92rem/1.5 var(--font-body);flex:1 1 34ch} .consent-banner a{color:inherit;text-decoration:underline} .cb-actions{display:flex;flex-wrap:wrap;gap:.7rem} .cb-actions button{font:600 .95rem/1 var(--font-body);padding:.85rem 1.4rem;border:1px solid var(--papier);background:none;color:var(--papier);cursor:pointer;min-width:9.5rem;min-height:44px} .cb-actions .cb-accept{background:var(--papier);color:var(--encre)} .f-cookies{display:inline-block;background:none;border:0;padding:.14rem 0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:left} .f-cookies:hover{color:var(--ambre-texte)} /* — A11y fixes — */ :root{--focus-clair:#F5F1E8} .sec--dark :focus-visible,[class*="--dark"] :focus-visible,.consent-banner :focus-visible{outline-color:var(--focus-clair)} @media (prefers-reduced-motion:reduce){.draw-view{stroke-dashoffset:0!important}} .f-field input::placeholder,.f-field textarea::placeholder{color:rgba(90,102,116,.92)} @media (max-width:768px){body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}} /* — Turnstile: reserve space + bleed past the form-card's own clamp() padding on small screens — */ /* slot <300px below ~434px viewports → main.js renders compact (~140px tall) */ @media (max-width:433px){.turnstile-slot{min-height:145px}} /* — Synergy SVG: at font-size 22 (viewBox units) DISTRIBUTION/RÉNOVATION clip past the 560-wide viewBox; hide instead (aria-label on the svg still describes it) — */ @media (max-width:700px){.syn-svg{display:none}}