/*
Theme Name: Kev Design
Theme URI: https://studio196.fr
Author: Studio196 · Alexandre Bienfait
Author URI: https://studio196.fr
Description: Thème sur mesure de Kev Design, carreleur en Drôme et Ardèche. À l'activation, il crée les pages Accueil, Prestations, Mentions légales, Politique de confidentialité et Cookies.
Version: 1.1.15
Requires at least: 6.4
Requires PHP: 7.4
License: Tous droits réservés
Text Domain: kev-design
*/
/* Design volontairement clair (une seule apparence) : fond blanc, bleu du logo KD en accent, gris du logo pour les joints. */
:root {
  --sol: #ffffff;        /* fond blanc */
  --carreau: #f6f8fb;    /* surface des carreaux : blanc bleuté */
  --joint: #d9dee6;      /* joints : gris clair du logo */
  --encre: #1a2233;      /* texte : bleu-noir */
  --gris: #5c6577;       /* texte secondaire */
  --laiton: #1b4c94;     /* accent : bleu du logo */
  --bleu-fonce: #0c3a78; /* bleu profond du logo */
  --nuit: #edf2f9;       /* bandeaux : bleu très pâle */
  --nuit-txt: #1a2233;
  --nuit-doux: #4c5a70;
  --nuit-ligne: #cfd8e6;
  --wa: #1f7a4d;
  --a-completer: #b0402c;
  --f-titre: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-texte: "Figtree", "Segoe UI", Helvetica, Arial, sans-serif;
  --f-accent: "Newsreader", Georgia, "Times New Roman", serif;
  --rayon: 14px;
  --mesure: 64ch;
  --t-xs: .78rem; --t-s: .9rem; --t-m: 1.08rem; --t-l: 1.4rem; --t-xl: clamp(1.8rem, 3.6vw, 2.6rem); --t-xxl: clamp(2.3rem, 6vw, 4.4rem);
  color-scheme: light;
}

* { box-sizing: border-box; }
body { background: var(--sol); color: var(--encre); font-family: var(--f-texte); font-size: var(--t-m); line-height: 1.7; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--sol); }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--laiton); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--f-titre); font-stretch: 118%; font-weight: 600; line-height: 1.12; text-wrap: balance; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
.wrap { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.etiquette { font-family: var(--f-titre); font-size: var(--t-xs); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--laiton); }
.mesure { max-width: var(--mesure); }

.trou { color: var(--a-completer); font-family: var(--f-titre); font-size: .85em; font-weight: 500; border: 1px dashed currentColor; padding: 0 .35em; border-radius: 2px; white-space: nowrap; }

