/* ============================================================================
   Célian Peinture — composants
   ----------------------------------------------------------------------------
   Conversion des composants React de UI-UX/components/ en classes CSS.
   Chaque bloc indique son fichier source. Les styles étaient en `style={{}}`
   inline dans le design system ; les valeurs sont reprises à l'identique.

   Trois corrections délibérées par rapport à la source :
   1. Les :hover simulés en JS (useState(hover)) deviennent de vrais :hover CSS.
   2. Ajout de :focus-visible partout — absent du design system, nécessaire
      pour la navigation au clavier.
   3. .sr-only correct (clip-path) au lieu du masquage approximatif
      `position:absolute;opacity:0;width:1px` de Checkbox.jsx / RadioGroup.jsx.
   ========================================================================== */

/* ============================================================== 0. Socle */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-body);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);color:var(--text-heading);text-wrap:pretty}
p{margin:0}
ul{margin:0;padding:0}
:target{scroll-margin-top:96px}

/* Masquage accessible correct */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
/* Lien d'évitement */
.skip{
  position:absolute;left:var(--space-4);top:-100px;z-index:100;
  padding:12px 18px;border-radius:var(--radius-md);
  background:var(--surface-inverse);color:var(--cp-bone);
  font-family:var(--font-display);font-size:var(--fs-small);font-weight:var(--fw-semibold);
  transition:top var(--dur-base) var(--ease-out);
}
.skip:focus{top:var(--space-4);color:var(--cp-bone);text-decoration:none}

/* Anneau de focus homogène — cf. guidelines/states.html */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:2px;
  box-shadow:var(--shadow-focus);
  border-radius:var(--radius-xs);
}

/* ============================================================== 0b. Icônes */
/* Remplace le composant Icon.jsx, qui injectait les SVG au runtime via Lucide.
   Les symboles sont inlinés dans chaque page ; ces propriétés SVG héritent
   dans le contenu du <use>. Trait 1.5 px imposé par le design system. */
.i{
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  flex:0 0 auto;display:inline-block;vertical-align:middle;
}
.i--fill{fill:currentColor}

/* ============================================================ 1. Layout */
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:var(--container-narrow)}
.sec{padding-block:var(--section-y)}
.sec--tight{padding-block:var(--space-8)}
.sec--muted{background:var(--surface-muted)}
.stack{display:flex;flex-direction:column}
.stack--3{gap:var(--space-3)} .stack--4{gap:var(--space-4)} .stack--5{gap:var(--space-5)}
.stack--6{gap:var(--space-6)} .stack--7{gap:var(--space-7)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.grid{display:grid;gap:var(--grid-gap)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--split{grid-template-columns:1fr 1fr;gap:var(--space-7);align-items:center}
@media (max-width:1000px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .grid--split{grid-template-columns:1fr}
}
@media (max-width:640px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
}
/* Sections basses : n'occupe le moteur de rendu qu'à l'approche du viewport */
.defer-paint{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* ==================================================== 2. SectionHeading */
/* source : UI-UX/components/core/SectionHeading.jsx */
.cp-heading{
  display:flex;flex-direction:column;gap:var(--space-4);
  max-width:660px;align-items:flex-start;text-align:left;
}
.cp-heading--center{max-width:760px;align-items:center;text-align:center;margin-inline:auto}
.cp-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-accent);
}
/* Le filet or de 24×1 px — signature typographique du système */
.cp-eyebrow::before{content:"";width:24px;height:1px;background:var(--accent);flex:0 0 auto}
.cp-heading h1,.cp-heading h2,.cp-heading h3{
  font-weight:var(--fw-semibold);line-height:var(--lh-heading);letter-spacing:var(--ls-heading);
}
.cp-heading h1{font-size:var(--fs-h1)}
.cp-heading h2{font-size:var(--fs-h2)}
.cp-heading h3{font-size:var(--fs-h3)}
.cp-lead{
  font-family:var(--font-body);font-size:var(--fs-lead);line-height:var(--lh-body);
  color:var(--text-muted);text-wrap:pretty;
}
.cp-heading--inverse h1,.cp-heading--inverse h2{color:var(--cp-bone)}
.cp-heading--inverse .cp-lead{color:rgba(251,250,247,.78)}

/* ============================================================ 3. Button */
/* source : UI-UX/components/core/Button.jsx */
.cp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-display);font-weight:var(--fw-semibold);
  letter-spacing:.01em;line-height:1;text-decoration:none;cursor:pointer;
  border:1px solid transparent;border-radius:var(--radius-md);
  padding:14px 24px;font-size:1rem;white-space:nowrap;
  transition:background var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out);
}
.cp-btn:hover{text-decoration:none}
.cp-btn--sm{padding:10px 16px;font-size:.875rem}
.cp-btn--lg{padding:18px 32px;font-size:1.0625rem}
.cp-btn--primary{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}
.cp-btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--text-on-accent)}
.cp-btn--secondary{background:transparent;border-color:var(--border-subtle);color:var(--text-heading)}
.cp-btn--secondary:hover{border-color:var(--accent);color:var(--text-accent)}
.cp-btn--ghost{background:transparent;border-color:transparent;color:var(--text-accent);padding:10px 8px}
.cp-btn--ghost:hover{color:var(--accent-press)}
.cp-btn--inverse{background:var(--cp-white);border-color:var(--cp-white);color:var(--text-heading)}
.cp-btn--inverse:hover{background:var(--surface-accent-soft);border-color:var(--surface-accent-soft);color:var(--text-heading)}
.cp-btn.is-full{width:100%}
.cp-btn[disabled],.cp-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}

