/* ============================================================================ BASE — reset, typographie de fond, primitives de mise en page, utilitaires. Ne contient aucun composant : voir components.css. ========================================================================= */ /* ---- Police ---------------------------------------------------------------- Aucune @font-face ici : la pile définie par --police s'appuie sur des fontes déjà présentes sur le poste (Avenir Next sur macOS). « TT Crocs » et « Proxima Nova » sont sous licence et ne sont pas redistribuées avec le prototype ; si elles sont installées localement, la pile les prend en premier et le rendu devient identique au site de référence. */ /* ---- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Les tiroirs fermés (filtres, panier, navigation) sont positionnés hors écran par une translation. `overflow-x: hidden` sur ne suffit pas à empêcher la racine d'en tenir compte : `clip` supprime le débordement sans créer de conteneur de défilement. */ overflow-x: clip; /* Les ancres ne doivent pas passer sous le header collant. */ scroll-padding-top: calc(var(--h-header) + var(--e-4)); } body { font-family: var(--police); font-size: var(--tx-base); line-height: var(--interligne-normal); color: var(--texte); background: var(--fond); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Verrouillage du défilement quand un tiroir ou le méga-menu est ouvert. */ body.est-verrouille { overflow: hidden; } img, svg, video, canvas { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } ul, ol { list-style: none; padding: 0; } a { color: inherit; text-decoration: none; } table { border-collapse: collapse; width: 100%; } /* ---- Titres --------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { line-height: var(--interligne-titre); letter-spacing: var(--lettrage-serre); font-weight: var(--graisse-extra); text-wrap: balance; } .tx-hero { font-size: clamp(2rem, 4.2vw, 3.5rem); font-weight: var(--graisse-noire); line-height: var(--interligne-serre); text-transform: uppercase; } .tx-h1 { font-size: clamp(2rem, 5vw, var(--tx-4xl)); } .tx-h2 { font-size: clamp(1.625rem, 3.6vw, var(--tx-3xl)); } .tx-h3 { font-size: clamp(1.25rem, 2.4vw, var(--tx-2xl)); } .tx-h4 { font-size: var(--tx-xl); font-weight: var(--graisse-grasse); } /* Sur-titre en petites capitales très espacées, présent sur chaque section. */ .tx-surtitre { font-size: var(--tx-xs); font-weight: var(--graisse-grasse); letter-spacing: var(--lettrage-xl); text-transform: uppercase; color: var(--texte-doux); } .tx-chapo { font-size: var(--tx-lg); color: var(--texte-doux); max-width: var(--largeur-texte); text-wrap: pretty; } .tx-sm { font-size: var(--tx-sm); } .tx-xs { font-size: var(--tx-xs); } .tx-doux { color: var(--texte-doux); } .tx-faible{ color: var(--texte-faible); } .tx-gras { font-weight: var(--graisse-grasse); } .tx-centre{ text-align: center; } .tx-maj { text-transform: uppercase; letter-spacing: var(--lettrage-large); } /* ---- Primitives de mise en page ------------------------------------------- */ .contenant { width: 100%; max-width: var(--largeur-max); margin-inline: auto; padding-inline: var(--marge-page); } .contenant--etroit { max-width: 960px; } .contenant--large { max-width: 1760px; } .section { padding-block: var(--section-y); } .section--alt { background: var(--fond-alt); } .section--inverse { background: var(--fond-inverse); color: var(--texte-inverse); } .section--serree { padding-block: calc(var(--section-y) * 0.55); } /* En-tête de section : sur-titre + titre + lien "tout voir" aligné à droite. */ .section__entete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-4); margin-bottom: var(--e-8); } .section__entete p { margin-top: var(--e-2); } /* En-tête sans élément à droite : la colonne de texte est bornée pour éviter une moitié de page vide, sans déplacer le contenu qui suit. */ .section__entete > div:only-child { max-width: 68ch; } /* Variante centrée : le site de référence centre les titres de rubrique éditoriale (« Explorez nos icônes classiques », « Choisis par vos favoris ») et n'aligne à gauche que les rangées de produits. */ .section__entete--centre { flex-direction: column; align-items: center; text-align: center; } .section__entete--centre .tx-chapo { margin-inline: auto; } /* Rangée de liens d'univers sous la bannière. */ .liens-univers { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-8); padding-block: var(--e-6); border-bottom: 1px solid var(--bordure-douce); } .liens-univers a { font-size: var(--tx-sm); font-weight: var(--graisse-grasse); padding-bottom: 2px; border-bottom: 2px solid transparent; transition: border-color var(--duree) var(--courbe); } .liens-univers a:hover { border-bottom-color: var(--c-noir); } .pile { display: flex; flex-direction: column; } .pile > * + * { margin-top: var(--gap, var(--e-4)); } .rangee { display: flex; align-items: center; gap: var(--gap, var(--e-4)); } .rangee--entre { justify-content: space-between; } .rangee--centre { justify-content: center; } .rangee--enroule { flex-wrap: wrap; } .grille { display: grid; gap: var(--gouttiere); } /* ---- Accessibilité --------------------------------------------------------- */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); } /* Masqué visuellement mais lu par les lecteurs d'écran. */ .visuellement-masque { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Lien d'évitement : premier élément focusable de chaque page. */ .lien-evitement { position: absolute; left: var(--e-4); top: var(--e-2); z-index: var(--z-toast); transform: translateY(-200%); background: var(--c-noir); color: var(--texte-inverse); padding: var(--e-3) var(--e-5); border-radius: var(--r-sm); font-weight: var(--graisse-grasse); transition: transform var(--duree) var(--courbe); } .lien-evitement:focus { transform: translateY(0); } /* ---- Apparition au scroll (piloté par site.js via IntersectionObserver) ---- L'état masqué est conditionné à la classe .anim-active, posée sur par site.js UNIQUEMENT s'il dispose d'un IntersectionObserver. Sans JavaScript, ou si l'observateur ne se déclenche pas, le contenu reste visible : une animation ratée ne doit jamais masquer un produit. */ .anim-active .anim { opacity: 0; transform: translateY(18px); transition: opacity var(--duree-lente) var(--courbe-sortie), transform var(--duree-lente) var(--courbe-sortie); } .anim-active .anim.est-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .anim-active .anim { opacity: 1; transform: none; } html { scroll-behavior: auto; } } /* ---- Utilitaires ponctuels ------------------------------------------------- */ .masque-mobile { display: none; } .pleine-largeur { width: 100%; } .ratio-carre { aspect-ratio: 1 / 1; } .ratio-portrait { aspect-ratio: 3 / 4; } .ratio-paysage { aspect-ratio: 16 / 9; } @media (min-width: 768px) { .masque-mobile { display: revert; } .masque-desktop { display: none; } }