/* En-tête */
header.site { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: color-mix(in srgb, var(--sol) 82%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--joint); }
header.site .wrap { display: flex; align-items: center; gap: 12px 28px; padding-block: 14px; flex-wrap: wrap; }
.logo { text-decoration: none; display: flex; align-items: center; gap: 12px; margin-right: auto; }
.logo img { width: 44px; height: auto; flex: none; }
@media (max-width: 520px) { .logo img { width: 36px; } .logo .nom { display: none; } header.site .wrap { padding-block: 10px; gap: 10px 14px; } .actions .ico { width: 34px; height: 34px; } }
.logo .nom { display: grid; gap: 1px; line-height: 1.2; }
.logo b { color: var(--bleu-fonce); }
.logo b { font-family: var(--f-titre); font-stretch: 125%; font-weight: 700; font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase; }
.logo span { font-family: var(--f-titre); font-size: var(--t-xs); color: var(--gris); letter-spacing: .1em; text-transform: uppercase; }
nav.principale { display: flex; gap: 22px; font-family: var(--f-titre); font-size: var(--t-s); }
nav.principale a { text-decoration: none; padding-block: 4px; border-bottom: 1px solid transparent; }
nav.principale a[aria-current="page"] { border-bottom-color: var(--laiton); }
nav.principale a:hover { color: var(--laiton); }
.actions { display: flex; gap: 10px; align-items: center; }
.ico { width: 38px; height: 38px; display: inline-grid; place-items: center; border: 1px solid var(--joint); border-radius: 50%; transition: transform .2s, border-color .2s, color .2s; text-decoration: none; background: var(--carreau); position: relative; }
.ico:hover { border-color: var(--laiton); }
.ico svg { width: 18px; height: 18px; fill: currentColor; }
.ico.manque::after { content: ""; position: absolute; top: -4px; right: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--a-completer); }
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-titre); font-size: var(--t-s); font-weight: 500; text-decoration: none; padding: 11px 18px; border-radius: 999px; transition: background .25s, border-color .25s, color .25s, transform .25s; border: 1px solid var(--bleu-fonce); background: var(--bleu-fonce); color: #fff; cursor: pointer; }
.btn:hover { transform: translateY(-2px);  background: var(--laiton); border-color: var(--laiton); color: #fff; }
.btn.ligne { background: transparent; color: var(--bleu-fonce); }
.btn.ligne:hover { color: #fff; }
.btn.wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.btn.wa:hover { filter: brightness(1.08); }
.btn svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
@media (max-width: 760px) {
  nav.principale { order: 3; width: 100%; gap: 14px; overflow-x: auto; justify-content: space-between; }
  .actions .devis-haut { padding: 9px 14px; }
}

/* Motifs de pose (photos à venir) */
.photo { position: relative; aspect-ratio: 4 / 3; max-width: 100%; background-color: var(--carreau); overflow: hidden; }
.photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; background: var(--carreau); border-top: 1px solid var(--joint); font-family: var(--f-titre); font-size: var(--t-xs); color: var(--gris); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.photo.reelle img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.photo.reelle figcaption { left: 10px; right: auto; bottom: 10px; padding: 4px 10px; border: 0; border-radius: 999px; background: rgba(255,255,255,.88); color: var(--encre, #1d2433); }
.galerie.quatre { grid-template-columns: 1fr 1fr; }
.galerie.quatre .photo:first-child { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
.galerie.une { grid-template-columns: 1fr; }
.galerie.une .photo:first-child { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
@media (max-width: 520px) { .galerie.quatre { grid-template-columns: 1fr; } .galerie.quatre .photo:first-child { aspect-ratio: 4 / 3; } }
.photo figcaption em { font-style: normal; color: var(--a-completer); }
.m-grand { background-image: linear-gradient(var(--joint) 2px, transparent 2px), linear-gradient(90deg, var(--joint) 2px, transparent 2px); background-size: 96px 48px; }
.m-carre { background-image: linear-gradient(var(--joint) 2px, transparent 2px), linear-gradient(90deg, var(--joint) 2px, transparent 2px); background-size: 40px 40px; }
.m-mosaique { background-image: linear-gradient(var(--joint) 1px, transparent 1px), linear-gradient(90deg, var(--joint) 1px, transparent 1px); background-size: 12px 12px; }
.m-lames { background-image: linear-gradient(var(--joint) 1px, transparent 1px), linear-gradient(90deg, transparent 0 calc(100% - 1px), var(--joint) 0), linear-gradient(90deg, transparent 0 calc(100% - 1px), var(--joint) 0); background-size: 100% 22px, 180px 44px, 180px 44px; background-position: 0 0, 0 0, 90px 22px; }
.m-chevron { background-image: repeating-linear-gradient(45deg, var(--joint) 0 1px, transparent 1px 26px), repeating-linear-gradient(-45deg, var(--joint) 0 1px, transparent 1px 26px); }
.m-ragreage { background: linear-gradient(170deg, var(--carreau) 40%, var(--joint) 160%); }
.m-ragreage::before { content: ""; position: absolute; left: 8%; right: 8%; top: 46%; border-top: 2px dashed var(--laiton); transform: rotate(-1.4deg); opacity: .7; }

/* Pages */
section.page { display: block; }

/* Accueil : ouverture */
.ouverture .wrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; padding-block: 64px 56px; align-items: end; }
.ouverture h1 { font-size: var(--t-xxl); font-weight: 600; }
.ouverture h1 i { font-family: var(--f-accent); font-style: italic; font-weight: 400; font-stretch: 100%; color: var(--laiton); }
.ouverture .chapo { font-size: var(--t-l); line-height: 1.45; color: var(--gris); margin-top: 22px; max-width: 34ch; }
.ouverture .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.ouverture .trame { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--joint); border: 4px solid var(--joint); border-radius: var(--rayon); overflow: hidden; box-shadow: 0 24px 60px -30px rgba(12, 58, 120, .35); }
.ouverture .trame .photo { aspect-ratio: 1; }
.ouverture .trame .photo.large { grid-column: span 2; aspect-ratio: auto; }
.ouverture .trame.trois { grid-template-columns: 16fr 9fr; }
.ouverture .trame.trois .t-piscine { aspect-ratio: 4 / 3; }
.ouverture .trame.trois .t-douche { aspect-ratio: 3 / 4; }
.ouverture .trame.trois .t-terrasse { grid-column: 1 / -1; aspect-ratio: 900 / 552; }
.reperes { border-block: 1px solid var(--joint); }
.reperes .wrap { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: 0; }
.reperes .wrap > * { padding: 18px 16px 18px 0; display: grid; gap: 2px; }
.reperes .wrap > * + * { border-left: 1px solid var(--joint); padding-left: 16px; }
.reperes b { font-family: var(--f-titre); font-stretch: 118%; font-size: var(--t-m); font-weight: 600; }
.reperes span { font-size: var(--t-s); color: var(--gris); }
a.repere-devis { text-decoration: none; position: relative; background: color-mix(in srgb, var(--laiton) 7%, transparent); transition: background .25s; }
a.repere-devis b { color: var(--bleu-fonce); }
a.repere-devis span { color: var(--laiton); font-weight: 500; }
a.repere-devis:hover { background: color-mix(in srgb, var(--laiton) 13%, transparent); }
a.repere-devis:hover span::after { transform: translateX(4px); }
a.repere-devis span::after { content: " →"; display: inline-block; transition: transform .25s; }
@media (max-width: 860px) {
  .ouverture .wrap { grid-template-columns: 1fr; padding-block: 40px; }
  .reperes .wrap { grid-template-columns: 1fr 1fr; }
  .reperes .wrap > :nth-child(3) { border-left: 0; padding-left: 0; }
  .reperes .wrap > :nth-child(n+3) { border-top: 1px solid var(--joint); }
}

/* Blocs de section */
.bloc { padding-block: clamp(64px, 10vw, 112px); }
.bloc .tete { display: grid; gap: 16px; margin-bottom: 48px; }
.bloc h2 { font-size: var(--t-xl); }
.bloc .tete p { color: var(--gris); max-width: var(--mesure); }

/* Prestations : carreaux jointés */
.carreaux { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.carreaux article { background: var(--sol); border: 1px solid var(--joint); border-radius: var(--rayon); transition: transform .3s, box-shadow .3s, border-color .3s; padding: 28px 24px 26px; display: grid; grid-template-rows: auto auto 1fr; gap: 10px; min-width: 0; }
.carreaux article:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--laiton) 40%, var(--joint)); box-shadow: 0 18px 40px -24px rgba(12, 58, 120, .4); }
.carreaux .code { color: var(--laiton) !important;  font-family: var(--f-titre); font-size: var(--t-xs); color: var(--gris); letter-spacing: .08em; }
.carreaux h3 { font-size: 1.12rem; }
.carreaux p { font-size: var(--t-s); color: var(--gris); line-height: 1.55; }
.suite { margin-top: 28px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.suite small { color: var(--gris); font-size: var(--t-s); }
@media (max-width: 960px) { .carreaux { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .carreaux { grid-template-columns: 1fr; } }

/* Approche */
.approche { background: color-mix(in srgb, var(--nuit) 78%, transparent); color: var(--nuit-txt); }
.approche .wrap { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; }
.approche h2 { font-size: var(--t-xl); }
.approche .etiquette { color: var(--laiton); }
.approche ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: etape; }
.approche li { counter-increment: etape; display: grid; grid-template-columns: 48px 1fr; gap: 4px 12px; padding-block: 18px; border-top: 1px solid var(--nuit-ligne); }
.approche li::before { content: counter(etape, decimal-leading-zero); font-family: var(--f-titre); font-size: var(--t-s); color: var(--laiton); grid-row: span 2; padding-top: 3px; }
.approche li b { font-family: var(--f-titre); font-stretch: 112%; font-weight: 500; }
.approche li span { color: var(--nuit-doux); font-size: var(--t-s); }
@media (max-width: 860px) { .approche .wrap { grid-template-columns: 1fr; gap: 24px; } }

/* Votre artisan */
.artisan .wrap { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(28px, 6vw, 72px); align-items: center; }
.portrait { margin: 0; border-radius: var(--rayon); overflow: hidden; border: 1px solid var(--joint); box-shadow: 0 30px 60px -36px rgba(12, 58, 120, .45); background: var(--carreau); }
.portrait img { display: block; width: 100%; height: auto; }
.bio { display: grid; gap: 16px; max-width: 58ch; }
.bio h2 { font-size: var(--t-xl); }
.bio p { color: var(--gris); }
.bio blockquote { margin: 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--laiton); font-family: var(--f-accent); font-style: italic; font-size: var(--t-l); line-height: 1.45; color: var(--bleu-fonce); }
@media (max-width: 760px) { .artisan .wrap { grid-template-columns: 1fr; } .portrait { max-width: 320px; } }

/* FAQ */
#faq, #contact { scroll-margin-top: 90px; }
@media (max-width: 760px) { #faq, #contact { scroll-margin-top: 170px; } }
.faq-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.faq-grille details:nth-child(-n+2) { border-top: 1px solid var(--joint); }
@media (max-width: 760px) { .faq-grille { grid-template-columns: 1fr; } .faq-grille details:nth-child(2) { border-top: 0; } }
.faq-suite { margin-top: 24px; }
.faq details, .mini-faq details { border-bottom: 1px solid var(--joint); }
.faq summary, .mini-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 14px 2px; font-weight: 600; color: var(--encre); }
.mini-faq summary { font-size: var(--t-s); padding: 11px 2px; }
.faq summary::-webkit-details-marker, .mini-faq summary::-webkit-details-marker { display: none; }
.faq summary::after, .mini-faq summary::after { content: "+"; font-family: var(--f-titre); font-size: 1.3rem; line-height: 1; color: var(--laiton); transition: transform .25s; flex: none; }
.faq details[open] summary::after, .mini-faq details[open] summary::after { transform: rotate(45deg); }
.faq details p, .mini-faq details p { padding: 0 2px 16px; color: var(--gris); max-width: var(--mesure); }
.mini-faq details p { font-size: var(--t-s); }
.mini-faq { margin-top: 10px; display: grid; }
.mini-faq .etiquette { margin-bottom: 4px; }

/* Contact */
.contact .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.coord { display: grid; gap: 0; border-top: 1px solid var(--joint); }
.coord div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding-block: 14px; border-bottom: 1px solid var(--joint); }
.coord dt { font-family: var(--f-titre); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--gris); padding-top: 4px; }
.coord dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.coord .num { font-family: var(--f-titre); font-stretch: 112%; font-size: var(--t-l); font-variant-numeric: tabular-nums; user-select: all; }
form.devis { display: grid; gap: 14px; background: var(--sol); border: 1px solid var(--joint); border-radius: var(--rayon); padding: 30px; box-shadow: 0 24px 60px -36px rgba(12, 58, 120, .35); }
form.devis label { display: grid; gap: 6px; font-family: var(--f-titre); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--gris); }
form.devis input, form.devis textarea, form.devis select { font: inherit; font-family: var(--f-texte); font-size: var(--t-m); text-transform: none; letter-spacing: 0; color: var(--encre); background: var(--sol); border: 1px solid var(--joint); border-radius: 2px; padding: 10px 12px; width: 100%; }
form.devis .ligne2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
form.devis .retour { font-size: var(--t-s); color: var(--wa); min-height: 1.4em; }
@media (max-width: 860px) { .contact .wrap { grid-template-columns: 1fr; } }
@media (max-width: 460px) { form.devis .ligne2 { grid-template-columns: 1fr; } .coord div { grid-template-columns: 1fr; gap: 2px; } }

