/*
Theme Name: Le Rondier
Theme URI: https://lerondier.fr
Author: Le Rondier
Description: Thème bloc sur mesure pour lerondier.fr : contrôle de ronde sur boîtier ou smartphone, main courante informatique, boutique WooCommerce. Après activation : Apparence › Installer Le Rondier.
Version: 1.2.1
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lerondier
Tags: block-theme, full-site-editing, e-commerce, one-column
*/

/* ==========================================================================
   Le Rondier — feuille du thème.
   Poste de commande imprimé : cartes blanches sur fond vélin, sections
   alternées papier / vélin, grille 1200px, un seul signal vermillon réservé
   aux actions et aux alertes.
   Les classes sont posées sur les blocs via className : le sélecteur écrit
   pour la maquette fonctionne sur figure.wp-block-image, div.wp-block-group…
   ========================================================================== */

:root {
  --bg: #f5f5f5;
  --surface: #ffffff;
  --carbon: #1f1f1f;
  --ink: #101828;
  --text-2: #364153;
  --text-3: #4a5565;
  --steel: #676767;
  --muted: #99a1af;
  --cloud: #d4d4d4;
  --frost: #e5e7eb;
  --accent: #e42b0c;
  --accent-grad: linear-gradient(94deg, #ff0201 -33.85%, #ff7802 -1.54%, #ff0201 73.55%);
  --on-carbon: #f5f5f5;
  --on-carbon-2: #a3a3a3;
  --carbon-line: #3a3a3a;
  --shadow: rgba(0,0,0,.1) 0 1px 3px 0, rgba(0,0,0,.1) 0 1px 2px -1px;
  --font: "Hanken Grotesk", "Söhne", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --r: 8px;
  --pad: 32px;
}

/* ——— Base ——— */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--bg); color: var(--text-3); font-family: var(--font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; } /* height:auto obligatoire, sinon l'attribut height des blocs image l'emporte */
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
a { color: inherit; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--r); }

/* Espacement automatique de Gutenberg : coupé dans theme.json (blockGap 0px),
   filet de sécurité ici à spécificité nulle — jamais en .wp-block-group > *. */
:where(.wp-block-group) > :where(*), :where(.wp-block-buttons) { margin-block: 0; }
figure.wp-block-image { margin: 0; }
:where(.wp-block-list.hero-meta, .wp-block-list.band-list, .wp-block-list.dash-list, .wp-block-list.checks, .wp-block-list.pills,
  .wp-block-list.specs, .wp-block-list.pack-specs, .wp-block-list.promise, .wp-block-list.tl-axis, .wp-block-list.foot-links) {
  list-style: none; padding: 0; margin: 0;
}

.wrap { max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
@media (max-width: 480px) { .wrap { padding-inline: 16px; } }

/* ——— Typographie ——— */
.eyebrow, .badge, .tag, .chip, .live { text-transform: uppercase; letter-spacing: .025em; font-feature-settings: "case" 1; }
.eyebrow { font-size: 12px; font-weight: 500; color: var(--text-3); }
.badge { display: inline-flex; width: fit-content; align-items: center; border: 1px solid var(--cloud); border-radius: var(--r); padding: 4px 12px; font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--text-3); }
h1, .wp-block-heading:is(h1) { font-weight: 300; font-size: clamp(42px, 6.2vw, 72px); line-height: 1; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; hyphens: none; }
.hero.sub h1, .page-head h1 { font-size: clamp(40px, 5.4vw, 64px); }
h1 strong, h2 strong { font-weight: 500; }
h2 { font-weight: 300; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.08; letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
h3 { font-weight: 400; font-size: 24px; line-height: 1.38; color: var(--ink); text-wrap: balance; }
h4 { font-weight: 500; font-size: 18px; line-height: 1.4; color: var(--ink); }
.lede { font-size: 18px; line-height: 1.5; color: var(--text-3); max-width: 60ch; }
.mono { font-family: var(--mono); font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.for { font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.small { font-size: 14px; }
.muted { color: var(--text-3); }
.small a, .muted a { color: var(--ink); }

/* ——— Boutons (classe sur div.wp-block-button, style sur le lien) ——— */
.wp-block-buttons.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.wp-block-button[class*="btn-"] { display: inline-block; background: none; border: 0; padding: 0; border-radius: 0; }
.wp-block-button[class*="btn-"] .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap;
  padding: 16px 24px; border-radius: var(--r); border: 1px solid transparent;
  font: 500 14px/1 var(--font); letter-spacing: .025em; text-transform: uppercase; text-decoration: none; font-feature-settings: "case" 1;
  transition: filter .15s ease, border-color .15s ease, color .15s ease;
}
.wp-block-button.btn-primary .wp-block-button__link { background: var(--accent); color: #fff; }
.wp-block-button.btn-primary .wp-block-button__link::after { content: "→"; font-size: 16px; transition: transform .15s ease; }
.wp-block-button.btn-primary .wp-block-button__link:hover { filter: brightness(1.08); }
.wp-block-button.btn-primary .wp-block-button__link:hover::after { transform: translateX(3px); }
.wp-block-button.btn-dark .wp-block-button__link { background: var(--carbon); color: var(--on-carbon); }
.wp-block-button.btn-dark .wp-block-button__link:hover { filter: brightness(1.35); }
.wp-block-button.btn-ghost .wp-block-button__link { background: transparent; color: var(--text-2); border-color: var(--cloud); padding: 12px 20px; }
.wp-block-button.btn-ghost .wp-block-button__link:hover { border-color: var(--ink); color: var(--ink); }
.wp-block-button.btn-grad .wp-block-button__link { background: var(--accent-grad); color: #fff; font-weight: 600; padding: 12px 20px; }
.wp-block-button.btn-grad .wp-block-button__link:hover { filter: brightness(1.06); }
.mx-btn .wp-block-button[class*="btn-"] .wp-block-button__link,
.pack-btn .wp-block-button[class*="btn-"] .wp-block-button__link { padding: 10px 14px; font-size: 12px; }

/* ——— En-tête ——— */
header.wp-block-template-part { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50; }
.nav { background: var(--surface); border-bottom: 1px solid var(--frost); }
.nav-in { height: 64px; display: flex; align-items: center; gap: 28px; }
.brand { font-weight: 700; font-size: 21px; letter-spacing: -.025em; color: var(--ink); white-space: nowrap; }
.brand a { text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.brand a::before { content: "R"; width: 26px; height: 26px; border-radius: var(--r); background: var(--carbon); color: var(--on-carbon); display: grid; place-items: center; font: 600 14px/1 var(--mono); }
/* Le menu ne rétrécit ni ne passe jamais sur plusieurs lignes : sous 1120 px, il bascule en burger. */
.wp-block-navigation.nav-links { margin-inline: auto; gap: 22px; flex: 0 0 auto; }
.wp-block-navigation.nav-links .wp-block-navigation__container { display: flex; flex-wrap: nowrap; gap: 22px; list-style: none; margin: 0; padding: 0; }
.wp-block-navigation.nav-links .wp-block-navigation-item__content {
  font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .025em; color: var(--text-2);
  text-decoration: none; padding-block: 21px; border-bottom: 2px solid transparent; white-space: nowrap;
}
.wp-block-navigation.nav-links .wp-block-navigation-item__content:hover { color: var(--ink); }
.wp-block-navigation.nav-links .est-courant > .wp-block-navigation-item__content { color: var(--ink); border-bottom-color: var(--ink); }
.wp-block-buttons.nav-cta { display: flex; gap: 8px; flex-wrap: nowrap; }
/* Panneau mobile : le CSS du bloc est imprimé après cette feuille, d'où la qualification et !important. */
.wp-block-navigation.nav-links .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--surface) !important; color: var(--ink) !important; padding: 24px; }
.wp-block-navigation.nav-links .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 20px; padding-block: 10px; border: 0; color: var(--ink); }
/* WooCommerce insère ses icônes compte et panier après le menu (blocs « hookés ») : on les garde, compactes. */
.nav-in > .wp-block-woocommerce-customer-account, .nav-in > .wp-block-woocommerce-mini-cart { flex: none; }
@media (max-width: 1120px) {
  .wp-block-navigation.nav-links .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .wp-block-navigation.nav-links .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
  .wp-block-navigation.nav-links { order: 3; margin-inline: 0; }
  .nav-in > .brand { margin-right: auto; }
  .nav-cta .wp-block-button.btn-ghost { display: none; }
}
/* Téléphone : le bouton démo cède la place (le lien Contact reste dans le menu). On masque le conteneur core/buttons. */
@media (max-width: 600px) {
  .nav-in { gap: 16px; }
  .wp-block-buttons.nav-cta { display: none; }
}

/* ——— Pied de page ——— */
.foot { background: var(--carbon); color: var(--on-carbon-2); padding-block: 64px 32px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
@media (max-width: 800px) { .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .foot-grid > :first-child { grid-column: 1 / -1; } }
.foot .brand { color: var(--on-carbon); }
.foot .brand a::before { background: var(--on-carbon); color: var(--carbon); }
.foot-about p + p { margin-top: 12px; font-size: 15px; max-width: 38ch; }
.foot-h { margin-bottom: 12px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .025em; color: var(--on-carbon); }
.foot-links { display: grid; gap: 8px; font-size: 15px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--on-carbon); }
.legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--carbon-line); margin-top: 48px; padding-top: 24px; font-size: 14px; }