/* ======================================================= 4. IconButton */
/* source : UI-UX/components/core/IconButton.jsx */
.cp-iconbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--radius-md);
  border:1px solid var(--border-subtle);background:transparent;color:var(--text-heading);
  cursor:pointer;transition:all var(--dur-base) var(--ease-out);
}
.cp-iconbtn:hover{border-color:var(--accent);color:var(--text-accent)}
.cp-iconbtn--bare{border-color:transparent;color:var(--text-muted);width:40px;height:40px}
.cp-iconbtn--bare:hover{color:var(--text-accent);border-color:transparent}
.cp-iconbtn--solid{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}
.cp-iconbtn--solid:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--text-on-accent)}

/* ============================================================= 5. Badge */
/* source : UI-UX/components/core/Badge.jsx */
.cp-badge{
  display:inline-flex;align-self:flex-start;align-items:center;gap:6px;
  padding:6px 12px;white-space:nowrap;border-radius:var(--radius-pill);
  border:1px solid transparent;
  font-family:var(--font-body);font-size:var(--fs-caption);font-weight:var(--fw-medium);
  letter-spacing:.02em;
  background:var(--surface-accent-soft);color:var(--cp-gold-700);
}
.cp-badge--neutral{background:var(--surface-muted);color:var(--text-body)}
.cp-badge--outline{background:transparent;color:var(--text-muted);border-color:var(--border-subtle)}
.cp-badge--inverse{background:rgba(251,250,247,.14);color:var(--cp-bone);border-color:rgba(251,250,247,.28)}
/* Variante cliquable, pour les communes de la section zone */
a.cp-badge--outline:hover{border-color:var(--accent);color:var(--text-accent);text-decoration:none}

/* ============================================================== 6. Card */
/* source : UI-UX/components/core/Card.jsx */
/* La structure est portée par la bordure hairline, pas par l'ombre —
   cf. guidelines/elevation.html */
.cp-card{
  border-radius:var(--radius-lg);padding:var(--space-6);
  background:var(--surface-card);border:1px solid var(--border-subtle);
  box-shadow:var(--shadow-xs);
  transition:box-shadow var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out);
}
.cp-card--soft{background:var(--surface-accent-soft);border-color:transparent}
.cp-card--muted{background:var(--surface-muted);border-color:transparent}
.cp-card--inverse{background:var(--surface-inverse);border-color:rgba(251,250,247,.12);color:rgba(251,250,247,.72)}
.cp-card.is-interactive:hover{
  box-shadow:var(--shadow-md);border-color:var(--border-accent);transform:translateY(-2px);
}

