/* ============================================================
   Socrame — styles de composants. Préfixe `sc-`.
   Les familles sc-* appartiennent aux composants : ne pas les
   réimplémenter, utiliser le composant.
   ============================================================ */

/* ---- Base typographique des composants ----
   Chaque composant porte sa famille sur son bloc racine : le système n'a pas de
   provider et ne peut pas compter sur une règle `body` de l'application hôte.
   Sans ça, tout le texte courant tombe en serif par défaut du navigateur. */
.sc-heading, .sc-service, .sc-proofbar, .sc-stats, .sc-pricerow, .sc-testimonial,
.sc-steps, .sc-faq, .sc-ctaband, .sc-crumb, .sc-callbar, .sc-dept, .sc-communes {
  font-family: var(--font-body);
  line-height: var(--lh-body);
}
.sc-prose { font-family: var(--font-body); }

/* ---- Utilitaires réutilisables dans ton propre balisage ---- */
.sc-h1, .sc-h2, .sc-h3, .sc-h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tr-display);
  line-height: var(--lh-display);
  color: var(--text-strong);
  margin: 0;
}
.sc-h1 { font-size: var(--fs-h1); }
.sc-h2 { font-size: var(--fs-h2); }
.sc-h3 { font-size: var(--fs-h3); }
.sc-h4 { font-size: var(--fs-h4); }

.sc-overline {
  font-family: var(--font-display);
  font-size: var(--fs-overline);
  font-weight: 700;
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  color: var(--copper-600);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.sc-overline::before {
  content: "";
  width: 28px;
  height: var(--rule-h);
  background: currentColor;
  flex: none;
}

.sc-prose { max-width: var(--measure); line-height: var(--lh-body); color: var(--text-body); }
.sc-stat { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-stat);
  letter-spacing: var(--tr-display); font-variant-numeric: tabular-nums; }
.sc-rule { width: var(--rule-w); height: var(--rule-h); background: var(--rule-color); border: 0; }

/* ---- Button ---- */
.sc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em;
  border: 2px solid transparent; border-radius: var(--r-sm);
  min-height: var(--touch-min); padding: 0 var(--sp-6); font-size: var(--fs-body-s);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.sc-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.sc-btn--primary { background: var(--copper-600); color: var(--text-on-brand); }
.sc-btn--primary:hover { background: var(--copper-700); color: var(--text-on-brand); }
.sc-btn--outline { background: transparent; color: var(--teal-900); border-color: var(--teal-900); }
.sc-btn--outline:hover { background: var(--teal-900); color: var(--text-invert); }
.sc-btn--ghost { background: transparent; color: var(--text-invert); border-color: rgba(250,247,242,.35); }
.sc-btn--ghost:hover { border-color: var(--chalk-100); }
.sc-btn--solid { background: var(--teal-700); color: #fff; }
.sc-btn--solid:hover { background: var(--teal-800); color: #fff; }
.sc-btn--lg { min-height: 56px; padding: 0 var(--sp-8); font-size: var(--fs-body); }
.sc-btn--sm { min-height: 44px; padding: 0 var(--sp-5); font-size: var(--fs-caption); }
.sc-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* ---- SectionHeading ---- */
.sc-heading { display: flex; flex-direction: column; gap: var(--sp-4); }
.sc-heading__body { max-width: var(--measure); font-size: var(--fs-body-l);
  line-height: var(--lh-body); color: var(--text-body); }
.sc-heading--invert :is(.sc-h1, .sc-h2, .sc-h3) { color: var(--text-invert); }
.sc-heading--invert .sc-heading__body { color: var(--text-on-teal); }
.sc-heading--invert .sc-overline { color: var(--copper-400); }

/* ---- ServiceCard ---- */
.sc-service {
  display: flex; flex-direction: column; gap: var(--sp-3);
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-8); text-decoration: none;
  transition: border-color var(--dur-base) var(--ease);
}
.sc-service:hover { border-color: var(--copper-600); }
.sc-service__icon { color: var(--pillar); }
.sc-service__title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h4);
  letter-spacing: var(--tr-display); color: var(--text-strong); margin: 0; }