/* ——— Héros ——— */
.hero-sec { padding-block: 24px 64px; }
.hero { background: var(--surface); border: 1px solid var(--frost); border-radius: var(--r); box-shadow: var(--shadow); display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); gap: 56px; align-items: center; padding: 64px 48px; }
.hero-copy { display: grid; gap: 24px; justify-items: start; min-width: 0; }
.hero-copy .lede { max-width: 500px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--text-3); padding-top: 8px; }
.hero-meta li { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta li::before { content: ""; width: 16px; height: 16px; flex: none; background: var(--ink); -webkit-mask: var(--ico-check) center / contain no-repeat; mask: var(--ico-check) center / contain no-repeat; }
@media (max-width: 960px) { .hero { grid-template-columns: minmax(0, 1fr); padding: 48px 32px; gap: 48px; } }
@media (max-width: 480px) { .hero { padding: 32px 20px; } }
.page-head { padding-block: 64px 48px; display: grid; gap: 20px; justify-items: start; }
.page-head .lede { max-width: 680px; }

/* ——— Console de ronde (panneau carbone) ——— */
.visual { position: relative; min-width: 0; }
.console { background: var(--carbon); color: var(--on-carbon); border-radius: var(--r); padding: 24px; display: grid; gap: 20px; }
.console:has(+ .logcard) { padding-bottom: 60px; }
.console-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.console .k { font-family: var(--mono); font-size: 12px; color: var(--on-carbon-2); letter-spacing: .025em; }
.console .t { font-size: 18px; font-weight: 500; color: var(--on-carbon); }
.live { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; border: 1px solid var(--carbon-line); border-radius: var(--r); padding: 4px 10px; color: var(--on-carbon); }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
.ri { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 14px; position: relative; padding-bottom: 16px; }
.ri:last-child { padding-bottom: 0; }
.ri::before { content: ""; width: 28px; height: 28px; border-radius: 50%; position: relative; z-index: 1; display: grid; place-items: center; font: 600 13px/1 var(--mono); }
.ri::after { content: ""; position: absolute; left: 13px; top: 24px; bottom: 0; width: 2px; background: var(--on-carbon-2); }
.ri.next::after, .ri.todo::after { background: repeating-linear-gradient(to bottom, var(--carbon-line) 0 4px, transparent 4px 8px); }
.ri:last-child::after { display: none; }
.ri.ok::before { background: var(--on-carbon) var(--chk-dark) center / 14px no-repeat; }
.ri.alert::before { content: "!"; background: var(--accent); color: #fff; }
.ri.next::before { background: var(--carbon); border: 2px solid var(--accent); animation: ring 1.8s ease-out infinite; }
.ri.todo::before { background: var(--carbon); border: 2px solid var(--carbon-line); }
.ri-t { font-size: 15px; color: var(--on-carbon); line-height: 1.35; padding-top: 3px; }
.ri-s { font-family: var(--mono); font-size: 12px; color: var(--on-carbon-2); margin-top: 2px; }
.ri.alert .ri-s { color: var(--on-carbon); }
.ri-tm { font-family: var(--mono); font-size: 13px; color: var(--on-carbon-2); padding-top: 5px; font-variant-numeric: tabular-nums; }
.ri.ok .ri-tm, .ri.alert .ri-tm { color: var(--on-carbon); }
.console-foot { border-top: 1px solid var(--carbon-line); padding-top: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 12px; font-family: var(--mono); font-size: 12px; color: var(--on-carbon-2); }
.console-foot::before { content: ""; flex-basis: 100%; height: 4px; border-radius: var(--r); background: linear-gradient(to right, var(--on-carbon) 60%, var(--carbon-line) 60%); }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(228, 43, 12, .6); } 100% { box-shadow: 0 0 0 8px rgba(228, 43, 12, 0); } }

