/*
Theme Name: CK Services
Theme URI: https://ckservices29.fr
Author: AOmega
Description: Thème bloc sur mesure de CK Services, nettoyage de vitres et de bureaux à Quimper. Tout le contenu est en blocs natifs, éditable dans Gutenberg.
Version: 1.0.6
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ck-services
Tags: block-theme, full-site-editing, business
*/

/* CK Services — maquette (phase 2)
   Registre relevé sur vitclean.fr : Inter + JetBrains Mono, neutres Apple,
   un seul accent (ici le bleu du logo CK), rectangles arrondis, pilules. */

:root {
  --fond: #FBFBFD;
  --perle: #F5F5F7;
  --encre: #1D1D1F;
  --nuit: #0A0A0C;
  --nuit-2: #05080D;
  --gris: #6E6E73;
  --gris-clair: #6E6E73;    /* aligné sur --gris : 4,7:1 sur perle, lisible en petit */
  --bleu: #1B73B5;          /* bleu du logo : accent sur fond clair */
  --ciel: #99CEFF;          /* même teinte, clarté du cyan de la référence : accent sur fond sombre */
  --marine: #142C4D;        /* C du logo */
  --etoile: #FBBC04;
  --panneau: linear-gradient(135deg, #0E2642 0%, #153559 55%, #224977 100%);
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --serre: -0.035em;
  --enveloppe: 1116px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 400 16px/1.5 var(--sans);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: var(--serre); text-wrap: balance; hyphens: none; }
p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.enveloppe { width: min(var(--enveloppe), 100% - 48px); margin-inline: auto; }
.accent { color: var(--ciel); }
.surtitre { font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Boutons ---------- */
.boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 28px; border-radius: 999px;
  font: 500 16px/1 var(--sans); letter-spacing: -0.01em; white-space: nowrap;
  transition: transform .25s ease, background-color .25s ease, color .25s ease;
}
.bouton:hover { transform: translateY(-1px); }
.bouton svg { width: 16px; height: 16px; flex: none; }
.bouton-blanc { background: #fff; color: var(--encre); }
.bouton-verre { color: #fff; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.bouton-verre:hover { background: rgba(255, 255, 255, .14); }

/* ---------- En-tête ---------- */
.entete { position: fixed; inset: 0 0 auto; z-index: 50; padding: 12px 24px; }
.entete-ligne { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 52px; }
.logo { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; width: max-content; --logo-c: #fff; --logo-b: var(--ciel); }
.logo svg { width: 84px; height: 38px; }
.logo-mot { font: 600 8px/1 var(--sans); letter-spacing: .46em; margin-right: -.46em; color: var(--logo-c); transition: color .3s; }
.menu {
  display: flex; gap: 2px; padding: 4px 6px; border-radius: 999px;
  background: rgba(29, 29, 31, .34);
  backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px);
  transition: background-color .3s, box-shadow .3s;
}
.menu a { padding: 9px 15px; border-radius: 999px; font: 500 13px/1 var(--sans); color: rgba(255, 255, 255, .94); transition: background-color .2s, color .3s; }
.menu a:hover { background: rgba(255, 255, 255, .14); }
.entete-actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
.bouton-entete { height: 40px; padding: 0 20px; font-size: 13px; background: #fff; color: var(--encre); }
.bouton-entete span { font-size: 15px; line-height: 1; margin-top: -1px; }
.burger { display: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(29, 29, 31, .34); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); place-items: center; }
.burger span, .burger span::before, .burger span::after { display: block; width: 16px; height: 1.5px; background: #fff; border-radius: 2px; position: relative; transition: transform .3s, background-color .3s; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -5px; }
.burger span::after { top: 5px; }

/* état défilé : pilule claire, logo aux couleurs de marque */
.entete.defile .menu { background: rgba(255, 255, 255, .72); box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 8px 24px -12px rgba(0, 0, 0, .12); }
.entete.defile .menu a { color: var(--encre); }
.entete.defile .menu a:hover { background: rgba(0, 0, 0, .05); }
.entete.defile .logo { --logo-c: var(--marine); --logo-b: var(--bleu); }
.entete.defile .bouton-entete { background: var(--encre); color: var(--fond); }
.entete.defile .burger { background: rgba(255, 255, 255, .72); box-shadow: 0 0 0 1px rgba(0, 0, 0, .05); }
.entete.defile .burger span, .entete.defile .burger span::before, .entete.defile .burger span::after { background: var(--encre); }
/* au-dessus d'une section sombre, le logo repasse en clair */
.entete.defile.sur-sombre .logo { --logo-c: #fff; --logo-b: var(--ciel); }
.entete.defile.sur-sombre .bouton-entete { background: #fff; color: var(--encre); }

.menu-mobile {
  position: fixed; inset: 0; z-index: 49; padding: 96px 24px 32px;
  background: rgba(251, 251, 253, .96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column; gap: 4px;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.menu-mobile a { font-size: 34px; font-weight: 600; letter-spacing: var(--serre); padding: 8px 0; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.menu-mobile .bouton { margin-top: 28px; align-self: flex-start; font-size: 16px; letter-spacing: -0.01em; border: 0; padding: 0 28px; background: var(--encre); color: var(--fond); }
.menu-ouvert .menu-mobile { opacity: 1; visibility: visible; }
.menu-ouvert .entete .logo { --logo-c: var(--marine); --logo-b: var(--bleu); }
.menu-ouvert .entete .burger { background: rgba(0, 0, 0, .06); }
.menu-ouvert .entete .burger span { background: transparent; }
.menu-ouvert .entete .burger span::before { top: 0; transform: rotate(45deg); background: var(--encre); }
.menu-ouvert .entete .burger span::after { top: 0; transform: rotate(-45deg); background: var(--encre); }

/* ---------- Accueil : hero collant ---------- */
.hero { position: sticky; top: 0; height: 100svh; min-height: 620px; max-height: 920px; overflow: hidden; background: var(--nuit-2); color: #fff; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 36%; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 8, 13, .45) 0%, rgba(5, 8, 13, 0) 20%, rgba(5, 8, 13, 0) 42%, rgba(5, 8, 13, .82) 100%),
    linear-gradient(90deg, rgba(5, 8, 13, .5) 0%, rgba(5, 8, 13, 0) 58%);
}
.hero-contenu { position: absolute; z-index: 2; left: 48px; right: 48px; bottom: 56px; max-width: 660px; }
.hero h1 { font-size: 64px; line-height: 1.12; }
.hero-texte { margin-top: 20px; max-width: 450px; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .84); }
.hero .boutons { margin-top: 32px; }

.contenu { position: relative; z-index: 10; background: var(--fond); }

/* ---------- Sections ---------- */
.section-lg { padding-block: 128px; }
.section { padding-block: 96px; }
.sans-haut { padding-top: 0; }
.tete-section { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pastille { display: inline-flex; align-items: center; gap: 7px; font: 500 13px/1 var(--sans); color: var(--bleu); }
.pastille svg { width: 11px; height: 11px; fill: currentColor; }
.titre-section { margin-top: 18px; font-size: 64px; line-height: 1.04; }
.chapo { margin-top: 22px; max-width: 610px; font-size: 17px; line-height: 1.5; color: var(--gris); }

/* Services : deux cartes photo */
.cartes { margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.carte { position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; min-height: 436px; display: flex; flex-direction: column; justify-content: flex-end; color: #F5F5F7; }
.carte-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.carte::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .04) 0%, rgba(0, 0, 0, .5) 38%, rgba(0, 0, 0, .84) 100%); }
.carte:hover .carte-photo { transform: scale(1.035); }
.carte-corps { padding: 36px 36px 0; }
.carte .surtitre { color: rgba(255, 255, 255, .75); letter-spacing: .08em; }
.carte h3 { margin-top: 10px; font-size: 37.44px; line-height: 1.06; }
.carte-texte { margin-top: 12px; max-width: 400px; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .86); }
.etiquette { display: inline-flex; margin-top: 18px; height: 32px; padding: 0 14px; border-radius: 999px; background: #fff; color: var(--encre); font: 600 13px/32px var(--sans); letter-spacing: -0.01em; }
.carte-pied { margin: 22px 36px 0; padding: 18px 0 26px; border-top: 1px solid rgba(255, 255, 255, .18); display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; }

/* Panneau dégradé : devis + note Google */
.panneau-devis { border-radius: 28px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; background: var(--panneau); color: var(--perle); }
.panneau-gauche { padding: 56px 48px; }
.panneau-gauche .surtitre { color: var(--ciel); }
.panneau-gauche h2 { margin-top: 16px; font-size: 44px; line-height: 1.08; }
.panneau-gauche p { margin-top: 18px; max-width: 420px; font-size: 15px; line-height: 1.6; color: rgba(245, 245, 247, .72); }
.lien-ciel { display: inline-block; margin-top: 26px; font-size: 14px; font-weight: 500; color: var(--ciel); }
.panneau-droit { padding: 56px 48px; background: rgba(255, 255, 255, .04); border-left: 1px solid rgba(255, 255, 255, .06); display: flex; flex-direction: column; justify-content: center; }
.panneau-droit .surtitre { color: rgba(245, 245, 247, .6); }
.note { display: flex; align-items: baseline; gap: 14px; margin-top: 14px; }
.note-chiffre { font-size: 88px; font-weight: 600; letter-spacing: -0.045em; line-height: 1; color: var(--ciel); }
.note-sur { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: rgba(245, 245, 247, .55); }
.etoiles { color: var(--etoile); letter-spacing: 2px; }
.note-etoiles { margin-top: 10px; font-size: 18px; }
.panneau-droit .petit { margin-top: 16px; max-width: 340px; font-size: 13px; line-height: 1.6; color: rgba(245, 245, 247, .6); }

/* Triptyque photo + vidéo */
.triptyque { background: var(--nuit); }
.triptyque-grille { display: grid; grid-template-columns: 1fr 1.08fr 1fr; gap: 10px; height: 780px; }
.triptyque figure { position: relative; margin: 0; overflow: hidden; background: #111; }
.triptyque figure img { width: 100%; height: 100%; object-fit: cover; }
.triptyque figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 12, 0) 55%, rgba(10, 10, 12, .6) 100%); pointer-events: none; }
.triptyque .video-panneau::after { background: rgba(10, 10, 12, .42); }
.lecture { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; }
.lecture-rond { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: transform .3s, background-color .3s; }
.lecture-rond svg { width: 26px; height: 26px; margin-left: 4px; fill: #fff; }
.lecture:hover .lecture-rond { transform: scale(1.06); background: rgba(255, 255, 255, .26); }
.lecture .surtitre { position: absolute; bottom: 48px; letter-spacing: .16em; color: rgba(255, 255, 255, .85); }

/* Bande sombre (zone d'intervention, étapes) */
.bande-sombre { position: relative; overflow: hidden; background: var(--nuit); color: #fff; padding: 112px 0 160px; }
.bande-sombre::before { content: ""; position: absolute; width: 1000px; height: 700px; right: -260px; top: 18%; background: radial-gradient(closest-side, rgba(27, 115, 181, .2), rgba(27, 115, 181, 0)); pointer-events: none; }
.bande-sombre .enveloppe { position: relative; }
.bande-sombre .surtitre { display: inline-flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .72); }
.puce { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ciel); box-shadow: 0 0 0 3px rgba(153, 206, 255, .16), 0 0 12px rgba(153, 206, 255, .55); }
.bande-sombre .titre-section { margin-top: 20px; }
.bande-sombre .chapo { margin-top: 18px; font-size: 15px; color: rgba(255, 255, 255, .6); }
.communes { list-style: none; margin: 56px auto 0; padding: 0; max-width: 900px; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 40px; row-gap: 10px; }
.communes li { display: flex; align-items: center; gap: 12px; padding: 12px 0 14px; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 15px; }
.lien-centre { display: block; width: max-content; margin: 48px auto 0; font-size: 14px; font-weight: 500; }

/* Bande perle qui remonte sur la section sombre (avant / après, mentions) */
.bande-perle { position: relative; z-index: 2; margin-top: -64px; border-radius: 48px 48px 0 0; background: var(--perle); padding-block: 96px; }
.bande-perle > .enveloppe > .surtitre { text-align: center; letter-spacing: .16em; color: var(--gris-clair); }
.aa-grille { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.aa { margin: 0; }
.aa-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; }
.aa-photos > div { position: relative; }
.aa-photos img { width: 100%; height: 100%; object-fit: cover; }
.aa-etiquette { position: absolute; left: 10px; bottom: 10px; padding: 6px 9px; border-radius: 999px; font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; background: rgba(255, 255, 255, .9); color: var(--encre); }
.aa-etiquette.apres { background: var(--bleu); color: #fff; }
.aa figcaption { margin-top: 16px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.aa-legende { margin: 44px auto 0; max-width: 520px; text-align: center; font-size: 14px; line-height: 1.6; color: var(--gris-clair); }

/* Avis */
.avis-resume { display: flex; justify-content: center; align-items: center; gap: 10px; font: 400 12.5px/1 var(--mono); color: var(--gris); }
.avis-resume .etoiles { font-size: 13px; letter-spacing: 1px; }
.avis-grille { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }
.avis-grille figure { margin: 0; display: flex; flex-direction: column; }
.avis-grille blockquote { margin: 0; }
.avis-grille h3 { font-size: 31.68px; line-height: 1.15; }
.avis-grille p { margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--gris); }
.avis-grille figcaption { margin-top: auto; padding-top: 28px; font: 400 11.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--gris); }
.avis-grille figcaption span { color: var(--gris-clair); }
.avis .lien-centre { margin-top: 56px; }

/* Appel final */
.appel { position: relative; isolation: isolate; overflow: hidden; border-radius: 32px; min-height: 440px; display: grid; grid-template-columns: 1.3fr 1fr; color: #fff; box-shadow: 0 40px 80px -28px rgba(15, 80, 140, .35), 0 8px 24px -8px rgba(0, 0, 0, .18); }
.appel-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.appel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 20, 38, .9) 0%, rgba(8, 20, 38, .74) 55%, rgba(8, 20, 38, .62) 100%); }
.appel-gauche { padding: 64px; display: flex; flex-direction: column; justify-content: center; }
.appel h2 { font-size: 56px; line-height: 1.04; }
.appel-texte { margin-top: 20px; max-width: 440px; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .8); }
.appel .boutons { margin-top: 32px; }
.appel-droit { margin: 0; padding: 64px 64px 64px 24px; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.appel-droit dt { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.appel-droit dd { margin: 8px 0 0; font-size: 15px; }

/* ---------- Pied de page ---------- */
.pied { position: relative; overflow: hidden; background: var(--nuit); color: rgba(245, 245, 247, .85); padding-top: 96px; }
.pied::before { content: ""; position: absolute; width: 900px; height: 500px; right: -300px; bottom: -260px; background: radial-gradient(closest-side, rgba(27, 115, 181, .18), rgba(27, 115, 181, 0)); pointer-events: none; }
.pied .enveloppe { position: relative; }
.pied-grille { display: grid; grid-template-columns: 1.5fr 1fr 1.3fr 1fr; gap: 40px; }
.pied .logo { --logo-c: #fff; --logo-b: var(--ciel); }
.pied .logo svg { width: 88px; height: 40px; }
.pied .logo-mot { font-size: 10px; }
.pied-intro { margin-top: 22px; font-size: 13px; line-height: 1.7; color: rgba(245, 245, 247, .6); }
.pied-intro + .pied-intro { margin-top: 16px; }
.pied-contact { margin-top: 18px; display: grid; gap: 8px; font-size: 13px; }
.pied h3 { font: 400 11px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(245, 245, 247, .62); }
.pied ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; font-size: 13px; }
.pied ul.deux-colonnes { grid-template-columns: 1fr 1fr; column-gap: 16px; }
.pied a:hover { color: #fff; }
.credit { white-space: nowrap; margin-left: 40px; }
.reseau { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 13px; }
.reseau-icone { flex: none; width: 32px; height: 32px; transition: transform .25s ease; }
.reseau-tuile { fill: var(--bleu); transition: fill .25s ease; }
.reseau:hover .reseau-icone { transform: translateY(-2px); }
.reseau:hover .reseau-tuile, .reseau:focus-visible .reseau-tuile { fill: var(--marine); }
.pied-bas { margin-top: 72px; padding: 24px 0 28px; border-top: 1px solid rgba(255, 255, 255, .08); display: flex; justify-content: space-between; gap: 16px; font: 400 11px/1.4 var(--mono); color: rgba(245, 245, 247, .62); }

/* ---------- Pages intérieures ---------- */
.hero-page { height: 680px; min-height: 0; max-height: none; }
.hero-page::after { background: linear-gradient(180deg, rgba(8, 20, 38, .66) 0%, rgba(8, 20, 38, .7) 55%, rgba(8, 20, 38, .88) 100%); }
.hero-page .hero-contenu { left: 0; right: 0; bottom: 104px; width: min(var(--enveloppe), 100% - 48px); max-width: none; margin-inline: auto; }
.ariane { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: rgba(255, 255, 255, .6); }
.ariane a:hover, .ariane [aria-current] { color: #fff; }
.badge { display: inline-flex; margin-top: 22px; padding: 7px 12px; border-radius: 999px; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .86); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.hero-page h1 { margin-top: 20px; font-size: 68px; line-height: 1.04; }
.hero-page .hero-texte { margin-top: 22px; max-width: 560px; font-size: 17px; color: rgba(255, 255, 255, .76); }

.titre-gauche { margin-top: 16px; font-size: 44px; line-height: 1.06; }
.chapo-gauche { margin-top: 18px; max-width: 520px; font-size: 17px; line-height: 1.55; color: var(--gris); }
.bouton-noir { background: var(--encre); color: var(--fond); }
.menu a[aria-current] { background: rgba(255, 255, 255, .16); }
.entete.defile .menu a[aria-current] { background: rgba(0, 0, 0, .06); }

/* Service détaillé : photo + texte */
.service { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.service + .service { margin-top: 128px; }
.service-photo { margin: 0; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; }
.service-photo img { width: 100%; height: 100%; object-fit: cover; }
.service.inverse .service-photo { order: 2; }
.service .boutons { margin-top: 36px; }
.coches { list-style: none; margin: 32px 0 0; padding: 0; max-width: 520px; }
.coches li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(0, 0, 0, .08); font-size: 15px; }
.coches li::before { content: ""; flex: none; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B73B5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Étapes (dans une bande sombre) */
.etapes-grille { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.etape { padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .14); }
.etape-num { font: 500 12px/1 var(--mono); letter-spacing: .1em; color: var(--ciel); }
.etape h3 { margin-top: 20px; font-size: 31.68px; line-height: 1.12; }
.etape p { margin-top: 14px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .62); }

/* Galerie */
.galerie { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 300px; gap: 16px; }
.galerie figure { position: relative; margin: 0; border-radius: 24px; overflow: hidden; background: var(--perle); }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.galerie figure:hover img { transform: scale(1.03); }
.galerie .haut { grid-row: span 2; }
.galerie .large { grid-column: span 2; }
.galerie .pleine { grid-column: 1 / -1; }
.galerie figcaption { position: absolute; left: 14px; bottom: 14px; padding: 7px 11px; border-radius: 999px; font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; background: rgba(255, 255, 255, .9); color: var(--encre); }

/* Contact : carte de coordonnées + formulaire */
.contact-grille { display: grid; grid-template-columns: 400px 1fr; gap: 72px; align-items: start; }
.contact-carte { position: sticky; top: 96px; border-radius: 28px; padding: 44px 40px; background: var(--panneau); color: var(--perle); }
.contact-carte .surtitre { color: var(--ciel); }
.contact-chiffre { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.contact-chiffre strong { font-size: 72px; font-weight: 600; letter-spacing: -0.045em; line-height: 1; color: var(--ciel); }
.contact-chiffre span { max-width: 170px; font-size: 13.5px; line-height: 1.45; color: rgba(245, 245, 247, .66); }
.contact-carte .coches { margin-top: 28px; }
.contact-carte .coches li { padding: 12px 0; font-size: 14px; border-bottom-color: rgba(255, 255, 255, .1); color: rgba(245, 245, 247, .9); }
.contact-carte .coches li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2399CEFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.contact-coord { margin: 30px 0 0; display: grid; gap: 18px; }
.contact-coord dt { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(245, 245, 247, .72); }
.contact-coord dd { margin: 7px 0 0; font-size: 15px; }

.formulaire { display: grid; gap: 36px; }
.etape-form + .etape-form { padding-top: 32px; border-top: 1px solid rgba(0, 0, 0, .08); }
.etape-form-tete { display: flex; align-items: baseline; gap: 14px; }
.etape-form-tete span { font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--gris-clair); }
.etape-form-tete h3 { font-size: 17px; letter-spacing: -0.01em; }
.aide { margin-top: 6px; padding-left: 34px; font-size: 13.5px; color: var(--gris); }
.choix { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.choix label { position: relative; }
.choix input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.choix .wpcf7-list-item-label { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); font-size: 14px; font-weight: 500; transition: background-color .2s, color .2s, box-shadow .2s; }
.choix input:checked + .wpcf7-list-item-label { background: var(--encre); color: var(--fond); box-shadow: none; }
.choix input:focus-visible + .wpcf7-list-item-label { outline: 2px solid var(--bleu); outline-offset: 2px; }
.champs { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.champ { display: grid; gap: 6px; }
.champ.plein { grid-column: 1 / -1; }
.champ label { font-size: 12.5px; font-weight: 500; }
.champ input, .champ textarea { width: 100%; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(0, 0, 0, .14); background: #fff; font: 400 15px/1.4 var(--sans); color: var(--encre); transition: border-color .2s, box-shadow .2s; }
.champ textarea { height: 140px; padding: 12px 14px; resize: vertical; }
.champ input::placeholder, .champ textarea::placeholder { color: #A1A1A6; }
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 4px rgba(27, 115, 181, .12); }
.formulaire-envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.formulaire-envoi .bouton { height: 52px; }
.formulaire-note { font-size: 13px; color: var(--gris); }
.formulaire-note a { color: var(--bleu); text-decoration: underline; text-underline-offset: 3px; }
.formulaire-merci { display: none; padding: 18px 20px; border-radius: 12px; background: rgba(27, 115, 181, .08); color: var(--marine); font-size: 15px; }
.formulaire.envoye .formulaire-merci { display: block; }

.a-completer { color: var(--bleu); font-weight: 500; }

/* Récit (À propos) : grand titre à gauche, texte à droite */
.recit { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.recit h2 { font-size: 64px; line-height: 1.04; }
.recit-texte { padding-top: 10px; }
.recit-texte p { font-size: 17px; line-height: 1.6; color: var(--gris); }
.recit-texte p + p { margin-top: 18px; }
.recit-texte .coches { margin-top: 24px; }
.recit-texte .boutons { margin-top: 32px; }
.titre-grand { margin-top: 16px; font-size: 64px; line-height: 1.04; }
.chapo-gauche + .chapo-gauche { margin-top: 14px; }
.section-perle { background: var(--perle); }
.lien-gauche { margin: 28px 0 0; }
.service .aa-photos { aspect-ratio: 1; }

/* Page 404 : hero plein écran, grand chiffre, pistes de retour */
.hero-404 { max-height: none; min-height: 680px; }
.hero-404::after { background: linear-gradient(180deg, rgba(8, 20, 38, .5) 0%, rgba(8, 20, 38, .55) 45%, rgba(8, 20, 38, .9) 100%), linear-gradient(90deg, rgba(8, 20, 38, .55) 0%, rgba(8, 20, 38, 0) 60%); }
.hero-404 .hero-contenu { left: 0; right: 0; width: min(var(--enveloppe), 100% - 48px); max-width: none; margin-inline: auto; bottom: 88px; }
.chiffre-404 { margin-top: 18px; font-size: 176px; font-weight: 600; letter-spacing: -0.06em; line-height: .86; color: var(--ciel); }
.hero-404 h1 { margin-top: 18px; font-size: 64px; line-height: 1.06; }
.pistes { margin-top: 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.piste { display: flex; flex-direction: column; min-height: 220px; padding: 30px 28px 26px; border-radius: 24px; background: var(--perle); transition: background-color .25s ease, transform .25s ease; }
.piste:hover { background: #EDEDF1; transform: translateY(-2px); }
.piste h2 { font-size: 26px; line-height: 1.1; }
.piste p { margin-top: 12px; font-size: 14.5px; line-height: 1.55; color: var(--gris); }
.piste-lien { margin-top: auto; padding-top: 22px; font-size: 13.5px; font-weight: 500; color: var(--bleu); }

/* ---------- Visionneuse vidéo ---------- */
.visionneuse { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(5, 8, 13, .94); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.visionneuse.ouverte { opacity: 1; visibility: visible; }
.visionneuse video { width: auto; height: min(86vh, 1100px); max-width: 100%; aspect-ratio: 9 / 16; object-fit: contain; border-radius: 24px; background: #000; }
.visionneuse .fermer { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 22px; line-height: 44px; }

/* Mentions légales : sommaire collant + texte */
.hero-court { height: 520px; }
.legal { display: grid; grid-template-columns: 260px 1fr; gap: 80px; align-items: start; }
.legal-sommaire { position: sticky; top: 104px; }
.legal-sommaire .surtitre { color: var(--gris-clair); }
.legal-sommaire ol { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 2px; counter-reset: rubrique; }
.legal-sommaire li { counter-increment: rubrique; }
.legal-sommaire a { display: flex; gap: 12px; padding: 9px 12px; border-radius: 12px; font-size: 14px; color: var(--gris); transition: background-color .2s, color .2s; }
.legal-sommaire a::before { content: counter(rubrique, decimal-leading-zero); font: 500 11px/1.9 var(--mono); color: var(--bleu); }
.legal-sommaire a:hover { background: var(--perle); color: var(--encre); }
.legal-texte section { scroll-margin-top: 100px; padding-bottom: 40px; }
.legal-texte section + section { padding-top: 40px; border-top: 1px solid rgba(0, 0, 0, .08); }
.legal-texte h2 { font-size: 30px; line-height: 1.1; }
.legal-texte p { margin-top: 14px; max-width: 680px; font-size: 16px; line-height: 1.7; color: var(--gris); }
.legal-texte a, .legal-lien { color: var(--bleu); text-decoration: underline; text-underline-offset: 3px; }
.legal-lien { font: inherit; }
.legal-fiche { margin: 22px 0 0; display: grid; gap: 0; max-width: 680px; }
.legal-fiche > div { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 13px 0; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.legal-fiche dt { font: 500 11px/1.9 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gris-clair); }
.legal-fiche dd { margin: 0; font-size: 15.5px; line-height: 1.6; }
.legal-fiche dd a { color: inherit; text-decoration: none; }
.legal-maj { font: 500 11px/1.4 var(--mono) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-clair) !important; margin-top: 28px !important; }

/* ---------- Bouton « haut de page » ---------- */
.haut-de-page { position: fixed; z-index: 80; right: 20px; bottom: 20px; width: 50px; height: 50px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--bleu); box-shadow: 0 12px 28px -10px rgba(27, 115, 181, .65); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease, visibility .3s, background-color .25s ease, box-shadow .25s ease; }
.haut-de-page.visible { opacity: 1; visibility: visible; transform: none; }
.haut-de-page.visible:hover { background: var(--marine); box-shadow: 0 14px 30px -10px rgba(20, 44, 77, .7); transform: translateY(-3px); }
.haut-de-page svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.haut-de-page:focus-visible { outline: 2px solid var(--ciel); outline-offset: 3px; }
/* pas de chevauchement avec le bandeau cookies tant qu'il est affiché */
.cookies-bandeau:not([hidden]) ~ .haut-de-page { display: none; }

/* ---------- Consentement cookies ---------- */
/* bouton flottant (après le choix) pour rouvrir les réglages */
.cookies-reglages { position: fixed; z-index: 80; left: 20px; bottom: 20px; height: 40px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 999px; color: #fff; background: rgba(10, 10, 12, .86); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 0 0 4px rgba(153, 206, 255, .08), 0 10px 24px -10px rgba(0, 0, 0, .55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background-color .25s; }
.cookies-reglages[hidden] { display: none; }
.cookies-reglages svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linejoin: round; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.cookies-reglages span { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; font-size: 12.5px; font-weight: 500; transition: max-width .35s ease, opacity .25s ease, margin .35s ease; }
.cookies-reglages:hover, .cookies-reglages:focus-visible { background: var(--encre); }
.cookies-reglages:hover svg, .cookies-reglages:focus-visible svg { transform: rotate(90deg); }
.cookies-reglages:hover span, .cookies-reglages:focus-visible span { max-width: 160px; opacity: 1; margin: 0 4px 0 8px; }
.cookies-reglages:focus-visible { outline: 2px solid var(--ciel); outline-offset: 3px; }

/* 1er niveau : bandeau flottant en bas d'écran */
.cookies-bandeau { position: fixed; z-index: 90; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(1116px, 100% - 32px); display: flex; align-items: center; gap: 28px; padding: 22px 64px 22px 28px; border-radius: 24px; background: rgba(10, 10, 12, .94); color: #F5F5F7; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .5); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.cookies-bandeau[hidden] { display: none; }
.cookies-bandeau-texte { flex: 1; font-size: 14px; line-height: 1.55; color: rgba(245, 245, 247, .78); }
.cookies-bandeau-texte strong { color: #fff; font-weight: 600; }
.cookies-lien { font: inherit; color: var(--ciel); text-decoration: underline; text-underline-offset: 3px; }
.cookies-bandeau-actions { display: flex; gap: 10px; flex: none; }
.cookies-bandeau-actions .bouton { height: 44px; padding: 0 22px; font-size: 14px; }
.cookies-bandeau-fermer { position: absolute; top: 12px; right: 14px; width: 32px; height: 32px; border-radius: 50%; font-size: 20px; line-height: 32px; color: rgba(255, 255, 255, .6); }
.cookies-bandeau-fermer:hover { color: #fff; background: rgba(255, 255, 255, .1); }

/* 2e niveau : fenêtre de réglages */
.cookies-voile { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 40px 24px; background: rgba(5, 8, 13, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cookies-voile[hidden] { display: none; }
.cookies-fenetre { position: relative; width: min(1080px, 100%); min-height: min(600px, 100%); max-height: 100%; display: grid; grid-template-columns: 40% 60%; border-radius: 28px; background: #fff; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .55); outline: none; }
.cookies-fermer { position: absolute; top: -22px; right: -22px; z-index: 2; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--encre); transition: transform .25s ease; }
.cookies-fermer:hover { transform: rotate(90deg); }
.cookies-fermer svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }

.cookies-nav { padding: 64px 48px 48px 56px; overflow-y: auto; }
.cookies-badge { display: block; width: 136px; height: auto; }
.cookies-onglets { margin-top: 48px; display: grid; gap: 10px; }
.cookies-onglets button { display: block; width: 100%; padding: 20px 22px; border-radius: 12px; text-align: left; font: 500 11.5px/1.45 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--gris); background: var(--perle); box-shadow: inset 0 0 0 1px transparent; transition: background-color .2s, color .2s, box-shadow .2s; }
.cookies-onglets button:hover { color: var(--encre); }
.cookies-onglets button[aria-selected="true"] { background: #fff; color: var(--encre); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), inset 3px 0 0 var(--bleu); }
.cookies-onglets button:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }

.cookies-corps { display: flex; flex-direction: column; padding: 64px 56px 48px; border-radius: 0 28px 28px 0; background: var(--perle); overflow-y: auto; }
.cookies-panneaux { flex: 1; }
.cookies-panneau h2 { font-size: 34px; line-height: 1.1; }
.cookies-panneau p { margin-top: 18px; max-width: 540px; font-size: 16px; line-height: 1.6; color: var(--gris); }
.cookies-plus { display: inline-block; margin-top: 22px; font-size: 15px; font-weight: 500; color: var(--bleu); text-decoration: underline; text-underline-offset: 3px; }
.cookies-reglage { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(0, 0, 0, .08); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.cookies-reglage-libelle { font-size: 15px; font-weight: 500; }

.interrupteur { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.interrupteur input { position: absolute; opacity: 0; width: 52px; height: 30px; margin: 0; cursor: pointer; }
.interrupteur-piste { position: relative; width: 52px; height: 30px; border-radius: 999px; background: #D2D2D7; transition: background-color .2s; }
.interrupteur-piste::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s; }
.interrupteur input:checked + .interrupteur-piste { background: var(--bleu); }
.interrupteur input:checked + .interrupteur-piste::after { transform: translateX(22px); }
.interrupteur input:disabled { cursor: default; }
.interrupteur input:disabled + .interrupteur-piste { opacity: .55; }
.interrupteur input:focus-visible + .interrupteur-piste { outline: 2px solid var(--bleu); outline-offset: 2px; }
.interrupteur-etat { min-width: 86px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }

.cookies-pied { margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(0, 0, 0, .12); display: flex; justify-content: space-between; gap: 12px; }
.cookies-pied .bouton { min-width: 180px; height: 52px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hero h1, .titre-section { font-size: 56px; }
  .triptyque-grille { height: 640px; }
}

@media (max-width: 900px) {
  .entete { padding: 10px 16px; }
  .entete-ligne { grid-template-columns: 1fr auto; }
  .menu { display: none; }
  .burger { display: grid; }
  .section-lg { padding-block: 88px; }
  .section { padding-block: 72px; }
  .hero h1, .titre-section { font-size: 44px; }
  .hero-contenu { left: 24px; right: 24px; bottom: 40px; }
  .chapo { font-size: 16px; }
  .cartes { grid-template-columns: 1fr; margin-top: 48px; }
  .carte { min-height: 420px; }
  .panneau-devis { grid-template-columns: 1fr; }
  .panneau-gauche, .panneau-droit { padding: 40px 28px; }
  .panneau-droit { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .06); }
  .panneau-gauche h2 { font-size: 34px; }
  .triptyque-grille { grid-template-columns: 1fr; height: auto; }
  .triptyque figure { height: 560px; }
  .triptyque figure:not(.video-panneau) { display: none; }
  .bande-sombre { padding: 88px 0 128px; }
  .communes { grid-template-columns: repeat(2, 1fr); column-gap: 24px; }
  .aa-grille { grid-template-columns: 1fr; gap: 36px; }
  .avis-grille { grid-template-columns: 1fr; gap: 48px; }
  .avis-grille h3 { font-size: 27px; }
  .appel { grid-template-columns: 1fr; }
  .appel-gauche { padding: 48px 28px 8px; }
  .appel-droit { padding: 32px 28px 48px; }
  .appel h2 { font-size: 40px; }
  .pied-grille { grid-template-columns: 1fr 1fr; row-gap: 48px; }
}

@media (max-width: 560px) {
  .enveloppe { width: calc(100% - 32px); }
  .hero-contenu { left: 16px; right: 16px; bottom: 32px; }
  .hero h1 { font-size: 40px; }
  .titre-section { font-size: 38px; }
  .bouton { padding: 0 22px; }
  .carte-corps { padding: 28px 24px 0; }
  .carte-pied { margin-inline: 24px; }
  .carte h3 { font-size: 32px; }
  .note-chiffre { font-size: 72px; }
  .pied-grille { grid-template-columns: 1fr; }
  .pied-bas { flex-direction: column; padding-bottom: 92px; }
  .credit { display: block; margin: 8px 0 0; }
}

/* Pages intérieures, responsive */
@media (max-width: 1100px) {
  .hero-page h1 { font-size: 58px; }
  .contact-grille { grid-template-columns: 340px 1fr; gap: 48px; }
}

@media (max-width: 900px) {
  .hero-page { height: 560px; }
  .hero-page h1 { font-size: 44px; }
  .hero-page .hero-contenu { bottom: 56px; }
  .titre-gauche { font-size: 36px; }
  .service { grid-template-columns: 1fr; gap: 36px; }
  .service + .service { margin-top: 88px; }
  .service.inverse .service-photo { order: 0; }
  .etapes-grille { grid-template-columns: 1fr; gap: 36px; }
  .etape h3 { font-size: 27px; }
  .galerie { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; gap: 12px; }
  .galerie figure:last-child { grid-column: 1 / -1; }
  .contact-grille { grid-template-columns: 1fr; gap: 48px; }
  .contact-carte { position: static; padding: 36px 28px; }
}

@media (max-width: 560px) {
  .hero-page { height: 520px; }
  .hero-page h1 { font-size: 40px; }
  .hero-page .hero-contenu { width: calc(100% - 32px); bottom: 40px; }
  .hero-page .hero-texte { font-size: 16px; }
  .galerie { grid-auto-rows: 170px; }
  .galerie figcaption { left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 6px 9px; border-radius: 12px; font-size: 9.5px; line-height: 1.35; }
  .champs { grid-template-columns: 1fr; }
  .aide { padding-left: 0; }
  .contact-chiffre strong { font-size: 60px; }
}

/* Récit, responsive */
@media (max-width: 900px) {
  .recit { grid-template-columns: 1fr; gap: 24px; }
  .recit h2, .titre-grand { font-size: 44px; }
  .recit-texte { padding-top: 0; }
}
@media (max-width: 560px) {
  .recit h2, .titre-grand { font-size: 38px; }
}

/* Page 404, responsive */
@media (max-width: 900px) {
  .hero-404 .hero-contenu { bottom: 56px; }
  .chiffre-404 { font-size: 128px; }
  .hero-404 h1 { font-size: 44px; }
  .pistes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .hero-404 .hero-contenu { width: calc(100% - 32px); bottom: 40px; }
  .chiffre-404 { font-size: 104px; }
  .hero-404 h1 { font-size: 40px; }
  .pistes { grid-template-columns: 1fr; }
  .piste { min-height: 0; }
}

/* Consentement cookies, responsive */
@media (max-width: 900px) {
  .cookies-bandeau { flex-direction: column; align-items: stretch; gap: 16px; padding: 22px 22px 20px; bottom: 12px; }
  .cookies-bandeau-texte { padding-right: 28px; }
  .cookies-bandeau-actions .bouton { flex: 1; }
  .cookies-voile { padding: 16px; align-items: end; }
  .cookies-fenetre { grid-template-columns: 1fr; min-height: 0; max-height: calc(100svh - 32px); overflow-y: auto; }
  .cookies-fermer { top: 12px; right: 12px; width: 44px; height: 44px; }
  .cookies-nav { padding: 28px 24px 8px; overflow: visible; }
  .cookies-badge { width: 96px; }
  .cookies-onglets { margin-top: 20px; grid-template-columns: 1fr 1fr; gap: 8px; }
  .cookies-onglets button { padding: 14px 14px; font-size: 10.5px; }
  .cookies-corps { padding: 28px 24px 24px; border-radius: 0 0 28px 28px; overflow: visible; }
  .cookies-panneau h2 { font-size: 26px; }
  .cookies-panneau p { font-size: 15px; }
  .cookies-pied .bouton { min-width: 0; flex: 1; padding: 0 16px; }
}

@media (max-width: 560px) {
  .cookies-reglage { flex-direction: column; align-items: flex-start; }
  .cookies-pied { flex-direction: column-reverse; }
  .cookies-pied .bouton { flex: none; width: 100%; }
}

/* Mentions légales, responsive */
@media (max-width: 900px) {
  .hero-court { height: 460px; }
  .legal { grid-template-columns: 1fr; gap: 40px; }
  .legal-sommaire { position: static; }
  .legal-texte h2 { font-size: 26px; }
}
@media (max-width: 560px) {
  .hero-court { height: 420px; }
  .legal-fiche > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ==========================================================================
   Adaptations WordPress (blocs natifs)
   Le CSS de la maquette, au-dessus, reste la référence. Ici, seulement ce que
   le passage en blocs change : figure autour des images, conteneur des boutons,
   navigation du bloc, listes de définition devenues groupes, icônes en masques.
   Les styles de bloc de WordPress sont imprimés APRÈS cette feuille : chaque
   règle est donc plus spécifique que celle du bloc qu'elle surcharge.
   ========================================================================== */

/* Socle */
img { height: auto; }
figure.wp-block-image { margin: 0; }
:where(.wp-block-group) > :where(*), :where(.wp-block-buttons) { margin-block: 0; }
.wp-site-blocks, .wp-block-post-content { padding: 0; margin: 0; }
:is(h1, h2, h3) em { font-style: normal; color: var(--ciel); }
.legal-texte strong { color: var(--bleu); font-weight: 500; }

/* Images en fond : la classe est portée par la figure, l'image la remplit */
.wp-block-image.hero-photo, .wp-block-image.carte-photo, .wp-block-image.appel-photo { position: absolute; inset: 0; }
.wp-block-image.hero-photo img, .wp-block-image.carte-photo img, .wp-block-image.appel-photo img,
.wp-block-image.service-photo img, .galerie .wp-block-image img, .triptyque .wp-block-image img,
.aa-photos .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
.wp-block-image img { object-position: 50% var(--cadre, 50%); }
.wp-block-image.hero-photo { --cadre: 36%; }
.wp-block-image.appel-photo { --cadre: 60%; }
.cadre-30 { --cadre: 30% !important; } .cadre-32 { --cadre: 32% !important; } .cadre-34 { --cadre: 34% !important; }
.cadre-35 { --cadre: 35% !important; } .cadre-36 { --cadre: 36% !important; } .cadre-40 { --cadre: 40% !important; }
.cadre-42 { --cadre: 42% !important; } .cadre-45 { --cadre: 45% !important; } .cadre-50 { --cadre: 50% !important; }
.cadre-55 { --cadre: 55% !important; } .cadre-60 { --cadre: 60% !important; }

/* Boutons : la classe est sur le conteneur, le style sur le lien */
.wp-block-buttons.boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.wp-block-button[class*="btn-"] .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 28px; border: 0; border-radius: 999px;
  font: 500 16px/1 var(--sans); letter-spacing: -0.01em; white-space: nowrap; text-decoration: none;
  transition: transform .25s ease, background-color .25s ease, color .25s ease;
}
.wp-block-button[class*="btn-"] .wp-block-button__link:hover { transform: translateY(-1px); }
.wp-block-button.btn-blanc .wp-block-button__link { background: #fff; color: var(--encre); }
.wp-block-button.btn-noir .wp-block-button__link { background: var(--encre); color: var(--fond); }
.wp-block-button.btn-verre .wp-block-button__link { color: #fff; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.wp-block-button.btn-verre .wp-block-button__link:hover { background: rgba(255, 255, 255, .14); }
.wp-block-button.btn-tel .wp-block-button__link::before { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--icone-tel) center / contain no-repeat; mask: var(--icone-tel) center / contain no-repeat; }
.wp-block-button.btn-entete .wp-block-button__link { height: 40px; padding: 0 20px; font-size: 13px; background: #fff; color: var(--encre); }
.entete.defile .wp-block-button.btn-entete .wp-block-button__link { background: var(--encre); color: var(--fond); }
.entete.defile.sur-sombre .wp-block-button.btn-entete .wp-block-button__link { background: #fff; color: var(--encre); }
input.bouton { border: 0; cursor: pointer; font-family: var(--sans); }
:root {
  --icone-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E");
  --icone-etoile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C54 34 66 46 100 50C66 54 54 66 50 100C46 66 34 54 0 50C34 46 46 34 50 0Z'/%3E%3C/svg%3E");
}

/* En-tête : logo en deux masques colorés (C, puis K + virgule + étoiles) */
.entete-ligne > .wp-block-site-title { justify-self: start; }
.wp-block-buttons.entete-actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
.wp-block-site-title.logo { margin: 0; line-height: 1; }
.wp-block-site-title.logo a { position: relative; display: block; width: 84px; height: 38px; font-size: 0; color: transparent; text-decoration: none; }
.wp-block-site-title.logo a::before, .wp-block-site-title.logo a::after { content: ""; position: absolute; inset: 0; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: background-color .3s; }
.wp-block-site-title.logo a::before { background-color: var(--logo-c); -webkit-mask-image: url("assets/logo-c.svg"); mask-image: url("assets/logo-c.svg"); }
.wp-block-site-title.logo a::after { background-color: var(--logo-b); -webkit-mask-image: url("assets/logo-k.svg"); mask-image: url("assets/logo-k.svg"); }
.wp-block-site-title.logo::after { content: "SERVICES"; font: 600 8px/1 var(--sans); letter-spacing: .46em; margin-right: -.46em; color: var(--logo-c); transition: color .3s; }
.pied .wp-block-site-title.logo { display: flex; width: max-content; }
.pied .wp-block-site-title.logo a { width: 88px; height: 40px; }
.pied .wp-block-site-title.logo::after { font-size: 10px; }

/* Navigation (bloc core/navigation) : pilule centrée, panneau plein écran en mobile */
.wp-block-navigation.menu { display: flex; justify-self: center; padding: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; font: 500 13px/1 var(--sans); }
.entete.defile .wp-block-navigation.menu { background: none; box-shadow: none; }
/* le cœur de WordPress fait hériter chaque élément du fond de la liste : sans ce reset, la pilule se double derrière chaque lien */
.wp-block-navigation.menu .wp-block-navigation-item { background-color: transparent; }
@media (min-width: 901px) {
  .wp-block-navigation.menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
    display: flex; gap: 2px; padding: 4px 6px; border-radius: 999px;
    background: rgba(29, 29, 31, .34); backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px);
    transition: background-color .3s, box-shadow .3s;
  }
  .wp-block-navigation.menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content { display: block; padding: 9px 15px; border-radius: 999px; color: rgba(255, 255, 255, .94); transition: background-color .2s, color .3s; }
  .wp-block-navigation.menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:hover { background: rgba(255, 255, 255, .14); }
  .wp-block-navigation.menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content[aria-current] { background: rgba(255, 255, 255, .16); }
  .entete.defile .wp-block-navigation.menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container { background: rgba(255, 255, 255, .72); box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 8px 24px -12px rgba(0, 0, 0, .12); }
  .entete.defile .wp-block-navigation.menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content { color: var(--encre); }
  .entete.defile .wp-block-navigation.menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:hover { background: rgba(0, 0, 0, .05); }
  .entete.defile .wp-block-navigation.menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content[aria-current] { background: rgba(0, 0, 0, .06); }
}
.wp-block-navigation.menu .wp-block-navigation__responsive-container-open { width: 40px; height: 40px; border-radius: 50%; place-items: center; color: #fff; background: rgba(29, 29, 31, .34); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.wp-block-navigation.menu .wp-block-navigation__responsive-container-open svg { width: 20px; height: 20px; }
.entete.defile .wp-block-navigation.menu .wp-block-navigation__responsive-container-open { color: var(--encre); background: rgba(255, 255, 255, .72); box-shadow: 0 0 0 1px rgba(0, 0, 0, .05); }
.wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open {
  background-color: rgba(251, 251, 253, .98) !important; color: var(--encre) !important;
  padding: 96px 24px 32px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 0; align-items: stretch; }
.wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; }
.wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; }
.wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation-item__content { display: block; width: 100%; padding: 8px 0; font-size: 34px; font-weight: 600; letter-spacing: var(--serre); color: var(--encre); border-bottom: 1px solid rgba(0, 0, 0, .06); }
.wp-block-navigation.menu .wp-block-navigation-item.lien-appel { display: none; }
.wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.lien-appel { display: block; width: auto; margin-top: 28px; align-self: flex-start; }
.wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.lien-appel .wp-block-navigation-item__content { display: inline-flex; align-items: center; height: 48px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--encre); color: var(--fond); font: 500 16px/1 var(--sans); letter-spacing: -0.01em; white-space: nowrap; }
/* Menu ouvert : l'en-tête (logo, devis) reste au-dessus du panneau, la croix prend la place du bouton */
.entete:has(.is-menu-open) .logo { position: relative; z-index: 100001; --logo-c: var(--marine); --logo-b: var(--bleu); }
.entete:has(.is-menu-open) .entete-actions { position: relative; z-index: 100001; }
.wp-block-navigation.menu .wp-block-navigation__responsive-container-close { position: fixed; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .06); color: var(--encre); }

/* Titres de section : puce lumineuse et pastille étoile en pseudo-éléments */
.bande-sombre .tete-section .surtitre::before, .communes li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ciel); box-shadow: 0 0 0 3px rgba(153, 206, 255, .16), 0 0 12px rgba(153, 206, 255, .55); }
.pastille::before { content: ""; flex: none; width: 11px; height: 11px; background: currentColor; -webkit-mask: var(--icone-etoile) center / contain no-repeat; mask: var(--icone-etoile) center / contain no-repeat; }
.avis-resume::before { content: "★★★★★"; color: var(--etoile); font-size: 13px; letter-spacing: 1px; }

/* Cartes services */
.carte-pied a { flex: 1; display: flex; justify-content: space-between; }
.carte-pied a::after { content: "›"; }

/* Panneau devis */
.panneau-gauche p.lien-ciel, .panneau-droit p.lien-ciel { margin-top: 26px; font-size: 14px; font-weight: 500; color: var(--ciel); }

/* Triptyque : le panneau vidéo est un groupe (image + bouton de lecture) */
.triptyque .video-panneau { position: relative; overflow: hidden; background: #111; }
.triptyque .video-panneau .wp-block-image { position: absolute; inset: 0; }
.triptyque .video-panneau .wp-block-image::after { background: rgba(10, 10, 12, .42); }
.wp-block-buttons.lecture-boutons { position: absolute; inset: 0; z-index: 2; display: block; }
.wp-block-button.lecture { position: absolute; inset: 0; }
.wp-block-button.lecture .wp-block-button__link {
  position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center;
  padding: 0 0 48px; border-radius: 0; background: none; color: rgba(255, 255, 255, .85);
  font: 500 11px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
}
.wp-block-button.lecture .wp-block-button__link::before {
  content: ""; width: 88px; height: 88px; border-radius: 50%;
  background: rgba(255, 255, 255, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M7 4.5v15l12-7.5z'/%3E%3C/svg%3E") 56% 50% / 26px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: transform .3s, background-color .3s;
}
.wp-block-button.lecture .wp-block-button__link:hover::before { transform: scale(1.06); background-color: rgba(255, 255, 255, .26); }

/* Avant / après : légende de l'image = étiquette */
.aa-photos .wp-block-image { position: relative; height: 100%; }
.aa-photos .wp-block-image .wp-element-caption { position: absolute; left: 10px; bottom: 10px; margin: 0; padding: 6px 9px; border-radius: 999px; font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; background: rgba(255, 255, 255, .9); color: var(--encre); text-align: left; }
.aa-photos .wp-block-image.aa-apres .wp-element-caption { background: var(--bleu); color: #fff; }
.aa-titre { margin-top: 16px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }

/* Galerie */
.galerie .wp-block-image .wp-element-caption { margin: 0; text-align: left; }

/* Avis */
.avis-item { display: flex; flex-direction: column; }
.avis-grille .avis-auteur { margin-top: auto; padding-top: 28px; font: 400 11.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--gris); }

/* Listes de définition devenues groupes : terme / valeur */
.appel-droit .terme { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.appel-droit .valeur { margin-top: 8px; font-size: 15px; }
.contact-coord .terme { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(245, 245, 247, .72); }
.contact-coord .valeur { margin-top: 7px; font-size: 15px; }
.legal-fiche .terme, .legal-fiche .valeur { margin-top: 0; max-width: none; }
.legal-fiche .terme { font: 500 11px/1.9 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gris-clair); }
.legal-fiche .valeur { font-size: 15.5px; line-height: 1.6; color: var(--encre); }
.legal-fiche .valeur a { color: inherit; text-decoration: none; }

/* Contact */
.contact-chiffre .contact-chiffre-valeur { font-size: 72px; font-weight: 600; letter-spacing: -0.045em; line-height: 1; color: var(--ciel); }
.contact-chiffre p:not(.contact-chiffre-valeur) { max-width: 170px; font-size: 13.5px; line-height: 1.45; color: rgba(245, 245, 247, .66); }
.ariane { display: block; }

/* Contact Form 7 aux couleurs du formulaire de la maquette */
.wpcf7-form-control-wrap { display: block; }
.wpcf7-form-control-wrap textarea { display: block; }
.choix .wpcf7-checkbox, .choix .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 8px; }
.choix .wpcf7-list-item { margin: 0; }
.choix .wpcf7-list-item label { position: relative; display: block; }
.wpcf7-not-valid-tip { margin-top: 6px; font-size: 12.5px; color: #B3261E; }
.wpcf7 form .wpcf7-response-output { margin: 24px 0 0; padding: 14px 18px; border: 0; border-radius: 12px; background: rgba(27, 115, 181, .08); color: var(--marine); font-size: 15px; }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { background: #FDEDEC; color: #8A1C12; }
.wpcf7-spinner { margin: 0 0 0 4px; }

/* 404 : la carte entière est cliquable */
.piste { position: relative; }
/* Lien « fiche Google » du récit (un <a> dans la maquette, un paragraphe ici) */
.recit-texte p.lien-centre { margin-top: 28px; font-size: 14px; line-height: 1.5; color: var(--encre); }

.piste p.piste-lien { margin-top: auto; padding-top: 22px; font-size: 13.5px; font-weight: 500; color: var(--bleu); }
.piste .piste-lien a::after { content: ""; position: absolute; inset: 0; border-radius: 24px; }

/* Pied de page */
.reseau a { display: inline-flex; align-items: center; gap: 10px; }
.reseau a::before {
  content: ""; flex: none; width: 32px; height: 32px; border-radius: 8px;
  background: var(--bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23fff' stroke-width='1.9'%3E%3Crect x='8' y='8' width='16' height='16' rx='4.6'/%3E%3Ccircle cx='16' cy='16' r='3.8'/%3E%3Ccircle cx='20.7' cy='11.3' r='.6' fill='%23fff'/%3E%3C/svg%3E") center / 32px no-repeat;
  transition: transform .25s ease, background-color .25s ease;
}
.reseau a:hover::before { background-color: var(--marine); transform: translateY(-2px); }
.pied-bas-gauche { display: flex; flex-wrap: wrap; align-items: baseline; }

/* Barre d'administration (connecté) : l'en-tête fixe passe sous la barre */
.admin-bar .entete { top: 32px; }
@media (max-width: 782px) { .admin-bar .entete { top: 46px; } }

/* Responsive des adaptations */
@media (max-width: 900px) {
  .entete-ligne { grid-template-columns: 1fr auto auto; gap: 10px; }
  .entete-ligne .wp-block-navigation.menu { order: 3; display: flex; }
  .wp-block-navigation.menu .wp-block-navigation__responsive-container-open:not(.always-shown) { display: grid; }
  .wp-block-navigation.menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
  .triptyque-grille > figure { display: none; }
  .triptyque .video-panneau { height: 560px; }
  .triptyque .video-panneau .wp-block-image { display: block; }
}
@media (max-width: 560px) {
  .wp-block-button[class*="btn-"]:not(.btn-entete) .wp-block-button__link { padding: 0 22px; }
  .contact-chiffre .contact-chiffre-valeur { font-size: 60px; }
  .pied-bas-gauche { flex-direction: column; }
}