/* Page Prestations */
.entete-page { border-bottom: 1px solid var(--joint); }
.entete-page .wrap { padding-block: 56px 40px; display: grid; gap: 16px; }
.entete-page h1 { font-size: var(--t-xxl); }
.entete-page p { color: var(--gris); font-size: var(--t-l); line-height: 1.45; max-width: 46ch; }
.sommaire { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sommaire button { font-family: var(--f-titre); font-size: var(--t-xs); letter-spacing: .06em; padding: 7px 12px; background: var(--carreau); border: 1px solid var(--joint); border-radius: 2px; color: var(--encre); cursor: pointer; }
.sommaire button:hover { border-color: var(--laiton); color: var(--laiton); }
.metier { padding-block: 56px; border-bottom: 1px solid var(--joint); scroll-margin-top: 90px; }
.metier .wrap { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; }
.metier .texte { display: grid; gap: 14px; align-content: start; min-width: 0; }
.metier h2 { font-size: var(--t-l); font-stretch: 118%; }
.metier .texte p { color: var(--gris); }
.metier .fiche { font-family: var(--f-titre); font-size: var(--t-xs); color: var(--gris); display: grid; gap: 0; border-top: 1px solid var(--joint); margin-top: 6px; }
.metier .fiche span { padding-block: 7px; border-bottom: 1px solid var(--joint); }
.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--joint); border: 4px solid var(--joint); border-radius: var(--rayon); overflow: hidden; align-self: start; }
.galerie .photo:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 860px) { .metier .wrap { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 520px) { .galerie { grid-template-columns: 1fr 1fr; } .galerie .photo:first-child { grid-row: auto; aspect-ratio: 16 / 9; } }
.galerie.deux { grid-template-columns: 1fr 1fr; }
.galerie.deux .photo, .galerie.deux .photo:first-child { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
@media (max-width: 520px) { .galerie.deux { grid-template-columns: 1fr; } .galerie.deux .photo:first-child { aspect-ratio: 16 / 10; } }
@media (max-width: 520px) { .galerie.une { grid-template-columns: 1fr; } .galerie.une .photo:first-child { aspect-ratio: 4 / 3; } }

/* Mentions légales */
.legal .wrap { padding-block: 56px 72px; display: grid; gap: 40px; }
.legal h1 { font-size: var(--t-xl); }
.legal article { display: grid; grid-template-columns: 240px 1fr; gap: 24px; padding-top: 24px; border-top: 1px solid var(--joint); }
.legal h2 { font-size: var(--t-m); font-stretch: 112%; }
.legal .corps { display: grid; gap: 12px; max-width: var(--mesure); min-width: 0; }
.legal dl { margin: 0; display: grid; gap: 6px; }
.legal dl div { display: grid; grid-template-columns: 200px 1fr; gap: 12px; }
.legal dt { color: var(--gris); font-size: var(--t-s); padding-top: 2px; }
.legal dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.legal .note { font-size: var(--t-s); color: var(--gris); background: var(--carreau); border: 1px dashed var(--joint); padding: 14px 16px; }
@media (max-width: 760px) { .legal article { grid-template-columns: 1fr; gap: 10px; } .legal dl div { grid-template-columns: 1fr; gap: 0; } }

/* Liens de contact */
.lien-contact { color: var(--laiton); text-decoration: underline; text-decoration-color: var(--joint); text-underline-offset: 3px; }
.lien-contact:hover { text-decoration-color: currentColor; }
a.num { text-decoration: none; color: var(--bleu-fonce); }
a.num:hover { color: var(--laiton); }
.reseaux { display: flex; gap: 8px; flex-wrap: wrap; }
.ico:hover { color: var(--laiton); }

/* Pages légales : listes et tableaux */
.faq details .liste, .mini-faq details .liste { margin: -8px 0 16px; padding-left: 1.4em; display: grid; gap: 4px; color: var(--gris); }
.legal .liste { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; color: var(--encre); }
.tableau { overflow-x: auto; border: 1px solid var(--joint); border-radius: 10px; }
.tableau table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: var(--t-s); }
.tableau th, .tableau td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--joint); }
.tableau th { font-family: var(--f-titre); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); background: var(--carreau); }
.tableau tr:last-child td { border-bottom: 0; }

