/* ========================================================================== Charte du 20/10/2026, d'après l'appel avec Nico et le site luvabat.fr : fond blanc (plus de crème jaunâtre), titres en Plus Jakarta Sans, texte en Inter, en-tête blanc détaché de la page, pied de page sombre, coins presque droits. Même style que la nouvelle page d'accueil (classe tb-accueil). ========================================================================== */ /* Polices hébergées sur le site (04/11/2026) : Inter et Plus Jakarta Sans, licence libre SIL OFL, fichiers de Google Fonts dans /polices/. Plus de connexion à Google à chaque visite : l'affichage est plus rapide, et l'adresse IP des visiteurs ne part plus chez un tiers (RGPD). */ @font-face {font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/polices/inter-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face {font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/polices/inter-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face {font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500 800; font-display: swap; src: url(/polices/plus-jakarta-sans-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face {font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500 800; font-display: swap; src: url(/polices/plus-jakarta-sans-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;} :root, body { --wp--preset--font-family--timber-titres: "Plus Jakarta Sans", system-ui, sans-serif; --wp--preset--font-family--timber-texte: Inter, system-ui, sans-serif; --wp--preset--color--creme: #F6F5F3; --wp--preset--color--anthracite: #15120E; --wp--preset--color--gris-chaud: #6E685F; --tb-encre: #15120E; --tb-texte: #3A3631; --tb-doux: #6E685F; --tb-trait: #E7E4DF; --tb-gris: #F6F5F3; --tb-action: #A85F1C; --tb-action-survol: #8A5418; --tb-clair: #F0B27A; } body { background-color: #FFFFFF !important; color: var(--tb-texte) !important; font-family: Inter, system-ui, sans-serif !important; font-weight: 400 !important; letter-spacing: 0 !important; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .wp-block-heading, .wp-block-site-title, .wp-block-post-title { font-family: "Plus Jakarta Sans", system-ui, sans-serif !important; color: var(--tb-encre); letter-spacing: -0.02em; } h1.wp-block-heading, h1.wp-block-post-title { font-weight: 800 !important; } h2.wp-block-heading { font-weight: 800 !important; } a { color: inherit; } .entry-content a:not(.wp-block-button__link), .wp-block-post-content a:not(.wp-block-button__link) { color: var(--tb-action); } /* En-tête : blanc, collé en haut, séparé de la page par un filet. */ header.wp-block-template-part { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); backdrop-filter: blur(8px); border-bottom: 1px solid var(--tb-trait); } /* Menu téléphone (02/11/2026) : le flou de l'en-tête enfermait le menu ouvert dans une bande de 59 px, « Se connecter » restait invisible. Pas de flou menu ouvert. */ header.wp-block-template-part:has(.is-menu-open) { backdrop-filter: none; -webkit-backdrop-filter: none; } header.wp-block-template-part > .wp-block-group { padding-top: .75rem !important; padding-bottom: .75rem !important; } header .wp-block-site-title, header .wp-block-site-title a { font-weight: 800 !important; letter-spacing: .04em; text-transform: uppercase; color: var(--tb-encre) !important; text-decoration: none; } /* « Chantier de confiance » (12/11/2026) : trois fois plus long que « Timber ». Sur téléphone, il passait sur trois lignes ; il tient sur deux, plus petit, à côté du bouton « Appeler ». */ @media (max-width: 600px) { header .wp-block-site-title { font-size: 15px !important; line-height: 1.1 !important; max-width: 10.5em; } header .wp-block-site-title a { letter-spacing: .02em; } } header .wp-block-navigation a { font-weight: 500; text-decoration: none; color: var(--tb-texte); } header .wp-block-navigation a:hover { color: var(--tb-action); } header .wp-block-navigation a[href*="projet/nouveau"] { background: var(--tb-encre); color: #fff !important; padding: .6rem 1rem; border-radius: 6px; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; } header .wp-block-navigation a[href*="projet/nouveau"]:hover { background: #000; } .wp-block-navigation__responsive-container.is-menu-open { background: #fff !important; } /* Pied de page sombre. */ footer.wp-block-template-part { background: var(--tb-encre); color: #CFC8BE; margin-top: 0 !important; } footer.wp-block-template-part a { color: #FFFFFF; text-decoration: none; } footer.wp-block-template-part a:hover { color: var(--tb-clair); } footer.wp-block-template-part h3, footer .wp-block-site-title, footer .wp-block-site-title a { color: #FFFFFF !important; } footer.wp-block-template-part .wp-block-separator { border-color: rgba(255,255,255,.14) !important; background-color: rgba(255,255,255,.14) !important; } /* Boutons : coins presque droits, police des titres. */ .wp-block-button__link, .wp-element-button { border-radius: 6px !important; font-family: "Plus Jakarta Sans", sans-serif !important; font-weight: 700 !important; padding: .95rem 1.5rem !important; } /* Images : coins presque droits, comme les cartes de la page d'accueil. */ .wp-block-image img, .wp-block-cover { border-radius: 6px; } /* Charte graphique de Timber, appliquee au site WordPress. * * Les valeurs viennent de 1-a-deployer/styles/tokens.css, qui fait foi : * action #A85F1C 4,2:1 sur creme — le minimum pour un element * d'interface etant 3:1 * action survol #8A5418 * trait fort #9C8C6B 3,3:1 sur blanc — champs, boutons, cartes * trait courant #C2B599 2,0:1 sur blanc — separateurs et filets * * Feuille statique et non code PHP : l'hebergeur garde en memoire la version * compilee d'un fichier PHP et continue de servir l'ancienne malgre l'envoi de * la nouvelle — verifie deux fois le 14/10/2026. Les fichiers statiques, eux, * se mettent a jour sans faute. Toute retouche de charte se fait donc ici. */ .wp-block-button__link, .wp-element-button { background-color: #A85F1C !important; color: #FFFFFF !important; border-color: #A85F1C !important; } .wp-block-button__link:hover, .wp-element-button:hover { background-color: #8A5418 !important; color: #FFFFFF !important; } /* Le bouton secondaire reste sur fond clair, mais gagne un contour qui se voit : il etait jusqu'ici presque invisible. */ .wp-block-button.is-style-outline .wp-block-button__link { background-color: transparent !important; color: #24201A !important; border: 1.5px solid #9C8C6B !important; } /* Les pages publiees portent leur couleur de bordure dans leur propre balisage, heritee de la premiere charte : un style en ligne, que rien d'exterieur ne peut couvrir sans insister. Les generateurs ont ete corriges pour la suite ; cette regle rattrape les pages deja en ligne sans les reecrire une a une. */ [style*="E3DCC9" i] { border-color: var(--tb-trait) !important; } /* Un encadré coloré a une bordure, donc il lui faut une marge intérieure et des coins arrondis comme les cartes de l'application. Un encadré qui porte déjà ses propres marges dans son balisage les garde (style en ligne). Les bandeaux pleine largeur ne sont pas des cartes : pas de bordure. */ .wp-block-group.has-background:not(.alignfull), .wp-block-column.has-background { border: 1px solid var(--tb-trait); border-radius: 6px; padding: 1.25rem 1.5rem; } .wp-block-separator, hr.wp-block-separator { border-color: var(--tb-trait) !important; background-color: var(--tb-trait) !important; } /* Bloc « Pourquoi Timber » de l'accueil (racine/timber-pourquoi.html). */ .timber-comparatif { margin: 1.5rem 0 2rem; border: 1px solid #9C8C6B; border-radius: 12px; overflow: hidden; background: #fff; } .timber-comparatif__ligne { display: grid; grid-template-columns: 1fr 1.4fr 1.1fr; gap: 1rem; padding: .9rem 1.2rem; border-top: 1px solid #C2B599; font-size: .95rem; line-height: 1.45; } .timber-comparatif__ligne:first-child { border-top: 0; } .timber-comparatif__ligne > span:first-child { font-weight: 700; color: #24201A; } .timber-comparatif__ligne > span:nth-child(2) { color: #24201A; } .timber-comparatif__ligne > span:nth-child(2)::before { content: "✓ "; color: #3A7351; font-weight: 700; } .timber-comparatif__ligne > span:nth-child(3) { color: #6B6459; } .timber-comparatif__entete { background: #F3EEE1; font-family: Montserrat, sans-serif; font-weight: 700; color: #24201A; } .timber-comparatif__entete > span:nth-child(2)::before { content: none; } .timber-comparatif__entete > span:nth-child(3) { color: #6B6459; } .timber-comparatif__action { margin: 0; padding: 1.1rem 1.2rem; border-top: 1px solid #C2B599; text-align: center; } @media (max-width: 640px) { .timber-comparatif__ligne { grid-template-columns: 1fr; gap: .25rem; } .timber-comparatif__entete { display: none; } .timber-comparatif__ligne > span:nth-child(3)::before { content: "Sans Timber : "; font-weight: 600; } } /* Bandeau cookies du site (mu-plugins/timber-consentement.php) : sur téléphone, une ligne de texte et les deux choix côte à côte, de même taille (CNIL), pour ne pas cacher la page. Réglé ici plutôt que dans le PHP, que l'hébergeur met en cache. */ @media (max-width: 600px) { .timber-consent { padding: 0.6rem 1rem !important; } .timber-consent__in { flex-wrap: nowrap !important; gap: 0.75rem !important; align-items: center !important; } .timber-consent__t { flex: 1 1 auto !important; } .timber-consent__t b { display: none !important; } .timber-consent__t p { font-size: 0.75rem !important; line-height: 1.35 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .timber-consent__b { width: auto !important; flex-wrap: nowrap !important; gap: 0.4rem !important; } .timber-consent button { flex: 0 0 auto !important; padding: 0.55rem 0.7rem !important; font-size: 0.8rem !important; } .timber-consent button[data-choix="essentiel"]::before { content: "Refuser"; } .timber-consent button[data-choix="tout"]::before { content: "Accepter"; } .timber-consent button[data-choix] { font-size: 0 !important; } .timber-consent button[data-choix]::before { font-size: 0.8rem; } } /* ========================================================================== Page d'accueil (contenu de la page 104, classe tb-accueil). Généré depuis maquette-accueil/index.html : modifier la maquette, puis régénérer. ========================================================================== */ .tb-accueil {--encre: #15120E; --texte: #3A3631; --doux: #6E685F; --trait: #E7E4DF; --gris: #F6F5F3; --blanc: #FFFFFF; --caramel: #C26A1F; --caramel-fonce: #9E5413; --vert: #2F7D4F; --largeur: 1200px; --titre: "Plus Jakarta Sans", system-ui, sans-serif; font: 400 17px/1.6 Inter, system-ui, sans-serif; color: var(--texte);} .tb-accueil h1, .tb-accueil h2, .tb-accueil h3 {font-family: var(--titre); color: var(--encre); margin: 0; letter-spacing: -0.02em;} .tb-accueil .conteneur {max-width: var(--largeur); margin: 0 auto; padding: 0 24px;} .tb-accueil .surtitre {font: 700 13px/1 var(--titre); letter-spacing: .14em; text-transform: uppercase; color: var(--caramel); margin: 0 0 16px;} /* Contraste (Lighthouse, 29/10) : le caramel faisait 3,9:1 sur fond clair ; plus foncé, il passe 4,5:1. Fonds sombres inchangés. */ .tb-accueil .surtitre {color: var(--caramel-fonce);} .tb-accueil .sombre .surtitre, .tb-accueil .artisans__texte .surtitre {color: #F0B27A;} .tb-accueil .bouton {display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border-radius: 6px; background: var(--caramel); color: #fff; font: 700 16px/1 var(--titre); text-decoration: none; transition: background .2s, transform .2s;} .tb-accueil .bouton:hover {background: var(--caramel-fonce); transform: translateY(-1px);} .tb-accueil .bouton--encre {background: var(--encre);} .tb-accueil .bouton--encre:hover {background: #000;} .tb-accueil .bouton--ligne {background: transparent; color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--encre);} .tb-accueil .bouton--ligne:hover {background: var(--encre); color: #fff;} .tb-accueil .fleche {transition: transform .2s;} .tb-accueil .ouverture {position: relative; overflow: hidden; background: var(--encre);} .tb-accueil .ouverture__fond {position: absolute; inset: -20px; background: url(/photos/artisans-chantier-960.jpg) center/cover; filter: blur(3px) saturate(.9); transform: scale(1.04);} .tb-accueil .ouverture::after {content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,12,9,.88) 0%, rgba(14,12,9,.72) 48%, rgba(14,12,9,.35) 100%);} .tb-accueil .ouverture .conteneur {position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding-top: 88px; padding-bottom: 88px;} .tb-accueil .ouverture .surtitre {color: #F0B27A;} .tb-accueil .ouverture h1 {color: #fff; font-size: clamp(38px, 5vw, 60px); line-height: 1.05; font-weight: 800;} .tb-accueil .ouverture h1 span {color: #F0B27A;} .tb-accueil .ouverture p.chapo {color: #E8E3DC; font-size: 19px; max-width: 520px; margin: 22px 0 30px;} .tb-accueil .garanties {list-style: none; padding: 0; margin: 0; display: grid; gap: 12px;} .tb-accueil .garanties li {display: flex; gap: 12px; align-items: center; color: #fff; font-weight: 500;} .tb-accueil .garanties svg {width: 22px; height: 22px; flex: none; color: #F0B27A;} .tb-accueil .etape1 {background: #fff; border-radius: 10px; padding: 32px; box-shadow: 0 30px 80px rgba(0,0,0,.35);} .tb-accueil .etape1__haut {display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px;} .tb-accueil .etape1__haut small {color: var(--doux); font-size: 13px; font-weight: 500;} .tb-accueil .etape1 h2 {font-size: 24px;} .tb-accueil .progression {height: 4px; background: var(--trait); border-radius: 4px; margin: 14px 0 22px; overflow: hidden;} .tb-accueil .progression span {display: block; width: 20%; height: 100%; background: var(--caramel);} .tb-accueil .metiers-choix {display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;} .tb-accueil .metiers-choix a {display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border: 1.5px solid var(--trait); border-radius: 8px; text-decoration: none; text-align: center; font: 600 14px/1.25 var(--titre); color: var(--encre); transition: border-color .15s, background .15s, transform .15s;} .tb-accueil .metiers-choix a:hover {border-color: var(--caramel); background: #FDF6EF; transform: translateY(-2px);} .tb-accueil .metiers-choix svg {width: 28px; height: 28px; color: var(--caramel);} .tb-accueil .etape1__bas {display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; font-size: 14px; color: var(--doux); flex-wrap: wrap;} .tb-accueil .etape1__bas a {color: var(--encre); font-weight: 600;} .tb-accueil .confiance {border-bottom: 1px solid var(--trait);} .tb-accueil .confiance .conteneur {display: grid; grid-template-columns: repeat(3, 1fr);} .tb-accueil .confiance .conteneur > div {padding: 30px 28px; border-left: 1px solid var(--trait);} .tb-accueil .confiance .conteneur > div:first-child {border-left: 0; padding-left: 0;} .tb-accueil .confiance strong {display: block; font: 700 18px/1.3 var(--titre); color: var(--encre); margin-bottom: 4px;} .tb-accueil .confiance span {color: var(--doux); font-size: 15px;} .tb-accueil section {padding: 110px 0;} .tb-accueil .titre-section {font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; font-weight: 800;} .tb-accueil .titre-section em {font-style: normal; color: var(--caramel);} .tb-accueil .deux-col {display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: start;} .tb-accueil .deux-col__gauche {position: sticky; top: 120px;} .tb-accueil .deux-col__gauche p {color: var(--doux); margin: 20px 0 0; max-width: 420px;} .tb-accueil .liste-numerotee {list-style: none; margin: 0; padding: 0; counter-reset: n;} .tb-accueil .liste-numerotee li {counter-increment: n; display: grid; grid-template-columns: 64px 1fr; gap: 8px; padding: 28px 0; border-top: 1px solid var(--trait);} .tb-accueil .liste-numerotee li:last-child {border-bottom: 1px solid var(--trait);} .tb-accueil .liste-numerotee li::before {content: counter(n, decimal-leading-zero); font: 800 15px/1.6 var(--titre); color: var(--caramel);} .tb-accueil .liste-numerotee h3 {font-size: 21px; margin-bottom: 6px;} .tb-accueil .liste-numerotee p {margin: 0; color: var(--doux);} .tb-accueil .sombre {background: var(--encre); color: #D8D2C9;} .tb-accueil .sombre .titre-section, .tb-accueil .sombre h3 {color: #fff;} .tb-accueil .sombre .titre-section em {color: #F0B27A;} .tb-accueil .resultats {display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 56px; border-top: 1px solid rgba(255,255,255,.14);} .tb-accueil .resultats article {padding: 36px 32px 8px 0;} .tb-accueil .resultats article + article {padding-left: 32px; border-left: 1px solid rgba(255,255,255,.14);} .tb-accueil .resultats small {font: 700 12px/1 var(--titre); letter-spacing: .14em; text-transform: uppercase; color: #F0B27A;} .tb-accueil .resultats h3 {font-size: 22px; margin: 14px 0 10px;} .tb-accueil .resultats p {margin: 0;} .tb-accueil .entete-section {display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 48px; flex-wrap: wrap;} .tb-accueil .entete-section p {color: var(--doux); max-width: 440px; margin: 0;} .tb-accueil .services {display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;} .tb-accueil .service {text-decoration: none; display: block;} .tb-accueil .service__image {position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: var(--gris);} .tb-accueil .service__image img {width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease;} .tb-accueil .service:hover .service__image img {transform: scale(1.06);} .tb-accueil .service__num {position: absolute; left: 14px; bottom: 12px; font: 800 13px/1 var(--titre); color: #fff; letter-spacing: .1em; text-shadow: 0 1px 6px rgba(0,0,0,.5);} .tb-accueil .service h3 {font-size: 19px; margin: 16px 0 6px; display: flex; justify-content: space-between; align-items: center;} .tb-accueil .service p {margin: 0; color: var(--doux); font-size: 15px;} .tb-accueil .service .fleche {color: var(--caramel-fonce);} .tb-accueil .service:hover .fleche {transform: translateX(4px);} .tb-accueil .tous-metiers {margin-top: 40px; display: flex; flex-wrap: wrap; gap: 10px;} .tb-accueil .tous-metiers a {padding: 9px 16px; border: 1px solid var(--trait); border-radius: 100px; text-decoration: none; font-size: 14px; font-weight: 500; transition: border-color .15s, color .15s;} .tb-accueil .tous-metiers a:hover {border-color: var(--caramel); color: var(--caramel);} .tb-accueil .gris {background: var(--gris);} .tb-accueil .etapes {display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 56px; position: relative;} .tb-accueil .etapes::before {content: ""; position: absolute; top: 27px; left: 28px; right: 28px; height: 1.5px; background: var(--trait);} .tb-accueil .etape {position: relative;} .tb-accueil .etape__num {width: 56px; height: 56px; border-radius: 50%; background: var(--encre); color: #fff; display: grid; place-items: center; font: 800 18px/1 var(--titre); margin-bottom: 22px;} .tb-accueil .etape h3 {font-size: 20px; margin-bottom: 8px;} .tb-accueil .etape p {margin: 0; color: var(--doux);} .tb-accueil .comparatif {width: 100%; border-collapse: collapse; margin-top: 48px;} .tb-accueil .comparatif th, .tb-accueil .comparatif td {text-align: left; padding: 20px 18px; border-bottom: 1px solid var(--trait); vertical-align: top;} .tb-accueil .comparatif thead th {font: 700 15px/1 var(--titre); color: var(--doux); border-bottom: 2px solid var(--encre);} .tb-accueil .comparatif thead th.timber {color: var(--caramel);} .tb-accueil .comparatif tbody th {font: 700 16px/1.4 var(--titre); color: var(--encre); width: 24%;} .tb-accueil .comparatif td.timber {color: var(--encre); font-weight: 500; background: #FDF8F3;} .tb-accueil .comparatif td.timber::before {content: "✓ "; color: var(--vert); font-weight: 700;} .tb-accueil .comparatif td.sans {color: var(--doux);} .tb-accueil .villes {display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 40px; border-top: 1px solid var(--trait);} .tb-accueil .villes a {padding: 20px 4px; border-bottom: 1px solid var(--trait); text-decoration: none; display: flex; justify-content: space-between; align-items: center; font: 600 17px/1.2 var(--titre); color: var(--encre);} .tb-accueil .villes a small {display: block; font: 400 13px/1.4 Inter, sans-serif; color: var(--doux); margin-top: 3px;} .tb-accueil .villes a:hover {color: var(--caramel);} .tb-accueil .artisans {display: grid; grid-template-columns: 1fr 1fr; min-height: 520px;} .tb-accueil .artisans__photo {background: url(/photos/chantier-carrelage-960.jpg) center/cover;} .tb-accueil .artisans__texte {background: var(--encre); color: #D8D2C9; padding: 90px 72px; display: flex; flex-direction: column; justify-content: center;} .tb-accueil .artisans__texte .titre-section {color: #fff;} .tb-accueil .artisans__texte ul {list-style: none; padding: 0; margin: 28px 0 36px; display: grid; gap: 14px;} .tb-accueil .artisans__texte li {display: flex; gap: 12px;} .tb-accueil .artisans__texte li::before {content: "→"; color: #F0B27A; font-weight: 700;} .tb-accueil .final {text-align: center;} .tb-accueil .final p {color: var(--doux); font-size: 19px; margin: 18px 0 32px;} .tb-accueil.anime .apparait {opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease;} .tb-accueil.anime .apparait.vu {opacity: 1; transform: none;} @media (prefers-reduced-motion: reduce) { .tb-accueil.anime .apparait {opacity: 1; transform: none; transition: none;} } @media (max-width: 960px) { .tb-accueil .ouverture .conteneur, .tb-accueil .deux-col, .tb-accueil .artisans {grid-template-columns: 1fr;} .tb-accueil .ouverture .conteneur {padding-top: 48px; padding-bottom: 48px; gap: 36px;} .tb-accueil .deux-col {gap: 40px;} .tb-accueil .deux-col__gauche {position: static;} .tb-accueil .services {grid-template-columns: repeat(2, 1fr);} .tb-accueil .resultats, .tb-accueil .etapes {grid-template-columns: 1fr 1fr;} .tb-accueil .resultats article + article {border-left: 0; padding-left: 0;} .tb-accueil .etapes::before {display: none;} .tb-accueil .villes {grid-template-columns: 1fr 1fr; column-gap: 24px;} .tb-accueil .artisans__photo {min-height: 260px;} .tb-accueil .artisans__texte {padding: 56px 24px;} .tb-accueil section {padding: 72px 0;} } @media (max-width: 600px) { .tb-accueil .conteneur {padding: 0 16px;} .tb-accueil .etape1 {padding: 22px 18px;} .tb-accueil .metiers-choix a {padding: 12px 4px; font-size: 13px;} .tb-accueil .confiance .conteneur, .tb-accueil .resultats, .tb-accueil .etapes, .tb-accueil .services {grid-template-columns: 1fr;} .tb-accueil .confiance .conteneur > div {border-left: 0; padding: 18px 0; border-top: 1px solid var(--trait);} .tb-accueil .confiance .conteneur > div:first-child {border-top: 0;} .tb-accueil .comparatif thead {display: none;} .tb-accueil .comparatif tr {display: block; padding: 16px 0; border-bottom: 1px solid var(--trait);} .tb-accueil .comparatif th, .tb-accueil .comparatif td {display: block; border: 0; padding: 4px 0; width: auto !important;} .tb-accueil .comparatif td.timber {background: none;} .tb-accueil .comparatif td.sans::before {content: "Sans Timber : "; font-weight: 600;} .tb-accueil .villes {grid-template-columns: 1fr;} } /* ========================================================================== Accueil v3 (04/11/2026) : la maison qui s'ouvre au défilement, l'application dans un téléphone, les questions. Contenu : 9-outils-projet/accueil_v3.py. Sans script (ou « réduire les animations ») : maison ouverte, immobile, et les dix métiers listés ; le script ajoute .mx--anime et pilote le reste. ========================================================================== */ .tb-accueil section.mx {padding: 0; position: relative; background: #0E0C0A; color: #CFC7BC; --mx-trait: rgba(240,234,226,.82); --mx-fin: rgba(240,234,226,.3); --mx-h: #2E2924; --mx-g: #25211C; --mx-d: #1C1915; --mx-ig: #141210; --mx-id: #1A1714;} .tb-accueil .mx__ecran {box-sizing: border-box; max-width: var(--largeur); margin: 0 auto; padding: 96px 24px; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); grid-template-areas: "tete scene" "bas scene"; column-gap: 48px; align-items: start;} .tb-accueil .mx__tete {grid-area: tete;} .tb-accueil .mx__scene {grid-area: scene; position: sticky; top: 110px; display: flex; align-items: center; justify-content: center; padding-right: 120px;} .tb-accueil .mx__scene::before {content: ""; position: absolute; inset: 8% 18% 8% 0; background: radial-gradient(closest-side, rgba(240,178,122,.11), transparent 72%); pointer-events: none;} .tb-accueil .mx__bas {grid-area: bas;} .tb-accueil .mx .surtitre {color: #F0B27A;} .tb-accueil .mx .titre-section {color: #fff;} .tb-accueil .mx .titre-section em {color: #F0B27A;} .tb-accueil .mx__intro {color: #A9A196; font-size: 18px; margin: 18px 0 0; max-width: 440px;} .tb-accueil .mx__si-anime {display: none;} .tb-accueil .mx--anime .mx__si-anime {display: inline;} .tb-accueil .mx--anime .mx__si-fixe {display: none;} .tb-accueil .mx__camera {position: relative; height: min(80vh, 680px); transform-origin: 50% 50%;} .tb-accueil .mx__couche {position: absolute; inset: 0; transition: opacity .45s ease;} .tb-accueil .mx__couche svg {position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;} .tb-accueil .mx svg * {vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round;} /* Le dessin : faces éclairées par la gauche, traits clairs, sur fond d'encre. */ .tb-accueil .mx .h, .tb-accueil .mx .g, .tb-accueil .mx .d, .tb-accueil .mx .ig, .tb-accueil .mx .id {stroke: var(--mx-trait); stroke-width: 1px;} .tb-accueil .mx .h {fill: var(--mx-h);} .tb-accueil .mx .g {fill: var(--mx-g);} .tb-accueil .mx .d {fill: var(--mx-d);} .tb-accueil .mx .ig {fill: var(--mx-ig);} .tb-accueil .mx .id {fill: var(--mx-id);} .tb-accueil .mx .fin, .tb-accueil .mx .joint, .tb-accueil .mx .tuile, .tb-accueil .mx .fin-porte {fill: none; stroke: var(--mx-fin); stroke-width: .8px;} .tb-accueil .mx .tuile {stroke: rgba(240,178,122,.32);} .tb-accueil .mx .plan {fill: rgba(240,234,226,.035); stroke: rgba(240,234,226,.38); stroke-width: 1px; stroke-dasharray: 4 4;} .tb-accueil .mx .emprise {fill: none; stroke: rgba(240,234,226,.28); stroke-width: 1px; stroke-dasharray: 3 4;} .tb-accueil .mx .cadre {fill: #3A332B; stroke: var(--mx-trait); stroke-width: .8px;} .tb-accueil .mx .verre {fill: #213640; stroke: none; transition: fill .4s;} .tb-accueil .mx .reflet {fill: none; stroke: rgba(255,255,255,.26); stroke-width: 1.2px;} .tb-accueil .mx .meneau {fill: none; stroke: var(--mx-trait); stroke-width: .8px;} .tb-accueil .mx .appui {fill: none; stroke: var(--mx-trait); stroke-width: 1.8px;} .tb-accueil .mx .porte {fill: #4A382B; stroke: var(--mx-trait); stroke-width: 1px;} .tb-accueil .mx .poignee-porte {fill: #F0B27A;} .tb-accueil .mx .peint.ig {fill: #2C463B;} .tb-accueil .mx .peint.id {fill: #36584A;} .tb-accueil .mx .toit.h, .tb-accueil .mx .toit.g {fill: #3B2B22;} .tb-accueil .mx .toit.d {fill: #2B201A;} .tb-accueil .mx .bord {fill: #191411;} .tb-accueil .mx .brique.h {fill: #5A372A;} .tb-accueil .mx .brique.g {fill: #4A2D22;} .tb-accueil .mx .brique.d {fill: #3A231B;} .tb-accueil .mx .isol.h {fill: #5C4826;} .tb-accueil .mx .isol.g {fill: #4E3D20;} .tb-accueil .mx .isol.d {fill: #40321B;} .tb-accueil .mx .laine {fill: none; stroke: #E9C46A; stroke-width: 1px; opacity: .75;} .tb-accueil .mx .beton.h {fill: #34302B;} .tb-accueil .mx .sol.h {fill: #3A3530;} .tb-accueil .mx .joint {stroke: rgba(240,234,226,.22);} .tb-accueil .mx .chaud {fill: none; stroke: #F08A7E; stroke-width: 2px;} .tb-accueil .mx .froid {fill: none; stroke: #6CB4EE; stroke-width: 2px;} .tb-accueil .mx .bout {fill: #6CB4EE; stroke: none;} .tb-accueil .mx .ballon.g {fill: #3D3833;} .tb-accueil .mx .ballon.h {fill: #514B44;} .tb-accueil .mx .radiateur.h {fill: #EAE5DE;} .tb-accueil .mx .radiateur.g {fill: #D6D0C8;} .tb-accueil .mx .radiateur.d {fill: #BDB6AD;} .tb-accueil .mx .radiateur ~ .fin {stroke: rgba(21,18,14,.35);} .tb-accueil .mx .fil {fill: none; stroke: #F2C14E; stroke-width: 1.6px;} .tb-accueil .mx .pointille {stroke-dasharray: 3 3;} .tb-accueil .mx .tableau.h {fill: #4A453F;} .tb-accueil .mx .tableau.g {fill: #3A3631;} .tb-accueil .mx .disj {fill: #F2C14E; stroke: none;} .tb-accueil .mx .prise.h, .tb-accueil .mx .prise.g, .tb-accueil .mx .prise.d {fill: #E8E2D9;} .tb-accueil .mx .ampoule {fill: #F7D774; stroke: none;} .tb-accueil .mx .meuble.h {fill: #3D3730;} .tb-accueil .mx .meuble.g {fill: #332E28;} .tb-accueil .mx .meuble.d {fill: #2A2621;} .tb-accueil .mx .plan-travail.h {fill: #6B6157;} .tb-accueil .mx .plan-travail.g, .tb-accueil .mx .plan-travail.d {fill: #554C43;} .tb-accueil .mx .feu {fill: none; stroke: rgba(240,234,226,.6); stroke-width: 1px;} .tb-accueil .mx .evier {fill: #1F2A2F; stroke: var(--mx-trait); stroke-width: .8px;} .tb-accueil .mx .robinet, .tb-accueil .mx .poignee {fill: none; stroke: #D9D2C8; stroke-width: 1.4px;} .tb-accueil .mx .tabouret.g {fill: #4A382B;} .tb-accueil .mx .tabouret.h {fill: #5E493A;} .tb-accueil .mx .plancher.h {fill: #3E342B;} .tb-accueil .mx .carreau {fill: #2B3638; stroke: none;} .tb-accueil .mx .email.h {fill: #EEEAE4;} .tb-accueil .mx .email.g {fill: #D3CEC6;} .tb-accueil .mx .email.d {fill: #B9B3AA;} .tb-accueil .mx .eau {fill: #6CB4EE; stroke: none; opacity: .8;} .tb-accueil .mx .vitre {fill: rgba(150,200,230,.1); stroke: rgba(200,230,250,.55); stroke-width: .8px;} /* La couche présentée s'éclaire ; les autres s'effacent. */ .tb-accueil .mx .mx__couche.actif .h {fill: #6E4521; stroke: #F7C99B;} .tb-accueil .mx .mx__couche.actif .g {fill: #5B391B; stroke: #F7C99B;} .tb-accueil .mx .mx__couche.actif .d {fill: #482D15; stroke: #F7C99B;} .tb-accueil .mx .mx__couche.actif .ig {fill: #3B2512; stroke: #F7C99B;} .tb-accueil .mx .mx__couche.actif .id {fill: #4A2E16; stroke: #F7C99B;} .tb-accueil .mx .mx__couche.actif .peint.ig {fill: #C26A1F;} .tb-accueil .mx .mx__couche.actif .peint.id {fill: #D98A43;} .tb-accueil .mx .mx__couche.actif .verre {fill: #F0B27A;} .tb-accueil .mx .mx__couche.actif .plan {fill: rgba(240,178,122,.14); stroke: #F0B27A;} .tb-accueil .mx .mx__couche.actif .email.h, .tb-accueil .mx .mx__couche.actif .radiateur.h, .tb-accueil .mx .mx__couche.actif .prise.h {fill: #FFF6EC;} .tb-accueil .mx .mx__couche.actif .email.g, .tb-accueil .mx .mx__couche.actif .radiateur.g, .tb-accueil .mx .mx__couche.actif .prise.g {fill: #F1E2D2;} .tb-accueil .mx .mx__couche.actif .email.d, .tb-accueil .mx .mx__couche.actif .radiateur.d, .tb-accueil .mx .mx__couche.actif .prise.d {fill: #DEC8B1;} .tb-accueil .mx--tour .mx__couche:not(.actif) {opacity: .32;} .tb-accueil .mx__etiquette {position: absolute; transform: translateY(-50%); white-space: nowrap; font: 600 13px/1 var(--titre); letter-spacing: .02em; color: rgba(240,234,226,.72); padding-left: 30px; transition: opacity .4s ease, color .3s;} .tb-accueil .mx__etiquette::before {content: ""; position: absolute; left: 4px; top: 50%; width: 20px; border-top: 1px solid currentColor; opacity: .55;} .tb-accueil .mx--anime .mx__etiquette {opacity: 0;} .tb-accueil .mx--ouverte .mx__etiquette {opacity: 1;} .tb-accueil .mx__couche.actif .mx__etiquette {color: #F7C99B;} /* Les fiches : métier, prix moyens, lien vers la demande. */ .tb-accueil .mx__fiches {list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 28px;} .tb-accueil .mx__fiche {border-top: 1px solid rgba(240,234,226,.14); padding-top: 22px;} .tb-accueil .mx__num {font: 700 12px/1 var(--titre); letter-spacing: .16em; color: #F0B27A; margin: 0 0 10px;} .tb-accueil .mx__fiche h3 {color: #fff; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1; margin: 0 0 16px;} .tb-accueil .mx__prix {margin: 0 0 18px; display: grid; gap: 12px;} .tb-accueil .mx__prix div {display: grid; gap: 2px;} .tb-accueil .mx__prix dt {color: #A9A196; font-size: 15px;} .tb-accueil .mx__prix dd {margin: 0; color: #fff; font: 700 20px/1.3 var(--titre);} .tb-accueil .mx__fiche a, .tb-accueil .mx__estimer {color: #F0B27A; font-weight: 600; text-decoration: none;} .tb-accueil .mx__fiche a:hover .fleche {transform: translateX(4px);} .tb-accueil .mx__estimer {padding: 12px 0;} .tb-accueil .mx__fin {margin-top: 40px;} .tb-accueil .mx__fin p {color: #E8E3DC; font-size: 19px; margin: 0 0 22px; max-width: 440px;} .tb-accueil .mx__fin strong {color: #fff;} .tb-accueil .mx__boutons {display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px;} .tb-accueil .mx__note {color: #8A8378; font-size: 13px; margin: 28px 0 0; max-width: 420px;} .tb-accueil .mx__points {display: none;} .tb-accueil .mx__sommaire {display: none;} .tb-accueil .mx--anime .mx__sommaire {display: grid; grid-area: 1 / 1; grid-template-columns: repeat(2, max-content); gap: 12px 40px; list-style: none; margin: 34px 0 0; padding: 0; opacity: 0; transition: opacity .4s ease;} .tb-accueil .mx--debut .mx__sommaire {opacity: 1;} .tb-accueil .mx__sommaire li {color: #CFC7BC; font: 600 15px/1.3 var(--titre);} .tb-accueil .mx__sommaire span {color: #F0B27A; font-size: 12px; letter-spacing: .12em; margin-right: 10px;} /* Avec le script : l'écran reste en place pendant que la page défile. */ .tb-accueil .mx--anime .mx__piste {height: 560vh; height: 560svh;} .tb-accueil .mx--anime .mx__ecran {position: sticky; top: var(--mx-haut, 0px); height: calc(100vh - var(--mx-haut, 0px) - var(--mx-bas, 0px)); height: calc(100svh - var(--mx-haut, 0px) - var(--mx-bas, 0px)); padding-top: 28px; padding-bottom: 28px; grid-template-rows: 1fr auto auto 1fr; grid-template-areas: ". scene" "tete scene" "bas scene" ". scene"; overflow: hidden;} .tb-accueil .mx--anime .mx__scene {position: relative; top: auto; height: 100%;} .tb-accueil .mx--anime .mx__camera {height: min(100%, 760px); will-change: transform;} .tb-accueil .mx--anime .mx__couche {will-change: transform;} .tb-accueil .mx--anime .mx__bas {display: grid;} .tb-accueil .mx--anime .mx__fiches, .tb-accueil .mx--anime .mx__fin {grid-area: 1 / 1; margin-top: 30px;} .tb-accueil .mx--anime .mx__note {grid-area: 2 / 1; margin-top: 22px;} .tb-accueil .mx--anime .mx__fiche {grid-area: 1 / 1; border-top: 0; padding-top: 0; opacity: 0; transform: translateY(12px); transition: opacity .35s ease, transform .35s ease; pointer-events: none;} .tb-accueil .mx--anime .mx__fiche.actif {opacity: 1; transform: none; pointer-events: auto;} .tb-accueil .mx--anime .mx__fin {opacity: 0; transform: translateY(12px); transition: opacity .4s ease, transform .4s ease; pointer-events: none;} .tb-accueil .mx--fin .mx__fin {opacity: 1; transform: none; pointer-events: auto;} .tb-accueil .mx--anime .mx__points {display: flex; flex-direction: column; gap: 4px; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity .4s ease;} .tb-accueil .mx--tour .mx__points {opacity: 1;} .tb-accueil .mx__point {box-sizing: content-box; width: 8px; height: 8px; padding: 6px; border: 0; border-radius: 50%; background: rgba(240,234,226,.25); background-clip: content-box; cursor: pointer; transition: background-color .3s, transform .3s;} .tb-accueil .mx__point.actif {background-color: #F0B27A; transform: scale(1.3);} .tb-accueil .mx__point:focus-visible {outline: 2px solid #F0B27A; outline-offset: 2px;} @media (max-width: 760px) { .tb-accueil .mx__ecran {grid-template-columns: 1fr; grid-template-areas: "tete" "scene" "bas"; padding: 64px 16px;} .tb-accueil .mx__scene {position: relative; top: auto; margin-top: 24px; padding-right: 92px;} .tb-accueil .mx__camera {height: 72vh;} .tb-accueil .mx--anime .mx__ecran {grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "tete" "scene" "bas"; padding: 14px 16px 10px; row-gap: 4px;} .tb-accueil .mx--anime .mx__scene {margin-top: 0;} .tb-accueil .mx--anime .mx__camera {height: 100%;} .tb-accueil .mx--anime .mx__tete .surtitre {display: none;} .tb-accueil .mx--anime .titre-section {font-size: 26px;} .tb-accueil .mx--anime .mx__intro {font-size: 14px; margin-top: 6px;} .tb-accueil .mx--anime .mx__fiches, .tb-accueil .mx--anime .mx__fin, .tb-accueil .mx--anime .mx__sommaire {margin-top: 4px;} .tb-accueil .mx--anime .mx__sommaire {gap: 6px 24px;} .tb-accueil .mx__sommaire li {font-size: 13px;} .tb-accueil .mx--anime .mx__note {margin-top: 8px; font-size: 11px;} .tb-accueil .mx--anime .mx__num {margin-bottom: 4px;} .tb-accueil .mx--anime .mx__fiche h3 {font-size: 22px; margin-bottom: 8px;} .tb-accueil .mx--anime .mx__prix {gap: 6px; margin-bottom: 8px;} .tb-accueil .mx--anime .mx__prix dt {font-size: 13px;} .tb-accueil .mx--anime .mx__prix dd {font-size: 16px;} .tb-accueil .mx--anime .mx__fin p {font-size: 16px; margin-bottom: 12px;} .tb-accueil .mx--anime .mx__points {display: none;} .tb-accueil .mx__etiquette {font-size: 11px; padding-left: 20px;} .tb-accueil .mx__etiquette::before {width: 13px;} } /* L'application, dans un téléphone qui reste en place pendant les quatre étapes. */ .tb-accueil .pr {background: var(--gris);} .tb-accueil .pr__entete {max-width: 640px;} .tb-accueil .pr__entete p:not(.surtitre) {color: var(--doux); font-size: 18px; margin: 18px 0 0;} .tb-accueil .pr__grille {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start;} .tb-accueil .pr__telephone {position: sticky; top: 96px; height: calc(100vh - 140px); max-height: 720px; display: flex; align-items: center; justify-content: center;} .tb-accueil .pr__cadre {position: relative; height: min(100%, 660px); aspect-ratio: 622 / 1394; border-radius: 52px; background: #15120E; box-shadow: 0 50px 100px -24px rgba(21,18,14,.5), inset 0 0 0 2px #3A342D;} .tb-accueil .pr__cadre::after {content: ""; position: absolute; top: 18px; left: 50%; width: 26%; height: 22px; transform: translateX(-50%); border-radius: 14px; background: #0A0908; z-index: 2;} .tb-accueil .pr__ecran {position: absolute; top: 11px; left: 11px; width: calc(100% - 22px); height: calc(100% - 22px); object-fit: cover; object-position: top; border-radius: 42px; opacity: 0; transform: scale(1.015); transition: opacity .6s ease, transform .6s ease;} .tb-accueil .pr__ecran.actif {opacity: 1; transform: none;} .tb-accueil .pr__etape {min-height: 76vh; display: flex; flex-direction: column; justify-content: center; transition: opacity .4s ease;} .tb-accueil .pr--anime .pr__etape:not(.actif) {opacity: .28;} .tb-accueil .pr__num {width: 44px; height: 44px; border-radius: 50%; background: var(--encre); color: #fff; display: grid; place-items: center; font: 800 16px/1 var(--titre); margin-bottom: 20px;} .tb-accueil .pr__etape h3 {font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; margin-bottom: 14px;} .tb-accueil .pr__etape p {color: var(--doux); font-size: 18px; max-width: 440px; margin: 0;} .tb-accueil .pr__mini {display: none;} @media (max-width: 860px) { .tb-accueil .pr__grille {grid-template-columns: 1fr; gap: 0; margin-top: 20px;} .tb-accueil .pr__telephone {display: none;} .tb-accueil .pr__etape {min-height: 0; padding: 36px 0; border-top: 1px solid var(--trait);} .tb-accueil .pr--anime .pr__etape:not(.actif) {opacity: 1;} .tb-accueil .pr__mini {display: block; width: min(250px, 72%); margin: 28px auto 0; padding: 8px; border-radius: 36px; background: #15120E; box-shadow: 0 30px 60px -20px rgba(21,18,14,.45);} .tb-accueil .pr__mini img {width: 100%; height: auto; border-radius: 29px;} } /* Conseils du blog, sous les villes. */ .tb-accueil .services--trois {grid-template-columns: repeat(3, 1fr);} .tb-accueil .services--trois .service__num {letter-spacing: .06em; text-transform: uppercase; font-size: 12px;} .tb-accueil .tous-conseils {display: inline-block; padding-block: 12px; color: var(--caramel-fonce); font-weight: 600; text-decoration: none;} .tb-accueil .tous-conseils:hover .fleche {transform: translateX(4px);} @media (max-width: 960px) {.tb-accueil .services--trois {grid-template-columns: 1fr 1fr;}} @media (max-width: 600px) {.tb-accueil .services--trois {grid-template-columns: 1fr;}} /* Questions fréquentes. */ .tb-accueil .faq__grille {display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start;} .tb-accueil .faq__appel {color: var(--doux); margin: 20px 0 0;} .tb-accueil .faq__appel a {color: var(--encre); font-weight: 600;} .tb-accueil .faq details {border-top: 1px solid var(--trait);} .tb-accueil .faq details:last-child {border-bottom: 1px solid var(--trait);} .tb-accueil .faq summary {list-style: none; cursor: pointer; position: relative; padding: 22px 48px 22px 0; font: 700 19px/1.35 var(--titre); color: var(--encre);} .tb-accueil .faq summary::-webkit-details-marker {display: none;} .tb-accueil .faq summary::after {content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: 400 30px/1 var(--titre); color: var(--caramel-fonce); transition: transform .25s ease;} .tb-accueil .faq details[open] summary::after {transform: translateY(-50%) rotate(45deg);} .tb-accueil .faq summary:focus-visible {outline: 2px solid var(--caramel); outline-offset: 4px;} .tb-accueil .faq details p {margin: 0 0 24px; max-width: 640px;} .tb-accueil .faq details a {color: var(--caramel-fonce); font-weight: 600;} @media (max-width: 860px) { .tb-accueil .faq__grille {grid-template-columns: 1fr; gap: 28px;} .tb-accueil .faq summary {font-size: 17px;} } @media (prefers-reduced-motion: reduce) { .tb-accueil .pr__ecran, .tb-accueil .mx__couche, .tb-accueil .mx__fiche {transition: none;} } /* Page Prix : les prix moyens de l'estimateur (mu-plugins/timber-prix-moyens.php). */ .tb-accueil .tb-prix-moyens {background: var(--gris);} .tb-accueil .tb-prix-moyens__intro {color: var(--doux); max-width: 640px; margin: 18px 0 40px;} .tb-accueil .tb-prix-moyens__groupes {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 48px; align-items: start;} .tb-accueil .tb-prix-moyens__groupe h3 {font-size: 20px; margin: 0 0 6px;} .tb-accueil .tb-prix-moyens table {width: 100%; border-collapse: collapse;} .tb-accueil .tb-prix-moyens th, .tb-accueil .tb-prix-moyens td {padding: 14px 0; border-bottom: 1px solid var(--trait); vertical-align: top; text-align: left;} .tb-accueil .tb-prix-moyens th {font: 600 16px/1.4 var(--titre); color: var(--encre); padding-right: 16px;} .tb-accueil .tb-prix-moyens th small {display: block; margin-top: 4px; font: 400 13px/1.45 Inter, system-ui, sans-serif; color: var(--doux);} .tb-accueil .tb-prix-moyens td {font: 700 16px/1.4 var(--titre); color: var(--encre); text-align: right; white-space: nowrap;} .tb-accueil .tb-prix-moyens__suite {margin: 40px 0 0;} @media (max-width: 860px) { .tb-accueil .tb-prix-moyens__groupes {grid-template-columns: 1fr;} .tb-accueil .tb-prix-moyens td {white-space: normal; min-width: 120px;} } /* Conseils du blog sous les pages métier et ville (mu-plugins/timber-conseils.php). */ .tb-conseils {box-sizing: border-box; max-width: 1200px; margin: 0 auto; padding: 72px 24px 88px;} .tb-conseils h2 {font: 800 clamp(26px, 3vw, 36px)/1.15 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: -.02em; color: #15120E; margin: 0 0 28px;} .tb-conseils__liste {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;} .tb-conseils__liste a {display: block; padding: 24px; border: 1px solid #E7E4DF; border-radius: 10px; background: #fff; text-decoration: none; transition: border-color .15s, transform .15s;} .tb-conseils__liste a:hover {border-color: #C26A1F; transform: translateY(-2px);} .tb-conseils small {font: 700 12px/1 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #9E5413;} .tb-conseils strong {display: block; margin: 10px 0 8px; font: 700 19px/1.3 "Plus Jakarta Sans", system-ui, sans-serif; color: #15120E;} .tb-conseils__liste span {display: block; color: #6E685F; font-size: 15px; line-height: 1.55;} .tb-conseils__tous {margin: 24px 0 0;} .tb-conseils__tous a {display: inline-block; padding-block: 12px; color: #9E5413; font-weight: 600; text-decoration: none;} @media (max-width: 860px) { .tb-conseils {padding: 48px 16px 64px;} .tb-conseils__liste {grid-template-columns: 1fr;} } /* Pleine largeur dans la page WordPress, collée à l'en-tête. */ .home main#wp--skip-link--target { margin-top: 0 !important; padding-top: 0 !important; } .home .wp-block-post-title { display: none; } .home main > .wp-block-group:has(> .wp-block-post-content) { padding-top: 0 !important; } .home .wp-block-post-content { margin-top: 0 !important; } .home .wp-site-blocks > footer { margin-block-start: 0 !important; } .tb-accueil { margin-top: 0 !important; margin-bottom: 0 !important; max-width: none !important; } .tb-accueil img { max-width: 100%; display: block; } .tb-accueil a { color: inherit; } .tb-accueil .bouton, .tb-accueil .bouton:hover { color: #fff; } .tb-accueil .bouton { background: var(--tb-action); } .tb-accueil .bouton:hover { background: var(--tb-action-survol); } .tb-accueil h1, .tb-accueil h2, .tb-accueil h3 { margin: 0; } .tb-accueil p { margin-block-start: 0; } /* Menu du haut sur une seule ligne. */ header .wp-block-navigation__container { flex-wrap: nowrap !important; gap: 1.6rem !important; } header .wp-block-navigation a { white-space: nowrap; } /* Fonds crème écrits en dur dans les anciennes pages : gris neutre. */ [style*="F3EEE1" i], [style*="FBF8F2" i] { background-color: #F6F5F3 !important; } .has-creme-background-color { background-color: #F6F5F3 !important; } /* Le signe du logo, à côté du nom, dans l'en-tête et le pied de page. */ header .timber-marque { flex: 0 0 40px; width: 40px; } header .timber-marque img { width: 40px !important; height: auto !important; border-radius: 0; } /* Le numéro de l'équipe en haut de chaque page (05/11/2026, appel avec Nico : le clic compte comme une conversion « appel » dans Google Ads). « Appeler » remplace le numéro sur téléphone. */ header .timber-entete-droite { gap: 1.6rem; } header .timber-tel { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem; border: 1px solid var(--tb-trait); border-radius: 999px; color: var(--tb-encre) !important; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: .95rem; line-height: 1.2; text-decoration: none; white-space: nowrap; } header .timber-tel svg { color: var(--tb-action); flex: none; } header .timber-tel:hover { border-color: var(--tb-encre); } header .timber-tel__court { display: none; } @media (max-width: 1100px) { header .timber-entete-droite { gap: 1rem; } header .wp-block-navigation__container { gap: 1.1rem !important; } } /* Tablette : le menu reste déplié sur une ligne ; le numéro passe en icône (son libellé reste lu par les lecteurs d'écran), et « Accueil » s'efface sous 900 px, le logo y mène déjà. */ @media (min-width: 601px) and (max-width: 1220px) { header .timber-tel { padding: .55rem; } header .timber-tel__numero { display: none; } } @media (min-width: 601px) and (max-width: 900px) { header .wp-block-navigation__container > li:first-child { display: none; } } /* En-tête « étouffé au milieu » (Nico, 05/11/2026) : il prend la largeur de la page jusqu'à 1320 px ; « Déposer mon projet » passe à la couleur d'action, « Se connecter » prend une icône. */ header.wp-block-template-part > .wp-block-group > .wp-block-group { max-width: 1320px !important; width: 100%; } header .wp-block-navigation a[href*="projet/nouveau"] { background: var(--tb-action); } header .wp-block-navigation a[href*="projet/nouveau"]:hover { background: var(--tb-action-survol); } header .wp-block-navigation a[href*="connexion"] { display: inline-flex; align-items: center; gap: .4rem; } header .wp-block-navigation a[href*="connexion"]::before { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E") center / contain no-repeat; } @media (min-width: 1221px) { header .wp-block-navigation a[href*="projet/nouveau"] { padding: .72rem 1.2rem; font-size: 1rem; } } @media (min-width: 601px) and (max-width: 900px) { header .wp-block-navigation a[href*="connexion"]::before { display: none; } } @media (max-width: 600px) { header .timber-entete-droite { gap: .75rem; } header .timber-tel { padding: .45rem .75rem; font-size: .9rem; } header .timber-tel__numero { display: none; } header .timber-tel__court { display: inline; } } /* ========================================================================== Pages intérieures : bandeau d'ouverture (mu-plugins/timber-bandeau-pages.php), même esprit que l'accueil. Photo floutée et assombrie, texte à gauche. ========================================================================== */ .tb-avec-bandeau main#wp--skip-link--target { margin-top: 0 !important; } .tb-avec-bandeau main > .wp-block-group:has(> .wp-block-post-content) { padding-top: 0 !important; } .tb-avec-bandeau .wp-block-post-title { display: none; } .tb-avec-bandeau .wp-block-post-content { margin-top: 0 !important; } .tb-bandeau { position: relative; overflow: hidden; background: var(--tb-encre); margin-top: 0 !important; margin-bottom: 4rem !important; } .tb-bandeau__fond { position: absolute; inset: -20px; background-size: cover; background-position: center; filter: blur(3px) saturate(.9); transform: scale(1.04); } .tb-bandeau::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,12,9,.88) 0%, rgba(14,12,9,.7) 50%, rgba(14,12,9,.3) 100%); } .tb-bandeau__in { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 96px 24px 88px; } .tb-bandeau__in > * { max-width: 640px; } .tb-bandeau__sur { font: 700 13px/1 "Plus Jakarta Sans", sans-serif !important; letter-spacing: .14em; text-transform: uppercase; color: var(--tb-clair) !important; margin: 0 0 18px !important; } .tb-bandeau__titre { color: #fff !important; font-weight: 800 !important; font-size: clamp(36px, 5vw, 58px) !important; line-height: 1.05 !important; margin: 0 0 20px !important; } .tb-bandeau p:not(.tb-bandeau__sur) { color: #E8E3DC !important; font-size: 19px !important; line-height: 1.6; margin: 0 0 28px !important; } .tb-bandeau p a { color: #fff !important; } .tb-bandeau .wp-block-buttons { justify-content: flex-start !important; margin: 0 !important; } @media (max-width: 600px) { .tb-bandeau__in { padding: 56px 16px 52px; } .tb-bandeau p:not(.tb-bandeau__sur) { font-size: 17px !important; } } /* Anciennes valeurs écrites en dur dans les pages : fonds crème, coins très arrondis. */ [style*="EDE6D6" i] { background-color: #F6F5F3 !important; } [style*="border-radius:12px"], [style*="border-radius:14px"], [style*="border-radius:16px"] { border-radius: 6px !important; } .wp-block-post-content > .wp-block-group.has-background:not(.alignfull) { border: 0 !important; } /* Les liens de l'accueil gardent leurs couleurs : la règle des liens de contenu WordPress (caramel) ne s'applique pas à la page d'accueil. */ .wp-block-post-content .tb-accueil a { color: inherit; } .wp-block-post-content .tb-accueil a.bouton, .wp-block-post-content .tb-accueil a.bouton:hover { color: #FFFFFF !important; } .wp-block-post-content .tb-accueil .etape1__bas a { color: var(--encre); } .wp-block-post-content .tb-accueil .service .fleche { color: var(--caramel-fonce); } /* Page « Demande envoyée » (9-outils-projet/wp-page-demande-envoyee.php). */ body:has(.tb-envoi) .wp-block-post-title { display: none; } body:has(.tb-envoi) main#wp--skip-link--target { margin-top: 0 !important; } .tb-envoi { max-width: 680px; margin: 0 auto; padding: 24px 0 64px; } .tb-envoi__coche { width: 64px; height: 64px; border-radius: 50%; background: #2F7D4F; color: #fff; display: grid; place-items: center; font: 800 30px/1 "Plus Jakarta Sans", sans-serif; margin-bottom: 24px; } .tb-envoi__sur { font: 700 13px/1 "Plus Jakarta Sans", sans-serif !important; letter-spacing: .14em; text-transform: uppercase; color: var(--tb-action) !important; margin: 0 0 12px !important; } .tb-envoi__titre { font-weight: 800 !important; font-size: clamp(30px, 4vw, 44px) !important; line-height: 1.1 !important; margin: 0 0 16px !important; } .tb-envoi__chapo { font-size: 19px; color: var(--tb-doux); margin: 0 0 32px !important; } .tb-envoi__etapes { list-style: none; counter-reset: n; padding: 0; margin: 0 0 36px; } .tb-envoi__etapes li { counter-increment: n; position: relative; padding: 18px 0 18px 48px; border-top: 1px solid var(--tb-trait); } .tb-envoi__etapes li:last-child { border-bottom: 1px solid var(--tb-trait); } .tb-envoi__etapes li::before { position: absolute; left: 0; top: 18px; content: counter(n, decimal-leading-zero); font: 800 15px/1.6 "Plus Jakarta Sans", sans-serif; color: var(--tb-action); } .tb-envoi__actions { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; margin-bottom: 24px; } .wp-block-post-content .tb-envoi__bouton { display: inline-block; background: var(--tb-encre); color: #fff !important; padding: 15px 24px; border-radius: 6px; font: 700 16px/1 "Plus Jakarta Sans", sans-serif; text-decoration: none; } .wp-block-post-content .tb-envoi__bouton:hover { background: #000; } .wp-block-post-content .tb-envoi__lien { color: var(--tb-encre) !important; font-weight: 600; } .tb-envoi__note { font-size: 14px; color: var(--tb-doux); } /* Ordres de prix des pages métiers (9-outils-projet/wp-tarifs-et-prix-20261025.php). */ .tb-prix table { width: 100%; border-collapse: collapse; margin: 0 0 12px; border-top: 2px solid var(--tb-encre); } .tb-prix th, .tb-prix td { text-align: left; padding: 14px 0; border-bottom: 1px solid var(--tb-trait); vertical-align: top; } .tb-prix th { font-family: Inter, system-ui, sans-serif !important; font-weight: 500; color: var(--tb-texte); padding-right: 16px; } .tb-prix td { font: 700 16px/1.4 "Plus Jakarta Sans", sans-serif; color: var(--tb-encre); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; } .tb-prix p { font-size: 14px; color: var(--tb-doux); } /* Pages « métier + ville » (9-outils-projet/pages_metier_ville.py, 28/10/2026). */ .tb-local { max-width: 760px; margin: 0 auto; } .tb-local h2 { font: 700 26px/1.25 "Plus Jakarta Sans", sans-serif; color: var(--tb-encre); margin: 48px 0 14px; } .tb-local h3 { font: 700 18px/1.35 "Plus Jakarta Sans", sans-serif; color: var(--tb-encre); margin: 24px 0 6px; } .tb-local__chapo { font-size: 19px; line-height: 1.55; color: var(--tb-texte); } .wp-block-post-content .tb-local__bouton { display: inline-block; background: var(--tb-action); color: #fff !important; padding: 16px 26px; border-radius: 6px; font: 700 17px/1 "Plus Jakarta Sans", sans-serif; text-decoration: none; } .wp-block-post-content .tb-local__bouton:hover { background: var(--tb-action-survol); } .tb-local__atouts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15px; color: var(--tb-doux); } .tb-local__atouts li::before { content: "✓ "; color: var(--tb-action); font-weight: 700; } .tb-local__etapes li { margin-bottom: 8px; } .tb-local__conseil { background: var(--tb-gris); border-left: 3px solid var(--tb-action); padding: 14px 18px; } .tb-local__liens { font-size: 15px; color: var(--tb-doux); line-height: 1.8; } .tb-par-ville { margin-top: 40px; } .tb-par-ville p { line-height: 1.9; } @media (max-width: 600px) { .tb-local h2 { font-size: 22px; } .tb-local__chapo { font-size: 17px; } .wp-block-post-content .tb-local__bouton { display: block; text-align: center; } } /* Demande rapide sur les pages (mu-plugins/timber-demande-rapide.php, 28/10/2026). */ .tb-rapide { max-width: 760px; margin: -40px auto 40px; position: relative; z-index: 2; background: #fff; border: 1px solid var(--tb-trait); border-radius: 12px; box-shadow: 0 12px 32px rgba(21,18,14,.10); padding: 20px 22px 18px; } .tb-rapide__onglets { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--tb-trait); } .tb-rapide__onglets button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 8px 4px 10px; margin-right: 14px; font: 700 15px/1 "Plus Jakarta Sans", sans-serif; color: var(--tb-doux); cursor: pointer; } .tb-rapide__onglets button[aria-selected="true"] { color: var(--tb-encre); border-bottom-color: var(--tb-action); } .tb-rapide__form { display: grid; gap: 12px; } .tb-rapide__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .tb-rapide label { display: grid; gap: 5px; font: 600 14px/1.3 Inter, sans-serif; color: var(--tb-encre); } .tb-rapide input, .tb-rapide select, .tb-rapide textarea { font: 400 16px/1.4 Inter, sans-serif; padding: 11px 12px; border: 1px solid #CFCAC2; border-radius: 6px; background: #fff; color: var(--tb-encre); width: 100%; box-sizing: border-box; } .tb-rapide [aria-invalid="true"] { border-color: #B3261E; } .tb-rapide__err { color: #B3261E; font-weight: 500; font-size: 13px; } .tb-rapide__envoi { background: var(--tb-action); color: #fff; border: 0; border-radius: 6px; padding: 15px 20px; font: 700 17px/1 "Plus Jakarta Sans", sans-serif; cursor: pointer; } .tb-rapide__envoi:hover { background: var(--tb-action-survol); } .tb-rapide__envoi:disabled { opacity: .6; cursor: wait; } .tb-rapide__note { margin: 0; font-size: 13px; color: var(--tb-doux); } .tb-rapide__merci { margin: 6px 0; font: 600 17px/1.5 Inter, sans-serif; color: #2F7D4F; } .tb-rapide [hidden] { display: none !important; } .tb-barre { display: none; } @media (max-width: 700px) { .tb-rapide { margin: 16px 0 32px; padding: 16px; } .tb-rapide__ligne { grid-template-columns: 1fr; } .tb-barre { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--tb-trait); box-shadow: 0 -4px 16px rgba(21,18,14,.08); } .tb-barre a { flex: 1; text-align: center; padding: 14px 10px; border-radius: 6px; font: 700 16px/1 "Plus Jakarta Sans", sans-serif; text-decoration: none; } .tb-barre__depot { background: var(--tb-action); color: #fff !important; flex: 2 !important; } .tb-barre__tel { border: 1px solid var(--tb-encre); color: var(--tb-encre) !important; } .tb-barre { transition: transform .25s ease, visibility .25s; } .tb-barre--cachee { transform: translateY(110%); visibility: hidden; } body:has(.tb-barre) { padding-bottom: 76px; } /* Le bandeau cookies recouvrait la barre « Déposer ma demande / Appeler » sur téléphone (12/11/2026) : il se pose au-dessus d'elle tant qu'elle est visible. */ body:has(.tb-barre:not(.tb-barre--cachee)) .timber-consent { bottom: calc(67px + env(safe-area-inset-bottom, 0px)) !important; } } /* Parrainage des particuliers sur la page « Demande envoyée » (28/10/2026). */ .tb-envoi__reco { margin-top: 32px; padding: 20px 22px; background: var(--tb-gris); border-radius: 10px; } .tb-envoi__reco-titre { font: 700 19px/1.3 "Plus Jakarta Sans", sans-serif; color: var(--tb-encre); margin: 0 0 6px; } .tb-envoi__reco-boutons { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; } .wp-block-post-content .tb-envoi__reco-boutons a { padding: 11px 18px; border-radius: 6px; border: 1px solid var(--tb-encre); color: var(--tb-encre) !important; font-weight: 700; text-decoration: none; } .wp-block-post-content .tb-envoi__reco-boutons a:first-child { background: var(--tb-action); border-color: var(--tb-action); color: #fff !important; } /* Accueil : « Être rappelé » replié sous le choix du métier. */ .tb-rapide--accueil { margin: 14px 0 6px; padding: 0; border: 0; box-shadow: none; background: transparent; max-width: none; } .tb-rapide--accueil summary { cursor: pointer; font: 700 15px/1.3 "Plus Jakarta Sans", sans-serif; color: var(--tb-action); } .tb-rapide--accueil form { margin-top: 12px; } /* Un
fermé gardait la place de son formulaire (Chrome récent, ::details-content) : 163 px de vide sous les cases de l'accueil (05/11/2026). Fermé, il ne montre que sa question. */ .tb-rapide details:not([open]) > :not(summary) { display: none; } @media (max-width: 700px) { .tb-rapide--accueil { margin: 14px 0 6px; padding: 0; } } /* Simulateur « Le vrai prix » (mu-plugins/timber-simulateur.php, 28/10/2026). */ .tb-simu { display: grid; grid-template-columns: 1fr 400px; gap: 28px; align-items: start; margin: 8px 0 48px; } .tb-simu__form { display: grid; gap: 26px; } .tb-simu__q { border: 0; margin: 0; padding: 0; min-width: 0; } .tb-simu__q[hidden] { display: none; } .tb-simu__q > label, .tb-simu__q legend { display: block; font: 700 18px/1.3 "Plus Jakarta Sans", sans-serif; color: var(--tb-encre); margin-bottom: 12px; padding: 0; } .tb-simu__q small { display: block; color: var(--tb-doux); font-size: 14px; margin-top: 6px; } .tb-simu__curseur { display: flex; align-items: center; gap: 18px; } .tb-simu__curseur input { flex: 1; accent-color: var(--tb-action); height: 28px; } .tb-simu__curseur output { min-width: 82px; text-align: right; font: 800 24px/1 "Plus Jakarta Sans", sans-serif; color: var(--tb-encre); } .tb-simu fieldset.tb-simu__q { display: flex; flex-wrap: wrap; gap: 10px; } .tb-simu fieldset.tb-simu__q legend { width: 100%; } .tb-simu__choix { position: relative; cursor: pointer; } .tb-simu__choix input { position: absolute; opacity: 0; pointer-events: none; } .tb-simu__choix span { display: block; padding: 13px 18px; border: 2px solid var(--tb-trait); border-radius: 10px; font: 600 16px/1.25 Inter, sans-serif; color: var(--tb-encre); background: #fff; } .tb-simu__choix span small { margin-top: 3px; font-weight: 500; } .tb-simu__choix input:checked + span { border-color: var(--tb-action); background: #FBF3EA; box-shadow: 0 0 0 1px var(--tb-action); } .tb-simu__choix input:focus-visible + span { outline: 2px solid var(--tb-encre); outline-offset: 2px; } .tb-simu__resultat { position: sticky; top: 100px; background: #15120E; color: #fff; border-radius: 16px; padding: 28px 26px; } .tb-simu__sur { margin: 0; font: 700 13px/1 "Plus Jakarta Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #FFB37A; } .tb-simu__prix { margin: 12px 0 18px; font: 800 38px/1.08 "Plus Jakarta Sans", sans-serif; letter-spacing: -.02em; } .tb-simu__postes { list-style: none; margin: 0 0 22px; padding: 0; } .tb-simu__postes li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #3A332B; font-size: 14px; color: #E5DED3; } .tb-simu__postes b { white-space: nowrap; color: #fff; } .wp-block-post-content .tb-simu__bouton { display: block; text-align: center; background: var(--tb-action); color: #fff !important; padding: 17px 18px; border-radius: 8px; font: 800 17px/1.2 "Plus Jakarta Sans", sans-serif; text-decoration: none; } .wp-block-post-content .tb-simu__bouton:hover { background: var(--tb-action-survol); } .tb-simu__note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.45; color: #BDB4A6; } .tb-prix-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 24px 0 40px; } .wp-block-post-content .tb-prix-hub a { display: block; padding: 24px; border-radius: 14px; background: var(--tb-gris); color: var(--tb-encre) !important; text-decoration: none; border: 2px solid transparent; } .wp-block-post-content .tb-prix-hub a:hover { border-color: var(--tb-action); } .tb-prix-hub b { display: block; font: 800 22px/1.2 "Plus Jakarta Sans", sans-serif; margin-bottom: 6px; } .tb-prix-hub span { color: var(--tb-doux); font-size: 15px; } @media (max-width: 860px) { .tb-simu { grid-template-columns: 1fr; } .tb-simu__resultat { position: static; } } .tb-rapide__simu { margin: 12px 0 0; font: 700 15px/1.3 "Plus Jakarta Sans", sans-serif; } .wp-block-post-content .tb-rapide__simu a { color: var(--tb-action) !important; text-decoration: none; } .wp-block-post-content .tb-rapide__simu a:hover { color: var(--tb-action-survol) !important; text-decoration: underline; } /* ========================================================================== Pages métier, version 2 (29/10/2026, 9-outils-projet/pages_metiers_v2.py) : les blocs de l'accueil (tb-accueil) + ce qui leur est propre (tb-metier). ========================================================================== */ /* Pleine largeur collée à l'en-tête, sans le titre WordPress : comme l'accueil. */ .tb-pleine-page main#wp--skip-link--target { margin-top: 0 !important; padding-top: 0 !important; } .tb-pleine-page .wp-block-post-title { display: none; } .tb-pleine-page main > .wp-block-group:has(> .wp-block-post-content) { padding-top: 0 !important; } .tb-pleine-page .wp-block-post-content { margin-top: 0 !important; } .tb-pleine-page .wp-site-blocks > footer { margin-block-start: 0 !important; } /* La photo de chaque métier remplace celle de l'accueil, dans le même bandeau. */ .tb-metier .ouverture h1 { font-size: clamp(34px, 4.4vw, 54px); } /* Le formulaire de demande rapide, posé dans le bandeau comme la carte de l'accueil. */ .tb-metier .ouverture__demande .tb-rapide { margin: 0; max-width: none; border: 0; border-radius: 10px; padding: 28px 28px 22px; box-shadow: 0 30px 80px rgba(0,0,0,.35); } .tb-metier .tb-prix-metier td.timber { font: 700 17px/1.4 var(--titre); white-space: nowrap; } .tb-metier .tb-prix-metier td.timber::before { content: none; } .tb-metier .tb-metier__conseil { margin: 48px 0 0; padding: 22px 26px; border-left: 3px solid #F0B27A; background: rgba(255,255,255,.05); color: #E8E3DC; max-width: 760px; } .tb-metier .tb-metier__conseil strong { color: #fff; } .tb-metier .resultats article p { color: #D8D2C9; margin-top: 12px; } .tb-metier .villes a .fleche { color: var(--caramel-fonce, #9E5413); } .tb-faq details { border-top: 1px solid var(--trait); padding: 0; } .tb-faq details:last-child { border-bottom: 1px solid var(--trait); } .tb-faq summary { list-style: none; cursor: pointer; padding: 24px 40px 24px 0; position: relative; font: 700 19px/1.35 var(--titre); color: var(--encre); } .tb-faq summary::-webkit-details-marker { display: none; } .tb-faq summary::after { content: "+"; position: absolute; right: 4px; top: 20px; font: 400 28px/1 var(--titre); color: var(--caramel); transition: transform .2s; } .tb-faq details[open] summary::after { transform: rotate(45deg); } .tb-faq details p { margin: 0 0 24px; color: var(--doux); max-width: 640px; } @media (max-width: 600px) { .tb-metier .ouverture__demande .tb-rapide { padding: 20px 16px 16px; } .tb-metier .tb-prix-metier td.timber { white-space: normal; } .tb-metier .tb-prix-metier td.sans::before { content: "Ce qui fait varier : "; font-weight: 600; } .tb-faq summary { font-size: 17px; } .tb-metier .villes { grid-template-columns: 1fr 1fr; column-gap: 16px; } .tb-metier .villes a { font-size: 15px; padding: 16px 0; } } /* ========================================================================== Blog « Conseils travaux » : articles (single-post) et liste (/blog/). Les variables --tb-* sont globales : ces blocs vivent hors de .tb-accueil. ========================================================================== */ .single-post .wp-block-post-content { font-size: 18px; line-height: 1.7; color: var(--tb-texte); } .single-post .wp-block-post-content h2 { font-family: var(--wp--preset--font-family--timber-titres); font-size: clamp(24px, 3vw, 30px); line-height: 1.25; color: var(--tb-encre); margin-top: 2.2em; } .single-post .wp-block-post-content a { color: var(--tb-action); text-underline-offset: 3px; } .single-post .wp-block-post-content a:hover { color: var(--tb-action-survol); } .single-post .wp-block-post-featured-image img { border-radius: 10px; aspect-ratio: 16/9; object-fit: cover; } .tb-chapo { font-size: 20px; line-height: 1.6; color: var(--tb-encre); font-weight: 500; } .tb-article-cta { margin: 2.5em 0; padding: 28px 30px; border-radius: 10px; background: var(--tb-encre); color: #E8E3DC; } .tb-article-cta p { margin: 0 0 18px; } .tb-article-cta .tb-article-cta__titre { font: 700 22px/1.3 var(--wp--preset--font-family--timber-titres); color: #fff; margin-bottom: 10px; } .single-post .wp-block-post-content .tb-article-cta__bouton { display: inline-block; padding: 14px 22px; border-radius: 8px; background: var(--tb-action); color: #fff; font-weight: 600; text-decoration: none; } .single-post .wp-block-post-content .tb-article-cta__bouton:hover { background: var(--tb-action-survol); color: #fff; } .single-post .tb-faq { --trait: var(--tb-trait); --titre: var(--wp--preset--font-family--timber-titres); --encre: var(--tb-encre); --caramel: var(--tb-action); --doux: var(--tb-doux); } .single-post .tb-faq summary { font-size: 18px; } .tb-article-voir { margin-top: 2.5em; padding-top: 1.2em; border-top: 1px solid var(--tb-trait); font-size: 16px; color: var(--tb-doux); } .blog .wp-block-post-title a, .single-post .wp-block-post-navigation-link a { color: var(--tb-encre); text-decoration: none; } .blog .wp-block-post-title a:hover { color: var(--tb-action); } @media (max-width: 600px) { .single-post .wp-block-post-content { font-size: 17px; } .tb-chapo { font-size: 18px; } .tb-article-cta { padding: 22px 18px; } .single-post .wp-block-post-content .tb-article-cta__bouton { display: block; text-align: center; } } /* Page « Devenir artisan » : l'offre fondateur à la place du formulaire de demande. */ .tb-accueil .tb-offre {background: #fff; border-radius: 10px; padding: 30px 28px 24px; box-shadow: 0 30px 80px rgba(0,0,0,.35); color: var(--texte);} .tb-accueil .tb-offre__sur {font: 700 12px/1 var(--titre); letter-spacing: .14em; text-transform: uppercase; color: var(--caramel-fonce); margin: 0 0 12px;} .tb-accueil .tb-offre__prix {font: 800 48px/1 var(--titre); color: var(--encre); margin: 0 0 12px;} .tb-accueil .tb-offre__prix small {font-size: 18px; font-weight: 600; color: var(--doux);} .tb-accueil .tb-offre__texte {color: var(--doux); margin: 0 0 22px;} .tb-accueil .tb-offre .bouton {display: flex; justify-content: center; width: 100%; box-sizing: border-box;} /* Pages « Prix » (30/10/2026) : bandeau d'une seule colonne, simulateur en pleine section. */ .tb-accueil .ouverture--simple .conteneur {grid-template-columns: minmax(0, 760px); padding-top: 72px; padding-bottom: 72px;} .tb-accueil .tb-prix__simulateur {padding-top: 56px; padding-bottom: 24px;} /* Trois cartes depuis l'ajout de « Tous les autres travaux » : sur une seule ligne, sans la troisième seule en dessous (06/11/2026). */ .tb-accueil .tb-prix__cartes {grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none;} .tb-accueil .tb-prix__conseil {margin-top: 20px; padding: 18px 20px; border-left: 3px solid var(--caramel); background: #fff; color: var(--texte);} .tb-accueil .tb-prix__liens {margin-top: 16px; color: var(--doux); font-size: 15px;} @media (max-width: 760px) { .tb-accueil .tb-prix__cartes {grid-template-columns: 1fr;} } /* Pages légales (30/10/2026) : bandeau sobre, colonne de lecture. */ .tb-accueil .ouverture--sobre::after {background: none;} .tb-accueil .ouverture--sobre .conteneur {padding-top: 64px; padding-bottom: 56px;} .tb-accueil .ouverture--sobre h1 {font-size: clamp(32px, 4vw, 48px);} .tb-accueil .tb-legal__texte {max-width: 760px; padding: 0 0 24px;} .tb-accueil .tb-legal__texte h2 {font: 800 24px/1.25 var(--titre); color: var(--encre); margin: 44px 0 12px;} .tb-accueil .tb-legal__texte h3 {font: 700 19px/1.3 var(--titre); color: var(--encre); margin: 28px 0 8px;} .tb-accueil .tb-legal__texte p, .tb-accueil .tb-legal__texte li {color: var(--texte); line-height: 1.7;} .tb-accueil .tb-legal__texte > p:first-child {color: var(--doux); font-size: 15px;} .tb-accueil .tb-legal__texte a {color: var(--caramel-fonce);} .tb-accueil .tb-sdb__prix p {color: var(--texte); margin: 0 0 18px;} .tb-accueil .tb-sdb__prix strong {color: var(--encre);} /* Sous chaque article : « Une question sur vos travaux ? » et le formulaire de demande. */ .single-post .tb-article-question { margin: 3em 0 1em; padding-top: 2em; border-top: 1px solid var(--tb-trait); } .single-post .tb-article-question .tb-rapide { margin: 18px 0 0; max-width: none; } .single-post .tb-relecture { display: inline-flex; gap: 6px; align-items: center; color: var(--tb-doux); } /* Titres équilibrés (pas de mot seul en dernière ligne), texte détaché du titre dans les sections sombres. */ .tb-accueil .titre-section { text-wrap: balance; } .tb-accueil .sombre .titre-section + p { margin-top: 16px; } /* Lisibilité (03/11/2026) : une personne de 70 ans doit pouvoir lire sans plisser les yeux. Corps de texte à 18 px, les petits textes gris à 15 ou 16 px, rien sous 14 px (sauf le bandeau des cookies), boutons de 48 px de haut au moins. */ .tb-accueil { font-size: 18px; } .tb-accueil .confiance span, .tb-accueil .service p, .tb-accueil .tb-prix__liens, .tb-accueil .tb-legal__texte > p:first-child, .tb-local__atouts, .tb-local__liens, .tb-prix-hub span, .tb-metier .villes a, .tb-accueil .tous-metiers a { font-size: 16px; } .tb-accueil .etape1__bas, .tb-envoi__note, .tb-prix p, .tb-simu__q small, .tb-simu__postes li { font-size: 15px; } .tb-rapide__note, .tb-rapide__err, .tb-accueil .etape1__haut small, .tb-accueil .surtitre, .tb-simu__note { font-size: 14px; } .tb-accueil .bouton { font-size: 17px; min-height: 48px; } @media (max-width: 600px) { .tb-accueil .metiers-choix a { font-size: 14px; } .tb-local__chapo { font-size: 18px; } } /* Audit du 03/11/2026 : contrastes et cibles tactiles. - liens du pied de page : 17 px de haut, trop petits au doigt ; on leur donne de l'air ; - en-tête « Timber » des tableaux de prix et bouton des articles : l'orange clair passait sous 4,5:1 sur blanc et sur crème, on prend l'orange foncé de la charte. */ footer.wp-block-template-part p a { display: inline-block; padding-block: 6px; } .tb-accueil .comparatif thead th.timber { color: var(--caramel-fonce); } body:not(.single-post) .tb-article-cta__bouton { color: #F0B27A !important; } /* hors article, l'encadré reste sombre : lien clair */ .tb-blog-resume p { margin: 0 0 12px; } .tb-blog-lire { display: inline-block; padding-block: 10px; color: var(--caramel-fonce, #9E5413); font-weight: 600; text-decoration: none; } .tb-blog-lire:hover { text-decoration: underline; } /* ========================================================================== Accueil v4 (04/11/2026) : la maquette 3D en haut de page (classe m3). Une scène collée à l'écran pendant que la piste défile : la maison s'ouvre en diagonale, chaque couche a sa fiche, puis elle se referme. Sans WebGL ou avec « réduire les animations », l'image fixe et les dix fiches restent lisibles. ========================================================================== */ .tb-accueil .m3 {--m3-haut: 0px; --m3-bas: 0px; position: relative; background: radial-gradient(120% 95% at 66% 42%, #FCFAF6 0%, #F3EEE6 52%, #E8E0D4 100%); color: var(--encre);} .tb-accueil .m3__piste {position: relative;} .tb-accueil .m3__scene {position: relative; overflow: hidden;} .tb-accueil .m3__toile {position: absolute; inset: 0;} .tb-accueil .m3__toile canvas {display: block; opacity: 0; transition: opacity .9s ease;} .tb-accueil .m3--pret .m3__toile canvas {opacity: 1;} .tb-accueil .m3__affiche {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .9s ease;} .tb-accueil .m3--pret .m3__affiche {opacity: 0;} .tb-accueil .m3__accroche {position: relative; z-index: 3; max-width: var(--largeur); margin: 0 auto; padding: 72px 24px 40px; pointer-events: none;} .tb-accueil .m3__accroche > * {pointer-events: auto; max-width: 560px;} .tb-accueil .m3__accroche h1 {font: 800 clamp(38px, 5.2vw, 66px)/1.02 var(--titre); letter-spacing: -0.035em; text-wrap: balance; margin: 0 0 20px;} .tb-accueil .m3__accroche h1 span {display: block; color: var(--caramel-fonce);} .tb-accueil .m3__accroche .chapo {font-size: 19px; line-height: 1.55; color: var(--texte); margin: 0 0 26px; max-width: 30em;} .tb-accueil .m3__puces {display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none;} .tb-accueil .m3__puces a {display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px; background: rgba(255,255,255,.78); box-shadow: inset 0 0 0 1px rgba(21,18,14,.1), 0 1px 2px rgba(21,18,14,.05); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 600 15px/1 var(--titre); color: var(--encre); text-decoration: none; transition: background .2s, box-shadow .2s, transform .2s;} .tb-accueil .m3__puces a:hover {background: #fff; box-shadow: inset 0 0 0 1.5px var(--caramel), 0 6px 18px rgba(21,18,14,.08); transform: translateY(-1px);} .tb-accueil .m3__puces svg {width: 18px; height: 18px; color: var(--caramel-fonce);} .tb-accueil .m3__garanties {display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--doux);} .tb-accueil .m3__garanties li {display: inline-flex; align-items: center; gap: 7px;} .tb-accueil .m3__garanties svg {width: 16px; height: 16px; color: var(--vert);} .tb-accueil .m3__indice {position: absolute; z-index: 2; left: max(24px, calc((100% - var(--largeur)) / 2 + 24px)); bottom: calc(var(--m3-bas) + 26px); transform: none; margin: 0; display: none; align-items: center; gap: 10px; font: 600 13px/1 var(--titre); letter-spacing: .12em; text-transform: uppercase; color: var(--doux); transition: opacity .4s;} .tb-accueil .m3__indice::after {content: ""; width: 1px; height: 26px; background: linear-gradient(var(--doux), transparent); animation: m3-indice 1.8s ease-in-out infinite;} @keyframes m3-indice {0%, 100% {transform: translateY(-4px); opacity: .3;} 50% {transform: translateY(4px); opacity: 1;}} .tb-accueil .m3__etiquettes {position: absolute; inset: 0; z-index: 2; pointer-events: none;} .tb-accueil .m3__etiquette {position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; margin-top: -9px; opacity: 0; transition: opacity .45s ease; font: 700 13px/18px var(--titre); letter-spacing: .02em; color: var(--encre); white-space: nowrap;} .tb-accueil .m3__etiquette i {width: 30px; height: 1px; background: currentColor; opacity: .45;} .tb-accueil .m3__etiquette span {padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px rgba(21,18,14,.08);} .tb-accueil .m3__etiquette.visible {opacity: 1;} .tb-accueil .m3__etiquette.actif span {background: var(--encre); color: #fff;} .tb-accueil .m3__bulle {position: absolute; z-index: 4; left: 0; top: 0; display: grid; gap: 3px; max-width: 280px; padding: 12px 14px; border-radius: 12px; background: rgba(21,18,14,.92); color: #fff; font-size: 14px; line-height: 1.35; pointer-events: none; box-shadow: 0 12px 30px rgba(21,18,14,.25);} .tb-accueil .m3__bulle strong {font: 700 15px/1.2 var(--titre);} .tb-accueil .m3__bulle em {font-style: normal; color: var(--tb-clair, #F0B27A); font-weight: 600; font-size: 13px;} .tb-accueil .m3__fiches {list-style: none; margin: 0; padding: 0;} .tb-accueil .m3__fiche {display: grid; gap: 10px; padding: 24px 24px 22px; border-radius: 18px; background: rgba(255,255,255,.8); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); box-shadow: inset 0 0 0 1px rgba(21,18,14,.07), 0 20px 50px rgba(21,18,14,.1);} .tb-accueil .m3__num {margin: 0; font: 700 12px/1 var(--titre); letter-spacing: .14em; color: var(--caramel-fonce);} .tb-accueil .m3__fiche h3 {font: 800 30px/1.08 var(--titre); letter-spacing: -0.02em; margin: 0;} .tb-accueil .m3__fiche p.m3__quoi {margin: 0; color: var(--doux); font-size: 15.5px; line-height: 1.5;} .tb-accueil .m3__prix {display: grid; gap: 10px; margin: 4px 0 2px;} .tb-accueil .m3__prix div {display: grid; gap: 2px;} .tb-accueil .m3__prix dt {font-size: 14px; color: var(--doux);} .tb-accueil .m3__prix dd {margin: 0; font: 700 19px/1.25 var(--titre); color: var(--encre); font-variant-numeric: tabular-nums;} .tb-accueil .m3__fiche a {justify-self: start; font: 700 15.5px/1 var(--titre); color: var(--caramel-fonce); text-decoration: none; padding: 8px 0;} .tb-accueil .m3__fiche a:hover {text-decoration: underline; text-underline-offset: 4px;} .tb-accueil .m3__fin {display: grid; gap: 16px; justify-items: start;} .tb-accueil .m3__fin h2 {font: 800 clamp(32px, 4vw, 52px)/1.05 var(--titre); letter-spacing: -0.03em; margin: 0; text-wrap: balance;} .tb-accueil .m3__fin h2 span {color: var(--caramel-fonce);} .tb-accueil .m3__fin p {margin: 0; font-size: 18px; color: var(--texte); max-width: 26em;} .tb-accueil .m3__fin .m3__boutons {display: flex; flex-wrap: wrap; gap: 12px; align-items: center;} .tb-accueil .m3__fin .m3__estimer {font: 700 16px/1 var(--titre); color: var(--encre); text-decoration: none; padding: 14px 4px;} .tb-accueil .m3__note {margin: 0; font-size: 12.5px; color: var(--doux);} .tb-accueil .m3__rail {display: none;} .tb-accueil .m3__passer {position: absolute; left: -9999px;} .tb-accueil .m3__passer:focus {left: 24px; top: 16px; z-index: 6; background: #fff; padding: 10px 14px; border-radius: 8px;} /* Version fixe (sans 3D) : l'image, puis les dix fiches en grille. */ .tb-accueil .m3:not(.m3--anime) .m3__scene {height: min(62vw, 620px);} .tb-accueil .m3:not(.m3--anime) .m3__accroche {position: absolute; inset: 0;} .tb-accueil .m3:not(.m3--anime) .m3__fiches {display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; max-width: var(--largeur); margin: 0 auto; padding: 32px 24px 56px;} .tb-accueil .m3:not(.m3--anime) .m3__fin {max-width: var(--largeur); margin: 0 auto; padding: 0 24px 64px;} /* Version animée : la piste donne la durée, la scène reste collée à l'écran. */ .tb-accueil .m3--anime .m3__piste {height: calc(900 * var(--m3-vh, 1vh));} .tb-accueil .m3--anime .m3__scene {position: sticky; top: var(--m3-haut); height: calc(100 * var(--m3-vh, 1vh) - var(--m3-haut) - var(--m3-bas));} .tb-accueil .m3--anime .m3__accroche {margin-top: calc(var(--m3-haut) + var(--m3-bas) - 100 * var(--m3-vh, 1vh)); min-height: calc(100 * var(--m3-vh, 1vh) - var(--m3-haut) - var(--m3-bas)); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding-top: 32px; padding-bottom: 96px;} .tb-accueil .m3--anime .m3__indice {display: inline-flex;} .tb-accueil .m3--anime.m3--ouverte .m3__indice, .tb-accueil .m3--anime.m3--visite .m3__indice, .tb-accueil .m3--anime.m3--fin .m3__indice {opacity: 0;} .tb-accueil .m3--anime .m3__fiches {position: absolute; z-index: 3; left: max(24px, calc((100% - var(--largeur)) / 2 + 24px)); top: 50%; width: min(380px, calc(100% - 48px)); transform: translateY(-50%);} .tb-accueil .m3--anime .m3__fiche {position: absolute; left: 0; top: 0; width: 100%; box-sizing: border-box; transform: translateY(-50%) translateX(-14px); opacity: 0; visibility: hidden; transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1), visibility 0s linear .6s;} .tb-accueil .m3--anime .m3__fiche.actif {opacity: 1; visibility: visible; transform: translateY(-50%); transition: opacity .55s ease .1s, transform .7s cubic-bezier(.2,.7,.2,1) .05s, visibility 0s;} .tb-accueil .m3--anime .m3__fin {position: absolute; z-index: 3; left: max(24px, calc((100% - var(--largeur)) / 2 + 24px)); top: 50%; width: min(520px, calc(100% - 48px)); transform: translateY(-46%); opacity: 0; visibility: hidden; transition: opacity .6s ease, transform .8s cubic-bezier(.2,.7,.2,1), visibility 0s linear .6s;} .tb-accueil .m3--anime.m3--fin .m3__fin {opacity: 1; visibility: visible; transform: translateY(-50%); transition: opacity .7s ease .15s, transform .9s cubic-bezier(.2,.7,.2,1) .1s, visibility 0s;} .tb-accueil .m3--anime .m3__rail {display: flex; flex-direction: column; gap: 12px; position: absolute; z-index: 3; right: max(20px, calc((100% - var(--largeur)) / 2)); top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity .4s;} .tb-accueil .m3--anime.m3--ouverte .m3__rail, .tb-accueil .m3--anime.m3--visite .m3__rail {opacity: 1;} .tb-accueil .m3__rail button {width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(21,18,14,.2); cursor: pointer; transition: background .3s, transform .3s;} .tb-accueil .m3__rail button:hover, .tb-accueil .m3__rail button:focus-visible {background: var(--caramel-fonce); outline: none; transform: scale(1.3);} .tb-accueil .m3__rail button.actif {background: var(--caramel-fonce); transform: scale(1.4);} @media (max-width: 760px) { .tb-accueil .m3__accroche {padding: 28px 16px 24px;} .tb-accueil .m3__accroche h1 {font-size: clamp(31px, 8.6vw, 40px); margin-bottom: 14px;} .tb-accueil .m3__accroche .chapo {font-size: 16px; margin-bottom: 16px;} .tb-accueil .m3__puces {gap: 6px; margin-bottom: 14px;} .tb-accueil .m3__puces a {padding: 9px 12px; font-size: 14px;} .tb-accueil .m3__garanties {font-size: 13px; gap: 4px 12px;} .tb-accueil .m3--anime .m3__accroche {justify-content: flex-start; padding-top: 22px;} .tb-accueil .m3--anime .m3__fiches {left: 12px; right: 12px; width: auto; top: auto; bottom: calc(var(--m3-bas) + 14px); transform: none;} .tb-accueil .m3--anime .m3__fiche {top: auto; bottom: 0; transform: translateY(14px); padding: 18px 18px 14px; gap: 6px;} .tb-accueil .m3--anime .m3__fiche.actif {transform: none;} .tb-accueil .m3__fiche h3 {font-size: 24px;} .tb-accueil .m3__fiche p.m3__quoi {display: none;} .tb-accueil .m3__prix {grid-template-columns: 1fr 1fr; gap: 8px;} .tb-accueil .m3__prix dt {font-size: 12.5px;} .tb-accueil .m3__prix dd {font-size: 15.5px;} .tb-accueil .m3--anime .m3__fin {left: 16px; right: 16px; width: auto; top: 30px; transform: translateY(8px);} .tb-accueil .m3--anime.m3--fin .m3__fin {transform: none;} /* Fin de visite sur téléphone : un bloc plus court, pour que le toit ne passe plus sous le bouton (Nico, 05/11/2026). La note sur les prix suit les fiches, qui ne sont plus affichées ici. */ .tb-accueil .m3--anime .m3__fin {gap: 12px;} .tb-accueil .m3--anime .m3__fin p {font-size: 16px; line-height: 1.5;} .tb-accueil .m3--anime .m3__fin .m3__note {display: none;} .tb-accueil .m3--anime .m3__fin .m3__boutons {gap: 2px 14px;} .tb-accueil .m3--anime .m3__rail {right: 8px; gap: 9px;} .tb-accueil .m3__rail button {width: 8px; height: 8px;} .tb-accueil .m3__etiquette {font-size: 12px;} } @media (prefers-reduced-motion: reduce) { .tb-accueil .m3__indice::after {animation: none;} } .tb-accueil .m3__bulle[hidden] {display: none;} /* Accueil v4, suite : traits des étiquettes, présentation de la visite, soir. */ .tb-accueil .m3__traits {position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none;} .tb-accueil .m3__traits line {stroke: rgba(21,18,14,.38); stroke-width: 1; opacity: 0; transition: opacity .45s ease;} .tb-accueil .m3__traits circle {fill: var(--encre); opacity: 0; transition: opacity .45s ease;} .tb-accueil .m3__traits .visible {opacity: 1;} .tb-accueil .m3__etiquette {margin-top: -12px;} .tb-accueil .m3__intro {position: absolute; z-index: 3; left: max(24px, calc((100% - var(--largeur)) / 2 + 24px)); top: 50%; width: min(420px, calc(100% - 48px)); transform: translateY(-46%); opacity: 0; visibility: hidden; transition: opacity .6s ease, transform .8s cubic-bezier(.2,.7,.2,1), visibility 0s linear .6s;} .tb-accueil .m3__intro h2 {font: 800 clamp(30px, 3.6vw, 46px)/1.05 var(--titre); letter-spacing: -0.03em; margin: 0 0 14px; text-wrap: balance;} .tb-accueil .m3__intro h2 span {color: var(--caramel-fonce);} .tb-accueil .m3__intro p:last-child {margin: 0; font-size: 17px; color: var(--texte); max-width: 26em;} .tb-accueil .m3:not(.m3--anime) .m3__intro {display: none;} .tb-accueil .m3--anime.m3--ouverte .m3__intro {opacity: 1; visibility: visible; transform: translateY(-50%); transition: opacity .7s ease .1s, transform .9s cubic-bezier(.2,.7,.2,1) .05s, visibility 0s;} .tb-accueil .m3__scene::before {content: ""; position: absolute; inset: 0; background: radial-gradient(120% 95% at 64% 38%, #4B4359 0%, #24212F 48%, #0F0E14 100%); opacity: 0; transition: opacity 1.6s ease; pointer-events: none;} .tb-accueil .m3--anime.m3--fin .m3__scene::before {opacity: 1;} .tb-accueil .m3--fin .m3__fin h2 {color: #fff;} .tb-accueil .m3--fin .m3__fin h2 span {color: var(--tb-clair, #F0B27A);} .tb-accueil .m3--fin .m3__fin p {color: rgba(255,255,255,.84);} .tb-accueil .m3--fin .m3__fin .m3__estimer {color: #fff;} .tb-accueil .m3--fin .m3__fin .m3__note {color: rgba(255,255,255,.6);} @media (max-width: 760px) { .tb-accueil .m3--anime .m3__intro {left: 16px; right: 16px; width: auto; top: 26px; transform: translateY(8px);} .tb-accueil .m3--anime.m3--ouverte .m3__intro {transform: none;} .tb-accueil .m3__intro h2 {font-size: 28px;} .tb-accueil .m3__intro p:last-child {font-size: 15px;} } /* Le rail des métiers, en bas de l'écran, pour ne jamais gêner les étiquettes. */ .tb-accueil .m3--anime .m3__rail {flex-direction: row; top: auto; right: auto; left: 50%; bottom: calc(var(--m3-bas) + 24px); transform: translateX(-50%); gap: 12px; padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(21,18,14,.06);} .tb-accueil .m3--anime.m3--fin .m3__rail {opacity: 0;} @media (max-width: 760px) { .tb-accueil .m3--anime .m3__rail {right: auto; gap: 9px; padding: 7px 11px; bottom: auto; top: 12px;} } /* Accueil v4 : repères du schéma pendant la visite (le nom des pièces, comme sur un plan d'artisan). */ .tb-accueil .m3__repere {position: absolute; left: 0; top: 0; margin-top: -11px; padding: 3px 9px 3px 8px; border-radius: 6px; background: rgba(255,255,255,.9); box-shadow: inset 0 0 0 1px rgba(21,18,14,.1), 0 6px 18px rgba(21,18,14,.08); font: 650 12.5px/16px var(--titre); letter-spacing: .01em; color: var(--encre); white-space: nowrap; opacity: 0; transition: opacity .45s ease; pointer-events: none;} .tb-accueil .m3__repere.visible {opacity: 1;} .tb-accueil .m3__traits polyline {fill: none; stroke: rgba(21,18,14,.55); stroke-width: 1; opacity: 0; transition: opacity .45s ease;} .tb-accueil .m3__traits circle.repere {fill: #fff; stroke: var(--caramel-fonce); stroke-width: 1.6;} .tb-accueil .m3__traits .visible {opacity: 1;} @media (max-width: 760px) { .tb-accueil .m3__repere {font-size: 11.5px; line-height: 15px; padding: 2px 7px;} } @media (max-width: 760px) { .tb-accueil .m3--anime.m3--ouverte .m3__rail {opacity: 0;} } /* Accueil v4 : repères de la maison fermée (cuisine, salle de bain, jardin...) ; un clic ouvre le détail de la partie. */ .tb-accueil .m3__point {position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 7px; margin: -13px 0 0 -13px; padding: 6px 12px 6px 9px; border: 0; border-radius: 999px; background: rgba(255,255,255,.93); box-shadow: 0 6px 18px rgba(21,18,14,.16), inset 0 0 0 1px rgba(21,18,14,.08); font: 700 13px/1 var(--titre); color: var(--encre); white-space: nowrap; cursor: pointer; pointer-events: auto; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s, background .2s, color .2s;} .tb-accueil .m3__point.visible {opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s, background .2s, color .2s;} .tb-accueil .m3__point i {width: 9px; height: 9px; border-radius: 50%; background: var(--caramel); animation: m3-pouls 2.4s ease-out infinite;} .tb-accueil .m3__point:hover, .tb-accueil .m3__point:focus-visible {background: var(--encre); color: #fff; outline: none;} @keyframes m3-pouls {0% {box-shadow: 0 0 0 0 rgba(194,106,31,.55);} 70% {box-shadow: 0 0 0 10px rgba(194,106,31,0);} 100% {box-shadow: 0 0 0 0 rgba(194,106,31,0);}} @media (prefers-reduced-motion: reduce) {.tb-accueil .m3__point i {animation: none;}} @media (max-width: 760px) {.tb-accueil .m3__point {font-size: 12px; padding: 5px 10px 5px 8px; margin: -12px 0 0 -12px;}} /* Accueil, charte de la maquette (04/11/2026) : fond blanc derrière la maison, le texte posé sur le blanc à l'écart de la maison, les garanties en liste cochée, les métiers en tuiles comme dans le formulaire. Seulement sur la page qui porte tb-accueil--blanc. */ .tb-accueil--blanc .m3 {background: #FFFFFF;} .tb-accueil--blanc .m3__puces a {border-radius: 10px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--trait); -webkit-backdrop-filter: none; backdrop-filter: none;} .tb-accueil--blanc .m3__puces a:hover {box-shadow: inset 0 0 0 1.5px var(--caramel); transform: translateY(-1px);} .tb-accueil--blanc .m3__puces svg {color: var(--caramel);} .tb-accueil--blanc .m3__garanties {color: var(--texte);} .tb-accueil--blanc .m3__garanties svg {color: var(--caramel);} @media (min-width: 761px) { .tb-accueil--blanc .m3__accroche {padding-top: 96px;} .tb-accueil--blanc .m3__accroche h1 {font-size: clamp(38px, 4.7vw, 60px); line-height: 1.05; letter-spacing: -0.02em;} .tb-accueil--blanc .m3__accroche .chapo {font-size: 18px; line-height: 1.6; max-width: 28em;} .tb-accueil--blanc .m3__garanties {flex-direction: column; gap: 10px; font-size: 16px;} } /* Pendant le chargement de la maison, les fiches et la fin se cachent tout de suite, sans fondu : sinon elles passent une seconde par-dessus le titre. */ .tb-accueil--blanc .m3--anime:not(.m3--pret) :is(.m3__fiche, .m3__fin, .m3__intro) {transition: none;} /* Téléphone : le texte reste sur un blanc franc, la maison apparaît dessous. */ @media (max-width: 760px) { .tb-accueil--blanc .m3--anime .m3__garanties {position: relative;} .tb-accueil--blanc .m3--anime .m3__garanties::before {content: ""; position: absolute; z-index: -1; left: -16px; right: -16px; top: -16px; bottom: -40px; background: linear-gradient(#FFFFFF 62%, rgba(255,255,255,0)); pointer-events: none;} } /* Charte de la maquette (04/11/2026) : le logo noir dans l'en-tête de tout le site, à la place du carré beige. */ header img[src*="/illustrations/marque.png"] {content: url(/illustrations/marque-noire.png); width: 34px !important; height: 34px !important; border-radius: 8px;} /* ========================================================================== Accueil, retours de Nico (appel du 05/11/2026) : classe tb-accueil--nico, posée par 9-outils-projet/accueil_v4.py. Les métiers en photo, leur nom en blanc qui grandit au survol ; les cases du formulaire en photo ; plus de petites étiquettes orange au-dessus des titres (« ça fait IA ») ; des textes plus foncés ; blanc et gris en alternance ; des questions fréquentes plus grandes. ========================================================================== */ .tb-accueil--nico {--texte: #26221D; --doux: #4F4943; --gris: #F2EFEA;} .tb-accueil--nico .surtitre {display: none;} .tb-accueil--nico .m3__accroche .surtitre {display: block;} /* Le bandeau « Entreprises vérifiées · Une demande, un seul artisan… » répétait mot pour mot les garanties du haut de page (« tu te répètes de fou », Nico, 05/11/2026) : retiré de l'accueil. */ .tb-accueil--nico .confiance {display: none;} /* Les métiers : la photo en entier, un voile sombre, le nom en blanc par-dessus. */ .tb-accueil--nico .services {gap: 18px;} .tb-accueil--nico .service {position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 3 / 4; padding: 22px; border-radius: 14px; overflow: hidden; color: #fff;} .tb-accueil--nico .service__image {position: absolute; inset: 0; z-index: 0; aspect-ratio: auto; border-radius: 0;} .tb-accueil--nico .service__num {display: none;} .tb-accueil--nico .service::after {content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(21,18,14,.05) 25%, rgba(21,18,14,.8) 100%); transition: opacity .35s ease;} .tb-accueil--nico .service h3, .tb-accueil--nico .service p {position: relative; z-index: 2;} .tb-accueil--nico .service h3 {display: block; margin: 0 0 6px; font-size: 25px; color: #fff; transform-origin: left bottom; transition: transform .35s cubic-bezier(.2,.7,.2,1);} .tb-accueil--nico .service p {color: rgba(255,255,255,.88); font-size: 15px; line-height: 1.4;} .tb-accueil--nico .service .fleche {color: #F0B27A; display: inline-block; transition: transform .35s;} .tb-accueil--nico .service:hover h3 {transform: scale(1.16);} .tb-accueil--nico .service:hover .service__image img {transform: scale(1.05);} /* Les cases du formulaire : une photo par métier, le nom en blanc, plus gros au survol. */ .tb-accueil--nico .metiers-choix {gap: 8px;} .tb-accueil--nico .metiers-choix a {position: relative; isolation: isolate; overflow: hidden; justify-content: flex-end; align-items: flex-start; min-height: 104px; padding: 12px 14px; border: 0; border-radius: 10px; color: #fff; text-align: left; font-size: 16px; font-weight: 700; text-shadow: 0 1px 8px rgba(0,0,0,.35); background: #15120E var(--photo) var(--pos, center) / cover no-repeat; transition: transform .2s ease, font-size .25s ease;} .tb-accueil--nico .metiers-choix a::before {content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(21,18,14,.15) 0%, rgba(21,18,14,.45) 45%, rgba(21,18,14,.85) 100%); transition: opacity .25s ease;} .tb-accueil--nico .metiers-choix a:hover {background: #15120E var(--photo) var(--pos, center) / cover no-repeat; transform: translateY(-2px); font-size: 19px;} /* La photo de plomberie est centrée sur une montre : on la décale vers les tuyaux. */ .tb-accueil--nico .metiers-choix a[href*="trade=plomberie"] {--pos: 0% 42%;} .tb-accueil--nico .service img[src*="plomberie"] {object-position: 0% 50%;} .tb-accueil--nico .metiers-choix a:hover::before {opacity: .8;} .tb-accueil--nico .metiers-choix svg {display: none;} /* Miniatures de 480 px (14 à 24 Ko) au lieu des photos de 960 px : les neuf cases tiraient 400 Ko en même temps que l'image de la maison, l'affichage principal du téléphone en 4G (4,6 s) attendait. La propriété !important passe devant celle écrite dans la page (06/11/2026). */ .tb-accueil--nico .metiers-choix a[href*="trade=renovation"] {--photo: url(/photos/renovation-480.jpg) !important;} .tb-accueil--nico .metiers-choix a[href*="trade=salle-de-bain"] {--photo: url(/photos/salle-de-bain-480.jpg) !important;} .tb-accueil--nico .metiers-choix a[href*="trade=cuisine"] {--photo: url(/photos/cuisine-480.jpg) !important;} .tb-accueil--nico .metiers-choix a[href*="trade=plomberie"] {--photo: url(/photos/plomberie-480.jpg) !important;} .tb-accueil--nico .metiers-choix a[href*="trade=electricite"] {--photo: url(/photos/electricite-480.jpg) !important;} .tb-accueil--nico .metiers-choix a[href*="trade=peinture"] {--photo: url(/photos/peinture-480.jpg) !important;} .tb-accueil--nico .metiers-choix a[href*="trade=carrelage"] {--photo: url(/photos/carrelage-480.jpg) !important;} .tb-accueil--nico .metiers-choix a[href*="trade=chauffage"] {--photo: url(/photos/chauffage-480.jpg) !important;} .tb-accueil--nico .metiers-choix a[href$="#/projet/nouveau"] {--photo: url(/photos/artisans-chantier-480.jpg) !important;} /* Ces vignettes (et la photo des artisans, plus bas) sont à plus de 8 000 px sous le haut de l'écran : elles attendent que l'image de la maison soit affichée (classe posée par timber-charte-css.php, 4 s au plus) pour ne pas lui prendre la bande passante en 4G (06/11/2026). */ html:not(.tb-photos-pretes) .tb-accueil--nico .metiers-choix a[href] {--photo: none !important;} html:not(.tb-photos-pretes) .tb-accueil .artisans__photo {background-image: none;} /* « Tout votre chantier dans votre poche » : chaque étape occupait 76 % d'écran (« un peu vide, comme une slide », Nico) ; resserrées, et les étapes qui ne sont pas à l'écran restent lisibles. */ @media (min-width: 961px) { .tb-accueil--nico .pr__etape {min-height: 52vh;} .tb-accueil--nico.tb-accueil .pr--anime .pr__etape:not(.actif) {opacity: .42;} } /* Questions fréquentes : plus grandes, elles occupent la place au lieu de laisser un vide. */ .tb-accueil--nico .faq__grille {grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);} .tb-accueil--nico .faq summary {padding: 28px 56px 28px 0; font-size: 22px;} .tb-accueil--nico .faq details p {font-size: 18px; line-height: 1.6;} @media (max-width: 960px) { .tb-accueil--nico .services {grid-template-columns: repeat(2, 1fr);} } @media (max-width: 600px) { .tb-accueil--nico .services {grid-template-columns: repeat(2, 1fr); gap: 10px;} .tb-accueil--nico .service {aspect-ratio: 4 / 5; padding: 14px; border-radius: 12px;} .tb-accueil--nico .service h3 {font-size: 18px; margin: 0;} .tb-accueil--nico .service p {display: none;} .tb-accueil--nico .metiers-choix a {min-height: 84px; padding: 10px; font-size: 14px;} .tb-accueil--nico .faq summary {padding: 22px 44px 22px 0; font-size: 18px;} .tb-accueil--nico .faq details p {font-size: 16px;} } /* ========================================================================== Pages métier, ville et « métier + ville » (classe tb-metier, plus de 850 pages) — reprise du 06/11/2026 : « nos pages ne font pas pro » (Jacques), avec les retours de Nico du 05/11. Photo nette en ouverture et dans la première section (mu-plugins/timber-pages-metier-photo.php), plus de petites étiquettes orange au-dessus des titres, des cartes au lieu des listes numérotées « 01, 02 », des textes plus foncés, les villes en liste compacte, des questions fréquentes plus grandes. Revenir en arrière : retirer ce bloc. ========================================================================== */ .tb-metier {--texte: #26221D; --doux: #4F4943; --gris: #F2EFEA;} .tb-metier section {padding: 96px 0;} .tb-metier section .surtitre {display: none;} .tb-metier .ouverture__fond {inset: 0; filter: saturate(1.05); transform: none;} .tb-metier .ouverture::after {background: linear-gradient(90deg, rgba(14,12,9,.9) 0%, rgba(14,12,9,.74) 46%, rgba(14,12,9,.28) 100%);} /* La photo du métier, nette, sous le titre de la première section. */ .tb-metier .tb-metier__photo {margin: 32px 0 0; max-width: 460px; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; box-shadow: 0 22px 50px rgba(21,18,14,.14);} .tb-metier .tb-metier__photo img {width: 100%; height: 100%; object-fit: cover; display: block;} .tb-metier .tb-metier__photo img[src*="/plomberie"] {object-position: 0% 50%;} /* Téléphone, pages avec le formulaire rapide : « Gratuit et sans engagement » suffit au-dessus du formulaire ; les deux autres garanties sont dites dans le chapô et dans le bandeau qui suit. Le formulaire remonte d'une centaine de pixels, son premier champ entre dans le premier écran (06/11/2026). */ @media (max-width: 600px) { .tb-metier .ouverture:has(#demande) .garanties li:nth-child(n+2) {display: none;} } /* Téléphone (12/11/2026) : le formulaire commençait à 694 px sur 812, sous un chapô de cinq lignes. Le chapô passe à deux lignes et le surtitre disparaît : le formulaire entre dans le premier écran. Le texte complet reste dans la page. */ @media (max-width: 600px) { .tb-metier .ouverture:has(#demande) .surtitre {display: none;} .tb-metier .ouverture:has(#demande) p.chapo {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 16px; margin: 10px 0 12px;} .tb-metier .ouverture:has(#demande) .conteneur {padding-top: 16px;} } /* En haut des pages plomberie aussi : sur téléphone, les tuyaux et les mains plutôt que la montre (06/11/2026). */ .tb-metier .ouverture__fond[style*="/photos/plomberie"] {background-position: 10% 50%;} /* Des cartes au lieu de la liste numérotée. */ .tb-metier .liste-numerotee {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;} .tb-metier .liste-numerotee li {display: block; padding: 26px 24px; border: 1px solid var(--trait); border-radius: 14px; background: #fff; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;} .tb-metier .liste-numerotee li:last-child {border-bottom: 1px solid var(--trait);} .tb-metier .liste-numerotee li::before {content: none;} .tb-metier .liste-numerotee li:hover {border-color: var(--caramel); box-shadow: 0 14px 34px rgba(21,18,14,.08); transform: translateY(-2px);} .tb-metier .liste-numerotee h3 {font-size: 19px; line-height: 1.3; margin-bottom: 8px;} .tb-metier .liste-numerotee p {font-size: 15.5px; line-height: 1.55;} .tb-metier section.gris .liste-numerotee li {background: #fff;} /* Les villes : une liste compacte au lieu d'un grand tableau. */ .tb-metier .villes {grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px 20px; margin-top: 32px; border-top: 0;} .tb-metier .villes a {padding: 9px 0; border-bottom: 0; justify-content: flex-start; font: 500 15px/1.35 Inter, sans-serif; color: var(--texte);} .tb-metier .villes a small, .tb-metier .villes a .fleche {display: none;} .tb-metier .villes a:hover {color: var(--caramel-fonce); text-decoration: underline; text-underline-offset: 3px;} /* Questions fréquentes plus grandes. */ .tb-metier .tb-faq summary {padding: 26px 48px 26px 0; font-size: 21px;} .tb-metier .tb-faq details p {font-size: 17px; line-height: 1.6;} @media (max-width: 960px) { .tb-metier .tb-metier__photo {max-width: none; aspect-ratio: 16 / 9;} .tb-metier .villes {grid-template-columns: repeat(3, minmax(0, 1fr));} } @media (max-width: 600px) { .tb-metier section {padding: 64px 0;} .tb-metier .liste-numerotee {grid-template-columns: 1fr; gap: 12px;} .tb-metier .liste-numerotee li {padding: 20px 18px;} .tb-metier .villes {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px;} .tb-metier .villes a {font-size: 15px; padding: 10px 0;} .tb-metier .tb-faq summary {padding: 20px 40px 20px 0; font-size: 18px;} .tb-metier .tb-faq details p {font-size: 16px;} } /* ========================================================================== Blog (/blog/ et catégories) — 06/11/2026 : une grille de cartes (photo, titre, résumé, date) au lieu d'une colonne d'images, le dernier article mis en avant. ========================================================================== */ :is(.blog, .category, .archive) main#wp--skip-link--target {max-width: 1240px; margin: 0 auto !important; padding: 56px 24px 96px !important; box-sizing: border-box;} :is(.blog, .category, .archive) main > h1 {font-size: clamp(34px, 4vw, 52px); line-height: 1.08; max-width: 780px; margin: 0 !important;} :is(.blog, .category, .archive) .wp-block-query {margin: 36px 0 0 !important; max-width: none !important;} :is(.blog, .category, .archive) .wp-block-post-template {margin: 0 !important; max-width: none !important;} :is(.blog, .category, .archive) .wp-block-post-template {display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px;} :is(.blog, .category, .archive) .wp-block-post-template > li {margin: 0 !important; width: auto !important; max-width: none !important;} :is(.blog, .category, .archive) .wp-block-post > .wp-block-group {display: flex; flex-direction: column; height: 100%; padding: 0 !important; border: 1px solid var(--tb-trait); border-radius: 14px; overflow: hidden; background: #fff; transition: box-shadow .2s ease, transform .2s ease;} :is(.blog, .category, .archive) .wp-block-post > .wp-block-group > * {max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;} :is(.blog, .category, .archive) .wp-block-post > .wp-block-group:hover {box-shadow: 0 16px 40px rgba(21,18,14,.1); transform: translateY(-2px);} :is(.blog, .category, .archive) .wp-block-post-featured-image {margin: 0 !important; aspect-ratio: 16 / 10; overflow: hidden; background: var(--tb-gris);} :is(.blog, .category, .archive) .wp-block-post-featured-image img, :is(.blog, .category, .archive) .wp-block-post-featured-image a {display: block; width: 100%; height: 100%; object-fit: cover;} :is(.blog, .category, .archive) .wp-block-post-title {font-size: 20px !important; line-height: 1.3 !important; margin: 20px 22px 10px !important;} :is(.blog, .category, .archive) .tb-blog-resume {margin: 0 22px !important; font-size: 15px; line-height: 1.55; color: var(--tb-doux);} :is(.blog, .category, .archive) .tb-blog-resume p {margin: 0 0 12px;} :is(.blog, .category, .archive) .tb-blog-lire {font-weight: 600; color: var(--tb-action); text-decoration: none;} :is(.blog, .category, .archive) .wp-block-post-date {margin: auto 22px 20px !important; padding-top: 4px; font-size: 13px; color: var(--tb-doux);} :is(.blog, .category, .archive) .wp-block-post-date a {color: inherit; text-decoration: none;} @media (min-width: 960px) { /* Le dernier article sur toute la largeur, photo à gauche. */ :is(.blog, .category, .archive) .wp-block-post-template > li:first-child {grid-column: 1 / -1;} :is(.blog, .category, .archive) .wp-block-post-template > li:first-child > .wp-block-group {display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: auto auto 1fr; align-content: start;} :is(.blog, .category, .archive) li:first-child .wp-block-post-featured-image {grid-row: 1 / 4; aspect-ratio: auto; min-height: 360px;} :is(.blog, .category, .archive) li:first-child .wp-block-post-title {font-size: 30px !important; margin: 40px 40px 14px !important;} :is(.blog, .category, .archive) li:first-child .tb-blog-resume {margin: 0 40px !important; font-size: 17px;} :is(.blog, .category, .archive) li:first-child .wp-block-post-date {margin: 8px 40px 36px !important;} } @media (max-width: 960px) and (min-width: 601px) { :is(.blog, .category, .archive) .wp-block-post-template {grid-template-columns: repeat(2, minmax(0, 1fr));} } @media (max-width: 600px) { :is(.blog, .category, .archive) main#wp--skip-link--target {padding: 36px 16px 64px !important;} :is(.blog, .category, .archive) .wp-block-post-template {grid-template-columns: 1fr; gap: 18px;} } /* Page introuvable (06/11/2026, mu-plugins/timber-page-introuvable.php) : la demande, puis les portes d'entrée. */ .tb-404 { margin-top: 22px; font-size: 17px; } .tb-404 p { margin: 0; } .tb-404__liens { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; } .tb-404__liens a { color: var(--tb-encre, #15120E); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }