/* ========================================================================== PAGE AGENCE — /applicateur/[slug]/ (Maquette B) Chargé uniquement sur le single applicateur (voir functions.php). S'appuie sur les variables du thème : --couleur-principale, --border-radius… ========================================================================== */ .template-page-agence { max-width: 1180px; width: 90%; margin: 0 auto; } .template-page-agence .breadcrumb { text-align: center; margin: 20px 0; } .agence-section { margin: 60px 0; } .agence-section h2 { margin-bottom: 25px; text-align: center; } /* -------------------------------------------------------------------------- 1. Entête — bandeau identité GMB enrichi La photo du dirigeant est le signal EEAT central : traitée en élément fort. -------------------------------------------------------------------------- */ /* Fond gris bord à bord (la page est contrainte à 1180px : on fait déborder le bandeau sur toute la fenêtre, le contenu reste aligné sur la page) */ .agence-entete__inner { display: flex; gap: 50px; align-items: flex-start; background-color: var(--couleur-fond); width: 100vw; margin-left: calc(50% - 50vw); padding: 30px max(20px, calc((100vw - 1180px) / 2)); } .agence-entete__photo { flex: 0 0 200px; } .agence-entete__photo img { width: 200px; height: 200px; object-fit: cover; border-radius: 50%; border: 4px solid var(--couleur-principale); } .agence-entete__dirigeant { margin-top: 15px; line-height: 1.4; text-align: center; } .agence-entete__photo .link-btn-orange { margin: 15px auto 0; } .agence-entete__dirigeant strong { display: block; font-size: 20px; color: var(--couleur-noir); } .agence-entete__dirigeant span { color: var(--couleur-gris); font-size: 15px; } .agence-entete__contenu { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 30px; } h1.agence-entete__titre, p.agence-entete__titre { margin: 0; line-height: 1.2; text-align: center; color: var(--couleur-principale); margin-bottom:10px !important;} /* Sous-titre en deux lignes : « Applicateur Exclusif VERTIKAL® » en gris normal, puis la zone en gris gras */ .agence-entete__sous-titre { display: block; font-size: 0.55em; font-weight: 400; color: var(--couleur-gris); margin-top: 8px; } .agence-entete__zone { display: block; font-size: 0.55em; font-weight: 700; color: var(--couleur-gris); margin-top: 4px; } .agence-entete__cols { display: flex; flex-wrap: wrap; gap: 30px 60px; justify-content: center; align-items: flex-start; } .agence-entete__badges-col { display: flex; flex-direction: column; gap: 18px; max-width: 440px; } .agence-entete__badges { display: flex; flex-wrap: wrap; gap: 10px; } .agence-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 20px; background-color: var(--couleur-blanc); border: 1px solid var(--couleur-gris-light); color: var(--couleur-noir); } .agence-badge--reseau { background-color: var(--couleur-principale); border-color: var(--couleur-principale); color: var(--couleur-blanc); } .agence-badge i { font-size: 12px; } .agence-entete__avis { display: flex; flex-wrap: wrap; gap: 15px; } .agence-avis-badge { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; background: var(--couleur-blanc); border-radius: 12px; padding: 8px 14px; box-shadow: 0 1px 4px rgba(0,0,0,.08); } .agence-avis-badge__logo { width: 22px; height: auto; } .agence-avis-badge--google > i { font-size: 20px; color: #4285F4; } .agence-avis-badge__infos { display: flex; flex-direction: column; line-height: 1.3; } .agence-avis-badge__note { font-weight: 700; font-size: 14px; } .agence-avis-badge__note .rated { color: #f5a623; } .agence-avis-badge__count { font-size: 12px; color: var(--couleur-gris); } .agence-entete__coordonnees { display: flex; flex-direction: column; gap: 14px; } .agence-entete__coord-item { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; font-weight: 600; } .agence-entete__coord-item i { color: var(--couleur-principale); margin-top: 3px; } .agence-entete__coord-item a { color: inherit; font-weight: 600; text-decoration: none; } .agence-entete__horaires ul { list-style: none; margin: 0; padding: 0; font-size: 13px; columns: 2; column-gap: 25px; } .agence-entete__horaires li strong { display: inline-block; min-width: 70px; } .agence-entete__horaires li::before {content:"" !important; display: none !important;} .agence-entete__ctas { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; } .agence-entete__ctas .link-btn-orange, .agence-cta-final__boutons .link-btn-orange { margin: 10px 0 0; } .agence-btn--secondaire { background-color: var(--couleur-noir); } /* Bouton contour (« Visiter le site ») : transparent, contour noir, orange au survol */ .agence-btn--contour { background-color: transparent; color: var(--couleur-noir); border: 1px solid var(--couleur-noir); } .agence-btn--contour:hover { color: var(--couleur-principale); border-color: var(--couleur-principale); } .agence-intro { margin: 30px auto 0; max-width: 900px; } /* Intro : texte à gauche, formulaire de contact en carte à droite (remplace l'ancienne photo intro_photo) */ .agence-intro--avec-formulaire { display: flex; gap: 40px; align-items: flex-start; max-width: none; } .agence-intro__texte { flex: 1 1 55%; min-width: 0; } .agence-intro__formulaire { flex: 0 1 45%; min-width: 0; background-color: var(--couleur-fond); border-radius: var(--border-radius); padding: 30px; scroll-margin-top: 13rem; /* ancre #formulaire-contact : même dégagement sous le header que les autres ancres du thème */ } html { scroll-behavior: smooth; } .agence-intro__formulaire-titre { margin: 0 0 20px; font-size: 22px; text-align: center; color: var(--couleur-principale); } .agence-intro__formulaire form { max-width: none; } /* Champs en blanc pour ressortir sur le fond gris de la carte */ .agence-intro__formulaire input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .agence-intro__formulaire select, .agence-intro__formulaire textarea { width: 100%; background-color: var(--couleur-blanc); } /* Sans texte d'intro, le formulaire reste centré sur une largeur raisonnable */ .agence-intro__formulaire:only-child { flex: 0 1 600px; margin: 0 auto; } @media screen and (max-width: 850px) { .agence-intro--avec-formulaire { flex-direction: column; } .agence-intro__formulaire { width: 100%; flex-basis: auto; padding: 25px 20px; } } /* -------------------------------------------------------------------------- Sections SEO — photo optionnelle à gauche ou à droite du texte (sans photo, le texte occupe naturellement toute la largeur) -------------------------------------------------------------------------- */ .agence-media-texte { display: flex; gap: 40px; align-items: center; } .agence-media-texte--gauche { flex-direction: row-reverse; } .agence-media-texte__texte { flex: 1 1 60%; min-width: 0; } .agence-media-texte__photo { flex: 0 1 40%; margin: 0; } .agence-media-texte__photo img { width: 100%; height: auto; display: block; border-radius: var(--border-radius); } @media screen and (max-width: 850px) { .agence-media-texte, .agence-media-texte--gauche { flex-direction: column; } .agence-media-texte__photo { width: 100%; } } /* -------------------------------------------------------------------------- 1bis. Carte + infos + horaires — même bloc que la page entreprise locale des sites Applicateurs (CSS repris d'applicateur-child, fond gris pleine largeur : la page est contrainte à 1180px, on déborde sur la fenêtre) -------------------------------------------------------------------------- */ .bloc-carte-entreprise { width: 100vw; margin-left: calc(50% - 50vw); } .bloc-carte-entreprise__inner { max-width: 118rem; margin: 0 auto; display: flex; flex-direction: column; gap: 3rem; border-radius: var(--border-radius); overflow: hidden; } .bloc-carte-entreprise__gauche { display: flex; flex-direction: column; gap: 4rem; padding: 4rem 0; } .bloc-carte-entreprise__map { width: 100%; min-height: 400px; overflow: hidden; background: #e8e8e8; } .bloc-carte-entreprise__map iframe { width: 100%; height: 100%; min-height: 400px; display: block; } .bloc-carte-entreprise__infos-row { display: flex; flex-direction: column; gap: 2rem; } .bloc-carte-entreprise__coords { display: flex; flex-direction: column; gap: 2rem; } .bloc-carte-entreprise__coordonnees { display: flex; flex-direction: column; gap: 0.8rem; } .bloc-carte-entreprise__coord-item { display: flex; align-items: center; gap: 1rem; font-size: 1.4rem; color: var(--couleur-noir); } .bloc-carte-entreprise__coord-item i { color: var(--couleur-principale); font-size: 1.6rem; width: 2rem; text-align: center; flex-shrink: 0; } .bloc-carte-entreprise__coord-item a { color: var(--couleur-principale); font-weight: 600; } .bloc-carte-entreprise__coord-item a:hover { color: var(--couleur-noir); } .bloc-carte-entreprise__etablissements { background: var(--couleur-blanc); border-radius: var(--border-radius); padding: 1.6rem 2rem; } .bloc-carte-entreprise__etablissements-titre { display: flex; align-items: center; gap: 0.8rem; font-size: 1.4rem; font-weight: 700; color: var(--couleur-noir); margin-bottom: 1.2rem; } .bloc-carte-entreprise__etablissements-titre i { color: var(--couleur-principale); font-size: 1.6rem; } .bloc-carte-entreprise__etablissements-liste { display: flex; flex-direction: column; gap: 0.8rem; } .bloc-carte-entreprise__etablissement { display: flex; flex-direction: column; gap: 0.2rem; font-size: 1.3rem; color: var(--couleur-noir); padding-bottom: 0.8rem; border-bottom: 1px solid #e8e8e8; } .bloc-carte-entreprise__etablissement:last-child { border-bottom: none; padding-bottom: 0; } .bloc-carte-entreprise__etablissement strong { font-weight: 600; color: var(--couleur-principale); } .bloc-carte-entreprise__etablissement span { color: #606060; } .bloc-carte-entreprise__itineraire { margin: auto 0 0; } .bloc-carte-entreprise__horaires { background: var(--couleur-blanc); border-radius: var(--border-radius); padding: 1.6rem 2rem; } .bloc-carte-entreprise__horaires-titre { display: flex; align-items: center; gap: 0.8rem; font-size: 1.4rem; font-weight: 700; color: var(--couleur-noir); margin-bottom: 1.2rem; } .bloc-carte-entreprise__horaires-titre i { color: var(--couleur-principale); font-size: 1.6rem; } .bloc-carte-entreprise__horaires-liste { list-style: none; padding: 0; margin: 0; font-size: 1.3rem; color: var(--couleur-noir); } .bloc-carte-entreprise__horaires-liste li { padding: 0.4rem 0; border-bottom: 1px solid #e8e8e8; } .bloc-carte-entreprise__horaires-liste li:last-child { border-bottom: none; } .bloc-carte-entreprise__horaires-liste li strong { font-weight: 600; color: var(--couleur-principale); margin-right: 0.5rem; } .bloc-carte-entreprise__horaires-liste li::before { display: none !important; } /* -------------------------------------------------------------------------- 3. Zone d'intervention — pastilles communes (pastilles non cliquables, saisies via le repeater communes_agence ; le SEO local est porté par areaServed dans le JSON-LD) -------------------------------------------------------------------------- */ .agence-communes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 25px; } /* Les deux dernières pastilles passent à la ligne ensemble (pas d'orpheline) */ .agence-communes__paire { display: inline-flex; gap: 12px; flex-wrap: nowrap; } @media screen and (max-width: 480px) { .agence-communes__paire { flex-wrap: wrap; justify-content: center; } } .agence-communes__pill { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; background: var(--couleur-blanc); border: 1px solid #e5e5e5; border-radius: 30px; padding: 10px 20px; font-size: 14px; color: var(--couleur-noir); box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .agence-communes__pill:hover { border-color: var(--couleur-principale); box-shadow: 0 3px 10px rgba(0,0,0,.1); transform: translateY(-2px); } .agence-communes__pill i { color: var(--couleur-principale); font-size: 13px; } .agence-communes__nom { font-weight: 600; } .agence-communes__pill:hover .agence-communes__nom { color: var(--couleur-principale); } .agence-communes__cp { color: var(--couleur-gris); font-size: 13px; } /* -------------------------------------------------------------------------- 5. Prestations — grille de cartes -------------------------------------------------------------------------- */ .agence-prestations__grille { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 25px; } .agence-prestations__carte { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; flex: 0 1 350px; gap: 8px; text-decoration: none; color: var(--couleur-noir); background-color: var(--couleur-fond); border: 1px solid transparent; border-radius: var(--border-radius); padding: 28px 25px; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } a.agence-prestations__carte:hover { border-color: var(--couleur-principale); box-shadow: 0 4px 14px rgba(0,0,0,.1); transform: translateY(-3px); } .agence-prestations__carte > i { color: var(--couleur-principale); font-size: 26px; } .agence-prestations__picto { width: 84px; height: 84px; object-fit: contain; border-radius: 0; } .agence-prestations__nom { font-weight: 700; font-size: 16px; line-height: 1.3; } .agence-prestations__description { font-size: 14px; color: var(--couleur-gris); } .agence-prestations__fleche { position: absolute; bottom: 20px; right: 22px; color: var(--couleur-principale); opacity: 0; transition: opacity .25s ease, transform .25s ease; } a.agence-prestations__carte:hover .agence-prestations__fleche { opacity: 1; transform: translateX(3px); } /* -------------------------------------------------------------------------- 4. Spécificités locales — 3 sous-points -------------------------------------------------------------------------- */ .agence-specificites__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 25px; margin-top: 25px; } .agence-specificites__item { background-color: var(--couleur-fond); border-radius: var(--border-radius); padding: 25px; } .agence-specificites__item h3 { margin-top: 0; color: var(--couleur-principale); font-size: 18px; } /* -------------------------------------------------------------------------- 6. Réalisations — chantiers texte + slider simple -------------------------------------------------------------------------- */ /* Blocs de texte issus des « chantiers en texte » (répartis dans la page) : une seule colonne, largeur de lecture confortable, centrée. */ .agence-texte-bloc { max-width: 1000px; margin: 0 auto 35px; } .agence-texte-bloc h3 { margin: 0 0 15px; font-size: 20px; color: var(--couleur-principale); } .agence-texte-bloc h4 { margin: 25px 0 10px; font-size: 17px; } .agence-texte-bloc--intro { text-align: center; } .agence-texte-bloc--intro p { text-align: center !important; } .agence-texte-bloc--carte { margin-top: 40px; background-color: var(--couleur-fond); border-radius: var(--border-radius); padding: 35px 40px; } .template-page-agence .agence-texte-bloc--engagements ul { list-style: none !important; padding: 0 !important; margin: 20px 0 !important; display: grid; gap: 12px; } .template-page-agence .agence-texte-bloc--engagements ul li { position: relative; margin: 0 !important; padding: 17px 20px 17px 58px !important; background-color: var(--couleur-fond); border-radius: var(--border-radius); text-align: left; } .template-page-agence .agence-texte-bloc--engagements ul li::before { content: '\f00c' !important; font-family: 'Font Awesome 6 Free', 'fontAwesome' !important; font-weight: 900; position: absolute !important; left: 16px !important; top: 50% !important; transform: translateY(-50%); display: flex !important; align-items: center; justify-content: center; width: 26px !important; height: 26px !important; border-radius: 50% !important; background: var(--couleur-principale) !important; color: #fff !important; font-size: 12px !important; line-height: 1 !important; margin: 0 !important; } @media screen and (max-width: 600px) { .agence-texte-bloc--carte { padding: 25px 20px; } } /* Slider des réalisations mises en avant sur la homepage du site Applicateur : photo de mise en avant + type de travaux et localité en dessous (Slick). */ .agence-realisations__slider { margin-top: 10px; } .agence-realisations__slide { padding: 0 10px; } .agence-realisations__slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: var(--border-radius); } .agence-realisations__infos { display: flex; flex-direction: column; gap: 4px; padding: 12px 5px 0; } .agence-realisations__titre { font-weight: 700; font-size: 15px; line-height: 1.3; } .agence-realisations__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 15px; } .agence-realisations__lieu, .agence-realisations__type { font-size: 13px; color: var(--couleur-gris); } .agence-realisations__lieu i { color: var(--couleur-principale); margin-right: 4px; } .agence-realisations .link-btn-orange { display: table; margin: 30px auto 0; } /* Flèches Slick : même traitement que le carrousel d'avis */ .agence-realisations__slider .slick-prev:before, .agence-realisations__slider .slick-next:before { font-family: 'fontAwesome'; color: var(--couleur-principale); } .agence-realisations__slider .slick-prev:before { content: '\f053'; } .agence-realisations__slider .slick-next:before { content: '\f054'; } /* -------------------------------------------------------------------------- 7. Avis clients — carrousel Eldo + Google (même design que les sites Applicateurs : bloc-section-carrousel-avis, slider Slick) -------------------------------------------------------------------------- */ .bloc-section-carrousel-avis { padding: 30px 0; } .bloc-section-carrousel-avis__contenu { margin-bottom: 20px; } .bloc-section-carrousel-avis__contenu h2 { text-align: center; color: var(--couleur-principale); } .bloc-section-carrousel-avis__resume { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-bottom: 10px; } .bloc-section-carrousel-avis__source { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 12px 20px; box-shadow: 0 2px 8px rgba(0,0,0,.06); text-decoration: none; color: inherit; transition: box-shadow .3s ease, transform .2s ease; } .bloc-section-carrousel-avis__source:hover { box-shadow: 0 4px 15px rgba(0,0,0,.1); transform: translateY(-2px); } .bloc-section-carrousel-avis__source-logo { width: 28px; height: 28px; object-fit: contain; border-radius: 0; } .bloc-section-carrousel-avis__source-note { font-weight: 700; font-size: 18px; } .bloc-section-carrousel-avis__source-stars i { color: #fb0; font-style: normal; font-size: 16px; margin: 0 1px; } .bloc-section-carrousel-avis__source-count { font-size: 13px; color: var(--couleur-texte, #666); font-weight: 300; } .bloc-section-carrousel-avis__item { background: #fff; border-radius: 20px; padding: 25px; margin: 0 10px; display: flex !important; flex-direction: column; height: inherit; min-height: 100%; row-gap: 10px; } .bloc-section-carrousel-avis__top { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 10px; } .bloc-section-carrousel-avis__note { white-space: nowrap; } .bloc-section-carrousel-avis__note i { color: #fb0; font-style: normal; font-size: 18px; margin: 0 2px; } .bloc-section-carrousel-avis__date { font-style: italic; color: var(--couleur-texte, #666); margin: 0; font-size: 13px; font-weight: 300; } .bloc-section-carrousel-avis__message { margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 7; line-clamp: 7; -webkit-box-orient: vertical; } .bloc-section-carrousel-avis__pseudo { font-weight: 500; margin: auto 0 0; display: flex; align-items: center; gap: 8px; } .bloc-section-carrousel-avis__logo { width: 22px; height: 22px; object-fit: contain; border-radius: 0; } .bloc-section-carrousel-avis .slick-track { display: flex !important; } .bloc-section-carrousel-avis .slider-avis-generiques { margin-top: 30px; } .bloc-section-carrousel-avis .slick-prev:before, .bloc-section-carrousel-avis .slick-next:before { font-family: 'fontAwesome'; color: var(--couleur-principale); } .bloc-section-carrousel-avis .slick-prev:before { content: '\f053'; } .bloc-section-carrousel-avis .slick-next:before { content: '\f054'; } @media screen and (min-width: 1300px) { .bloc-section-carrousel-avis__top { flex-direction: row; justify-content: space-between; align-items: center; gap: 0; } } @media screen and (min-width: 1100px) { .bloc-section-carrousel-avis .slider-avis-generiques { margin-top: 40px; } } /* -------------------------------------------------------------------------- 8. Garanties & certifications -------------------------------------------------------------------------- */ /* Bandeau au design du bloc « section lien décennale » des sites Applicateurs : titre + CTA à gauche, vignettes de logos à droite. Fond gris pleine largeur (bord à bord, sans arrondis) : la page est contrainte à 1180px, on fait déborder la section sur toute la fenêtre. */ .agence-garanties { width: 100vw; margin-left: calc(50% - 50vw); background-color: var(--couleur-fond); } .agence-garanties .section-garantie { align-items: center; justify-content: center; padding: 30px 20px; max-width: 1180px; margin: 0 auto; } .agence-garanties .section-garantie > div { justify-content: center; align-items: center; } .agence-garanties span.texte-uppercase, .agence-garanties span.texte-orange { font-size: 20px; text-align: center; } .agence-garanties span.texte-uppercase { text-transform: uppercase; font-weight: 400; color: var(--couleur-noir); display: block; } .agence-garanties span.texte-orange { font-weight: 800; color: var(--couleur-principale); display: block; max-width: 320px; } .agence-garanties .col-garanties-applicateur { flex-direction: column; } .agence-garanties .col-garanties-applicateur .link-btn-orange { margin: 15px auto !important; } .agence-garanties .vignettes-carrousel { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; gap: 15px; } .agence-garanties .col-vignette { text-align: center; align-items: center; justify-content: center; margin: 0; } .agence-garanties .col-vignette img { max-height: 100px; max-width: 140px; width: auto; height: auto; border-radius: 0; } .agence-garanties .col-vignette--texte { gap: 10px; background: var(--couleur-blanc); border-radius: 12px; padding: 15px 22px; font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,.08); } .agence-garanties .col-vignette--texte i { color: var(--couleur-principale); font-size: 20px; } @media screen and (min-width: 768px) { .agence-garanties .col-garanties-applicateur { max-width: 40%; flex: 2; } .agence-garanties .vignettes-carrousel { flex: 3; } .agence-garanties .col-vignette { flex: 1; } .agence-garanties .col-garanties-applicateur .link-btn-orange { margin: 0 !important; } .agence-garanties span.texte-uppercase, .agence-garanties span.texte-orange { font-size: 25px; text-align: left; } .agence-garanties .section-garantie { justify-content: left; padding: 50px 40px; } .agence-garanties { padding: 10px 0; } } /* -------------------------------------------------------------------------- 10. CTA final -------------------------------------------------------------------------- */ .agence-cta-final { text-align: center; background-color: var(--couleur-fond); border-radius: var(--border-radius); padding: 50px 30px; } .agence-cta-final__boutons { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; } .agence-cta-final__retour { margin-top: 25px; } .agence-cta-final__retour a { color: var(--couleur-gris); font-size: 14px; } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media screen and (max-width: 850px) { .agence-entete__inner { flex-direction: column; align-items: center; gap: 25px; } .agence-entete__photo { text-align: center; } .agence-entete__dirigeant { text-align: center; } .agence-entete__cols { flex-direction: column; align-items: center; gap: 25px; } .agence-entete__badges, .agence-entete__avis { justify-content: center; } .agence-entete__badges-col { align-items: center; } .agence-entete__horaires ul { columns: 1; } .agence-section { margin: 40px 0; } } /* -------------------------------------------------------------------------- Corrections lisibilité (textes issus des Docs V2) -------------------------------------------------------------------------- */ /* Texte aligné à gauche : le justifié crée des trous autour des liens */ .template-page-agence .agence-intro__texte p, .template-page-agence .agence-section p, .template-page-agence .agence-section li { text-align: left; } .template-page-agence .agence-section h2 + .agence-texte-bloc--intro p { text-align: center; } /* Liens dans le texte : en ligne (le thème les passe en inline-block, ce qui les renvoie seuls sur une ligne) */ .template-page-agence .agence-intro__texte p a:not(.btn-cta), .template-page-agence .agence-section p a:not(.btn-cta):not(.link-btn-orange), .template-page-agence .agence-section li a { display: inline; } /* Boutons d'appel à l'action insérés dans les textes */ .template-page-agence a.btn-cta { display: inline-block; margin: 10px 0; text-align: center; } /* Bouton d'envoi du formulaire de contact : texte blanc sur fond orange */ .agence-intro__formulaire input[type="submit"], .agence-intro__formulaire .wpcf7-submit { display: block; margin: 15px auto 0; padding: 14px 30px; background-color: var(--couleur-principale); color: var(--couleur-blanc, #fff); border: 0; border-radius: 30px; font-weight: 700; text-transform: uppercase; cursor: pointer; transition: background-color .2s; } .agence-intro__formulaire input[type="submit"]:hover, .agence-intro__formulaire .wpcf7-submit:hover { background-color: var(--couleur-noir); color: var(--couleur-blanc, #fff); } /* -------------------------------------------------------------------------- Harmonisation générale (titres, largeur de lecture, rythme) -------------------------------------------------------------------------- */ /* Texte courant */ .template-page-agence .agence-intro__texte p, .template-page-agence .agence-section p, .template-page-agence .agence-section li { line-height: 1.7; } /* Titres dans les textes : H2 du Doc (intro) > H3 > H4 */ .template-page-agence .agence-intro__texte h2 { font-size: 24px; line-height: 1.3; text-align: left; margin: 40px 0 15px; } .template-page-agence .agence-intro__texte h2:first-child { margin-top: 0; } .template-page-agence .agence-intro__texte h3, .template-page-agence .agence-section h3 { font-size: 20px; line-height: 1.35; color: var(--couleur-noir); margin: 30px 0 12px; } .template-page-agence .agence-section h4 { font-size: 17px; line-height: 1.4; color: var(--couleur-principale); margin: 25px 0 8px; } .template-page-agence .agence-section h3:first-child, .template-page-agence .agence-section h4:first-child, .template-page-agence .agence-media-texte__texte > :first-child { margin-top: 0; } /* Titres des encadrés : orange */ .template-page-agence .agence-texte-bloc h3, .template-page-agence .agence-specificites__item h3 { color: var(--couleur-principale); } .template-page-agence .agence-texte-bloc--intro h3 { font-size: 22px; margin-bottom: 15px; } /* Largeur de lecture commune (1000px) : textes, blocs texte + photo, encadrés */ .template-page-agence .agence-section > p, .template-page-agence .agence-section > h3, .template-page-agence .agence-section > h4, .template-page-agence .agence-section > ul, .template-page-agence .agence-section > ol, .template-page-agence .agence-media-texte { max-width: 1000px; margin-left: auto; margin-right: auto; } /* Bloc texte + photo : texte calé en haut, photo arrondie */ .template-page-agence .agence-media-texte { align-items: flex-start; } .template-page-agence .agence-media-texte__photo img { border-radius: var(--border-radius); } /* Spécificités : une ligne par point (titre à gauche, texte à droite) au lieu de 3 colonnes de hauteurs inégales */ .template-page-agence .agence-specificites__grille { grid-template-columns: 1fr; max-width: 1000px; margin: 35px auto 0; gap: 15px; } .template-page-agence .agence-specificites__item { display: grid; grid-template-columns: 220px 1fr; gap: 30px; padding: 28px 30px; align-items: start; } .template-page-agence .agence-specificites__item h3 { margin: 0; font-size: 18px; } .template-page-agence .agence-specificites__texte > :first-child { margin-top: 0; } .template-page-agence .agence-specificites__texte > :last-child { margin-bottom: 0; } @media screen and (max-width: 700px) { .template-page-agence .agence-specificites__item { grid-template-columns: 1fr; gap: 10px; padding: 22px 20px; } } /* Boutons dans les textes : même forme que les autres boutons de la page */ .template-page-agence a.btn-cta { margin: 15px 0 5px; } .template-page-agence .agence-specificites__texte a.btn-cta { margin-top: 10px; } /* Rythme vertical entre sections */ .template-page-agence .agence-section h2 { line-height: 1.3; } .template-page-agence .agence-section > h2 + * { margin-top: 0; } /* Badges de l'entête : texte et pictos en orange */ .template-page-agence .agence-badge--certif { color: var(--couleur-principale); border-color: var(--couleur-principale); } .template-page-agence .agence-badge--certif i { color: var(--couleur-principale); } /* Entête : disposition identique pour toutes les agences (coordonnées à gauche, badges + notes à droite, horaires regroupés) */ .template-page-agence .agence-entete__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 30px 50px; align-items: start; justify-content: stretch; } .template-page-agence .agence-entete__badges-col { max-width: none; } .template-page-agence .agence-entete__horaires ul { columns: 1; display: grid; gap: 4px; } .template-page-agence .agence-entete__horaires li { display: grid; grid-template-columns: 145px 1fr; gap: 10px; font-weight: 400; } .template-page-agence .agence-entete__horaires li strong { min-width: 0; white-space: nowrap; } @media screen and (max-width: 850px) { .template-page-agence .agence-entete__cols { grid-template-columns: 1fr; justify-items: center; } .template-page-agence .agence-entete__horaires li { grid-template-columns: auto auto; } } /* -------------------------------------------------------------------------- Structure identique au Doc : H1 dans l'introduction (après le 1er H2), bandeau identité en paragraphe avec le même rendu que l'ancien H1 -------------------------------------------------------------------------- */ p.agence-entete__titre { font-family: Montserrat, sans-serif; font-size: 34px; font-weight: 900; line-height: 1.2; letter-spacing: .5px; } .template-page-agence .agence-intro__texte h1 { font-size: 20px; line-height: 1.35; text-align: left; color: var(--couleur-noir); margin: 0 0 15px; letter-spacing: 0; } p.agence-intro__formulaire-titre { font-weight: 700; line-height: 1.3; } .agence-garanties__titre { margin: 0; font-size: 24px; line-height: 1.3; font-weight: 400; color: var(--couleur-noir); } .agence-garanties__titre strong { display: block; font-weight: 700; } .agence-cta-final__texte { max-width: 800px; margin: 0 auto 10px; } .template-page-agence .agence-cta-final__texte h3 { font-size: 24px; color: var(--couleur-principale); margin: 0 0 15px; } .agence-cta-final__texte p { text-align: center !important; } .agence-cta-final__texte a.btn-cta { margin-top: 10px; } /* Bouton téléphone (fond noir) : icône blanche et survol lisible */ .template-page-agence .link-btn-orange.agence-btn--secondaire, .template-page-agence .link-btn-orange.agence-btn--secondaire i { color: var(--couleur-blanc, #fff) !important; } .template-page-agence .link-btn-orange.agence-btn--secondaire { background-color: var(--couleur-noir) !important; border-color: var(--couleur-noir) !important; } .template-page-agence .link-btn-orange.agence-btn--secondaire:hover, .template-page-agence .link-btn-orange.agence-btn--secondaire:focus { background-color: var(--couleur-principale) !important; border-color: var(--couleur-principale) !important; color: var(--couleur-blanc, #fff) !important; } .template-page-agence .link-btn-orange.agence-btn--secondaire:hover i, .template-page-agence .link-btn-orange.agence-btn--secondaire:focus i { color: var(--couleur-blanc, #fff) !important; } .template-page-agence .link-btn-orange.agence-btn--secondaire i { margin-right: 6px; } /* Badge « Applicateur depuis » (fond orange) : icône blanche */ .template-page-agence .agence-badge--reseau i { color: var(--couleur-blanc, #fff) !important; } /* Garanties : 2 logos (décennale + Charte Qualité) répartis à gauche et à droite de la zone */ .template-page-agence .agence-garanties .vignettes-carrousel { justify-content: space-around; } /* Entête (ordi) : badges (ancienneté, garanties) à droite, au-dessus des notes Eldo/Google, côte à côte. Sur grand écran, une seule ligne ; entre 851 et 1299 px, deux par ligne dans la colonne de droite. */ @media screen and (min-width: 851px) { .template-page-agence .agence-badge { white-space: nowrap; font-size: 12px; padding: 5px 11px; gap: 5px; } .template-page-agence .agence-entete__badges { gap: 8px; } } @media screen and (min-width: 1300px) { .template-page-agence .agence-entete__cols { grid-template-columns: minmax(0, 1fr) auto; gap: 30px 40px; } .template-page-agence .agence-entete__badges-col { align-items: flex-start; } .template-page-agence .agence-entete__badges { flex-wrap: nowrap; } } /* -------------------------------------------------------------------------- Retours client — page agence -------------------------------------------------------------------------- */ /* Bouton « Visiter le site » : orange, centré dans le haut de page */ .template-page-agence .agence-entete__ctas--site { display: flex; justify-content: center; margin-top: 10px; } .template-page-agence .agence-entete__ctas--site .link-btn-orange { margin: 0 !important; } /* H1 (dans l'introduction) : même taille et même style que les H2 */ .template-page-agence .agence-intro__texte h1 { font-size: 24px; line-height: 1.3; font-weight: 900; color: var(--couleur-principale); margin: 10px 0 18px; letter-spacing: 0; } /* Formulaire de contact */ .agence-intro__formulaire select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: none; padding-right: 38px !important; text-overflow: ellipsis; } .agence-intro__formulaire select::-ms-expand { display: none; } .agence-intro__formulaire .section-select { display: flex; flex-direction: column; gap: 12px; } .agence-intro__formulaire .section-select > *, .agence-intro__formulaire .section-select .wpcf7-form-control-wrap, .agence-intro__formulaire .section-select select { width: 100% !important; max-width: none !important; flex: 1 1 auto; } .agence-intro__formulaire .section-rgpd, .agence-intro__formulaire .section-rgpd * { text-align: left !important; word-spacing: normal; } /* Vérification Cloudflare au-dessus du bouton d'envoi */ .agence-intro__formulaire .wpcf7-turnstile { order: 998 !important; width: 100%; } .agence-intro__formulaire .section-submit { order: 999 !important; } .agence-intro__formulaire .wpcf7-response-output { order: 1000 !important; } /* Bouton d'envoi du formulaire calé à gauche */ .agence-intro__formulaire .section-submit { display: flex; justify-content: flex-start; text-align: left; width: 100%; } .agence-intro__formulaire .section-submit input[type="submit"], .agence-intro__formulaire .section-submit .wpcf7-submit { margin: 15px 0 0 !important; float: none; }