.sc-service__desc { font-size: var(--fs-body-s); color: var(--text-body); margin: 0; }
.sc-service__price { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-body-s);
  color: var(--copper-700); font-variant-numeric: tabular-nums; }
.sc-service__more { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-body-s);
  color: var(--copper-700); margin-top: auto; }
.sc-service--invert { background: var(--surface-brand); border-color: var(--surface-brand); }
.sc-service--invert .sc-service__title { color: var(--text-invert); }
.sc-service--invert .sc-service__desc { color: var(--text-on-teal); }
.sc-service--invert .sc-service__more,
.sc-service--invert .sc-service__price { color: var(--copper-400); }
.sc-service--invert .sc-service__icon { color: var(--copper-400); }

/* ---- ProofBar ---- */
.sc-proofbar { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.sc-proofbar__item {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  border: 1px solid var(--border); background: var(--surface-raised);
  border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-caption); font-weight: 500; color: var(--text-body);
}
.sc-proofbar__item svg { color: var(--teal-700); flex: none; }
.sc-proofbar__item--todo { border-color: var(--copper-400); background: var(--surface-wash);
  color: var(--copper-800); }

/* ---- ProofStats ---- */
.sc-stats { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.sc-stats__item { display: flex; flex-direction: column; gap: var(--sp-1); }
.sc-stats__value { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-stat);
  letter-spacing: var(--tr-display); font-variant-numeric: tabular-nums; color: var(--text-strong);
  line-height: 1; }
.sc-stats__label { font-size: var(--fs-caption); color: var(--text-muted); }
.sc-stats__sep { width: 1px; align-self: stretch; background: var(--border); }
.sc-stats--invert .sc-stats__value { color: var(--text-invert); }
.sc-stats--invert .sc-stats__label { color: var(--text-on-teal); }
.sc-stats--invert .sc-stats__sep { background: rgba(214,230,229,.28); }

/* ---- PriceRow ---- */
.sc-pricerow { display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--sp-5); padding: var(--sp-5) 0; border-top: 1px solid var(--border); }
.sc-pricerow__label { font-weight: 500; color: var(--text-strong); }
.sc-pricerow__note { display: block; font-size: var(--fs-caption); color: var(--text-muted);
  font-weight: 400; margin-top: var(--sp-1); }
.sc-pricerow__price { font-family: var(--font-display); font-weight: 800; font-size: 22px;
  letter-spacing: var(--tr-display); font-variant-numeric: tabular-nums; color: var(--text-strong);
  white-space: nowrap; }
.sc-pricerow__price--soft { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body-s);
  color: var(--text-muted); }

/* ---- TestimonialCard ---- */
.sc-testimonial { display: flex; flex-direction: column; gap: var(--sp-4);
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-8); }
.sc-testimonial__quote { font-size: var(--fs-body-s); line-height: var(--lh-body);
  color: var(--text-body); margin: 0; }
.sc-testimonial__author { font-size: var(--fs-caption); color: var(--text-muted); margin-top: auto; }
.sc-testimonial__stars { display: flex; gap: 2px; color: var(--copper-600); }
.sc-testimonial--invert { background: var(--teal-800); border-color: var(--teal-700); }
.sc-testimonial--invert .sc-testimonial__quote { color: var(--text-invert); }
.sc-testimonial--invert .sc-testimonial__author { color: var(--text-on-teal); }
.sc-testimonial--invert .sc-testimonial__stars { color: var(--copper-400); }

/* ---- StepList ---- */
.sc-steps { display: flex; flex-direction: column; }
.sc-steps__item { display: flex; gap: var(--sp-5); padding: var(--sp-6) 0;
  border-top: 1px solid var(--border); }
.sc-steps__n { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-body-s);
  color: var(--copper-600); border: 2px solid var(--copper-600); border-radius: var(--r-sm);
  min-width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  flex: none; font-variant-numeric: tabular-nums; }