.logcard { position: relative; margin: -36px 0 0 56px; background: var(--surface); border: 1px solid var(--frost); border-radius: var(--r); box-shadow: var(--shadow); padding: 16px 20px; }
.logcard-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--frost); }
.lc-t { font-size: 14px; font-weight: 500; color: var(--ink); }
.lc-d { font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.ml-row { display: grid; grid-template-columns: 44px 108px minmax(0, 1fr); gap: 10px; align-items: baseline; padding-block: 9px; border-bottom: 1px solid var(--frost); font-size: 14px; color: var(--text-2); }
.ml-row:last-child { border-bottom: 0; padding-bottom: 0; }
@media (max-width: 600px) {
  .console:has(+ .logcard) { padding-bottom: 24px; }
  .logcard { margin: 16px 0 0; }
  .ml-row { grid-template-columns: 44px minmax(0, 1fr); }
  .ml-row > :not(:first-child) { grid-column: 2; }
}
.tag { display: inline-block; width: fit-content; justify-self: start; font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--text-3); border: 1px solid var(--cloud); border-radius: var(--r); padding: 1px 8px; white-space: nowrap; }
.tag.incident { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* ——— Application main courante ——— */
.app { background: var(--surface); border: 1px solid var(--frost); border-radius: var(--r); box-shadow: var(--shadow); min-width: 0; overflow: hidden; }
.app-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--frost); }
.app-t { color: var(--ink); font-weight: 500; font-size: 15px; }
.app-d { font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--frost); background: var(--bg); }
.chip { font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--text-2); background: var(--surface); border: 1px solid var(--cloud); border-radius: var(--r); padding: 5px 10px; cursor: pointer; user-select: none; }
.chip strong { font-weight: 400; font-family: var(--mono); color: var(--muted); margin-left: 4px; }
.chip.est-actif { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.chip.est-actif strong { color: var(--surface); opacity: .7; }
.log-row { display: grid; grid-template-columns: 52px 104px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 13px 20px; border-bottom: 1px solid var(--frost); font-size: 15px; color: var(--text-2); }
.log-row:last-child { border-bottom: 0; }
.log-row.est-masque { display: none; }
.who { font-family: var(--mono); font-size: 12px; color: var(--text-3); margin-top: 2px; }
.app-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--frost); font-family: var(--mono); font-size: 12px; color: var(--text-3); background: var(--bg); }
@media (max-width: 520px) { .log-row { grid-template-columns: 52px minmax(0, 1fr); } .log-row > :not(:first-child) { grid-column: 2; } }

/* ——— Bandeau ——— */
.band { background: var(--surface); border-block: 1px solid var(--frost); padding-block: 40px; }
.band-in { display: grid; gap: 20px; }
.band-list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px; }
.band-list li { font-size: 17px; font-weight: 500; color: var(--text-2); display: inline-flex; align-items: center; gap: 10px; letter-spacing: -.025em; }
.band-list li::before { content: "*"; font-size: 22px; line-height: 1; color: var(--muted); transform: translateY(3px); }

/* ——— Sections ——— */
.sec { padding-block: 96px; }
.sec.paper { background: var(--surface); border-block: 1px solid var(--frost); }
.sec.tight { padding-top: 0; }
@media (max-width: 720px) { .sec { padding-block: 64px; } }
.sec-head { display: grid; gap: 16px; margin-bottom: 56px; max-width: 760px; justify-items: start; }
.sec-head .lede { max-width: 640px; }
.actions.after-matrix { margin-top: 32px; }

.grid-2, .grid-4, .packs, .pts { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.packs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
@media (max-width: 1000px) { .grid-4, .packs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .grid-4, .packs, .pts { grid-template-columns: minmax(0, 1fr); } }

/* Cartes */
.card { background: var(--surface); border: 1px solid var(--frost); border-radius: var(--r); box-shadow: var(--shadow); padding: var(--pad); display: flex; flex-direction: column; gap: 16px; min-width: 0; position: relative; }
.card.flat { box-shadow: none; }
.card.lg { --pad: 40px; }
@media (max-width: 480px) { .card, .card.lg { --pad: 24px; } }
.card p { font-size: 16px; }
.card-foot { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--frost); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.tarif { font-size: 14px; color: var(--text-3); }
.tarif strong { font-weight: 400; font-size: 24px; letter-spacing: -.025em; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Pictogrammes : boîte en ::before, icône en masque sur ::after */
.ico-card::before, .pt-item::before, .hair-item::before { content: ""; width: 44px; height: 44px; flex: none; border: 1px solid var(--frost); border-radius: var(--r); }
.ico-card::after, .pt-item::after, .hair-item::after { content: ""; position: absolute; width: 24px; height: 24px; background: var(--text-3); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ico-card::after { top: calc(var(--pad) + 10px); left: calc(var(--pad) + 10px); }
.pt-item { display: grid; gap: 10px; align-content: start; position: relative; }
.pt-item::before { margin-bottom: 6px; }
.pt-item::after { top: 10px; left: 10px; }
.pt-item h3 { font-size: 20px; line-height: 1.4; }

.dash-list { display: grid; gap: 6px; font-size: 15px; color: var(--text-2); border-top: 1px solid var(--frost); padding-top: 16px; }
.dash-list li { display: flex; gap: 8px; }
.dash-list li::before { content: "—"; color: var(--muted); }
.checks { display: grid; gap: 14px; }
.checks li { position: relative; padding-left: 34px; font-size: 16px; color: var(--text-2); }
.checks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; background: var(--ink); -webkit-mask: var(--ico-check) center / contain no-repeat; mask: var(--ico-check) center / contain no-repeat; }
.checks li strong { color: var(--ink); font-weight: 500; }
.card .checks li { font-size: 15px; }

/* Liste à filets */
.hair { border-bottom: 1px solid var(--frost); }
.hair-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding-block: 20px; border-top: 1px solid var(--frost); position: relative; }
.hair-item > * { grid-column: 2; }
.hair-item::before { grid-column: 1; grid-row: 1 / span 2; }
.hair-item::after { top: 30px; left: 10px; }
.hair-item h4 { margin-bottom: 4px; }
.hair-item p { font-size: 15px; }
.hair.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; border-bottom: 0; }
.hair.cols > .hair-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--frost); }
@media (max-width: 760px) { .hair.cols { grid-template-columns: minmax(0, 1fr); } .hair.cols > .hair-item:nth-last-child(2) { border-bottom: 0; } }