/* =============================================================== 7. Logo */
/* source : UI-UX/components/core/Logo.jsx */
.cp-logo{display:inline-flex;align-items:center;gap:14px;text-decoration:none}
.cp-logo:hover{text-decoration:none}
.cp-logo img{height:40px;width:auto;display:block}
.cp-logo__txt{display:flex;flex-direction:column;line-height:1.1}
.cp-logo__name{
  font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:14.4px;
  letter-spacing:.02em;color:var(--text-heading);
}
.cp-logo__tag{
  font-family:var(--font-body);font-size:9.6px;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-muted);
}
.cp-logo--inverse .cp-logo__name{color:var(--cp-bone)}
.cp-logo--inverse .cp-logo__tag{color:var(--cp-gold-200)}

/* ============================================================== 8. Photo */
/* source : UI-UX/components/content/Photo.jsx */
.cp-photo{margin:0;display:flex;flex-direction:column;gap:10px}
.cp-photo__frame{
  position:relative;aspect-ratio:4/3;border-radius:var(--radius-lg);
  overflow:hidden;background:var(--surface-muted);
}
.cp-photo--16x10 .cp-photo__frame{aspect-ratio:16/10}
.cp-photo--4x5  .cp-photo__frame{aspect-ratio:4/5}
.cp-photo__frame img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* Traitement uniforme imposé par guidelines/photo-treatment.html */
  filter:saturate(.92) contrast(1.02);
}
/* Placeholder en attente des vraies photos de chantier */
.cp-photo__frame.is-empty{border:1px dashed var(--border-subtle)}
.cp-photo__ph{
  position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;
  align-items:center;justify-content:center;text-align:center;padding:var(--space-4);
  color:var(--text-muted);font-family:var(--font-body);font-size:var(--fs-caption);
  letter-spacing:.04em;
}
.cp-photo__overlay{position:absolute;inset:0;background:var(--overlay-photo)}
.cp-photo figcaption,.cp-photo__cap{
  font-family:var(--font-body);font-size:var(--fs-caption);color:var(--text-muted);
}

/* ======================================================= 9. BeforeAfter */
/* source : UI-UX/components/content/BeforeAfter.jsx */
.cp-ba{display:flex;flex-direction:column;gap:var(--space-4)}
.cp-ba__pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.cp-ba__side{position:relative}
.cp-ba__tag{
  position:absolute;top:12px;left:12px;padding:5px 10px;
  border-radius:var(--radius-pill);
  font-family:var(--font-body);font-size:var(--fs-caption);font-weight:var(--fw-medium);
  letter-spacing:.04em;background:rgba(28,28,26,.72);color:var(--cp-white);
}
.cp-ba__tag--after{background:var(--accent)}
.cp-ba__meta{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.cp-ba__title{
  font-family:var(--font-display);font-size:var(--fs-h4);font-weight:var(--fw-medium);
  color:var(--text-heading);
}
.cp-ba__place{font-family:var(--font-body);font-size:var(--fs-caption);color:var(--text-muted)}

/* ======================================================= 10. ServiceCard */
/* source : UI-UX/components/content/ServiceCard.jsx */
.cp-service{
  display:flex;flex-direction:column;gap:var(--space-4);
  text-decoration:none;height:100%;
}
.cp-service:hover{text-decoration:none}
.cp-service__icon{
  width:48px;height:48px;border-radius:var(--radius-md);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-accent-soft);color:var(--accent);flex:0 0 auto;
}
.cp-service h3{font-size:var(--fs-h3);font-weight:var(--fw-semibold);line-height:var(--lh-heading)}
.cp-service p{
  font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--text-muted);text-wrap:pretty;
}
.cp-service__items{list-style:none;display:flex;flex-direction:column;gap:8px}
.cp-service__items li{
  display:flex;gap:10px;align-items:flex-start;
  font-family:var(--font-body);font-size:var(--fs-small);color:var(--text-body);
}
.cp-service__items li::before{
  content:"";margin-top:8px;width:5px;height:5px;border-radius:50%;
  background:var(--accent);flex:0 0 auto;
}
.cp-service__more{
  margin-top:auto;padding-top:var(--space-3);
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-size:var(--fs-small);font-weight:var(--fw-semibold);
  color:var(--text-accent);
}
.cp-service__more svg{transition:transform var(--dur-base) var(--ease-out)}
.cp-service:hover .cp-service__more{color:var(--accent-press)}
.cp-service:hover .cp-service__more svg{transform:translateX(3px)}