/* Lien de conception et liens légaux */
a.credit { display: inline-flex; align-items: center; gap: 4px; text-decoration: underline; text-underline-offset: 3px; }
a.credit svg { width: 12px; height: 12px; fill: currentColor; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.liens-legaux { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.lien-bouton { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.lien-bouton:hover { color: var(--laiton); }

/* Bandeau cookies */
.bandeau-cookies { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 0 max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); pointer-events: none; }
.bc-carte { pointer-events: auto; max-width: 720px; margin: 0 auto; background: var(--sol); border: 1px solid var(--joint); border-radius: var(--rayon); box-shadow: 0 24px 60px -24px rgba(12, 58, 120, .45); padding: 20px 22px; display: grid; gap: 12px; font-size: var(--t-s); }
.bc-titre { font-family: var(--f-titre); font-weight: 600; font-size: var(--t-m); color: var(--bleu-fonce); }
.bc-carte p { color: var(--gris); }
.bc-reglages { display: grid; gap: 8px; padding: 10px 0; border-block: 1px solid var(--joint); }
.bc-reglages label { display: flex; gap: 10px; align-items: center; }
.bandeau-cookies[hidden], .bc-reglages[hidden] { display: none; }
.bc-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.bc-actions .btn { padding: 9px 16px; }

/* Pied de page */
footer.site { background: color-mix(in srgb, var(--nuit) 85%, transparent); color: var(--nuit-txt); border-top: 1px solid var(--nuit-ligne); }
footer.site .wrap { padding-block: 48px 28px; display: grid; gap: 32px; }
footer .colonnes { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
footer h3 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--laiton); font-weight: 500; margin-bottom: 10px; }
footer p, footer li { font-size: var(--t-s); color: var(--nuit-doux); }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
footer a { text-decoration: none; }
footer .lien-contact { color: var(--nuit-txt); }
footer a:hover { color: var(--laiton); }

footer .bas { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--nuit-ligne); padding-top: 20px; font-family: var(--f-titre); font-size: var(--t-xs); color: var(--nuit-doux); }
footer .ico { background: var(--sol); border-color: var(--nuit-ligne); color: var(--nuit-txt); }
footer .trou { color: var(--a-completer); }
@media (max-width: 860px) { footer .colonnes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { footer .colonnes { grid-template-columns: 1fr; } }

/* WhatsApp flottant */
.wa-flottant { position: fixed; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 6; width: 56px; height: 56px; border-radius: 50%; background: var(--wa); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .22); }
.wa-flottant svg { width: 28px; height: 28px; fill: currentColor; }