/* Split */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.split.top { align-items: start; }
@media (max-width: 960px) { .split { grid-template-columns: minmax(0, 1fr); gap: 48px; } }
.split-copy { display: grid; gap: 24px; justify-items: start; min-width: 0; }
.sticky-head { position: sticky; top: 96px; }
@media (max-width: 960px) { .sticky-head { position: static; } }

/* Matrice support × mode */
.matrix { display: grid; grid-template-columns: 180px repeat(2, minmax(0, 1fr)); gap: 12px; }
.mx-c2 { grid-column: 2; }
.mx-c3 { grid-column: 3; }
.mx-h, .mx-r { position: relative; padding-left: 36px; font-size: 14px; color: var(--text-3); line-height: 1.4; }
.mx-h strong, .mx-r strong { display: block; font-size: 18px; font-weight: 500; color: var(--ink); }
.mx-h::before, .mx-r::before { content: ""; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; background: var(--ink); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.mx-h { align-self: end; padding-bottom: 8px; }
.mx-r { padding-top: 24px; }
.mx-cell { background: var(--surface); border: 1px solid var(--frost); border-radius: var(--r); box-shadow: var(--shadow); padding: 24px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mx-cell h3 { font-size: 22px; }
.mx-cell p { font-size: 15px; }
.mx-cell .for { display: none; }
.mx-cell.na { background: transparent; box-shadow: none; border: 1px dashed var(--cloud); justify-content: center; }
.mx-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--frost); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 860px) { .matrix { grid-template-columns: minmax(0, 1fr); } .mx-h, .mx-r { display: none; } .mx-cell .for { display: block; } }

/* Étapes */
.steps { display: grid; gap: 32px; }
.steps.s4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps.s5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.step { display: grid; gap: 12px; align-content: start; position: relative; padding-top: 32px; }
.step::before { content: ""; position: absolute; top: 7px; left: 0; right: -32px; height: 2px; background: var(--frost); }
.steps.s5 .step::before { right: -24px; }
.step:last-child::before { right: 0; }
.step::after { content: ""; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--ink); }
.sec.paper .step::after { background: var(--surface); }
.step .n { font-family: var(--mono); font-size: 13px; color: var(--text-3); }
.step h3 { font-size: 20px; line-height: 1.4; }
.step p { font-size: 15px; }
@media (max-width: 1000px) { .steps.s4, .steps.s5 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; } .step::before, .steps.s5 .step::before { right: 0; } }
@media (max-width: 560px) { .steps.s4, .steps.s5 { grid-template-columns: minmax(0, 1fr); } }

.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills li { border: 1px solid var(--cloud); border-radius: var(--r); padding: 10px 16px; font-size: 16px; color: var(--ink); background: var(--surface); }

/* Packs */
.pack { background: var(--surface); border: 1px solid var(--frost); border-radius: var(--r); box-shadow: var(--shadow); padding: 0 20px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; overflow: hidden; }
.pack-img { margin: 0 -20px 8px; border-bottom: 1px solid var(--frost); }
.pack-img img, .tech-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: 16px; background: #fff; }
.pack h3 { font-size: 22px; }
.pack-specs li { font-size: 14px; color: var(--text-2); border-top: 1px solid var(--frost); padding-block: 7px; }
.pack-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--frost); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.packs + .small { margin-top: 16px; }
.tech-img { margin: calc(var(--pad) * -1) calc(var(--pad) * -1) 8px; border-bottom: 1px solid var(--frost); overflow: hidden; border-radius: var(--r) var(--r) 0 0; }
.tech-img img { aspect-ratio: 16 / 7; }

/* Tuile produit + chiffres */
.device-tile { background: var(--bg); border: 1px solid var(--frost); border-radius: var(--r); padding: 32px 24px 0; display: grid; gap: 8px; overflow: hidden; }
.device-img img { max-height: 420px; width: auto; margin-inline: auto; mix-blend-mode: multiply; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; border-top: 1px solid var(--frost); margin-inline: -24px; padding: 24px; background: var(--surface); }
.stat-n { font-weight: 300; font-size: clamp(30px, 3.4vw, 44px); line-height: 1; letter-spacing: -.025em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-l { font-size: 14px; line-height: 1.43; color: var(--text-3); margin-top: 8px; }
.specs { width: 100%; border-bottom: 1px solid var(--frost); }
.specs li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding-block: 13px; border-top: 1px solid var(--frost); font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; }
.specs li strong { font-weight: 400; font-size: 14px; color: var(--text-3); padding-top: 1px; }
@media (max-width: 480px) { .specs li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* Captures d'écran */
.screens { margin-top: 24px; }
.screen, .version-img { background: #fff; border: 1px solid var(--frost); border-radius: var(--r); overflow: hidden; }
.screen img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; padding: 12px; }
.version-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; padding: 12px; }

/* Chronologie 24 h : grille et marqueurs dessinés en CSS (voir .tl-* générés à la fin) */
.tl { background: var(--surface); border: 1px solid var(--frost); border-radius: var(--r); box-shadow: var(--shadow); padding: 24px; overflow-x: auto; }
.tl-in { min-width: 640px; }
.tl-row { position: relative; min-height: 44px; display: flex; align-items: center; border-bottom: 1px solid var(--frost); }
.tl-row p { width: 110px; font-size: 13px; color: var(--text-3); }
.tl-row::before { content: ""; position: absolute; left: 110px; right: 0; top: 0; bottom: 0; background: linear-gradient(to right, var(--frost) 1px, transparent 1px) 0 0 / calc(100% / 12) 100%; }
.tl-row::after { content: ""; position: absolute; left: 110px; right: 0; top: 50%; height: 14px; margin-top: -7px; background-repeat: no-repeat; }
.tl-axis { display: flex; justify-content: space-between; margin-left: 110px; padding-top: 8px; font-family: var(--mono); font-size: 12px; color: var(--text-3); }

