/* * Rôle : Styles UI transverses de la landing — animations d'apparition au scroll, * composants interactifs (FAQ, carrousels, carte crayonnée SVG) et helpers * qui ne relèvent ni de la navbar ni des formulaires (fichiers CSS dédiés). * Scope : Landing one-page (main/templates/main/index.html) + base commune. * Sélecteurs `.reveal`, `.faq-panel`, `.carousel-dot`, `.lcn-*` (carte zone * d'intervention), `.no-scrollbar`, `.txt-shadow`. * Charge : global via main/templates/main/base.html ( avec ?v={{ app_version }}). * Dépend : Tailwind (utilities complémentaires posées dans les templates), font * 'Montserrat' (déclarée ailleurs), JS inline d'index.html (toggle .in, * aria-expanded FAQ, aria-current des puces de carrousel). */ html { scroll-behavior: smooth; } /* Offset d'ancre = hauteur de la navbar sticky (h-[68px]). IMPORTANT : posé sur la CIBLE (scroll-margin), pas sur (scroll-padding) : `body` porte overflow-x-hidden → il devient le conteneur de scroll, donc un scroll-padding-top sur serait ignoré. scroll-margin-top sur la cible, lui, est honoré quel que soit l'élément qui scrolle. 68px = pile sous la navbar (pas de liseré de la section précédente). */ section[id] { scroll-margin-top: 68px; } /* Classe .in ajoutée par un IntersectionObserver (JS inline d'index.html). */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); } .reveal.in { opacity: 1; transform: none; } .txt-shadow { text-shadow: 0 2px 30px rgba(12, 15, 35, .35); } /* Prose éditoriale des pages service (bloc SEO texte + h3). */ .lcn-prose { color: #454e66; font-size: 16.5px; line-height: 1.78; } .lcn-prose > * + * { margin-top: 1.25rem; } .lcn-prose h3 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 22px; color: #161a27; margin-top: 2.2rem; letter-spacing: -.01em; } .lcn-prose strong { color: #161a27; font-weight: 600; } /* FAQ : panneau piloté par aria-expanded du bouton [data-faq-toggle] (JS inline). */ .faq-panel { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .3s ease, opacity .3s ease; } [data-faq-toggle][aria-expanded="true"] + .faq-panel { max-height: 340px; opacity: 1; } [data-faq-toggle][aria-expanded="true"] .faq-icon { transform: rotate(45deg); } .faq-icon { transition: transform .3s ease; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; } /* Puce active portée par aria-current="true" (posé par le JS des carrousels). */ .carousel-dot { width: 8px; height: 8px; border-radius: 9999px; background: #d4d8e0; transition: width .25s ease, background-color .25s ease; } .carousel-dot[aria-current="true"] { width: 26px; background: #df5b22; } /* Carte crayonnée zone d'intervention (SVG généré depuis géodata) */ .lcn-fill { fill: #df5b22; opacity: .05; } .lcn-outline { fill: none; stroke: #df5b22; stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; } .lcn-nantes-dot { fill: #df5b22; } .lcn-nantes-ring { fill: none; stroke: #df5b22; stroke-width: 2.5; } .lcn-town { font-family: 'Montserrat', sans-serif; } .lcn-cover { position: relative; overflow: hidden; } .lcn-cover .lcn-svg { position: absolute; inset: 0; width: 100%; height: 100%; } .lcn-city { fill: #0c0f23; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 30px; letter-spacing: .3px; } .lcn-path { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.9s ease; } .reveal.in .lcn-path { stroke-dashoffset: 0; } .lcn-fade { opacity: 0; transition: opacity .7s ease; } .reveal.in .lcn-fade { opacity: 1; transition-delay: .9s; } @media (prefers-reduced-motion: reduce) { .reveal { transition: none; } .no-scrollbar { scroll-behavior: auto; } .lcn-path { stroke-dashoffset: 0; transition: none; } .lcn-fade { opacity: 1; transition: none; } }