/* finition.css — la couche de FINITION, posée par-dessus choisi.css. ÉCRITE À LA MAIN. Contrairement à a/b/c/choisi.css, elle n'est PAS générée par admin/_variantes.mjs : elle ne porte aucune couleur de palette de base, elle ajoute les dispositifs de mise en page qui manquaient. --------------------------------------------------------------------------- POURQUOI ELLE EXISTE — la lecture du 2026-08-02 (soir). Marine a mis quatre ♥ sur quinze références, et les trois habillages A/B/C avaient chacun capturé UNE partie de ces ♥ : A « Éditorial » <- Ottolenghi ♥ + Bloom & Wild ♥ (les deux où elle a coché « la typographie ») -> fonte de titre Newsreader B « Nordique » <- Søstrene Grene ♥ -> la palette, qu'elle a choisie C « Terre » <- Wildling ♥, « ce qui manque encore » -> le sable, la terre cuite Ses préférences étaient orthogonales ; l'instrument à trois variantes l'a forcée à prendre un paquet. En choisissant B elle a perdu la typographie de A et la chaleur de C, qu'elle avait aimées AUSSI. C'est la cause du « pas fini » — un défaut d'instrument, pas de goût. Cette feuille rend les deux tiers manquants sans toucher au choix de Marine : - la palette de B est INTACTE : fond, bleu pâle, encre, et les liens restent au bleu ardoise ; - Newsreader (déjà auto-hébergée pour A) revient sur les titres et le nom ; - la chaleur de C entre en accent CANTONNÉ : les surfaces sable et les boutons d'action, rien d'autre. --------------------------------------------------------------------------- ⚠️ CASCADE — la raison du préfixe #wrapwrap, à ne jamais retirer. Chaque page repose son propre vers choisi.css DANS #wrap, donc APRÈS le où cette feuille est chargée (vérifié : choisi.css est bien chargé deux fois). Une règle non préfixée, même en !important, perdrait contre la même règle de choisi.css venue plus tard. `#wrapwrap` ajoute un id : la spécificité l'emporte, quel que soit l'ordre des feuilles. ⚠️ CONTRASTES mesurés (WCAG, seuil AAA 7:1 non négociable) : encre #2C2B2B sur sable #E6D9CA .......... 10,18 ✅ encre-doux #4E4A44 sur sable ............. 6,34 ❌ INTERDIT terre #6B3A28 sur sable .................. 6,70 ❌ INTERDIT (pas de bouton contour ni de lien terre sur une zone sable) crème #FFFEF8 sur terre #6B3A28 .......... 9,19 ✅ (bouton plein) D'où le §5 : sur toute surface sable, le texte repasse en encre PLEINE — sans cette règle, le « p, li, small » de choisi.css le laisserait en encre douce, à 6,34, et aucun contrôle automatique ne le verrait. */ @font-face{font-family:"Newsreader";src:url("/habillage/fonts/newsreader.woff2") format("woff2"); font-weight:100 900;font-style:normal;font-display:swap} #wrapwrap{ --cr-sable:#E6D9CA; /* Wildling ♥ — la surface chaude */ --cr-terre:#6B3A28; /* Wildling ♥ — l'accent d'action (boutons pleins) */ --cr-titre:"Newsreader", Georgia, serif; } /* --- 1. La typographie d'affichage ------------------------------------------ Le poste le plus vide du site alors que c'est le signal le plus fort de Marine : « la typographie » cochée 4 fois sur ses 7 notes positives. Newsreader porte tout ce qui titre ; Cabin reste le texte courant. */ #wrapwrap h1, #wrapwrap h2, #wrapwrap h3, #wrapwrap .display-1, #wrapwrap .display-2, #wrapwrap .display-3, #wrapwrap .display-4{ font-family:var(--cr-titre) !important; font-weight:400 !important; letter-spacing:-.012em; line-height:1.12; } #wrapwrap h1{ font-size:clamp(2.4rem, 5vw, 3.7rem) !important; line-height:1.06; } #wrapwrap h2{ font-size:clamp(1.8rem, 3.2vw, 2.5rem) !important; } #wrapwrap h3{ font-size:clamp(1.25rem, 2vw, 1.55rem) !important; } /* Le sur-titre en petites capitales espacées — le « deuxième étage » qu'Ottolenghi ♥ pose au-dessus de son titre de une. */ #wrapwrap .cr-surtitre{ font-family:"Cabin", system-ui, sans-serif !important; font-size:.76rem !important; letter-spacing:.18em; text-transform:uppercase; color:var(--cr-encre-doux) !important; margin-bottom:1.1rem; display:block; } /* --- 2. Le logotype --------------------------------------------------------- Toujours pas de symbole dessiné — on n'en improvise pas un. Mais le nom composé dans la fonte du corps à 15 px se lisait comme un paragraphe. Les quatre ♥ ont toutes un logotype distinct du texte : on empile le nom sur deux lignes en capitales sérif espacées — le dispositif de Bloom & Wild ♥, gratuit, réversible le jour où un vrai symbole existe. */ #wrapwrap header#top .navbar-brand::after{ content:"LES CERCLES\A RESSOURCES" !important; white-space:pre !important; font-family:var(--cr-titre) !important; font-weight:600 !important; font-size:.95rem !important; line-height:1.18 !important; letter-spacing:.14em !important; color:var(--cr-encre) !important; } #wrapwrap header#top .navbar-brand{ display:inline-flex; align-items:center; } /* --- 3. L'en-tête ----------------------------------------------------------- Les quatre ♥ composent leur menu en capitales espacées, petites, avec de l'air. Ici : mixed-case 15 px serré. Le badge panier, lui, est déjà masqué à zéro par Odoo (d-none) — on n'y touche pas, il sert pendant un achat. */ #wrapwrap header#top .navbar{ padding-top:.9rem; padding-bottom:.9rem; } #wrapwrap header#top .navbar .nav-link{ font-size:.8rem !important; letter-spacing:.13em; text-transform:uppercase; color:var(--cr-encre) !important; } #wrapwrap header#top .btn-primary{ padding:.55rem 1.4rem !important; font-size:.85rem !important; } /* --- 4. Le héros scindé ----------------------------------------------------- Le dispositif de Bloom & Wild ♥ (« la mise en page » cochée) : photo bord à bord d'un côté, panneau de couleur pleine avec le titre de l'autre. Choisi CONTRE le titre-posé-sur-la-photo (Ottolenghi, Wildling) en connaissance de cause : toutes nos photos sont claires, un texte blanc dessus exigerait un voile sombre écrasant — le contraire du « bien-être pastel calme » demandé. Sur panneau sable, le contraste est acquis (10,18) quelle que soit la photo. */ #wrapwrap .cr-heros{ padding:0 !important; } #wrapwrap .cr-heros .row{ min-height:min(72vh, 620px); } #wrapwrap .cr-heros-photo{ padding:0; } #wrapwrap .cr-heros-photo img{ width:100%; height:100%; min-height:340px; object-fit:cover; display:block; } #wrapwrap .cr-heros-panneau{ background:var(--cr-sable); display:flex; align-items:center; justify-content:center; text-align:center; padding:0; } #wrapwrap .cr-heros-panneau .cr-heros-int{ padding:4.2rem 3rem; max-width:30rem; } /* Le panneau fait ~42 % de l'ecran : le corps de titre global y est trop grand, « Prendre le temps. » se cassait en deux lignes. */ #wrapwrap .cr-heros-panneau h1{ color:var(--cr-encre) !important; margin-bottom:1.1rem; font-size:clamp(2rem, 2.6vw, 2.8rem) !important; } #wrapwrap .cr-heros-panneau p{ color:var(--cr-encre) !important; font-size:1.06rem; margin-bottom:1.6rem; } #wrapwrap .cr-heros-panneau .cr-surtitre{ color:var(--cr-encre) !important; } @media (max-width:991.98px){ #wrapwrap .cr-heros .row{ min-height:0; } #wrapwrap .cr-heros-photo img{ min-height:0; height:44vh; } #wrapwrap .cr-heros-panneau .cr-heros-int{ padding:2.6rem 1.4rem 3rem; } } /* --- 5. Les surfaces sable -------------------------------------------------- « Ce qui manque encore : Wildling » — le site n'avait aucune couleur chaude. Le sable entre comme SURFACE (héros, bande d'appel), jamais comme texte. 🔴 Règle de contraste : voir l'en-tête du fichier. */ #wrapwrap .cr-sable{ background-color:var(--cr-sable) !important; } #wrapwrap .cr-sable p, #wrapwrap .cr-sable li, #wrapwrap .cr-sable td, #wrapwrap .cr-sable small, #wrapwrap .cr-sable .lead, #wrapwrap .cr-sable figcaption, #wrapwrap .cr-heros-panneau small{ color:var(--cr-encre) !important; } #wrapwrap .cr-sable hr{ border-color:#CDB8A1 !important; } /* --- 6. Les boutons d'action ------------------------------------------------ Chaque ♥ a un bouton de forme reconnaissable ; ici c'était le rectangle bleu par défaut. La pilule terre cuite devient LE geste d'action du site — et seulement lui : les liens et tout le reste gardent le bleu de Marine. Crème sur terre : 9,19 ✅. */ #wrapwrap .btn-primary, #wrapwrap .btn-fill-primary{ background-color:var(--cr-terre) !important; border-color:var(--cr-terre) !important; color:#FFFEF8 !important; border-radius:999px !important; padding:.7rem 1.6rem !important; letter-spacing:.015em; transition:background-color .18s ease; } #wrapwrap .btn-primary *, #wrapwrap .btn-fill-primary *{ color:#FFFEF8 !important; } #wrapwrap .btn-primary:hover, #wrapwrap .btn-fill-primary:hover{ background-color:#57301F !important; } #wrapwrap .btn-secondary, #wrapwrap .btn-outline-primary, #wrapwrap .btn-outline-secondary{ border-radius:999px !important; padding:.7rem 1.6rem !important; } /* --- 7. Les cinq cercles en pastilles rondes -------------------------------- Søstrene Grene ♥ — « celle qui me ressemble le plus » — ouvre sur une rangée de pictogrammes au trait fin dans des ronds ; Bloom & Wild ♥ fait pareil en vignettes rondes : c'est LEUR navigation. Ici, les cinq cercles étaient un tableau. Or la marque s'appelle « Les Cercles » : le rond est déjà la forme du nom. Traits « fins » — le mot exact de Marine sur les dessins. */ #wrapwrap .cr-cercles{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.8rem 2rem; padding:0; margin:0; } #wrapwrap a.cr-cercle{ width:9.6rem; text-align:center; text-decoration:none !important; color:var(--cr-encre) !important; display:block; } #wrapwrap .cr-rond{ width:6.6rem; height:6.6rem; border-radius:50%; background:var(--cr-sable); margin:0 auto .85rem; display:flex; align-items:center; justify-content:center; transition:transform .18s ease, background-color .18s ease; } #wrapwrap .cr-rond svg{ width:3.5rem; height:3.5rem; fill:none; stroke:var(--cr-encre); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } #wrapwrap a.cr-cercle:hover .cr-rond{ transform:translateY(-3px); background:#DCCBB7; } #wrapwrap .cr-nom{ display:block; font-size:.95rem; line-height:1.3; color:var(--cr-encre) !important; } #wrapwrap .cr-etape{ display:block; font-size:.78rem; color:var(--cr-encre-doux) !important; margin-top:.2rem; } @media (max-width:575.98px){ #wrapwrap .cr-cercles{ gap:1.3rem .6rem; } #wrapwrap a.cr-cercle{ width:6.6rem; } #wrapwrap .cr-rond{ width:4.7rem; height:4.7rem; } #wrapwrap .cr-rond svg{ width:2.5rem; height:2.5rem; stroke-width:1.9; } #wrapwrap .cr-nom{ font-size:.8rem; } #wrapwrap .cr-etape{ font-size:.72rem; } } /* --- 8. Les cartes de séance ------------------------------------------------ La liste des dates était du texte nu sur deux colonnes déséquilibrées. Une carte à filet fait lire une date comme une offre. Le balisage vit dans blocs.py (b_seances_liste) — accueil et /seances la partagent. */ #wrapwrap .cr-carte{ border:1px solid var(--cr-trait); border-radius:6px; padding:1.5rem 1.6rem; height:100%; background:var(--cr-fond); display:flex; flex-direction:column; align-items:flex-start; } #wrapwrap .cr-carte .cr-date{ font-family:var(--cr-titre) !important; font-size:1.22rem; line-height:1.25; color:var(--cr-encre) !important; margin-bottom:.15rem; } #wrapwrap .cr-carte .cr-quoi{ color:var(--cr-encre-doux) !important; margin-bottom:.6rem; font-size:.95rem; } #wrapwrap .cr-carte .cr-places{ font-size:.84rem; color:var(--cr-encre-doux) !important; margin-bottom:1.1rem; } #wrapwrap .cr-carte .btn{ margin-top:auto; font-size:.9rem !important; white-space:nowrap; padding:.6rem 1.3rem !important; } /* --- 9. La photo pleine largeur --------------------------------------------- Les quatre ♥ posent leurs photos bord à bord, jamais dans une boîte à marges. */ #wrapwrap .cr-pleine{ padding:0 !important; } #wrapwrap .cr-pleine img{ width:100%; display:block; max-height:72vh; object-fit:cover; } /* --- 10. La grille ---------------------------------------------------------- Les blocs alternaient col-lg-7 / col-lg-8 / col-lg-9 centrés : trois bords gauches différents (mesurés à 290 / 350 px sur 1440), aucune colonne commune. On aligne tout sur la largeur du col-lg-8. Filet de sécurité pour les gabarits partagés qu'on ne réécrit pas un à un. */ #wrapwrap #wrap .container{ max-width:1140px; } /* ⚠️ :not(.cr-heros) obligatoire : sans lui, la regle attrape la photo du heros (col-lg-7) -> 66,67 + 41,67 > 100 % et le panneau passe DESSOUS. Paye le 02/08. */ #wrapwrap #wrap section:not(.cr-heros) .col-lg-7, #wrapwrap #wrap section:not(.cr-heros) .col-lg-9{ flex:0 0 auto; width:66.6667%; } @media (max-width:991.98px){ #wrapwrap #wrap section:not(.cr-heros) .col-lg-7, #wrapwrap #wrap section:not(.cr-heros) .col-lg-9{ width:100%; } } /* --- 10b. La page d'une séance ---------------------------------------------- Le bloc « Partager » d'Odoo (icônes Facebook / X / Pinterest / WhatsApp) est hors registre pour un cercle de parole — on le retire de l'affichage. Le reste du nettoyage (description démo, couverture, coordonnées privées) est fait À LA SOURCE par seance-page.py : ce sélecteur ne cache que des icônes génériques, aucune donnée. */ #wrapwrap .o_wevent_sidebar_block:has(.o_wevent_sidebar_social){ display:none !important; } /* --- 11. Le pied de page ---------------------------------------------------- Les crédits photo sont une obligation de licence, pas un pavé : ils passent en petit sans disparaître. */ #wrapwrap footer small, #wrapwrap .o_footer small{ font-size:.74rem; line-height:1.5; }