/* FAQ */
.qa { border-bottom: 1px solid var(--frost); }
.qa .wp-block-details { border-top: 1px solid var(--frost); margin: 0; }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding-block: 20px; font-size: 18px; font-weight: 500; color: var(--ink); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-weight: 300; font-size: 26px; line-height: 1; color: var(--text-3); transition: transform .2s ease; }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa details p { padding-bottom: 20px; font-size: 16px; max-width: 62ch; }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--surface); border: 1px solid var(--frost); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
@media (max-width: 900px) { .contact { grid-template-columns: minmax(0, 1fr); } }
.contact-side { background: var(--carbon); color: var(--on-carbon-2); padding: 48px 40px; display: grid; gap: 24px; align-content: start; }
.contact-side h2 { color: var(--on-carbon); font-size: clamp(32px, 3.6vw, 44px); }
.contact-side .eyebrow { color: var(--on-carbon-2); }
.promise { display: grid; gap: 10px; font-size: 15px; }
.promise li { display: flex; gap: 10px; }
.promise li::before { content: "*"; color: var(--on-carbon); font-size: 20px; line-height: 1.1; }
.contact-lines, .cta-lines { display: grid; gap: 16px; border-top: 1px solid var(--carbon-line); padding-top: 24px; }
.contact-lines p, .cta-lines p { font-size: 18px; color: var(--on-carbon); }
.contact-lines strong, .cta-lines strong { display: block; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .025em; color: var(--on-carbon-2); }
.contact-lines a { color: var(--on-carbon); }
.contact-form { padding: 48px 40px; }
@media (max-width: 480px) { .contact-side, .contact-form { padding: 32px 20px; } }

/* Formulaire Contact Form 7, aux classes de la maquette */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea {
  width: 100%; font: 400 16px/1.5 var(--font); color: var(--ink); background: var(--surface);
  border: 1px solid var(--cloud); border-radius: var(--r); padding: 11px 16px; min-height: 48px;
}
textarea { min-height: 140px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); }
.lr-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 600px) { .lr-form { grid-template-columns: minmax(0, 1fr); } }
.lr-field { display: grid; gap: 8px; min-width: 0; align-content: start; }
.lr-field.full { grid-column: 1 / -1; }
.lr-field > label, .lr-legend { font-size: 14px; font-weight: 500; color: var(--text-2); }
.lr-field .wpcf7-form-control-wrap { display: block; }
.lr-field .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 8px; }
.lr-field .wpcf7-list-item { margin: 0; }
.lr-field .wpcf7-list-item label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 15px; color: var(--text-2); border: 1px solid var(--cloud); border-radius: var(--r); padding: 10px 14px; }
.lr-field .wpcf7-list-item label:has(input:checked) { border-color: var(--ink); color: var(--ink); }
.lr-field .wpcf7-list-item input { accent-color: var(--ink); margin: 0; }
.lr-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 8px; }
.lr-foot small { font-size: 14px; color: var(--text-3); max-width: 44ch; }
.wpcf7 input[type="submit"] { font: 500 14px/1 var(--font); text-transform: uppercase; letter-spacing: .025em; padding: 16px 24px; border-radius: var(--r); border: 0; background: var(--accent); color: #fff; cursor: pointer; }
.wpcf7 input[type="submit"]:hover { filter: brightness(1.08); }
.wpcf7-spinner { display: none; }
.wpcf7-not-valid-tip { font-size: 13px; color: var(--accent); margin-top: 6px; }
.wpcf7 form .wpcf7-response-output { margin: 20px 0 0; border: 1px solid var(--ink); border-radius: var(--r); padding: 14px 16px; font-size: 15px; color: var(--ink); }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { border-color: var(--accent); }
.lr-notice { border: 1px dashed var(--cloud); border-radius: var(--r); padding: 24px; font-size: 15px; }

/* CTA final */
.cta { background: var(--carbon); color: var(--on-carbon-2); border-radius: var(--r); padding: 56px 48px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 48px; align-items: end; }
.cta-copy { display: grid; gap: 12px; }
.cta .eyebrow { color: var(--on-carbon-2); }
.cta h2 { color: var(--on-carbon); font-size: clamp(32px, 4vw, 48px); }
.cta-copy p:last-child { margin-top: 4px; font-size: 18px; max-width: 56ch; }
.cta .wp-block-button.btn-dark .wp-block-button__link { background: transparent; border-color: var(--carbon-line); }
.cta-lines { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 16px 48px; }
@media (max-width: 800px) { .cta { grid-template-columns: minmax(0, 1fr); padding: 40px 24px; } }

/* Mentions légales */
.legal-doc { max-width: 760px; display: grid; gap: 12px; }
.legal-doc h2 { font-size: 28px; font-weight: 400; letter-spacing: 0; margin-top: 24px; }
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc h3 { font-size: 19px; font-weight: 500; margin-top: 12px; }
.legal-doc p { font-size: 16px; max-width: 72ch; }

/* Maillage interne : « À lire aussi » */
.links-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .links-grid { grid-template-columns: minmax(0, 1fr); } }
.link-card { background: var(--surface); border: 1px solid var(--frost); border-radius: var(--r); padding: 20px 24px; display: grid; gap: 6px; align-content: start; }
.sec.paper .link-card { background: var(--bg); }
.lk-t { font-size: 17px; font-weight: 500; line-height: 1.35; color: var(--ink); }
.lk-t a { text-decoration: none; color: var(--ink); }
.lk-t a::after { content: " →"; }
.lk-t a:hover { text-decoration: underline; }
.lk-d { font-size: 14px; color: var(--text-3); }
.link-card:has(a:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Encadré */
.note { border-left: 3px solid var(--ink); background: var(--surface); padding: 16px 20px; border-radius: 0 var(--r) var(--r) 0; }
.note p { font-size: 16px; color: var(--text-2); }
.note strong { color: var(--ink); }

/* Guides : article */
.guide-head { padding-block: 56px 32px; display: grid; gap: 16px; justify-items: start; max-width: 860px; }
.guide-head .badge a { text-decoration: none; }
.guide-head h1 { font-size: clamp(34px, 4.6vw, 52px); line-height: 1.08; }
.guide-head .lede p { font-size: 19px; }
.guide-date { font-family: var(--mono); font-size: 13px; color: var(--text-3); }
.guide-body { max-width: 860px; padding-bottom: 72px; }
.guide-body .wp-block-post-content > * + * { margin-top: 18px; }
.guide-body h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 400; letter-spacing: -.02em; line-height: 1.2; margin-top: 44px !important; }
.guide-body h3 { font-size: 20px; font-weight: 500; margin-top: 28px !important; }
.guide-body p, .guide-body li { font-size: 17px; line-height: 1.7; color: var(--text-2); max-width: 70ch; }
.guide-body ul, .guide-body ol { padding-left: 22px; }
.guide-body li + li { margin-top: 6px; }
.guide-body a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.guide-body strong { color: var(--ink); font-weight: 600; }
.guide-body .note { margin-block: 28px !important; }

