/*
Theme Name: Devis Piscine
Theme URI: https://devispiscine.info/
Description: Child theme of Blocksy for devispiscine.info (identity boards of 12 October 2026: deep blue, sand, warm drop button). Colours, fonts, header and footer rows live in the Customizer (blocksy-settings.json); this sheet only carries what Blocksy cannot set: content components, table of contents, tables, header and footer details.
Author: Devis Piscine
Template: blocksy
Version: 0.1.8
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: devis-piscine
License: GPL-2.0-or-later
*/
/* -------------------------------------------------------------------------
A. Fonts, self-hosted (SIL OFL 1.1, assets/fonts/OFL-*.txt).
Nunito 700/800 for headings, Karla 400/600 for text. Nothing is fetched from Google.
------------------------------------------------------------------------- */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/nunito-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fonts/nunito-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Karla"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/karla-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Karla"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/karla-latin-600-normal.woff2") format("woff2"); }
/* -------------------------------------------------------------------------
B. Tokens (board 01). The Blocksy palette provides --theme-palette-color-1..8;
the values below are fallbacks and the off-palette colours of the boards.
------------------------------------------------------------------------- */
:root {
--dpi-bleu: var(--theme-palette-color-1, #0F4C6E); /* deep blue: links, table heads, footer */
--dpi-accent: var(--theme-palette-color-2, #E0892E); /* warm accent: quote button only */
--dpi-accent-survol: #C9741C;
--dpi-texte: var(--theme-palette-color-3, #26323B);
--dpi-encre: var(--theme-palette-color-4, #10202B); /* headings, text on the accent */
--dpi-bord: var(--theme-palette-color-5, #DCE3E3);
--dpi-eau: var(--theme-palette-color-6, #CFE9F3); /* boxes only, never text */
--dpi-fond: var(--theme-palette-color-7, #F8F6F1);
--dpi-blanc: var(--theme-palette-color-8, #FFFFFF);
--dpi-sable: #E8DCC4; /* section backgrounds */
--dpi-vert: #1E7F4F; /* advantages */
--dpi-or: #F0B46A; /* footer titles, active item in the blue panel */
--dpi-eau-texte: #A9D6EA; /* light text on deep blue */
--dpi-filet-bleu: #2A6688; /* separators on deep blue */
--dpi-discret: #5A6873; /* dates, notes */
--dpi-alerte-fond: #FFF4E8;
--dpi-alerte-trait: #9A4A0E;
--dpi-r-champ: 10px; /* fields, images in cards */
--dpi-r-carte: 14px; /* cards */
--dpi-r-encadre: 12px; /* boxes */
--dpi-r-bande: 16px; /* blue bands */
--dpi-titres: "Nunito", "Trebuchet MS", sans-serif;
--dpi-corps: "Karla", "Segoe UI", sans-serif;
--dpi-colonne: 760px; /* text column */
--dpi-large: 1200px; /* container */
}
/* -------------------------------------------------------------------------
C. Base
------------------------------------------------------------------------- */
body { background-color: var(--dpi-fond); }
::selection { background: var(--dpi-bleu); color: #FFFFFF; }
/* :where keeps this rule weak, so components can drop the underline */
.entry-content :where(a:not(.wp-block-button__link):not(.ct-button)) { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.entry-content strong { font-weight: 600; color: var(--dpi-encre); }
h1, h2, .page-title { font-family: var(--dpi-titres); font-weight: 800; letter-spacing: -0.015em; }
h3, h4 { font-family: var(--dpi-titres); font-weight: 700; }
:focus-visible { outline: 3px solid var(--dpi-bleu); outline-offset: 2px; }
/* No shadows anywhere (board 01). */
.ct-header *, .ct-footer *, .entry-content .wp-block-group, .entry-content .wp-block-image img { box-shadow: none; }
/* Secondary button (core "Outline" style): deep blue outline on white (board 02). Blocksy's ghost-button rule
would paint it in the accent colour. */
.entry-content .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link {
color: var(--dpi-bleu); border: 2px solid var(--dpi-bleu); background-color: var(--dpi-blanc); border-radius: var(--dpi-r-champ);
}
.entry-content .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link:hover { color: var(--dpi-bleu); border-color: var(--dpi-bleu); background-color: var(--dpi-eau); }
/* Images: air between an image and the heading that follows it (owner preference). */
.entry-content .wp-block-image { margin-bottom: 28px; }
.entry-content .wp-block-image + :is(h2, h3) { margin-top: 32px; }
.entry-content .wp-block-image img { border-radius: var(--dpi-r-carte); }
/* -------------------------------------------------------------------------
D. Header (boards 04, 05, 07). Heights, colours and fonts come from the Customizer.
------------------------------------------------------------------------- */
.ct-header [data-row*="middle"] { border-bottom: 1px solid var(--dpi-bord); }
.ct-header [data-id="menu"] .menu > li > .ct-menu-link { font-family: var(--dpi-corps); font-weight: 600; white-space: nowrap; }
/* Menu placed right after the logo (start column): the board leaves about 50 px between them. */
.ct-header [data-column="start"] > [data-id="menu"] { margin-inline-start: 28px; }
/* More air between the menu items (Julie, 2026-10-26: "c'est trop collé"); Blocksy's own setting was 9 px. */
html [data-header] .ct-header [data-id="menu"] { --menu-items-spacing: 16px; }
@media (max-width: 1320px) { html [data-header] .ct-header [data-id="menu"] { --menu-items-spacing: 12px; } }
/* Current silo: blue text and a 3 px accent line at the bottom of the row (board 07). */
.ct-header [data-id="menu"] .menu > li:is(.current-menu-item, .current-menu-ancestor, .current-page-ancestor, .eb-silo-actif) > .ct-menu-link {
color: var(--dpi-bleu);
box-shadow: inset 0 -3px 0 var(--dpi-accent);
}
/* Quote button of the header: pill, warm accent, ink text, drop on the left. */
.ct-header .ct-header-cta .ct-button,
.ct-panel .ct-header-cta .ct-button {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
border-radius: 999px; background-color: var(--dpi-accent); color: var(--dpi-encre);
font-family: var(--dpi-corps); font-weight: 700; text-decoration: none; white-space: nowrap; flex-shrink: 0;
}
.ct-header .ct-header-cta .ct-button:hover,
.ct-panel .ct-header-cta .ct-button:hover { background-color: var(--dpi-accent-survol); color: var(--dpi-encre); }
.ct-header .ct-header-cta .ct-button::before,
.ct-panel .ct-header-cta .ct-button::before,
.eb-goutte::before {
content: ""; flex: none; width: 18px; height: 18px; background-color: currentColor;
/* inline drop (assets/icons/goutte.svg): a mask from a file URL would need CORS on some setups */
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8c3.6 4.4 6.2 7.9 6.2 11.3a6.2 6.2 0 0 1-12.4 0c0-3.4 2.6-6.9 6.2-11.3z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8c3.6 4.4 6.2 7.9 6.2 11.3a6.2 6.2 0 0 1-12.4 0c0-3.4 2.6-6.9 6.2-11.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* -------------------------------------------------------------------------
E. Mobile panel (board 06): deep blue, white links, gold for the current item, #2A6688 separators,
quote button at the bottom.
------------------------------------------------------------------------- */
#offcanvas .ct-panel-content-inner { gap: 0; }
#offcanvas .mobile-menu .menu > li > .ct-menu-link,
#offcanvas .mobile-menu ul > li > a {
min-height: 52px; display: flex; align-items: center;
border-bottom: 1px solid var(--dpi-filet-bleu); color: #FFFFFF; font-weight: 600; font-size: 18px; text-decoration: none;
}
#offcanvas .mobile-menu li:last-child > a { border-bottom: 0; }
#offcanvas .mobile-menu .menu > li:is(.current-menu-item, .current-menu-ancestor, .eb-silo-actif) > .ct-menu-link,
#offcanvas .mobile-menu .menu > li > .ct-menu-link:hover { color: var(--dpi-or); }
#offcanvas .ct-header-cta { width: 100%; margin-top: 12px; }
#offcanvas .ct-header-cta .ct-button { width: 100%; min-height: 52px; font-size: 17px; }
/* -------------------------------------------------------------------------
F. Page head: breadcrumbs, one H1 (Blocksy's title, or the H1 of the content when it has one), signature.
------------------------------------------------------------------------- */
.ct-breadcrumbs { font-size: 15px; color: var(--dpi-texte); }
.ct-breadcrumbs a { color: var(--dpi-bleu); text-decoration: underline; text-underline-offset: 2px; }
.ct-breadcrumbs .ct-separator { opacity: .7; }
.hero-section[data-type="type-1"] { margin-bottom: 18px; }
.hero-section[data-type="type-1"] .entry-header { text-align: left; }
.hero-section .page-description { font-size: 19px; color: var(--dpi-texte); max-width: var(--dpi-colonne); }
.eb-signature, .entry-content .eb-signature { font-size: 15px; color: var(--dpi-discret); margin-top: 8px; }
/* -------------------------------------------------------------------------
G. Layout per template (body classes set in functions.php):
eb-gabarit-accueil home: no hero, bands at full width
eb-gabarit-famille hub: 1200 px, cards
eb-gabarit-outil type page with its estimator: 760 px text column on the left, wide blocks at 1200 px,
table of contents beside the text on large screens
eb-gabarit-guide guide: same column
eb-gabarit-article blog post: 760 px column, centred (Blocksy narrow container)
------------------------------------------------------------------------- */
:is(.eb-gabarit-outil, .eb-gabarit-guide, .eb-gabarit-famille) .entry-content {
--theme-block-max-width: var(--dpi-colonne);
--theme-block-wide-max-width: var(--dpi-large);
}
:is(.eb-gabarit-outil, .eb-gabarit-guide, .eb-gabarit-famille) .entry-content > :not(.alignfull):not(.alignwide):not(.eb-estimateur):not(.eb-cartes):not(.eb-appel-final):not(.lwptoc) {
margin-left: 0; margin-right: auto; max-width: var(--dpi-colonne);
}
:is(.eb-gabarit-outil, .eb-gabarit-guide, .eb-gabarit-famille) .entry-content > :is(.alignwide, .eb-cartes, .eb-appel-final) {
max-width: var(--dpi-large); margin-left: 0; margin-right: 0; clear: both;
}
.eb-gabarit-famille .entry-content > .wp-block-group.eb-cartes { max-width: var(--dpi-large); }
/* The estimator spans the container (the plugin caps it at 1080 px). */
:is(.eb-gabarit-outil, .eb-gabarit-guide) .entry-content > .eb-estimateur { max-width: var(--dpi-large); margin: 8px 0 40px; clear: both; }
/* Header group written in the content: H1 + one sentence (brief), left-aligned like the boards. */
.entry-content > .eb-entete { margin-bottom: 28px; }
.entry-content > .eb-entete h1 { margin: 0 0 14px; }
.entry-content > .eb-entete p { font-size: 19px; margin: 0; }
.entry-content > .eb-entete .eb-signature { font-size: 15px; margin-top: 12px; }
/* Home: the content starts at the top of the page with the sand band (board 04). */
.eb-gabarit-accueil .site-main > .ct-container-full,
.eb-gabarit-accueil .site-main > div > .ct-container-full { padding-top: 0; }
.eb-gabarit-accueil .entry-content > :is(.alignfull, .eb-heros):first-child { margin-top: 0; }
.eb-gabarit-accueil .entry-content > :is(h2, .eb-confiance, .eb-appel-final, .eb-bandeau-final) { margin-top: 64px; }
.eb-gabarit-accueil .entry-content > .eb-heros + h2 { margin-top: 56px; }
.eb-gabarit-accueil .entry-content > :is(.eb-famille-titre, h3:has(+ .eb-cartes)) { margin-top: 28px; }
.eb-gabarit-accueil .entry-content > .eb-arnaque { margin-top: 28px; }
.eb-gabarit-accueil .entry-content > .wp-block-buttons { margin-top: 8px; }
.eb-gabarit-accueil .entry-content > :last-child { margin-bottom: 16px; }
/* Hero group of the home content (class eb-heros, core Group > Columns): sand band at full width without
overflowing the page (border-image outset paints the sides), H1 + intro on the left, selector then prices on the right. */
.entry-content > .eb-heros {
position: relative; max-width: none; margin-top: 0; padding: 56px 0 104px;
background: #0F4C6E;
border-image: linear-gradient(180deg, #0B3A54 0%, #0F4C6E 55%, #176489 100%) fill 0 // 0 100vw;
}
/* Water band (Julie, 2026-10-26: "ça manque de bleu"): deep blue water, white text, a wave into the page background. */
.entry-content > .eb-heros::after {
content: ""; position: absolute; left: 50%; bottom: -1px; width: 100vw; height: 56px; transform: translateX(-50%); pointer-events: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 56' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C240 6 480 6 720 26 C960 46 1200 46 1440 22 L1440 56 L0 56 Z' fill='%23CFE9F3' opacity='.55'/%3E%3Cpath d='M0 40 C240 20 480 22 720 38 C960 54 1200 52 1440 34 L1440 56 L0 56 Z' fill='%23F8F6F1'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}
.eb-heros > .wp-block-columns { position: relative; z-index: 1; }
.eb-heros h1 { color: #FFFFFF; }
.eb-heros > .wp-block-columns > .wp-block-column:first-child > p { color: #E6F3F9; }
.eb-heros > .wp-block-columns > .wp-block-column:first-child > p.has-small-font-size { color: #CFE9F3 !important; }
.eb-heros > .wp-block-columns > .wp-block-column:first-child a:not(.wp-block-button__link) { color: #FFFFFF; }
.eb-heros .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }
.eb-heros .wp-block-button.is-style-outline .wp-block-button__link:hover { background: #FFFFFF; color: #0F4C6E; }
.eb-heros > .wp-block-columns { gap: 48px; margin: 0; align-items: flex-start; }
.eb-heros > .wp-block-columns > .wp-block-column:first-child { flex: 1 1 55%; }
.eb-heros > .wp-block-columns > .wp-block-column:last-child { flex: 1 1 45%; display: flex; flex-direction: column; gap: 18px; }
.eb-heros > .wp-block-columns > .wp-block-column:last-child > * { margin: 0; }
.eb-heros > .wp-block-columns > .wp-block-column:last-child > .eb-selecteur { order: -1; }
.eb-heros h1 { font-size: clamp(32px, 4.2vw, 50px); line-height: 1.1; margin: 24px 0 18px; }
.eb-heros .wp-block-column:first-child > p:not(.has-small-font-size) { font-size: 20px; line-height: 1.55; margin: 0 0 22px; }
.eb-heros .wp-block-column:first-child > p.has-small-font-size { font-size: 14px !important; color: var(--dpi-discret); margin-top: 16px; }
/* Sand band (hero of the home page, any full-width section). */
.eb-bande-sable { background-color: var(--dpi-sable); }
.entry-content .eb-bande-sable.alignfull { padding: 56px 20px; }
.eb-bande-sable > .wp-block-columns { max-width: var(--dpi-large); margin: 0 auto; gap: 48px; align-items: flex-start; }
.eb-bande-sable h1 { font-size: clamp(32px, 4.2vw, 50px); line-height: 1.1; margin: 24px 0 18px; }
.eb-bande-sable .eb-chapo { font-size: 20px; margin: 0 0 22px; }
.eb-bande-sable .eb-note { font-size: 14px; color: var(--dpi-discret); margin-top: 14px; }
.eb-bande-sable .wp-block-column > * + * { margin-top: 18px; }
/* -------------------------------------------------------------------------
H. Content components (board 02). All on core Group blocks, by class name.
------------------------------------------------------------------------- */
/* H1. "En bref": clear water box, title, label / value rows, note. Rows may be a list, a table or columns. */
.eb-en-bref {
background: var(--dpi-eau); border: 1px solid var(--dpi-bord); border-radius: var(--dpi-r-encadre);
padding: 18px 20px; margin: 0 0 32px;
}
.eb-en-bref > :first-child { margin-top: 0; font-family: var(--dpi-corps); font-weight: 600; font-size: 17px; color: var(--dpi-encre); }
.eb-en-bref > :is(h2, h3):first-child { font-weight: 700; letter-spacing: 0; }
.entry-content .eb-en-bref ul { list-style: none; margin: 8px 0 0; padding: 0; }
/* rows read as sentences ("label : value" or "label : text"), so the value stays in place */
.eb-en-bref li { display: block; padding: 7px 0; border-bottom: 1px solid var(--dpi-bord); font-size: 15px; line-height: 1.5; }
.eb-en-bref li:last-child { border-bottom: 0; }
.eb-en-bref li strong, .eb-en-bref li b { font-weight: 700; color: var(--dpi-encre); }
.eb-en-bref .wp-block-table { margin: 8px 0 0; }
.eb-en-bref .wp-block-table table { border: 0; background: transparent; }
.eb-en-bref .wp-block-table :is(td, th) { background: transparent; border: 0; border-bottom: 1px solid var(--dpi-bord); padding: 7px 0; font-size: 15px; color: var(--dpi-texte); }
.eb-en-bref .wp-block-table td:last-child { text-align: right; font-weight: 700; font-size: 17px; color: var(--dpi-encre); }
.eb-en-bref .wp-block-table td:first-child { font-weight: 400; }
.eb-en-bref .wp-block-columns { margin: 0; gap: 12px; border-bottom: 1px solid var(--dpi-bord); padding: 7px 0; }
.eb-en-bref .wp-block-columns p { margin: 0 0 6px; font-size: 15px; }
/* label / value rows (columns kept side by side on phones): value on the right */
.eb-en-bref .wp-block-columns.is-not-stacked-on-mobile .wp-block-column:last-child { text-align: right; font-weight: 700; color: var(--dpi-encre); }
.eb-en-bref > p:last-child:not(:first-child) { margin: 10px 0 0; font-size: 13px; color: var(--dpi-discret); }
/* H2. Advantages / drawbacks: two white cards, 4 px top border, green then accent. */
.eb-pour-contre { margin: 0 0 32px; }
.eb-pour-contre > .wp-block-columns { gap: 18px; margin: 0; }
.eb-pour-contre .wp-block-column {
background: var(--dpi-blanc); border: 1px solid var(--dpi-bord); border-top: 4px solid var(--dpi-vert);
border-radius: var(--dpi-r-carte); padding: 18px;
}
.eb-pour-contre .wp-block-column:nth-child(2) { border-top-color: var(--dpi-accent); }
.eb-pour-contre .wp-block-column > :first-child { margin: 0 0 8px; font-family: var(--dpi-corps); font-weight: 700; font-size: 18px; color: var(--dpi-encre); letter-spacing: 0; }
.eb-pour-contre ul { margin: 0; padding-left: 18px; font-size: 16px; line-height: 1.7; }
/* H3. "Attention arnaque": pale orange, accent border, warning icon. */
.eb-arnaque {
position: relative; background: var(--dpi-alerte-fond); border: 1px solid var(--dpi-accent); border-radius: var(--dpi-r-encadre);
padding: 16px 18px 16px 54px; margin: 32px 0; font-size: 15px;
}
.eb-arnaque::before {
content: ""; position: absolute; left: 18px; top: 17px; width: 24px; height: 24px;
background: url("assets/icons/alerte.svg") center / contain no-repeat;
}
.eb-arnaque > :first-child { margin-top: 0; font-family: var(--dpi-corps); font-size: 17px; font-weight: 700; color: var(--dpi-encre); letter-spacing: 0; }
.eb-arnaque > * + * { margin-top: 4px; }
.eb-arnaque > :last-child { margin-bottom: 0; }
/* H4. "Prix moyens constatés" (home): white card, title + date, four rows, note. */
.eb-prix-moyens {
background: var(--dpi-blanc); border: 1px solid var(--dpi-bord); border-radius: var(--dpi-r-carte); padding: 18px 20px;
}
/* title and date on one line, the rest below */
.eb-prix-moyens { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: baseline; }
.eb-prix-moyens > * { grid-column: 1 / -1; }
.eb-prix-moyens > :first-child { grid-column: 1; }
.eb-prix-moyens > .eb-date { grid-column: 2; grid-row: 1; text-align: right; }
.eb-prix-moyens > :first-child { margin: 0; font-family: var(--dpi-titres); font-weight: 800; font-size: 20px; color: var(--dpi-encre); letter-spacing: -0.01em; }
.eb-prix-moyens .eb-date { margin: 0; font-size: 13px; color: var(--dpi-discret); }
.entry-content .eb-prix-moyens ul { list-style: none; margin: 4px 0 0; padding: 0; }
.eb-prix-moyens li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--dpi-bord); font-size: 15px; }
.eb-prix-moyens li strong, .eb-prix-moyens li b { order: 2; white-space: nowrap; font-size: 17px; font-weight: 700; color: var(--dpi-encre); }
.entry-content .eb-prix-moyens li a { color: var(--dpi-texte); text-decoration: none; }
.entry-content .eb-prix-moyens li a:hover { color: var(--dpi-bleu); text-decoration: underline; }
.eb-prix-moyens .wp-block-table :is(td, th) { background: transparent; border: 0; border-bottom: 1px solid var(--dpi-bord); padding: 8px 0; font-size: 15px; }
.eb-prix-moyens .wp-block-table td:last-child { text-align: right; white-space: nowrap; font-weight: 700; font-size: 17px; color: var(--dpi-encre); }
.eb-prix-moyens > p:last-child:not(:first-child) { margin: 8px 0 0; font-size: 13px !important; color: var(--dpi-discret); line-height: 1.5; }
/* Content markup: H2 + date paragraph, then one Columns row (label | value) per price. */
.eb-prix-moyens > h2:first-child { font-size: 20px !important; line-height: 1.2; }
.eb-prix-moyens > h2:first-child + p { grid-column: 2; grid-row: 1; margin: 0; text-align: right; font-size: 13px !important; color: var(--dpi-discret); }
.eb-prix-moyens > .wp-block-columns { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: baseline; gap: 14px; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--dpi-bord); }
.eb-prix-moyens > h2:first-child + p + .wp-block-columns { margin-top: 4px; }
.eb-prix-moyens > .wp-block-columns > .wp-block-column { flex: 1 1 auto; min-width: 0; }
.eb-prix-moyens > .wp-block-columns > .wp-block-column:last-child { flex: 0 0 auto; text-align: right; }
.eb-prix-moyens > .wp-block-columns p { margin: 0 !important; font-size: 15px !important; line-height: 1.4; }
.eb-prix-moyens > .wp-block-columns strong { white-space: nowrap; font-size: 17px; font-weight: 700; color: var(--dpi-encre); }
/* H5. Type cards: grid of white cards (image 16:9, name, one line, price range). Whole card clickable when the title is a link. */
/* Content markup: a core Columns block "eb-cartes"; functions.php (section 9) turns each column into
.eb-carte-type > figure.eb-carte-image + p.eb-carte-nom + p.eb-carte-ligne + p.eb-carte-prix (+ p.eb-carte-lien).
Number of columns follows the number of cards in the row (3, 4, 5; 2 cards keep a 3-column grid). */
.entry-content .eb-cartes { display: grid; grid-template-columns: repeat(var(--eb-cartes-colonnes, 4), minmax(0, 1fr)); gap: 18px; margin: 18px 0 40px; }
.eb-cartes:has(> :nth-child(3):last-child), .eb-cartes:has(> :nth-child(2):last-child), .eb-cartes:has(> :only-child) { --eb-cartes-colonnes: 3; }
.eb-cartes:has(> :nth-child(5)) { --eb-cartes-colonnes: 5; }
.eb-cartes.eb-cartes-5 { --eb-cartes-colonnes: 5; }
.eb-cartes.eb-cartes-3 { --eb-cartes-colonnes: 3; }
.eb-cartes > * { margin: 0 !important; max-width: none !important; }
.entry-content .eb-cartes:has(+ .eb-cartes) { margin-bottom: 18px; }
.entry-content .eb-cartes + .eb-cartes { margin-top: 0; }
.eb-carte-type .eb-carte-image { margin: 0 0 6px !important; }
.eb-carte-type .eb-carte-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--dpi-r-champ); background: var(--dpi-eau); }
.eb-carte-type .eb-carte-nom { font-family: var(--dpi-titres); font-size: 19px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: var(--dpi-encre); }
.eb-carte-type .eb-carte-nom strong { font-weight: 800; }
.entry-content .eb-carte-type .eb-carte-nom a { color: var(--dpi-encre); text-decoration: none; }
.entry-content .eb-carte-type .eb-carte-nom a:hover { color: var(--dpi-bleu); }
.eb-carte-type .eb-carte-nom a::after { content: ""; position: absolute; inset: 0; border-radius: var(--dpi-r-carte); }
.eb-carte-type .eb-carte-nom a:focus-visible { outline: 0; }
.eb-carte-type .eb-carte-ligne { font-size: 15px; line-height: 1.45; color: var(--dpi-texte); }
.eb-carte-type p.eb-carte-prix { margin-top: auto !important; padding-top: 2px; font-size: 15px; font-weight: 600; color: var(--dpi-bleu); }
.eb-carte-type .eb-carte-lien { position: relative; z-index: 1; font-size: 15px; font-weight: 600; }
.eb-carte-type {
position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%;
background: var(--dpi-blanc); border: 1px solid var(--dpi-bord); border-radius: var(--dpi-r-carte); padding: 14px; color: var(--dpi-encre);
transition: border-color .15s;
}
.eb-carte-type:hover { border-color: var(--dpi-bleu); }
.eb-carte-type > * { margin: 0 !important; }
.eb-carte-type .wp-block-image, .eb-carte-type figure { margin: 0 0 4px !important; }
.eb-carte-type img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--dpi-r-champ) !important; background: var(--dpi-eau); }
.eb-carte-type :is(h2, h3) { font-family: var(--dpi-titres); font-size: 19px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.entry-content .eb-carte-type :is(h2, h3) a { color: var(--dpi-encre); text-decoration: none; }
.eb-carte-type :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; border-radius: var(--dpi-r-carte); }
.eb-carte-type :is(h2, h3) a:focus-visible { outline: 0; }
.eb-carte-type:has(a:focus-visible) { outline: 3px solid var(--dpi-bleu); outline-offset: 2px; }
.eb-carte-type p:not(.eb-carte-nom, .eb-carte-prix, .eb-carte-lien) { font-size: 15px; line-height: 1.5; color: var(--dpi-texte); }
.eb-carte-type p.eb-carte-prix:not(:nth-child(2)) { font-weight: 600; color: var(--dpi-bleu); }
/* H6. Final band (eb-appel-final, and eb-bandeau-final of the home content): deep blue, white title,
clear-water line, quote button on the right. */
.entry-content :is(.eb-appel-final, .eb-bandeau-final) {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 32px; align-items: center;
background: var(--dpi-bleu); color: #FFFFFF; border-radius: var(--dpi-r-bande); padding: 32px 36px; margin: 48px 0;
}
:is(.eb-appel-final, .eb-bandeau-final) > * { margin: 0 !important; }
:is(.eb-appel-final, .eb-bandeau-final) :is(h2, h3, p:first-child) { grid-column: 1; color: #FFFFFF; font-family: var(--dpi-titres); font-weight: 800; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; }
:is(.eb-appel-final, .eb-bandeau-final) p:not(:first-child) { grid-column: 1; color: var(--dpi-eau-texte); font-size: 16px; }
:is(.eb-appel-final, .eb-bandeau-final) .wp-block-buttons { grid-column: 2; grid-row: 1 / span 2; }
/* In the text column the band stacks (board 07). */
:is(.eb-gabarit-outil, .eb-gabarit-guide, .eb-gabarit-article) .entry-content > .eb-appel-final.eb-appel-colonne { grid-template-columns: 1fr; text-align: center; max-width: var(--dpi-colonne); }
.eb-appel-final.eb-appel-colonne .wp-block-buttons { grid-column: 1; grid-row: auto; justify-content: center; }
/* H7. Steps 1-2-3 (home "Comment ça marche"): numbered blue discs. */
.eb-etapes { list-style: none; counter-reset: dpi-etape; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 0; margin: 22px 0; }
.eb-etapes > li { counter-increment: dpi-etape; display: flex; flex-direction: column; gap: 6px; font-size: 16px; }
.eb-etapes > li::before {
content: counter(dpi-etape); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 4px;
border-radius: 999px; background: var(--dpi-bleu); color: #FFFFFF; font: 800 20px/1 var(--dpi-titres);
}
.eb-etapes > li strong { font-size: 19px; font-weight: 700; color: var(--dpi-encre); }
/* Same steps from plain Columns whose paragraphs start with "1. ", "2. "... (functions.php section 9 adds the class and the disc). */
.entry-content .eb-etapes-colonnes { gap: 24px; margin: 22px 0 28px; }
.eb-etapes-colonnes .wp-block-column p { margin: 0; font-size: 16px; line-height: 1.55; }
.eb-etapes-colonnes .wp-block-column strong { font-size: 19px; font-weight: 700; color: var(--dpi-encre); }
.eb-etape-num {
display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 12px;
border-radius: 999px; background: var(--dpi-bleu); color: #FFFFFF; font: 800 20px/1 var(--dpi-titres);
}
/* H8. Trust points: white card, four columns, icon in a clear-water square.
Content markup: Columns "eb-confiance", one "title
text" paragraph per column. */
.entry-content .eb-confiance { background: var(--dpi-blanc); border: 1px solid var(--dpi-bord); border-radius: var(--dpi-r-carte); padding: 32px; }
.entry-content .eb-confiance.wp-block-columns { gap: 20px; }
.eb-confiance > .wp-block-columns { gap: 20px; margin: 0; }
.eb-confiance .wp-block-column p { font-weight: 400; font-size: 15px; line-height: 1.5; color: var(--dpi-texte); }
.eb-confiance .wp-block-column p strong { font-size: 16px; font-weight: 700; color: var(--dpi-encre); }
.eb-confiance .wp-block-column { position: relative; padding-left: 56px; font-size: 15px; }
.eb-confiance .wp-block-column::before {
content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 10px;
background: var(--dpi-eau) url("assets/icons/gratuit.svg") center / 22px no-repeat;
}
.eb-confiance .wp-block-column:nth-child(2)::before { background-image: url("assets/icons/bouclier.svg"); }
.eb-confiance .wp-block-column:nth-child(3)::before { background-image: url("assets/icons/horloge.svg"); }
.eb-confiance .wp-block-column:nth-child(4)::before { background-image: url("assets/icons/cadenas.svg"); }
.eb-confiance .wp-block-column > * { margin: 0; }
.eb-confiance > .wp-block-columns .wp-block-column > :first-child { font-weight: 700; font-size: 17px; color: var(--dpi-encre); }
/* H9. Family heading above a card grid (home: "Piscines hors-sol", "Piscines creusées"): a class, or any H3 right before cards. */
.entry-content :is(.eb-famille-titre, h3:has(+ .eb-cartes)) { margin: 28px 0 0; font-family: var(--dpi-titres); font-size: 22px; font-weight: 700; color: var(--dpi-bleu); letter-spacing: 0; }
.entry-content :is(.eb-famille-titre, h3:has(+ .eb-cartes)) a { color: inherit; text-decoration: none; }
.entry-content :is(.eb-famille-titre, h3:has(+ .eb-cartes)) a:hover { text-decoration: underline; }
.entry-content h3:has(+ .eb-cartes) + .eb-cartes { margin-top: 14px; }
/* H10. Latest posts block (home "Derniers articles du blog"): white cards like the type cards, image 16:9. */
.entry-content .wp-block-latest-posts.is-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 18px 0 0; padding: 0; list-style: none; }
.entry-content .wp-block-latest-posts.is-grid > li {
position: relative; display: flex; flex-direction: column; gap: 10px; width: auto !important; margin: 0 !important;
background: var(--dpi-blanc); border: 1px solid var(--dpi-bord); border-radius: var(--dpi-r-carte); padding: 14px; transition: border-color .15s;
}
.entry-content .wp-block-latest-posts.is-grid > li:hover { border-color: var(--dpi-bleu); }
.entry-content .wp-block-latest-posts__featured-image { margin: 0; }
.entry-content .wp-block-latest-posts__featured-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--dpi-r-champ); background: var(--dpi-eau); }
.entry-content .wp-block-latest-posts__post-title { font-family: var(--dpi-titres); font-size: 19px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; color: var(--dpi-encre); text-decoration: none; }
.entry-content .wp-block-latest-posts__post-title:hover { color: var(--dpi-bleu); }
.entry-content .wp-block-latest-posts__post-title::after { content: ""; position: absolute; inset: 0; border-radius: var(--dpi-r-carte); }
.entry-content .wp-block-latest-posts :is(.wp-block-latest-posts__post-date, .wp-block-latest-posts__post-author) { font-size: 14px; color: var(--dpi-discret); }
/* -------------------------------------------------------------------------
I. Table of contents (LuckyWP): clear-water box, no numbers, beside the text on large screens.
------------------------------------------------------------------------- */
.entry-content .lwptoc { margin: 0 0 36px; }
.entry-content .lwptoc .lwptoc_i {
display: block; width: 100%; box-sizing: border-box; padding: 16px 20px 18px;
background: var(--dpi-eau); border: 0; border-radius: var(--dpi-r-encadre); color: var(--dpi-texte); text-align: left;
}
.entry-content .lwptoc .lwptoc_header { margin-bottom: 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.entry-content .lwptoc .lwptoc_title { font-family: var(--dpi-corps); font-weight: 700; font-size: 17px; color: var(--dpi-encre); }
.entry-content .lwptoc .lwptoc_toggle { font-size: 14px; }
.entry-content .lwptoc .lwptoc_toggle a, .entry-content .lwptoc .lwptoc_toggle_label { color: var(--dpi-bleu); }
.entry-content .lwptoc .lwptoc_items { font-size: 16px; line-height: 1.5; }
.entry-content .lwptoc .lwptoc_item { margin-top: 6px; }
.entry-content .lwptoc .lwptoc_item a { color: var(--dpi-bleu); text-decoration: underline; text-underline-offset: 2px; }
.entry-content .lwptoc .lwptoc_item a:hover { color: var(--dpi-encre); }
@media (min-width: 1100px) {
:is(.eb-gabarit-outil, .eb-gabarit-guide) .entry-content > .lwptoc {
float: right; width: 340px; margin: 0 0 32px 48px; max-width: none;
}
:is(.eb-gabarit-outil, .eb-gabarit-guide) .entry-content > :is(.alignwide, .alignfull, .eb-cartes, .eb-estimateur) { clear: both; }
:is(.eb-gabarit-outil, .eb-gabarit-guide) .entry-content::after { content: ""; display: table; clear: both; }
}
/* -------------------------------------------------------------------------
J. Tables (comparisons): header in deep blue, first column bold, horizontal scroll on small screens.
------------------------------------------------------------------------- */
.entry-content .wp-block-table { margin: 24px 0 32px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--dpi-bord); border-radius: var(--dpi-r-carte); background: var(--dpi-blanc); }
.entry-content .wp-block-table table { width: 100%; border-collapse: collapse; border: 0; font-size: 15px; }
.entry-content .wp-block-table :is(th, td) { padding: 10px 12px; border: 0; border-bottom: 1px solid var(--dpi-bord); text-align: left; vertical-align: top; }
.entry-content .wp-block-table thead :is(th, td) { background: var(--dpi-bleu); color: #FFFFFF; font-weight: 700; font-size: 14px; border-bottom: 0; }
.entry-content .wp-block-table tbody tr:last-child td { border-bottom: 0; }
.entry-content .wp-block-table tbody td:first-child { font-weight: 700; color: var(--dpi-encre); }
.entry-content .wp-block-table figcaption { padding: 8px 12px; font-size: 13px; color: var(--dpi-discret); text-align: left; margin: 0; }
.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--dpi-fond); }
.eb-en-bref .wp-block-table, .eb-prix-moyens .wp-block-table { border: 0; border-radius: 0; background: transparent; overflow: visible; }
.eb-en-bref .wp-block-table tbody td:first-child, .eb-prix-moyens .wp-block-table tbody td:first-child { font-weight: 400; color: var(--dpi-texte); }
/* FAQ with the core Details block. */
.entry-content .wp-block-details { border-bottom: 1px solid var(--dpi-bord); margin: 0; padding: 0; }
.entry-content .wp-block-details:first-of-type { border-top: 1px solid var(--dpi-bord); }
.entry-content .wp-block-details summary { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; font-size: 17px; color: var(--dpi-encre); cursor: pointer; list-style: none; }
.entry-content .wp-block-details summary::-webkit-details-marker { display: none; }
.entry-content .wp-block-details summary::after { content: "+"; font: 700 22px/1 var(--dpi-titres); color: var(--dpi-bleu); }
.entry-content .wp-block-details[open] summary::after { content: "−"; }
.entry-content .wp-block-details > :not(summary) { margin: 0 0 14px; font-size: 16px; }
/* -------------------------------------------------------------------------
K. Footer (board 15 bottom): brand column + five link columns, bottom line with the partner sentence.
------------------------------------------------------------------------- */
/* Six columns: brand wider, then five link columns (Blocksy has no preset for this split). */
@media (min-width: 1000px) {
.ct-footer [data-row="middle"] .ct-container { grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr)) !important; column-gap: 32px; }
}
.ct-footer .eb-pied-marque { display: flex; flex-direction: column; gap: 12px; color: var(--dpi-eau-texte); font-size: 15px; }
.ct-footer .eb-pied-marque img { width: 210px; height: auto; display: block; }
.ct-footer .eb-pied-marque p { margin: 0; }
.ct-footer .eb-pied-etiquette {
align-self: flex-start; display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 6px;
background: #FFFFFF; color: var(--dpi-bleu); font-weight: 700; font-size: 13px; letter-spacing: .04em;
}
.ct-footer .eb-pied-titre { margin: 0 0 8px; font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dpi-or); }
.ct-footer .eb-pied-liens { list-style: none; margin: 0; padding: 0; }
.ct-footer .eb-pied-liens li { margin: 0; line-height: 1.45; padding: 4px 0; }
.ct-footer .eb-pied-liens a { color: #FFFFFF; text-decoration: none; font-size: 15px; }
.ct-footer .eb-pied-liens a:hover, .ct-footer .eb-pied-liens a:focus-visible { color: var(--dpi-or); text-decoration: underline; }
.ct-footer [data-row="bottom"] { color: var(--dpi-eau-texte); font-size: 14px; }
.ct-footer .eb-pied-mention { display: block; max-width: 900px; }
.ct-footer .eb-pied-legal { display: inline-flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px; }
.ct-footer .eb-pied-legal a { color: #FFFFFF; text-decoration: none; }
.ct-footer .eb-pied-legal a:hover { color: var(--dpi-or); text-decoration: underline; }
/* -------------------------------------------------------------------------
L. Blog archive (board 13): white cards, image 16:9, date, H2 22 px, excerpt.
------------------------------------------------------------------------- */
.entries[data-layout="grid"] .entry-card { background: var(--dpi-blanc); border: 1px solid var(--dpi-bord); border-radius: var(--dpi-r-carte); padding: 14px; }
.entries[data-layout="grid"] .entry-card .ct-media-container { border-radius: var(--dpi-r-champ); overflow: hidden; }
.entries[data-layout="grid"] .entry-card .entry-title { font-size: 22px; line-height: 1.25; }
.entries[data-layout="grid"] .entry-card .entry-title a { color: var(--dpi-encre); text-decoration: none; }
.entries[data-layout="grid"] .entry-card .entry-meta { font-size: 14px; color: var(--dpi-discret); }
/* Archive head (board 13): H1 at the page size, intro on the text column. */
body.category-blog .hero-section .page-title { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.1; }
body.category-blog .hero-section .page-description { max-width: 720px; }
/* -------------------------------------------------------------------------
M. Small screens (boards 05, 08): 20 px margins, stacked columns, cards as a list with the image on the left.
------------------------------------------------------------------------- */
@media (max-width: 999.98px) {
.eb-cartes { --eb-cartes-colonnes: 2 !important; }
.entry-content :is(.eb-appel-final, .eb-bandeau-final) { grid-template-columns: 1fr; gap: 12px; padding: 24px 20px; text-align: left; }
:is(.eb-appel-final, .eb-bandeau-final) .wp-block-buttons { grid-column: 1; grid-row: auto; margin-top: 6px !important; }
.eb-etapes { grid-template-columns: 1fr; }
.entry-content .wp-block-latest-posts.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 781.98px) {
.eb-heros > .wp-block-columns { gap: 24px; }
.entry-content .eb-etapes-colonnes { gap: 20px; }
}
@media (max-width: 689.98px) {
/* phone header: logo, "Mes 3 devis" and the trigger on one line at 360-390 px (34 px logo pushed the button over it) */
[data-header] .ct-header [data-device="mobile"] [data-id="logo"] .site-logo-container { --logo-max-height: 26px; }
.entry-content > .eb-heros { padding: 28px 0 32px; }
.eb-heros h1 { margin-top: 0; }
.eb-heros .wp-block-column:first-child > p:not(.has-small-font-size) { font-size: 17px; }
.eb-prix-moyens > .wp-block-columns { flex-direction: column; align-items: flex-start; gap: 2px; }
.eb-prix-moyens > .wp-block-columns > .wp-block-column:last-child { text-align: left; }
.eb-carte-type .eb-carte-image { grid-row: 1 / span 4; margin: 0 !important; }
.eb-carte-type > :not(.eb-carte-image, figure) { grid-column: 2; }
.eb-carte-type .eb-carte-image img { aspect-ratio: 16 / 9; }
.eb-carte-type .eb-carte-nom { font-size: 18px; }
.eb-carte-type :is(.eb-carte-ligne, .eb-carte-prix, .eb-carte-lien) { font-size: 14px; }
.eb-carte-type p.eb-carte-prix { margin-top: 2px !important; }
.entry-content .wp-block-latest-posts.is-grid { grid-template-columns: 1fr; gap: 12px; }
.entry-content .wp-block-latest-posts.is-grid > li { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 12px; }
.entry-content .wp-block-latest-posts__featured-image img { aspect-ratio: 16 / 9; }
.entry-content .wp-block-latest-posts__post-title { font-size: 17px; }
.entry-content .eb-bande-sable.alignfull { padding: 28px 20px; }
.eb-bande-sable .eb-chapo { font-size: 17px; }
.eb-bande-sable h1 { margin-top: 0; }
.eb-cartes { grid-template-columns: 1fr !important; gap: 12px; }
.eb-carte-type { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: start; padding: 12px; }
.eb-carte-type .wp-block-image, .eb-carte-type figure { grid-row: 1 / span 3; margin: 0 !important; }
.eb-carte-type img { aspect-ratio: 16 / 9; } /* wide scenes stay whole on phones */
.eb-carte-type :is(h2, h3) { font-size: 18px; }
.eb-carte-type p { font-size: 14px; }
.eb-confiance { padding: 20px; }
.eb-prix-moyens li { flex-direction: column; align-items: flex-start; gap: 2px; }
.eb-prix-moyens li strong, .eb-prix-moyens li b { order: 0; }
.eb-arnaque { padding: 14px 16px 14px 48px; }
.eb-arnaque::before { left: 14px; top: 15px; }
.entry-content .wp-block-table table { min-width: 560px; }
.ct-footer [data-row="middle"] .ct-container { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 20px; }
.ct-footer [data-row="middle"] [data-column="widget-area-1"] { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .eb-carte-type { transition: none; } }