.sc-steps__body { display: flex; flex-direction: column; gap: var(--sp-1); }
.sc-steps__title { font-family: var(--font-display); font-weight: 800; font-size: 17px;
  letter-spacing: var(--tr-display); color: var(--text-strong); margin: 0; }
.sc-steps__text { font-size: var(--fs-body-s); color: var(--text-body); margin: 0; }

/* ---- FaqAccordion ---- */
.sc-faq { display: flex; flex-direction: column; }
.sc-faq__item { border-top: 1px solid var(--border); }
.sc-faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-4); background: none; border: 0; cursor: pointer; text-align: left;
  padding: var(--sp-5) 0; min-height: var(--touch-min);
  font-family: var(--font-display); font-weight: 800; font-size: 17px;
  letter-spacing: var(--tr-display); color: var(--text-strong); }
.sc-faq__q:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.sc-faq__q svg { color: var(--copper-600); flex: none; transition: transform var(--dur-base) var(--ease); }
.sc-faq__item[data-open="true"] .sc-faq__q svg { transform: rotate(180deg); }
.sc-faq__a { padding: 0 0 var(--sp-5); font-size: var(--fs-body-s); line-height: var(--lh-body);
  color: var(--text-body); max-width: var(--measure); margin: 0; }

/* ---- CtaBand ---- */
.sc-ctaband { background: var(--surface-accent); color: var(--text-on-brand); }
.sc-ctaband__inner { max-width: var(--container); margin-inline: auto;
  padding: var(--sp-20) var(--gutter); display: flex; justify-content: space-between;
  align-items: center; gap: var(--sp-12); flex-wrap: wrap; }
.sc-ctaband__title { font-family: var(--font-display); font-weight: 800; font-size: 38px;
  letter-spacing: var(--tr-display); line-height: var(--lh-display); color: #fff; margin: 0; }
.sc-ctaband__body { font-size: var(--fs-body); color: #FCEEDF; margin: var(--sp-3) 0 0; }
.sc-ctaband__actions { display: flex; gap: var(--sp-4); flex: none; }
.sc-ctaband .sc-btn--primary { background: var(--teal-900); }
.sc-ctaband .sc-btn--primary:hover { background: var(--teal-950); }
.sc-ctaband .sc-btn--outline { background: #fff; color: var(--copper-700); border-color: #fff; }

/* ---- Breadcrumb ---- */
.sc-crumb { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center;
  font-size: var(--fs-caption); color: var(--text-muted); }
.sc-crumb a { color: inherit; text-decoration: none; }
.sc-crumb a:hover { text-decoration: underline; }
.sc-crumb__sep { opacity: .6; }
.sc-crumb__current { color: var(--copper-700); }
.sc-crumb--invert { color: var(--text-on-teal); }
.sc-crumb--invert .sc-crumb__current { color: var(--copper-400); }

/* ---- MobileCallBar ---- */
.sc-callbar { display: flex; gap: var(--sp-3); align-items: stretch;
  background: var(--surface-brand); padding: var(--sp-3); border-top: 2px solid var(--copper-600); }
.sc-callbar__call { flex: 1; }
.sc-callbar__quote { flex: 1; }
@media (min-width: 768px) { .sc-callbar { display: none; } }

/* ---- DepartmentCard ---- */
.sc-dept { display: flex; flex-direction: column; gap: var(--sp-2);
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-8); text-decoration: none;
  transition: border-color var(--dur-base) var(--ease); }
.sc-dept:hover { border-color: var(--copper-600); }
.sc-dept__code { font-family: var(--font-display); font-weight: 800; font-size: 34px;
  letter-spacing: var(--tr-display); color: var(--copper-600); font-variant-numeric: tabular-nums;
  line-height: 1; }
.sc-dept__name { font-family: var(--font-display); font-weight: 800; font-size: 18px;
  letter-spacing: var(--tr-display); color: var(--text-strong); margin: 0; }
.sc-dept__towns { font-size: var(--fs-caption); color: var(--text-muted); margin: 0; }

/* ---- CommuneChips ---- */
.sc-communes { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.sc-communes__chip { background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-body-s);
  font-weight: 500; color: var(--text-strong); text-decoration: none;
  transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease); }
.sc-communes__chip:hover { border-color: var(--copper-600); color: var(--copper-700); }

/* ---- Mobile : la bande d'appel ne doit pas élargir la page ----
   Constaté le 18/09/2026 au premier passage sous 375 px : le document
   mesurait 399 px de large pour une fenêtre de 375, soit un défilement
   horizontal sur tout le site. .sc-ctaband__inner sait passer à la ligne,
   mais .sc-ctaband__actions portait flex:none : le bloc des deux boutons
   gardait ses 379 px et débordait de 24 px. On le laisse s'étirer et les
   boutons s'empiler. */
@media (max-width: 640px) {
  .sc-ctaband__actions { flex: 1 1 100%; width: 100%; flex-wrap: wrap; }
  .sc-ctaband__actions > * { flex: 1 1 100%; justify-content: center; }
}

/* ---- Messages du formulaire ---- */
.sc-alert { border-radius: var(--r-sm); padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-8); border: 1px solid; font-size: var(--fs-body-s); }
.sc-alert strong { display: block; font-family: var(--font-display); font-size: var(--fs-body);
  margin-bottom: var(--sp-2); }