/* Guides : liste */
.guides-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0; margin: 0; }
@media (max-width: 1000px) { .guides-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .guides-grid { grid-template-columns: minmax(0, 1fr); } }
.guide-card { background: var(--surface); border: 1px solid var(--frost); border-radius: var(--r); box-shadow: var(--shadow); padding: 28px; display: flex; flex-direction: column; gap: 12px; height: 100%; }
.guide-card h2 { font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: -.01em; }
.guide-card h2 a { text-decoration: none; color: var(--ink); }
.guide-card h2 a:hover { text-decoration: underline; }
.guide-card .wp-block-post-excerpt p { font-size: 15px; color: var(--text-3); }
.guide-card .wp-block-read-more { margin-top: auto; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .025em; color: var(--ink); text-decoration: none; }

/* Pages génériques (WooCommerce, articles) : largeur de lecture */
.page-plain { padding-block: 48px 96px; }

/* ==========================================================================
   WooCommerce — gabarits boutique et fiche produit.
   Le thème coupe l'espacement automatique de Gutenberg (blockGap 0) pour ses
   pages ; les gabarits WooCommerce en dépendent, on le rétablit ici pour eux.
   ========================================================================== */
.woocommerce, .wc-block-components-product-name { color: var(--ink); }
.wc-block-components-product-price, .woocommerce .price { color: var(--ink); font-variant-numeric: tabular-nums; }
.wc-block-components-button:not(.is-link), .wp-element-button.single_add_to_cart_button { border-radius: var(--r); }
.onsale, .wc-block-components-sale-badge { background: var(--ink); color: var(--surface); border-radius: var(--r); }

body.woocommerce main.wp-block-group { max-width: 1200px; margin-inline: auto; padding: 32px 24px 96px; }
body.woocommerce main.wp-block-group > * + * { margin-top: 24px; }
@media (max-width: 480px) { body.woocommerce main.wp-block-group { padding: 24px 16px 64px; } }
.wc-block-breadcrumbs { font-size: 13px; color: var(--text-3); }
.wc-block-breadcrumbs a { color: var(--text-3); text-decoration: none; }
.wc-block-breadcrumbs a:hover { color: var(--ink); }
body.woocommerce .wp-block-query-title { font-size: clamp(34px, 4.6vw, 56px); margin-top: 8px; }
.wc-block-product-results-count, .wc-block-catalog-sorting { font-size: 14px; color: var(--text-3); }
.wc-block-catalog-sorting select { min-height: 40px; padding: 8px 12px; font-size: 14px; width: auto; }