/* ======================================================== 11. ReviewCard */
/* source : UI-UX/components/content/ReviewCard.jsx */
.cp-review{display:flex;flex-direction:column;gap:var(--space-4);height:100%}
.cp-review__stars{display:flex;gap:2px;color:var(--accent)}
.cp-review__stars .is-off{opacity:.22}
.cp-review blockquote{
  margin:0;font-family:var(--font-body);font-size:var(--fs-body);
  line-height:var(--lh-body);color:var(--text-body);text-wrap:pretty;
}
.cp-review__meta{
  margin-top:auto;padding-top:var(--space-3);border-top:1px solid var(--border-subtle);
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
}
.cp-review__author{
  font-family:var(--font-display);font-size:var(--fs-small);font-weight:var(--fw-semibold);
  color:var(--text-heading);
}
.cp-review__author span{color:var(--text-muted);font-weight:var(--fw-regular)}
.cp-review__src{font-family:var(--font-body);font-size:var(--fs-caption);color:var(--text-muted)}

/* ============================================================== 12. FAQ */
/* source : UI-UX/components/content/FaqItem.jsx — porté sur <details>/<summary>
   pour rester dépliable sans JavaScript */
.cp-faq{border-bottom:1px solid var(--border-subtle)}
.cp-faq summary{
  display:flex;gap:16px;align-items:center;justify-content:space-between;
  padding:20px 0;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-size:var(--fs-h4);font-weight:var(--fw-medium);
  color:var(--text-heading);transition:color var(--dur-base) var(--ease-out);
}
.cp-faq summary::-webkit-details-marker{display:none}
.cp-faq summary:hover{color:var(--text-accent)}
.cp-faq[open] summary{color:var(--text-accent)}
.cp-faq__sign{flex:0 0 auto;color:var(--accent);display:inline-flex;
  transition:transform var(--dur-base) var(--ease-out)}
.cp-faq[open] .cp-faq__sign{transform:rotate(45deg)}
.cp-faq__body{
  margin:0;padding-bottom:22px;max-width:62ch;
  font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--text-muted);text-wrap:pretty;
}

/* ========================================================== 13. CtaBand */
/* source : UI-UX/components/content/CtaBand.jsx */
.cp-cta{
  background:var(--surface-inverse);border-radius:var(--radius-xl);
  padding:clamp(32px,5vw,64px);
  display:flex;flex-wrap:wrap;gap:var(--space-6);
  align-items:center;justify-content:space-between;
}
.cp-cta__txt{max-width:46ch;display:flex;flex-direction:column;gap:12px}
.cp-cta h2{
  font-size:var(--fs-h2);font-weight:var(--fw-semibold);
  line-height:var(--lh-heading);letter-spacing:var(--ls-heading);color:var(--cp-bone);
}
.cp-cta p{font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);color:rgba(251,250,247,.72)}
.cp-cta__act{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.cp-cta__tel{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-size:var(--fs-body);font-weight:var(--fw-medium);
  color:var(--cp-bone);
}
.cp-cta__tel:hover{color:var(--cp-gold-200)}

/* ======================================================== 14. Breadcrumb */
/* source : UI-UX/components/content/Breadcrumb.jsx */
.cp-crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-family:var(--font-body);font-size:var(--fs-caption);color:var(--text-muted);
  list-style:none;
}
.cp-crumb li{display:inline-flex;align-items:center;gap:8px}
.cp-crumb a{color:var(--text-muted)}
.cp-crumb a:hover{color:var(--text-accent)}
.cp-crumb [aria-current="page"]{color:var(--text-body)}
.cp-crumb svg{opacity:.5}

/* =========================================================== 15. Forms */
/* source : UI-UX/components/forms/*.jsx */
.cp-field{display:flex;flex-direction:column;gap:8px}
.cp-label{
  font-family:var(--font-body);font-size:var(--fs-small);font-weight:var(--fw-medium);
  color:var(--text-heading);
}
.cp-label .req{color:var(--accent)}
.cp-control{
  width:100%;box-sizing:border-box;padding:13px 14px;
  font-family:var(--font-body);font-size:var(--fs-body);color:var(--text-heading);
  background:var(--surface-card);border-radius:var(--radius-md);
  border:1px solid var(--border-subtle);outline:none;
  transition:border-color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
.cp-control:focus{border-color:var(--accent);box-shadow:var(--shadow-focus);outline:none}
.cp-control:user-invalid{border-color:var(--cp-danger)}
.cp-control[aria-invalid="true"]{border-color:var(--cp-danger)}
textarea.cp-control{resize:vertical;line-height:var(--lh-body)}
select.cp-control{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),
                   linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  padding-right:40px;
}
.cp-hint{font-family:var(--font-body);font-size:var(--fs-caption);color:var(--text-muted)}
.cp-hint--err{color:var(--cp-danger);font-weight:var(--fw-medium)}

