/*
Theme Name: Beton Expert
Theme URI: https://betonexpert.fr
Description: Thème enfant d'Astra pour Beton Expert — béton décoratif et sols extérieurs. Toutes les personnalisations du site vivent ici afin de survivre aux mises à jour d'Astra.
Author: Beton Expert
Template: astra
Version: 3.18.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: beton-expert
*/
/* ==================================================================
* SOMMAIRE
* 1. Jetons de design (palette, typographie, espacements)
* 2. Base
* 3. Conteneur
* 4. En-tête et navigation
* 5. Méga-menu
* 6. Menu mobile
* 7. Boutons
* 8. Contenu Elementor
* 8b. Sections « hero »
* 8c. Page contact
* 8d. Sections accueil
* 8e. Barre de contact flottante
* 8f. Correctifs et composants
* 8g. Pages de finition (les douze articles « béton … »)
* 8h. Sections de contenu des pages de finition
* 8i. Calculateurs (Calculated Fields Form)
* 8j. Comparateurs (« béton X ou béton Y ? ») et leur index
* 8k. Aide au choix de finition (page d'accueil)
* 8l. Vidéos de chantier (Shorts YouTube, façade au clic)
* 8m. Page « Nos produits »
* 9. Galeries et projets
* 10. Pied de page
* 11. Accessibilité et préférences système
* ================================================================== */
/* ------------------------------------------------------------------
* 1. JETONS DE DESIGN
* Palette : voir design/color-palette.md (contrastes WCAG mesurés).
* ---------------------------------------------------------------- */
:root {
/* Couleurs de marque */
--be-charcoal: #1f271b;
--be-yale: #0b4f6c;
--be-baltic: #145c9e;
--be-oak: #cbb9a8;
--be-almond: #dcc7be;
/* Nuances utilisées */
--be-baltic-600: #114f88; /* survol */
--be-baltic-700: #0e4272; /* lien sur fond clair, état actif */
--be-yale-700: #08394e;
--be-yale-800: #062c3c;
--be-oak-100: #f7f4f1; /* texte sur fond sombre */
--be-oak-200: #eee9e3; /* bordures */
--be-almond-200: #f4edea; /* fond de section discret */
/* Rôles */
--be-bg: #ffffff;
--be-bg-warm: var(--be-almond);
--be-surface: var(--be-oak);
--be-text: var(--be-charcoal);
--be-text-invert: var(--be-oak-100);
--be-link: var(--be-baltic-700);
--be-action: var(--be-baltic);
--be-action-hover: var(--be-baltic-600);
--be-dark: var(--be-yale);
--be-border: var(--be-oak-200);
/* Texte secondaire — 5,7:1 sur blanc, conforme AA */
--be-text-muted: #5a6356;
/* Échelle typographique (base 16px, ratio ~1,25) */
--be-fs-xs: 0.8125rem;
--be-fs-sm: 0.9375rem;
--be-fs-base: 1.0625rem;
--be-fs-lg: 1.25rem;
--be-fs-xl: 1.5rem;
--be-fs-2xl: 1.9rem;
--be-fs-3xl: 2.4rem;
--be-fs-4xl: 3rem;
/* Espacements */
--be-space-2xs: 0.25rem;
--be-space-xs: 0.5rem;
--be-space-sm: 0.75rem;
--be-space-md: 1.25rem;
--be-space-lg: 2rem;
--be-space-xl: 3rem;
--be-space-2xl: 4.5rem;
/* Familles typographiques — reprises de conta.cubical.ro (référence
* du dossier design/). Les deux sont sous licence SIL Open Font. */
--be-font-display: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
--be-font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
/* Divers */
--be-radius: 6px;
--be-radius-lg: 12px;
/* Barres flottantes — en-tête et barre de contact. Un rayon
* entier en faisait des gélules ; celui-ci arrondit sans
* transformer la forme. */
--be-radius-xl: 20px;
/* Pastilles internes de ces barres : liens de menu, boutons. */
--be-radius-pill: 10px;
--be-container: 1200px;
--be-shadow-sm: 0 1px 2px rgba(31, 39, 27, 0.06), 0 2px 8px rgba(31, 39, 27, 0.05);
--be-shadow-md: 0 4px 12px rgba(31, 39, 27, 0.08), 0 12px 32px rgba(31, 39, 27, 0.09);
--be-shadow-lg: 0 12px 28px rgba(31, 39, 27, 0.12), 0 28px 64px rgba(31, 39, 27, 0.12);
--be-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
/* Hauteur totale de l'en-tête flottant :
* marge de l'en-tête (2 × 0,75rem = 24) + capsule (56) = 80.
* La capsule a une hauteur imposée, donc cette valeur est exacte
* et non plus estimée. L'en-tête étant sorti du flux par une marge
* négative, c'est ce que le contenu doit dégager en haut : toute
* erreur ici se voit comme une bande blanche en haut de page. */
--be-header-h: 80px;
/* Hauteur que le contenu doit dégager sous l'en-tête. Séparée de la
* hauteur réelle « --be-header-h » : en mobile l'en-tête repasse
* dans le flux et ne prend plus rien au contenu, alors que sa
* hauteur reste utile pour caler le panneau de menu. */
--be-header-clear: var(--be-header-h);
}
@media (max-width: 921px) {
:root {
/* Capsule ramenée à 50 px sur les petits écrans. */
/* Hauteur réelle du bandeau pleine largeur, filet compris. */
--be-header-h: 70px;
/* En mobile l'en-tête n'est plus collant : il occupe sa place
* dans le flux, le contenu n'a donc rien à dégager. */
--be-header-clear: 0px;
}
}
/* ------------------------------------------------------------------
* 2. BASE
* ---------------------------------------------------------------- */
body,
button,
input,
select,
textarea,
.elementor-widget-text-editor,
.elementor-widget-button .elementor-button {
font-family: var(--be-font-body);
}
body {
color: var(--be-text);
background-color: var(--be-bg);
font-size: var(--be-fs-base);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.elementor-heading-title,
.main-header-menu .menu-link,
.be-footer__heading {
font-family: var(--be-font-display);
}
h1,
h2,
h3,
h4,
h5,
h6,
.entry-title {
color: var(--be-text);
line-height: 1.18;
letter-spacing: -0.015em;
font-weight: 700;
text-wrap: balance;
}
p {
text-wrap: pretty;
}
a {
color: var(--be-link);
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
transition: color var(--be-transition);
}
a:hover,
a:focus {
color: var(--be-action-hover);
}
::selection {
background: var(--be-baltic);
color: #fff;
}
hr,
.be-rule {
border: 0;
border-top: 1px solid var(--be-border);
margin-block: var(--be-space-xl);
}
/* ------------------------------------------------------------------
* 3. CONTENEUR
* ---------------------------------------------------------------- */
.be-container {
width: 100%;
max-width: var(--be-container);
margin-inline: auto;
padding-inline: var(--be-space-md);
}
/* ------------------------------------------------------------------
* 4. EN-TÊTE ET NAVIGATION
* Motif conta.cubical.ro : la barre n'est pas un bandeau collé au
* bord haut mais une capsule blanche posée sur la page, détachée des
* quatre côtés. Les liens sont de simples textes ; la page courante
* se signale par une pastille pleine et discrète, et un seul bouton
* plein, complètement arrondi, porte la conversion à droite.
* ---------------------------------------------------------------- */
/* L'en-tête lui-même ne porte plus rien de visible : il ne sert qu'à
* réserver la place et à tenir la capsule en position collante. */
.site-header {
background-color: transparent;
border-bottom: 0;
}
/* L'en-tête ne réserve aucune place dans le flux : sa marge basse
* négative annule sa hauteur, si bien que la première section remonte
* derrière lui et que son fond court sous la capsule. Sans cela, la
* bande qui entoure la capsule restait blanche et coupait net sur le
* dégradé du hero, sur toute la largeur de l'écran.
* La contrepartie est que le contenu doit dégager la hauteur de
* l'en-tête lui-même — voir « --be-header-h » plus bas. */
.be-sticky-header .site-header {
position: sticky;
top: 0;
z-index: 500;
padding-block: var(--be-space-sm);
/* Deux pixels de plus que la hauteur réelle : la première section
* mord légèrement sous l'en-tête au lieu de risquer de s'arrêter
* un cheveu trop bas, ce qui laissait paraître une bande blanche
* en haut de l'écran. L'en-tête étant transparent, ce
* chevauchement ne se voit pas. */
margin-bottom: calc(-1 * var(--be-header-h) - 2px);
}
/* La barre d'admin ne doit pas recouvrir l'en-tête collant. */
.admin-bar.be-sticky-header .site-header {
top: 32px;
}
@media (max-width: 782px) {
.admin-bar.be-sticky-header .site-header {
top: 46px;
}
}
/* --- La capsule ---
* Présente aussi bien dans l'en-tête de bureau que dans celui du
* mobile : Astra pose « .ast-primary-header-bar » sur les deux.
* Surtout pas de « overflow: hidden » ici — les sous-menus sortent
* de la capsule et seraient rognés.
*/
.ast-primary-header-bar {
max-width: min(1400px, 100% - 1.5rem);
margin-inline: auto;
/* Capsule serrée : sa hauteur est celle du bouton d'action, pas
* un coussin autour. */
padding-block: 0.4rem;
padding-inline: 0.75rem 0.5rem;
/* Hauteur imposée, pas seulement minimale.
* Astra impose sa propre hauteur de barre à la rangée interne
* (74 px) : la capsule montait donc à 87 px et l'en-tête entier à
* 109, alors que la remontée de la première section était calculée
* sur 82. Les 25 px d'écart, c'était la bande blanche en haut de
* l'écran. La hauteur est désormais fixée ici et la rangée interne
* remise à plat juste en dessous, pour que « --be-header-h » soit
* exact par construction. */
height: 56px;
border: 1px solid var(--be-oak-200);
border-bottom: 1px solid var(--be-oak-200);
border-radius: var(--be-radius-xl);
background-color: #fff;
box-shadow: var(--be-shadow-sm);
}
/* Pas d'effet au survol sur la capsule elle-même : elle n'est pas
* cliquable, et une ombre qui enfle au passage de la souris attire
* l'œil sur le contenant au lieu des liens qu'il contient. */
/* Sur écran de bureau, le conteneur interne d'Astra est borné à la
* largeur de contenu du site ; dans une capsule plus large, logo et
* menu se retrouveraient enfoncés vers le centre. C'est la marge
* interne de la capsule qui fait désormais la gouttière. */
.ast-primary-header-bar > .site-primary-header-wrap {
max-width: 100%;
padding-inline: 0;
}
/* Astra règle la hauteur de sa barre sur la rangée interne. On la
* neutralise : c'est la capsule qui décide, sinon la hauteur réelle
* de l'en-tête cesse de correspondre à « --be-header-h ». */
.ast-primary-header-bar .site-primary-header-wrap,
.ast-primary-header-bar .ast-builder-grid-row {
min-height: 0;
height: 100%;
padding-block: 0;
}
.ast-primary-header-bar .ast-builder-grid-row,
.ast-primary-header-bar .site-header-section {
align-items: center;
}
.main-header-bar {
border-bottom: 0;
}
/* --- Logo ---
* Le fichier fait 250 × 63 px, marges blanches comprises : la marque
* n'occupe pas toute la hauteur déclarée. Calé sur celle du bouton
* d'action, il tient la capsule sans la faire enfler, et un peu d'air
* à gauche l'éloigne du bord arrondi dont la courbe mordait sur le
* début du mot.
*/
.site-logo-img img,
.custom-logo-link img {
display: block;
max-height: 34px;
width: auto;
transition: max-height var(--be-transition);
}
.ast-primary-header-bar .site-branding {
padding-left: 0.35rem;
}
@media (max-width: 921px) {
.ast-primary-header-bar {
height: 50px;
}
.site-logo-img img,
.custom-logo-link img {
max-height: 30px;
}
}
/* L'en-tête étant hors flux, c'est au contenu de dégager sa hauteur.
* Le hero le fait dans sa propre marge interne (section 8b) pour que
* son fond continue de courir derrière la capsule. Les pages qui
* n'ouvrent pas sur un hero — les douze articles de finition — n'ont
* pas cette marge : on la leur ajoute ici. */
body:not(:has(.be-hero)) .site-content {
padding-top: var(--be-header-clear);
}
/* --- Liens de premier niveau --- */
.main-header-menu > .menu-item > .menu-link {
position: relative;
color: var(--be-text);
font-size: var(--be-fs-sm);
font-weight: 600;
letter-spacing: 0.01em;
padding-inline: var(--be-space-md);
transition: color var(--be-transition);
}
/* Pastille de page courante.
* Remplace le soulignement animé d'avant : sur une capsule arrondie,
* un trait de 2 px collé sous le libellé se lisait comme un reste de
* l'ancien bandeau. La pastille pleine reprend le repère de la
* référence et se marie au bouton, lui aussi arrondi.
*/
@media (min-width: 922px) {
.main-header-menu > .menu-item > .menu-link {
padding: 0.5rem 0.9rem;
border-radius: var(--be-radius-pill);
line-height: 1.3;
transition: background-color var(--be-transition), color var(--be-transition);
}
.main-header-menu > .menu-item > .menu-link:hover,
.main-header-menu > .menu-item > .menu-link:focus {
background-color: var(--be-oak-100);
color: var(--be-baltic-700);
}
.main-header-menu > .menu-item.current-menu-item > .menu-link,
.main-header-menu > .menu-item.current-menu-ancestor > .menu-link,
.main-header-menu > .menu-item.current-menu-parent > .menu-link {
background-color: var(--be-almond-200);
color: var(--be-charcoal);
}
}
/* Sous la capsule en version mobile, le menu est une liste empilée :
* la couleur suffit à marquer la page courante. */
@media (max-width: 921px) {
.main-header-menu > .menu-item > .menu-link:hover,
.main-header-menu > .menu-item > .menu-link:focus,
.main-header-menu > .menu-item.current-menu-item > .menu-link,
.main-header-menu > .menu-item.current-menu-ancestor > .menu-link,
.main-header-menu > .menu-item.current-menu-parent > .menu-link {
color: var(--be-baltic);
}
}
/* --- Sous-menus classiques --- */
.main-header-menu .sub-menu {
background-color: #fff;
border: 1px solid var(--be-border);
border-radius: var(--be-radius-lg);
box-shadow: var(--be-shadow-md);
padding: var(--be-space-xs);
overflow: hidden;
}
/* Le panneau se détache de la capsule au lieu de sortir de son bord
* arrondi, où le raccord se voyait. */
@media (min-width: 922px) {
.main-header-menu > .menu-item > .sub-menu {
margin-top: 0.85rem;
}
}
.main-header-menu .sub-menu .menu-link {
color: var(--be-text);
font-size: var(--be-fs-sm);
font-weight: 500;
border-radius: var(--be-radius);
padding: 0.55rem 0.85rem;
border-bottom: 0;
transition: background-color var(--be-transition), color var(--be-transition);
}
.main-header-menu .sub-menu .menu-link:hover,
.main-header-menu .sub-menu .menu-link:focus,
.main-header-menu .sub-menu .current-menu-item > .menu-link {
background-color: var(--be-almond-200);
color: var(--be-baltic-700);
}
/* ------------------------------------------------------------------
* 5. MÉGA-MENU
* La classe « be-mega » est posée automatiquement par inc/menu.php
* dès qu'un élément possède au moins 6 enfants.
* ---------------------------------------------------------------- */
@media (min-width: 922px) {
/* Le panneau s'aligne sur la largeur du menu, jamais hors écran. */
.main-header-menu {
position: relative;
}
.main-header-menu > .be-mega {
position: static;
}
/* Le panneau s'aligne sur le bord droit du menu — donc en retrait
* du bord de la capsule, et jamais hors écran. Sa largeur est
* celle qu'il lui faut, pas celle qui reste. */
.main-header-menu > .be-mega > .sub-menu {
left: auto;
right: 0;
width: min(540px, calc(100vw - 3rem));
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2px var(--be-space-xs);
padding: var(--be-space-sm);
}
.main-header-menu > .be-mega--cols-3 > .sub-menu {
grid-template-columns: repeat(3, minmax(0, 1fr));
width: min(780px, calc(100vw - 3rem));
}
.main-header-menu > .be-mega > .sub-menu > .menu-item {
width: auto;
}
.main-header-menu > .be-mega > .sub-menu .menu-link {
display: flex;
align-items: center;
padding: 0.5rem 0.6rem;
line-height: 1.3;
border-radius: var(--be-radius);
}
/* Pastille de couleur : repère visuel discret par finition. */
.main-header-menu > .be-mega > .sub-menu .menu-link::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin-right: 0.6rem;
border-radius: 50%;
background-color: var(--be-oak);
vertical-align: middle;
transition: background-color var(--be-transition), transform var(--be-transition);
}
.main-header-menu > .be-mega > .sub-menu .menu-link:hover::before,
.main-header-menu > .be-mega > .sub-menu .menu-link:focus::before {
background-color: var(--be-baltic);
transform: scale(1.4);
}
}
/* ------------------------------------------------------------------
* 6. MENU MOBILE
* ---------------------------------------------------------------- */
@media (max-width: 921px) {
/* --- L'en-tête n'est pas collant en mobile ---
*
* Sur un écran de téléphone, la capsule mangeait 80 des 812 px
* utiles en permanence. Elle redevient un en-tête ordinaire : elle
* défile avec la page. La marge négative qui remontait le contenu
* sous l'en-tête hors flux n'a plus lieu d'être, et
* « --be-header-clear » passe à zéro pour que les heros ne gardent
* pas un dégagement devenu inutile. */
.be-sticky-header .site-header,
.admin-bar.be-sticky-header .site-header {
position: static;
margin-bottom: 0;
/* Plus de marge autour de la capsule : le bandeau touche les
* trois bords de l'écran. */
padding-block: 0;
}
/* --- Un bandeau, pas une capsule ---
*
* La capsule arrondie et rentrée de 10 px laissait un liseré blanc
* en haut et sur les côtés : sur un écran de téléphone, cette
* bordure vide prenait de la place sans rien dire. En mobile, la
* barre va d'un bord à l'autre, à angles droits, et ne garde que
* son filet du bas pour se détacher du contenu.
*/
.ast-primary-header-bar {
max-width: 100%;
margin-inline: 0;
border-inline: 0;
border-top: 0;
border-bottom: 1px solid var(--be-oak-200);
border-radius: 0;
/* Valeur fixe, identique ouvert et fermé : Astra remet la marge
* interne du bas à zéro quand le menu est déplié, la rangée
* gagnait 6 px et le logo descendait de 3 — il sautait à chaque
* ouverture. */
padding-block: 0;
}
/* Même gabarit dans les deux états, pour la même raison : le bouton
* passait de 42 à 44 px à l'ouverture et poussait la rangée. */
.ast-header-break-point .ast-mobile-header-wrap .ast-button-wrap .menu-toggle.main-header-menu-toggle,
.ast-header-break-point .ast-mobile-header-wrap .ast-button-wrap .menu-toggle.main-header-menu-toggle.toggled {
width: 44px;
height: 44px;
padding: 0;
}
/* --- Le panneau déplié se superpose au contenu ---
*
* Astra laisse le panneau dans le flux de l'en-tête : à l'ouverture
* l'en-tête passait de 91 à 360 px et poussait toute la page vers le
* bas — le titre descendait de 173 à 442 px, et le contenu remontait
* d'un coup à la fermeture.
*
* Le panneau est donc sorti du flux. Son point d'ancrage est
* « .ast-mobile-header-wrap », qui enveloppe la capsule : une fois le
* panneau en absolu, ce bloc ne fait plus que la hauteur de la
* capsule, et « top: 100% » tombe exactement sous elle sans valeur
* codée en dur — « --be-header-h » vaut 74 px alors que le bas réel
* de la capsule est à 80, et l'écart se serait vu comme une fente.
*/
.ast-mobile-header-wrap {
position: relative;
}
.ast-mobile-header-content {
position: absolute;
top: 100%;
left: 0;
width: 100%;
/* Sous la capsule, qui porte z-index 4 : son ombre continue de
* se poser sur le panneau et non l'inverse. */
z-index: 3;
/* Déplié, « Nos produits » ouvert, la liste dépasse la hauteur
* d'écran : elle défile en propre, sans entraîner la page. */
max-height: calc(100dvh - var(--be-header-h));
overflow-y: auto;
overscroll-behavior: contain;
box-shadow: var(--be-shadow-md);
}
.main-header-menu .menu-link {
font-size: var(--be-fs-base);
padding-block: 0.7rem;
border-bottom: 1px solid var(--be-border);
}
/* Astra pose « height: 100% » sur le lien de premier niveau, ce qui
* convient à la barre de bureau où le fait la hauteur de
* l'en-tête. En mobile le est une colonne flex qui contient
* aussi le sous-menu déplié : le lien s'étirait alors sur toute la
* hauteur du bloc — près de 260 px — et ouvrait un vide entre
* « Nos produits » et la première finition. */
.main-header-menu > .menu-item > .menu-link,
#astra-footer-menu > .menu-item > .menu-link {
height: auto;
}
.main-header-menu .sub-menu {
border: 0;
border-radius: 0;
box-shadow: none;
padding: 0;
background-color: var(--be-almond-200);
/* « overflow: hidden » sert aux coins arrondis du panneau de
* bureau. Déplié en mobile, il rognait le sous-menu : les six
* dernières finitions (balayé, poreux, quartzé, matricé,
* coloré, bouchardé) étaient dans le DOM mais invisibles et
* inatteignables. */
overflow: visible;
height: auto;
}
.main-header-menu .sub-menu .menu-link {
padding-left: var(--be-space-md);
border-radius: 0;
}
.site-logo-img img,
.custom-logo-link img {
max-height: 44px;
}
}
/* ------------------------------------------------------------------
* 7. BOUTONS
* Baltic Blue est réservé aux actions — voir color-palette.md.
* ---------------------------------------------------------------- */
.be-btn,
.elementor-button,
.wp-block-button__link,
.ast-button,
button,
input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-weight: 600;
font-size: var(--be-fs-sm);
line-height: 1.2;
letter-spacing: 0.01em;
padding: 0.85rem 1.6rem;
border-radius: var(--be-radius);
border: 1px solid transparent;
text-decoration: none;
cursor: pointer;
transition: background-color var(--be-transition), border-color var(--be-transition),
color var(--be-transition), transform var(--be-transition), box-shadow var(--be-transition);
}
.be-btn--primary,
.elementor-button,
.wp-block-button__link,
.ast-button,
input[type="submit"] {
background-color: var(--be-action);
border-color: var(--be-action);
color: #fff;
}
.be-btn--primary:hover,
.be-btn--primary:focus,
.elementor-button:hover,
.elementor-button:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.ast-button:hover,
.ast-button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
background-color: var(--be-action-hover);
border-color: var(--be-action-hover);
color: #fff;
transform: translateY(-1px);
box-shadow: var(--be-shadow-sm);
}
.be-btn--primary:active,
.elementor-button:active {
transform: translateY(0);
background-color: var(--be-baltic-700);
border-color: var(--be-baltic-700);
}
/* Bouton secondaire, sur fond clair.
*
* « --ghost » existait deja, mais pour les fonds sombres : son filet est
* un blanc transparent, invisible sur une page claire. D'ou cette
* seconde variante, qui est celle des heros.
*
* Elle partage tout le reste avec le bouton plein — rembourrage, rayon,
* graisse, hauteur de ligne — puisqu'elle sort de la meme regle de base.
* Les deux appels d'un hero ont donc exactement la meme boite, et leur
* alignement n'est plus quelque chose qu'on regle : c'est quelque chose
* qui ne peut pas etre faux.
*/
.be-btn--outline {
background-color: transparent;
border-color: var(--be-border);
color: var(--be-baltic-700);
}
.be-btn--outline:hover,
.be-btn--outline:focus-visible {
background-color: var(--be-almond-200);
border-color: var(--be-action);
color: var(--be-baltic-700);
transform: translateY(-1px);
box-shadow: var(--be-shadow-sm);
}
/* Bouton secondaire, sur fond sombre. */
.be-btn--ghost {
background-color: transparent;
border-color: rgba(247, 244, 241, 0.45);
color: var(--be-oak-100);
}
.be-btn--ghost:hover,
.be-btn--ghost:focus {
background-color: rgba(247, 244, 241, 0.1);
border-color: var(--be-oak-100);
color: #fff;
}
/* ------------------------------------------------------------------
* 8. CONTENU ELEMENTOR
* Restylage uniquement : la structure des pages n'est pas touchée.
* ---------------------------------------------------------------- */
.elementor-widget-heading .elementor-heading-title {
color: var(--be-text);
letter-spacing: -0.015em;
line-height: 1.18;
}
/* Filet d'accent sous les titres de section de premier niveau. */
.elementor-widget-heading .elementor-heading-title.elementor-size-xl,
.elementor-widget-heading h2.elementor-heading-title {
position: relative;
}
.elementor-widget-heading h2.elementor-heading-title::after {
content: "";
display: block;
width: 52px;
height: 3px;
margin-top: var(--be-space-sm);
border-radius: 3px;
background: linear-gradient(90deg, var(--be-baltic) 0%, var(--be-oak) 100%);
}
/* Titres centrés : le filet suit l'alignement. */
.elementor-widget-heading.be-center h2.elementor-heading-title::after,
[class*="elementor-align-center"] .elementor-widget-heading h2.elementor-heading-title::after,
.elementor-widget-heading[data-align="center"] h2.elementor-heading-title::after {
margin-inline: auto;
}
.elementor-widget-text-editor {
color: var(--be-text-muted);
font-size: var(--be-fs-base);
line-height: 1.7;
}
.elementor-widget-text-editor strong,
.elementor-widget-text-editor b {
color: var(--be-text);
}
/* Images de contenu : coins adoucis et ombre légère. */
.elementor-widget-image img {
border-radius: var(--be-radius-lg);
box-shadow: var(--be-shadow-sm);
transition: transform var(--be-transition), box-shadow var(--be-transition);
}
.elementor-widget-image a:hover img,
.elementor-widget-image a:focus img {
transform: translateY(-2px);
box-shadow: var(--be-shadow-md);
}
/* Icônes de la palette plutôt que les couleurs par défaut d'Elementor. */
.elementor-widget-icon .elementor-icon,
.elementor-widget-icon-box .elementor-icon {
color: var(--be-baltic);
}
/* Accordéon / toggle (FAQ). */
.elementor-toggle .elementor-tab-title {
border-bottom: 1px solid var(--be-border);
padding: var(--be-space-md) 0;
font-weight: 600;
color: var(--be-text);
transition: color var(--be-transition);
}
.elementor-toggle .elementor-tab-title:hover,
.elementor-toggle .elementor-tab-title.elementor-active {
color: var(--be-baltic);
}
.elementor-toggle .elementor-tab-content {
border-bottom: 1px solid var(--be-border);
color: var(--be-text-muted);
padding: 0 0 var(--be-space-md);
}
/* ------------------------------------------------------------------
* 8b. SECTIONS « HERO »
* Structure : scripts/build-heroes.php.
* Modèle durasol.es (design/hero-patterns.md) décliné en trois
* variantes — home, projets, contact. Fond clair, texte à gauche,
* photo à droite dans un panneau ; la fiche chiffrée chevauche la
* photo, ce qui relie les deux colonnes au lieu de les juxtaposer.
* Jamais d'image en fond de section : la photo est un objet, pas une
* texture, et le texte reste sur un aplat. Hauteur dictée par le
* contenu.
* ---------------------------------------------------------------- */
.elementor-section.be-hero {
position: relative;
isolation: isolate;
background-color: var(--be-bg);
border-bottom: 1px solid var(--be-oak-200);
/* L'en-tête flotte au-dessus sans occuper de place dans le flux
* (section 4) : c'est ce qui laisse le fond du hero courir sous la
* capsule. En contrepartie le hero dégage lui-même la hauteur de
* l'en-tête, sans quoi le titre passerait dessous. */
padding-top: calc(clamp(2.5rem, 5.5vw, 4.75rem) + var(--be-header-clear));
padding-bottom: clamp(2.5rem, 5.5vw, 4.75rem);
overflow: hidden;
}
/* Voile chaud, posé derrière le contenu. Il donne un aplomb au bloc
* sans toucher à la lisibilité : le texte reste sur la partie blanche,
* le dégradé s'éteint côté photo. */
.elementor-section.be-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(62% 86% at 86% 4%, var(--be-almond-200) 0%, rgba(244, 237, 234, 0) 68%),
linear-gradient(180deg, var(--be-oak-100) 0%, var(--be-bg) 58%);
}
.be-hero > .elementor-container {
position: relative;
z-index: 1;
align-items: center;
max-width: var(--be-container);
margin-inline: auto;
padding-inline: 20px;
}
/* --- Sur-titre ---
* Sur chaque page sauf l'accueil : il fait le travail d'un fil
* d'Ariane, là où l'accueil n'a rien à situer.
*/
.be-hero .be-hero__eyebrow {
margin-bottom: var(--be-space-sm);
}
.be-hero .be-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.65rem;
margin: 0;
font-family: var(--be-font-display);
font-size: var(--be-fs-xs);
font-weight: 700;
line-height: 1;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--be-baltic-700);
}
.be-hero .be-eyebrow::before {
content: "";
flex: 0 0 auto;
width: 28px;
height: 2px;
border-radius: 2px;
background-color: var(--be-baltic);
}
/* --- Titre --- */
.be-hero .be-hero__title .elementor-heading-title {
margin: 0;
color: var(--be-charcoal);
font-size: clamp(2.05rem, 3.8vw, 3.05rem);
line-height: 1.06;
letter-spacing: -0.032em;
font-weight: 800;
max-width: 17ch;
text-wrap: balance;
}
.be-hero .elementor-heading-title::after {
content: none;
}
/* Mots accentués du titre : couleur Yale et trait Pale Oak passé
* derrière le texte. Le bleu Baltic reste réservé aux boutons. */
.be-hero .be-hero__accent {
font-style: normal;
color: var(--be-yale);
background-image: linear-gradient(var(--be-oak), var(--be-oak));
background-repeat: no-repeat;
background-size: 100% 0.16em;
background-position: 0 92%;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
/* --- Accroche --- */
.be-hero .be-hero__lead {
margin-top: var(--be-space-md);
color: var(--be-text-muted);
font-size: var(--be-fs-lg);
line-height: 1.55;
max-width: 54ch;
}
.be-hero .be-hero__lead p {
margin: 0;
}
/* --- Pastilles de réassurance ---
* Trois au maximum, toujours concrètes. Coche pleine plutôt que
* puce : reprend la lecture « garantie » des sites de référence.
*/
.be-hero .be-hero__badges {
margin-top: var(--be-space-lg);
/* L'écart avec les boutons est porté ici plutôt que sur les boutons
* eux-mêmes : quand la colonne se resserre et que les deux appels
* passent l'un sous l'autre, c'est leur marge haute qui se
* retrouve entre les deux lignes. */
margin-bottom: var(--be-space-md);
}
.be-hero .be-badges {
display: flex;
flex-wrap: wrap;
gap: var(--be-space-sm);
margin: 0;
padding: 0;
list-style: none;
}
.be-hero .be-badges li {
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin: 0;
padding: 0.5rem 0.95rem 0.5rem 0.7rem;
border: 1px solid var(--be-oak-200);
border-radius: 999px;
background-color: var(--be-bg);
box-shadow: var(--be-shadow-sm);
font-size: var(--be-fs-sm);
font-weight: 600;
line-height: 1.2;
color: var(--be-charcoal);
font-variant-numeric: tabular-nums;
}
.be-hero .be-badges li::before {
content: "";
flex: 0 0 auto;
width: 18px;
height: 18px;
border-radius: 50%;
background-color: var(--be-baltic);
/* Coche dessinée en masque : pas de police d'icônes à charger. */
-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6 12-12-1.4-1.4z'/%3E%3C/svg%3E") center / 13px 13px no-repeat,
linear-gradient(#000, #000);
-webkit-mask-composite: xor;
mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6 12-12-1.4-1.4z'/%3E%3C/svg%3E") center / 13px 13px no-repeat,
linear-gradient(#000, #000);
mask-composite: exclude;
}
/* --- Appels à l'action ---
* Un seul bouton plein ; le second est un lien fléché, comme sur
* durasol.es (« Ver acabados → »). Deux boutons pleins se
* concurrenceraient.
*/
.be-hero .elementor-widget-wrap > .elementor-widget-button {
display: inline-flex;
width: auto;
max-width: max-content;
flex: 0 0 auto;
margin-top: var(--be-space-sm);
margin-right: var(--be-space-lg);
vertical-align: middle;
align-self: center;
/*
* LA cause du desalignement, et elle n'etait pas dans nos regles.
*
* Elementor espace ses widgets avec
* « .elementor-widget:not(:last-child) { margin-block-end: 20px } ».
* Des deux boutons cote a cote, seul le dernier y echappe : le
* premier portait donc 20 px de marge basse. Or « align-self »
* centre la boite **marges comprises** — le bouton plein se
* retrouvait une dizaine de pixels plus haut que le bouton a filet,
* quelles que soient leurs hauteurs.
*
* Trois corrections ont echoue avant d'avoir cherche ici : elles
* accordaient les rembourrages, les bordures et les hauteurs, c'est
* a dire tout sauf ce qui decalait reellement les boutons.
*/
margin-bottom: 0;
}
/* Le rembourrage et la taille sont poses par la regle commune
* ci-dessous ; il ne reste ici que ce qui est propre au bouton plein. */
.be-hero .be-hero__cta .elementor-button {
font-weight: 600;
border-radius: var(--be-radius);
}
.be-hero .be-hero__cta .elementor-button .elementor-button-text::after {
content: " \2192";
}
/* Second appel : lien fléché, sans cadre ni fond. */
/*
* Tous les appels a l'action d'un hero ont la meme boite.
*
* Ils venaient de trois regles differentes : le bouton Elementor avait
* son rembourrage, le bouton plein du hero de finition le sien, et le
* bouton a filet n'heritait que du gabarit de base — 0,85 rem et une
* police plus petite. Deux boutons cote a cote, deux hauteurs.
*
* Une seule regle les dimensionne desormais, quel que soit le systeme
* qui les produit. Tant qu'ils sont dimensionnes ici, ils ne peuvent
* pas differer ; ajouter une variante, c'est l'ajouter a cette liste.
*/
.be-hero :is(
.be-hero__cta .elementor-button,
.be-btn--primary,
.be-btn--outline
) {
box-sizing: border-box;
padding: 0.95rem 1.7rem;
font-size: var(--be-fs-base);
line-height: 1.2;
border-width: 1px;
border-style: solid;
/*
* Une hauteur plancher, egale a la hauteur naturelle du bouton.
*
* Elle ne change rien au dessin — c'est la valeur que le
* rembourrage produit deja — mais elle retire la derniere variable :
* quelle que soit la chaine de conteneurs flexibles d'Elementor, les
* deux boites font la meme hauteur, donc se centrent au meme
* endroit. C'est ce qui manquait aux corrections precedentes, qui
* accordaient les rembourrages sans jamais garantir le resultat.
*/
min-height: 3.3rem;
align-items: center;
justify-content: center;
}
/*
* Et la chaine de conteneurs centre son contenu a chaque etage.
*
* Elementor emballe un bouton dans trois boites — le widget, son
* conteneur, puis « button-wrapper » — et pose « align-items » sur le
* widget a partir d'une variable. Sans consigne a chaque etage, la
* hauteur du bouton plein etirait l'une de ces boites et le bouton a
* filet se retrouvait cale plus bas. Trois lignes, et il n'y a plus
* d'etage ou quelque chose puisse deriver.
*/
/*
* Le widget garde « inline-flex » : c'est ce qui met les deux appels
* cote a cote. Une version de cette regle le passait en « flex »,
* c'est-a-dire en bloc — les deux boutons s'empilaient alors sur les
* heros a deux colonnes, en plein ecran. Ici on ne touche qu'a
* l'alignement de son contenu.
*/
.be-hero .elementor-widget-wrap > .elementor-widget-button {
align-items: center;
}
.be-hero .elementor-widget-wrap > .elementor-widget-button > .elementor-widget-container,
.be-hero .elementor-widget-wrap > .elementor-widget-button .elementor-button-wrapper {
display: flex;
align-items: center;
}
/*
* Les deux boites intermediaires remplissent leur parent.
*
* Passees en « flex », elles sont devenues des elements flexibles, donc
* dimensionnees sur leur contenu. Sur mobile, ou le widget occupe toute
* la largeur, le bouton demandait alors « 100 % » d'une boite large
* comme son propre texte : deux boutons etroits, calles a gauche, sous
* un hero centre. Elles doivent suivre la largeur du widget, pas celle
* du texte.
*/
.be-hero .elementor-widget-wrap > .elementor-widget-button > .elementor-widget-container,
.be-hero .elementor-widget-wrap > .elementor-widget-button .elementor-button-wrapper {
flex: 1 1 auto;
min-width: 0;
}
.be-hero .be-hero__cta--ghost .elementor-button {
background-color: transparent;
border-color: var(--be-border);
color: var(--be-baltic-700);
box-shadow: none;
}
.be-hero .be-hero__cta--ghost .elementor-button:hover,
.be-hero .be-hero__cta--ghost .elementor-button:focus {
background-color: var(--be-almond-200);
border-color: var(--be-action);
color: var(--be-baltic-700);
transform: translateY(-1px);
box-shadow: var(--be-shadow-sm);
}
/* ---------------- Panneau visuel (droite) ---------------- */
.be-hero__side {
align-self: center;
}
.be-hero__side .elementor-widget-wrap {
position: relative;
align-content: center;
}
/* Cadre décalé derrière la photo : même gabarit, poussé de 16 px vers
* le haut et la droite. Deux plans au lieu d'un seul, et un rappel de
* Pale Oak du côté où le voile chaud est le plus dense. Purement
* ornemental, retiré dès que la mise en page passe en colonne. */
.be-hero__side .elementor-widget-wrap::before {
content: "";
position: absolute;
inset: 0;
transform: translate(16px, -16px);
border: 2px solid var(--be-oak);
border-radius: var(--be-radius-lg);
pointer-events: none;
z-index: 0;
}
.be-hero .be-hero__media {
position: relative;
z-index: 1;
margin: 0;
}
.be-hero .be-hero__media .elementor-widget-container {
position: relative;
border-radius: var(--be-radius-lg);
overflow: hidden;
box-shadow: var(--be-shadow-lg);
}
.be-hero .be-hero__media img {
display: block;
width: 100%;
height: clamp(280px, 34vw, 430px);
object-fit: cover;
border-radius: 0;
box-shadow: none;
}
/* --- Fiche chiffrée ---
* Chevauche l'angle bas-gauche de la photo : elle fait la jonction
* entre la colonne texte et la colonne image. Le chiffre porte
* toujours sa précision — un nombre nu se lirait comme un devis.
*/
.be-hero .be-hero__stat {
position: absolute;
left: -18px;
bottom: -18px;
z-index: 2;
margin: 0;
max-width: 22rem;
}
.be-hero .be-stat {
display: flex;
align-items: center;
gap: var(--be-space-sm);
margin: 0;
padding: var(--be-space-sm) var(--be-space-md);
border: 1px solid var(--be-oak-200);
border-radius: var(--be-radius-lg);
background-color: var(--be-bg);
box-shadow: var(--be-shadow-md);
}
.be-hero .be-stat__figure {
font-family: var(--be-font-display);
font-size: var(--be-fs-3xl);
font-weight: 800;
line-height: 1;
letter-spacing: -0.04em;
color: var(--be-yale);
font-variant-numeric: tabular-nums;
}
.be-hero .be-stat__body {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.be-hero .be-stat__label {
font-size: var(--be-fs-sm);
font-weight: 700;
line-height: 1.2;
color: var(--be-charcoal);
}
.be-hero .be-stat__note {
font-size: var(--be-fs-xs);
line-height: 1.35;
color: var(--be-text-muted);
}
/* ---------------- Variante contact (motif E) ----------------
* Sans photo, la colonne occupe toute la largeur ; alignée à gauche
* le texte y flotterait. Centrage sur une mesure courte, le reste
* de la page — formulaire et fiche de coordonnées — prenant le
* relais juste dessous.
*/
.be-hero--contact .be-hero__main .elementor-widget-wrap {
align-items: center;
/* Les deux boutons partagent une ligne dans le flux de widgets
* d'Elementor : c'est « justify-content » qui les centre, pas
* « align-items ». Les autres widgets font 100 % de large et ne
* bougent pas. */
justify-content: center;
text-align: center;
}
.be-hero--contact .be-hero__title .elementor-heading-title,
.be-hero--contact .be-hero__lead {
max-width: 30ch;
margin-inline: auto;
}
.be-hero--contact .be-hero__lead {
max-width: 62ch;
}
.be-hero--contact .be-badges {
justify-content: center;
}
.be-hero--contact .elementor-widget-wrap > .elementor-widget-button {
margin-right: var(--be-space-md);
margin-left: var(--be-space-md);
}
/* --- Hero responsive --- */
@media (max-width: 1024px) {
.be-hero .be-hero__title .elementor-heading-title {
max-width: none;
}
/* Le cadre décalé n'a plus de place une fois les colonnes
* rapprochées. */
.be-hero__side .elementor-widget-wrap::before {
content: none;
}
/* De même pour la fiche : sur une colonne étroite elle déborderait
* sur le texte au lieu de relier les deux colonnes. Elle repasse
* dans le flux, sous la photo. */
.be-hero .be-hero__stat {
position: static;
max-width: none;
margin-top: var(--be-space-md);
}
}
@media (max-width: 767px) {
.be-hero .be-hero__lead {
font-size: var(--be-fs-base);
}
.be-hero__side {
margin-top: var(--be-space-xl);
}
}
@media (max-width: 600px) {
.be-hero .elementor-widget-wrap > .elementor-widget-button {
display: flex;
width: 100%;
max-width: none;
margin-right: 0;
margin-left: 0;
}
/*
* Les deux appels s'empilent, tous les deux en pleine largeur.
*
* Le second etait « width: auto » du temps ou il s'agissait d'un
* lien souligne : le laisser ainsi maintenant qu'il est un bouton
* donnerait une pile bancale, un bloc large surmontant un bloc
* etroit. Leur marge haute suffit a les espacer.
*/
.be-hero .be-hero__cta .elementor-button,
.be-hero .be-hero__cta--ghost .elementor-button {
width: 100%;
}
}
/* ------------------------------------------------------------------
* 8c. PAGE CONTACT
* Balisage : scripts/build-contact.php.
* Modèle conta.cubical.ro/contact/ : le formulaire est l'objet
* principal. Il est posé dans une carte blanche surélevée, les
* coordonnées tiennent dans un panneau sombre à droite qui reste
* visible au défilement — le contraste clair / sombre distingue les
* deux façons de nous joindre sans ajouter de cloisons.
* ---------------------------------------------------------------- */
.be-contact > .elementor-container {
align-items: start;
}
.be-contact .be-sec__head {
margin-bottom: var(--be-space-lg);
}
/* --- Formulaire ---
* Fluent Forms rend une suite plate de .ff-el-group dans un
* . On en fait une grille à deux colonnes : les champs
* courts s'apparient dans l'ordre du balisage, seuls le message et le
* bouton occupent toute la largeur. Neuf champs empilés faisaient une
* colonne interminable ; en deux colonnes le formulaire tient dans un
* écran.
*/
.be-contact__form {
margin-top: 0;
}
.be-contact__form .fluentform {
position: relative;
background-color: #fff;
border: 1px solid var(--be-oak-200);
border-radius: var(--be-radius-lg);
box-shadow: var(--be-shadow-md);
padding: clamp(1.25rem, 3vw, 2.5rem);
}
/* Filet de couleur en tête de carte : rattache le formulaire à la
* marque sans peindre tout le bloc. */
.be-contact__form .fluentform::before {
content: "";
position: absolute;
inset-inline: -1px;
top: -1px;
height: 4px;
background-image: linear-gradient(90deg, var(--be-baltic), var(--be-yale));
border-radius: var(--be-radius-lg) var(--be-radius-lg) 0 0;
}
.be-contact__form .fluentform form > fieldset {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--be-space-md);
row-gap: var(--be-space-md);
}
.be-contact__form .ff_screen_reader_title {
grid-column: 1 / -1;
}
.be-contact__form .ff-el-group {
margin-bottom: 0;
min-width: 0;
}
/* Message et bouton : pleine largeur. */
.be-contact__form .ff-el-group:has(textarea),
.be-contact__form .ff_submit_btn_wrapper {
grid-column: 1 / -1;
}
.be-contact__form .ff_submit_btn_wrapper {
padding-top: var(--be-space-sm);
border-top: 1px solid var(--be-oak-200);
}
@media (max-width: 575px) {
.be-contact__form .fluentform form > fieldset {
grid-template-columns: minmax(0, 1fr);
}
}
.be-contact__form .ff-el-input--label label {
display: inline-block;
font-family: var(--be-font-display);
font-size: var(--be-fs-sm);
font-weight: 600;
line-height: 1.3;
color: var(--be-charcoal);
margin-bottom: 0.4rem;
}
/* L'astérisque des champs obligatoires : lisible sans crier. */
.be-contact__form .ff-el-is-required label::after {
color: #a3301f;
font-weight: 700;
margin-left: 0.15em;
}
.be-contact__form .ff-el-form-control {
width: 100%;
min-height: 48px;
font-family: var(--be-font-body);
font-size: var(--be-fs-base);
color: var(--be-charcoal);
background-color: #fdfcfb;
border: 1px solid var(--be-oak);
border-radius: var(--be-radius);
padding: 0.7rem 0.9rem;
line-height: 1.45;
transition: border-color var(--be-transition), box-shadow var(--be-transition),
background-color var(--be-transition);
}
.be-contact__form .ff-el-form-control::placeholder {
color: #8a9186;
}
.be-contact__form .ff-el-form-control:hover {
border-color: var(--be-text-muted);
}
.be-contact__form .ff-el-form-control:focus {
background-color: #fff;
border-color: var(--be-baltic);
box-shadow: 0 0 0 3px rgba(20, 92, 158, 0.16);
outline: none;
}
/* Listes déroulantes : chevron dessiné plutôt que la flèche du
* système, qui ne suit pas la palette. */
.be-contact__form select.ff-el-form-control {
appearance: none;
-webkit-appearance: none;
padding-right: 2.5rem;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6356' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 18px 18px;
cursor: pointer;
}
/* Tant que « - Sélectionner - » est choisi, le champ se lit comme un
* espace réservé et non comme une réponse. */
.be-contact__form select.ff-el-form-control:has(option[value=""]:checked) {
color: #8a9186;
}
.be-contact__form textarea.ff-el-form-control {
min-height: 150px;
resize: vertical;
}
.be-contact__form .ff-btn-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
background-color: var(--be-action);
border: 1px solid var(--be-action);
color: #fff;
font-family: var(--be-font-body);
font-size: var(--be-fs-base);
font-weight: 600;
letter-spacing: 0.01em;
border-radius: var(--be-radius);
padding: 0.95rem 2.2rem;
min-height: 52px;
cursor: pointer;
box-shadow: 0 6px 16px rgba(20, 92, 158, 0.22);
transition: background-color var(--be-transition), box-shadow var(--be-transition),
transform var(--be-transition);
}
.be-contact__form .ff-btn-submit:hover,
.be-contact__form .ff-btn-submit:focus-visible {
background-color: var(--be-action-hover);
border-color: var(--be-action-hover);
box-shadow: 0 10px 22px rgba(20, 92, 158, 0.28);
transform: translateY(-1px);
}
.be-contact__form .ff-btn-submit:active {
transform: translateY(0);
box-shadow: 0 4px 12px rgba(20, 92, 158, 0.22);
}
@media (max-width: 575px) {
.be-contact__form .ff-btn-submit {
width: 100%;
}
}
.be-contact__form .error.text-danger {
font-size: var(--be-fs-xs);
color: #a3301f;
margin-top: 0.3rem;
}
.be-contact__form .ff-el-group:has(.error.text-danger) .ff-el-form-control {
border-color: #a3301f;
}
/* --- Fiche coordonnées ---
* Grille à deux colonnes : l'icône occupe la gouttière, le libellé et
* la valeur restent alignés entre eux.
*/
.be-ccard {
background-color: var(--be-almond-200);
border: 1px solid var(--be-oak-200);
border-radius: var(--be-radius-lg);
padding: clamp(1.1rem, 2.4vw, 1.6rem);
}
.be-ccard--plain {
background-color: transparent;
border: 0;
padding: 0;
}
/* Variante sombre : la colonne des coordonnées, en vis-à-vis de la
* carte blanche du formulaire. */
.be-ccard--dark {
background-color: var(--be-yale);
border-color: var(--be-yale);
color: var(--be-oak-100);
box-shadow: var(--be-shadow-md);
padding: clamp(1.3rem, 2.6vw, 1.9rem);
}
.be-ccard__title {
margin: 0 0 var(--be-space-md);
font-family: var(--be-font-display);
font-size: var(--be-fs-lg);
font-weight: 700;
color: var(--be-charcoal);
}
.be-ccard--dark .be-ccard__title {
color: #fff;
}
/* --- Appel direct et WhatsApp ---
* La barre de contact flottante (8e) ne s'affiche pas sur la page
* Contact : ces deux boutons sont donc le seul accès au téléphone et à
* WhatsApp de la page. Ils passent avant la fiche d'adresse.
*/
.be-ccard__acts {
display: grid;
gap: 0.6rem;
margin-bottom: var(--be-space-lg);
}
.be-ccard__tel,
.be-ccard__wa {
display: grid;
grid-template-columns: 24px 1fr;
column-gap: 0.75rem;
row-gap: 0.1rem;
align-items: center;
padding: 0.85rem 1rem;
border-radius: var(--be-radius);
text-decoration: none;
transition: background-color var(--be-transition), border-color var(--be-transition),
transform var(--be-transition);
}
.be-ccard__tel {
background-color: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.be-ccard__tel:hover,
.be-ccard__tel:focus-visible {
background-color: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.3);
transform: translateY(-1px);
}
.be-ccard__tel .be-ico,
.be-ccard__wa .be-ico {
grid-row: span 2;
margin-top: 0;
}
.be-ccard__tel .be-ico {
color: var(--be-oak);
}
.be-ccard__tel-lbl {
font-family: var(--be-font-display);
font-size: var(--be-fs-xs);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(247, 244, 241, 0.68);
}
.be-ccard__tel-num {
font-family: var(--be-font-display);
font-size: var(--be-fs-xl);
font-weight: 700;
line-height: 1.15;
color: #fff;
font-variant-numeric: tabular-nums;
}
/* WhatsApp : même panneau que le téléphone, la marque dans le seul
* pictogramme.
*
* Ce pavé était un aplat de vert WhatsApp pleine largeur. Trois défauts,
* dans cet ordre :
*
* 1. C'était la seule couleur saturée de la page. La charte tient sur
* deux bleus froids et deux neutres chauds (design/color-palette.md) ;
* un vert à 100 % de saturation posé au milieu n'en fait pas partie
* et tirait l'œil avant tout le reste, titre compris.
* 2. Il écrasait le téléphone. Les deux tuiles disent la même chose —
* « joignez-nous directement » — mais l'une était un bouton plein et
* l'autre un panneau discret. Le numéro est pourtant le canal
* principal, pas le second.
* 3. Il annonçait une action plus engageante qu'elle ne l'est : un
* aplat de cette taille se lit comme l'appel à l'action de la page,
* alors que le formulaire est juste à côté.
*
* WhatsApp se reconnaît à sa bulle, pas à son rectangle vert — c'est déjà
* le parti pris de la barre de contact flottante (8e), où la marque tient
* dans une pastille. Le vert reste donc, réduit au pictogramme : 4,8:1
* contre le fond Yale, très au-delà des 3:1 exigés d'un élément graphique.
*/
.be-ccard__wa {
background-color: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.be-ccard__wa:hover,
.be-ccard__wa:focus-visible {
background-color: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.3);
transform: translateY(-1px);
}
/* Le vert de marque, et lui seul.
*
* Le sélecteur porte « .be-ccard--dark » parce que la règle qui met tous
* les pictogrammes de la carte sombre en Pale Oak a cette portée-là : à
* spécificité égale, elle est écrite plus bas et l'emportait. */
.be-ccard--dark .be-ccard__wa .be-ico {
color: #25d366;
}
.be-ccard__wa-txt {
font-size: var(--be-fs-sm);
font-weight: 600;
line-height: 1.35;
color: rgba(247, 244, 241, 0.92);
}
/* --- Régions desservies, en pastilles ---
* Huit noms de région alignés en phrase font un pavé qu'on ne lit pas ;
* en pastilles on les compte d'un coup d'œil.
*/
/* Portée à « .be-ccard » volontairement : « .be-zones » est aussi la
* racine de la section « zones d'intervention » de la page d'accueil
* (section 8m, balisage inc/zones.php), qui n'a rien à voir avec ces
* pastilles. Les deux se sont déjà marché dessus une fois — une mise en
* grille écrite pour la section d'accueil étirait ici les huit pastilles
* en barres pleine largeur.
*
* C'est la même collision que celle qui avait imposé de renommer
* « .be-steps » en « .be-flow » (section 8h). La vraie correction est de
* renommer l'un des deux composants ; en attendant, cette portée empêche
* l'accident de se reproduire dans ce sens-là. */
.be-ccard .be-zones {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.15rem;
}
.be-zones__chip {
font-family: var(--be-font-body);
font-size: var(--be-fs-xs);
font-weight: 600;
line-height: 1.2;
padding: 0.28rem 0.6rem;
border-radius: var(--be-radius-pill);
background-color: rgba(20, 92, 158, 0.08);
border: 1px solid rgba(20, 92, 158, 0.2);
color: var(--be-baltic-700);
white-space: nowrap;
}
.be-ccard--dark .be-zones__chip {
background-color: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
color: var(--be-oak-100);
}
.be-ccard__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--be-space-md);
}
.be-ccard__list li {
display: grid;
grid-template-columns: 24px 1fr;
column-gap: 0.75rem;
row-gap: 0.1rem;
align-items: start;
margin: 0;
padding-bottom: var(--be-space-md);
border-bottom: 1px solid var(--be-oak-200);
}
.be-ccard--plain .be-ccard__list li {
border-bottom-color: var(--be-border);
}
.be-ccard--dark .be-ccard__list li {
border-bottom-color: rgba(247, 244, 241, 0.16);
}
.be-ccard__list li:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.be-ico {
grid-row: span 2;
width: 20px;
height: 20px;
margin-top: 0.2rem;
color: var(--be-baltic);
}
.be-ccard--dark .be-ico {
color: var(--be-oak);
}
.be-ccard__lbl {
font-family: var(--be-font-display);
font-size: var(--be-fs-xs);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--be-text-muted);
}
.be-ccard--dark .be-ccard__lbl {
color: rgba(247, 244, 241, 0.68);
}
.be-ccard__val {
font-size: var(--be-fs-lg);
font-weight: 600;
line-height: 1.35;
color: var(--be-charcoal);
text-decoration: none;
font-variant-numeric: tabular-nums;
}
.be-ccard--dark .be-ccard__val {
color: var(--be-oak-100);
}
.be-ccard__val--sm {
font-size: var(--be-fs-sm);
font-weight: 500;
color: var(--be-text-muted);
}
.be-ccard--dark .be-ccard__val--sm {
color: rgba(247, 244, 241, 0.78);
}
a.be-ccard__val:hover,
a.be-ccard__val:focus {
color: var(--be-baltic-700);
}
.be-ccard--dark a.be-ccard__val:hover,
.be-ccard--dark a.be-ccard__val:focus {
color: #fff;
}
.be-ccard__social {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: var(--be-space-lg);
font-size: var(--be-fs-sm);
font-weight: 600;
color: var(--be-baltic-700);
text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
}
.be-ccard__social .be-ico--inline {
width: 18px;
height: 18px;
flex: 0 0 auto;
margin: 0;
}
.be-ccard--dark .be-ccard__social {
color: var(--be-oak);
border-bottom-color: rgba(203, 185, 168, 0.55);
}
.be-ccard--dark .be-ccard__social:hover,
.be-ccard--dark .be-ccard__social:focus {
color: #fff;
border-bottom-color: #fff;
}
/* Le panneau suit le défilement tant que le formulaire est plus haut
* que lui ; sous 992 px il repasse simplement sous le formulaire. */
@media (min-width: 992px) {
.be-contact__side > .elementor-widget-wrap {
position: sticky;
top: calc(var(--be-header-h) + var(--be-space-md));
}
}
/* --- Étapes, variante sur fond clair --- */
.be-steps--light .be-step {
border-top-color: var(--be-oak);
}
.be-steps--light .be-step__num {
background-color: var(--be-baltic);
color: #fff;
}
.be-steps--light .be-step__title {
color: var(--be-charcoal);
}
.be-steps--light .be-step__text {
color: var(--be-text-muted);
}
/* --- Nous trouver : adresse + plan --- */
.be-contact--trouver {
align-items: center;
}
.be-contact__map iframe,
.be-contact__map .elementor-custom-embed {
width: 100%;
min-height: 320px;
border-radius: var(--be-radius-lg);
border: 1px solid var(--be-border);
overflow: hidden;
}
@media (max-width: 767px) {
.be-contact__side,
.be-contact__mapcol {
margin-top: var(--be-space-xl);
}
}
/* ------------------------------------------------------------------
* 8c bis. REPRISES DE MISE EN FORME
* Ces blocs réécrivent des composants définis plus haut ; placés
* ici, ils l'emportent sans recourir à !important.
* ---------------------------------------------------------------- */
/* --- Galerie projets : mosaïque ---
* Balisage produit par be_pj_mosaique() dans scripts/build-projets.php,
* à la place du widget « galerie » d'Elementor : celui-ci sortait le
* balisage natif de WordPress, des colonnes flottantes à 25 % dans
* lesquelles les vignettes restaient à leur taille d'origine. Sur du
* béton, une vignette de 70 px ne montre rien — c'est la matière qu'on
* vient juger.
*
* Toutes les photos sont au format 4/3 : une grille régulière donnait
* un damier monotone sur 36 ou 73 images. Le motif de be_pj_mosaique()
* alterne une grande cellule (2×2), une large (2×1) et six normales,
* soit douze cellules par groupe de huit photos — exactement trois
* rangées de quatre colonnes.
*/
.be-mosaic {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 150px;
/* « dense » revient en arrière remplir les trous laissés par les
* grandes cellules en fin de série. */
grid-auto-flow: row dense;
gap: var(--be-space-xs);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 640px) {
.be-mosaic {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 170px;
}
}
@media (min-width: 1000px) {
.be-mosaic {
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 190px;
gap: var(--be-space-sm);
}
}
.be-mosaic__item {
margin: 0;
padding: 0;
min-width: 0;
}
.be-mosaic__item--xl {
grid-column: span 2;
grid-row: span 2;
}
.be-mosaic__item--wide {
grid-column: span 2;
}
.be-mosaic__link {
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: var(--be-radius);
background-color: var(--be-oak-200);
}
.be-mosaic__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border: 0;
border-radius: 0;
box-shadow: none;
transition: transform 420ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Loupe au survol : indique que la photo s'ouvre, sans recouvrir
* l'image d'un voile qui en masquerait la matière. */
.be-mosaic__zoom {
position: absolute;
inset-block-end: 8px;
inset-inline-end: 8px;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.92);
box-shadow: var(--be-shadow-sm);
opacity: 0;
transform: scale(0.8);
transition: opacity var(--be-transition), transform var(--be-transition);
}
.be-mosaic__zoom::before,
.be-mosaic__zoom::after {
content: "";
position: absolute;
background-color: var(--be-charcoal);
}
.be-mosaic__zoom::before {
inset-block-start: 14px;
inset-inline-start: 9px;
width: 12px;
height: 2px;
}
.be-mosaic__zoom::after {
inset-block-start: 9px;
inset-inline-start: 14px;
width: 2px;
height: 12px;
}
.be-mosaic__link:hover .be-mosaic__img,
.be-mosaic__link:focus-visible .be-mosaic__img {
transform: scale(1.06);
}
.be-mosaic__link:hover .be-mosaic__zoom,
.be-mosaic__link:focus-visible .be-mosaic__zoom {
opacity: 1;
transform: scale(1);
}
.be-mosaic__link:focus-visible {
outline: 3px solid var(--be-baltic);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.be-mosaic__img,
.be-mosaic__zoom {
transition: none;
}
.be-mosaic__link:hover .be-mosaic__img,
.be-mosaic__link:focus-visible .be-mosaic__img {
transform: none;
}
}
/* --- FAQ : rail à gauche, questions à droite ---
* Onze questions dans un accordéon pleine largeur faisaient
* disparaître le titre de section dès la première ouverture, et la
* relance « demandez un devis » se retrouvait à plus d'un écran du
* haut de la section. Le rail garde les deux sous les yeux.
*/
.be-qa {
display: grid;
gap: clamp(1.75rem, 4vw, 3.5rem);
}
@media (min-width: 900px) {
.be-qa {
grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
align-items: start;
}
.be-qa__rail {
position: sticky;
/* Sous l'en-tête collant, sinon le rail passe dessous. */
top: calc(var(--be-header-h) + var(--be-space-md));
}
}
.be-qa__rail .be-sec__head {
margin-bottom: var(--be-space-lg);
}
.be-qa__cta {
padding: var(--be-space-md) var(--be-space-md) var(--be-space-md) var(--be-space-lg);
border-left: 3px solid var(--be-baltic);
background-color: var(--be-bg);
border-radius: 0 var(--be-radius) var(--be-radius) 0;
}
.be-qa__cta-text {
margin: 0 0 0.3rem;
font-weight: 700;
color: var(--be-charcoal);
}
.be-qa__cta-link {
font-weight: 600;
color: var(--be-link);
text-decoration: underline;
text-underline-offset: 0.2em;
}
.be-qa__cta-link::after {
content: " \2192";
text-decoration: none;
}
.be-faq {
max-width: none;
border-top: 1px solid var(--be-border);
}
.be-faq__q {
align-items: center;
gap: var(--be-space-md);
padding: var(--be-space-md) 0;
font-size: var(--be-fs-lg);
font-weight: 700;
letter-spacing: -0.015em;
}
/* Numéro : donne une prise pour se repérer dans une liste longue,
* et une amorce visuelle constante à gauche des questions. */
.be-faq__num {
flex: 0 0 auto;
font-family: var(--be-font-display);
font-size: var(--be-fs-sm);
font-weight: 700;
color: var(--be-oak);
font-variant-numeric: tabular-nums;
transition: color var(--be-transition);
}
.be-faq__txt {
flex: 1 1 auto;
min-width: 0;
}
.be-faq__item[open] .be-faq__num {
color: var(--be-baltic);
}
.be-faq__item[open] .be-faq__q {
color: var(--be-baltic-700);
}
/* La réponse s'aligne sur le texte de la question, pas sur le numéro.
* Seulement à partir de 900 px : sur un écran étroit, l'alinéa coûte
* plus de largeur qu'il n'apporte de lisibilité. */
@media (min-width: 900px) {
.be-qa .be-faq__a {
padding-left: 2.75rem;
}
}
.be-faq__q::after {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid var(--be-oak);
font-size: 1.1rem;
color: var(--be-baltic);
transition: background-color var(--be-transition), color var(--be-transition);
}
.be-faq__item[open] .be-faq__q::after {
background-color: var(--be-baltic);
border-color: var(--be-baltic);
color: #fff;
}
.be-faq__a {
padding: 0 0 var(--be-space-lg);
max-width: 72ch;
font-size: var(--be-fs-base);
}
@media (min-width: 900px) {
.be-faq__a {
padding-left: 0;
}
}
/* ------------------------------------------------------------------
* 8d. SECTIONS DE LA PAGE D'ACCUEIL
* Balisage produit par scripts/build-home.php.
* Rythme voulu : clair, chaud, clair, sombre, chaud, clair, chaud, clair
* — les sections se distinguent par le fond, sans multiplier les cartes.
* L'aide au choix (8k) occupe le troisième temps, en clair : posée entre
* le catalogue chaud et les étapes sombres, elle sépare deux fonds
* appuyés qui se toucheraient sinon. Les comparateurs reprennent le fond
* chaud juste après les étapes, pour rouvrir la page après son seul
* aplat sombre.
* ---------------------------------------------------------------- */
.elementor-section.be-sec {
padding-block: clamp(3rem, 7vw, 5.5rem);
}
.be-sec--warm {
background-color: var(--be-almond-200);
}
.be-sec--dark {
background-color: var(--be-yale);
color: var(--be-oak-100);
}
.be-sec .be-block {
color: inherit;
}
/* --- En-tête de section --- */
.be-sec__head {
max-width: 62ch;
margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.be-sec__kicker {
display: flex;
align-items: center;
gap: 0.7rem;
margin: 0 0 var(--be-space-sm);
font-family: var(--be-font-display);
font-size: var(--be-fs-xs);
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--be-yale);
}
.be-sec__kicker::before {
content: "";
width: 28px;
height: 2px;
background-color: var(--be-baltic);
flex: 0 0 auto;
}
.be-sec--dark .be-sec__kicker {
color: var(--be-oak);
}
.be-sec--dark .be-sec__kicker::before {
background-color: var(--be-oak);
}
.be-sec__title {
margin: 0;
font-family: var(--be-font-display);
font-size: clamp(1.7rem, 3.2vw, 2.4rem);
line-height: 1.12;
letter-spacing: -0.025em;
color: inherit;
}
/* Ce titre n'a ni trait avant, ni trait après.
*
* « .be-sec__head » porte déjà son propre repère : le sur-titre et son
* tiret. Or les sections bâties avec ce composant sont aussi posées dans
* le fil de lecture des pages de finition, où tout « h2 » reçoit un tiret
* bleu en « ::before ». Résultat : deux tirets empilés au-dessus du même
* titre, celui du sur-titre puis celui de l'article. */
.be-sec__title::after,
.be-sec__title::before {
content: none;
}
.be-sec__lead {
margin: var(--be-space-md) 0 0;
font-size: var(--be-fs-lg);
line-height: 1.55;
color: var(--be-text-muted);
}
.be-sec--dark .be-sec__lead {
color: rgba(247, 244, 241, 0.8);
}
.be-sec__more {
margin: var(--be-space-lg) 0 0;
font-size: var(--be-fs-sm);
}
.be-sec__more a {
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
}
/* --- Grilles de cartes --- */
.be-cards {
display: grid;
gap: var(--be-space-lg);
margin: 0;
padding: 0;
list-style: none;
}
.be-cards--3 {
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
/* Atouts : un filet, pas un encadré plein. Une carte par bloc
* aplatirait la hiérarchie de la page. */
.be-card {
margin: 0;
padding-top: var(--be-space-md);
border-top: 2px solid var(--be-oak);
}
.be-card__title {
margin: 0 0 0.4rem;
font-family: var(--be-font-display);
font-size: var(--be-fs-lg);
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.015em;
color: inherit;
}
.be-card__title::after {
content: none;
}
.be-card__text {
margin: 0;
font-size: var(--be-fs-sm);
line-height: 1.6;
color: var(--be-text-muted);
}
/* --- Cartes finitions : celles-ci sont bien des objets --- */
.be-cards--media .be-card--media {
display: flex;
flex-direction: column;
padding-top: 0;
border-top: 0;
background-color: #fff;
border: 1px solid var(--be-oak-200);
border-radius: var(--be-radius-lg);
overflow: hidden;
transition: transform var(--be-transition), box-shadow var(--be-transition);
}
.be-cards--media .be-card--media:hover,
.be-cards--media .be-card--media:focus-within {
transform: translateY(-3px);
box-shadow: var(--be-shadow-md);
}
.be-card__media {
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
background-color: var(--be-oak-200);
}
.be-card__media img {
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
display: block;
border-radius: 0;
box-shadow: none;
transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.be-card--media:hover .be-card__media img {
transform: scale(1.04);
}
.be-card__body {
display: flex;
flex-direction: column;
gap: 0.45rem;
padding: var(--be-space-md);
flex: 1 1 auto;
}
.be-card__body .be-card__title a {
color: var(--be-charcoal);
text-decoration: none;
}
.be-card__body .be-card__title a:hover,
.be-card__body .be-card__title a:focus {
color: var(--be-baltic-700);
}
/* Prix plancher : la donnée la plus regardée de la carte. */
.be-card__price {
margin: 0;
align-self: flex-start;
padding: 0.2rem 0.6rem;
border-radius: 999px;
background-color: var(--be-almond-200);
border: 1px solid var(--be-oak);
font-size: var(--be-fs-xs);
font-weight: 700;
color: var(--be-charcoal);
font-variant-numeric: tabular-nums;
}
.be-card__link {
margin-top: auto;
padding-top: var(--be-space-xs);
font-size: var(--be-fs-sm);
font-weight: 600;
color: var(--be-baltic-700);
text-decoration: none;
}
.be-card__link::after {
content: " \2192";
}
.be-card__link:hover,
.be-card__link:focus {
text-decoration: underline;
text-underline-offset: 0.2em;
}
/* --- Étapes de chantier ---
* Numérotées parce que c'est une vraie séquence : l'ordre porte une
* information, contrairement aux atouts ci-dessus.
*/
.be-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: var(--be-space-lg);
margin: 0;
padding: 0;
list-style: none;
}
.be-step {
position: relative;
margin: 0;
padding-top: var(--be-space-md);
border-top: 1px solid rgba(247, 244, 241, 0.3);
}
.be-step__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
margin-bottom: var(--be-space-sm);
border-radius: 50%;
background-color: var(--be-oak-100);
color: var(--be-yale);
font-family: var(--be-font-display);
font-size: var(--be-fs-sm);
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.be-step__title {
margin: 0 0 0.35rem;
font-family: var(--be-font-display);
font-size: var(--be-fs-lg);
font-weight: 700;
line-height: 1.25;
color: #fff;
}
.be-step__title::after {
content: none;
}
.be-step__text {
margin: 0;
font-size: var(--be-fs-sm);
line-height: 1.6;
color: rgba(247, 244, 241, 0.8);
}
/* --- Réalisations --- */
.be-projects {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--be-space-lg);
margin: 0;
padding: 0;
list-style: none;
}
.be-project {
margin: 0;
}
.be-project a {
position: relative;
display: block;
border-radius: var(--be-radius-lg);
overflow: hidden;
text-decoration: none;
box-shadow: var(--be-shadow-sm);
transition: transform var(--be-transition), box-shadow var(--be-transition);
}
.be-project a:hover,
.be-project a:focus-visible {
transform: translateY(-3px);
box-shadow: var(--be-shadow-md);
}
.be-project img {
display: block;
width: 100%;
max-width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
border-radius: 0;
box-shadow: none;
}
.be-project__label {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: var(--be-space-lg) var(--be-space-md) var(--be-space-md);
font-family: var(--be-font-display);
font-size: var(--be-fs-lg);
font-weight: 700;
color: #fff;
background: linear-gradient(to top, rgba(31, 39, 27, 0.88), rgba(31, 39, 27, 0));
}
/* --- Logos partenaires ---
* Les cinq fichiers sont des carrés de 400 px dont la marque n'occupe
* qu'une fraction : bornés par la seule hauteur, ils se réduisaient à
* une dizaine de pixels utiles. Deux sont de surcroît des JPEG sur
* fond blanc, qui se découpaient en rectangles clairs sur le fond
* chaud de la section, à côté de trois PNG transparents.
* La tuile blanche règle les deux : gabarit commun, et le fond blanc
* des JPEG se fond dans celui de la tuile.
*/
.be-part {
display: grid;
gap: clamp(1.75rem, 4vw, 2.5rem);
}
/* Un élément de grille ne descend pas sous son contenu minimal sans
* qu'on l'y autorise : les groupes de logos débordaient la colonne. */
.be-part > * {
min-width: 0;
}
.be-part__group + .be-part__group {
padding-top: clamp(1.5rem, 4vw, 2.25rem);
border-top: 1px solid var(--be-oak);
}
.be-part__lbl {
margin: 0;
font-family: var(--be-font-display);
font-size: var(--be-fs-xs);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--be-text-muted);
}
.be-part__lbl::after {
content: none;
}
.be-part__text {
margin: 0.4rem 0 0;
font-size: var(--be-fs-sm);
color: var(--be-text-muted);
}
.be-logos {
display: grid;
/* « min(170px, 100%) » et non « 170px » : un minimum fixe rend la
* largeur minimale de la grille égale à trois tuiles, soit 544 px.
* Dans les 355 px d'une colonne de téléphone, la piste débordait et
* entraînait la page entière — l'accueil défilait de 179 px sur le
* côté. Avec « min() », la tuile descend sous 170 px quand il le
* faut, et les tuiles se replient normalement. */
grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr));
gap: var(--be-space-md);
margin: var(--be-space-md) 0 0;
padding: 0;
list-style: none;
/* Trois tuiles suffisent à tenir la rangée ; au-delà, elles
* s'étireraient sur toute la largeur pour rien. Borné aussi par
* « 100% » : sans cela, la piste de « .be-part » se dimensionnait
* sur les 620 px et sortait du conteneur en mobile. */
max-width: min(620px, 100%);
}
.be-logo {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
/* Marge interne serrée : les fichiers sont des carrés de 400 px
* qui portent déjà leur propre blanc tournant. Un rembourrage
* généreux s'ajoutait au leur et réduisait la marque d'autant. */
padding: var(--be-space-sm);
aspect-ratio: 4 / 3;
border: 1px solid var(--be-oak-200);
border-radius: var(--be-radius-lg);
background-color: #fff;
transition: border-color var(--be-transition), box-shadow var(--be-transition);
}
.be-logo:hover {
border-color: var(--be-oak);
box-shadow: var(--be-shadow-sm);
}
.be-logos img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 0;
box-shadow: none;
/* Les logos partenaires ne doivent pas concurrencer la palette ;
* la couleur revient au survol. */
filter: grayscale(1);
opacity: 0.72;
transition: filter var(--be-transition), opacity var(--be-transition);
}
.be-logo:hover img {
filter: grayscale(0);
opacity: 1;
}
/* --- FAQ : natif, accessible au clavier sans JavaScript --- */
.be-faq {
max-width: 76ch;
border-top: 1px solid var(--be-border);
}
.be-faq__item {
border-bottom: 1px solid var(--be-border);
}
.be-faq__q {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--be-space-md);
padding: var(--be-space-md) 0;
cursor: pointer;
list-style: none;
font-family: var(--be-font-display);
font-size: var(--be-fs-lg);
font-weight: 700;
line-height: 1.35;
color: var(--be-charcoal);
transition: color var(--be-transition);
}
.be-faq__q::-webkit-details-marker {
display: none;
}
.be-faq__q::after {
content: "+";
flex: 0 0 auto;
font-size: 1.4em;
line-height: 1;
color: var(--be-baltic);
}
.be-faq__item[open] .be-faq__q::after {
content: "\2212";
}
.be-faq__q:hover,
.be-faq__q:focus-visible {
color: var(--be-baltic-700);
}
.be-faq__a {
padding: 0 0 var(--be-space-md);
max-width: 68ch;
}
.be-faq__a p {
margin: 0;
color: var(--be-text-muted);
line-height: 1.7;
}
@media (max-width: 600px) {
.be-sec__lead {
font-size: var(--be-fs-base);
}
.be-faq__q {
font-size: var(--be-fs-base);
}
}
/* ------------------------------------------------------------------
* 8e. BARRE DE CONTACT FLOTTANTE
* Balisage : inc/dock.php.
* Capsule blanche, comme l'en-tête : le site ne porte plus qu'une
* seule forme flottante, en haut et en bas. La version sombre
* précédente empilait trois boutons de trois couleurs sans
* hiérarchie — le regard ne savait pas lequel était l'action.
* Ici : le téléphone en lien texte, WhatsApp réduit à sa pastille de
* marque, un seul bouton plein, et la croix rentrée dans la capsule.
* ---------------------------------------------------------------- */
.be-dock {
position: fixed;
left: 50%;
bottom: 22px;
z-index: 9990;
transform: translate(-50%, 140%);
opacity: 0;
pointer-events: none;
transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
}
.be-dock.is-on {
transform: translate(-50%, 0);
opacity: 1;
pointer-events: auto;
}
/* Fond Yale Blue : la palette réserve cette teinte aux bandes —
* pied de page, bandeaux d'appel à l'action — et c'en est une.
* Conséquence à assumer : Baltic Blue ne tient pas sur Yale (1,30:1,
* le piège n° 2 de design/color-palette.md), donc le bouton principal
* s'inverse ici en clair sur foncé. C'est le seul endroit du site où
* il n'est pas bleu. */
.be-dock__box {
display: flex;
align-items: center;
gap: var(--be-space-md);
padding: 0.5rem 0.6rem 0.5rem var(--be-space-lg);
border: 1px solid var(--be-yale-700);
border-radius: var(--be-radius-xl);
background-color: var(--be-dark);
box-shadow: var(--be-shadow-lg);
}
/* --- Accroche --- */
.be-dock__intro {
display: flex;
align-items: center;
gap: var(--be-space-sm);
}
/* Pastille d'icône : une bulle de message, parce que l'accroche est
* une question. Fond Yale foncé plutôt qu'un aplat bleu vif — la
* version d'avant posait là une tuile Baltic de 44 px qui pesait plus
* lourd que le bouton d'action lui-même. */
.be-dock__ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex: 0 0 auto;
border-radius: var(--be-radius-pill);
background-color: var(--be-yale-700);
color: var(--be-almond);
}
.be-dock__ico svg {
width: 19px;
height: 19px;
}
.be-dock__txt {
margin: 0;
white-space: nowrap;
}
.be-dock__txt b {
display: block;
color: var(--be-text-invert);
font-family: var(--be-font-display);
font-size: var(--be-fs-sm);
font-weight: 700;
line-height: 1.25;
}
.be-dock__txt small {
display: flex;
align-items: center;
gap: 0.4rem;
/* 5,5:1 sur Yale Blue : conforme AA. */
color: var(--be-almond);
font-size: var(--be-fs-xs);
line-height: 1.3;
}
/* Point de présence : signale que la ligne est bien active. */
.be-dock__txt small i {
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #4ade80;
animation: be-dock-dot 2s infinite;
}
@keyframes be-dock-dot {
0% {
box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55);
}
70% {
box-shadow: 0 0 0 7px rgba(74, 222, 128, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
}
}
.be-dock__acts {
display: flex;
align-items: center;
gap: var(--be-space-xs);
}
/* Filet de séparation entre l'accroche et les actions : sans lui, le
* texte et les boutons formaient une seule file et le regard ne
* savait pas où commençait ce sur quoi on peut cliquer. */
@media (min-width: 981px) {
.be-dock__acts {
position: relative;
padding-left: var(--be-space-lg);
}
.be-dock__acts::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 1px;
height: 30px;
transform: translateY(-50%);
background-color: var(--be-yale-700);
}
}
/* La croix se détache du groupe d'actions. */
.be-dock__close {
margin-left: var(--be-space-xs);
}
/* --- Téléphone : lien texte, pas un bouton ---
* Le numéro se lit et se compose ; l'encadrer en faisait un troisième
* bouton en concurrence avec l'action principale.
*/
.be-dock__tel {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.5rem 0.65rem;
border-radius: var(--be-radius-pill);
color: var(--be-text-invert);
font-size: var(--be-fs-sm);
font-weight: 700;
font-variant-numeric: tabular-nums;
text-decoration: none;
white-space: nowrap;
transition: background-color var(--be-transition), color var(--be-transition);
}
.be-dock__tel svg {
width: 17px;
height: 17px;
flex: 0 0 auto;
color: var(--be-almond);
}
.be-dock__tel:hover,
.be-dock__tel:focus-visible {
background-color: var(--be-yale-700);
color: #fff;
}
/* --- WhatsApp : pastille de marque ---
* Réduit à son icône : la marque est reconnue à sa forme, le libellé
* n'apportait qu'un troisième pavé de texte. Le vert vif de la marque
* ressort à 5,6:1 sur le Yale Blue de la barre — c'est ce rapport-là
* qui compte pour qu'un bouton se voie.
*/
.be-dock__wa {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex: 0 0 auto;
border-radius: var(--be-radius-pill);
background-color: #25d366;
color: #0a2e18;
transition: background-color var(--be-transition);
}
.be-dock__wa svg {
width: 21px;
height: 21px;
}
.be-dock__wa:hover,
.be-dock__wa:focus-visible {
background-color: #3ee87d;
color: #0a2e18;
}
/* --- Action principale ---
* Inversée : clair sur foncé. Baltic Blue sur Yale Blue tomberait à
* 1,30:1 et disparaîtrait. Ici, 12:1 contre le fond de la barre.
*/
.be-dock__go {
display: inline-flex;
align-items: center;
gap: 0.45rem;
height: 40px;
padding: 0 1.2rem;
border-radius: var(--be-radius-pill);
background-color: var(--be-oak-100);
color: var(--be-yale-700);
font-size: var(--be-fs-sm);
font-weight: 700;
line-height: 1;
text-decoration: none;
white-space: nowrap;
transition: background-color var(--be-transition);
}
.be-dock__go::after {
content: "\2192";
font-size: 1.05em;
transition: transform var(--be-transition);
}
.be-dock__go:hover,
.be-dock__go:focus-visible {
background-color: #fff;
color: var(--be-yale-800);
}
.be-dock__go:hover::after,
.be-dock__go:focus-visible::after {
transform: translateX(3px);
}
/* --- Fermeture ---
* Rentrée dans la capsule : accrochée au coin extérieur, elle se
* lisait comme une pastille détachée plutôt que comme un bouton de
* la barre.
*/
.be-dock__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex: 0 0 auto;
margin-left: 0.15rem;
padding: 0;
border: 0;
border-radius: var(--be-radius-pill);
background-color: transparent;
color: var(--be-oak);
cursor: pointer;
transition: background-color var(--be-transition), color var(--be-transition);
}
.be-dock__close svg {
width: 15px;
height: 15px;
}
.be-dock__close:hover,
.be-dock__close:focus-visible {
background-color: var(--be-yale-700);
color: #fff;
}
/* Sous 980 px, l'accroche — icône comprise — cède la place aux actions. */
@media (max-width: 980px) {
.be-dock__intro {
display: none;
}
.be-dock__box {
gap: 0;
padding-inline: 0.5rem;
}
}
/* --- La barre en mobile : une tablette claire, comme l'en-tête ---
*
* La version sombre remettait le défaut qu'elle voulait corriger : sur
* le Yale de la barre, le téléphone en yale-700 se lisait comme un trou
* plutôt que comme un bouton, le vert WhatsApp partait seul dans sa
* couleur, et l'action principale devait s'inverser en crème parce que
* Baltic sur Yale tombe à 1,30:1. Quatre pavés, quatre traitements,
* aucune hiérarchie.
*
* Fond clair, donc : la barre devient la jumelle de la capsule d'en-tête
* — le site garde une seule forme flottante, en haut et en bas — et
* Baltic Blue redevient ce que la palette lui demande d'être, la seule
* couleur de bouton. Blanc sur Baltic : 6,88:1.
*/
@media (max-width: 640px) {
.be-dock {
left: 0;
right: 0;
bottom: 0;
transform: translateY(120%);
}
.be-dock.is-on {
transform: translateY(0);
}
.be-dock__box {
gap: 0.35rem;
/* Barre basse : elle accompagne la page, elle ne la couvre pas.
* 36 px de boutons et 4 px de marge font un bandeau de 45 px,
* soit un dix-huitième de l'écran. */
padding: 0.25rem 0.4rem calc(0.25rem + env(safe-area-inset-bottom, 0px));
border: 0;
border-top: 1px solid var(--be-oak-200);
/* Angles droits : la barre est posée sur le bord de l'écran,
* pas flottante. Des coins arrondis laissaient paraître deux
* encoches de contenu sous la barre. */
border-radius: 0;
background-color: var(--be-bg);
box-shadow: 0 -10px 30px rgba(31, 39, 27, 0.12);
}
.be-dock__acts {
width: 100%;
gap: 0.5rem;
}
/* Les deux contacts directs partagent un seul gabarit : même
* carré, même rayon, même poids. Ce qui les distingue est leur
* icône, pas leur traitement. */
.be-dock__tel,
.be-dock__wa {
width: 36px;
height: 36px;
flex: 0 0 auto;
justify-content: center;
padding: 0;
border: 1px solid var(--be-oak-200);
border-radius: var(--be-radius);
background-color: var(--be-almond-200);
color: var(--be-yale);
}
.be-dock__tel span {
display: none;
}
.be-dock__tel svg,
.be-dock__wa svg {
width: 17px;
height: 17px;
color: inherit;
}
/* WhatsApp garde son vert : c'est à cette couleur qu'on reconnaît
* le service. Il reste dans le gabarit commun, il ne le casse pas. */
.be-dock__wa {
border-color: #1fa855;
background-color: #25d366;
color: #07321a;
}
/* L'action principale prend la place restante : c'est elle que le
* pouce vise. Pleine, en Baltic, comme tous les boutons du site. */
.be-dock__go {
flex: 1 1 auto;
justify-content: center;
height: 36px;
padding-inline: 0.6rem;
font-size: var(--be-fs-xs);
border-radius: var(--be-radius);
background-color: var(--be-action);
color: #fff;
}
.be-dock__go:hover,
.be-dock__go:focus-visible {
background-color: var(--be-action-hover);
color: #fff;
}
/* La croix ne concourt pas avec les actions : pas de fond, une
* teinte sourde, mais une cible de 44 px comme les autres. */
.be-dock__close {
width: 30px;
height: 36px;
margin-left: 0;
color: var(--be-text-muted);
}
.be-dock__close svg {
width: 15px;
height: 15px;
}
.be-dock__close:hover,
.be-dock__close:focus-visible {
background-color: var(--be-almond-200);
color: var(--be-text);
}
}
@media (prefers-reduced-motion: reduce) {
.be-dock,
.be-dock__txt small i,
.be-dock__go::after {
animation: none !important;
transition: none !important;
}
}
/* ------------------------------------------------------------------
* 8f. CORRECTIFS ET COMPOSANTS COMPLÉMENTAIRES
* Placé après les blocs précédents : l'emporte sans !important.
* ---------------------------------------------------------------- */
/* --- Finitions : une planche de matières, d'un seul tenant ---
*
* Les six produits ne sont pas six articles, c'est UNE gamme. On en fait
* donc un seul objet : une planche blanche, bordée et arrondie, dans
* laquelle les finitions s'empilent comme des assises séparées par un
* filet. Chaque assise donne le nom en grand à gauche et la matière en
* bandeau large à droite, à pleine lumière.
*
* Deux principes, appris des versions écartées :
*
* - Le texte n'est jamais posé sur la photo. Le fond est du béton — gris
* moyen, peu contrasté, la même matière partout ; l'assombrir assez
* pour tenir du texte blanc éteignait les six photos, qui finissaient
* par se ressembler toutes. Dans une section dont le seul travail est
* de montrer qu'elles diffèrent.
* - Le bandeau est large et court. C'est ce format qui recadre de
* lui-même sur la surface : les photos d'origine montrent souvent un
* escalier, un muret ou une bordure, et une vignette carrée les
* emportait avec. Une bande 3:1 ne garde que le sol.
*
* L'assise se lit comme une ligne de catalogue : le nom, la description,
* puis un pied qui aligne le prix à droite et le lien à gauche. Les six
* prix forment ainsi une colonne, qu'on parcourt d'un regard — c'est la
* donnée la plus regardée de la section.
*
* La variante « catalogue » (page Nos produits) empile simplement douze
* assises au lieu de six.
*/
.be-sec--produits .be-cards--media,
.be-sec--catalogue .be-cards--media {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
overflow: hidden;
border: 1px solid var(--be-oak-200);
border-radius: var(--be-radius-xl);
background-color: var(--be-bg);
box-shadow: var(--be-shadow-sm);
margin-inline: 0;
}
/* --- Une assise --- */
.be-sec--produits .be-card--media,
.be-sec--catalogue .be-card--media {
position: relative;
display: grid;
/* Le bandeau prend un peu plus de la moitié : en dessous on ne juge
* plus un grain de béton, au-dessus le nom perd la place qui en fait
* le point d'entrée de l'assise. */
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
align-items: stretch;
min-height: 12rem;
/* La planche porte le cadre ; les assises n'en ont pas. */
border: 0;
border-radius: 0;
background-color: transparent;
box-shadow: none;
transition: background-color var(--be-transition);
}
.be-sec--produits .be-card--media + .be-card--media,
.be-sec--catalogue .be-card--media + .be-card--media {
border-top: 1px solid var(--be-oak-200);
}
/* Repère de survol : un filet Yale sur la tranche gauche de l'assise.
* Il marque celle qu'on vise sans rien déplacer — une assise qui saute
* hors de la planche, c'est la planche qui se défait. */
.be-sec--produits .be-card--media::before,
.be-sec--catalogue .be-card--media::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
z-index: 3;
width: 3px;
background-color: var(--be-yale);
opacity: 0;
transition: opacity var(--be-transition);
}
.be-sec--produits .be-card--media:hover,
.be-sec--produits .be-card--media:focus-within,
.be-sec--catalogue .be-card--media:hover,
.be-sec--catalogue .be-card--media:focus-within {
transform: none;
box-shadow: none;
background-color: var(--be-almond-200);
}
.be-sec--produits .be-card--media:hover::before,
.be-sec--produits .be-card--media:focus-within::before,
.be-sec--catalogue .be-card--media:hover::before,
.be-sec--catalogue .be-card--media:focus-within::before {
opacity: 1;
}
/* --- Le nom, à gauche --- */
.be-sec--produits .be-card__body,
.be-sec--catalogue .be-card__body {
grid-column: 1;
grid-row: 1;
justify-content: flex-start;
gap: var(--be-space-xs);
padding: var(--be-space-lg);
}
/* Grand : dans une planche, c'est le nom de la matière qu'on cherche.
* Le descriptif n'est qu'une ligne de contexte. */
.be-sec--produits .be-card__title,
.be-sec--catalogue .be-card__title {
font-size: clamp(1.45rem, 2.4vw, 2rem);
line-height: 1.1;
letter-spacing: -0.03em;
}
.be-sec--produits .be-card__text,
.be-sec--catalogue .be-card__text {
max-width: 46ch;
font-size: var(--be-fs-sm);
line-height: 1.55;
color: var(--be-text-muted);
}
/* Le lien tombe en pied d'assise, en vis-à-vis du prix. Pas de filet
* au-dessus : le filet, ici, c'est celui qui sépare les assises, et deux
* traits horizontaux à quelques pixels l'un de l'autre se lisent comme
* une erreur. */
.be-sec--produits .be-card__link,
.be-sec--catalogue .be-card__link {
margin-top: auto;
padding-top: var(--be-space-sm);
border-top: 0;
}
/* --- Le prix, en pied d'assise et à droite ---
* Dans la colonne de texte et non sur la photo : les six prix forment
* alors une colonne alignée, qui se parcourt d'un regard. Posé dans la
* grille plutôt qu'en pourcentages, il suit la colonne quoi qu'il advienne
* des proportions.
*/
.be-sec--produits .be-card__price,
.be-sec--catalogue .be-card__price {
position: relative;
z-index: 2;
grid-column: 1;
grid-row: 1;
align-self: end;
justify-self: end;
margin: var(--be-space-lg);
padding: 0.25rem 0.7rem;
border-color: var(--be-oak);
background-color: var(--be-almond-200);
box-shadow: none;
}
/* --- Le bandeau de matière, à droite ---
*
* La hauteur de l'assise doit venir du texte, jamais de la photo : le
* chargement différé (a3 Lazy Load) remplace l'image par un GIF d'un pixel
* le temps du défilement, et une assise mesurée sur son image
* s'effondrerait à l'affichage initial. L'image est donc sortie du flux à
* l'intérieur du bandeau, qui s'étire sur la hauteur décidée par le texte.
*
* La rangée est déclarée : le prix occupe explicitement la rangée 1, et
* sans cette ligne le placement automatique repousserait le bandeau dans
* une seconde rangée créée pour lui.
*/
.be-sec--produits .be-card__media,
.be-sec--catalogue .be-card__media {
position: relative;
grid-column: 2;
grid-row: 1;
aspect-ratio: auto;
align-self: stretch;
overflow: hidden;
border-left: 1px solid var(--be-oak-200);
}
.be-sec--produits .be-card__media img,
.be-sec--catalogue .be-card__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* --- Sous 46 rem : la planche se replie ---
* Le bandeau passerait sous 150 px de large, où l'on ne juge plus rien, et
* il ne resterait au nom qu'une vingtaine de signes par ligne. L'assise
* repasse donc en deux étages, la matière en tête.
*/
@media (max-width: 46rem) {
.be-sec--produits .be-card--media,
.be-sec--catalogue .be-card--media {
grid-template-columns: minmax(0, 1fr);
min-height: 0;
}
.be-sec--produits .be-card__media,
.be-sec--catalogue .be-card__media {
grid-column: 1;
grid-row: 1;
aspect-ratio: 16 / 9;
border-left: 0;
border-bottom: 1px solid var(--be-oak-200);
}
.be-sec--produits .be-card__body,
.be-sec--catalogue .be-card__body {
grid-row: 2;
padding: var(--be-space-md);
}
/* Le prix rejoint le pied du texte, qui est passé sous la matière. */
.be-sec--produits .be-card__price,
.be-sec--catalogue .be-card__price {
grid-column: 1;
grid-row: 2;
margin: var(--be-space-md);
}
}
/* --- La finition en détail : texte + fiche prix --- */
.be-feature {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.9fr);
gap: clamp(1.5rem, 4vw, 3rem);
align-items: start;
}
.be-feature__text p {
margin: 0;
font-size: var(--be-fs-lg);
line-height: 1.6;
color: var(--be-text-muted);
max-width: 58ch;
}
.be-feature__uses {
display: flex;
flex-wrap: wrap;
gap: var(--be-space-sm);
margin: var(--be-space-lg) 0 0;
padding: 0;
list-style: none;
}
.be-feature__uses li {
margin: 0;
padding: 0.35rem 0.8rem;
border: 1px solid var(--be-oak);
border-radius: 999px;
background-color: #fff;
font-size: var(--be-fs-xs);
font-weight: 600;
color: var(--be-charcoal);
}
.be-feature__card {
background-color: #fff;
border: 1px solid var(--be-oak-200);
border-radius: var(--be-radius-lg);
padding: clamp(1.1rem, 2.4vw, 1.6rem);
box-shadow: var(--be-shadow-sm);
}
.be-feature__lbl {
margin: 0 0 0.2rem;
font-family: var(--be-font-display);
font-size: var(--be-fs-xs);
font-weight: 600;
color: var(--be-text-muted);
}
.be-feature__price {
margin: 0;
font-family: var(--be-font-display);
font-size: clamp(1.5rem, 2.6vw, 2rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--be-charcoal);
font-variant-numeric: tabular-nums;
}
.be-feature__note {
margin: var(--be-space-sm) 0 var(--be-space-md);
font-size: var(--be-fs-xs);
line-height: 1.55;
color: var(--be-text-muted);
}
.be-feature__cta {
display: block;
text-align: center;
padding: 0.8rem 1.2rem;
border-radius: var(--be-radius);
background-color: var(--be-action);
color: #fff;
font-size: var(--be-fs-sm);
font-weight: 600;
text-decoration: none;
transition: background-color var(--be-transition);
}
.be-feature__cta:hover,
.be-feature__cta:focus {
background-color: var(--be-action-hover);
color: #fff;
}
.be-feature__link {
display: block;
margin-top: var(--be-space-sm);
text-align: center;
font-size: var(--be-fs-sm);
font-weight: 600;
color: var(--be-baltic-700);
text-decoration: none;
}
.be-feature__link:hover,
.be-feature__link:focus {
text-decoration: underline;
text-underline-offset: 0.2em;
}
@media (max-width: 860px) {
.be-feature {
grid-template-columns: 1fr;
}
}
/* --- Liste des autres finitions --- */
.be-finlist {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--be-space-sm);
margin: 0;
padding: 0;
list-style: none;
}
.be-finlist li {
margin: 0;
}
.be-finlist a {
display: grid;
gap: 0.15rem;
height: 100%;
padding: var(--be-space-md);
border: 1px solid var(--be-oak-200);
border-radius: var(--be-radius-lg);
background-color: #fff;
text-decoration: none;
transition: border-color var(--be-transition), transform var(--be-transition);
}
.be-finlist a:hover,
.be-finlist a:focus-visible {
border-color: var(--be-baltic);
transform: translateY(-2px);
}
.be-finlist__name {
font-family: var(--be-font-display);
font-size: var(--be-fs-lg);
font-weight: 700;
color: var(--be-charcoal);
}
.be-finlist__note {
font-size: var(--be-fs-sm);
color: var(--be-text-muted);
}
/* ------------------------------------------------------------------
* 8g. PAGES DE FINITION
* Structure : inc/finitions.php.
*
* Les douze articles « béton … » sont les seuls contenus de type
* « post » du site. Ils étaient rendus par le gabarit d'article
* d'Astra — barre latérale à droite, titre en en-tête, texte au fil
* de l'eau — alors que ce sont des pages commerciales au même titre
* que celles bâties sous Elementor.
*
* Cette section leur donne le même traitement : hero « motif B »
* (design/hero-patterns.md), sommaire ancré, fil de lecture tenu sur
* une mesure courte, tableaux et figures qui débordent volontairement
* de cette mesure, et blocs de conversion en fin de page.
*
* Le balisage est natif : aucune classe Elementor n'est simulée. Les
* règles communes aux deux familles de heros (sur-titre, pastilles,
* fiche chiffrée) vivent en section 8b sous « .be-hero » et
* s'appliquent donc ici aussi ; on ne redéfinit que ce qui dépend du
* balisage.
*
* --- La portée « .be-prose » ---
*
* Les règles de cette section et de la suivante sont écrites pour
* « :is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) ». Le premier terme est
* le corps d'un article de finition ; le second est une porte de
* sortie, à poser sur n'importe quel conteneur qui reçoit les mêmes
* composants ailleurs.
*
* Elle existe parce que les modèles réutilisables (bandeau d'appel,
* réassurance, méthode de chantier, FAQ commune) sont faits pour servir
* aussi les pages Elementor — c'est tout l'intérêt de les rendre par
* shortcode. Sans cet alias, ils y arrivaient sans mise en forme.
*
* « :is() » prend la spécificité de son argument le plus fort : la
* cascade reste donc exactement celle d'avant sur les pages de finition.
* ---------------------------------------------------------------- */
/* ---------------- Hero, motif B ---------------- */
.be-hero--finition {
position: relative;
isolation: isolate;
background-color: var(--be-bg);
border-bottom: 1px solid var(--be-oak-200);
/* L'en-tête flotte hors du flux (section 4) : le fond du hero
* court sous la capsule, mais le hero dégage lui-même sa hauteur,
* sans quoi le titre passerait dessous. */
padding-top: calc(clamp(2.5rem, 5.5vw, 4.75rem) + var(--be-header-clear));
padding-bottom: clamp(2.5rem, 5.5vw, 4.75rem);
overflow: hidden;
}
/* Même voile chaud que les heros Elementor : le dégradé s'éteint du
* côté de la photo, le texte reste sur la partie claire. */
.be-hero--finition::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(62% 86% at 86% 4%, var(--be-almond-200) 0%, rgba(244, 237, 234, 0) 68%),
linear-gradient(180deg, var(--be-oak-100) 0%, var(--be-bg) 58%);
}
.be-hero--finition .be-hero__inner {
display: grid;
grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
align-items: center;
gap: clamp(2rem, 5vw, 4rem);
max-width: var(--be-container);
margin-inline: auto;
padding-inline: 20px;
}
/* Sans photo mise en avant, la colonne de texte prend toute la
* largeur plutôt que de laisser une moitié vide. */
.be-hero--finition .be-hero__inner:not(:has(.be-hero__side)) {
grid-template-columns: minmax(0, 1fr);
}
.be-hero--finition .be-eyebrow {
margin-bottom: var(--be-space-sm);
}
.be-hero--finition .be-hero__h1 {
margin: 0;
color: var(--be-charcoal);
font-size: clamp(2.05rem, 3.8vw, 3.05rem);
line-height: 1.06;
letter-spacing: -0.032em;
font-weight: 800;
max-width: 18ch;
text-wrap: balance;
}
.be-hero--finition .be-hero__lead {
margin: var(--be-space-md) 0 0;
color: var(--be-text-muted);
font-size: var(--be-fs-lg);
line-height: 1.55;
max-width: 54ch;
}
.be-hero--finition .be-badges {
margin-top: var(--be-space-lg);
}
/* --- Appels à l'action ---
* Un bouton plein, puis un lien fléché. Le second navigue
* latéralement — vers la finition voisine — plutôt que vers le
* formulaire : le hero est un embranchement, pas un cul-de-sac.
*/
.be-hero--finition .be-hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--be-space-md) var(--be-space-lg);
margin-top: var(--be-space-lg);
}
/* Le dimensionnement des appels est commun a tous les heros, voir
* « .be-hero :is(...) » en section 8b. */
.be-hero--finition .be-btn--primary::after {
content: "\2192";
}
/* Le second appel du hero de finition : meme bouton a filet que
* cote Elementor. La classe ne sert plus qu'a poser la fleche. */
.be-hero__link::after {
content: " \2192";
}
/* --- Panneau visuel ---
* Cadre décalé derrière la photo, comme sur les heros Elementor :
* deux plans au lieu d'un aplat. Purement ornemental, retiré dès que
* la mise en page passe en colonne.
*/
.be-hero--finition .be-hero__side {
position: relative;
align-self: center;
}
.be-hero--finition .be-hero__frame {
position: relative;
border-radius: var(--be-radius-lg);
overflow: hidden;
box-shadow: var(--be-shadow-lg);
}
.be-hero--finition .be-hero__side::before {
content: "";
position: absolute;
inset: 0;
transform: translate(16px, -16px);
border: 2px solid var(--be-oak);
border-radius: var(--be-radius-lg);
pointer-events: none;
z-index: 0;
}
.be-hero--finition .be-hero__img {
display: block;
width: 100%;
height: clamp(280px, 34vw, 430px);
object-fit: cover;
border-radius: 0;
box-shadow: none;
}
/* La fiche chevauche l'angle bas-gauche de la photo : elle fait la
* jonction entre les deux colonnes au lieu de les juxtaposer. */
.be-hero--finition .be-hero__stat {
position: absolute;
left: -18px;
bottom: -18px;
z-index: 2;
margin: 0;
max-width: 23rem;
display: flex;
align-items: center;
gap: var(--be-space-sm);
padding: var(--be-space-sm) var(--be-space-md);
border: 1px solid var(--be-oak-200);
border-radius: var(--be-radius-lg);
background-color: var(--be-bg);
box-shadow: var(--be-shadow-md);
}
.be-hero--finition .be-stat__figure {
font-family: var(--be-font-display);
font-size: var(--be-fs-2xl);
font-weight: 800;
line-height: 1;
letter-spacing: -0.04em;
color: var(--be-yale);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.be-hero--finition .be-stat__body {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.be-hero--finition .be-stat__label {
font-size: var(--be-fs-sm);
font-weight: 700;
line-height: 1.2;
color: var(--be-charcoal);
}
.be-hero--finition .be-stat__note {
font-size: var(--be-fs-xs);
line-height: 1.35;
color: var(--be-text-muted);
}
@media (max-width: 1024px) {
.be-hero--finition .be-hero__inner {
grid-template-columns: minmax(0, 1fr);
}
.be-hero--finition .be-hero__h1 {
max-width: none;
}
/* Plus de place pour le cadre décalé ni pour une fiche en
* surimpression : la fiche repasse dans le flux, sous la photo. */
.be-hero--finition .be-hero__side::before {
content: none;
}
.be-hero--finition .be-hero__stat {
position: static;
max-width: none;
margin-top: var(--be-space-md);
}
}
@media (max-width: 767px) {
.be-hero--finition .be-hero__lead {
font-size: var(--be-fs-base);
}
/* Les appels s'empilent et occupent toute la largeur : cote a cote,
* deux boutons de cette taille se coupent en deux lignes chacun. */
.be-hero--finition .be-hero__actions {
flex-direction: column;
align-items: stretch;
gap: var(--be-space-sm);
}
.be-hero--finition :is(.be-btn--primary, .be-btn--outline) {
width: 100%;
}
}
/* ---------------- Fil de lecture ----------------
* Le corps de l'article tient sur une mesure courte — au-delà de
* ~72 caractères l'œil perd la ligne suivante. Mais un tableau
* comparatif ou une photo de chantier étouffent à cette largeur.
*
* D'où une grille à trois couloirs : le texte occupe le couloir
* central, les figures et les tableaux débordent d'un cran, les
* bandeaux pleine largeur vont d'un bord à l'autre. Un seul
* conteneur, trois largeurs, aucune marge négative à corriger.
*/
:is(.be-finition, .be-prix-page, .be-prix-pilier) #primary {
padding-block: clamp(2.5rem, 5vw, 4rem);
}
/* Les suffixes « -start » et « -end » ne sont pas décoratifs : c'est la
* convention que la grille CSS reconnaît pour que « grid-column: texte »
* désigne d'un mot l'intervalle entre les deux lignes. Avec n'importe
* quel autre suffixe, la règle ne s'applique pas et les blocs se
* répartissent en colonnes les uns après les autres. */
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) {
display: grid;
grid-template-columns:
/* Gouttières à minimum nul. Avec « minmax(var(--be-space-md), 1fr) »
* elles gardaient 17 px chacune alors que « min(42rem, 100%) »
* donnait déjà toute la largeur au couloir de texte : la grille
* dépassait son conteneur de 34 px, la piste « pleine » n'était
* plus centrée dans la fenêtre, et « calc(50% - 50vw) » posait
* les bandes 17 px trop à droite — liseré à gauche, bord droit
* rogné. La marge latérale vient du conteneur d'Astra. */
[pleine-start] minmax(0, 1fr)
[large-start] minmax(0, 7rem)
[texte-start] min(42rem, 100%)
[texte-end] minmax(0, 7rem)
[large-end] minmax(0, 1fr)
[pleine-end];
}
/* La largeur du couloir de texte est donnée en rem, pas en « ch ».
* L'unité « ch » vaut la chasse du zéro, et celle de Plus Jakarta Sans
* est large : « 72ch » y produisait 840 px, soit environ 110 signes par
* ligne — bien au-delà de la fourchette lisible. 42rem tient la ligne
* autour de 80 signes, en haut de la fourchette confortable : ces pages
* sont techniques, leurs phrases portent des termes longs et des
* chiffres, et une colonne trop étroite y multiplie les césures. */
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) > * {
grid-column: texte;
min-width: 0;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) > figure,
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) > .wp-block-image,
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) > .wp-block-table,
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) > table,
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) > .be-also,
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) > .be-cta,
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) > .be-key,
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) > .be-compare,
/* Ces composants sont des grilles : dans le couloir de texte, leurs
* colonnes tombent sous la largeur minimale et se replient les unes
* sous les autres, ce qui annule tout l'intérêt du face-à-face. */
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) > .be-pros,
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) > .be-uses,
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) > .be-price,
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) > .be-specs,
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) > .be-gallery {
grid-column: large;
}
/* Bandes réellement pleine largeur : la piste « pleine » s'arrête au
* conteneur d'Astra, soit 1 200 px. Pour que la bande aille d'un bord
* de fenêtre à l'autre, elle prend la largeur de la fenêtre et rattrape
* l'écart par ses marges. « 100vw » compte la barre de défilement, d'où
* le rognage posé plus bas sur le conteneur. */
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) > .be-band,
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) > .be-trust {
grid-column: pleine;
width: 100vw;
max-width: 100vw;
margin-inline: calc(50% - 50vw);
}
/* « clip » et non « hidden » : « hidden » créerait un conteneur de
* défilement et casserait les en-têtes de tableau collants. */
:is(.be-finition, .be-prix-page, .be-prix-pilier) .site-content {
overflow-x: clip;
}
/* --- Texte courant --- */
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) p {
margin-block: 0 var(--be-space-md);
font-size: var(--be-fs-base);
line-height: 1.72;
}
/* Chapô : le premier paragraphe donne le ton et porte la définition.
* Un cran au-dessus du texte courant, sans devenir un sous-titre. */
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) > .be-toc + p {
font-size: var(--be-fs-lg);
line-height: 1.6;
color: var(--be-text-muted);
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) a {
color: var(--be-link);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) a:hover,
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) a:focus {
color: var(--be-action-hover);
text-decoration-thickness: 2px;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) strong {
font-weight: 700;
color: var(--be-charcoal);
}
/* --- Titres ---
* Le H2 porte un court trait Baltic au-dessus plutôt qu'un filet
* pleine largeur : il ouvre la section sans la cloisonner.
*/
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) h2 {
margin: var(--be-space-2xl) 0 var(--be-space-md);
font-size: clamp(1.6rem, 2.6vw, 2.1rem);
line-height: 1.15;
letter-spacing: -0.025em;
/* Le sommaire amène ici par une ancre ; sans ce dégagement le
* titre se cale sous l'en-tête flottant. */
scroll-margin-top: calc(var(--be-header-clear) + var(--be-space-md));
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) h2::before {
content: "";
display: block;
width: 32px;
height: 3px;
border-radius: 3px;
margin-bottom: var(--be-space-sm);
background-color: var(--be-baltic);
}
/* Sauf quand le titre appartient à un composant qui a déjà son repère.
*
* « .be-sec__head » ouvre ses sections par un sur-titre précédé d'un
* tiret ; son « h2 » recevait en plus celui du fil de lecture, et les
* deux traits se retrouvaient empilés l'un sous l'autre au-dessus du
* même titre. Le composant le déclare bien de son côté, mais avec une
* spécificité inférieure à celle de la règle ci-dessus — d'où cette
* reprise, qui n'existe que pour reprendre la main. */
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-sec__title::before {
content: none;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) > h2:first-child {
margin-top: 0;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) h3 {
margin: var(--be-space-xl) 0 var(--be-space-sm);
font-size: var(--be-fs-xl);
line-height: 1.25;
color: var(--be-yale);
scroll-margin-top: calc(var(--be-header-clear) + var(--be-space-md));
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) h4 {
margin: var(--be-space-lg) 0 var(--be-space-xs);
font-size: var(--be-fs-lg);
}
/* --- Listes ---
* Puce dessinée plutôt que le disque par défaut : le texte des
* articles est fait de listes longues, et un marqueur discret aligné
* sur la ligne de base se lit mieux qu'un gros point.
*/
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) ul,
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) ol {
margin: 0 0 var(--be-space-md);
padding-left: 0;
list-style: none;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) li {
position: relative;
margin-bottom: var(--be-space-sm);
padding-left: 1.6rem;
line-height: 1.7;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) ul > li::before {
content: "";
position: absolute;
left: 0;
top: 0.72em;
width: 7px;
height: 7px;
border-radius: 50%;
background-color: var(--be-oak);
box-shadow: 0 0 0 3px var(--be-almond-200);
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) ol {
counter-reset: be-li;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) ol > li {
counter-increment: be-li;
padding-left: 2.1rem;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) ol > li::before {
content: counter(be-li);
position: absolute;
left: 0;
top: 0.15em;
display: grid;
place-items: center;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
background-color: var(--be-yale);
color: var(--be-oak-100);
font-family: var(--be-font-display);
font-size: var(--be-fs-xs);
font-weight: 700;
line-height: 1;
}
/* Les listes du sommaire, des pastilles et des grilles ont leur
* propre marqueur : on neutralise celui du fil de lecture. */
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) :is(.be-toc, .be-finlist, .be-badges) li {
padding-left: 0;
}
/* Les listes qui sont des composants, et non du texte courant, ne
* prennent ni puce ni retrait : elles apportent leur propre mise en
* forme. « .be-vid » s'est ajoutée ici après coup — ses vignettes
* vidéo affichaient une pastille grise flottant à gauche de chaque
* carte, à un endroit où le composant n'attendait rien. */
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) :is(.be-toc, .be-finlist, .be-vid) li::before {
content: none;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-vid > li {
margin-bottom: 0;
padding-left: 0;
}
/* --- Tableaux ---
* Les plans par finition en prévoient plusieurs par page (prix,
* fiche technique, comparatifs). Ils débordent de la mesure du
* texte, et défilent horizontalement plutôt que de se comprimer
* quand l'écran ne suffit plus.
*/
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) :is(table, .wp-block-table) {
margin-block: var(--be-space-lg);
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .wp-block-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--be-oak-200);
border-radius: var(--be-radius-lg);
overflow: hidden;
font-size: var(--be-fs-sm);
background-color: var(--be-bg);
box-shadow: var(--be-shadow-sm);
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) thead th {
background-color: var(--be-yale);
color: var(--be-oak-100);
font-family: var(--be-font-display);
font-size: var(--be-fs-xs);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
text-align: left;
padding: var(--be-space-sm) var(--be-space-md);
border: 0;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) tbody td,
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) tbody th {
padding: var(--be-space-sm) var(--be-space-md);
border: 0;
border-top: 1px solid var(--be-oak-200);
vertical-align: top;
line-height: 1.55;
font-variant-numeric: tabular-nums;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) tbody th {
text-align: left;
font-weight: 700;
color: var(--be-charcoal);
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) tbody tr:nth-child(even) {
background-color: var(--be-oak-100);
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) table :where(figcaption, caption) {
caption-side: bottom;
padding-top: var(--be-space-xs);
font-size: var(--be-fs-xs);
color: var(--be-text-muted);
text-align: left;
}
/* --- Images ---
* Traitées comme des objets posés sur la page, jamais comme une
* texture de fond : coins arrondis, ombre franche, légende sous
* l'image en petit corps.
*/
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) :is(figure, .wp-block-image) {
margin-block: var(--be-space-lg);
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) :is(figure, .wp-block-image) img {
display: block;
width: 100%;
height: auto;
border-radius: var(--be-radius-lg);
box-shadow: var(--be-shadow-md);
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) figcaption {
margin-top: var(--be-space-sm);
font-size: var(--be-fs-xs);
line-height: 1.5;
color: var(--be-text-muted);
text-align: center;
}
/* ---------------- Sommaire ancré ----------------
* Construit au rendu à partir des H2 (inc/finitions.php). Posé en
* tête d'article : ces pages font plusieurs milliers de mots et le
* visiteur arrive le plus souvent pour une section précise — le prix,
* la pose, une question de la FAQ.
*/
.be-toc {
margin: 0 0 var(--be-space-xl);
padding: var(--be-space-md) var(--be-space-lg);
border: 1px solid var(--be-oak-200);
border-left: 3px solid var(--be-baltic);
border-radius: var(--be-radius-lg);
background-color: var(--be-oak-100);
}
.be-toc__title {
margin: 0 0 var(--be-space-sm);
font-family: var(--be-font-display);
font-size: var(--be-fs-xs);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--be-text-muted);
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-toc__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 0.35rem var(--be-space-lg);
margin: 0;
padding: 0;
counter-reset: be-toc;
list-style: none;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-toc__list li {
counter-increment: be-toc;
margin: 0;
padding-left: 0;
line-height: 1.45;
}
.be-toc__list a {
display: block;
padding: 0.3rem 0;
font-size: var(--be-fs-sm);
font-weight: 600;
color: var(--be-charcoal);
text-decoration: none;
}
.be-toc__list a::before {
content: counter(be-toc) ".";
margin-right: 0.5rem;
color: var(--be-baltic);
font-variant-numeric: tabular-nums;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-toc__list a:hover,
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-toc__list a:focus {
color: var(--be-baltic-700);
text-decoration: underline;
text-underline-offset: 0.18em;
}
/* ---------------- Encadrés ----------------
* Trois usages, une seule forme : la fiche technique, la note de
* mise en garde et le repère de prix. Ils se distinguent par la
* couleur du liseré gauche, pas par la boîte, pour que la page ne
* devienne pas une suite de cadres concurrents.
*
* Usage dans l'éditeur : un groupe de blocs auquel on ajoute la
* classe « be-note », « be-note--tech » ou « be-note--prix ».
*/
.be-note {
margin-block: var(--be-space-lg);
padding: var(--be-space-md) var(--be-space-lg);
border: 1px solid var(--be-oak-200);
border-left: 3px solid var(--be-oak);
border-radius: var(--be-radius-lg);
background-color: var(--be-almond-200);
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-note > :last-child {
margin-bottom: 0;
}
.be-note__title {
margin: 0 0 var(--be-space-xs);
font-family: var(--be-font-display);
font-size: var(--be-fs-sm);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--be-text-muted);
}
.be-note--tech {
border-left-color: var(--be-yale);
background-color: var(--be-oak-100);
}
.be-note--prix {
border-left-color: var(--be-baltic);
background-color: #fff;
box-shadow: var(--be-shadow-sm);
}
/* ---------------- FAQ ----------------
* natif : ouvert au clavier sans JavaScript, et lisible
* même si la feuille de style ne charge pas. Même parti pris qu'en
* page d'accueil (section 8d).
*/
.be-faq {
margin-block: var(--be-space-lg);
border-top: 1px solid var(--be-oak-200);
}
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-faq__item {
margin: 0;
padding: 0;
border-bottom: 1px solid var(--be-oak-200);
}
.be-faq__item > summary {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--be-space-md);
padding: var(--be-space-md) 0;
cursor: pointer;
list-style: none;
font-family: var(--be-font-display);
font-size: var(--be-fs-lg);
font-weight: 700;
line-height: 1.35;
color: var(--be-charcoal);
transition: color var(--be-transition);
}
.be-faq__item > summary::-webkit-details-marker {
display: none;
}
.be-faq__item > summary:hover {
color: var(--be-baltic-700);
}
/* Chevron dessiné en CSS : pas de police d'icônes à charger. */
.be-faq__item > summary::after {
content: "";
flex: 0 0 auto;
width: 12px;
height: 12px;
margin-top: 0.4em;
border-right: 2px solid var(--be-baltic);
border-bottom: 2px solid var(--be-baltic);
transform: rotate(45deg);
transition: transform var(--be-transition);
}
.be-faq__item[open] > summary::after {
transform: rotate(-135deg);
}
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-faq__item > :not(summary) {
margin-bottom: var(--be-space-md);
color: var(--be-text-muted);
max-width: 68ch;
}
/* ---------------- Bande de réassurance ----------------
* Bloc réutilisable (modèle Greenshift) : un seul endroit à modifier
* pour les douze pages, et le même shortcode fonctionne dans
* Gutenberg comme dans Elementor.
*
* L'appel à l'action, lui, a été sorti d'ici : il ne ferme plus la
* page mais s'insère au milieu du contenu, et sa mise en forme vit
* en section 8h.
*/
/* Même traitement que « .be-band » : un panneau arrondi, rentré dans la
* gouttière, et non un bandeau collé aux bords de la fenêtre. */
.be-trust {
margin-block: var(--be-space-xl);
margin-inline: clamp(0.75rem, 3vw, 2.25rem);
padding: var(--be-space-lg) var(--be-space-md);
border: 1px solid var(--be-oak-200);
border-radius: var(--be-radius-xl);
background-color: var(--be-oak-100);
}
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-trust__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: var(--be-space-md) var(--be-space-lg);
max-width: var(--be-container);
margin-inline: auto;
padding: 0;
list-style: none;
}
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-trust__list li {
margin: 0;
padding-left: 0;
text-align: center;
}
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-trust__list li::before {
content: none;
}
.be-trust__figure {
display: block;
font-family: var(--be-font-display);
font-size: var(--be-fs-xl);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--be-yale);
}
/* Petit tiret Pale Oak au-dessus de chaque repère. C'est le même signe
* que les sur-titres et les intitulés de colonnes du pied de page : il
* donne à ces quatre blocs une attache commune, là où ils flottaient
* côte à côte sans rien qui les relie. */
.be-trust__figure::before {
content: "";
display: block;
width: 22px;
height: 2px;
border-radius: 2px;
margin: 0 auto var(--be-space-sm);
background-color: var(--be-oak);
}
.be-trust__label {
display: block;
margin-top: 0.2rem;
font-size: var(--be-fs-sm);
line-height: 1.45;
color: var(--be-text-muted);
}
/* --- Autres finitions ---
* Rendue par [be_autres_finitions] : la liste exclut la page
* courante et suit l'ordre du menu. La grille elle-même réutilise
* « .be-finlist » de la page d'accueil (section 8f).
*/
.be-also {
margin-block: var(--be-space-2xl) var(--be-space-lg);
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-also__title {
margin-top: 0;
}
/* ---------------- Navigation entre articles ----------------
* Astra affiche « article précédent / suivant » sous le contenu.
* Sur douze finitions, l'ordre chronologique n'a aucun sens pour le
* lecteur — la grille ci-dessus fait ce travail bien mieux.
*/
:is(.be-finition, .be-prix-page, .be-prix-pilier) .post-navigation,
:is(.be-finition, .be-prix-page, .be-prix-pilier) .ast-single-post-navigation,
:is(.be-finition, .be-prix-page, .be-prix-pilier) .ast-author-box,
:is(.be-finition, .be-prix-page, .be-prix-pilier) .entry-meta {
display: none;
}
@media (max-width: 767px) {
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-toc__list {
grid-template-columns: 1fr;
}
.be-cta__actions .be-btn {
width: 100%;
}
}
/* ------------------------------------------------------------------
* 8h. SECTIONS DE CONTENU DES PAGES DE FINITION
* Structure : inc/finitions-sections.php + scripts/build-contenus.php.
*
* Le corps de ces pages était un mur de paragraphes : douze articles
* de mille à deux mille mots, sans autre relief qu'un titre de niveau
* deux tous les trois écrans. La mise en forme du fil de lecture
* (section 8g) ne suffit pas — un texte long reste un texte long.
*
* Cette section fournit les composants dans lesquels le contenu est
* remonté : l'essentiel en tête, les usages en cartes, les avantages
* et les limites face à face, la pose en étapes numérotées, la fiche
* technique en grille, le nuancier en pastilles, les prix en tableau
* de tranches, la FAQ en accordéon.
*
* Tous s'écrivent en blocs HTML dans l'éditeur et n'ont besoin
* d'aucun réglage : une classe suffit. La feuille de style reste la
* seule source de vérité de l'apparence.
* ---------------------------------------------------------------- */
/* ---------------- Bandes pleine largeur ----------------
* Une section sur deux se détache sur un fond chaud. C'est ce qui
* donne son rythme à une page longue : le lecteur qui fait défiler
* voit la structure avant de lire le texte.
*/
/* Panneau posé sur la page, et non bandeau collé aux bords.
*
* Ces sections couraient d'un bord de la fenêtre à l'autre, à angles
* vifs, avec un filet en haut et un en bas. Elles donnaient bien le
* rythme voulu, mais elles ne ressemblaient à rien d'autre sur le site :
* l'en-tête est une capsule, la barre de contact est une capsule, les
* cartes sont arrondies. Seules ces bandes restaient rectangulaires et
* pleine largeur, ce qui les faisait lire comme un fond plutôt que
* comme un contenu.
*
* Elles rentrent donc dans la gouttière et prennent « --be-radius-xl »,
* le rayon déjà réservé aux formes flottantes du site. Le rythme est
* conservé — une section sur deux reste sur fond chaud — mais la page
* n'a plus qu'un seul vocabulaire de formes. */
.be-band {
grid-column: pleine;
margin-block: var(--be-space-2xl);
margin-inline: clamp(0.75rem, 3vw, 2.25rem);
padding-block: clamp(2.25rem, 5vw, 3.5rem);
border: 1px solid var(--be-oak-200);
border-radius: var(--be-radius-xl);
background-color: var(--be-oak-100);
}
.be-band--warm {
background-color: var(--be-almond-200);
}
.be-band--dark {
background-color: var(--be-yale);
border-color: var(--be-yale-700);
color: var(--be-oak-100);
}
.be-band__inner {
max-width: var(--be-container);
margin-inline: auto;
padding-inline: var(--be-space-md);
}
/* Dans une bande, le titre reprend la mesure du fil de lecture plutôt
* que la largeur de la bande : un titre sur 1 200 px flotterait. */
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-band :is(h2, h3) {
margin-top: 0;
}
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-band--dark :is(h2, h3) {
color: #fff;
}
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-band--dark :is(p, li) {
color: rgba(247, 244, 241, 0.86);
}
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-band--dark h2::before {
background-color: var(--be-almond);
}
/* Chapeau de section : un court paragraphe sous le titre, qui annonce
* ce que la section contient. */
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-band__lead {
max-width: 46rem;
margin-bottom: var(--be-space-lg);
font-size: var(--be-fs-lg);
line-height: 1.55;
color: var(--be-text-muted);
}
/* Dans une bande, seules les grilles ont besoin des 1 200 px. Le texte,
* lui, garde la mesure du fil de lecture : sinon les lignes y font le
* double de longueur qu'ailleurs sur la page, et la lecture décroche au
* passage d'une section à l'autre. */
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-band__inner > p,
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-band__inner > .be-tip {
max-width: 46rem;
}
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-band__inner .be-flow {
max-width: 52rem;
}
/* ---------------- L'essentiel ----------------
* Carte posée juste sous le chapô : trois ou quatre lignes qui
* répondent aux questions que tout le monde pose, pour le visiteur
* qui ne lira pas la page entière. Reprise de la logique du bloc
* « L'essentiel à retenir » qu'emploient les meilleures pages du
* secteur — sauf que le nôtre est chiffré.
*/
.be-key {
grid-column: large;
margin-block: var(--be-space-xl);
border: 1px solid var(--be-oak-200);
border-radius: var(--be-radius-lg);
background-color: var(--be-bg);
box-shadow: var(--be-shadow-md);
overflow: hidden;
}
.be-key__head {
display: flex;
align-items: center;
gap: 0.65rem;
padding: var(--be-space-sm) var(--be-space-lg);
background-color: var(--be-yale);
color: var(--be-oak-100);
font-family: var(--be-font-display);
font-size: var(--be-fs-xs);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* Deux colonnes fixes, et non « auto-fit » : avec quatre entrées, le
* remplissage automatique en plaçait trois sur la première rangée et
* laissait la seconde aux deux tiers vide. Une grille 2 × 2 se lit
* comme un tableau de bord. */
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-key__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-key__list li {
margin: 0;
padding: var(--be-space-md) var(--be-space-lg);
border-top: 1px solid var(--be-oak-200);
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-key__list li::before {
content: none;
}
/* La première rangée n'a pas de filet horizontal : l'en-tête en tient
* lieu. Le filet vertical, lui, ne se pose que sur la colonne de
* droite, sinon il redouble le bord de la carte. */
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-key__list li:nth-child(-n + 2) {
border-top: 0;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-key__list li:nth-child(2n) {
border-left: 1px solid var(--be-oak-200);
}
.be-key__q {
display: block;
margin-bottom: 0.15rem;
font-size: var(--be-fs-xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--be-text-muted);
}
.be-key__a {
display: block;
font-family: var(--be-font-display);
font-size: var(--be-fs-lg);
font-weight: 700;
line-height: 1.3;
color: var(--be-charcoal);
}
.be-key__a small {
display: block;
margin-top: 0.2rem;
font-family: var(--be-font-body);
font-size: var(--be-fs-sm);
font-weight: 400;
line-height: 1.45;
color: var(--be-text-muted);
}
/* ---------------- Usages ----------------
* Grille de cartes plutôt qu'une liste à puces. Les usages sont ce que
* le visiteur cherche en premier — « est-ce que ça convient à ma
* terrasse ? » — et une liste de douze entrées ne se lit pas.
*/
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-uses {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: var(--be-space-md);
margin: 0;
padding: 0;
list-style: none;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-uses > li {
display: flex;
flex-direction: column;
gap: 0.25rem;
margin: 0;
padding: var(--be-space-md);
border: 1px solid var(--be-oak-200);
border-radius: var(--be-radius-lg);
background-color: var(--be-bg);
transition: border-color var(--be-transition), transform var(--be-transition),
box-shadow var(--be-transition);
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-uses > li::before {
content: none;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-uses > li:hover {
border-color: var(--be-oak);
transform: translateY(-2px);
box-shadow: var(--be-shadow-sm);
}
.be-uses__name {
font-family: var(--be-font-display);
font-size: var(--be-fs-base);
font-weight: 700;
color: var(--be-charcoal);
}
.be-uses__note {
font-size: var(--be-fs-sm);
line-height: 1.5;
color: var(--be-text-muted);
}
/* Épaisseur recommandée : la donnée qui rend la carte utile plutôt
* que décorative. Alignée en bas pour que les cartes se répondent
* quelle que soit la longueur du texte. */
.be-uses__spec {
margin-top: auto;
padding-top: var(--be-space-sm);
font-family: var(--be-font-display);
font-size: var(--be-fs-sm);
font-weight: 700;
color: var(--be-yale);
font-variant-numeric: tabular-nums;
}
/* ---------------- Avantages et limites ----------------
* Deux colonnes face à face. Afficher les limites est un parti pris :
* une page qui n'énumère que des avantages se lit comme une brochure.
*/
.be-pros {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--be-space-lg);
margin-block: var(--be-space-lg);
}
.be-pros__col {
padding: var(--be-space-lg);
border: 1px solid var(--be-oak-200);
border-radius: var(--be-radius-lg);
background-color: var(--be-bg);
}
.be-pros__col--plus {
border-top: 3px solid var(--be-baltic);
}
.be-pros__col--moins {
border-top: 3px solid var(--be-oak);
background-color: var(--be-oak-100);
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-pros__title {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 var(--be-space-md);
font-family: var(--be-font-display);
font-size: var(--be-fs-lg);
font-weight: 700;
color: var(--be-charcoal);
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-pros__title::before {
content: none;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-pros ul {
margin: 0;
padding: 0;
list-style: none;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-pros li {
position: relative;
margin-bottom: var(--be-space-sm);
padding-left: 1.7rem;
font-size: var(--be-fs-sm);
line-height: 1.6;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-pros li:last-child {
margin-bottom: 0;
}
/* Coche et tiret dessinés en masque : aucune police d'icônes. */
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-pros__col--plus li::before {
content: "";
position: absolute;
left: 0;
top: 0.28em;
width: 18px;
height: 18px;
border-radius: 50%;
background-color: var(--be-baltic);
-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6 12-12-1.4-1.4z'/%3E%3C/svg%3E") center / 13px 13px no-repeat,
linear-gradient(#000, #000);
-webkit-mask-composite: xor;
mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6 12-12-1.4-1.4z'/%3E%3C/svg%3E") center / 13px 13px no-repeat,
linear-gradient(#000, #000);
mask-composite: exclude;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-pros__col--moins li::before {
content: "";
position: absolute;
left: 0;
top: 0.72em;
width: 12px;
height: 2px;
border-radius: 2px;
background-color: var(--be-oak);
box-shadow: none;
}
/* ---------------- Étapes de pose ----------------
* Frise numérotée : un chantier est une suite d'opérations dont
* l'ordre compte, et la liste ordonnée par défaut ne le montre pas.
*
* Nommée « be-flow » et non « be-steps » : la page d'accueil possède
* déjà un composant « .be-steps », qui est une rangée horizontale de
* cartes (section 8d). Les deux se seraient marché dessus — la frise
* y héritait de ses colonnes et se déroulait de gauche à droite.
*/
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-flow {
counter-reset: be-flow-n;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
margin: var(--be-space-lg) 0 0;
padding: 0;
list-style: none;
}
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-flow > li {
counter-increment: be-flow-n;
position: relative;
margin: 0;
padding: 0 0 var(--be-space-lg) 3.5rem;
}
/* Le trait qui relie les pastilles. Interrompu sur la dernière étape,
* sans quoi il pendrait dans le vide sous le dernier point. */
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-flow > li::after {
content: "";
position: absolute;
left: 1.09rem;
top: 2.4rem;
bottom: 0;
width: 2px;
background-color: var(--be-oak-200);
}
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-flow > li:last-child {
padding-bottom: 0;
}
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-flow > li:last-child::after {
content: none;
}
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-flow > li::before {
content: counter(be-flow-n);
position: absolute;
left: 0;
top: 0;
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
background-color: var(--be-yale);
color: var(--be-oak-100);
font-family: var(--be-font-display);
font-size: var(--be-fs-base);
font-weight: 800;
line-height: 1;
box-shadow: 0 0 0 4px var(--be-oak-100);
}
.be-flow__name {
display: block;
margin-bottom: 0.2rem;
padding-top: 0.3rem;
font-family: var(--be-font-display);
font-size: var(--be-fs-lg);
font-weight: 700;
line-height: 1.3;
color: var(--be-charcoal);
}
.be-flow__text {
display: block;
font-size: var(--be-fs-sm);
line-height: 1.65;
color: var(--be-text-muted);
}
/* Délai ou condition attachée à l'étape : l'information qui manque
* partout ailleurs et qui fait la différence sur un chantier. */
.be-flow__when {
display: inline-block;
margin-top: var(--be-space-xs);
padding: 0.2rem 0.6rem;
border-radius: 999px;
background-color: var(--be-almond-200);
font-size: var(--be-fs-xs);
font-weight: 700;
color: var(--be-yale-700);
font-variant-numeric: tabular-nums;
}
/* Sur fond chaud, la pastille de délai doit rester détachée. */
.be-band--warm .be-flow__when {
background-color: #fff;
}
.be-band--warm :is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-flow > li::before,
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-band--warm .be-steps > li::before {
box-shadow: 0 0 0 4px var(--be-almond-200);
}
/* ---------------- Fiche technique ----------------
* Grille de paires libellé / valeur. C'est le bloc qui nous place au
* niveau des sources techniques du secteur : aucun concurrent
* commercial ne publie ces chiffres.
*/
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-specs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1px;
margin: var(--be-space-lg) 0 0;
padding: 0;
border: 1px solid var(--be-oak-200);
border-radius: var(--be-radius-lg);
background-color: var(--be-oak-200);
overflow: hidden;
list-style: none;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-specs > div {
margin: 0;
padding: var(--be-space-md);
background-color: var(--be-bg);
}
.be-specs__k {
display: block;
margin-bottom: 0.2rem;
font-size: var(--be-fs-xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--be-text-muted);
}
.be-specs__v {
display: block;
font-family: var(--be-font-display);
font-size: var(--be-fs-lg);
font-weight: 700;
line-height: 1.25;
color: var(--be-charcoal);
font-variant-numeric: tabular-nums;
}
.be-specs__v small {
display: block;
margin-top: 0.15rem;
font-family: var(--be-font-body);
font-size: var(--be-fs-xs);
font-weight: 400;
line-height: 1.45;
color: var(--be-text-muted);
}
/* ---------------- Planches d'images ----------------
* Nuanciers de granulats, planches de motifs, photos de chantier.
*
* Ce sont les images de la médiathèque du site, pas des pastilles de
* couleur dessinées en CSS : une teinte à plat ne rend ni le grain, ni
* le calibre, ni ce que donne la surface une fois mouillée, et elle
* laisserait croire à un échantillon fidèle.
*/
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: var(--be-space-md);
margin: var(--be-space-lg) 0 var(--be-space-md);
padding: 0;
list-style: none;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-gallery > li {
margin: 0;
padding: 0;
text-align: center;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-gallery > li::before {
content: none;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-gallery img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--be-radius);
border: 1px solid var(--be-oak-200);
box-shadow: var(--be-shadow-sm);
transition: transform var(--be-transition), box-shadow var(--be-transition);
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-gallery > li:hover img {
transform: translateY(-2px);
box-shadow: var(--be-shadow-md);
}
/* --- Agrandissement ---
* Les vignettes et les nuanciers ouvrent la visionneuse (Simple
* Lightbox, actif sur les articles). Encore faut-il que ça se voie :
* une image qui s'agrandit sans le dire n'est jamais cliquée. D'où la
* pastille loupe, visible au survol comme au focus clavier.
*/
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-gallery__link,
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-zoom > a {
position: relative;
display: block;
border-radius: var(--be-radius);
text-decoration: none;
cursor: zoom-in;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-zoom > a {
border-radius: var(--be-radius-lg);
overflow: hidden;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) :is(.be-gallery__link, .be-zoom > a)::after {
content: "";
position: absolute;
right: 0.5rem;
bottom: 0.5rem;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: rgba(11, 79, 108, 0.92);
/* Loupe dessinée en masque : aucune police d'icônes à charger. */
-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M10.5 4a6.5 6.5 0 106.5 6.5A6.5 6.5 0 0010.5 4zm4.6 11.1L20 20M8 10.5h5M10.5 8v5'/%3E%3C/svg%3E") center / 18px 18px no-repeat,
linear-gradient(#000, #000);
-webkit-mask-composite: source-in;
mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M10.5 4a6.5 6.5 0 106.5 6.5A6.5 6.5 0 0010.5 4zm4.6 11.1L20 20M8 10.5h5M10.5 8v5'/%3E%3C/svg%3E") center / 18px 18px no-repeat,
linear-gradient(#000, #000);
mask-composite: intersect;
opacity: 0;
transform: translateY(4px);
transition: opacity var(--be-transition), transform var(--be-transition);
pointer-events: none;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) :is(.be-gallery__link, .be-zoom > a):hover::after,
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) :is(.be-gallery__link, .be-zoom > a):focus-visible::after {
opacity: 1;
transform: translateY(0);
}
/* Sur un écran tactile il n'y a pas de survol : la pastille reste
* affichée, sans quoi rien n'indiquerait que l'image s'ouvre. */
@media (hover: none) {
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) :is(.be-gallery__link, .be-zoom > a)::after {
opacity: 1;
transform: none;
}
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-zoom > a::after {
right: 0.75rem;
bottom: 0.75rem;
width: 36px;
height: 36px;
}
.be-gallery__name {
display: block;
margin-top: var(--be-space-xs);
font-size: var(--be-fs-xs);
font-weight: 600;
line-height: 1.35;
color: var(--be-charcoal);
}
.be-gallery__note {
font-size: var(--be-fs-xs);
color: var(--be-text-muted);
font-style: italic;
}
/* ---------------- Tranches de prix ----------------
* Le prix au mètre carré baisse avec la surface, et aucun concurrent
* ne l'explique. Ce tableau en fait l'argument principal plutôt qu'une
* note de bas de page.
*/
.be-price {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: var(--be-space-md);
margin: var(--be-space-lg) 0 var(--be-space-md);
padding: 0;
list-style: none;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-price > li {
display: flex;
flex-direction: column;
margin: 0;
padding: var(--be-space-md) var(--be-space-lg);
border: 1px solid var(--be-oak-200);
border-radius: var(--be-radius-lg);
background-color: var(--be-bg);
box-shadow: var(--be-shadow-sm);
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-price > li::before {
content: none;
}
.be-price__range {
font-size: var(--be-fs-xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--be-text-muted);
}
.be-price__value {
margin-top: 0.3rem;
font-family: var(--be-font-display);
font-size: var(--be-fs-2xl);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.03em;
color: var(--be-yale);
font-variant-numeric: tabular-nums;
}
.be-price__unit {
font-size: var(--be-fs-base);
font-weight: 700;
letter-spacing: 0;
color: var(--be-text-muted);
}
.be-price__note {
margin-top: var(--be-space-xs);
font-size: var(--be-fs-xs);
line-height: 1.5;
color: var(--be-text-muted);
}
/* La dernière tranche n'a pas de chiffre : au-delà, c'est un métré.
* Elle se distingue pour que l'absence se lise comme une réponse et
* non comme un oubli. */
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-price > li.is-devis {
background-color: var(--be-yale);
border-color: var(--be-yale);
}
.is-devis .be-price__range {
color: rgba(247, 244, 241, 0.75);
}
.is-devis .be-price__value {
color: #fff;
font-size: var(--be-fs-xl);
}
.is-devis .be-price__note {
color: rgba(247, 244, 241, 0.8);
}
/* ---------------- Appel à l'action ----------------
* Remplace le bandeau centré qui fermait la page. Deux défauts : il
* arrivait après le dernier mot, quand le visiteur décidé était déjà
* parti, et un bloc centré sur fond uni ne se distinguait pas du pied
* de page qui le suivait.
*
* Ici : une carte en deux colonnes, posée au milieu du contenu (voir
* inc/finitions-sections.php, qui l'insère après la section des prix).
* Le texte à gauche, les repères concrets à droite — ce sont eux qui
* répondent à la vraie question, « qu'est-ce qui se passe si je
* clique ».
*/
.be-cta {
grid-column: large;
margin-block: var(--be-space-2xl);
padding: 0;
border: 0;
border-radius: var(--be-radius-lg);
background: linear-gradient(135deg, var(--be-yale) 0%, var(--be-yale-800) 100%);
color: var(--be-oak-100);
text-align: left;
box-shadow: var(--be-shadow-lg);
overflow: hidden;
}
.be-cta__inner {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
gap: 0;
max-width: none;
margin: 0;
}
.be-cta__body {
padding: clamp(1.6rem, 3.5vw, 2.5rem);
}
/* Le titre de la carte est un paragraphe, pas un « h2 ».
*
* Deux raisons. D'abord le sens : un appel à l'action n'est pas une
* section du document, et il n'a rien à faire dans le plan de la page
* ni dans le sommaire. Ensuite la cohabitation : le calculateur de prix
* (inc/prix.php) repère les fins de section en cherchant les « »
* pour s'insérer après l'une d'elles — le titre de cette carte en était
* un, et le calculateur venait se loger à l'intérieur. */
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-cta p.be-cta__title,
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-cta :is(h2, h3) {
margin: 0 0 var(--be-space-sm);
color: #fff;
font-family: var(--be-font-display);
font-size: clamp(1.4rem, 2.6vw, 1.85rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
max-width: none;
}
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-cta :is(h2, h3)::before {
content: none;
}
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-cta p {
margin: 0 0 var(--be-space-lg);
max-width: 42ch;
color: rgba(247, 244, 241, 0.82);
font-size: var(--be-fs-base);
line-height: 1.6;
}
.be-cta__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--be-space-md);
}
/* Bouton clair sur fond sombre : le bleu Baltic tomberait à 1,30:1
* contre le Yale et disparaîtrait (voir color-palette.md). */
.be-cta .be-btn--primary {
background-color: #fff;
border-color: #fff;
color: var(--be-yale);
padding: 0.9rem 1.6rem;
font-size: var(--be-fs-base);
}
.be-cta .be-btn--primary:hover,
.be-cta .be-btn--primary:focus {
background-color: var(--be-oak-100);
border-color: var(--be-oak-100);
color: var(--be-yale-700);
}
.be-cta__tel {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-family: var(--be-font-display);
font-size: var(--be-fs-lg);
font-weight: 700;
color: #fff;
text-decoration: none;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-cta__tel {
color: #fff;
text-decoration: none;
}
.be-cta__tel:hover,
.be-cta__tel:focus {
text-decoration: underline;
text-underline-offset: 0.2em;
}
.be-cta__tel svg {
width: 18px;
height: 18px;
flex: 0 0 auto;
opacity: 0.8;
}
/* Colonne de droite : ce qui se passe après le clic. */
.be-cta__aside {
padding: clamp(1.6rem, 3.5vw, 2.5rem);
background-color: rgba(255, 255, 255, 0.07);
border-left: 1px solid rgba(247, 244, 241, 0.16);
}
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-cta__points {
margin: 0;
padding: 0;
list-style: none;
}
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-cta__points li {
position: relative;
margin: 0 0 var(--be-space-md);
padding-left: 1.7rem;
font-size: var(--be-fs-sm);
line-height: 1.5;
color: rgba(247, 244, 241, 0.88);
}
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-cta__points li:last-child {
margin-bottom: 0;
}
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-cta__points li::before {
content: "";
position: absolute;
left: 0;
top: 0.2em;
width: 18px;
height: 18px;
border-radius: 50%;
background-color: var(--be-almond);
box-shadow: none;
-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6 12-12-1.4-1.4z'/%3E%3C/svg%3E") center / 13px 13px no-repeat,
linear-gradient(#000, #000);
-webkit-mask-composite: xor;
mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6 12-12-1.4-1.4z'/%3E%3C/svg%3E") center / 13px 13px no-repeat,
linear-gradient(#000, #000);
mask-composite: exclude;
}
/* Sélecteur porté au niveau de « :is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) strong »,
* qui met le gras en Charcoal : sur ce fond sombre, il disparaissait. */
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-cta__points strong {
display: block;
color: #fff;
font-family: var(--be-font-display);
font-size: var(--be-fs-base);
line-height: 1.3;
}
/* Les liens du fil de lecture sont soulignés ; dans cette carte, ce
* sont un bouton et un numéro de téléphone, pas des liens de texte. */
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-cta a {
text-decoration: none;
}
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-cta a:hover,
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-cta a:focus {
text-decoration: none;
}
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-cta__tel:hover,
:is(.be-finition, .be-comparateur, .be-comparateurs-index, .be-prix-page, .be-prix-pilier) .entry-content .be-cta__tel:focus {
text-decoration: underline;
text-underline-offset: 0.2em;
}
@media (max-width: 720px) {
.be-cta__inner {
grid-template-columns: 1fr;
}
.be-cta__aside {
border-left: 0;
border-top: 1px solid rgba(247, 244, 241, 0.16);
}
.be-cta__actions .be-btn {
width: 100%;
}
}
/* ---------------- Repère inline ----------------
* Petit encart à poser au fil du texte : une précaution de chantier,
* un ordre de grandeur, une confusion fréquente à lever.
*/
.be-tip {
position: relative;
margin-block: var(--be-space-lg);
padding: var(--be-space-md) var(--be-space-lg) var(--be-space-md) 3.25rem;
border: 1px solid var(--be-oak-200);
border-radius: var(--be-radius-lg);
background-color: var(--be-almond-200);
}
.be-tip::before {
content: "";
position: absolute;
left: var(--be-space-md);
top: var(--be-space-md);
width: 22px;
height: 22px;
border-radius: 50%;
background-color: var(--be-yale);
-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 7h2v2h-2zm0 4h2v6h-2zm1-9a10 10 0 100 20 10 10 0 000-20z'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 7h2v2h-2zm0 4h2v6h-2zm1-9a10 10 0 100 20 10 10 0 000-20z'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-tip > :last-child {
margin-bottom: 0;
}
.be-tip__title {
display: block;
margin-bottom: 0.15rem;
font-family: var(--be-font-display);
font-size: var(--be-fs-base);
font-weight: 700;
color: var(--be-charcoal);
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-tip p {
font-size: var(--be-fs-sm);
line-height: 1.6;
color: var(--be-text-muted);
}
/* ---------------- Comparatif ----------------
* Tableau à en-tête collant : les comparatifs des plans par finition
* font six à onze lignes, et l'en-tête disparaît au défilement.
*/
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-compare {
grid-column: large;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-compare thead th {
position: sticky;
top: var(--be-header-clear);
z-index: 1;
}
/* Colonne mise en avant : la finition dont on est en train de parler. */
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-compare :is(td, th).is-nous {
background-color: var(--be-almond-200);
font-weight: 700;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-compare thead th.is-nous {
background-color: var(--be-baltic);
}
@media (max-width: 767px) {
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-key__list,
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-specs,
.be-pros,
.be-price {
grid-template-columns: 1fr;
}
:is(.be-finition .entry-content, .be-prix-page .entry-content, .be-prix-pilier .entry-content, .be-prose) .be-steps > li {
padding-left: 3rem;
}
}
/* ------------------------------------------------------------------
* 8i. CALCULATEURS
* Masters : scripts/calculators/ · insertion : inc/prix.php.
* Architecture : docs/calculators.md.
*
* Les formulaires sont produits par Calculated Fields Form. Leur
* balisage est construit en JavaScript et n'est donc pas modifiable :
*
* form.cff-form.cp_cff_18
* #fbuilder > #fbuilder_N > #fieldlist_N.top_aligned > div.pbreak.pb0
* div.fields...cff--field
* label + div.dfield > (input|select) + span.uh
*
* Quatre conséquences, qui expliquent tout ce qui suit :
*
* 1. La liste de champs est plate : aucun conteneur n'entoure les
* résultats, donc pas de « panneau » possible. Chaque résultat
* porte lui-même sa mise en forme, et une grille à six colonnes
* recompose la page à partir des seules classes que nous posons
* sur les champs (calc-input, calc-result--tile, calc-result--line…).
* 2. Un résultat est un