/* Grille de produits, alignée sur les cartes du site */
.wc-block-product-template { gap: 16px !important; }
.wc-block-product { background: var(--surface); border: 1px solid var(--frost); border-radius: var(--r); padding: 0 16px 16px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.wc-block-product .wc-block-components-product-image { margin: 0 -16px 6px !important; border-bottom: 1px solid var(--frost); }
.wc-block-product .wc-block-components-product-image img { border-radius: 0; }
.wc-block-product .wp-block-post-title { text-align: left !important; font-size: 16px !important; font-weight: 500; letter-spacing: 0; line-height: 1.4; margin: 0 !important; }
.wc-block-product .wp-block-post-title a { text-decoration: none; color: var(--ink); }
.wc-block-product .wp-block-woocommerce-product-price, .wc-block-product .wc-block-components-product-price { text-align: left !important; font-size: 17px !important; margin: 0 !important; }
.wc-block-product .wc-block-components-product-button { margin-top: auto !important; justify-content: flex-start !important; align-items: flex-start !important; text-align: left; }
.wc-block-components-product-button .wp-block-button__link { padding: 10px 14px; font-size: 12px; }

/* Pagination */
.wp-block-query-pagination { margin-top: 48px !important; gap: 8px; font-size: 14px; }
.wp-block-query-pagination-numbers { display: flex; gap: 8px; }
.wp-block-query-pagination .page-numbers, .wp-block-query-pagination-next, .wp-block-query-pagination-previous {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--cloud); border-radius: var(--r); text-decoration: none; color: var(--ink); background: var(--surface);
}
.wp-block-query-pagination .page-numbers.current { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.wp-block-query-pagination-next, .wp-block-query-pagination-previous { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .025em; }
.wp-block-query-pagination a:hover { border-color: var(--ink); }

/* Fiche produit */
body.single-product .wp-block-columns { gap: 56px !important; align-items: flex-start; }
body.single-product .wp-block-column > * + * { margin-top: 16px; }
@media (max-width: 781px) { body.single-product .wp-block-columns { gap: 24px !important; } }
body.single-product h1.wp-block-post-title { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -.025em; }
body.single-product .wp-block-column .wp-block-woocommerce-product-price { font-size: 24px !important; }
.woocommerce-product-details__short-description { font-size: 16px; color: var(--text-2); }
.woocommerce-product-details__short-description p + p { margin-top: 8px; }
.woocommerce-product-gallery { border: 1px solid var(--frost); border-radius: var(--r); background: #fff; overflow: hidden; }
.woocommerce-product-gallery .flex-control-thumbs { display: flex; gap: 8px; padding: 8px; margin: 0; list-style: none; border-top: 1px solid var(--frost); }
.woocommerce-product-gallery .flex-control-thumbs li { flex: 1; list-style: none; }
.woocommerce-product-gallery .flex-control-thumbs img { border-radius: 4px; opacity: .6; cursor: pointer; }
.woocommerce-product-gallery .flex-control-thumbs img.flex-active, .woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; }
.wc-block-add-to-cart-form table.variations { border-collapse: collapse; margin-bottom: 8px; }
.wc-block-add-to-cart-form table.variations th, .wc-block-add-to-cart-form table.variations td { padding: 6px 16px 6px 0; text-align: left; vertical-align: middle; }
.wc-block-add-to-cart-form table.variations label { font-size: 14px; font-weight: 500; color: var(--text-2); }
.wc-block-add-to-cart-form table.variations select { min-width: 220px; }
.wc-block-add-to-cart-form .reset_variations { font-size: 13px; color: var(--text-3); }
.woocommerce-variation-price { font-size: 20px; color: var(--ink); margin-block: 8px; }
.wc-block-add-to-cart-form form.cart:not(.variations_form), .wc-block-add-to-cart-form .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.wc-block-add-to-cart-form .quantity input.qty { width: 80px; min-height: 48px; text-align: center; padding: 8px; }
.wc-block-add-to-cart-form .single_add_to_cart_button { min-height: 48px; }
.wp-block-woocommerce-product-meta { font-size: 14px; color: var(--text-3); }
.wp-block-woocommerce-product-meta .wp-block-group { gap: 4px 24px; flex-wrap: wrap !important; }
.wp-block-woocommerce-product-meta a { color: var(--text-3); }
.wp-block-woocommerce-product-details { margin-top: 64px !important; }
.wp-block-woocommerce-product-details .wc-tabs { border-bottom: 1px solid var(--frost); }
.wp-block-woocommerce-product-details .wc-tabs a { font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: .025em; text-decoration: none; }
.wp-block-woocommerce-product-details .woocommerce-Tabs-panel { max-width: 760px; padding-top: 24px; }
.wp-block-woocommerce-product-details .woocommerce-Tabs-panel h2 { font-size: 28px; margin-bottom: 12px; }
.wp-block-woocommerce-product-details .woocommerce-Tabs-panel h3 { font-size: 20px; font-weight: 500; margin: 28px 0 8px; }
.wp-block-woocommerce-product-details .woocommerce-Tabs-panel p { color: var(--text-2); }
.wp-block-woocommerce-product-details .woocommerce-Tabs-panel ul { padding-left: 20px; margin: 0; color: var(--text-2); }
.wp-block-woocommerce-product-details .woocommerce-Tabs-panel li + li { margin-top: 4px; }
body.single-product .wp-block-woocommerce-product-collection { margin-top: 64px !important; }
body.single-product .wp-block-woocommerce-product-collection > .wp-block-heading { font-size: 28px; margin-bottom: 16px; }

.est-cachee { display: none; }
.est-cachee.est-actif { display: block; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

/* ---------- Guides étoffés : image à la une, sommaire, figures légendées, tableaux, encadrés ---------- */
.guide-visuel { margin-block: 0 8px; }
.guide-visuel img { width: 100%; max-width: 860px; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 50%; border-radius: var(--r); border: 1px solid var(--frost); }
.guide-card { padding: 0 0 28px; overflow: hidden; }
.guide-card > :not(.guide-card-visuel) { padding-inline: 28px; }
.guide-card-visuel { margin: 0; }
.guide-card-visuel img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.guide-body :is(h2, h3)[id] { scroll-margin-top: 100px; }
.guide-body figure.wp-block-image { margin-block: 32px !important; }
.guide-body figure.wp-block-image img { width: 100%; height: auto; max-height: 460px; object-fit: cover; border-radius: var(--r); border: 1px solid var(--frost); background: var(--surface); }
.guide-body figure.wp-block-image figcaption { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-3); text-align: left; }
.guide-body .sommaire { background: var(--surface); border: 1px solid var(--frost); border-left: 3px solid var(--accent); border-radius: 0 var(--r) var(--r) 0; padding: 20px 24px; margin-block: 28px !important; }
.guide-body .sommaire-titre { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 0; }
.guide-body ol.sommaire-liste { margin: 10px 0 0; padding-left: 22px; columns: 2; column-gap: 32px; }
.guide-body ol.sommaire-liste li { font-size: 15px; break-inside: avoid; }
.guide-body ol.sommaire-liste a { text-decoration: none; }
.guide-body ol.sommaire-liste a:hover { text-decoration: underline; }
.guide-body figure.wp-block-table { margin-block: 24px !important; overflow-x: auto; }
.guide-body .wp-block-table table { width: 100%; border-collapse: collapse; table-layout: auto; font-size: 15px; background: var(--surface); border: 1px solid var(--frost); }
.guide-body .wp-block-table :is(th, td) { border: 0; border-bottom: 1px solid var(--frost); text-align: left; padding: 12px 16px; vertical-align: top; }
.guide-body .wp-block-table thead { border: 0; }
.guide-body .wp-block-table th { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); background: var(--bg); }
.guide-body .wp-block-table td:first-child { color: var(--ink); font-weight: 500; }
.guide-body .qa { margin-top: 12px !important; }
.guide-body :is(.encart-materiel, .voir-aussi) { background: var(--surface); border: 1px solid var(--frost); border-radius: var(--r); padding: 20px 24px; margin-top: 36px !important; }
.guide-body :is(.encart-materiel-titre, .voir-aussi-titre) { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 0; }
.guide-body :is(.encart-materiel, .voir-aussi) ul { list-style: none; padding: 0; margin: 10px 0 0; }
.guide-body :is(.encart-materiel, .voir-aussi) li { padding: 10px 0; border-top: 1px solid var(--frost); margin: 0; }
.guide-body :is(.encart-materiel, .voir-aussi) li:first-child { border-top: 0; }
.guide-body .encart-materiel a { font-weight: 600; }
.guide-body .voir-aussi a { font-size: 19px; text-decoration: none; }
.guide-body .voir-aussi a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .guide-body ol.sommaire-liste { columns: 1; }
  .guide-body :is(.sommaire, .encart-materiel, .voir-aussi) { padding: 16px 18px; }
}

