/* ========================================================================= NEOS Consulting — Feuille de styles principale ------------------------------------------------------------------------- Site vitrine statique. Thème sombre par défaut + bascule clair. COMMENT LIRE CE FICHIER - Toutes les COULEURS passent par des « variables CSS » (ex. var(--red)) : on ne code jamais une couleur en dur. Pour changer une couleur partout, il suffit de modifier sa variable dans la section 1. - Le fichier est découpé en SECTIONS numérotées (voir le sommaire). Pour retrouver une partie, cherchez par ex. « === 3. NAVIGATION === » (Ctrl+F). - Chaque bloc « sélecteur { propriété:valeur } » cible un élément de la page (le sélecteur, ex. .nav-cta) et lui applique une mise en forme. RAPPELS RAPIDES DE SYNTAXE - var(--x) : réutilise la variable --x définie plus haut. - rgba(r,v,b,a) : couleur rouge/vert/bleu + transparence a (0 à 1). - clamp(min,idéal,max): valeur « élastique » bornée (sert au responsive). - :hover : état au survol de la souris. - ::before / ::after : petit élément décoratif ajouté par le CSS. - transition : anime en douceur le passage d'un état à l'autre. SOMMAIRE 1. Tokens de couleur & thèmes 2. Base & utilitaires d'accessibilité 3. Navigation 4. Hero 5. Sections génériques 6. À propos 7. Proposition de valeur 8. Expertises 9. Contact 10. Pied de page 11. Modale 12. Responsive 13. Mouvement réduit (accessibilité) 14. Pages légales 15. Bandeau de consentement aux cookies (optionnel) 16. Formulaire de contact (interactif) ========================================================================= */ /* === 1. TOKENS DE COULEUR & THÈMES === */ /* Réinitialisation : on enlève les marges/espacements par défaut du navigateur et on inclut bordure + padding dans la largeur des éléments (box-sizing), pour des dimensions prévisibles. Le « * » vise TOUS les éléments. */ *{margin:0;padding:0;box-sizing:border-box} /* Couleurs de la charte NEOS, identiques quel que soit le thème. « : root » = la racine du document : ces variables sont disponibles partout. */ :root{ --red:#C32C2C; /* rouge — accent principal (boutons, liens, chiffres) */ --red-rgb:195,44,44; /* le rouge en canaux R,V,B : permet rgba(var(--red-rgb),.1) pour des rouges transparents */ --red-light:#D94F4F; /* rouge plus clair, utilisé au survol des boutons */ --blue:#44546A; /* bleu-ardoise — couleur secondaire (sous-titres, taglines) */ --blue-light:#5A6E88; /* bleu clair de la charte (token conservé pour usage futur) */ --green:#00CF96; /* vert charte — message de succès du formulaire de contact */ --white:#FFFFFF; /* blanc — texte posé sur un fond de couleur (ex. bouton rouge) */ --toggle-off:#AAAAAA; /* gris de la pastille de la bascule de thème (position « clair ») */ --overlay:rgba(0,0,0,.7); /* voile noir semi-transparent affiché derrière la modale */ } /* Les variables qui CHANGENT selon le thème sont regroupées ici. Le thème actif est piloté par l'attribut data-theme sur la balise (data-theme="dark" par défaut ; la bascule passe à "light"). Changer ce seul attribut suffit à recolorer toute la page, car tout pointe vers ces variables. --logo-word / --logo-sub = couleurs du logo (wordmark / sous-titre). */ [data-theme="dark"]{--bg:#0A0A0F;--bg2:#111118;--bg3:#16161F;--text:#F0EEE8;--text-muted:#8A8A9A;--border:rgba(var(--red-rgb),0.2);--border2:rgba(255,255,255,0.06);--nav-bg:rgba(10,10,15,0.85);--input-bg:#16161F;--modal-bg:#0D0D14;--logo-word:#F0EEE8;--logo-sub:#A8BEC9;color-scheme:dark} /* Mêmes variables, valeurs adaptées au fond clair (bons contrastes en thème clair). */ [data-theme="light"]{--bg:#F7F6F3;--bg2:#FFFFFF;--bg3:#EFF0F2;--text:#1A1A24;--text-muted:#6B7280;--border:rgba(var(--red-rgb),0.25);--border2:rgba(0,0,0,0.08);--nav-bg:rgba(247,246,243,0.92);--input-bg:#F0F1F3;--modal-bg:#F4F4F8;--logo-word:#44546A;--logo-sub:#44546A;color-scheme:light} /* Police de marque Montserrat : @font-face déclare une police perso. Elle est AUTO-HÉBERGÉE (fichier dans assets/fonts/) : aucun appel à Google Fonts à l'exécution, ce qui respecte la vie privée des visiteurs (RGPD). - font-weight:400 700 : une seule police « variable » couvre les graisses 400 à 700. - font-display:swap : affiche d'abord une police système puis bascule sur Montserrat dès qu'elle est chargée (le texte reste visible immédiatement). */ @font-face{ font-family:'Montserrat'; font-style:normal; font-weight:400 700; font-display:swap; src:url('../assets/fonts/montserrat-latin.woff2') format('woff2'); } /* === 2. BASE & UTILITAIRES D'ACCESSIBILITÉ === */ /* Comportement global de défilement de la page : - scroll-behavior:smooth : les clics sur les ancres (#section) défilent en douceur. - scroll-padding-top:68px : réserve la hauteur de la barre fixe (68px) pour que la section visée ne se retrouve pas cachée DERRIÈRE la navigation. */ html{scroll-behavior:smooth;scroll-padding-top:68px} /* Réglages de base de la page : couleurs (via variables), pile de polices système pour le texte courant, et transition douce des couleurs lors du changement de thème. overflow-x:hidden empêche toute barre de défilement horizontale accidentelle. */ body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,sans-serif;overflow-x:hidden;transition:background .3s,color .3s} /* Ces conteneurs reçoivent parfois le focus par programme (lien d'évitement, retour depuis la modale) : on masque le contour pour éviter un encadré disgracieux. */ #main-content:focus,#contact:focus{outline:none} /* Anneau de focus visible au CLAVIER seulement (:focus-visible). La navigation à la souris n'affiche donc pas ce contour : aucun changement visuel pour la souris, mais un repère clair pour qui navigue au clavier (accessibilité). */ :focus-visible{outline:2px solid var(--red);outline-offset:2px} /* Lien « Aller au contenu » : caché très loin hors de l'écran (left:-9999px), il réapparaît dès qu'il reçoit le focus (:focus) — premier arrêt utile au clavier. */ .skip-link{position:absolute;left:-9999px;top:0;z-index:300;padding:10px 16px;background:var(--red);color:var(--white);font-size:13px;letter-spacing:.04em;text-decoration:none} .skip-link:focus{left:8px;top:8px} /* === 3. NAVIGATION === */ /* Barre de navigation FIXE en haut de l'écran (position:fixed reste visible au défilement). z-index:100 la place au-dessus du contenu ; backdrop-filter:blur floute ce qui passe derrière ; background semi-transparent (var(--nav-bg)). display:flex aligne logo / menu / actions sur une ligne, espacés (space-between). */ header nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:0 5%;display:flex;align-items:center;justify-content:space-between;height:68px;border-bottom:1px solid var(--border2);backdrop-filter:blur(16px);background:var(--nav-bg);transition:background .3s} .nav-logo{display:inline-flex;align-items:center;text-decoration:none} /* logo = lien vers l'accueil */ .nav-right{display:flex;align-items:center;gap:1.5rem} /* groupe bascule + bouton « contact » */ /* Logo NEOS : c'est un SVG inséré directement dans le HTML (« inline »), ce qui permet de colorer ses parties via le thème. Les classes lw/ls/ld/ld-line ciblent chacune une partie du dessin et lui appliquent une couleur (variable de thème). */ .brand-logo{display:block;width:auto} .brand-logo text{font-family:'Montserrat','Segoe UI',system-ui,sans-serif} /* police du logo (Montserrat, repli système) */ .brand-logo .lw{fill:var(--logo-word)} /* « lw » = wordmark : le mot NEOS */ .brand-logo .ls{fill:var(--logo-sub)} /* « ls » = sous-titre : le mot CONSULTING */ .brand-logo .ld{fill:var(--red)} /* « ld » = dot : le point rouge */ .brand-logo .ld-line{stroke:var(--red)} /* le filet (trait) rouge sous le logo */ .brand-logo--full{height:38px} /* logo complet : barre de navigation ET pied de page (identiques) */ /* Liens du menu : petits, en gris discret (--text-muted), qui rougissent au survol. */ .nav-links{display:flex;gap:2rem;list-style:none} .nav-links a{font-size:13px;color:var(--text-muted);text-decoration:none;letter-spacing:.04em;transition:color .2s} .nav-links a:hover{color:var(--red)} /* Bouton « Nous contacter » : contour rouge qui se remplit en rouge au survol. */ .nav-cta{font-size:13px;padding:8px 20px;border:1px solid var(--red);color:var(--red);background:transparent;cursor:pointer;letter-spacing:.06em;text-decoration:none;transition:all .2s} .nav-cta:hover{background:var(--red);color:var(--white)} /* Bascule de thème (l'interrupteur sombre/clair). C'est un vrai