/* * ============================================================================ * THÈME BOOTSTRAP — Plaisir & Loisirs * * Bootstrap 5.3 est chargé sur toutes les pages (assets/app.js). Ce fichier * est chargé JUSTE APRÈS lui et avant nos feuilles de parcours. Son rôle : * caler Bootstrap sur la maquette d'Agnès pour qu'on puisse employer ses * classes (.container, .row, .col-*, .btn, .modal, .form-control…) sans * perdre la fidélité au pixel. * * POURQUOI CE FICHIER * Jusqu'ici Bootstrap était chargé mais quasi inutilisé : sur 104 templates, * seules 7 classes Bootstrap réelles étaient employées (toutes dans le * bandeau de messages flash). On payait le framework sans en tirer parti, * et sa grille par défaut (conteneur 1320px, gouttières 24px) ne pouvait pas * produire la géométrie de la maquette (contenu 1232px, cartes 296, gouttière * 16). Ce fichier lève cet obstacle. * * CE QUE BOOTSTRAP NOUS APPORTE DÉJÀ, ET QU'IL NE FAUT PAS PERDRE * Son Reboot fournit `*,::after,::before { box-sizing: border-box }`. * Nos feuilles ne le définissent NULLE PART : tout le CSS du projet repose * sur cette remise à zéro. Vérifié en capturant les pages sans Bootstrap : * la mise en page s'effondre (2,2 millions de pixels d'écart sur le listing). * => Ne jamais retirer bootstrap.min.css sans fournir d'abord son propre * reset. * * CE QUI RESTE HORS DE PORTÉE SANS SASS * Les utilitaires d'espacement (m-3, p-4…) sont figés à la compilation sur * l'échelle de 0.25rem de Bootstrap ; ils ne suivent pas notre échelle * (4/8/12/16/20/24/28/32/38/40/48). On les évite donc au profit de nos * jetons --pl-sp-*. Pour les aligner vraiment il faudrait recompiler * Bootstrap depuis ses sources Sass (symfonycasts/sass-bundle). * ============================================================================ */ /* --------------------------------------------------------------------------- * 1. GRILLE — aligner .container et .row sur la maquette * * Maquette : page de 1440px, contenu de 1220px commençant à x110 pour les * blocs de texte ; les grilles d'images débordent de 6px de chaque côté * (x104 -> x1335, soit 1232px) et portent 4 cartes de 296px espacées de 16. * * Bootstrap applique padding = --bs-gutter-x / 2 de chaque côté du conteneur. * Une gouttière de 220px donne donc 110px de marge : exactement notre * .home-container, dont .container devient l'équivalent standard. * ------------------------------------------------------------------------ */ .container, .container-fluid { --bs-gutter-x: 220px; max-width: var(--pl-container-desktop); /* 1440px */ } /* La dégradation de cette gouttière (96 / 64 / 48 / 32 par palier Bootstrap) est écrite une seule fois, en section 1.1 de styles/responsive.css, qui est chargé en dernier. Ne pas la redéclarer ici : deux sources de vérité pour la même marge, c'est la garantie qu'elles divergeront. */ /* DÉBORDEMENT DE 6px : RETIRÉ LE 24/08, SUR DEMANDE DU CTO * * La maquette pose les blocs de texte à x110 sur 1220, mais les rangées de * cartes à x104 sur 1232 : Agnès a dessiné des cartes de 296px, et quatre * cartes de 296 avec 16 de gouttière réclament 1232, pas 1220. Elle a donc * élargi les rangées de 6px de chaque côté. * * Reproduit fidèlement, cela donnait trois sections empilées dont les bords * gauches sautaient de 110 à 104 — mesuré sur la page Offres. Un œil de * développeur l'attrape immédiatement, et c'est ce que le CTO a signalé. * * Le site s'aligne désormais sur UN conteneur : tout part de x110. Les cartes * mesurent 293px au lieu de 296 — 3px de moins, invisibles, là où les 6px de * décalage se voyaient. Le débordement a été retiré de 18 endroits * (corporate, destinations, gifts, home) ; .row--bleed disparaît avec eux. * * À NE PAS RÉINTRODUIRE en croyant corriger un écart à la maquette : c'est un * écart assumé, arbitré, et il concerne tout le site. */ .row { --bs-gutter-x: var(--pl-sp-16); --bs-gutter-y: var(--pl-sp-16); } /* La carte de recherche de l'accueil ne suit PAS la grille 110/1220 : Figma (« Container - Renseignement » 700:78360) la place à x=68 sur 1304, soit 42px de débord de chaque côté. On l'obtient par le même levier que la grille — la gouttière du conteneur — et non par une compensation en marge négative ou en max-width, qui se heurtaient au max-width de 1440. Gouttière 136 => 68px de marge => 1440 - 136 = 1304px de contenu. */ .container--search { --bs-gutter-x: 136px; } /* Barre de recherche du parcours Evenements : la maquette la pose de x88 a x1351, comme la rangee de champs de l'accueil (1264 de large). Gouttiere 176 => 88px de marge. */ .container--evsearch { --bs-gutter-x: 176px; } /* Dégradation : voir section 1.1 de styles/responsive.css. */ /* --------------------------------------------------------------------------- * 2. TYPOGRAPHIE ET SURFACES * --bs-body-* pilote le Reboot ; le reste sert aux composants. * ------------------------------------------------------------------------ */ :root { --bs-body-font-size: var(--pl-fs-body); /* 16px */ --bs-body-line-height: 1.5; --bs-body-font-weight: var(--pl-fw-regular); --bs-border-radius-sm: var(--pl-radius-xs); /* 4px */ --bs-border-radius: var(--pl-radius-sm); /* 8px */ --bs-border-radius-lg: var(--pl-radius-md); /* 12px */ --bs-border-radius-xl: 16px; --bs-border-radius-pill: var(--pl-radius-pill); --bs-border-color-translucent: var(--pl-border); --bs-secondary-color: var(--pl-text-secondary); --bs-emphasis-color: var(--pl-text-strong); --bs-heading-color: var(--pl-text); /* Anneau de focus : violet d'action, comme nos champs maison. */ --bs-focus-ring-color: rgba(93, 0, 255, .18); --bs-focus-ring-width: 3px; } /* Bootstrap donne aux titres h1..h4 une taille FLUIDE (calc + vw) : elle varie avec la largeur de la fenêtre et ne peut donc jamais correspondre à une maquette figée à 1440. On la fige sur l'échelle de la charte. Nos 53 classes de titre ont déjà une taille explicite ; ceci protège les titres sans classe et tout futur usage des classes .h1..h6 de Bootstrap. On ne touche VOLONTAIREMENT pas à line-height : un sélecteur d'élément le fixerait pour toutes les classes de titre qui ne le déclarent pas, ce qui décalerait les écrans déjà calés au pixel. */ h1, .h1 { font-size: var(--pl-fs-display); } h2, .h2 { font-size: var(--pl-fs-h2); } h3, .h3 { font-size: var(--pl-fs-h3); } h4, .h4 { font-size: var(--pl-fs-h4); } h5, .h5 { font-size: var(--pl-fs-s1); } h6, .h6 { font-size: var(--pl-fs-body); } /* --------------------------------------------------------------------------- * 3. COMPOSANTS — pour que .btn, .form-control, .modal… sortent aux couleurs * de la charte sans surcharge au cas par cas. * ------------------------------------------------------------------------ */ .btn { --bs-btn-padding-y: 9px; --bs-btn-padding-x: var(--pl-sp-16); --bs-btn-font-size: var(--pl-fs-body-sm); --bs-btn-font-weight: var(--pl-fw-semibold); --bs-btn-border-radius: var(--pl-radius-sm); } .btn-primary { --bs-btn-bg: var(--pl-action); --bs-btn-border-color: var(--pl-action); --bs-btn-hover-bg: #4a00cc; --bs-btn-hover-border-color: #4a00cc; --bs-btn-active-bg: #4a00cc; } .form-control, .form-select { --bs-border-color: var(--pl-border); padding: 9px var(--pl-sp-12); font-size: var(--pl-fs-body-sm); border-radius: var(--pl-radius-sm); } .form-control:focus, .form-select:focus { border-color: var(--pl-action); box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color); } .form-label { font-size: var(--pl-fs-body); font-weight: var(--pl-fw-bold); color: var(--pl-text); } .form-check-input:checked { background-color: var(--pl-action); border-color: var(--pl-action); } .modal-content { border: 0; border-radius: var(--pl-radius-md); } /* Voile bleu nuit de la charte plutôt que le noir par défaut. */ .modal-backdrop { --bs-backdrop-bg: var(--pl-primary); --bs-backdrop-opacity: .55; } .dropdown-menu { --bs-dropdown-border-color: var(--pl-border); --bs-dropdown-border-radius: var(--pl-radius-md); --bs-dropdown-link-active-bg: var(--pl-action-light); --bs-dropdown-link-active-color: var(--pl-action); } .badge { --bs-badge-border-radius: var(--pl-radius-pill); }