/* LOT 3 — pages annexes (rbz-v9-traeger, DA-V9-TRAEGER.md). Jetons de style.css UNIQUEMENT (var(--rbz-*)), aucune couleur hors palette. Composants ajoutés ici (aucun ne vit dans le socle) : Repère de lecture ....... .mtc-meta-article / __auteur / __item Avatar rond .............. .mtc-avatar-rond(--grand|--logo) Duo corps+aside sticky ... .mtc-duo / __aside Sommaire collant ......... .mtc-sommaire / __titre Bandeau photo de corps ... .mtc-bandeau-corps Signature d'auteur ....... .mtc-auteur / __nom / __role Frise deux jalons ........ .mtc-frise / __item / __annee / __texte Mosaïque + visionneuse ... .mtc-mosaique / __item / __legende, .mtc-visionneuse (CSS :target) Tuiles d'aide (support) .. .mtc-aide-grille / .mtc-aide-carte Carte coordonnées ........ .mtc-coordonnees Carte identité légale .... .mtc-carte-identite */ /* ============================================================ 1. REPÈRE DE LECTURE — sous le hero d'un guide/article (byline). ============================================================ */ .mtc-meta-article{ display:flex; flex-wrap:wrap; align-items:center; gap:20px 28px; padding-block:20px; border-bottom:1px solid var(--rbz-filet); } .mtc-meta-article__auteur{ display:flex; align-items:center; gap:10px; } .mtc-meta-article__auteur strong{ font-family:var(--rbz-police-affiche); font-weight:600; font-size:15px; text-transform:uppercase; letter-spacing:.01em; } .mtc-meta-article__item{ font-size:14px; color:var(--rbz-encre-2); } .mtc-avatar-rond{ width:40px; height:40px; border-radius:50%; background:var(--rbz-beige); display:flex; align-items:center; justify-content:center; flex:0 0 auto; overflow:hidden; } .mtc-avatar-rond img{ width:58%; height:58%; object-fit:contain; } .mtc-avatar-rond--grand{ width:56px; height:56px; } /* CONSTAT-V9 B5 (ANCIEN) : ce modificateur cadrait une photo plein cadre dans le rond. Retour Mathias 27/09, point 4 : la signature d'auteur ne montre plus jamais une photo (ni Simon ni personne) — remplacée par le logo Montaclair sur fond blanc (.mtc-avatar-rond--logo ci-dessous). Le modificateur --photo reste défini pour ne rien casser d'éventuel appelant futur, mais n'est plus utilisé nulle part dans ce thème. */ .mtc-avatar-rond--photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; } /* Retour Mathias 27/09, point 4 : signature « Ramonage Montaclair » — logo dans un rond à fond BLANC (jamais la photo de Simon), quelle que soit la couleur de fond de la section qui porte l'avatar. */ .mtc-avatar-rond--logo{ background:#FFFFFF; border:1px solid var(--rbz-filet); } .mtc-avatar-rond--logo img{ width:60%; height:60%; object-fit:contain; } /* ============================================================ 2. DUO CORPS + ASIDE COLLANTE — page-guide.php / single.php. ============================================================ */ .mtc-duo{ display:grid; grid-template-columns:1fr; gap:40px; align-items:start; } @media (min-width:960px){ .mtc-duo{ grid-template-columns:1fr 320px; gap:56px; } } .mtc-duo__aside{ display:flex; flex-direction:column; gap:24px; } @media (min-width:960px){ .mtc-duo__aside{ position:sticky; top:112px; } } .mtc-sommaire{ background:var(--rbz-beige); border-radius:var(--rbz-rayon); padding:22px 20px; } .mtc-sommaire__titre{ font-family:var(--rbz-police-affiche); font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:.02em; color:var(--rbz-encre-2); margin:0; } .mtc-sommaire ul{ display:flex; flex-direction:column; gap:10px; margin-top:14px; } .mtc-sommaire a{ display:block; font-size:14px; color:var(--rbz-encre); border-left:2px solid var(--rbz-filet); padding-left:12px; line-height:1.3; } .mtc-sommaire a:hover, .mtc-sommaire a:focus-visible{ color:var(--rbz-rouge); border-color:var(--rbz-rouge); } /* Bandeau photo inséré dans le corps, tous les 2 H2 (P-206 : images DANS le corps). */ .mtc-bandeau-corps{ margin:2em 0; } .mtc-bandeau-corps img{ width:100%; aspect-ratio:16/7; object-fit:cover; border-radius:var(--rbz-rayon); } .mtc-bandeau-corps figcaption{ font-size:13px; color:var(--rbz-encre-2); margin-top:8px; } /* Signature auteur, fin d'article. */ .mtc-auteur{ display:flex; align-items:center; gap:16px; margin-top:48px; padding-top:28px; border-top:1px solid var(--rbz-filet); } .mtc-auteur__nom{ display:block; font-family:var(--rbz-police-affiche); font-weight:600; font-size:15px; text-transform:uppercase; } .mtc-auteur__nom a{ color:var(--rbz-rouge); text-decoration:underline; text-underline-offset:2px; } .mtc-auteur__role{ display:block; font-size:14px; color:var(--rbz-encre-2); margin-top:2px; } /* ============================================================ 3. FRISE — deux jalons honnêtes (page-qui-sommes-nous.php). ============================================================ */ .mtc-frise{ display:flex; flex-direction:column; border-left:2px solid var(--rbz-filet); margin-left:6px; } .mtc-frise__item{ position:relative; padding:0 0 36px 30px; } .mtc-frise__item:last-child{ padding-bottom:0; } .mtc-frise__item::before{ content:''; position:absolute; left:-7px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--rbz-rouge); border:3px solid var(--rbz-blanc); } .mtc-frise__annee{ display:block; font-family:var(--rbz-police-affiche); font-weight:700; font-size:22px; text-transform:uppercase; color:var(--rbz-encre); margin-bottom:6px; } .mtc-frise__texte{ color:var(--rbz-encre-2); max-width:56ch; } /* ============================================================ 4. MOSAÏQUE DE CHANTIERS + VISIONNEUSE (CSS pur, sans script). ============================================================ */ .mtc-mosaique{ display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; } @media (min-width:640px){ .mtc-mosaique{ grid-template-columns:repeat(3, 1fr); } } @media (min-width:960px){ .mtc-mosaique{ grid-template-columns:repeat(4, 1fr); } } .mtc-mosaique__item{ position:relative; display:block; aspect-ratio:4/3; overflow:hidden; background:var(--rbz-beige); } .mtc-mosaique__item img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; } .mtc-mosaique__item:hover img, .mtc-mosaique__item:focus-visible img{ transform:scale(1.05); } .mtc-mosaique__item::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.65) 100%); } .mtc-mosaique__legende{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:10px 12px; color:#FFFFFF; font-size:13px; font-weight:600; } .mtc-visionneuse{ display:none; position:fixed; inset:0; z-index:300; background:rgba(10,10,10,.94); align-items:center; justify-content:center; padding:32px 20px; } .mtc-visionneuse:target{ display:flex; } .mtc-visionneuse__fond{ position:absolute; inset:0; z-index:0; } .mtc-visionneuse figure{ position:relative; z-index:1; margin:0; max-width:900px; width:100%; text-align:center; } .mtc-visionneuse img{ width:100%; max-height:74vh; object-fit:contain; border-radius:var(--rbz-rayon); } .mtc-visionneuse figcaption{ margin-top:14px; color:var(--rbz-neige-2); font-size:14px; } .mtc-visionneuse__fermer{ position:absolute; top:20px; right:20px; z-index:2; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#FFFFFF; background:rgba(255,255,255,.12); font-family:var(--rbz-police-affiche); font-size:22px; line-height:1; } .mtc-visionneuse__fermer:hover, .mtc-visionneuse__fermer:focus-visible{ background:var(--rbz-rouge); } /* ============================================================ 5. TUILES D'AIDE — page-contact.php (Appeler / Rappel / Diagnostic / Zone). ============================================================ */ .mtc-aide-grille{ display:grid; grid-template-columns:1fr; gap:16px; } @media (min-width:640px){ .mtc-aide-grille{ grid-template-columns:repeat(2, 1fr); } } @media (min-width:960px){ .mtc-aide-grille{ grid-template-columns:repeat(4, 1fr); } } .mtc-aide-carte{ display:flex; flex-direction:column; gap:10px; background:var(--rbz-beige); border-radius:var(--rbz-rayon); padding:20px 18px; } /* retour Mathias 27/09, point 6 : icônes du jeu rbz_icone(), plus de trait fin statique. */ .mtc-aide-carte h3{ font-size:19px; margin:0; } .mtc-aide-carte p{ font-size:14px; color:var(--rbz-encre-2); margin:0; flex:1; } .mtc-aide-carte .mtc-lien-fleche, .mtc-aide-carte .rbz-lien-tel{ margin-top:2px; } /* Carte coordonnées (contact). */ .mtc-coordonnees{ display:flex; flex-direction:column; gap:16px; background:var(--rbz-beige); border-radius:var(--rbz-rayon); padding:26px 24px; } .mtc-coordonnees p{ margin:0; font-size:15px; color:var(--rbz-encre-2); } .mtc-coordonnees a{ font-weight:600; color:var(--rbz-encre); } .mtc-coordonnees a:hover{ color:var(--rbz-rouge); } /* ============================================================ 6. CARTE D'IDENTITÉ LÉGALE — mentions-legales.php. ============================================================ */ .mtc-carte-identite{ background:var(--rbz-beige); border-radius:var(--rbz-rayon); padding:24px 28px; margin:24px 0; } .mtc-carte-identite dl{ display:grid; grid-template-columns:170px 1fr; gap:10px 16px; margin:0; } .mtc-carte-identite dt{ color:var(--rbz-encre-2); font-size:14px; } .mtc-carte-identite dd{ margin:0; font-weight:600; font-size:15px; color:var(--rbz-encre); } @media (max-width:479px){ .mtc-carte-identite dl{ grid-template-columns:1fr; } .mtc-carte-identite dt{ margin-top:8px; } } /* ============================================================ CORRECTIONS JUGEMENT-V9 (26/09/2026) — uniquement les pages LOT 3 (Contact, L'entreprise, Diagnostic, Guide/single, Mentions légales, Politique de confidentialité, 404). Les défauts transversaux T1-T6 (bloc « Être rappelé » du bas, H2 d'une couleur, formulaire compact, hauteur des héros) sont corrigés par le socle dans style.css/ bloc-contact.php/hero.php — rien ici ne les redéfinit. ============================================================ */ /* --- Contact 🔴 : photo qui remplit la colonne face au formulaire. --- */ .mtc-coordonnees__ligne{ display:flex; align-items:center; gap:12px; } .mtc-contact-photo{ display:block; width:100%; min-height:220px; max-height:360px; object-fit:cover; border-radius:var(--rbz-rayon); margin-top:24px; } @media (min-width:900px){ .mtc-bande-blanche__texte{ display:flex; flex-direction:column; } .mtc-contact-photo{ flex:1 1 auto; margin-top:24px; } } /* Contact 🟠 : héros clair (photo 28) — voile renforcé en