.sc-alert p, .sc-alert ul { margin: 0; }
.sc-alert ul { padding-left: 1.1em; }
.sc-alert li + li { margin-top: 4px; }
.sc-alert--ok { background: var(--teal-50); border-color: var(--teal-300); color: var(--teal-900); }
.sc-alert--ok a { color: var(--teal-900); text-decoration: underline; }
.sc-alert--ko { background: #FDF1EF; border-color: #E0A79C; color: #7A2318; }

/* ---- Textes légaux ---- */
.sc-legal { max-width: 760px; }
.sc-legal h2 { font-family: var(--font-display); font-size: 20px; margin: var(--sp-10) 0 var(--sp-3); color: var(--text-strong); }
.sc-legal h2:first-child { margin-top: 0; }
.sc-legal p, .sc-legal li { line-height: 1.65; }
.sc-legal ul { padding-left: 1.2em; }
.sc-legal li + li { margin-top: var(--sp-2); }
.sc-legal code { font-size: .9em; background: var(--surface-raised); padding: 1px 5px; border-radius: 3px; }
.sc-legal__table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-s); margin: var(--sp-4) 0; }
.sc-legal__table th, .sc-legal__table td { text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--border); vertical-align: top; }
.sc-legal__table th { font-family: var(--font-display); font-weight: 600; }
@media (max-width: 640px) {
  /* Le tableau des cookies défile dans son cadre plutôt que d'élargir la page. */
  .sc-legal__table { display: block; overflow-x: auto; }
}
.sc-legal__maj { margin-top: var(--sp-10); font-size: var(--fs-caption); color: var(--text-muted); }

/* ---- Visuel de substitution (photo absente) ---- */
.sc-visuel { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(16px, 3vh, 24px); padding: clamp(24px, 4vh, 40px) var(--sp-8); min-height: clamp(220px, 34vh, 300px); text-align: center;
  background: var(--teal-800); border: 1px solid var(--teal-700); border-radius: var(--r-md, 10px);
  color: var(--copper-400); }
.sc-visuel__dessin { width: min(46%, 180px); aspect-ratio: 1; display: block; }
.sc-visuel__dessin svg { width: 100%; height: 100%; display: block; }
.sc-visuel__legende { max-width: 30ch; color: var(--teal-100); font-size: var(--fs-body-s); line-height: 1.5; }
.sc-visuel__surtitre { display: block; margin-bottom: var(--sp-2); color: var(--copper-400);
  font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.sc-visuel.sc-photo--hero { min-height: clamp(240px, 42vh, 420px); }
.sc-visuel.sc-photo--large { min-height: clamp(220px, 36vh, 340px); }
@media (max-width: 640px) { .sc-visuel.sc-photo--hero, .sc-visuel.sc-photo--large { min-height: 200px; } }

/* ---- Zones d'intervention (barre latérale du contact) ---- */
.sc-zones__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sc-zones__liste a { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2); border-radius: var(--r-sm); color: var(--text-strong); text-decoration: none; }
.sc-zones__liste a:hover { background: var(--surface-raised); color: var(--copper-700); }
.sc-zones__code { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--copper-600);
  font-variant-numeric: tabular-nums; }
