/*
Theme Name: Carnet Lab
Theme URI: https://carnetlab.fr
Author: Carnet Lab
Description: Thème sur mesure du site Carnet Lab.
Version: 3.0.1
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: carnetlab
*/
@font-face { font-family: "Jakarta"; src: url("fonts/PlusJakartaSans-variable.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  --sable: #efe7da;
  --sable-clair: #f7f3ec;
  --sable-fonce: #e6dccc;
  --ligne: #ddd3c3;
  --noir: #121212;
  --noir-2: #1d1d1b;
  --noir-3: #2e2d29;
  --vert: #1f4a37;
  --vert-fonce: #163828;
  --vert-clair: #dfe6da;
  --vert-vif: #3f7a5c;
  --vert-pale: #9fc4a8;
  --or: #f5b301;
  --doux: #5f5a50;
  --doux-noir: #b3ad9f;
  --marge: clamp(20px, 5vw, 64px);
  --section: clamp(88px, 10vw, 150px);
  --rayon: 20px;
}

* { box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; font-family: "Jakarta", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--noir); background: var(--sable-clair); font-size: 1.0625rem; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--vert-vif); outline-offset: 3px; }
::selection { background: var(--vert); color: var(--sable-clair); }
.cadre { max-width: 1280px; margin: 0 auto; padding-inline: var(--marge); }
.section { padding-block: var(--section); }
.fond-sable { background: var(--sable); }
.fond-noir { background: var(--noir); color: var(--sable-clair); }
.lien-evitement { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--noir); color: var(--sable-clair); padding: 10px 16px; border-radius: 8px; }
.lien-evitement:focus { left: 8px; }