/* Les classes de Checkbox.jsx et RadioGroup.jsx ne sont plus utilisées : le
   formulaire de devis a été raccourci et n'a plus ni case à cocher ni groupe
   de boutons radio. Le CSS a été retiré plutôt que conservé mort ; il reste
   reconstructible depuis UI-UX/components/forms/ si le besoin revient. */

/* ==================================================== 16. Formulaire court */
/* Le parcours en 3 étapes de QuoteScreen.jsx a été abandonné : trop de champs
   faisaient abandonner avant l'envoi. Trois champs requis, deux facultatifs,
   sur un seul écran. */
.cp-form{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5) var(--space-4)}
@media (max-width:620px){.cp-form{grid-template-columns:1fr}}
.cp-opt{
  font-family:var(--font-body);font-size:var(--fs-caption);font-weight:var(--fw-regular);
  color:var(--text-muted);
}
.cp-formnav{display:flex;gap:var(--space-3);margin-top:var(--space-6)}

/* ========================================================= 17. Header */
/* source : UI-UX/components/navigation/SiteHeader.jsx */
.cp-hdr{
  position:sticky;top:0;z-index:20;
  background:rgba(251,250,247,.9);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border-subtle);
}
@supports not (backdrop-filter:blur(1px)){.cp-hdr{background:var(--surface-page)}}
.cp-hdr__bar{
  max-width:var(--container);margin:0 auto;padding:14px var(--gutter);
  display:flex;align-items:center;gap:var(--space-5);
  justify-content:space-between;min-width:0;
}
.cp-hdr__nav{display:flex;gap:var(--space-5);align-items:center;flex-wrap:nowrap;min-width:0}
.cp-hdr__nav a{
  font-family:var(--font-body);font-size:var(--fs-small);font-weight:var(--fw-medium);
  white-space:nowrap;color:var(--text-body);
  padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
}
.cp-hdr__nav a:hover{color:var(--text-accent);text-decoration:none}
.cp-hdr__nav a.is-active{color:var(--text-accent);border-bottom-color:var(--accent)}
.cp-hdr__act{display:flex;align-items:center;gap:var(--space-4);flex:0 0 auto}
/* Seule classe déjà présente en dur dans le design system (SiteHeader.jsx) */
.cp-hdr-tel{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-size:var(--fs-small);font-weight:var(--fw-medium);
  color:var(--text-heading);white-space:nowrap;
}
.cp-hdr-tel:hover{color:var(--text-accent)}
.cp-hdr-tel svg{color:var(--accent);flex:0 0 auto}
.cp-hdr__burger{display:none}
.cp-hdr__panel{
  display:flex;flex-direction:column;gap:2px;
  padding:8px var(--gutter) 16px;border-top:1px solid var(--border-subtle);
  background:var(--surface-page);
}
.cp-hdr__panel a{
  padding:12px 0;font-family:var(--font-body);font-size:var(--fs-body);
  color:var(--text-body);border-bottom:1px solid var(--border-subtle);
}
.cp-hdr__panel a:hover{color:var(--text-accent);text-decoration:none}
/* Bascule à 1100px, comme le useMedia de SiteHeader.jsx */
@media (max-width:1100px){
  .cp-hdr__nav{display:none}
  .cp-hdr__burger{display:inline-flex}
}
@media (min-width:1101px){
  .cp-hdr__panel{display:none !important}
}
@media (max-width:640px){
  .cp-hdr-tel span{display:none}
}

