/* ========================================================================== AQUILA PRIME TECHNOLOGIES — STYLE.CSS Feuille de composants complète. Consomme exclusivement les tokens de assets/css/tokens.css (chargé AVANT ce fichier dans le ). Aucune valeur hexadécimale codée en dur ici : tout passe par var(--apt-…). Mobile-first — points de rupture : 360 (base) / 768 / 1024 / 1200 (bascule de la navigation) / 1440. SOMMAIRE 1. Typographie complémentaire & utilitaires de texte 2. Accessibilité — lien d'évitement (skip-link) 3. En-tête (header) sticky à deux états 4. Méga-menu Services (desktop ≥ 1200px) 5. Menu mobile plein écran (< 1200px) 6. Boutons 7. Icônes 8. Carte de service 9. Carte de service en vedette 10. Bloc texte + visuel alterné (split) 11. Timeline « Notre méthode » 12. Compteurs chiffrés 13. Bloc « Nos engagements » 14. Grille de wordmarks partenaires 15. Grille de badges certifications 16. Accordéon FAQ 17. Formulaire de contact 18. Fil d'Ariane 19. Hero de page interne 20. Hero d'accueil 21. Mise en page d'article de service 22. Bandeau CTA final 23. Footer (4 colonnes) 24. Bouton retour en haut 25. Page 404 26. Motifs graphiques décoratifs 27. Animations au scroll (reveal) 28. Utilitaires divers ========================================================================== */ /* ========================================================================== 1. TYPOGRAPHIE COMPLÉMENTAIRE & UTILITAIRES DE TEXTE ========================================================================== */ .apt-eyebrow--inverse { color: var(--apt-blanc); opacity: .85; } .apt-eyebrow--inverse::before { background: var(--apt-blanc); opacity: .6; } .apt-section__intro { max-width: 65ch; margin-top: var(--apt-space-4); font-size: var(--apt-fs-md); color: var(--apt-text-muted); } .apt-section--dark .apt-section__intro { color: var(--apt-text-inverse-muted); } .apt-section__head { margin-bottom: var(--apt-space-9); } .apt-section__head--center { text-align: center; } .apt-section__head--center .apt-section__intro { margin-inline: auto; } .apt-check-list { display: flex; flex-direction: column; gap: var(--apt-space-3); padding-left: 0; margin-top: var(--apt-space-6); list-style: none; } .apt-check-list li { display: flex; align-items: flex-start; gap: var(--apt-space-3); margin-top: 0; } .apt-check-list .apt-icon { flex-shrink: 0; margin-top: .15em; color: var(--apt-brand-solid); } /* ========================================================================== 2. ACCESSIBILITÉ — LIEN D'ÉVITEMENT (SKIP-LINK) ========================================================================== */ .apt-skip-link { position: fixed; top: var(--apt-space-2); left: var(--apt-space-2); z-index: var(--apt-z-toast); padding: var(--apt-space-3) var(--apt-space-5); background: var(--apt-bg-dark); color: var(--apt-text-inverse); font-weight: var(--apt-fw-semibold); border-radius: var(--apt-radius-sm); transform: translateY(-150%); transition: transform var(--apt-duration-base) var(--apt-ease-standard); } .apt-skip-link:focus { transform: translateY(0); } body.apt-no-scroll { overflow: hidden; } /* ========================================================================== 3. EN-TÊTE (HEADER) STICKY À DEUX ÉTATS Bascule desktop à 75rem (1200px) et non 1024px : à 1024px la barre complète — logo + zone de protection imposée par la charte §4, six entrées de navigation et bouton de devis — mesurait 1128px et débordait de 104px. Entre 1024 et 1200px, on conserve donc le menu burger. ========================================================================== */ .apt-header { position: sticky; top: 0; z-index: var(--apt-z-header); width: 100%; background-color: var(--apt-bg); border-bottom: 1px solid transparent; transition: background-color var(--apt-duration-base) var(--apt-ease-standard), box-shadow var(--apt-duration-base) var(--apt-ease-standard), border-color var(--apt-duration-base) var(--apt-ease-standard); } .apt-header--scrolled { --apt-logo-header-height: clamp(1.75rem, 1.5rem + 0.5vw, 2.25rem); box-shadow: var(--apt-shadow-sm); } /* Variante « sur hero » : uniquement sur l'accueil, transparente tant que le header n'est pas encore scrollé (le hero d'accueil est sombre). */ .apt-header--on-hero:not(.apt-header--scrolled) { position: absolute; background-color: transparent; border-bottom-color: transparent; } .apt-header--on-hero:not(.apt-header--scrolled) .apt-nav__list a, .apt-header--on-hero:not(.apt-header--scrolled) .apt-nav__trigger { color: var(--apt-text-inverse); } .apt-header--on-hero:not(.apt-header--scrolled) .apt-nav__burger span { background-color: var(--apt-blanc); } .apt-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--apt-space-4); } .apt-header__brand { display: inline-flex; align-items: center; flex-shrink: 0; } .apt-header__logo { height: var(--apt-logo-header-height); width: auto; min-width: var(--apt-logo-min-width); } .apt-nav { display: none; } @media (min-width: 75rem) { .apt-nav { display: block; flex: 1; } } /* L'écart entre entrées se resserre sur les écrans de bureau les plus étroits. Avec l'ajout de « Boutique », la barre compte 7 entrées plus le bouton de devis : à 32 px d'écart, « À propos » se cassait en deux lignes dès 1440 px. On repasse à l'écart large seulement quand la place le permet réellement. */ .apt-nav__list { display: flex; align-items: center; justify-content: center; gap: var(--apt-space-4); } @media (min-width: 100rem) { .apt-nav__list { gap: var(--apt-space-6); } } .apt-nav__list > li { position: relative; margin-top: 0; } .apt-nav__list a, .apt-nav__trigger { display: inline-flex; align-items: center; gap: var(--apt-space-1); padding-block: var(--apt-space-2); font-family: var(--apt-font-heading); font-weight: var(--apt-fw-semibold); font-size: var(--apt-fs-sm); color: var(--apt-text); position: relative; /* Un libellé de menu ne doit jamais se couper : « À propos » sur deux lignes désaligne toute la barre et le soulignement de l'onglet actif. */ white-space: nowrap; } .apt-nav__trigger { background: none; border: none; cursor: pointer; } .apt-nav__list a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--apt-gradient-brand-h); transition: right var(--apt-duration-base) var(--apt-ease-standard); } .apt-nav__list a:hover::after, .apt-nav__list a:focus-visible::after, .apt-nav__list a[aria-current="page"]::after { right: 0; } .apt-nav__list a[aria-current="page"] { color: var(--apt-brand-text); } .apt-icon--chevron { width: 1rem; height: 1rem; transition: transform var(--apt-duration-fast) var(--apt-ease-standard); } .apt-nav__trigger[aria-expanded="true"] .apt-icon--chevron { transform: rotate(180deg); } /* Le bouton du header porte aussi la classe `.apt-btn`, déclarée plus bas dans ce fichier (§6) avec `display: inline-flex`. À spécificité égale, c'est la dernière règle du fichier qui gagne : le bouton restait donc affiché en mobile, comprimant le burger et provoquant un débordement horizontal. On remonte la spécificité pour reprendre la main. */ .apt-header .apt-header__cta { display: none; flex-shrink: 0; } @media (min-width: 75rem) { .apt-header .apt-header__cta { display: inline-flex; } } /* Burger — visible uniquement en dessous de 1200px */ .apt-nav__burger { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 2.75rem; height: 2.75rem; flex-shrink: 0; } @media (min-width: 75rem) { .apt-nav__burger { display: none; } } .apt-nav__burger span { display: block; width: 1.5rem; height: 2px; background-color: var(--apt-text); border-radius: var(--apt-radius-full); transition: transform var(--apt-duration-base) var(--apt-ease-standard), opacity var(--apt-duration-base) var(--apt-ease-standard); } .apt-nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .apt-nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .apt-nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ========================================================================== 4. MÉGA-MENU SERVICES (desktop ≥ 1200px) ========================================================================== */ .apt-mega { display: none; } @media (min-width: 75rem) { /* Spécificité alignée sur `.apt-nav__list > li { position: relative }` (§3) : sans cela, le panneau se positionnerait dans le

étroit au lieu de s'étendre sur toute la largeur du header. */ .apt-nav__list > li.apt-nav__item--has-mega { position: static; } .apt-mega { position: absolute; top: 100%; left: 0; right: 0; display: block; background-color: var(--apt-surface); box-shadow: var(--apt-shadow-lg); border-top: 3px solid; border-image: var(--apt-gradient-brand-h) 1; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--apt-duration-base) var(--apt-ease-standard), transform var(--apt-duration-base) var(--apt-ease-standard), visibility var(--apt-duration-base); } .apt-mega:not([hidden]) { opacity: 1; visibility: visible; transform: translateY(0); } /* Repli sans JavaScript : le déclencheur « Services » est un