/* © 2026 MARLITHA — una caro (una-caro.org). Tous droits réservés. Reproduction non autorisée. */ /* ===================================================================== moderne.css — L'HABILLAGE MODERNE DU SITE PUBLIC Posé le 20 octobre 2026. Validé par Éric à 14 h 53, puis affiné jusqu'à 15 h 32 sur quinze versions montrées à l'écran. 🔴 LA RÈGLE QUI COMMANDE TOUT CE FICHIER : chaque règle commence par :root[data-forme="moderne"]. Sans cet attribut, le navigateur ne lit même pas la règle. L'habillage traditionnel ne peut donc PAS être touché. Ce fichier ne remplace rien et n'efface rien dans les pages : il se pose PAR-DESSUS. Pour arrêter le moderne un jour, il suffit de supprimer ce fichier et les deux lignes qui l'appellent. ===================================================================== */ :root[data-forme="moderne"]{ --m-seuil:30px; --m-grand:26px; --m-carte:20px; --m-champ:14px; --m-pilule:999px; --m-ombre:0 1px 2px rgba(31,40,51,.04), 0 4px 10px rgba(31,40,51,.05), 0 16px 40px rgba(31,40,51,.09); --m-ombre-h:0 8px 20px rgba(31,40,51,.09), 0 28px 64px rgba(31,40,51,.16); --m-ombre-seuil:0 10px 30px rgba(31,40,51,.12), 0 34px 80px rgba(31,40,51,.16); /* on resserre les ecarts : moins de defilement */ --esp-section:42px !important; --esp-titre:20px !important; --filigrane-clair:0 !important; --filigrane-sombre:0 !important; --filigrane-bord-clair:0 !important; --filigrane-bord-sombre:0 !important; /* les cadres a losanges deviennent muets */ --co-eq:transparent !important; --co-cadre:transparent !important; --co-semis:none !important; --co-rosace:none !important; /* ---- le beige s'en va : fonds neutres ---- */ --lin:#F4F6F9 !important; --ivoire:#FFFFFF !important; --parchemin:#FFFFFF !important; --voile:#FFFFFF !important; --trait:#E5E9EE !important; --trait-fort:#CFD5DD !important; --encre:#161C24 !important; --encre-doux:#5A6673 !important; } :root[data-forme="moderne"][data-theme="dark"]{ --lin:#0F1318 !important; --ivoire:#171C23 !important; --parchemin:#171C23 !important; --voile:#171C23 !important; --trait:#262D36 !important; --trait-fort:#39424D !important; --encre:#EDF1F5 !important; --encre-doux:#A8B2BE !important; } @media (prefers-color-scheme:dark){ :root[data-forme="moderne"]:not([data-theme="light"]){ --lin:#0F1318 !important; --ivoire:#171C23 !important; --parchemin:#171C23 !important; --voile:#171C23 !important; --trait:#262D36 !important; --trait-fort:#39424D !important; --encre:#EDF1F5 !important; --encre-doux:#A8B2BE !important; } } /* ========== 0. LA TYPOGRAPHIE PASSE EN SANS-SERIF ========== seule la marque « una caro » garde le Marcellus. */ :root[data-forme="moderne"] :is(h1,h2,h3,h4,h5, .titre-section,.statut-titre,.trad,.chapeau,.commu h3,.outil-tete h3, .pied-titre,.bientot-titre,.offre-nom,.volet-titre,.temps-titre, .borne-titre,.borne-page){ font-family:'Karla',-apple-system,system-ui,sans-serif !important; font-weight:700 !important; letter-spacing:-.018em !important; text-transform:none !important } :root[data-forme="moderne"] :is(.statut-titre,.borne-titre){ letter-spacing:-.025em !important; text-indent:0 !important } :root[data-forme="moderne"] :is(.borne-titre,.borne-page){ color:#FFFFFF !important; font-size:clamp(1.9rem,4.4vw,2.8rem) !important; letter-spacing:-.025em !important; text-indent:0 !important; line-height:1.1 !important } :root[data-forme="moderne"] :is(.chapeau,.pied-titre,.outil-duree,.menu-sig,.badge-secret){ text-transform:uppercase !important; letter-spacing:.07em !important; font-weight:700 !important } :root[data-forme="moderne"] .chapeau{ font-size:11.5px !important } :root[data-forme="moderne"] .intro-nom .lat{ font-style:normal !important; letter-spacing:.02em !important } :root[data-forme="moderne"] .intro-nom p{ font-family:'Karla',system-ui,sans-serif !important } /* la marque reste elle-meme */ :root[data-forme="moderne"] :is(.menu-nom,.pied-nom,.logo-nom){ font-family:'Marcellus',Georgia,serif !important; font-weight:400 !important } /* ========== 1. TOUT L'ORNEMENT S'EFFACE (en moderne seulement) ========== */ :root[data-forme="moderne"] body.filigrane-marque::before{ display:none !important } :root[data-forme="moderne"] body.filigrane-marque::after{ display:none !important } /* CHANTIER 221 (directeur, 21/10) : « le seuil se joue apres le choix, MODERNE COMME TRADITIONNEL, une seule fois par session ». La regle qui le cachait en moderne n'est plus posee : il se joue, puis s'ecarte de lui-meme (classes parti et fini, data-seuil="vu"). */ :root[data-forme="moderne"] .fond-rosace{ display:none !important } :root[data-forme="moderne"] .fil-deco{ display:none !important } :root[data-forme="moderne"] .pied-rosace{ display:none !important } :root[data-forme="moderne"] .seuil-rosace{ display:none !important } :root[data-forme="moderne"] .a-filigrane{ background-image:none !important } /* les rameaux, les cles, les losanges du bandeau */ :root[data-forme="moderne"] .borne-croix{ display:none !important } :root[data-forme="moderne"] .borne-orn{ display:none !important } :root[data-forme="moderne"] .los{ display:none !important } :root[data-forme="moderne"] .fil-deco.grand{ display:none !important } :root[data-forme="moderne"] .bc-motif{ display:none !important } :root[data-forme="moderne"] .bc-cles{ display:none !important } :root[data-forme="moderne"] .statut-orn{ display:none !important } :root[data-forme="moderne"] .statut::before{ display:none !important } :root[data-forme="moderne"] .statut::after{ display:none !important } /* les separations ornees, les sceaux, les filets */ :root[data-forme="moderne"] .separation-ornee{ display:none !important } :root[data-forme="moderne"] .separateur{ display:none !important } :root[data-forme="moderne"] .sceau{ display:none !important } :root[data-forme="moderne"] .sc-embleme{ display:none !important } :root[data-forme="moderne"] .sc-fil{ display:none !important } :root[data-forme="moderne"] .sc-volute{ display:none !important } :root[data-forme="moderne"] .sep-fil{ display:none !important } :root[data-forme="moderne"] .sep-motif{ display:none !important } :root[data-forme="moderne"] .so-fil{ display:none !important } :root[data-forme="moderne"] .so-motif{ display:none !important } :root[data-forme="moderne"] .intro-orn{ display:none !important } :root[data-forme="moderne"] .pied-orn{ display:none !important } :root[data-forme="moderne"] .intro-zone::before{ display:none !important } /* les quatre coins dores, les filets d'angle, la pastille des boutons */ :root[data-forme="moderne"] .intro-nom::before{ display:none !important } :root[data-forme="moderne"] .intro-nom::after{ display:none !important } :root[data-forme="moderne"] .coin-h{ display:none !important } :root[data-forme="moderne"] .coin-b{ display:none !important } :root[data-forme="moderne"] .trio-b::before{ display:none !important } :root[data-forme="moderne"] .trio-b::after{ display:none !important } :root[data-forme="moderne"] .etages-cadre.ac-ouverture > .wrap::before{ display:none !important } :root[data-forme="moderne"] .etages-cadre.ac-ouverture > .wrap::after{ display:none !important } :root[data-forme="moderne"] .commu::before{ display:none !important } :root[data-forme="moderne"] .temps::before{ display:none !important } :root[data-forme="moderne"] .offre::before{ display:none !important } :root[data-forme="moderne"] .volet::before{ display:none !important } :root[data-forme="moderne"] .apres-outils::before{ display:none !important } :root[data-forme="moderne"] .logo-bloc > div::before{ display:none !important } /* ========== 2. LE LOGO : petit, a gauche, a cote de « una caro » ========== */ /* le grand logo du haut s'efface : la marque vit desormais dans le bandeau */ :root[data-forme="moderne"] body > header{ display:none !important } :root[data-forme="moderne"] .menu-marque{ width:auto !important; opacity:1 !important } :root[data-forme="moderne"] .menu-nom{ display:block !important; font-size:18px !important } :root[data-forme="moderne"] .menu-marque svg{ width:31px !important; height:24px !important } :root[data-forme="moderne"] .logo-nom{ font-size:23px !important; letter-spacing:.07em !important; line-height:1 !important; margin:0 !important; color:var(--encre) !important } :root[data-forme="moderne"] .logo-sig{ font-size:10.5px !important; letter-spacing:.14em !important; margin:4px 0 0 !important; font-weight:700 } /* ========== 3. LE SEUIL : une photo, un titre, rien d'autre ========== */ :root[data-forme="moderne"] body{ display:flex; flex-direction:column } :root[data-forme="moderne"] body > *{ order:5 } :root[data-forme="moderne"] body > header{ order:0 } :root[data-forme="moderne"] body > nav#menu{ order:1 } :root[data-forme="moderne"] body > div#fil-ariane{ order:2 } :root[data-forme="moderne"] body > div#borne{ order:3 } :root[data-forme="moderne"] #borne.statut{ border:0 !important; overflow:hidden; width:calc(100% - 40px); max-width:1240px; margin:20px auto 0 !important; border-radius:var(--m-seuil) !important; box-shadow:var(--m-ombre-seuil); min-height:clamp(260px,34vh,330px); display:flex; align-items:flex-end; padding:104px 0 clamp(26px,3.5vh,40px) !important; background-image: linear-gradient(100deg,rgba(10,16,24,.82) 0%,rgba(10,16,24,.52) 52%,rgba(10,16,24,.3) 100%), var(--uc-seuil,url("photos/c1.webp")) !important; background-size:cover,cover !important; background-position:center,center 38% !important; text-align:left !important } :root[data-forme="moderne"] #borne.statut .wrap{ max-width:1100px; padding:0 clamp(24px,4vw,52px) } :root[data-forme="moderne"] #borne.statut p{ margin-left:0 !important; text-align:left !important } :root[data-forme="moderne"] #borne.statut p.statut-titre{ font-size:clamp(2.2rem,5.6vw,3.5rem) !important; letter-spacing:.02em !important; color:#FFFFFF !important; max-width:16ch; margin:0 0 14px !important } :root[data-forme="moderne"] #borne.statut p:not(.statut-titre){ font-size:clamp(16px,2vw,19px) !important; max-width:38ch; color:rgba(255,255,255,.9) !important } /* ========== 4. LA BARRE DU HAUT ========== */ /* le bandeau lui-meme reste transparent : seule la pilule porte le fond, sinon le panneau deroulant masquerait la photo derriere. */ /* La barre sort du flux : la photo du seuil peut alors monter jusqu'en haut de la page, et la pilule se pose DEDANS, jamais sur une bande blanche. */ :root[data-forme="moderne"] #menu{ position:fixed; top:calc(38px + var(--uc-haut, 0px)); left:0; right:0; z-index:900; border:0 !important; background:none !important; box-shadow:none !important; border-radius:0 !important; margin:0 !important; -webkit-backdrop-filter:none; backdrop-filter:none } /* seule l'accueil a le seuil photo (#borne.statut) ; les autres pages portent #borne.borne, et doivent garder leur place sous la barre. */ :root[data-forme="moderne"] body:not(:has(#borne.statut)){ padding-top:104px } @supports not selector(:has(*)){ :root[data-forme="moderne"] body{ padding-top:104px } :root[data-forme="moderne"] body:has(#borne.statut){ padding-top:0 } } /* le bandeau de titre des autres pages, en carte arrondie */ :root[data-forme="moderne"] #borne.borne{ width:calc(100% - 40px); max-width:1240px; margin:0 auto !important; border-radius:var(--m-grand) !important; border:0 !important; overflow:hidden; padding:clamp(34px,5vh,56px) 0 !important; box-shadow:var(--m-ombre); background-image: linear-gradient(100deg,rgba(10,16,24,.8) 0%,rgba(10,16,24,.52) 50%,rgba(10,16,24,.3) 100%), var(--uc-seuil,none) !important; background-size:cover,cover !important; background-position:center,center 42% !important } /* ====== CHAQUE PAGE SA PHOTO ====== Le nom de la page est pose par le script, donc rien a changer dans le HTML. */ :root[data-forme="moderne"][data-page="index"]{ --uc-seuil:url("photos/c1.webp") } :root[data-forme="moderne"][data-page="offres"]{ --uc-seuil:url("photos/c2.webp") } /* chantier 245 (LOT B) : photo écartée par Éric, REMPLACÉE (règle des images) */ :root[data-forme="moderne"][data-page="notre-demarche"]{ --uc-seuil:url("photos/pr.webp") } :root[data-forme="moderne"][data-page="le-geste-du-soir"]{ --uc-seuil:url("photos/so.webp") } :root[data-forme="moderne"][data-page="cheminement"]{ --uc-seuil:url("photos/ch.webp") } :root[data-forme="moderne"][data-page="accompagnement"]{ --uc-seuil:url("photos/cf.webp") } /* chantier 245 (LOT B) : photo écartée par Éric, REMPLACÉE (règle des images) */ :root[data-forme="moderne"][data-page="le-conseiller"]{ --uc-seuil:url("photos/co.webp") } :root[data-forme="moderne"][data-page="messager"]{ --uc-seuil:url("photos/i9.webp") } :root[data-forme="moderne"][data-page="partenaires"]{ --uc-seuil:url("photos/pa.webp") } :root[data-forme="moderne"][data-page="annuaire"]{ --uc-seuil:url("photos/an.webp") } :root[data-forme="moderne"][data-page="inscription"]{ --uc-seuil:url("photos/m4.webp") } :root[data-forme="moderne"][data-page="nous-ecrire"]{ --uc-seuil:url("photos/t1.webp") } :root[data-forme="moderne"][data-page="trouver-de-l-aide"]{ --uc-seuil:url("photos/m3.webp") } :root[data-forme="moderne"][data-page="mentions-legales"]{ --uc-seuil:url("photos/mc.webp") } /* chantier 245 (LOT B) : photo écartée par Éric, REMPLACÉE (règle des images) */ /* chantier 221, capture 151 : la bande « Mon compte » etait un aplat gris (aucune photo) ; mc.webp, deja dans photos/ et employee nulle part, est la sienne. */ :root[data-forme="moderne"][data-page="mon-compte"]{ --uc-seuil:url("photos/mc.webp") } /* chantier 225 : les huit photos deposees par le directeur (21/10, libres de droits, au format des bandeaux). Restent sans photo : mon-espace-partenaire, la 404 et l'administration (le directeur s'en charge). */ :root[data-forme="moderne"][data-page="premier-ecart"]{ --uc-seuil:url("photos/so.webp") } /* chantier 245 (LOT B) : photo écartée par Éric, REMPLACÉE (règle des images) */ :root[data-forme="moderne"][data-page="votre-couple"]{ --uc-seuil:url("photos/vc.webp") } :root[data-forme="moderne"][data-page="temperament"]{ --uc-seuil:url("photos/c1.webp") } /* chantier 245 (LOT B) : photo écartée par Éric, REMPLACÉE (règle des images) */ :root[data-forme="moderne"][data-page="trouver-de-l-aide-parcours"]{ --uc-seuil:url("photos/i5.webp") } /* chantier 245 (LOT B) : photo écartée par Éric, REMPLACÉE (règle des images) ; chantier 247 (A5) : chacun y écrit et dépose ses réponses → le carnet et le stylo */ :root[data-forme="moderne"][data-page="trouver-de-l-aide-resultat"]{ --uc-seuil:url("photos/vc.webp") } /* chantier 245 (LOT B) : photo écartée par Éric, REMPLACÉE (règle des images) */ :root[data-forme="moderne"][data-page="confirmation"]{ --uc-seuil:url("photos/cf.webp") } :root[data-forme="moderne"][data-page="mot-de-passe-oublie"]{ --uc-seuil:url("photos/mc.webp") } /* chantier 245 (LOT B) : photo écartée par Éric, REMPLACÉE (règle des images) */ :root[data-forme="moderne"][data-page="figurer-dans-l-annuaire"]{ --uc-seuil:url("photos/an.webp") } /* chantier 245 (LOT B) : photo écartée par Éric, REMPLACÉE (règle des images) */ :root[data-forme="moderne"] .menu-int{ position:relative; padding:0 10px 0 18px !important; min-height:56px; width:calc(100% - 76px); max-width:1204px; margin:0 auto !important; border-radius:var(--m-pilule); background-color:rgba(255,255,255,.96); -webkit-backdrop-filter:saturate(1.6) blur(20px); backdrop-filter:saturate(1.6) blur(20px); box-shadow:0 2px 10px rgba(31,40,51,.08), 0 12px 38px rgba(31,40,51,.12) } :root[data-forme="moderne"][data-theme="dark"] .menu-int{ background-color:rgba(23,28,35,.96) } @media (prefers-color-scheme:dark){ :root[data-forme="moderne"]:not([data-theme="light"]) .menu-int{ background-color:rgba(23,28,35,.96) } } /* la marque garde ses deux lignes, centrees l'une sur l'autre comme une tabulation centree : « una caro » se cale au-dessus de sa question. Le decalage a gauche compense la largeur du dessin + son ecart, pour que ce soit bien le TEXTE qui soit centre, pas le couple dessin+texte. */ :root[data-forme="moderne"] .menu-marque{ gap:0 !important; align-items:center !important } :root[data-forme="moderne"] .menu-haut{ margin-left:-36px } :root[data-forme="moderne"] .menu-nom{ font-size:16px !important; letter-spacing:.08em !important } :root[data-forme="moderne"] .menu-sig{ display:block !important; font-size:9px !important; letter-spacing:.11em !important; line-height:1 !important; margin-top:3px !important; color:var(--encre) !important } :root[data-forme="moderne"] .menu-liens{ flex:1 1 auto !important; justify-content:center !important } @media (max-width:1023px){ :root[data-forme="moderne"] #menu{ top:calc(34px + var(--uc-haut, 0px)) } /* chantier 220 : la barre suit les bandeaux du haut (§ 45) */ :root[data-forme="moderne"] .menu-int{ width:calc(100% - 68px) !important } } :root[data-forme="moderne"][data-theme="dark"] #menu{ background-color:rgba(20,26,33,.92) !important } @media (prefers-color-scheme:dark){ :root[data-forme="moderne"]:not([data-theme="light"]) #menu{ background-color:rgba(20,26,33,.92) !important } } :root[data-forme="moderne"] #menu .menu-liens a{ border-radius:var(--m-pilule) !important; padding:6px 11px; font-size:13.5px } :root[data-forme="moderne"] #menu .menu-liens a.ici{ background:rgba(168,123,35,.1) } /* ========== 5. LES ARRONDIS ========== */ :root[data-forme="moderne"] :is(.intro-nom,.menu-panneau,.panneau-deroul,.menu-deroul, .etages-cadre.ac-ouverture > .wrap,.bientot){ border-radius:var(--m-grand) !important } :root[data-forme="moderne"] :is(.outil,.commu,.offre,.temps,.volet,.encart,.rituel, .origine-carte,.entite,.soutien,.tri-crise,.aide-prix,.etages,.apres-outils, .synthese,.couple,.nsp-bloc,.uc-cadre,.of-infos,.clef,.alerte,.temoin, .pied-col,.commu-liste li){ border-radius:var(--m-carte) !important } :root[data-forme="moderne"] :is(a.appel-test,a.outil-lien,a.bouton,a.offre-bouton,a.ao-bouton, button.bouton,.trio-b,.pa-bouton,.pa-bouton-sec,.ra-bouton,.ra-bouton-sec,.demo-lien, .lien-exemple,.menu-bouton,.bientot-fermer,.outil-duree,.coffre-pastille, .bientot-chapeau,.badge-secret,.menu-deroul-bouton){ border-radius:var(--m-pilule) !important } :root[data-forme="moderne"] :is(input,select,textarea,.champ){ border-radius:var(--m-champ) !important } /* ========== 6. LE RELIEF ========== */ :root[data-forme="moderne"] :is(.outil,.commu,.offre,.temps,.volet,.encart,.rituel, .origine-carte,.entite,.soutien,.tri-crise,.aide-prix,.etages,.apres-outils,.temoin, .intro-nom){ box-shadow:var(--m-ombre) !important; border:0 !important } :root[data-forme="moderne"] :is(.outil,.offre,.temps,.volet){ transition:transform .18s, box-shadow .18s } :root[data-forme="moderne"] :is(.outil,.offre,.temps,.volet):hover{ box-shadow:var(--m-ombre-h) !important; transform:translateY(-5px) } :root[data-forme="moderne"] .trio-b{ transition:transform .18s ease, box-shadow .18s ease } :root[data-forme="moderne"] .trio-b:hover{ transform:translateY(-2px) } :root[data-forme="moderne"] .trio-prin{ box-shadow:0 4px 18px rgba(168,123,35,.36) !important } /* ========== 7. LE CADRE D'ENTREE, a plat ========== */ :root[data-forme="moderne"] .intro-zone{ padding-top:var(--esp-section) !important } :root[data-forme="moderne"] .hero .apres-outils{ overflow:hidden; padding:clamp(30px,4vw,46px) clamp(24px,4vw,44px) !important; background:var(--ivoire) !important; border:1px solid var(--trait) !important; box-shadow:var(--m-ombre) !important } :root[data-forme="moderne"] .intro-nom{ overflow:hidden; padding:clamp(26px,3.5vw,42px) clamp(24px,4vw,52px) !important; background:var(--ivoire) !important } :root[data-forme="moderne"] .intro-nom .sceau{ display:none !important } :root[data-forme="moderne"] .intro-nom .lat{ margin-bottom:16px !important } /* ========== 8. LES TROIS OUTILS ========== */ :root[data-forme="moderne"] .outil{ overflow:hidden; isolation:isolate } :root[data-forme="moderne"] .outil-tete{ border-radius:var(--m-carte) var(--m-carte) 0 0 } :root[data-forme="moderne"] .outil-tete{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:178px; padding:0 20px 14px !important; border-top:0 !important; background-image:linear-gradient(180deg,rgba(14,21,30,0) 26%,rgba(14,21,30,.5) 62%,rgba(14,21,30,.84) 100%), var(--uc-vue) !important; background-size:cover,cover !important; background-position:center,center !important; background-repeat:no-repeat,no-repeat !important } :root[data-forme="moderne"] .outil:nth-child(1) .outil-tete{ --uc-vue:url("photos/t1.webp") } :root[data-forme="moderne"] .outil:nth-child(2) .outil-tete{ --uc-vue:url("photos/m3.webp") } /* chantier 248 (LOT B) : c1 était aussi le bandeau de l'accueil ; m3 est l'image de Votre tempérament */ /* chantier 245 (LOT B) : photo écartée par Éric, REMPLACÉE (règle des images) */ :root[data-forme="moderne"] .outil:nth-child(3) .outil-tete{ --uc-vue:url("photos/c2.webp") } :root[data-forme="moderne"] .outil-tete h3{ position:relative; z-index:2; color:#FFFFFF !important; text-shadow:0 2px 20px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.55); margin-bottom:0 !important; padding-bottom:4px } :root[data-forme="moderne"] .outil-duree{ position:absolute; top:14px; right:14px; z-index:3; border:0 !important; background:rgba(255,255,255,.95) !important; color:#1F2833 !important; padding:5px 14px !important; font-weight:700; box-shadow:0 2px 12px rgba(0,0,0,.24) !important } :root[data-forme="moderne"] .outil-corps{ display:flex; flex-direction:column; flex:1 } :root[data-forme="moderne"] .outil-corps > p:first-of-type{ flex:1 } :root[data-forme="moderne"] .outil-lien{ margin-top:auto; align-self:stretch; text-align:center; background:linear-gradient(135deg,#A87B23,#C79437) !important; color:#FFFFFF !important; border-color:transparent !important; font-weight:700 } :root[data-forme="moderne"] .outil-lien:hover{ background:linear-gradient(135deg,#B9871F,#D9A33C) !important; color:#FFFFFF !important } /* ========== 9. LES COMMUNAUTES ========== */ :root[data-forme="moderne"] #communaute .commu{ border-top:0 !important; overflow:hidden; background:var(--ivoire) !important; border:1px solid var(--trait) !important; padding:clamp(30px,4.5vw,48px) clamp(24px,4vw,42px) !important; box-shadow:var(--m-ombre) !important } :root[data-forme="moderne"] .commu-liste li{ background:var(--lin); border:1px solid var(--trait); padding:16px 18px } /* ========== 10. LE PIED : fond sombre garde, marque bien posee ========== */ :root[data-forme="moderne"] footer{ border-radius:var(--m-seuil) var(--m-seuil) 0 0; overflow:hidden; margin-top:var(--esp-section); padding:54px 0 34px !important; background-image:none !important; background-color:#121820 !important } :root[data-forme="moderne"] footer::before{ display:none !important } :root[data-forme="moderne"] .pied-marque{ gap:10px !important } /* On ne force PAS display:block : le pied porte les deux versions du logo (fond clair / fond sombre) et le !important les affichait toutes les deux. On ne touche qu'a la taille ; la bascule clair-sombre fait son travail. */ :root[data-forme="moderne"] .pied-marque .uc-lockup{ width:min(200px,54%); height:auto; margin:0 auto } /* le lockup porte deja le nom : on ne l'ecrit pas deux fois */ :root[data-forme="moderne"] .pied-nom{ display:none !important } :root[data-forme="moderne"] .pied-sig{ display:none !important } :root[data-forme="moderne"] .pied-cols{ max-width:860px !important; gap:28px !important; margin-top:30px !important } :root[data-forme="moderne"] .pied-col{ background:none !important; padding:0 !important; border:0 !important } :root[data-forme="moderne"] .pied-titre{ border-bottom:0 !important; padding-bottom:2px !important } :root[data-forme="moderne"] .pied-avert{ margin-top:30px !important; padding-top:22px !important } :root[data-forme="moderne"] :is(.outils,.cartes,.pied-cols,.commu-liste){ align-items:stretch } :root[data-forme="moderne"] img:not(.uc-logo){ border-radius:var(--m-champ) } /* Le fil d'Ariane : une petite pilule pleine, posee sous le logo, a gauche. Pas un bandeau pleine largeur, pas de transparence. */ :root[data-forme="moderne"] #fil-ariane{ background:none !important; background-image:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; padding:0 !important; min-height:0 !important } /* une ancre s'arrete SOUS la barre flottante et l'onglet du fil d'Ariane qui en pend (38 px + 56 px de pilule + 30 px d'onglet, plus le bandeau d'essai s'il y en a un), jamais dessous : les valeurs de chaque page (84 px, 118 px) sont celles du traditionnel. Mesure du banc : barre et onglet jusqu'a 137 px vus. */ :root[data-forme="moderne"] [id]{ scroll-margin-top:calc(136px + var(--uc-haut, 0px)) !important } :root[data-forme="moderne"] #fil-ariane .wrap{ width:fit-content !important; max-width:none !important; /* en retrait vers la droite : a l'aplomb de la grande pilule, la petite parait mal posee parce qu'elle est plus fine. */ margin-left:calc(max(38px, (100vw - 1204px) / 2) + 26px) !important; margin-right:0 !important; padding:5px 15px !important; background:var(--ivoire) !important; border:1px solid var(--trait) !important; border-radius:999px !important; box-shadow:0 1px 4px rgba(31,40,51,.07) } :root[data-forme="moderne"] #fil-ariane :is(a,span,div){ font-size:11.5px !important; letter-spacing:.03em !important; color:var(--encre-doux) !important; text-shadow:none !important } :root[data-forme="moderne"] #fil-ariane .fil-actuel{ color:var(--encre) !important; font-weight:700 } :root[data-forme="moderne"] #fil-ariane :is(svg,.fil-fleche){ opacity:.4 } @media (max-width:1023px){ :root[data-forme="moderne"] #fil-ariane .wrap{ margin-left:52px !important } } :root[data-forme="moderne"] .menu-panneau{ border-radius:var(--m-grand) !important; overflow:hidden } :root[data-forme="moderne"] .bientot{ border-radius:var(--m-grand) !important } :root[data-forme="moderne"] :is(.demo-lien a,.lien-exemple){ border-radius:var(--m-pilule) } @media (prefers-reduced-motion:reduce){ :root[data-forme="moderne"] :is(.outil,.offre,.temps,.volet):hover, :root[data-forme="moderne"] .trio-b:hover{ transform:none } } /* ===================================================================== CHANTIER 208 (20/10/2026) — LE COMPLÉMENT POUR LES 12 PAGES PUBLIQUES. Ajouté à la suite ; rien de ce qui précède n'est changé. Chaque règle commence par :root[data-forme="moderne"] : le traditionnel ne la lit pas. ===================================================================== */ /* ---- 11. LES ORNEMENTS PROPRES À UNE PAGE (masqués en moderne seulement) ---- Le décor seul : les phrases et les surtitres qu'il entoure restent visibles (.orn-phrase « Rendre l'autre heureux… », .chapeau-orne .txt « La confidentialité »). */ :root[data-forme="moderne"] :is(.orn-b-haut,.orn-b-bas,.orn-rosace, .ac-sep,.pd-orn,.oc-orn,.ouv-rosace,svg.rosace,.ros,.don-orn,.pco-sceau,.t-orn,.t-los,.sep){ display:none !important } :root[data-forme="moderne"] .chapeau-orne > :not(.txt){ display:none !important } /* ---- 12. LES CARTES : arrondi de carte et ombre ---- */ :root[data-forme="moderne"] :is(.ac-col,.ac-tri,.chemin-etape,.ann-carte,.ann-attente,.annonces, .chantier,.colonne,.don-encart,.dsa-trois,.encadre,.of-encart,.of-info,.part-col,.pco-boite, .pilier,.rc-encart,.rdv-bloc,.trad-carte,.temoin-carte,.fiche,.consigne,.avertissement, .don-nest-pas,.ex-hebdo,.sujet-voix,.temoins-avis,.sommaire,form.carte){ border-radius:var(--m-carte) !important; box-shadow:var(--m-ombre) !important } /* ce qui a une tête et un corps garde ses coins dans la carte */ :root[data-forme="moderne"] :is(.colonne,.trad-carte,.fiche,.pco-boite,.ac-col,.of-encart){ overflow:hidden } /* ---- 13. LES BANDES ET LES GRANDS ENCADRÉS DANS LA COLONNE : grand arrondi ---- */ :root[data-forme="moderne"] :is(.appel-bande,.conviction-inner,.secret-inner,.renvoi-int, :is(.ac-trad,.ac-prix,.ac-lit,.secret,.conviction,.renvoi-accomp) > .wrap,.ac-intro > .wrap > div,.rituel .temoins){ border-radius:var(--m-grand) !important; box-shadow:var(--m-ombre) !important } /* ---- 14. CE QUI EST POSÉ DANS UNE CARTE : petit arrondi, sans ombre ---- */ :root[data-forme="moderne"] :is(.entite-ligne,.faq-q){ border-radius:var(--m-champ) !important } /* ---- 15. LE CADRE À LOSANGES REDÉFINI SUR LES BLOCS EUX-MÊMES ---- Ces blocs redonnent leurs propres valeurs à --co-eq, --co-semis… (ex. .colonne-tete, .of-infos) : la neutralisation posée sur :root ne les atteint pas. On la repose sur eux, en moderne seulement. */ :root[data-forme="moderne"] :is(.ac-ouverture > .wrap,.offres-pied,.volet-tete,.apres-outils,.clef,.alerte, .colonne-tete,.aide-note,.ra-pied,.of-infos,.synthese,.couple,.nsp-bloc,.uc-cadre){ --co-eq:transparent !important; --co-cadre:transparent !important; --co-semis:none !important; --co-rosace:none !important; --co-filet:none !important; outline:0 !important } /* la croix au fond des têtes de colonnes, les deux coins dorés de la photo d'origine */ :root[data-forme="moderne"] .ct-fond{ display:none !important } :root[data-forme="moderne"] .origine-photo::before, :root[data-forme="moderne"] .origine-photo::after{ display:none !important } /* ---- 16. LES BOUTONS QUI MANQUAIENT : pilule ---- */ :root[data-forme="moderne"] :is(.don-bouton,.offre-bouton,.renvoi-bouton,.bouton-neutre,.etiquette,.vchip){ border-radius:var(--m-pilule) !important } /* ---- 17. .outil-lien HORS DES CARTES D'OUTILS : il reste un secondaire ---- Le § 8 le passe en doré plein pour les trois cartes de l'accueil. Ailleurs (le point du soir, le cheminement, la présentation, les partenaires) il est un lien secondaire : doré plein, il ferait plusieurs boutons principaux sur la page (CLAUDE.md § 5 : un seul). On lui rend l'aspect de sa page, au repos comme au survol. */ :root[data-forme="moderne"] .outil-lien:not(.outil .outil-lien){ background:linear-gradient(170deg,var(--lin),var(--parchemin)) !important; color:var(--encre) !important; border-color:var(--trait) !important } :root[data-forme="moderne"] .outil-lien:not(.outil .outil-lien):hover{ background:linear-gradient(150deg,#B98A2C,var(--nous) 55%,#8F681B) !important; color:#FCFAF6 !important; border-color:var(--nous) !important } /* ---- 18. LA ROSACE EN FILIGRANE DES MENTIONS LÉGALES : peinte par body::before (la page ne porte pas la classe filigrane-marque que le § 1 vise). Masquée en moderne, sur cette page seulement. ---- */ :root[data-forme="moderne"][data-page="mentions-legales"] body::before{ display:none !important } /* ---- 19. LES FONDS BEIGES ÉCRITS EN DUR (chantier 209, Éric, 20/10/2026) : le beige EST le traditionnel ; en moderne, ces blocs prennent le fond des cartes (--ivoire). Aucune teinte neuve. En traditionnel, rien ne change (préfixe). ---- */ /* les cinq blocs relevés au 208 : fond des cartes et contour fin des autres cartes */ :root[data-forme="moderne"] :is(.of-infos,.ac-prix > .wrap,.don-encart){ background:var(--ivoire) !important; border:1px solid var(--trait) !important } /* trouvés en plus : le fond seul. Leurs filets portent un sens (lui, elle, nous ; la carte mise en avant) ou ce sont des bandes pleine largeur. */ :root[data-forme="moderne"] :is(.entite-ligne,.trad-carte.refo){ background:var(--ivoire) !important } /* Trois blocs écrivaient leur texte EN DUR en encre foncée (#1F2833), pour un fond clair : « Les parcours » (.ac-ouverture > .wrap), la tête « C'est pour vous » (.colonne.oui .colonne-tete) et « Programme d'affiliation » (.uc-cadre.affil). CHANTIER 210 (Éric) : leur texte suit désormais les variables du site en moderne (§ 27), donc ils passent au neutre DANS LES DEUX THÈMES. (L'exception « en clair seulement » du 209 est levée.) En traditionnel, leurs pages gardent leurs couleurs : sur leur fond pastel fixe, elles sont lisibles en clair comme en sombre. */ :root[data-forme="moderne"] :is(.ac-ouverture > .wrap,.uc-cadre.affil){ background:var(--ivoire) !important; border:1px solid var(--trait) !important }:root[data-forme="moderne"] :is(section.temoins,.rituel .temoins){ background:var(--lin) !important } /* ===================================================================== 20. LES NEUF BLOCS QUI RESTAIENT CARRES Releves a la machine le 20/10 a 16 h 42 : tous les elements de plus de 60 x 22 px, portant un fond ou une bordure, dont le rayon etait inferieur a 8 px. C'est la liste complete, il n'en restait que neuf. ===================================================================== */ :root[data-forme="moderne"] :is(.appel-double,.colonne,.colonne-tete,.colonne-corps, .carte,.dons,.vlo,.jauge,.ann-bloc,.ann-vide){ border-radius:var(--m-carte) !important } /* la tete et le corps d'une colonne forment un seul bloc : on arrondit le haut pour l'une, le bas pour l'autre, sinon le joint se voit. */ :root[data-forme="moderne"] .colonne-tete{ border-radius:var(--m-carte) var(--m-carte) 0 0 !important } :root[data-forme="moderne"] .colonne-corps{ border-radius:0 0 var(--m-carte) var(--m-carte) !important } :root[data-forme="moderne"] .colonne{ overflow:hidden } /* la jauge est une barre : elle prend la pilule, dehors comme dedans */ :root[data-forme="moderne"] .jauge{ border-radius:var(--m-pilule) !important; overflow:hidden } :root[data-forme="moderne"] .jauge > span{ border-radius:var(--m-pilule) !important } /* tout bouton sans classe, ou l'annuaire en avait un */ :root[data-forme="moderne"] button:not(.menu-bouton):not(.menu-deroul-bouton):not(#uc-rond):not(#uc-i-tra):not(#uc-i-mod){ border-radius:var(--m-pilule) !important } /* le bloc « Tout commence ici » du point du soir */ :root[data-forme="moderne"] .appel-bande .appel-double{ border-radius:var(--m-carte) !important; overflow:hidden } /* ===================================================================== 21. L'EXEMPLE DE MARC ET CLAIRE, SUR LA PRESENTATION « Ce que Marc a donne cette semaine » / « ce que Claire a recu ». 🔴 Les deux petits dessins au trait a cote des chiffres NE SONT PAS remplaces : ils portent la couleur qui dit QUI parle (--lui en vert olivier, --alerte en rouge). Une image ne prend pas la couleur, c'est la meme raison que pour les pastilles d'etat. Le pictogramme s'AJOUTE devant le titre du bloc, en relief. ===================================================================== */ :root[data-forme="moderne"] .rdv-titre{ display:flex; align-items:center; gap:10px; justify-content:center } :root[data-forme="moderne"] .rdv-titre::before{ content:""; flex:0 0 auto; width:30px; height:30px; background:url("photos/main.webp") center/contain no-repeat } /* les deux lignes se posent dans une carte a part, pour qu'on les voie */ :root[data-forme="moderne"] .rdv-bloc{ border-radius:var(--m-carte) !important } /* ===================================================================== 22. LES DERNIERS RESTES DU TRADITIONNEL Releves le 20/10 a 16 h 48 par un controle qui parcourt les 13 pages et signale tout motif repete, tout cadre a degrades empiles et tout filet dore de 2 px ou plus. C'est ce controle qui doit tourner apres chaque chantier, pas l'oeil. ===================================================================== */ /* le semis du bandeau de titre, sur les 12 pages interieures */ :root[data-forme="moderne"] .borne::before{ display:none !important } /* le cadre a losanges des tetes de colonne et de l'encadre d'alerte */ :root[data-forme="moderne"] .colonne-tete::before{ display:none !important } :root[data-forme="moderne"] .colonne-tete::after{ display:none !important } :root[data-forme="moderne"] .alerte{ background-image:none !important } /* les filets et motifs des cartes de temoignage */ :root[data-forme="moderne"] .temoin-carte::before{ display:none !important } :root[data-forme="moderne"] .temoin-carte{ background-image:none !important } :root[data-forme="moderne"] .temoins::before{ display:none !important } :root[data-forme="moderne"] .temoins::after{ display:none !important } :root[data-forme="moderne"] .entite-ligne::after{ display:none !important } :root[data-forme="moderne"] .chemin-etape::before{ display:none !important } /* les deux filets dores sous le chapeau de l'accueil */ :root[data-forme="moderne"] .hero-qui::before{ display:none !important } :root[data-forme="moderne"] .hero-qui::after{ display:none !important } /* les filets dores epais : on les remplace par le trait fin des cartes */ :root[data-forme="moderne"] :is(.ac-col,.rc-encart,.ac-intro > .wrap){ border-color:var(--trait) !important; border-width:1px !important } /* les fleches du carrousel des temoignages */ :root[data-forme="moderne"] :is(.car-fleche,.car-fleche.g,.car-fleche.d){ background-image:none !important; border-radius:var(--m-pilule) !important } /* ===================================================================== 23. LA LISTE COMPLETE DES DESSINS D'ORNEMENT DES 13 PAGES Relevee dans le code source, pas a l'oeil : toutes les classes de decoratifs des 13 pages publiques. C'est la liste exhaustive, il n'y en a pas d'autres. 🔴 Ne sont PAS dans cette liste, et ne le seront jamais : le logo (uc-logo, uc-marque, uc-lockup, uc-defs), les pictogrammes du produit, et tout dessin qui porte une couleur signifiante. ===================================================================== */ :root[data-forme="moderne"] svg:is(.borne-orn,.fil-deco,.pied-rosace,.los,.orn-rosace, .sc-volute,.fond-rosace,.rosace,.statut-orn,.ct-fond,.ros,.seuil-rosace, .so-motif,.sep-motif,.ouv-semis,.ouv-rosace,.bc-motif,.sc-embleme, .sc-fil,.sep-fil,.so-fil,.t-orn,.t-los,.don-orn,.pco-sceau, .pd-orn,.oc-orn,.orn-b-haut,.orn-b-bas){ display:none !important } /* ===================================================================== 24. LES TROIS DERNIERS ECARTS A LA CHARTE Releves a la machine le 20/10 a 16 h 58. ===================================================================== */ /* ---- a) les deux petits dessins au trait de l'exemple Marc / Claire. Le chiffre a cote porte deja la couleur qui dit qui parle, donc les masquer ne perd aucune information. Le pictogramme en relief est sur le titre du bloc (section 20). ---- */ :root[data-forme="moderne"] .rdv-val > svg.picto{ display:none !important } :root[data-forme="moderne"] .rdv-val{ display:inline-flex; align-items:center; gap:0 } /* ---- b) les filets et doubles contours des boutons ---- 🔴 CORRIGE le 21/10 a 10 h 14, apres le banc du site (echec 5) : « l'infobulle ne s'ouvre pas », sur les 13 pages publiques. C'etait cette regle : le ::after de .coffre-pastille ne porte pas un filet, il porte L'INFOBULLE (« Vos echanges sont chiffres »). Le masquer la supprimait. Mesure : en traditionnel display:block, en moderne display:none. Seul le ::before est masque — en traditionnel son content vaut deja none, il ne dessinait rien. Le ::after reste. ---- */ :root[data-forme="moderne"] .coffre-pastille::before{ display:none !important } :root[data-forme="moderne"] .coffre-pastille{ border:1px solid rgba(22,28,36,.16) !important; background:var(--ivoire) !important } :root[data-forme="moderne"] .trio-b::before{ display:none !important } :root[data-forme="moderne"] .trio-b::after{ display:none !important } :root[data-forme="moderne"] .trio-sec{ border:1.5px solid rgba(22,28,36,.2) !important; background:var(--ivoire) !important } :root[data-forme="moderne"] .trio-prin{ border:0 !important } /* tout bouton a liseré dore repasse en trait sobre ou en plein */ :root[data-forme="moderne"] :is(.bouton.sobre,.appel-test,.outil-lien,.offre-bouton, .ao-bouton,.don-bouton,.renvoi-bouton,.bouton-neutre)::before{ display:none !important } :root[data-forme="moderne"] :is(.bouton.sobre,.bouton-neutre){ border:1.5px solid rgba(22,28,36,.2) !important } /* ---- c) la barre et le fil d'Ariane prennent un contour franc, pour se detacher de la photo et du contenu ---- */ :root[data-forme="moderne"] .menu-int{ border:2.5px solid rgba(10,15,22,.62) !important; box-shadow:0 2px 10px rgba(10,15,22,.16), 0 14px 40px rgba(10,15,22,.2) !important } :root[data-forme="moderne"] #fil-ariane .wrap{ border:2.5px solid rgba(10,15,22,.62) !important; box-shadow:0 1px 5px rgba(10,15,22,.14) !important } :root[data-forme="moderne"][data-theme="dark"] .menu-int, :root[data-forme="moderne"][data-theme="dark"] #fil-ariane .wrap{ border-color:rgba(255,255,255,.4) !important } @media (prefers-color-scheme:dark){ :root[data-forme="moderne"]:not([data-theme="light"]) .menu-int, :root[data-forme="moderne"]:not([data-theme="light"]) #fil-ariane .wrap{ border-color:rgba(255,255,255,.4) !important } } /* ===================================================================== 25. LA BARRE AUX LARGEURS INTERMEDIAIRES Mesure le 20/10 a 17 h 00 : entre 1 000 et 1 200 px, « Donnees chiffrees » depassait de la pilule, jusqu'a 38 px. Les liens sont encore affiches a ces largeurs, et la pilule n'est plus assez large. Le texte du bouton s'efface, le cadenas reste. Le nom lu ne bouge pas. ===================================================================== */ @media (min-width:940px) and (max-width:1210px){ :root[data-forme="moderne"] .coffre-pastille{ font-size:0 !important; gap:0 !important; padding:8px 10px !important; min-width:0 !important } :root[data-forme="moderne"] .coffre-pastille svg{ margin:0 !important } :root[data-forme="moderne"] #menu .menu-liens a{ padding:6px 8px !important; font-size:13px !important } :root[data-forme="moderne"] .menu-deroul-bouton{ padding:6px 8px !important; font-size:13px !important } } @media (min-width:940px) and (max-width:1120px){ :root[data-forme="moderne"] .menu-sig{ display:none !important } :root[data-forme="moderne"] .menu-haut{ margin-left:0 !important } } /* ===================================================================== 26. DE L'AIR AUX DEUX BOUTS DE LA BARRE Eric, 20/10 a 17 h 06 : « On ne colle pas deux extremites ensemble. On laisse un espace a chaque fois. » ===================================================================== */ :root[data-forme="moderne"] .menu-int{ padding-left:22px !important; padding-right:14px !important; gap:18px !important } :root[data-forme="moderne"] .coffre-pastille{ margin-left:14px !important } :root[data-forme="moderne"] .menu-liens{ margin:0 14px !important } @media (min-width:940px) and (max-width:1210px){ :root[data-forme="moderne"] .menu-int{ padding-left:18px !important; padding-right:12px !important; gap:12px !important } :root[data-forme="moderne"] .coffre-pastille{ margin-left:10px !important } :root[data-forme="moderne"] .menu-liens{ margin:0 8px !important } } /* ===================================================================== 27. LE TEXTE DES BLOCS DONT LE MODERNE CHANGE LE FOND (chantier 210, Éric, 20/10/2026) Ces blocs écrivent leur texte EN DUR pour un fond pastel clair FIXE (le même en clair et en sombre, chantiers 125-126) : en traditionnel ils sont lisibles dans les deux thèmes. Le moderne leur donne le fond des cartes (§ 19, et le cadre des § 15 et 22), qui devient sombre en sombre : leur texte suit alors les variables du site. Aucune teinte neuve. ===================================================================== */ :root[data-forme="moderne"] :is(.colonne-tete h3,.affil .affil-titre,.affil .affil-intro,.affil .affil-liste li,.affil .affil-liste strong, .aide-note,.aide-note strong){ color:var(--encre) !important } :root[data-forme="moderne"] :is(.colonne-tete .ct-sous,.affil .affil-note){ color:var(--encre-doux) !important } /* la page pose ces deux-là en !important sous « html body .colonne:is(.non,.oui) .colonne-tete … » : il faut au moins ce poids-là */ :root[data-forme="moderne"] body .colonne:is(.non,.oui) .colonne-tete .ct-sous{ color:var(--encre-doux) !important } :root[data-forme="moderne"] body .colonne:is(.non,.oui) .colonne-tete > span{ color:var(--or-petit,var(--nous)) !important } /* « Les parcours » (.etages-cadre de la présentation) : son texte était posé pour le fond pastel fixe */ :root[data-forme="moderne"] body .etages-cadre :is(h2,h3,p,li,.ac-mission){ color:var(--encre) !important } :root[data-forme="moderne"] body .etages-cadre li a{ color:var(--or-petit,var(--nous)) !important } :root[data-forme="moderne"] :is(.colonne-tete > span,.affil .affil-lab,.affil .affil-intro .uc){ color:var(--or-petit,var(--nous)) !important } /* l'étiquette « Exemple » des fiches partenaires : son fond est --or-petit (or foncé en clair, or clair en sombre) ; le texte prend le fond des cartes */ :root[data-forme="moderne"] .fiche-exemple .exemple-cartouche{ color:var(--ivoire) !important } /* ===================================================================== 28. « PASSEZ VOTRE CHEMIN » ET « C'EST POUR VOUS » SE RÉPONDENT (chantier 210, Éric, 20/10/2026) Deux colonnes qui se répondent se ressemblent : en moderne, les deux têtes prennent le fond des cartes et le contour fin ; c'est la couleur du FILET du haut qui les distingue, celle d'où venaient leurs pastels (chantiers 125 et 126) : l'ardoise (--elle) pour « Passez votre chemin », l'or (--nous) pour « C'est pour vous ». Couleurs de la charte, aucune neuve. ===================================================================== */ :root[data-forme="moderne"] .colonne:is(.non,.oui) .colonne-tete{ background:var(--ivoire) !important; border:1px solid var(--trait) !important; border-bottom:0 !important } :root[data-forme="moderne"] .colonne.non .colonne-tete{ border-top:3px solid var(--elle) !important } :root[data-forme="moderne"] .colonne.oui .colonne-tete{ border-top:3px solid var(--nous) !important } /* ===================================================================== 29. PLUS AUCUN LISERE DANS LES PAGES INTERIEURES Eric, 20/10 a 17 h 20 : « enleve tout ce qui est lisere, bord, etc. Premiere page, c'est bon. Les pages d'apres, c'est pas bon. » Les 25 classes a bord ont ete relevees a la machine sur les 12 pages interieures. Le bord s'en va, l'ombre le remplace : c'est elle qui detache le bloc, comme sur l'accueil. 🔴 Le lisere de la barre et du fil d'Ariane RESTE, et il est fonce : Eric l'a demande expressement a 17 h 19. ===================================================================== */ :root[data-forme="moderne"] :is(.entite-ligne,.ac-lit-ia,.fiche,.rituel-tete,.ex-hebdo, .temoins-avis,.conviction-inner,.phare,.secret-inner,.avertissement,.renvoi-int, .dsa-hors-ecran,.appel-bande,.op-cle,.ac-tri,.part-col,.part-secret,.ann-attente, .carte,.encadre,.aide-cycle,.aide-nefait,.personne,.ac-col,.rc-encart,.colonne, .colonne-tete,.colonne-corps,.of-infos,.uc-cadre,.don-encart,.trad-carte, .temoin-carte,.aide-prix,.soutien,.tri-crise,.origine-carte,.entite,.volet, .offre,.temps,.rituel,.etages,.apres-outils,.synthese,.couple,.nsp-bloc, .clef,.alerte,.sommaire,.commu,.outil,.pied-col,.dons,.jauge,.vlo){ border:0 !important; outline:0 !important } /* ce qui tenait par son bord tient maintenant par son ombre */ :root[data-forme="moderne"] :is(.entite-ligne,.ac-lit-ia,.fiche,.rituel-tete,.ex-hebdo, .temoins-avis,.conviction-inner,.phare,.secret-inner,.avertissement,.renvoi-int, .dsa-hors-ecran,.op-cle,.ac-tri,.part-col,.part-secret,.ann-attente,.carte, .encadre,.aide-cycle,.aide-nefait,.personne,.ac-col,.rc-encart,.colonne, .sommaire,.of-infos,.uc-cadre,.don-encart,.trad-carte,.temoin-carte){ box-shadow:var(--m-ombre) !important } /* le .wrap n'est qu'un conteneur de largeur : jamais de bord ni d'ombre */ :root[data-forme="moderne"] .wrap{ border:0 !important } :root[data-forme="moderne"] main > .wrap{ box-shadow:none !important } /* ===================================================================== 30. DES IMAGES DANS LES PAGES INTERIEURES Eric, 20/10 a 17 h 20 : « mets beaucoup plus d'images ». Essai ecarte : un ::before dans le flux. Sur un bloc a deux colonnes, il se pose DANS la colonne, pas en tete : vu a l'ecran, c'est laid. Retenu : la photo est un FOND, posee en bande en haut du bloc, pleine largeur, et le contenu commence dessous. 🔴 Aucune image religieuse, aucun visage de face. ===================================================================== */ :root[data-forme="moderne"] :is(.conviction-inner,.secret-inner,.phare,.renvoi-int, .rituel-tete,.part-secret,.aide-cycle,.dsa-hors-ecran,.ex-hebdo){ position:relative; overflow:hidden; padding-top:clamp(156px,19vw,196px) !important; background-color:var(--ivoire) !important } :root[data-forme="moderne"] :is(.conviction-inner,.secret-inner,.phare,.renvoi-int, .rituel-tete,.part-secret,.aide-cycle,.dsa-hors-ecran,.ex-hebdo)::before{ content:"" !important; position:absolute !important; top:0; left:0; right:0; height:clamp(140px,17vw,176px); z-index:0; pointer-events:none; background-image: linear-gradient(180deg,rgba(14,21,30,.05) 0%,rgba(14,21,30,.2) 62%,var(--ivoire) 100%), var(--uc-vue,url("photos/i9.webp")) !important; background-size:cover, cover !important; background-position:center center, center center !important; background-repeat:no-repeat, no-repeat !important } /* une vue differente par bloc, pour qu'aucune page ne se repete */ :root[data-forme="moderne"] .conviction-inner{ --uc-vue:url("photos/i9.webp") } /* chantier 247 (LOT B) : l'arbre dans un pré (i2) remplacé par un couple main dans la main : « un couple qui va bien peut aller mieux » */ :root[data-forme="moderne"] .secret-inner{ --uc-vue:url("photos/i12.webp") } /* chantier 247 (LOT B) : l'intérieur design (i6) remplacé par deux mains : « il n'y a que vous deux pour le lire » */ :root[data-forme="moderne"] .phare{ --uc-vue:url("photos/i7.webp") } :root[data-forme="moderne"] .renvoi-int{ --uc-vue:url("photos/i4.webp") } :root[data-forme="moderne"] .rituel-tete{ --uc-vue:url("photos/i1.webp") } :root[data-forme="moderne"] .part-secret{ --uc-vue:url("photos/i3.webp") } :root[data-forme="moderne"] .aide-cycle{ --uc-vue:url("photos/i8.webp") } :root[data-forme="moderne"] .dsa-hors-ecran{ --uc-vue:url("photos/i5.webp") } /* .op-cle (cheminement, « Plus vous avez attendu… ») n'a plus de photo : Eric, chantier 221, capture 146. Le texte reste, en carte, d'aplomb. */ :root[data-forme="moderne"] .op-cle{ padding:20px 24px !important; background-color:var(--ivoire) !important; border-radius:var(--r-carte,18px) !important } :root[data-forme="moderne"] .ex-hebdo{ --uc-vue:url("photos/bandes/so-1600.webp") } /* chantier 257 (LOT E) : la tasse (i10) remplacée par so (accepté par le directeur) ; i10 et i11 restent dans photos/ */ /* ===================================================================== 31. LES DEUX BOUTS DE LA BARRE, A LA MEME DISTANCE Eric, 20/10 a 17 h 26 : « Donnees chiffrees, que le cadenas quand le rond du menu, les trois barres. Ca doit etre colle a l'interieur. Le bord du logo a la meme distance que le bord du rond au bout de la pastille. Tu divises la distance par deux entre le C de comment et le bord du cercle, et la pastille tu la mets a la meme distance de l'autre cote a droite. » Mesure avant : a gauche 25 px, a droite 23 px, et en mode restreint la pastille flottait au milieu (jusqu'a 265 px du bord) avec son texte. Vise : 12 px a gauche, 12 px a droite, a toutes les largeurs. ===================================================================== */ /* a) le cadenas seul des que le rond du menu parait */ @media (max-width:1023px){ :root[data-forme="moderne"] .coffre-pastille{ font-size:0 !important; gap:0 !important; padding:8px 10px !important; min-width:0 !important } :root[data-forme="moderne"] .coffre-pastille svg{ margin:0 !important } /* la pastille rejoint le rond du menu, au bout : plus de flottement */ :root[data-forme="moderne"] .coffre-pastille{ margin-left:auto !important; margin-right:0 !important } } /* b) les deux bouts a egale distance */ :root[data-forme="moderne"] .menu-int{ padding-left:14px !important; padding-right:14px !important } :root[data-forme="moderne"] .menu-bouton{ margin-right:0 !important } @media (min-width:940px) and (max-width:1210px){ :root[data-forme="moderne"] .menu-int{ padding-left:14px !important; padding-right:14px !important } } /* ===================================================================== 32. PLUS DE DOUBLE CERCLE AUTOUR DES BOUTONS Eric, 20/10 a 17 h 39 : « Recevoir l'outil, un double encerclage, c'est pas bon. Les petites fioritures, a faire le test, tout ca, c'est des boutons modernes qu'on veut. » Releve a la machine : 30 elements portent A LA FOIS un border et un outline. En traditionnel le bord dore est fort et masque l'outline ; en moderne les deux traits sont pales et se voient tous les deux. On efface l'outline (sauf au clavier) et on garde un seul bord franc. ===================================================================== */ :root[data-forme="moderne"] :is(.bouton,.bouton.sobre,.bouton-ico,.bouton-auto, .outil-lien,.appel-test,.don-bouton,.renvoi-sobre,.affil-bouton,.ap-offres, .bouton-neutre,.offre-bouton,.renvoi-bouton):not(:focus-visible){ outline:0 !important; outline-offset:0 !important } /* un seul trait, net, et la pilule partout */ :root[data-forme="moderne"] :is(.bouton,.bouton.sobre,.bouton-ico,.bouton-auto, .outil-lien,.appel-test,.don-bouton,.renvoi-sobre,.affil-bouton,.ap-offres){ border:1.5px solid rgba(22,28,36,.26) !important; border-radius:var(--m-pilule) !important } :root[data-forme="moderne"][data-theme="dark"] :is(.bouton,.bouton.sobre,.bouton-ico, .bouton-auto,.outil-lien,.appel-test,.don-bouton,.renvoi-sobre,.affil-bouton,.ap-offres){ border-color:rgba(255,255,255,.26) !important } @media (prefers-color-scheme:dark){ :root[data-forme="moderne"]:not([data-theme="light"]) :is(.bouton,.bouton.sobre,.bouton-ico, .bouton-auto,.outil-lien,.appel-test,.don-bouton,.renvoi-sobre,.affil-bouton,.ap-offres){ border-color:rgba(255,255,255,.26) !important } } /* ===================================================================== 33. DES IMAGES PARTOUT, ET JAMAIS DEUX FOIS LA MEME Eric, 20/10 a 17 h 39 : « Et mettre deux fois la meme image, devoir de s'asseoir, etc., ca, c'est pas bon. [...] Et des images partout. A ce niveau-la. » Trois vues etaient posees deux fois (i1, i4, i6) : corrige au 28. Ici, dix nouveaux encadres recoivent leur bande, et chaque bloc est vise PAR PAGE : une page ne peut pas repeter une vue. Dix nouvelles photos : i8 a i17. 🔴 Aucun visage de face, rien de religieux, usage commercial libre. ===================================================================== */ :root[data-forme="moderne"][data-page="offres"] .of-infos-grille, :root[data-forme="moderne"][data-page="le-geste-du-soir"] .appel-bande, :root[data-forme="moderne"][data-page="le-geste-du-soir"] .rc-encart, :root[data-forme="moderne"][data-page="accompagnement"] .ac-tri, :root[data-forme="moderne"][data-page="mentions-legales"] .encadre, :root[data-forme="moderne"][data-page="cheminement"] .appel-bande, :root[data-forme="moderne"][data-page="partenaires"] .don-encart, :root[data-forme="moderne"][data-page="trouver-de-l-aide"] .personne, :root[data-forme="moderne"][data-page="le-conseiller"] .ac-deux, :root[data-forme="moderne"][data-page="messager"] .ac-deux, :root[data-forme="moderne"][data-page="accompagnement"] .trad-grille, :root[data-forme="moderne"][data-page="accompagnement"] .ac-prix, :root[data-forme="moderne"][data-page="mentions-legales"] .sommaire, :root[data-forme="moderne"][data-page="le-geste-du-soir"] .nourrit, :root[data-forme="moderne"][data-page="trouver-de-l-aide"] .aide-duo, :root[data-forme="moderne"][data-page="notre-demarche"] .sujet-voix{ position:relative; overflow:hidden; padding-top:clamp(150px,18vw,186px) !important; background-color:var(--ivoire) !important } :root[data-forme="moderne"][data-page="offres"] .of-infos-grille::before, :root[data-forme="moderne"][data-page="le-geste-du-soir"] .appel-bande::before, :root[data-forme="moderne"][data-page="le-geste-du-soir"] .rc-encart::before, :root[data-forme="moderne"][data-page="accompagnement"] .ac-tri::before, :root[data-forme="moderne"][data-page="mentions-legales"] .encadre::before, :root[data-forme="moderne"][data-page="cheminement"] .appel-bande::before, :root[data-forme="moderne"][data-page="partenaires"] .don-encart::before, :root[data-forme="moderne"][data-page="trouver-de-l-aide"] .personne::before, :root[data-forme="moderne"][data-page="le-conseiller"] .ac-deux::before, :root[data-forme="moderne"][data-page="messager"] .ac-deux::before, :root[data-forme="moderne"][data-page="accompagnement"] .trad-grille::before, :root[data-forme="moderne"][data-page="accompagnement"] .ac-prix::before, :root[data-forme="moderne"][data-page="mentions-legales"] .sommaire::before, :root[data-forme="moderne"][data-page="le-geste-du-soir"] .nourrit::before, :root[data-forme="moderne"][data-page="trouver-de-l-aide"] .aide-duo::before, :root[data-forme="moderne"][data-page="notre-demarche"] .sujet-voix::before{ content:"" !important; position:absolute !important; top:0; left:0; right:0; height:clamp(132px,16vw,166px); z-index:0; pointer-events:none; /* chantier 221, capture 148 : le ::before de la page portait le double filet du traditionnel (partenaires, .don-encart, 1 px d'or) : sous la photo, il dessinait un trait horizontal. Une bande photo n'a pas de bord. */ border:0 !important; background-image: linear-gradient(180deg,rgba(14,21,30,.05) 0%,rgba(14,21,30,.2) 62%,var(--ivoire) 100%), var(--uc-vue,url("photos/i11.webp")) !important; background-size:cover, cover !important; background-position:center center, center center !important; background-repeat:no-repeat, no-repeat !important } /* une vue par bloc, et aucune page ne repete la sienne */ :root[data-forme="moderne"][data-page="offres"] .of-infos-grille{ --uc-vue:url("photos/bandes/i7-1600.webp") } /* chantier 257 (LOT E) : la tasse (i11) remplacée par i7 (accepté par le directeur) ; i10 et i11 restent dans photos/ */ /* chantier 238 (LOT I, Éric 17 h 33 : « c'est trop collé ») : le cadre à photo des offres gardait le texte collé à trois bords (padding 186 0 0). Il prend la marge des cartes de la page (.offre : 32 / 30 / 32 / 30), jamais moins de 20 px ; le haut reste celui de la photo. */ :root[data-forme="moderne"][data-page="offres"] .of-infos-grille{ padding-right:30px !important; padding-bottom:32px !important; padding-left:30px !important } :root[data-forme="moderne"][data-page="le-geste-du-soir"] .appel-bande{ --uc-vue:url("photos/i5.webp") } /* chantier 247 (LOT B) : l'intérieur sombre (i15) remplacé par le carnet et le stylo : « Tout commence ici », on dépose ses réponses */ :root[data-forme="moderne"][data-page="le-geste-du-soir"] .rc-encart{ --uc-vue:url("photos/m3.webp") } /* chantier 250 (LOT E2) : les tasses (i13) remplacées par deux mains : le conseiller, pendant le Devoir de S’Asseoir, à deux */ :root[data-forme="moderne"][data-page="accompagnement"] .ac-tri{ --uc-vue:url("photos/i12.webp") } :root[data-forme="moderne"][data-page="mentions-legales"] .encadre{ --uc-vue:url("photos/i5.webp") } /* chantier 250 (LOT E2) : les tasses (i17) remplacées par le carnet et le stylo : ce qui est écrit, et chiffré (mc est le bandeau de la page) */ :root[data-forme="moderne"][data-page="cheminement"] .appel-bande{ --uc-vue:url("photos/i4.webp") } /* chantier 247 (LOT B) : la forêt (i14) remplacée par trois personnes : « tout se relie » ; la montre est posée dans « Vos données, au fil du temps », pas deux fois */ :root[data-forme="moderne"][data-page="partenaires"] .don-encart{ --uc-vue:url("photos/t1.webp") } /* chantier 248 (LOT B) : co est la photo de la fiche d'exemple du mouvement, sur la même page ; t1, deux mains et deux tasses : ce qu'on partage */ /* chantier 245 (LOT C) : la forêt sombre qu'Éric a vue dans « Un don de soutien », REMPLACÉE par deux mains qui trinquent */ :root[data-forme="moderne"][data-page="trouver-de-l-aide"] .personne{ --uc-vue:url("photos/bandes/c1-1600.webp") } /* chantier 257 (LOT E) : la tasse (i11) remplacée par c1 (accepté par le directeur) ; i10 et i11 restent dans photos/ */ :root[data-forme="moderne"][data-page="le-conseiller"] .ac-deux{ --uc-vue:url("photos/bandes/i9-1600.webp") } /* chantier 257 (LOT E) : la tasse (i10) remplacée par i9 (accepté par le directeur) ; i10 et i11 restent dans photos/ */ /* chantier 238 (LOT D) : le messager prend la bande photo de « Ce qu'il fait », comme le conseiller ; le stylo (i5) dit « vous écrivez ». Proposition : Éric tranche. */ :root[data-forme="moderne"][data-page="messager"] .ac-deux{ --uc-vue:url("photos/i5.webp") } :root[data-forme="moderne"][data-page="accompagnement"] .trad-grille{ --uc-vue:url("photos/i5.webp") } /* chantier 250 (LOT E2) : les tasses (i17) remplacées par le carnet et le stylo : ce qu’il dit, ce que l’accompagnement propose de dire */ :root[data-forme="moderne"][data-page="accompagnement"] .ac-prix{ --uc-vue:url("photos/i8.webp") } :root[data-forme="moderne"][data-page="mentions-legales"] .sommaire{ --uc-vue:url("photos/bandes/an-1600.webp") } /* chantier 257 (LOT E) : la tasse (i11) remplacée par an (accepté par le directeur) ; i10 et i11 restent dans photos/ */ :root[data-forme="moderne"][data-page="le-geste-du-soir"] .nourrit{ --uc-vue:url("photos/i12.webp") } :root[data-forme="moderne"][data-page="trouver-de-l-aide"] .aide-duo{ --uc-vue:url("photos/c2.webp") } /* chantier 245 (LOT B) : la forêt sombre (i16), un paysage, REMPLACÉE */ :root[data-forme="moderne"][data-page="notre-demarche"] .sujet-voix{ --uc-vue:url("photos/i8.webp") } /* chantier 250 (LOT E2) : les tasses (i13) remplacées par deux mains qui se tiennent : l’un parle, l’autre entend */ /* ---- 33 bis. LES DEUX TETES DE COLONNE : LE FILET RESTE, LE CONTOUR PART Eric, 20/10 a 17 h 56 : « Enleve les liseres, enleve. » Le 210 (section 28) a pose un contour fin de 1 px tout autour des deux tetes, plus un filet de 3 px en haut qui les distingue. Le filet est un signe, pas un lisere : il reste. Le contour part, l'ombre le remplace. ---- */ :root[data-forme="moderne"] .colonne:is(.non,.oui) .colonne-tete{ border-left:0 !important; border-right:0 !important; border-bottom:0 !important; box-shadow:var(--m-ombre) !important } :root[data-forme="moderne"] .colonne.non .colonne-tete{ border-top:3px solid var(--elle) !important } :root[data-forme="moderne"] .colonne.oui .colonne-tete{ border-top:3px solid var(--nous) !important } /* ===================================================================== 34. LES BOUTONS SE RESSEMBLENT ENFIN Eric, 20/10 a 18 h 07 : « Il y a encore pas mal d'incoherences au niveau des boutons. » Releve a la machine sur les 13 pages, en moderne. Quatre defauts : · « Voir les offres » (.vlo) : rayon 20 au lieu de la pilule, sur 4 pages. C'est le bouton deja signale le 20/10 a 16 h 40. · « Reessayer » de l'annuaire (un