/* ========================================================= 18. Footer */
/* source : UI-UX/components/navigation/SiteFooter.jsx */
.cp-ftr{background:var(--surface-inverse);color:rgba(251,250,247,.72)}
.cp-ftr__top{
  max-width:var(--container);margin:0 auto;
  padding:var(--space-9) var(--gutter) var(--space-6);
  display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--space-7);
}
@media (max-width:900px){.cp-ftr__top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cp-ftr__top{grid-template-columns:1fr;gap:var(--space-6)}}
.cp-ftr__intro{display:flex;flex-direction:column;gap:var(--space-4)}
.cp-ftr__intro p{font-family:var(--font-body);font-size:var(--fs-small);line-height:var(--lh-body);max-width:34ch}
.cp-ftr__col{display:flex;flex-direction:column;gap:12px}
.cp-ftr__ttl{
  font-family:var(--font-body);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--cp-gold-200);
}
.cp-ftr__col a{font-family:var(--font-body);font-size:var(--fs-small);color:rgba(251,250,247,.72)}
.cp-ftr__col a:hover{color:var(--cp-white)}
.cp-ftr__social{display:flex;gap:10px}
.cp-ftr__social .cp-iconbtn{color:rgba(251,250,247,.72)}
.cp-ftr__social .cp-iconbtn:hover{color:var(--cp-gold-200)}
.cp-ftr__legal{
  max-width:var(--container);margin:0 auto;
  padding:var(--space-4) var(--gutter) var(--space-7);
  border-top:1px solid rgba(251,250,247,.12);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  font-family:var(--font-body);font-size:var(--fs-caption);
}
.cp-ftr__legal a{color:inherit}
.cp-ftr__legal a:hover{color:var(--cp-white)}
.cp-ftr__legal nav{display:flex;flex-wrap:wrap;gap:18px}

/* ==================================================== 19. StickyCallBar */
/* source : UI-UX/components/navigation/StickyCallBar.jsx
   Présent dans le design system mais inutilisé par les écrans — activé ici
   sur mobile : c'est le premier levier de conversion sur téléphone. */
.cp-callbar{
  position:fixed;bottom:0;left:0;right:0;z-index:30;
  display:none;gap:10px;padding:10px;
  background:rgba(251,250,247,.94);backdrop-filter:blur(10px);
  border-top:1px solid var(--border-subtle);
}
.cp-callbar a{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;border-radius:var(--radius-md);
  font-family:var(--font-display);font-size:var(--fs-small);font-weight:var(--fw-semibold);
  background:var(--surface-card);color:var(--text-heading);
  border:1px solid var(--border-subtle);
}
.cp-callbar a:hover{text-decoration:none}
.cp-callbar a svg{color:var(--accent)}
.cp-callbar a.is-primary{background:var(--accent);color:var(--text-on-accent);border-color:var(--accent)}
.cp-callbar a.is-primary svg{color:var(--text-on-accent)}
@media (max-width:860px){
  .cp-callbar{display:flex}
  body{padding-bottom:76px}
}

/* =============================================== 19b. Fenêtre de rappel */
/* Petite fenêtre de capture qui apparaît au défilement. Deux champs, pour les
   visiteurs qui ne rempliront pas le formulaire complet. */
.cp-recall{
  position:fixed;z-index:29;
  right:var(--space-5);bottom:var(--space-5);
  width:300px;max-width:calc(100vw - 2 * var(--space-4));
  display:flex;flex-direction:column;gap:10px;
  padding:var(--space-5);
  background:var(--surface-card);
  border:1px solid var(--border-subtle);
  border-top:2px solid var(--accent);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
}
/* Entrée discrète, dans la grammaire de motion du système */
.cp-recall{
  opacity:0;transform:translateY(12px);
  transition:opacity var(--dur-slow) var(--ease-out),
             transform var(--dur-slow) var(--ease-out);
}
.cp-recall.is-shown{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .cp-recall{transition:none;transform:none}
}

.cp-recall__t{
  font-family:var(--font-display);font-size:var(--fs-h4);font-weight:var(--fw-semibold);
  color:var(--text-heading);line-height:var(--lh-heading);padding-right:var(--space-5);
}
.cp-recall__form{display:flex;flex-direction:column;gap:10px}
.cp-recall__form .cp-control{padding:11px 13px;font-size:var(--fs-small)}
.cp-recall__alt{
  font-family:var(--font-body);font-size:var(--fs-caption);color:var(--text-muted);
  text-align:center;
}
.cp-recall__x{
  position:absolute;top:8px;right:8px;
  width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:var(--radius-sm);background:transparent;
  color:var(--text-muted);cursor:pointer;
  transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);
}
.cp-recall__x:hover{color:var(--text-heading);background:var(--surface-muted)}

