/* ============================================================================= style.css — Feuille de style COMMUNE à toutes les pages Centrale d'achat pour les collectivités ----------------------------------------------------------------------------- Organisation du fichier : 1. Variables (couleurs, typographie, espacements…) 2. Petit reset 3. Styles de base (typographie, liens, images, titres) 4. Utilitaires (.conteneur, accessibilité, focus) 5. Header (barre du haut) 6. Menu burger (mobile) 7. Navigation 8. Barre de recherche 9. Lien panier + compteur 10. Footer 11. Contenu de page (placeholder en attendant le vrai contenu) Approche MOBILE-FIRST : les styles de base ciblent le mobile. Les écrans plus larges sont gérés ensuite avec des `@media (min-width: …)`. ========================================================================== */ /* ============================================================================= 1. VARIABLES Les "variables CSS" permettent de réutiliser partout les mêmes valeurs. Pour changer une couleur sur tout le site, il suffit de la modifier ici. ========================================================================== */ :root { /* --- Couleurs : bleu marine + accent teal, neutres gris/blanc --- */ --couleur-primaire: #0b2e59; /* Bleu marine profond (couleur principale) */ --couleur-primaire-clair: #15497d; /* Bleu marine plus clair (survols) */ --couleur-accent: #0d9488; /* Teal vif (éléments décoratifs, survols) */ --couleur-accent-fonce: #0f766e; /* Teal foncé (liens texte sur fond blanc) */ --couleur-texte: #16202c; /* Texte principal (presque noir) */ --couleur-texte-doux: #51606f; /* Texte secondaire (gris) */ --couleur-blanc: #ffffff; --couleur-fond: #ffffff; /* Fond des pages */ --couleur-fond-alt: #f3f6fa; /* Fond des sections alternées (gris clair) */ --couleur-bordure: #d7dee7; /* Bordures discrètes */ --couleur-focus: #0d9488; /* Couleur de l'anneau de focus (clavier) */ /* --- Typographie --- Marianne = police officielle de l'État (à ajouter en local plus tard). Inter = solution de repli, chargée via Google Fonts dans le . Suivent les polices système au cas où. */ --police-principale: "Marianne", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --taille-base: 1rem; /* 1rem = 16px par défaut */ /* --- Échelle d'espacements (marges / paddings) --- */ --espace-xs: 0.25rem; /* 4px */ --espace-sm: 0.5rem; /* 8px */ --espace-md: 1rem; /* 16px */ --espace-lg: 1.5rem; /* 24px */ --espace-xl: 2.5rem; /* 40px */ --espace-2xl: 4rem; /* 64px */ /* --- Divers --- */ --largeur-conteneur: 1200px; /* Largeur max du contenu centré */ --rayon: 8px; /* Arrondi des coins */ --ombre: 0 2px 8px rgba(11, 46, 89, 0.08); --transition: 0.2s ease; } /* ----------------------------------------------------------------------------- POINTS DE RUPTURE (breakpoints) — à utiliser dans les `@media`. Remarque : les variables CSS ne fonctionnent PAS dans les media queries, on note donc ces valeurs ici pour mémoire et on les écrit "en dur". - Mobile : < 600px (styles de base, mobile-first) - Tablette : >= 600px - Desktop : >= 900px -------------------------------------------------------------------------- */ /* ============================================================================= 2. PETIT RESET Remet à zéro quelques comportements par défaut des navigateurs. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; /* le padding n'agrandit plus les éléments */ } * { margin: 0; /* on repart de marges nulles */ } img, picture, svg { display: block; max-width: 100%; /* les images ne débordent jamais */ } input, button, textarea, select { font: inherit; /* les champs héritent de la police du site */ color: inherit; } /* ============================================================================= 3. STYLES DE BASE ========================================================================== */ body { font-family: var(--police-principale); font-size: var(--taille-base); line-height: 1.6; color: var(--couleur-texte); background-color: var(--couleur-fond); -webkit-font-smoothing: antialiased; /* Mise en page "pied de page collant" : le footer reste en bas même si la page est courte. */ min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1 0 auto; /* le contenu pousse le footer vers le bas */ } /* Titres */ h1, h2, h3, h4 { line-height: 1.2; color: var(--couleur-primaire); font-weight: 700; } h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); } /* taille fluide selon l'écran */ h2 { font-size: clamp(1.4rem, 3vw, 2rem); } h3 { font-size: 1.2rem; } p { color: var(--couleur-texte); } /* Liens de contenu */ a { color: var(--couleur-accent-fonce); text-decoration: underline; transition: color var(--transition); } a:hover { color: var(--couleur-primaire); } /* ============================================================================= 4. UTILITAIRES ========================================================================== */ /* Conteneur centré, largeur maximale, avec un peu de marge sur les côtés. */ .conteneur { width: 100%; max-width: var(--largeur-conteneur); margin-inline: auto; padding-inline: var(--espace-md); } /* "sr-only" = visible uniquement par les lecteurs d'écran (accessibilité). Sert par ex. à donner un label invisible à un champ. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Lien d'évitement : caché, il apparaît au premier Tab pour sauter directement au contenu principal (recommandation RGAA). */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--couleur-primaire); color: #fff; padding: var(--espace-sm) var(--espace-md); border-radius: 0 0 var(--rayon) 0; text-decoration: none; } .skip-link:focus { left: 0; /* devient visible quand on le sélectionne au clavier */ } /* Anneau de focus visible pour la navigation au clavier (accessibilité). */ :focus-visible { outline: 3px solid var(--couleur-focus); outline-offset: 2px; border-radius: 2px; } /* ============================================================================= 5. HEADER (barre du haut) Reste collée en haut au défilement (position: sticky). ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--couleur-blanc); border-bottom: 1px solid var(--couleur-bordure); box-shadow: var(--ombre); } /* Disposition interne (mobile-first) : on autorise le passage à la ligne (flex-wrap) pour que la recherche et la navigation passent sur leurs propres lignes en dessous. */ .site-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-sm) var(--espace-md); /* espace vertical / horizontal */ padding-top: var(--espace-sm); padding-bottom: var(--espace-sm); } /* Logo (texte en attendant le vrai logo). order:1 = tout en haut à gauche. */ .logo { order: 1; font-size: 1.05rem; font-weight: 800; letter-spacing: 0.2px; color: var(--couleur-primaire); text-decoration: none; margin-right: auto; /* pousse le panier + burger vers la droite */ } .logo:hover { color: var(--couleur-primaire-clair); } /* ============================================================================= 6. MENU BURGER (mobile) Bouton à trois barres, visible seulement sur mobile. ========================================================================== */ .burger { order: 3; display: inline-flex; /* visible par défaut (mobile) */ flex-direction: column; justify-content: center; gap: 5px; width: 44px; /* zone de clic confortable (accessibilité tactile) */ height: 44px; padding: 10px; background: none; border: none; cursor: pointer; } .burger span { display: block; width: 100%; height: 3px; background: var(--couleur-primaire); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); } /* Animation en croix (X) quand le menu est ouvert (classe ajoutée par le JS). */ .burger.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .burger.is-active span:nth-child(2) { opacity: 0; } .burger.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* ============================================================================= 7. NAVIGATION PRINCIPALE Sur mobile : cachée par défaut, dépliée quand .is-open est ajoutée (burger). ========================================================================== */ .nav-principale { order: 5; flex-basis: 100%; /* prend toute la largeur => passe à la ligne */ display: none; /* masquée tant que le burger n'est pas activé */ } .nav-principale.is-open { display: block; } .nav-principale ul { list-style: none; display: flex; flex-direction: column; /* liens empilés sur mobile */ padding: var(--espace-sm) 0; } .nav-principale a { display: block; padding: var(--espace-sm); color: var(--couleur-primaire); font-weight: 600; text-decoration: none; border-radius: var(--rayon); } .nav-principale a:hover { background: var(--couleur-fond-alt); color: var(--couleur-accent-fonce); } /* Page active : mise en évidence (attribut posé par le JS). */ .nav-principale a[aria-current="page"] { color: var(--couleur-accent-fonce); } /* ============================================================================= 8. BARRE DE RECHERCHE Sur mobile : pleine largeur, sur sa propre ligne. ========================================================================== */ .recherche { order: 4; flex-basis: 100%; display: flex; background: #fff; border: 1px solid var(--couleur-bordure); border-radius: var(--rayon); overflow: hidden; } .recherche input { flex: 1; min-width: 0; /* autorise le champ à rétrécir dans le flex */ border: none; padding: 0.6rem 0.75rem; } .recherche input:focus { outline: none; } /* l'anneau est géré sur le parent */ .recherche:focus-within { border-color: var(--couleur-accent); box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.2); } .recherche button { display: flex; align-items: center; justify-content: center; padding: 0 0.9rem; background: var(--couleur-primaire); color: #fff; border: none; cursor: pointer; transition: background var(--transition); } .recherche button:hover { background: var(--couleur-primaire-clair); } /* ============================================================================= 9. LIEN PANIER + COMPTEUR ========================================================================== */ .panier-lien { order: 2; position: relative; /* pour positionner le compteur en superposition */ display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--couleur-primaire); text-decoration: none; border-radius: var(--rayon); transition: background var(--transition), color var(--transition); } .panier-lien:hover { background: var(--couleur-fond-alt); color: var(--couleur-accent-fonce); } .panier-compteur { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--couleur-accent-fonce); color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 1; border-radius: 9px; display: flex; align-items: center; justify-content: center; } /* ============================================================================= 10. FOOTER ========================================================================== */ .site-footer { background: var(--couleur-primaire); color: #dbe4f0; margin-top: var(--espace-2xl); } .site-footer a { color: #dbe4f0; text-decoration: none; } .site-footer a:hover { color: #fff; text-decoration: underline; } .site-footer__inner { display: grid; grid-template-columns: 1fr; /* une colonne sur mobile */ gap: var(--espace-xl); padding-top: var(--espace-2xl); padding-bottom: var(--espace-xl); } .site-footer__nom { font-size: 1.1rem; font-weight: 800; color: #fff; margin-bottom: var(--espace-xs); } .site-footer__col p { color: #dbe4f0; } .site-footer__titre { font-size: 1rem; color: #fff; margin-bottom: var(--espace-sm); } .site-footer__col ul { list-style: none; padding: 0; /* retire l'indentation par défaut des listes (alignement à gauche) */ display: flex; flex-direction: column; gap: var(--espace-xs); } .site-footer__bas { border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: var(--espace-md); padding-bottom: var(--espace-md); font-size: 0.85rem; } .site-footer__bas p { color: #c3d2e6; text-align: center; /* ligne de copyright centrée, en bas du footer */ } /* ============================================================================= 11. CONTENU DE PAGE (placeholder) Style temporaire des pages encore vides, à remplacer aux étapes suivantes. ========================================================================== */ .page-intro { padding-top: var(--espace-2xl); padding-bottom: var(--espace-2xl); } .page-intro p { color: var(--couleur-texte-doux); max-width: 65ch; margin-top: var(--espace-md); } .badge-construction { display: inline-block; margin-top: var(--espace-lg); padding: var(--espace-xs) var(--espace-sm); background: var(--couleur-fond-alt); border: 1px dashed var(--couleur-bordure); border-radius: var(--rayon); color: var(--couleur-texte-doux); font-size: 0.9rem; } /* ============================================================================= RESPONSIVE — TABLETTE (>= 600px) ========================================================================== */ @media (min-width: 600px) { /* Footer : passe à plusieurs colonnes. */ .site-footer__inner { grid-template-columns: 2fr 1fr 1fr; } } /* ============================================================================= RESPONSIVE — DESKTOP (>= 900px) À partir d'ici, on repasse à une barre de header sur une seule ligne : [ logo ] [ recherche ] [ navigation ] [ panier ] ========================================================================== */ @media (min-width: 900px) { .site-header__inner { flex-wrap: nowrap; /* tout reste sur une seule ligne */ } /* On annule les `order` du mobile : les éléments suivent l'ordre du HTML (logo, recherche, nav, panier), ce qui correspond exactement à ce qu'on veut. */ .logo, .recherche, .nav-principale, .panier-lien { order: 0; } .logo { margin-right: var(--espace-md); /* petit écart après le logo */ } /* La recherche occupe tout l'espace central disponible (pas de vide à droite, et elle peut rétrécir grâce au min-width:0 du champ). */ .recherche { flex: 1; flex-basis: auto; } /* Le burger disparaît : on a la place pour la navigation complète. */ .burger { display: none; } /* Navigation en ligne, toujours visible, calée vers la droite. */ .nav-principale { display: block; flex-basis: auto; margin-left: var(--espace-md); white-space: nowrap; } .nav-principale ul { flex-direction: row; gap: var(--espace-sm); padding: 0; } .nav-principale a { position: relative; } /* Petit trait sous le lien actif (indicateur visuel). */ .nav-principale a[aria-current="page"]::after { content: ""; position: absolute; left: var(--espace-sm); right: var(--espace-sm); bottom: 2px; height: 2px; background: var(--couleur-accent); } /* Le panier revient à droite, sans la marge automatique du mobile. */ .panier-lien { margin-left: var(--espace-sm); } }