/* Typographie de section */
.surtitre { display: flex; align-items: center; gap: 12px; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vert); margin: 0 0 18px; }
.surtitre::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.fond-noir .surtitre { color: var(--vert-pale); }
.titre { font-size: clamp(2rem, 3.8vw, 3.3rem); max-width: 20ch; }
.titre em, h1 em { font-style: normal; color: var(--vert); }
.fond-noir .titre em { color: var(--vert-pale); }
.intro { color: var(--doux); font-size: 1.12rem; max-width: 58ch; margin: 18px 0 0; }
.fond-noir .intro { color: var(--doux-noir); }
.tete { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px 64px; align-items: end; margin-bottom: clamp(44px, 5vw, 72px); }
.tete .intro { margin: 0; }
.mot { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.mot > span { display: inline-block; will-change: transform; }

/* Logo */
.marque { display: inline-flex; align-items: baseline; font-weight: 800; font-size: 1.45rem; letter-spacing: -0.045em; text-decoration: none; white-space: nowrap; line-height: 1; }
.marque b { font-weight: 800; }
.marque span { font-weight: 500; color: var(--vert); margin-left: .18em; }
.marque i { display: inline-block; width: .3em; height: .3em; border-radius: 50%; background: var(--vert-vif); margin-left: .08em; }
.fond-noir .marque span, .pied .marque span { color: var(--vert-pale); }

/* Boutons */
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 28px; border-radius: 99px; font-weight: 700; font-size: 1rem; text-decoration: none; border: 0; cursor: pointer; font-family: inherit; background: var(--vert); color: var(--sable-clair); box-shadow: 0 10px 28px rgba(31,74,55,.25); transition: background .2s, box-shadow .2s; will-change: transform; }
.cta:hover { background: var(--vert-fonce); }
.cta .fleche { display: inline-block; transition: transform .25s ease; }
.cta:hover .fleche { transform: translateX(4px); }
.cta svg { width: 20px; height: 20px; flex: none; }
.cta-noir { background: var(--noir); box-shadow: 0 10px 28px rgba(18,18,18,.2); }
.cta-noir:hover { background: var(--noir-3); }
.cta-clair { background: var(--sable-clair); color: var(--noir); box-shadow: none; }
.cta-clair:hover { background: #fff; }
.lien { font-weight: 700; color: var(--vert); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; padding-bottom: 3px; transition: background-size .3s ease; }
.lien:hover { background-size: 0 2px; background-position: 100% 100%; }
.etoiles { color: var(--or); letter-spacing: 1px; }

/* Navigation */
.entete { position: sticky; top: 0; z-index: 40; background: rgba(239,231,218,.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; }
.entete.defile { border-color: var(--ligne); background: rgba(247,243,236,.92); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 16px; }
.nav ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; font-weight: 600; font-size: .95rem; color: var(--doux); }
.nav ul a { text-decoration: none; transition: color .2s; }
.nav ul a:hover { color: var(--noir); }
.nav .droite { display: flex; align-items: center; gap: 20px; }
.wa-nav { display: flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; font-size: .95rem; }
.wa-nav svg { width: 22px; height: 22px; color: var(--vert); }
.nav .cta { padding: 11px 20px; font-size: .92rem; box-shadow: none; }

/* Ouverture */
.hero { position: relative; background: var(--sable); overflow: hidden; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-grille { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; padding-block: clamp(40px, 6vw, 72px) clamp(90px, 9vw, 130px); }
.pastille { display: inline-flex; align-items: center; gap: 10px; background: var(--sable-clair); border: 1px solid var(--ligne); border-radius: 99px; padding: 8px 16px 8px 12px; font-size: .9rem; font-weight: 600; margin: 0 0 24px; }
.pastille .etoiles { font-size: 1rem; }
.hero h1 { font-size: clamp(2.5rem, 4.8vw, 4.4rem); }
.hero .sous { color: var(--doux); font-size: 1.15rem; max-width: 50ch; margin: 24px 0 34px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; }
.preuves { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 36px 0 0; font-size: .92rem; color: var(--doux); list-style: none; padding: 0; }
.preuves li { display: flex; align-items: center; gap: 8px; }
.coche { width: 20px; height: 20px; flex: none; color: var(--vert); }
.ecrans { position: relative; perspective: 1600px; }
.ecrans-3d { position: relative; transform-style: preserve-3d; transform: rotateY(-14deg) rotateX(6deg); }
.portable { background: #e4dccd; border-radius: 14px 14px 6px 6px; padding: 12px 12px 0; box-shadow: 0 50px 100px rgba(18,18,18,.2); }
.portable .barre { display: flex; align-items: center; gap: 6px; padding: 0 4px 10px; }
.portable .barre i { width: 9px; height: 9px; border-radius: 50%; background: #c9bfae; }
.portable .barre span { margin-left: 10px; flex: 1; background: var(--sable-clair); border-radius: 5px; font-size: .72rem; color: var(--doux); padding: 2px 10px; }
.portable img { border-radius: 6px 6px 0 0; aspect-ratio: 1372 / 760; object-fit: cover; object-position: top; }
.socle { height: 14px; margin: 0 -5%; background: #cfc5b4; border-radius: 0 0 16px 16px; }
.tel { position: absolute; right: -4%; bottom: -12%; width: 27%; background: #0d0d0d; padding: 7px; border-radius: 28px; box-shadow: 0 30px 60px rgba(18,18,18,.32); transform: translateZ(90px); }
.tel img { border-radius: 22px; aspect-ratio: 9 / 18.5; object-fit: cover; object-position: top; }
.carte { position: absolute; margin: 0; background: #fbf8f2; color: var(--noir); border: 1px solid var(--ligne); border-radius: 14px; padding: 14px 18px; box-shadow: 0 24px 50px rgba(18,18,18,.14); font-size: .85rem; line-height: 1.35; transform: translateZ(130px); white-space: nowrap; }
.carte b { display: block; font-size: 1rem; }
.carte .petit { color: var(--doux); }
.c1 { left: -8%; top: 14%; }
.c2 { left: -4%; bottom: -6%; }
.c3 { right: 6%; top: -9%; }
.point { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--vert-vif); margin-right: 6px; box-shadow: 0 0 0 4px rgba(63,122,92,.2); }
.flotte { animation: flotte 6s ease-in-out infinite; }
.c2.flotte { animation-delay: -2s; }
.c3.flotte { animation-delay: -4s; }
@keyframes flotte { 50% { translate: 0 -10px; } }

/* Bandeau clients */
.clients { background: var(--sable-fonce); }
.clients .cadre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; padding-block: 24px; }
.clients p { margin: 0; font-size: .9rem; color: var(--doux); }
.clients ul { display: flex; flex-wrap: wrap; gap: 12px 44px; list-style: none; margin: 0; padding: 0; font-weight: 800; font-size: 1.15rem; color: #8a8375; letter-spacing: -0.02em; }

/* Avant / après */
.comparatif { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.colonne { border-radius: var(--rayon); padding: clamp(28px, 3vw, 44px); }
.colonne h3 { font-size: 1.3rem; margin-bottom: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.colonne ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.colonne li { display: flex; gap: 14px; align-items: flex-start; }
.colonne li svg { flex: none; width: 22px; height: 22px; margin-top: 2px; }
.avant { background: var(--sable-fonce); color: var(--doux); }
.avant li svg { color: #b4453a; }
.apres { background: var(--noir); color: var(--sable-clair); box-shadow: 0 30px 70px rgba(18,18,18,.22); }
.apres li svg { color: var(--vert-pale); }
.badge { display: inline-block; background: var(--vert-vif); color: var(--sable-clair); font-size: .78rem; font-weight: 700; padding: 4px 11px; border-radius: 99px; letter-spacing: 0; }

/* Services */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.service { background: var(--sable-clair); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: clamp(26px, 2.6vw, 38px); display: flex; flex-direction: column; transition: transform .35s ease, box-shadow .35s ease; }
.service:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(18,18,18,.1); }
.service .numero { font-size: 3rem; font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--vert-vif); margin: 0 0 26px; }
.service h3 { font-size: 1.45rem; margin-bottom: 10px; }
.service .accroche-service { color: var(--vert); font-weight: 700; margin-bottom: 12px; }
.service p { color: var(--doux); }
.service ul { list-style: none; padding: 0; margin: 8px 0 26px; display: grid; gap: 10px; flex: 1; }
.service li { display: flex; gap: 10px; align-items: flex-start; font-size: .97rem; }
.service li svg { margin-top: 3px; }

/* Scène du carnet */
.scene { position: relative; height: 100vh; min-height: 640px; overflow: hidden; background: var(--sable); }
.accroche { position: absolute; left: var(--marge); top: 50%; transform: translateY(-50%); width: min(40vw, 540px); z-index: 3; }
.accroche h2 { font-size: clamp(2.2rem, 4.2vw, 3.8rem); }
.accroche .intro { margin: 22px 0 30px; }
.livre { position: absolute; inset: 0; perspective: 2200px; z-index: 2; pointer-events: none; }
.inclinaison { position: absolute; inset: 0; transform-style: preserve-3d; }
.carnet { --l: min(36vw, 560px); position: absolute; left: 50%; top: 50%; width: var(--l); height: calc(var(--l) / 1.45); margin-top: calc(var(--l) / -2.9); transform-style: preserve-3d; }
.feuille, .fond { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: left center; }
.face { position: absolute; inset: 0; border-radius: 4px 12px 12px 4px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #fff; }
.face img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.arriere { transform: rotateY(180deg); border-radius: 12px 4px 4px 12px; background: var(--sable-clair); }
.fond .face { box-shadow: 0 50px 120px rgba(18,18,18,.25), 0 10px 30px rgba(18,18,18,.1); }
.couverture .avant { background: var(--noir); display: grid; place-items: center; box-shadow: 0 50px 120px rgba(18,18,18,.35); }
.couverture .avant .marque { font-size: calc(var(--l) / 12); color: var(--sable-clair); }
.couverture .avant .marque span { color: var(--vert-pale); }
.couverture .avant .elastique { position: absolute; top: 0; bottom: 0; right: 13%; width: calc(var(--l) / 48); background: var(--vert-vif); }
.couverture .avant small { position: absolute; bottom: 7%; left: 8%; color: #8a857c; font-size: calc(var(--l) / 42); }
.papier { display: grid; place-items: center; text-align: center; color: var(--doux); font-size: calc(var(--l) / 30); }
.papier em { display: block; font-style: normal; color: var(--noir); font-weight: 800; font-size: calc(var(--l) / 15); letter-spacing: -0.03em; margin-bottom: 6px; }
.fiche { display: grid; grid-template-columns: 34% 1fr; gap: 7%; align-items: center; padding: 6% 8%; }
.fiche img { height: auto; aspect-ratio: 9 / 17; border-radius: calc(var(--l) / 40); box-shadow: 0 12px 30px rgba(18,18,18,.18); }
.fiche em { display: block; font-style: normal; font-weight: 800; color: var(--noir); font-size: calc(var(--l) / 14); letter-spacing: -0.03em; margin-bottom: 4%; }
.fiche span { display: block; color: var(--doux); font-size: calc(var(--l) / 34); line-height: 1.7; }
.tranche { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; transform-origin: bottom; transform: rotateX(90deg); background: repeating-linear-gradient(#efebe3 0 2px, #d9d3c7 2px 3px); }
.legendes { position: absolute; left: 50%; bottom: 6vh; transform: translateX(-50%); z-index: 3; text-align: center; height: 3.4em; width: min(90vw, 640px); }
.legende { position: absolute; inset: 0; opacity: 0; margin: 0; }
.legende b { display: block; font-size: 1.35rem; letter-spacing: -0.02em; }
.legende span { color: var(--doux); }
.indice { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); font-size: .85rem; color: var(--doux); z-index: 3; margin: 0; }

/* Étude de cas */
.cas { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.cas-visuel { position: relative; }
.cas-visuel .bureau { border-radius: 16px; overflow: hidden; box-shadow: 0 40px 90px rgba(18,18,18,.18); will-change: transform; }
.cas-visuel .bureau img { width: 100%; aspect-ratio: 1372 / 637; object-fit: cover; object-position: top; }
.cas-visuel .mobile { position: absolute; right: -4%; bottom: -14%; width: 24%; border-radius: 24px; overflow: hidden; border: 7px solid #0d0d0d; box-shadow: 0 30px 70px rgba(18,18,18,.3); will-change: transform; }
.cas-visuel .mobile img { aspect-ratio: 9 / 18; object-fit: cover; object-position: top; }
.cas-texte h2 { font-size: clamp(2rem, 3.4vw, 3rem); margin-bottom: 22px; }
.cas-texte p { color: var(--doux); }
.cas-faits { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 26px 0 30px; padding: 22px 24px; background: var(--sable-clair); border: 1px solid var(--ligne); border-radius: 14px; }
.cas-faits dt { font-weight: 700; }
.cas-faits dd { margin: 0; color: var(--doux); }

/* Méthode */
.etapes { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; list-style: none; padding: 0; margin: 0; }
.etapes-ligne { position: absolute; left: 24px; right: 24px; top: 23px; height: 2px; background: var(--noir-3); }
.etapes-ligne i { position: absolute; inset: 0; background: var(--vert-vif); transform-origin: left; transform: scaleX(0); }
.etape { position: relative; }
.etape .rond { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; background: var(--noir); border: 2px solid var(--vert-vif); display: grid; place-items: center; font-weight: 800; color: var(--vert-pale); margin-bottom: 24px; }
.etape .quand { color: var(--vert-pale); font-size: .88rem; font-weight: 700; display: block; margin-bottom: 8px; }
.etape h3 { font-size: 1.3rem; margin-bottom: 10px; }
.etape p { color: var(--doux-noir); margin: 0; }

/* Offres */
.formules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.formule { position: relative; background: var(--sable-clair); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; transition: transform .35s ease, box-shadow .35s ease; }
.formule:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(18,18,18,.1); }
.formule.phare { background: var(--noir); color: var(--sable-clair); border-color: var(--noir); box-shadow: 0 30px 70px rgba(18,18,18,.25); }
.formule .badge { position: absolute; top: -13px; left: 32px; padding: 6px 14px; margin: 0; }
.formule h3 { font-size: 1.6rem; }
.formule .pour { color: var(--doux); margin: 8px 0 22px; min-height: 3.2em; }
.formule.phare .pour, .formule.phare .prix-note { color: var(--doux-noir); }
.prix { font-size: clamp(2.5rem, 3.4vw, 3.2rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin: 0; }
.prix small { font-size: .36em; font-weight: 600; letter-spacing: 0; margin-right: 6px; vertical-align: middle; }
.prix-note { color: var(--doux); font-size: .92rem; margin: 10px 0 24px; }
.formule ul { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 11px; flex: 1; }
.formule li { display: flex; gap: 10px; align-items: flex-start; font-size: .97rem; }
.formule li svg { margin-top: 2px; }
.formule.phare li svg { color: var(--vert-pale); }
.formule li.reprise { font-weight: 700; }
.formule .cta { width: 100%; }
.formule:not(.phare) .cta { background: var(--noir); box-shadow: none; }
.formule:not(.phare) .cta:hover { background: var(--noir-3); }
.offres-bas { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; margin-top: 22px; }
.abonnement { background: var(--vert); color: var(--sable-clair); border-radius: var(--rayon); padding: clamp(28px, 3vw, 40px); }
.abonnement h3 { font-size: 1.45rem; margin-bottom: 8px; }
.abonnement p { color: var(--vert-clair); }
.abonnement ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.abonnement li { display: flex; gap: 10px; align-items: flex-start; }
.abonnement li svg { color: var(--vert-pale); margin-top: 3px; }
.conditions { background: var(--sable-clair); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: clamp(28px, 3vw, 40px); color: var(--doux); margin: 0; display: flex; flex-direction: column; justify-content: center; }

/* L'agence */
.agence { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.portrait { position: relative; }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; }
.portrait .carte-note { position: absolute; right: -6%; bottom: 8%; margin: 0; background: var(--sable-clair); border: 1px solid var(--ligne); border-radius: 16px; padding: 18px 22px; box-shadow: 0 24px 50px rgba(18,18,18,.18); }
.carte-note .chiffre { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; display: flex; align-items: center; gap: 10px; }
.carte-note .etoiles { font-size: 1.25rem; }
.carte-note .legende-note { display: block; margin-top: 6px; color: var(--doux); font-size: .9rem; }
.agence .titre { margin-bottom: 22px; }
.agence p { color: var(--doux); max-width: 56ch; }
.engagements { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 30px 0 34px; }
.engagement { background: var(--sable-clair); border: 1px solid var(--ligne); border-radius: 14px; padding: 18px 20px; }
.engagement b { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.engagement span { color: var(--doux); font-size: .94rem; display: block; }

.chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 30px 0 34px; }
.chiffre-bloc { margin: 0; background: var(--sable-clair); border: 1px solid var(--ligne); border-radius: 16px; padding: 20px 22px; text-decoration: none; color: inherit; transition: border-color .2s, transform .2s; }
a.chiffre-bloc:hover { border-color: var(--vert-vif); transform: translateY(-3px); }
.chiffre-bloc b { display: block; font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; color: var(--vert); }
.chiffre-bloc span { display: block; color: var(--doux); font-size: .95rem; margin-top: 6px; }
.chiffre-bloc span .fleche { display: inline; margin: 0; }

/* FAQ */
.faq { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-liste { display: grid; gap: 12px; }
.faq-liste details { background: var(--sable-clair); border: 1px solid var(--ligne); border-radius: 14px; padding: 0 24px; transition: background .2s; }
.faq-liste details[open] { background: #fff; }
.faq-liste summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; }
.faq-liste summary::-webkit-details-marker { display: none; }
.faq-liste summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--vert-clair); color: var(--vert); display: grid; place-items: center; font-weight: 500; font-size: 1.2rem; line-height: 1; transition: transform .3s ease; }
.faq-liste details[open] summary::after { transform: rotate(45deg); }
.faq-liste details p { color: var(--doux); margin: 0 0 22px; max-width: 62ch; }

/* Contact */
.contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact h2 { font-size: clamp(2.4rem, 4.6vw, 4.2rem); margin-bottom: 22px; }
.contact-texte p { color: var(--doux-noir); max-width: 44ch; }
.contact-texte ul { list-style: none; padding: 0; margin: 24px 0 34px; display: grid; gap: 12px; }
.contact-texte li { display: flex; gap: 12px; align-items: center; }
.contact-texte li svg { color: var(--vert-pale); }
.carte-wa { display: flex; align-items: center; gap: 18px; text-decoration: none; background: var(--noir-2); border: 1px solid var(--noir-3); border-radius: 18px; padding: 22px 24px; transition: border-color .2s, transform .2s; }
.carte-wa:hover { border-color: var(--vert-vif); transform: translateY(-3px); }
.carte-wa .icone { width: 56px; height: 56px; border-radius: 50%; background: var(--vert); display: grid; place-items: center; flex: none; }
.carte-wa .icone svg { width: 28px; height: 28px; color: var(--sable-clair); }
.carte-wa b { display: block; font-size: 1.35rem; letter-spacing: -0.02em; }
.carte-wa span { color: var(--doux-noir); font-size: .92rem; }
form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; background: var(--sable-clair); color: var(--noir); padding: clamp(24px, 3vw, 40px); border-radius: 22px; }
form .large { grid-column: 1 / -1; }
form h3 { font-size: 1.45rem; }
label { display: block; font-size: .88rem; font-weight: 700; margin-bottom: 6px; }
input, select, textarea { width: 100%; font: inherit; color: var(--noir); background: #fff; border: 1px solid var(--ligne); padding: 13px 15px; border-radius: 12px; transition: border-color .2s, box-shadow .2s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--vert-vif); box-shadow: 0 0 0 4px rgba(63,122,92,.15); }
textarea { min-height: 130px; resize: vertical; }
.piege { position: absolute; left: -9999px; }
.consentement { display: flex; gap: 12px; align-items: flex-start; font-size: .88rem; color: var(--doux); }
.consentement input { width: auto; margin-top: 4px; accent-color: var(--vert); }
.consentement label { font-weight: 400; }
form .cta { width: 100%; }
.mention-form { font-size: .86rem; color: var(--doux); margin: 0; text-align: center; }
.message-formulaire { background: var(--vert); color: var(--sable-clair); padding: 14px 18px; border-radius: 12px; margin: 0; }

/* Bouton WhatsApp flottant */
.wa-flottant { position: fixed; right: 22px; bottom: 22px; z-index: 50; display: flex; align-items: center; gap: 10px; background: var(--vert); color: var(--sable-clair); text-decoration: none; font-weight: 700; padding: 14px 20px 14px 16px; border-radius: 99px; box-shadow: 0 14px 34px rgba(31,74,55,.35); transition: transform .2s, background .2s; }
.wa-flottant:hover { transform: translateY(-3px); background: var(--vert-fonce); }
.wa-flottant svg { width: 26px; height: 26px; }

/* Pied */
.pied { background: var(--noir); color: var(--doux-noir); padding-top: clamp(64px, 7vw, 100px); overflow: hidden; }
.pied-grille { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; font-size: .95rem; }
.pied .marque { color: var(--sable-clair); font-size: 1.6rem; margin-bottom: 16px; }
.pied h3 { color: var(--sable-clair); font-size: 1rem; letter-spacing: 0; margin-bottom: 16px; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.pied a { text-decoration: none; transition: color .2s; }
.pied a:hover { color: var(--sable-clair); }
.pied .wa-pied { display: inline-flex; align-items: center; gap: 10px; color: var(--sable-clair); font-weight: 700; }
.pied .wa-pied svg { width: 22px; height: 22px; color: var(--vert-pale); }
.pied-nom { font-size: clamp(4.6rem, 17vw, 17rem); font-weight: 800; letter-spacing: -0.065em; line-height: .8; color: #262622; margin: clamp(56px, 7vw, 96px) 0 -0.06em; white-space: nowrap; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 24px; font-size: .85rem; border-top: 1px solid var(--noir-3); }

/* Apparitions */
.js .apparait { opacity: 0; transform: translateY(26px); }

/* Pages intérieures */
.page-simple { max-width: 76ch; margin: 0 auto; padding: clamp(64px, 8vw, 110px) var(--marge) clamp(80px, 9vw, 130px); }
.page-simple h1 { font-size: clamp(2.3rem, 4.4vw, 3.8rem); margin-bottom: 26px; }
.page-simple h2 { font-size: clamp(1.5rem, 2.3vw, 2.1rem); margin: 50px 0 16px; }
.page-simple h3 { font-size: 1.25rem; margin: 32px 0 10px; }
.page-simple p, .page-simple li { color: #3f3b34; }
.page-simple .meta { color: var(--doux); font-size: .95rem; margin-bottom: 28px; }
.page-simple ul { padding-left: 1.2em; }
.page-simple li { margin-bottom: 6px; }
.page-simple a:not(.cta) { color: var(--vert); font-weight: 700; }
.liste-articles { list-style: none; padding: 0 !important; margin: 40px 0 0; display: grid; gap: 14px; }
.liste-articles a { display: block; text-decoration: none; background: var(--sable); border: 1px solid var(--ligne); padding: 26px; border-radius: 16px; transition: transform .25s, box-shadow .25s; color: inherit !important; font-weight: 400 !important; }
.liste-articles a:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(18,18,18,.08); }
.liste-articles h2 { margin: 0 0 8px; }
.zones { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--ligne); }
.zones h2 { margin-top: 0; }
.zones ul { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 10px; }
.zones li { margin: 0; }
.zones a { display: inline-block; background: var(--sable); border: 1px solid var(--ligne); border-radius: 99px; padding: 8px 16px; text-decoration: none; font-size: .95rem; }
.zones a:hover { border-color: var(--vert-vif); }
.appel { background: var(--noir); color: var(--sable-clair); padding: clamp(28px, 4vw, 48px); margin-top: 60px; border-radius: 22px; }
.appel h2 { margin-top: 0; color: var(--sable-clair); }
.appel p { color: var(--doux-noir) !important; }

/* Tablette */
@media (max-width: 1024px) {
  .nav ul { display: none; }
  .hero-grille, .tete, .comparatif, .cas, .agence, .faq, .contact, .offres-bas { grid-template-columns: 1fr; }
  .services, .formules { grid-template-columns: 1fr; max-width: 640px; }
  .etapes { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .etapes-ligne { display: none; }
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .ecrans { margin: 20px 6% 50px; }
  .cas-visuel { margin-bottom: 12%; }
  .portrait { max-width: 520px; }
  .portrait .carte-note { right: 4%; }
  .formule .pour { min-height: 0; }
  .formule.phare { margin-top: 10px; }
}
/* Téléphone */
@media (max-width: 860px) {
  .accroche { top: calc(72px + 3vh); transform: none; width: auto; right: var(--marge); }
  .accroche .intro { margin: 14px 0 18px; font-size: 1rem; }
  .carnet { --l: 46vw; top: 74%; }
  .wa-nav { display: none; }
}
@media (max-width: 600px) {
  .marque { font-size: 1.25rem; }
  .nav .cta { padding: 9px 14px; font-size: .85rem; }
  .c1, .c3 { display: none; }
  .c2 { left: 6%; bottom: -22%; font-size: .78rem; padding: 10px 12px; }
  .ecrans { margin: 24px 4% 70px 0; }
  .engagements, .abonnement ul, form, .etapes { grid-template-columns: 1fr; }
  .chiffre-bloc b { font-size: 1.35rem; }
  .pied-grille { grid-template-columns: 1fr; }
  .wa-flottant { padding: 14px; right: 16px; bottom: 16px; }
  .wa-flottant span { display: none; }
  .portrait .carte-note { right: 4%; bottom: 4%; padding: 14px 16px; }
  .carte-wa b { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .js .apparait { opacity: 1; transform: none; }
  .flotte { animation: none; }
  .scene { height: auto; }
  .livre { position: relative; height: 60vh; }
  .accroche { position: relative; transform: none; top: auto; padding-top: 90px; width: auto; }
  .legendes, .indice { display: none; }
}

/* Corrections d'audit du 30 octobre 2026 */
.hero h1 { font-size: clamp(2rem, 2.6vw, 2.5rem); }
@media (max-width: 1024px) { .hero h1 { font-size: clamp(2rem, 6vw, 2.8rem); } }
.menu-mobile { display: none; position: relative; }
.menu-mobile summary { list-style: none; cursor: pointer; font-weight: 700; font-size: .9rem; padding: 9px 14px; border-radius: 99px; background: var(--sable-fonce); }
.menu-mobile summary::-webkit-details-marker { display: none; }
.nav .menu-mobile ul { display: none; }
.nav .menu-mobile[open] ul { display: flex; flex-direction: column; gap: 0; position: absolute; right: 0; top: calc(100% + 10px); min-width: 200px; padding: 8px; background: var(--sable-clair); border-radius: 14px; color: var(--noir); z-index: 50; }
.nav .menu-mobile[open] ul a { display: block; padding: 12px 14px; }
@media (max-width: 1024px) { .menu-mobile { display: block; } }
.villes-zone { padding-block: clamp(48px, 6vw, 80px); }
.titre-villes { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 24px; }
.liste-villes { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.liste-villes a { display: inline-block; padding: 10px 16px; border-radius: 99px; background: var(--sable); font-weight: 600; text-decoration: none; }
.liste-villes a:hover { background: var(--vert); color: var(--sable-clair); }
.prochaine-realisation { color: var(--doux); font-size: .95rem; margin-top: 18px; }
.clients small { font-weight: 500; font-size: .8rem; letter-spacing: 0; }
.facultatif { font-weight: 400; color: var(--doux-noir); }
.consentement input { width: 24px; height: 24px; flex: none; margin-top: 0; }
@media (max-width: 600px) { .nav .cta { white-space: nowrap; padding: 9px 12px; font-size: .8rem; } .nav { gap: 10px; } }