/* Theme Name: Alpha Villa */ @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600;700&display=swap'); /* ========================================================================== GABARIT « MOSAIQUE DE PROJETS » Quatre choses le rendent reconnaissable, et ce sont les seules qui comptent : 1. la page S'OUVRE sur une maconnerie de 5 colonnes — aucune ligne de texte au-dessus, aucun heros, aucun titre d'accueil visible ; 2. les vignettes se touchent presque : gouttiere de 9px, arrondi 3px, AUCUN bord, AUCUNE ombre ; 3. sous chaque image, une pastille en CONTOUR 1px (jamais posee sur l'image) puis une legende de 13px ; 4. la typographie s'efface : 36px au plus en titre, 16px en corps, et rien en capitales sauf les pastilles. ========================================================================== */ /* ---------- 1. JETONS ---------------------------------------------------- */ :root{ --fond:#FCFCFB; /* le blanc dominant, tres legerement chaud */ --encre:#141312; /* le noir de texte, jamais #000 */ --doux:#575350; /* le gris de service : legendes, dates, chapos */ --filet:#E2DEDA; /* le gris des rares filets — chaud, jamais neutre */ --surf:#F1EEEA; /* la surface d'appui (bandes, plaques de repli) */ --nuit:#1B1917; /* la bande sombre, identique dans les deux themes */ --nuit-txt:#F3F0EC; /* le texte de la bande sombre (13,6:1 sur --nuit) */ --accent:#8D3E28; /* un accent bois par site, tire par domaine */ --accent2:#2C5D5E; /* le second accent, reserve aux rangs et aux comptes */ --accent-txt:color-mix(in srgb, #8D3E28 74%, #170d03); --accent2-txt:color-mix(in srgb, #2C5D5E 74%, #04121a); --titre:'Hanken Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif; --corps:'Noto Sans','Helvetica Neue',Helvetica,Arial,sans-serif; --rayon:3px; /* 3px partout, images comprises — jamais plus */ --gout:9px; /* LA gouttiere de la mosaique */ color-scheme:light; } /* ---------- 2. SOCLE ----------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--fond);color:var(--encre); font-family:var(--corps);font-size:16px;line-height:1.55; -webkit-font-smoothing:antialiased;overflow-x:hidden} img{max-width:100%;height:auto;display:block;border-radius:var(--rayon)} a{color:inherit;text-decoration:none} a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} :focus-visible{outline:2px solid var(--accent-txt);outline-offset:2px} h1,h2,h3,h4{font-family:var(--titre);font-weight:600;margin:0;line-height:1.2; letter-spacing:-.01em;text-wrap:balance} p{margin:0} ul,ol{margin:0;padding:0;list-style:none} .sb-oeil,.sb-oeil-txt{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .sb-oeil:focus{left:.5rem;top:.5rem;width:auto;height:auto;padding:.5rem .8rem; background:var(--encre);color:var(--fond);z-index:99} .mo-enveloppe{width:min(1320px,100% - 2.4rem);margin-inline:auto;min-width:0} .jr-plaque{border-radius:var(--rayon);background:var(--surf);color:var(--accent-txt); font-family:var(--titre);font-weight:600;display:flex;align-items:center; justify-content:center;text-align:center;padding:.6rem;font-size:15px} /* LA PASTILLE : contour 1px, capitales, jamais posee sur une image */ .mo-past{display:inline-block;font-family:var(--titre);font-size:10.5px;font-weight:600; letter-spacing:.12em;text-transform:uppercase;color:var(--doux); border:1px solid var(--filet);border-radius:99px;padding:.18rem .5rem;line-height:1.4} .mo-past--lien{color:var(--accent-txt);border-color:var(--accent-txt)} .mo-past--lien:hover{text-decoration:none;background:var(--surf)} /* LA LEGENDE : 13px, sous l'image, sous la pastille */ .mo-leg{font-size:13px;line-height:1.45;margin-top:.35rem} .mo-leg--gris{color:var(--doux);margin-top:.2rem} .mo-sous{padding-top:.45rem} .mo-titre{font-size:clamp(22px,3vw,36px);font-weight:600} .mo-titre--rub{font-size:clamp(24px,3.4vw,36px)} .mo-chapo{font-size:15px;color:var(--doux);margin-top:.4rem;max-width:60ch} .mo-lien-tout{font-size:13px;font-weight:600;color:var(--accent-txt);white-space:nowrap} /* ---------- 3. LE RAIL LATERAL 64px + LA TETE ---------------------------- */ .mo-rail{position:fixed;left:0;top:0;bottom:0;width:64px;z-index:30;display:none; flex-direction:column;align-items:center;gap:1.4rem;padding:1rem 0; background:var(--fond);border-right:1px solid var(--filet)} .mo-rail-mono{display:block;width:30px;color:var(--accent)} .mo-rail-mono svg{width:100%;height:auto;fill:currentColor} /* 18/09/2026 — retour Mathias (« le logo a l'air bugué, un carré marron ») : le monogramme * (rect .sbm-bg + lettre .sbm-lettre, réutilisé au rail, à l'entête, au pied et au hero) n'avait * AUCUNE règle propre à ces deux classes — les deux héritaient de « svg{fill:currentColor} », * donc du MÊME color:var(--accent) : le carré et la lettre se peignaient dans la même couleur, * la lettre devenait invisible sur son propre fond. On distingue enfin les deux : le carré garde * l'accent du site, la lettre prend --fond (contraste mesuré ≈7,2:1). Mesuré dans le navigateur * avant correctif : rail_rect_fill = rail_text_fill = rgb(141,62,40) (identiques). */ .sbm-bg{fill:var(--accent)} .sbm-lettre{fill:var(--fond)} .mo-rail-nav{display:flex;flex-direction:column;gap:.2rem;width:100%;align-items:center} .mo-rail-nav a{display:flex;align-items:center;justify-content:center;width:40px;height:40px; border-radius:var(--rayon);color:var(--doux)} .mo-rail-nav a:hover{background:var(--surf);color:var(--encre);text-decoration:none} .mo-rail-nav a.is-actif{color:var(--accent-txt)} .mo-rail-ico{display:block;width:20px;height:20px} .mo-rail-ico svg{width:100%;height:100%} .mo-tete{position:sticky;top:0;z-index:25;background:var(--fond); border-bottom:1px solid var(--filet)} .mo-tete-in{display:flex;align-items:center;gap:1.2rem;position:relative; width:min(1320px,100% - 2.4rem);margin-inline:auto;min-height:60px} .mo-marque{display:flex;align-items:center;gap:.55rem;flex:0 0 auto} .mo-marque:hover{text-decoration:none} .mo-marque-mono{display:none;width:24px;color:var(--accent)} .mo-marque-mono svg{width:100%;height:auto;fill:currentColor} .mo-marque-txt{display:flex;flex-direction:column;line-height:1.1} .mo-marque-nom{font-family:var(--titre);font-weight:700;font-size:19px;letter-spacing:-.018em} .mo-marque-bl{font-size:11px;color:var(--doux);letter-spacing:.04em} .mo-nav{position:absolute;left:0;right:0;top:100%;background:var(--fond);border-bottom:1px solid var(--filet);display:flex;flex-direction:column;max-height:0;overflow:hidden;padding:0;z-index:30} .mo-nav.is-ouvert{max-height:80vh;overflow:auto;padding:.5rem 1.2rem 1rem} .mo-nav a{white-space:nowrap;width:100%;padding:.55rem .2rem;font-size:14px;font-weight:500; color:var(--doux);border-bottom:1px solid var(--filet)} .mo-nav a:hover{color:var(--encre);background:var(--surf);text-decoration:none} .mo-quete input{font:inherit;font-size:13px;padding:.42rem .7rem;width:min(180px,100%); border:1px solid var(--filet);border-radius:var(--rayon);background:var(--fond);color:var(--encre)} .mo-quete input::placeholder{color:var(--doux)} .mo-bouton{flex:0 0 auto;font-family:var(--titre);font-size:13px;font-weight:600; padding:.45rem .8rem;border:1px solid var(--encre);border-radius:var(--rayon);color:var(--encre)} .mo-bouton:hover{text-decoration:none;background:var(--encre);color:var(--fond)} .mo-burger{display:block;background:none;border:1px solid var(--filet);border-radius:var(--rayon); padding:.45rem .5rem;cursor:pointer} .mo-burger span{display:block;width:16px;height:1.5px;background:var(--encre);margin:3px 0} /* ---------- 4. LA MACONNERIE (le trait signature) ------------------------ */ .mo-mosaique{padding:var(--gout) var(--gout) 2.4rem} .mo-maconnerie{columns:5;column-gap:var(--gout)} .mo-tuile{display:inline-block;width:100%;break-inside:avoid;-webkit-column-break-inside:avoid; margin:0 0 var(--gout)} .mo-tuile-img{display:block;overflow:hidden;border-radius:var(--rayon);background:var(--surf)} .mo-tuile-img > *{width:100%;height:100%;object-fit:cover;display:block;border-radius:0} /* les hauteurs variables : c'est ce qui fait la maconnerie, meme avec des vignettes recadrees */ .mo-tuile--h1 .mo-tuile-img{aspect-ratio:3/4} .mo-tuile--h2 .mo-tuile-img{aspect-ratio:1/1} .mo-tuile--h3 .mo-tuile-img{aspect-ratio:4/5} .mo-tuile--h4 .mo-tuile-img{aspect-ratio:5/7} .mo-tuile--h5 .mo-tuile-img{aspect-ratio:4/3} .mo-maconnerie--rub{columns:4;padding-bottom:1.4rem} /* ---------- 5. LES BANDES ------------------------------------------------ */ .mo-bande{padding-block:2.4rem} .mo-bande--pieces,.mo-bande--metiers{background:var(--surf)} .mo-bande-tete{display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem; flex-wrap:wrap;margin-bottom:1.4rem} .mo-bande-tete .mo-chapo{flex:1 1 320px} .mo-pieces{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:1rem} .mo-piece a{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.1rem} .mo-piece a:hover{text-decoration:none} .mo-piece a:hover .mo-piece-nom{text-decoration:underline;text-underline-offset:3px} .mo-piece-vig{display:block;width:64px;height:64px;border-radius:50%;overflow:hidden; background:var(--fond);margin-bottom:.5rem} .mo-piece-vig > *{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;font-size:11px} .mo-piece-nom{font-family:var(--titre);font-size:14px;font-weight:600} .mo-piece-n{font-size:12px;color:var(--doux)} .mo-ap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0} .mo-ap-pan{min-width:0;padding-right:1.4rem} .mo-ap-pan + .mo-ap-pan{border-left:2px solid var(--encre);padding-left:1.4rem;padding-right:0} .mo-ap-img{display:block;overflow:hidden;border-radius:var(--rayon);aspect-ratio:3/2;background:var(--surf)} .mo-ap-img > *{width:100%;height:100%;object-fit:cover;display:block;border-radius:0} .mo-metiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem} .mo-metier a{display:flex;flex-direction:column;gap:.2rem;padding:.75rem .9rem; border:1px solid var(--filet);border-radius:var(--rayon);background:var(--fond);min-width:0} .mo-metier a:hover{text-decoration:none;border-color:var(--encre)} .mo-metier-nom{font-family:var(--titre);font-size:15px;font-weight:600; overflow-wrap:anywhere} .mo-metier-n{font-size:12px;color:var(--doux);font-variant-numeric:tabular-nums} /* ---------- 6. LA BANDE DE RESPIRATION (remise au ton, retour Mathias 18/09/2026) -------- * « Elle est toute noire alors que le site est plutôt clair, elle convainc moins. » Fond passé * de --nuit (noir) à --surf, la surface d'appui déjà servie par les autres bandes de repli de * cette page (cf. jeton § 1) : la section reste visuellement détachée (filet + numéros en * accent), sans repasser au registre sombre. Ce n'est pas un retrait : mêmes 3 lectures réelles, * même numérotation, seule la tonalité change. */ .mo-nuit{background:var(--surf);color:var(--encre);padding-block:2.4rem;margin-block:0} .mo-titre--nuit{color:var(--encre);margin-bottom:1.2rem} .mo-nuit-liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem} .mo-nuit-liste li{display:flex;flex-direction:column;gap:.35rem;min-width:0; border-top:1px solid var(--filet);padding-top:.7rem} .mo-nuit-rang{font-family:var(--titre);font-size:26px;font-weight:700;line-height:1; color:var(--accent-txt);opacity:.8} .mo-nuit-liste a{font-family:var(--titre);font-size:17px;font-weight:600;line-height:1.3;color:var(--encre)} .mo-nuit-liste a:hover{color:var(--accent-txt);text-decoration:underline} .mo-nuit-date{font-size:12px;color:var(--doux)} /* ---------- 7. LES CARTES ------------------------------------------------ */ .mo-grille3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem var(--gout)} .mo-grille4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem var(--gout)} .mo-carte{min-width:0} .mo-carte-img{display:block;overflow:hidden;border-radius:var(--rayon);aspect-ratio:4/3;background:var(--surf)} .mo-carte-img > *{width:100%;height:100%;object-fit:cover;display:block;border-radius:0} .mo-carte-titre{font-size:16px;font-weight:600;margin-top:.3rem;line-height:1.3} /* ---------- 8. L'ARTICLE ------------------------------------------------- */ .mo-art{padding-block:1.4rem 2.4rem} .mo-fil{font-size:12px;color:var(--doux);display:flex;flex-wrap:wrap;gap:.35rem; align-items:center;margin-bottom:1.2rem} .mo-fil-sep{color:var(--filet)} .mo-fil-ici{color:var(--encre)} .mo-art-tete{max-width:min(820px,100%)} .mo-art-titre{font-size:clamp(26px,3.6vw,36px);font-weight:700;margin:.6rem 0 0;letter-spacing:-.018em} .mo-art-chapo{font-size:18px;line-height:1.55;color:var(--doux);margin-top:.7rem} /* 15/09/2026 : tete d'article en 2 colonnes alignees sur la MEME grille que le corps (texte ~820 / colonne ~340 / ecart <=80) — fil+titre+chapo a gauche, image a la une a droite, pour que l'image s'aligne verticalement avec le rail sticky en dessous. */ .mo-art-tete-grille{display:grid;grid-template-columns:minmax(0,820px) minmax(0,340px); gap:2.6rem;align-items:start} .mo-art-une{margin:0} .mo-art-une img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--rayon)} .mo-art-une figcaption{font-size:13px;color:var(--doux);padding-top:.4rem} .mo-art-corps{display:grid;grid-template-columns:minmax(0,820px) minmax(0,340px); gap:2.6rem;padding-top:1.8rem} .mo-art-col{min-width:0;max-width:820px} .mo-bref{border:1px solid var(--filet);border-radius:var(--rayon);padding:1rem 1.1rem; background:var(--surf);margin-bottom:1.6rem} /* 15/09/2026 : mo-bref vit maintenant dans .mo-art-tete (sous le chapo), plus en tête de .mo-art-col — espace au-dessus pour le détacher du chapo. */ .mo-art-tete .mo-bref{margin-top:1.4rem;margin-bottom:0} .mo-bref-titre{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--doux);margin-bottom:.7rem} .mo-bref-liste{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem} .mo-bref-l{min-width:0} .mo-bref-l dt{font-size:11.5px;color:var(--doux);letter-spacing:.05em;margin-bottom:.15rem} .mo-bref-l dd{margin:0;font-family:var(--titre);font-size:14.5px;font-weight:600;overflow-wrap:anywhere} /* le typage du corps : filet court au-dessus des h2, listes a tiret, images pleine colonne */ .mo-texte{font-size:16.5px;line-height:1.72} .mo-texte > * + *{margin-top:1.1rem} .mo-texte h2{font-size:24px;font-weight:600;margin-top:2.2rem;padding-top:.9rem;position:relative; scroll-margin-top:84px} .mo-texte h2::before{content:"";position:absolute;top:0;left:0;width:28px;height:2px;background:var(--encre)} .mo-texte h3{font-size:18px;font-weight:600;margin-top:1.6rem} .mo-texte ul,.mo-texte ol{padding-left:1.15rem} .mo-texte ul{list-style:none} .mo-texte ul li{position:relative;padding-left:.9rem;margin-top:.45rem} .mo-texte ul li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1px;background:var(--accent-txt)} .mo-texte ol{list-style:decimal} .mo-texte ol li{margin-top:.45rem;padding-left:.3rem} .mo-texte ol li::marker{font-family:var(--titre);font-weight:700;color:var(--accent-txt);font-size:14px} .mo-texte blockquote{margin:1.6rem 0;padding:.2rem 0 .2rem 1.1rem;border-left:2px solid var(--accent-txt); font-family:var(--titre);font-size:19px;line-height:1.45;color:var(--encre)} .mo-texte a{color:var(--accent-txt);text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px} .mo-texte img{width:100%;border-radius:var(--rayon);margin-block:1.4rem} .mo-texte figure{margin:1.4rem 0} .mo-texte figure img{margin-block:0} .mo-texte figcaption{font-size:13px;color:var(--doux);padding-top:.4rem} .mo-texte table{width:100%;border-collapse:collapse;font-size:14.5px;margin-block:1.4rem; display:block;overflow-x:auto} .mo-texte th,.mo-texte td{border-bottom:1px solid var(--filet);padding:.6rem .55rem;text-align:left} .mo-texte th{font-family:var(--titre);font-size:12px;letter-spacing:.06em;text-transform:uppercase; color:var(--doux)} .mo-art-etq{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center} .mo-art-etq-t{font-size:12px;color:var(--doux)} .mo-art-pied{margin-top:1.8rem;padding-top:1.2rem;border-top:1px solid var(--filet)} .mo-art-rail{min-width:0} /* 15/09/2026 (retour Mathias — sommaire chevauche la sidebar au défilement) : cette règle datait d'avant CM-0484 (le rail entier est devenu le conteneur sticky, section 14 plus bas) et n'avait jamais été retirée — .mo-somm restait sticky DANS .mo-rail-sticky lui-même sticky, un double sticky imbriqué qui le faisait sortir de son flex et passer par-dessus mo-rail-cta/mo-rail-modules pendant le scroll. Un seul conteneur sticky désormais : .mo-rail-sticky (section 14). */ .mo-somm{border-left:2px solid var(--filet);padding-left:1rem} .mo-somm-titre{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--doux);margin-bottom:.6rem} .mo-somm-liste{counter-reset:s;display:flex;flex-direction:column;gap:.5rem} /* 15/09/2026, finition (retour coordinateur) : li n'était pas flex, donc le ::before (inline) restait seul sur sa ligne et l' (display:block, cf. plus bas) passait dessous. Numéro et titre sur la même ligne, retrait fixe via une largeur figée sur le ::before. */ .mo-somm-liste li{counter-increment:s;font-size:13.5px;line-height:1.4;display:flex;align-items:baseline;gap:.35rem} .mo-somm-liste li::before{content:counter(s) ".";color:var(--doux);font-variant-numeric:tabular-nums;flex:0 0 1.3em} .mo-somm-liste a{color:var(--doux);flex:1 1 auto;min-width:0} .mo-somm-liste a:hover{color:var(--encre)} .mo-bande--meme{padding-top:2.6rem;padding-bottom:0;border-top:1px solid var(--filet);margin-top:2.4rem} /* signature d'auteur (produite par jr_signature) — remise au registre du gabarit */ .sb-signature{display:flex;gap:1rem;align-items:flex-start} .sb-signature img{width:56px;height:56px;border-radius:50%;object-fit:cover} .sb-signature-nom{font-family:var(--titre);font-weight:600;font-size:15px} .sb-signature-bio{font-size:13.5px;color:var(--doux);margin-top:.25rem;line-height:1.5} .sb-date{font-size:12px;color:var(--doux);margin-top:.35rem} .sb-fil-bloc h2{font-family:var(--titre);font-size:12px;letter-spacing:.1em;text-transform:uppercase; color:var(--doux);margin-bottom:.6rem} .sb-fil li{display:flex;gap:.6rem;align-items:baseline;padding:.45rem 0;border-bottom:1px solid var(--filet)} .sb-fil-heure{font-size:12px;color:var(--doux);font-variant-numeric:tabular-nums} .sb-fil a{font-family:var(--titre);font-size:14px;font-weight:600} /* ---------- 9. RUBRIQUE ET PAGINATION ------------------------------------ */ .mo-rub-tete{padding-block:2rem 1.4rem} .mo-rub-compte{font-size:12px;color:var(--accent-txt);margin-top:.6rem; font-variant-numeric:tabular-nums} .mo-pagination{padding-block:1.4rem 2.4rem;display:flex;gap:.4rem;flex-wrap:wrap;font-size:13px} .mo-pagination .page-numbers{padding:.4rem .7rem;border:1px solid var(--filet);border-radius:var(--rayon)} .mo-pagination .current{background:var(--encre);color:var(--fond);border-color:var(--encre)} /* ---------- 10. PIED DE PAGE --------------------------------------------- */ .mo-pied{margin-top:2.4rem;border-top:1px solid var(--filet);background:var(--fond)} .mo-pied-grille{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.2fr;gap:2rem;padding-block:2.2rem} .mo-pied-col{min-width:0} .mo-pied-mono{display:block;width:30px;color:var(--accent);margin-bottom:.6rem} .mo-pied-mono svg{width:100%;height:auto;fill:currentColor} .mo-pied-nom{font-family:var(--titre);font-size:18px;font-weight:700;letter-spacing:-.018em} .mo-pied-bl{font-size:12.5px;color:var(--doux);margin-top:.2rem} .mo-pied-titre{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--doux);margin-bottom:.7rem} .mo-pied-liste li{display:flex;justify-content:space-between;gap:.7rem;padding:.28rem 0;font-size:14px} .mo-pied-liste--der li{flex-direction:column;gap:.1rem} .mo-pied-n{font-size:12px;color:var(--doux);font-variant-numeric:tabular-nums;flex:0 0 auto} .mo-pied input[type="search"],.mo-pied input[type="text"]{font:inherit;font-size:13px;width:100%; padding:.45rem .6rem;border:1px solid var(--filet);border-radius:var(--rayon); background:var(--fond);color:var(--encre)} .mo-ours{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap; padding-block:.9rem 1.1rem;border-top:1px solid var(--filet);font-size:12.5px;color:var(--doux)} /* ---------- 11. BARRE MOBILE BASSE (R-0022) ------------------------------ */ .sb-nav-mobile{display:none;position:fixed;left:0;right:0;bottom:0;z-index:40; background:var(--fond);border-top:1px solid var(--filet); padding-bottom:env(safe-area-inset-bottom)} .sb-nav-mobile-item{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:2px; padding:.45rem .2rem .5rem;font-family:var(--titre);font-size:10px;font-weight:600; letter-spacing:.06em;text-transform:uppercase;color:var(--doux);text-align:center} .sb-nav-mobile-item:hover{text-decoration:none} .sb-nav-mobile-item.is-actif{color:var(--accent-txt)} .sb-nav-ico{display:block;width:20px;height:20px} .sb-nav-ico svg{width:100%;height:100%;stroke:currentColor;fill:none} /* ---------- 12. REPLIS (jamais un debordement horizontal) ---------------- */ @media (min-width: 1081px){ body{padding-left:64px} .mo-rail{display:flex} .sb-nav-mobile{display:none} /* 15/09/2026 : sommaire injecte en tete de contenu (mu-plugin) fait doublon avec celui du rail sticky des que le rail est visible (>=1081px) — un seul suffit, celui de la colonne. */ .mo-texte .sb-sommaire{display:none} } @media (max-width: 1080px){ .mo-maconnerie{columns:3} .mo-maconnerie--rub{columns:3} .mo-marque-mono{display:block} .mo-pieces{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:1.4rem} .mo-metiers{grid-template-columns:repeat(3,minmax(0,1fr))} .mo-grille4{grid-template-columns:repeat(2,minmax(0,1fr))} .mo-art-corps{grid-template-columns:minmax(0,1fr)} .mo-art-col{max-width:100%} .mo-art-tete-grille{grid-template-columns:minmax(0,1fr)} .mo-art-une{margin-top:1.4rem} .mo-somm{position:static;border-left:0;border-top:2px solid var(--filet); padding-left:0;padding-top:.8rem} .mo-pied-grille{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.6rem} } @media (max-width: 760px){ .mo-marque-bl{max-width:150px;white-space:normal} .mo-maconnerie,.mo-maconnerie--rub{columns:2} .mo-mosaique{padding:var(--gout) var(--gout) 1.8rem} .mo-burger{display:block} .mo-quete,.mo-bouton{display:none} .mo-nav{position:absolute;left:0;right:0;top:100%;background:var(--fond); border-bottom:1px solid var(--filet);flex-direction:column;max-height:0;overflow:hidden;padding:0} .mo-nav.is-ouvert{max-height:none;overflow:visible;padding:.5rem 1.2rem 1rem} .mo-nav a{width:100%;padding:.55rem .2rem;border-bottom:1px solid var(--filet)} .mo-tete-in{position:relative;gap:.8rem} .mo-pieces{grid-template-columns:repeat(2,minmax(0,1fr))} .mo-metiers,.mo-grille3,.mo-grille4,.mo-nuit-liste{grid-template-columns:minmax(0,1fr)} .mo-ap{grid-template-columns:minmax(0,1fr)} .mo-ap-pan{padding-right:0} .mo-ap-pan + .mo-ap-pan{border-left:0;border-top:2px solid var(--encre); padding-left:0;padding-top:1.2rem;margin-top:1.2rem} .mo-bref-liste{grid-template-columns:repeat(2,minmax(0,1fr))} .mo-pied-grille{grid-template-columns:minmax(0,1fr)} .sb-nav-mobile{display:flex} body{padding-bottom:64px} } @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important; scroll-behavior:auto!important} } @media print{ .mo-rail,.mo-nav,.mo-quete,.sb-nav-mobile,.mo-somm{display:none!important} body{padding-left:0;padding-bottom:0} } /* garde-fou : un display:grid/flex de classe bat l attribut hidden (vu le 04/09) */ [hidden]{display:none!important} /* P-470 — la 1re carte de l accueil porte grid-column:span 2 en style INLINE. Sur telephone la grille n a plus qu une colonne : le span fabrique une colonne implicite dimensionnee sur le contenu (526px dans un ecran de 390) et pousse la page. !important est indispensable : on annule un style inline. */ @media (max-width:760px){.sb-grille>*{grid-column:auto!important}} /* P-491 — display:contents : le h1 de la marque n existe pas pour la mise en page. */ .sb-marque-h1{display:contents} /* 14/09/2026 — points 28-31 RETOURS-TRANSVERSES : les gabarits generiques (recherche, rubrique) utilisent des classes sb-* qui n'avaient AUCUNE regle CSS dans ce theme (0 occurrence avant ce bloc) — page rendue en texte brut, cartes empilees pleine largeur, titre colle a l'image, pagination brute. Reprend les jetons du theme (pas de couleur/police inventee). */ .sb-enveloppe{width:min(1320px,100% - 2.4rem);margin-inline:auto;min-width:0} .sb-heros{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem; padding-block:2rem 1.4rem;flex-wrap:wrap} .sb-heros-txt{flex:1 1 320px;min-width:0} .sb-compte{font-size:12px;color:var(--accent-txt);font-variant-numeric:tabular-nums; display:block;margin-bottom:.5rem} .sb-heros h1{font-size:clamp(26px,3.6vw,36px);font-weight:700;letter-spacing:-.018em;margin:0} .sb-heros-chapo{font-size:15.5px;color:var(--doux);margin-top:.6rem;max-width:60ch} /* 16/09/2026 — remplace .sb-depliant (bloc dépliant retiré, consigne Mathias) : liste toujours visible des autres rubriques, comble la colonne gauche face au formulaire de droite. */ .sb-heros-autres{margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--filet)} .sb-heros-autres-label{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em; color:var(--doux);margin-bottom:.7rem} .sb-heros-autres ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem} .sb-heros-autres li{display:flex;align-items:baseline;justify-content:space-between;gap:1rem; padding-block:.55rem;border-bottom:1px solid var(--filet)} .sb-heros-autres li:last-child{border-bottom:none} .sb-heros-autres a{font-size:15px;font-weight:600;color:var(--encre,inherit);text-decoration:none} .sb-heros-autres a:hover{color:var(--accent-txt);text-decoration:underline} .sb-heros-autres-n{font-size:12.5px;color:var(--doux);font-variant-numeric:tabular-nums;flex-shrink:0} /* 16/09/2026 — .av-reassurance n'avait AUCUNE règle dans ce thème (liste à puces navigateur brute sur la home) ; posée ici en même temps que sa réutilisation sur la page rubrique. */ .av-reassurance{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:.6rem} .av-reassurance li{display:flex;align-items:flex-start;gap:.6rem;font-size:14.5px;color:var(--doux);line-height:1.4} /* 18/09/2026 — retour Mathias (« coche verte sur fond marron, illisible ») : cause mesurée * dans le navigateur — assets/css/annuaire-landing.css pose AUSSI « .av-reassurance-puce{color: * var(--av-patine)} » (vert sauge #3E7566) et ce fichier s'enqueue APRÈS celui-ci (inc/ * annuaire-cabinets.php), donc gagne la cascade à spécificité égale : le rond restait brun * (--accent-txt, posé ici) mais la coche prenait le vert de l'autre jeton — ratio mesuré 1,86:1. * Même collision entre deux systèmes de jetons (--av-* d'un côté, --* du thème de l'autre), * déjà tracée section 18 (CM-0481) : on y * reprend le même remède, une sélecteur plus spécifique qui gagne quel que soit l'ordre * d'enqueue, plutôt que de dépendre de l'ordre de chargement. Blanc sur --accent-txt = 9,6:1. */ .av-reassurance .av-reassurance-puce{flex-shrink:0;width:18px;height:18px;border-radius:50%;background:var(--accent-txt); color:var(--fond);font-size:11px;line-height:18px;text-align:center;font-weight:700;margin-top:.05rem} .sb-heros-reassurance{margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid var(--filet)} .sb-heros-vignette{flex:0 0 auto;width:220px;aspect-ratio:4/3;overflow:hidden;border-radius:var(--rayon)} .sb-heros-vignette img{width:100%;height:100%;object-fit:cover;display:block} /* 15/09/2026 reprise-type mebelbazar point C : formulaire de rubrique dans l'ancien slot vignette */ .sb-heros-vignette--form{width:340px;max-width:100%;aspect-ratio:auto;overflow:visible;border-radius:0} @media (max-width:780px){.sb-heros-vignette--form{width:100%}} /* 18/09/2026 — le bloc 1080 px imposait aspect-ratio:16/9 au CTA (formulaire coupé à l'e-mail) ; sous 780 px le CTA du bandeau cède la place à celui posé après la liste (RE-0012). */ .av-cta-bas{display:none} @media (max-width:1080px){.sb-heros .sb-heros-vignette--form{aspect-ratio:auto;overflow:visible}} @media (max-width:780px){.sb-heros .sb-heros-vignette--form{display:none}.av-cta-bas{display:block;margin-top:2rem}} .sb-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem var(--gout);margin-top:1.6rem} .sb-carte{min-width:0;display:flex;flex-direction:column} .sb-carte>a:first-child{display:block;overflow:hidden;border-radius:var(--rayon);aspect-ratio:4/3;background:var(--surf)} .sb-carte>a:first-child img{width:100%;height:100%;object-fit:cover;display:block} .sb-carte h3{font-size:16.5px;font-weight:600;line-height:1.3;margin:.7rem 0 0} .sb-carte h3 a{color:var(--encre);text-decoration:none} .sb-carte h3 a:hover{text-decoration:underline} .sb-chapo{font-size:13.5px;line-height:1.5;color:var(--doux);margin-top:.5rem} .sb-date{font-size:11.5px;color:var(--doux);margin-top:.6rem;font-variant-numeric:tabular-nums} .sb-pagination{margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid var(--filet)} .sb-pagination ul{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0} .sb-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center; min-width:2.1rem;padding:.4rem .7rem;border:1px solid var(--filet);border-radius:var(--rayon); font-size:13px;color:var(--encre)} .sb-pagination .page-numbers.current{background:var(--encre);color:var(--fond);border-color:var(--encre)} .sb-pagination a.page-numbers:hover{border-color:var(--accent-txt);text-decoration:none} .sb-form{margin-top:.8rem;display:flex;gap:.5rem;max-width:420px} .sb-form input[type="search"]{flex:1 1 auto;font:inherit;font-size:14px;padding:.5rem .7rem; border:1px solid var(--filet);border-radius:var(--rayon)} .sb-form button{font:inherit;font-size:13.5px;font-weight:600;padding:.5rem 1rem; border-radius:var(--rayon);border:1px solid var(--encre);background:var(--encre);color:var(--fond)} /* page « Les dossiers » — index editorial complet, sans pagination */ .sb-dossiers-groupe{margin-top:2.2rem} .sb-dossiers-groupe:first-child{margin-top:1.6rem} .sb-dossiers-titre{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--doux);padding-bottom:.5rem;margin-bottom:.6rem;border-bottom:1px solid var(--filet)} .sb-dossiers-liste{list-style:none;margin:0;padding:0} .sb-dossiers-liste li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline; padding:.55rem 0;border-bottom:1px solid var(--filet)} .sb-dossiers-liste a{color:var(--encre);text-decoration:none;font-size:15px} .sb-dossiers-liste a:hover{text-decoration:underline;color:var(--accent-txt)} .sb-dossiers-date{font-size:12px;color:var(--doux);white-space:nowrap;flex:0 0 auto; font-variant-numeric:tabular-nums} @media (max-width:1080px){ .sb-grille{grid-template-columns:repeat(2,minmax(0,1fr))} .sb-heros{flex-direction:column;align-items:flex-start} .sb-heros-vignette{width:100%;aspect-ratio:16/9} } @media (max-width:760px){ .sb-grille{grid-template-columns:minmax(0,1fr)} .sb-dossiers-liste li{flex-direction:column;gap:.2rem} } /* ---------- 13. PAGES SIMPLES (À propos, Contact, Mentions, Confidentialité) — 14/09/2026 --- Ces gabarits (page.php générique + page-contact.php) posent les classes sb-article/sb-corps depuis le socle, jamais reprises ici avant ce jour : texte brut plein cadre, titres nus (CM-0476, CM-0478). Même largeur de lecture et même typage que .mo-texte (l'article). */ .sb-article{width:min(880px,100% - 2.4rem);margin-inline:auto;padding-block:2.2rem 3.2rem} .sb-article-tete h1{font-size:clamp(26px,3.6vw,36px);font-weight:700;letter-spacing:-.018em; margin:0 0 .3rem} .sb-corps{font-size:16.5px;line-height:1.72} .sb-corps > * + *{margin-top:1.1rem} .sb-corps h2{font-size:22px;font-weight:600;margin-top:2rem;padding-top:.8rem;position:relative} .sb-corps h2::before{content:"";position:absolute;top:0;left:0;width:28px;height:2px;background:var(--encre)} .sb-corps h3{font-size:17px;font-weight:600;margin-top:1.4rem} .sb-corps ul,.sb-corps ol{padding-left:1.15rem} .sb-corps ul{list-style:none} .sb-corps ul li{position:relative;padding-left:.9rem;margin-top:.5rem} .sb-corps ul li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1px;background:var(--accent-txt)} .sb-corps ol{list-style:decimal} .sb-corps ol li{margin-top:.5rem} .sb-corps a{color:var(--accent-txt);text-decoration:underline;text-underline-offset:3px} .sb-corps table{width:100%;border-collapse:collapse;font-size:14.5px;margin-block:1.2rem} .sb-corps th,.sb-corps td{border-bottom:1px solid var(--filet);padding:.55rem .5rem;text-align:left} .sb-corps > section{margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--filet)} .sb-corps > section h2{margin-top:0} /* formulaire « Écrire à la rédaction » (page-contact.php) — classe renommée sb-form-msg, elle collisionnait avec .sb-form du moteur de recherche (display:flex en ligne) : c'est ce qui faisait tomber libellés + champs sur une seule ligne brute (CM-0478). */ .sb-form-msg{margin-top:1rem;max-width:32rem} .sb-form-msg p{margin-top:1rem} .sb-form-msg label{display:block;font-family:var(--titre);font-weight:600;font-size:14px;margin-bottom:.3rem} .sb-form-msg input[type="text"],.sb-form-msg input[type="email"],.sb-form-msg textarea{ width:100%;max-width:none;font:inherit;font-size:15px;padding:.6rem .75rem; border:1px solid var(--filet);border-radius:var(--rayon);background:var(--fond);color:var(--encre)} .sb-form-msg textarea{min-height:8rem;resize:vertical} .sb-form-msg button{font-family:var(--titre);font-size:14px;font-weight:600;padding:.65rem 1.2rem; border-radius:var(--rayon);border:1px solid var(--encre);background:var(--encre);color:var(--fond);cursor:pointer} .sb-form-msg button:hover{opacity:.85} /* ---------- 14. RAIL D'ARTICLE — sommaire + capture de lead + modules, EN UN SEUL bloc sticky (CM-0484) — l'ancien .mo-somm sticky isolé laissait la colonne à moitié vide. ---- */ .mo-rail-sticky{position:sticky;top:84px;z-index:1;display:flex;flex-direction:column;gap:1.3rem} .mo-somm{border-left:2px solid var(--filet);padding-left:1rem} .mo-somm-liste a{display:block} .mo-somm-liste a.is-actif{color:var(--encre);font-weight:600} .mo-rail-cta{border:1px solid var(--filet);border-radius:var(--rayon);padding:1.1rem 1.2rem;background:var(--surf)} .mo-rail-cta-titre{font-family:var(--titre);font-weight:700;font-size:15px;margin:0 0 .35rem;line-height:1.3} .mo-rail-cta-txt{font-size:13px;color:var(--doux);margin:0 0 .9rem;line-height:1.45} .mo-rail-modules{display:flex;flex-direction:column;gap:.5rem} .mo-rail-module{font-family:var(--titre);font-size:13.5px;font-weight:600;color:var(--accent-txt); padding:.65rem .75rem;border:1px solid var(--filet);border-radius:var(--rayon);display:block} .mo-rail-module:hover{background:var(--surf);text-decoration:none} /* ---------- 14b. MODULE ANNUAIRE PAR SECTEUR DANS LA COLONNE DROITE D'ARTICLE (audit 14/09 23h, demande coordinateur) — reutilise av_secteurs_disponibles() deja ecrite pour le filtre annuaire et l'accueil, jamais de donnee inventee. ------------------------------------------------- */ .mo-rail-secteurs-bloc{border:1px solid var(--filet);border-radius:var(--rayon);padding:1rem 1.1rem;background:var(--surf)} .mo-rail-secteurs-titre{font-family:var(--titre);font-weight:700;font-size:12px;letter-spacing:.06em; text-transform:uppercase;color:var(--accent-txt);margin:0 0 .7rem} .mo-rail-secteurs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem} .mo-rail-secteurs a{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem; font-size:13.5px;color:var(--encre);text-decoration:none;padding:.45rem 0;border-bottom:1px solid var(--filet)} .mo-rail-secteurs li:last-child a{border-bottom:none} .mo-rail-secteurs a:hover{color:var(--accent-txt)} .mo-rail-secteurs span{color:var(--doux);font-size:12px} /* ---------- 15. BARRE DE PROGRESSION DE LECTURE (CM-0484) ------------------------------- */ .mo-progres{position:fixed;left:0;right:0;top:0;height:3px;background:transparent;z-index:31;pointer-events:none} .mo-progres-barre{height:100%;width:0%;background:var(--accent-txt);transition:width .08s linear} .mo-progres-min{position:fixed;right:.8rem;top:.7rem;z-index:31;font-family:var(--titre);font-size:11px; font-weight:600;letter-spacing:.02em;background:var(--encre);color:var(--fond); padding:.3rem .6rem;border-radius:99px;opacity:0;transition:opacity .2s;pointer-events:none} .mo-progres-min.is-visible{opacity:.88} @media (max-width:1080px){ .mo-rail-sticky{position:static} .mo-progres-min{display:none} } /* ---------- 16. IMAGE À LA UNE D'ARTICLE — hauteur contrainte (CM-0480, récidive CM-0407) -- 15/09/2026 : depuis la tête en 2 colonnes (.mo-art-tete-grille, section 8), .mo-art-une vit DANS la colonne de droite (piste 340px), plus en pleine largeur d'enveloppe — l'ancienne règle (max-width 920 + hauteur fixe 380px) redonnait alors une image écrasée/déformée dans une colonne étroite ; l'aspect-ratio 4/3 de la section 8 fait foi, on ne la recouvre plus ici. */ @media (max-width:1080px){ .mo-art-une img{aspect-ratio:16/9} } /* ---------- 17. CALLOUT « À RETENIR » (CM-0481) — habille une liste REELLE de l'article, aucun texte ajoute : voir mu-plugin sb-blocs-article-alphavilla.php. ------------------- */ .mo-callout{margin:1.8rem 0;padding:1.1rem 1.3rem;border-radius:var(--rayon); background:var(--surf);border-left:3px solid var(--accent-txt)} .mo-callout-titre{font-family:var(--titre);font-size:12px;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--accent-txt);margin:0 0 .6rem} .mo-callout ul{margin:0} /* ---------- 18. CTA DE LECTURE, EN PLEIN CORPS D'ARTICLE (CM-0481) ---------------------- 15/09/2026 (retour Mathias — palette refusée) : fond --nuit (noir) + .av-btn venu de assets/css/annuaire-landing.css (vert sauge #3E7566) dont le TEXTE était en plus recouvert par .mo-texte a (color:--accent-txt, brun, souligné) — cette règle a 2 classes de spécificité donc gagne sur le simple .av-btn d'un autre fichier : bouton brun souligné sur vert, illisible. Racine : deux systèmes de jetons différents (--av-* de la landing annuaire, --* du thème) qui se rencontrent ici sans jamais avoir été prévus l'un pour l'autre. Repris avec les SEULS jetons du thème, cohérents avec .mo-rail-cta (même carte, même famille visuelle). */ .mo-art-cta{margin:2rem 0;padding:1.4rem 1.5rem;border-radius:var(--rayon); background:var(--surf);border:1px solid var(--filet);color:var(--encre); display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap} .mo-art-cta-txt{min-width:0} .mo-art-cta-titre{font-family:var(--titre);font-weight:700;font-size:17px;margin:0 0 .25rem;color:var(--encre)} .mo-art-cta-sous{font-size:13.5px;color:var(--doux);margin:0} .mo-art-cta .av-btn{flex:0 0 auto;background:var(--encre) !important;color:var(--fond) !important; border-color:var(--encre) !important;text-decoration:none !important} .mo-art-cta .av-btn:hover,.mo-art-cta .av-btn:focus-visible{background:var(--accent-txt) !important; border-color:var(--accent-txt) !important;color:var(--fond) !important;text-decoration:none !important} /* ---------- 17b. CALLOUT « À retenir » du pipeline enrichissement (CM-0481, audit 14/09 23h) — reutilise la meme habillage que .mo-callout pour