/* Sur mobile la fenêtre se place au-dessus de la barre d'appel et prend
   toute la largeur. */
@media (max-width:860px){
  .cp-recall{
    left:var(--space-3);right:var(--space-3);
    bottom:calc(76px + var(--space-3));
    width:auto;max-width:none;
  }
}
/* Écran très bas (mobile en paysage) : la fenêtre mangerait tout l'écran. */
@media (max-height:460px){
  .cp-recall{display:none}
}

/* ===================================================== 20. Blocs de page */
/* Chiffres clés de la section artisan */
.cp-stats{display:flex;flex-wrap:wrap;gap:var(--space-6)}
.cp-stat{display:flex;flex-direction:column;gap:2px}
.cp-stat__n{
  font-family:var(--font-display);font-size:var(--fs-h2);font-weight:var(--fw-semibold);
  line-height:var(--lh-tight);color:var(--text-heading);
}
.cp-stat__l{font-family:var(--font-body);font-size:var(--fs-small);color:var(--text-muted)}

/* Colonne de texte SEO */
.cp-prose{max-width:66ch;display:flex;flex-direction:column;gap:var(--space-4)}
.cp-prose p{font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body)}
.cp-prose h3{font-size:var(--fs-h3);font-weight:var(--fw-semibold);margin-top:var(--space-4)}
.cp-prose ul{display:flex;flex-direction:column;gap:8px;list-style:none}
.cp-prose ul li{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-body);color:var(--text-body)}
.cp-prose ul li::before{content:"";margin-top:9px;width:5px;height:5px;border-radius:50%;background:var(--accent);flex:0 0 auto}

/* Liste de réassurance à puces cochées */
.cp-checks{list-style:none;display:flex;flex-direction:column;gap:10px}
.cp-checks li{
  display:flex;gap:10px;align-items:flex-start;
  font-family:var(--font-body);font-size:var(--fs-small);color:var(--text-body);
}
.cp-checks li svg{color:var(--accent);flex:0 0 auto;margin-top:2px}

/* Cartes de communes, groupées par code postal */
.cp-zone{display:flex;flex-direction:column;gap:6px;padding:var(--space-5)}
.cp-zone__cp{
  font-family:var(--font-display);font-size:var(--fs-h4);font-weight:var(--fw-semibold);
  color:var(--accent);letter-spacing:.02em;
}
.cp-zone__lbl{
  font-family:var(--font-body);font-size:var(--fs-caption);color:var(--text-muted);
  letter-spacing:.02em;
}
.cp-zone__list{
  list-style:none;display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:var(--space-2);
  font-family:var(--font-body);font-size:var(--fs-small);color:var(--text-body);
}
.cp-zone__list li{display:inline-flex;align-items:center}
.cp-zone__list li:not(:last-child)::after{content:"·";margin-left:10px;color:var(--cp-ink-300)}

/* Filtres de la galerie */
.cp-filters{display:flex;flex-wrap:wrap;gap:10px}
.cp-filter{
  padding:10px 18px;border-radius:var(--radius-pill);cursor:pointer;
  border:1px solid var(--border-subtle);background:var(--surface-card);
  font-family:var(--font-body);font-size:var(--fs-small);font-weight:var(--fw-medium);
  color:var(--text-body);transition:all var(--dur-base) var(--ease-out);
}
.cp-filter:hover{border-color:var(--accent);color:var(--text-accent)}
.cp-filter[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}
.cp-work[hidden]{display:none}

/* Bloc NAP */
.cp-nap{display:flex;flex-direction:column;gap:var(--space-4)}
.cp-nap__ttl{font-family:var(--font-display);font-size:var(--fs-h4);font-weight:var(--fw-semibold);color:var(--text-heading)}
.cp-nap dl{margin:0;display:flex;flex-direction:column;gap:10px}
.cp-nap div{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-small)}
.cp-nap dt{flex:0 0 auto;color:var(--accent);display:inline-flex;margin-top:2px}
.cp-nap dd{margin:0;color:var(--text-body)}