/* Fond animé : carreaux posés au défilement, derrière tout le contenu */
#pose { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main, footer.site { position: relative; z-index: 1; }

/* Apparition douce des blocs */
.anim .revele { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
.anim .revele.vu { opacity: 1; transform: none; }
.anim .carreaux .revele:nth-child(4n+2), .anim .approche li:nth-child(2) { transition-delay: .08s; }
.anim .carreaux .revele:nth-child(4n+3), .anim .approche li:nth-child(3) { transition-delay: .16s; }
.anim .carreaux .revele:nth-child(4n+4), .anim .approche li:nth-child(4) { transition-delay: .24s; }
.anim .approche li:nth-child(5) { transition-delay: .32s; }

@media (prefers-reduced-motion: no-preference) {
  section.page { animation: pose .35s ease-out; }
  @keyframes pose { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* WordPress */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.devis .piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.devis .consentement { font-size: var(--t-xs); color: var(--gris); line-height: 1.5; }
.devis .retour.ok { color: #1d6b3a; }
.devis .retour.erreur { color: #a3261b; }
.insta .btn svg { width: 18px; height: 18px; fill: currentColor; }
.insta .btn { display: inline-flex; align-items: center; gap: 8px; }
.insta-flux #sb_instagram { padding: 0 !important; }
.insta-flux #sb_instagram .sbi_photo { border-radius: 6px; }
/* Avis en carreaux */
.avis .tete { text-align: center; justify-items: center; }
.avis-defile { position: relative; margin: 0 auto; max-width: 1180px; background: var(--joint); border-radius: 18px; box-shadow: inset 0 1px 3px rgba(12, 58, 120, .12); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.avis-defile::-webkit-scrollbar { display: none; }
.avis-pose { list-style: none; margin: 0; padding: 12px 10px 20px; display: flex; flex-wrap: nowrap; gap: 10px; width: max-content; }
.avis-defile.manuel { scroll-snap-type: x proximity; }
.avis-defile.manuel .avis-carreau { scroll-snap-align: center; }
.avis-carreau { perspective: 900px; flex: none; width: 330px; min-height: 260px; }
.avis-carreau article { --rx: 0deg; --ry: 0deg; --mx: 30%; --my: 0%; position: relative; height: 100%; display: flex; flex-direction: column; gap: 14px; padding: 26px 24px 22px; border-radius: 8px; overflow: hidden; color: var(--encre);
  background: radial-gradient(120% 90% at var(--mx) var(--my), rgba(255,255,255,.75), rgba(255,255,255,0) 55%), linear-gradient(145deg, #e4eef9, #c9dbf1 60%, #b9d0ec);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), inset 0 -6px 14px rgba(12,58,120,.10), 0 1px 2px rgba(12,58,120,.15);
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .4s; transform-style: preserve-3d; }
.avis-carreau.v1 article { background: radial-gradient(120% 90% at var(--mx) var(--my), rgba(255,255,255,.75), rgba(255,255,255,0) 55%), linear-gradient(160deg, #dbe8f7, #bfd5f0 65%, #aac6ea); }
.avis-carreau.v2 article { background: radial-gradient(120% 90% at var(--mx) var(--my), rgba(255,255,255,.75), rgba(255,255,255,0) 55%), linear-gradient(130deg, #eaf2fb, #d2e2f4 55%, #c3d8f0); }
.avis-carreau.v3 article { background: radial-gradient(120% 90% at var(--mx) var(--my), rgba(255,255,255,.75), rgba(255,255,255,0) 55%), linear-gradient(150deg, #d6e5f6, #b6cfee 60%, #a3c0e6); }
.avis-carreau article::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(12,58,120,.16); border-radius: 4px; pointer-events: none; }
.avis-carreau article::after { content: "“"; position: absolute; right: 18px; bottom: -34px; font: 700 9rem/1 var(--f-accent); color: rgba(12,58,120,.08); pointer-events: none; }
.avis-carreau:hover article { box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), inset 0 -6px 14px rgba(12,58,120,.10), 0 18px 30px -12px rgba(12,58,120,.45); transition: transform .12s linear, box-shadow .4s; z-index: 1; }
.avis-carreau .etoiles { display: flex; gap: 3px; }
.avis-carreau .etoiles svg { width: 18px; height: 18px; }
.avis-carreau .etoiles .pleine { fill: #0c3a78; }
.avis-carreau .etoiles .vide { fill: rgba(12,58,120,.2); }
.avis-carreau blockquote { margin: 0; flex: 1; }
.avis-carreau blockquote p { margin: 0; font: italic 400 var(--t-m)/1.55 var(--f-accent); color: var(--encre); }
.avis-carreau footer { display: flex; align-items: center; gap: 12px; }
.avis-carreau .initiale { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #0c3a78; color: #fff; font: 700 1rem var(--f-titre); }
.avis-carreau footer strong { display: block; font: 600 var(--t-s) var(--f-titre); }
.avis-carreau footer small { display: block; font-size: var(--t-xs); color: var(--nuit-doux); }
.avis .suite { display: flex; justify-content: center; margin-top: 32px; }
@media (max-width: 640px) { .avis-carreau { width: 80vw; max-width: 330px; } }
@media (prefers-reduced-motion: reduce) { .avis-carreau article { transition: none; transform: none; } }
.avis .aide { text-align: center; font-size: var(--t-xs); color: var(--gris); margin-top: 14px; }
body.admin-bar header.site { top: 32px; }
@media (max-width: 782px) { body.admin-bar header.site { top: 46px; } }