/* ——— Icônes (masques CSS) ——— */
.i-check{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M5%2012.5l4.5%204.5L19%207.5'%2F%3E%3C%2Fsvg%3E")}
.i-reader{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'8'%20y%3D'2.5'%20width%3D'8'%20height%3D'19'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M10%206h4v4h-4zM12%2014.5v.01M10%2018h4'%2F%3E%3C%2Fsvg%3E")}
.i-log{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'4'%20width%3D'18'%20height%3D'16'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M3%209h18M7%2013h3M12%2013h5M7%2016.5h3M12%2016.5h4'%2F%3E%3C%2Fsvg%3E")}
.i-tag{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'7.5'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'2'%2F%3E%3Cpath%20d%3D'M12%202v3M12%2019v3M2%2012h3M19%2012h3'%2F%3E%3C%2Fsvg%3E")}
.i-clock{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'9'%2F%3E%3Cpath%20d%3D'M12%207v5l3%202'%2F%3E%3C%2Fsvg%3E")}
.i-pc{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'4'%20width%3D'18'%20height%3D'12'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M8%2020h8M12%2016v4'%2F%3E%3C%2Fsvg%3E")}
.i-bell{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6%2016v-5a6%206%200%200112%200v5l2%202H4zM10%2020a2%202%200%20004%200'%2F%3E%3C%2Fsvg%3E")}
.i-pin{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2021s-7-6.2-7-11.5A7%207%200%200119%209.5C19%2014.8%2012%2021%2012%2021z'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'9.5'%20r%3D'2.5'%2F%3E%3C%2Fsvg%3E")}
.i-lock{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'5'%20y%3D'11'%20width%3D'14'%20height%3D'10'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M8%2011V8a4%204%200%20018%200v3'%2F%3E%3C%2Fsvg%3E")}
.i-cloud{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%2018h10a4%204%200%2000.5-8A6%206%200%20006%2011.5%203.5%203.5%200%20007%2018z'%2F%3E%3C%2Fsvg%3E")}
.i-phone{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'7'%20y%3D'2.5'%20width%3D'10'%20height%3D'19'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M11%2018.5h2'%2F%3E%3C%2Fsvg%3E")}
.i-users{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'9'%20cy%3D'8'%20r%3D'3.5'%2F%3E%3Cpath%20d%3D'M2.5%2020a6.5%206.5%200%200113%200'%2F%3E%3Ccircle%20cx%3D'17'%20cy%3D'9'%20r%3D'2.5'%2F%3E%3Cpath%20d%3D'M16%2014.5a5%205%200%20015.5%205'%2F%3E%3C%2Fsvg%3E")}
.i-paper{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6%203h9l4%204v14H6zM14%203v5h5M9%2013h7M9%2017h5'%2F%3E%3C%2Fsvg%3E")}
.i-chart{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%204v16h16M8%2016v-5M12%2016V8M16%2016v-7'%2F%3E%3C%2Fsvg%3E")}
.i-sync{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M20%2011a8%208%200%2000-14.5-4.5L4%208M4%204v4h4M4%2013a8%208%200%200014.5%204.5L20%2016M20%2020v-4h-4'%2F%3E%3C%2Fsvg%3E")}
.i-support{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%2014v-2a8%208%200%200116%200v2M4%2014h3v5H5a1%201%200%2001-1-1zM20%2014h-3v5h2a1%201%200%20001-1z'%2F%3E%3C%2Fsvg%3E")}
.i-eye{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M2%2012s3.5-7%2010-7%2010%207%2010%207-3.5%207-10%207S2%2012%202%2012z'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'3'%2F%3E%3C%2Fsvg%3E")}
.i-shield{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%203l8%203v6c0%205-3.5%208-8%209-4.5-1-8-4-8-9V6z'%2F%3E%3C%2Fsvg%3E")}
.i-search{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'11'%20cy%3D'11'%20r%3D'7'%2F%3E%3Cpath%20d%3D'M20%2020l-4-4'%2F%3E%3C%2Fsvg%3E")}
.i-camera{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'7'%20width%3D'18'%20height%3D'13'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M8%207l2-3h4l2%203'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'13.5'%20r%3D'3.5'%2F%3E%3C%2Fsvg%3E")}
.i-calendar{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'5'%20width%3D'18'%20height%3D'16'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M3%2010h18M8%203v4M16%203v4'%2F%3E%3C%2Fsvg%3E")}
.i-archive{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'4'%20width%3D'18'%20height%3D'5'%20rx%3D'1'%2F%3E%3Cpath%20d%3D'M5%209v11h14V9M10%2013h4'%2F%3E%3C%2Fsvg%3E")}
.i-box{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M3%207.5L12%203l9%204.5v9L12%2021l-9-4.5zM3%207.5l9%204.5%209-4.5M12%2012v9'%2F%3E%3C%2Fsvg%3E")}
.i-signal{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M5%2019v-2M9%2019v-5M13%2019v-8M17%2019V6'%2F%3E%3C%2Fsvg%3E")}
.i-doc{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6%203h12v18H6zM9%207h6M9%2011h6M9%2015h4'%2F%3E%3C%2Fsvg%3E")}
.i-truck{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M2%206h11v10H2zM13%209h4l3%203v4h-7z'%2F%3E%3Ccircle%20cx%3D'6'%20cy%3D'17.5'%20r%3D'1.8'%2F%3E%3Ccircle%20cx%3D'16.5'%20cy%3D'17.5'%20r%3D'1.8'%2F%3E%3C%2Fsvg%3E")}
:root{--ico-check:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M5%2012.5l4.5%204.5L19%207.5'%2F%3E%3C%2Fsvg%3E")}
:root{--chk-dark:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%231f1f1f'%20stroke-width%3D'2.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M5%2012.5l4.5%204.5L19%207.5'%2F%3E%3C%2Fsvg%3E")}
/* ——— Chronologie : marqueurs par ligne ——— */
.tl-services::after{background:radial-gradient(circle 6px at 1% 50%, var(--ink) 5.5px, transparent 6px),radial-gradient(circle 6px at 31.25% 50%, var(--ink) 5.5px, transparent 6px),radial-gradient(circle 6px at 99% 50%, var(--ink) 5.5px, transparent 6px)}
.tl-rondes::after{background:linear-gradient(to right, transparent 8.3%, var(--muted) 8.3% 13.9%, transparent 13.9%) 0 50% / 100% 6px no-repeat,linear-gradient(to right, transparent 33.9%, var(--muted) 33.9% 38.9%, transparent 38.9%) 0 50% / 100% 6px no-repeat,linear-gradient(to right, transparent 58.3%, var(--muted) 58.3% 63.2%, transparent 63.2%) 0 50% / 100% 6px no-repeat,linear-gradient(to right, transparent 77.1%, var(--muted) 77.1% 82%, transparent 82%) 0 50% / 100% 6px no-repeat,linear-gradient(to right, transparent 92.4%, var(--muted) 92.4% 97.3%, transparent 97.3%) 0 50% / 100% 6px no-repeat}
.tl-evenements::after{background:radial-gradient(circle 6px at 36% 50%, var(--accent) 5.5px, transparent 6px),radial-gradient(circle 6px at 73.2% 50%, var(--accent) 5.5px, transparent 6px)}
.tl-consignes::after{background:radial-gradient(circle 6px at 2% 50%, var(--surface) 3px, var(--ink) 3.5px 5.5px, transparent 6px),radial-gradient(circle 6px at 54.2% 50%, var(--surface) 3px, var(--ink) 3.5px 5.5px, transparent 6px)}
.tl-visiteurs::after{background:radial-gradient(circle 6px at 5.6% 50%, var(--ink) 5.5px, transparent 6px),radial-gradient(circle 6px at 18.75% 50%, var(--ink) 5.5px, transparent 6px),radial-gradient(circle 6px at 43.1% 50%, var(--ink) 5.5px, transparent 6px)}
.wp-block-post-content > .woocommerce, .wp-block-post-content > .wp-block-woocommerce-cart, .wp-block-post-content > .wp-block-woocommerce-checkout { max-width: 1200px; margin-inline: auto; padding: 48px 24px 96px; }