/* Colonne latérale sticky du formulaire */
.cp-aside{display:flex;flex-direction:column;gap:var(--space-4);position:sticky;top:110px}
@media (max-width:1000px){.cp-aside{position:static}}
.cp-quote{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--space-7);align-items:start}
@media (max-width:1000px){.cp-quote{grid-template-columns:1fr}}

/* Notice de résultat du formulaire */
.cp-notice{
  display:flex;gap:12px;align-items:flex-start;padding:var(--space-4);
  border-radius:var(--radius-md);font-size:var(--fs-small);
  border:1px solid transparent;
}
.cp-notice--ok{background:rgba(63,107,74,.08);border-color:var(--cp-success);color:var(--cp-success)}
.cp-notice--err{background:rgba(140,59,46,.07);border-color:var(--cp-danger);color:var(--cp-danger)}
.cp-notice svg{flex:0 0 auto;margin-top:2px}

/* ================================================ 21. Révélation au scroll */
/* cf. guidelines/motion-reveal.html : fade + 16 px, 600 ms, une seule fois.
   L'effet est OPT-IN : c'est site.js qui pose `is-armed` sur les éléments
   encore sous la ligne de flottaison. Conséquence voulue : si le JS ne se
   charge pas (erreur, blocage, navigateur ancien), rien n'est masqué. */
.reveal.is-armed{
  opacity:0;transform:translateY(var(--reveal-shift));
  transition:opacity var(--dur-reveal) var(--ease-out),
             transform var(--dur-reveal) var(--ease-out);
}
.reveal.is-armed.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal.is-armed{opacity:1;transform:none;transition:none}
}

/* Conteneur des symboles SVG — évite un style="display:none" inline, qui
   forcerait `unsafe-inline` dans la CSP */
.sprite{display:none}

/* ============================================== 22. Pages éditoriales */
.cp-legal{max-width:var(--container-narrow);margin-inline:auto;padding-inline:var(--gutter)}
.cp-legal h2{font-size:var(--fs-h3);margin-top:var(--space-7)}
.cp-legal h3{font-size:var(--fs-h4);margin-top:var(--space-5)}
.cp-legal p,.cp-legal li{
  font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--text-body);
}
.cp-legal ul{margin:var(--space-3) 0;padding-left:var(--space-5);list-style:disc}
.cp-legal li{margin-bottom:8px}
.cp-legal dl{display:grid;grid-template-columns:auto 1fr;gap:8px var(--space-4);margin:var(--space-4) 0}
.cp-legal dt{font-weight:var(--fw-semibold);color:var(--text-heading);font-family:var(--font-body);font-size:var(--fs-small)}
.cp-legal dd{margin:0;font-size:var(--fs-small)}
@media (max-width:560px){.cp-legal dl{grid-template-columns:1fr;gap:2px var(--space-4)}
  .cp-legal dd{margin-bottom:10px}}

/* ============================================================ 23. Utilitaires */
/* Titre de niveau display, réservé au H1 du hero (guidelines/type-display.html) */
.cp-h1{
  font-size:var(--fs-display);font-weight:var(--fw-semibold);
  line-height:var(--lh-tight);letter-spacing:var(--ls-display);
}
.cp-h2{font-size:var(--fs-h2);font-weight:var(--fw-semibold);line-height:var(--lh-heading);letter-spacing:var(--ls-heading)}
.cp-h3{font-size:var(--fs-h3);font-weight:var(--fw-semibold);line-height:var(--lh-heading)}
.cp-h4{font-size:var(--fs-h4);font-weight:var(--fw-semibold)}
.txt-sm{font-size:var(--fs-small);color:var(--text-muted)}
.txt-big{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:var(--fw-semibold);color:var(--text-heading)}
.mt-2{margin-top:var(--space-2)}
.mt-4{margin-top:var(--space-4)}
.mb-6{margin-bottom:var(--space-6)}
.center-col{margin-inline:auto}
.gap-2{gap:8px}
.measure{max-width:66ch}

/* Impression : on retire le superflu */
@media print{
  .cp-hdr,.cp-callbar,.cp-cta,.cp-filters,.skip{display:none !important}
  body{background:#fff}
  .sec{padding-block:var(--space-5)}
}