.sc-zones__nb { font-size: var(--fs-caption); color: var(--text-muted); }

/* ---- Mobile : un héros qui tient dans l'écran ----
   Mesuré le 25/09/2026 en 375 × 700 : le héros de l'accueil faisait 1,6 écran.
   Les trois chiffres clés s'enroulaient sur 192 px et la photo en prenait 294.
   Les chiffres passent sur une seule ligne, la photo se raccourcit. */
@media (max-width: 640px) {
  .sc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: var(--sp-4) var(--sp-3); align-items: start; }
  .sc-stats__sep { display: none; }
  .sc-stats__value { font-size: 28px; }
  .sc-stats__label { font-size: 12px; line-height: 1.35; }
  /* La hauteur des photos se règle dans socrame.css, chargée après celle-ci :
     une règle posée ici serait écrasée par la règle de base. */
}

/* ---- Bannière et panneau de consentement (tarteaucitron) ----
   Ajouté le 30/09/2026. tarteaucitron injecte sa propre feuille APRÈS celles du
   site : à spécificité égale, la sienne gagnait. D'où le préfixe « html body ».

   « Tout accepter » et « Tout refuser » ont exactement le même style. Par défaut,
   l'un était vert et l'autre rouge : une incitation visuelle à accepter, alors
   que la CNIL demande que refuser soit aussi simple et aussi visible. */
html body #tarteaucitronRoot #tarteaucitronAlertBig {
  background: var(--teal-950); color: var(--teal-100);
  font-family: var(--font-body); padding: var(--sp-4) var(--sp-6);
  border-top: 3px solid var(--copper-600); }
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert {
  font-family: var(--font-body); color: var(--teal-100); }
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2,
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2 {
  background: var(--copper-600); color: #fff; border: 1px solid var(--copper-600);
  border-radius: var(--r-sm); padding: 9px 18px; font-family: var(--font-display); font-weight: 600; }
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2:hover,
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2:hover {
  background: var(--copper-700); border-color: var(--copper-700); }
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert {
  background: transparent; color: #fff; border: 1px solid var(--teal-300);
  border-radius: var(--r-sm); padding: 9px 18px; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2,
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2,
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert { min-height: var(--touch-min); }
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl {
  background: transparent; color: var(--teal-100); text-decoration: underline; padding: 9px 6px; }

/* Panneau de gestion */
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronMainLine,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronClosePanel,
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronH1 { background: var(--teal-950); }
html body #tarteaucitronRoot #tarteaucitron { font-family: var(--font-body); }
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronAllow,
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronDeny,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronAllAllowed,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronAllDenied {
  background: var(--teal-800); color: #fff; border-radius: var(--r-sm); opacity: 1; }
/* Le choix actif, quel qu'il soit, prend la même couleur. */
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronIsAllowed .tarteaucitronAllow,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronIsDenied .tarteaucitronDeny,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices #tarteaucitronAllAllowed.tarteaucitronIsSelected,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices #tarteaucitronAllDenied.tarteaucitronIsSelected {
  background: var(--copper-600); }

/* Pastille de commune sans page : du texte, pas un faux lien. */
.sc-communes__chip--texte { cursor: default; color: var(--text-muted); }
.sc-communes__chip--texte:hover { border-color: var(--border); color: var(--text-muted); }

/* Lignes de prix sur petit écran. Depuis l'arrivée des prix « à partir de… »
   (30/09/2026), le montant dépassait l'écran à 320 px : jusqu'à 15 px de
   défilement horizontal. Sous 420 px, le prix passe sous le libellé. */
@media (max-width: 420px) {
  .sc-pricerow { flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); }
  .sc-pricerow > :first-child { flex: 1 1 100%; }
  .sc-pricerow__price { white-space: normal; font-size: 20px; }
}