@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap");

/* =====================================================================
   ELECTROLYS — Accueil · assets/css/style.css
   Reproduction fidèle du build Lovable (Tailwind v4 + styles custom).
   Toutes les valeurs proviennent de styles-CIsoblm-.css.

   Sommaire
   01 Design tokens        10 03 — Réalisations
   02 Reset                11 04 — Assurances
   03 Keyframes            12 05 — Avis clients
   04 Utilitaires anim.    13 06 — À propos
   05 Mise en page         14 07 — Contact
   06 Header               15 Footer
   07 Hero                 16 États hover
   08 01 — Pourquoi        17 Mouvement réduit
   09 02 — Prestations     18 Navigation entre pages
                           19 Page Contact
   ===================================================================== */

/* ---------- 01. Design tokens ---------- */
:root {
  --radius: .5rem;
  --background: oklch(98.5% .003 90);
  --foreground: oklch(22% .012 260);
  --card: oklch(100% 0 0);
  --primary: oklch(83% .17 95);
  --primary-foreground: oklch(18% .015 260);
  --secondary: oklch(24% .012 260);
  --secondary-foreground: oklch(98% .003 90);
  --muted: oklch(95.5% .005 90);
  --muted-foreground: oklch(48% .012 260);
  --border: oklch(90% .008 90);
  --brand-yellow: oklch(83% .17 95);
  --google-star: #fbbc04;

  --shadow-soft: 0 4px 24px -8px oklch(22% .012 260 / .12);
  --shadow-elegant: 0 20px 60px -20px oklch(22% .012 260 / .25);
  --shadow-glow: 0 0 40px -8px oklch(83% .17 95 / .5);

  --font-display: "Barlow Condensed", "Inter", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  /* Rayons (shadcn : dérivés de --radius) */
  --radius-sm: calc(var(--radius) - 4px);   /* 4px  */
  --radius-md: calc(var(--radius) - 2px);   /* 6px  */
  --radius-lg: var(--radius);               /* 8px  */
  --radius-xl: calc(var(--radius) + 4px);   /* 12px */
  --radius-2xl: calc(var(--radius) + 8px);  /* 16px */
  --radius-default: .25rem;                 /* .rounded */

  /* Letter-spacing */
  --tracking-wide: .025em;
  --tracking-wider: .05em;
  --tracking-widest: .1em;

  /* Transitions Tailwind par défaut */
  --ease-default: cubic-bezier(.4, 0, .2, 1);
  --dur-default: .15s;

  --container: 80rem;
}

/* ---------- 02. Reset (preflight Tailwind v4, parties utiles) ---------- */
*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: var(--font-sans); }

/* Déclarations CMS obligatoires */
html {
  font-size: inherit;
}

#div_container_1_h,
#div_container_5_fr,
#div_container_9_fo {
  width: 100%;
}

body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -.01em; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
ul { list-style: none; }
img, svg { display: block; vertical-align: middle; }
img { max-width: 100%; height: auto; }
button { font: inherit; letter-spacing: inherit; color: inherit; background-color: transparent; border-radius: 0; }

/* ---------- 03. Keyframes (identiques à l'original) ---------- */
@keyframes el-fade-up { 0% { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes el-fade-in { 0% { opacity: 0; } to { opacity: 1; } }
@keyframes el-bolt { 0%, to { opacity: 1; } 50% { opacity: .4; } }
@keyframes el-marquee { 0% { transform: translate(0); } to { transform: translate(-50%); } }
@keyframes el-deck {
  0%   { z-index: 30; opacity: 1; transform: translate(0) rotate(0) scale(1); }
  18%  { z-index: 30; opacity: 1; transform: translate(0) rotate(0) scale(1); }
  30%  { z-index: 40; opacity: 1; transform: translate(55%, -8%) rotate(14deg) scale(1.02); }
  38%  { z-index: 40; opacity: 0; transform: translate(120%, 4%) rotate(-6deg) scale(.9); }
  39%  { z-index: 10; opacity: 0; transform: translate(-7%, 14%) rotate(-7deg) scale(.88); }
  50%  { z-index: 10; opacity: 1; transform: translate(-7%, 14%) rotate(-7deg) scale(.88); }
  66%  { z-index: 20; opacity: 1; transform: translate(-4%, 8%) rotate(-4deg) scale(.92); }
  83%  { z-index: 20; opacity: 1; transform: translate(-4%, 8%) rotate(-4deg) scale(.92); }
  to   { z-index: 30; opacity: 1; transform: translate(0) rotate(0) scale(1); }
}
@keyframes ping { 75%, to { opacity: 0; transform: scale(2); } }

/* ---------- 04. Utilitaires d'animation partagés ---------- */
.animate-fade-up { animation: .7s ease-out both el-fade-up; }
.animate-fade-in-slow { animation: 1.2s ease-out both el-fade-in; }
.animate-bolt { animation: 2.5s ease-in-out infinite el-bolt; }
.animate-ping { animation: ping 1s cubic-bezier(0, 0, .2, 1) infinite; }

/* Apparition au scroll : l'original utilise un IntersectionObserver
   (seuil .12) qui ajoute .in-view → el-fade-up .8s ease-out forwards.
   Équivalent CSS pur : scroll-driven animation. Repli : visible. */
.reveal { opacity: 1; }
@supports (animation-timeline: view()) {
  .reveal {
    animation: el-fade-up ease-out both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }
}

/* Décalages d'apparition (style="animation-delay" dans l'original) */
.delay-0 { animation-delay: 0ms; }
.delay-80 { animation-delay: 80ms; }
.delay-160 { animation-delay: 160ms; }

/* Carte qui se soulève (classe custom .hover-lift) */
.hover-lift { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.hover-lift:hover { box-shadow: var(--shadow-elegant); transform: translateY(-6px); }

/* ---------- 05. Mise en page commune ---------- */
.page { min-height: 100vh; background-color: var(--background); }
.container, .bcont { max-width: var(--container); margin-inline: auto; padding-inline: 2rem; }
.bcont {padding:5rem 2rem}
.bcont .p1080{width:100%;}
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col-5 { grid-column: span 5 / span 5; }
.col-3 { grid-column: span 3 / span 3; }
.col-4 { grid-column: span 4 / span 4; }
.col-7 { grid-column: span 7 / span 7; }
.section { padding-block: 7rem; }
.bg-muted-40 { background-color: color-mix(in oklab, var(--muted) 40%, transparent); }

/* Icônes lucide : tailles */
.ico { flex-shrink: 0; }
.s-35 { width: .875rem; height: .875rem; }
.s-4 { width: 1rem; height: 1rem; }
.s-5 { width: 1.25rem; height: 1.25rem; }
.s-6 { width: 1.5rem; height: 1.5rem; }
.s-7 { width: 1.75rem; height: 1.75rem; }
.s-8 { width: 2rem; height: 2rem; }
.c-primary { color: var(--primary); }
.c-secondary { color: var(--secondary); }

/* Étiquette de section (SectionTag : 01, 02…) */
.eyebrow { display: inline-flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.eyebrow__num {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  height: 2rem; width: 2rem; border-radius: var(--radius-md);
  background-color: var(--primary); color: var(--secondary);
  font-family: var(--font-display); font-weight: 700; font-size: .875rem; line-height: 1;
}
.eyebrow__corner { position: absolute; top: -.25rem; right: -.25rem; height: .5rem; width: .5rem; background-color: var(--secondary); }
.eyebrow__label { display: flex; align-items: center; gap: .5rem; }
.eyebrow__line { height: 1px; width: 1.5rem; background-color: var(--primary); }
.eyebrow__text { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3em; color: currentColor; }

/* Titre de section (h2) */
.section-title, .p1080 h2, .p1080 h3 {
  font-family: var(--font-display); font-size: 3rem; line-height: 1;
  text-transform: uppercase; font-weight: 700; color: var(--secondary); text-wrap: balance;
}
.lead { font-size: 1.125rem; line-height: 1.625; color: var(--muted-foreground); }
.lead strong { color: var(--foreground); }

/* ---------- 06. Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background-color: color-mix(in oklab, var(--background) 85%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner { height: 5rem; display: flex; align-items: center; justify-content: space-between; }
.site-header__brand { display: flex; align-items: center; gap: .75rem; }
.site-header__logo { height: 3rem; width: auto; }
/* Menu CMS (nav.ggmenu > ul.cmenu > li) : le layout des entrées vise la liste */
.ggmenu .cmenu { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.ggmenu .cmenu > li > a { display: block; }
.site-nav__link { font-size: .875rem; line-height: calc(1.25 / .875); font-weight: 600; color: var(--foreground); }
.site-nav__soon {
  font-size: .875rem; line-height: calc(1.25 / .875); font-weight: 500;
  color: var(--muted-foreground); cursor: not-allowed; -webkit-user-select: none; user-select: none;
}
.site-header__contact { display: flex; align-items: center; gap: 1.25rem; font-size: .75rem; line-height: calc(1 / .75); color: var(--muted-foreground); }
.site-header__contact a {
  display: flex; align-items: center; gap: .5rem;
  transition: color var(--dur-default) var(--ease-default);
}
.site-header__sep { height: .75rem; width: 1px; background-color: var(--border); }

/* ---------- 07. Hero ---------- */
.hero { position: relative; overflow: hidden; background-color: var(--background); }
.hero__blob { pointer-events: none; position: absolute; border-radius: 9999px; filter: blur(64px); }
.hero__blob--yellow { top: -8rem; right: -8rem; height: 480px; width: 480px; background-color: color-mix(in oklab, var(--primary) 10%, transparent); }
.hero__blob--dark { top: 33.333333%; left: -6rem; height: 18rem; width: 18rem; background-color: color-mix(in oklab, var(--secondary) 5%, transparent); }
.hero__inner { position: relative; padding-top: 5rem; padding-bottom: 7rem; gap: 2.5rem; align-items: center; }
.hero__badge {
  display: inline-flex; align-items: center; padding: .5rem 1rem; border-radius: var(--radius-sm);
  background-color: var(--secondary); color: var(--secondary-foreground);
  font-size: .75rem; line-height: calc(1 / .75); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wider);
}
.hero__title, .ttitle, .principal_title_generic   {
  margin-top: 1.5rem; font-family: var(--font-display); font-size: 5.5rem; line-height: .95;
  font-weight: 700; color: var(--secondary); text-wrap: balance; text-transform: uppercase;
}
.hero__text { margin-top: 1.75rem; max-width: 36rem; }
.hero__actions { margin-top: 2.5rem; display: flex; align-items: center; gap: 1rem; }
.btn, .button_valid  {
  display: inline-flex; align-items: center; gap: .5rem; padding: 1rem 1.75rem;
  font-weight: 600; font-size: .875rem; line-height: calc(1.25 / .875);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
.btn--primary, .button_valid  {
  background-color: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-glow);
  transition: all var(--dur-default) var(--ease-default);
}
.btn--primary .ico { transition-property: transform, translate, scale, rotate; transition-duration: var(--dur-default); transition-timing-function: var(--ease-default); }
.btn--outline {
  border: 2px solid var(--secondary); color: var(--secondary);
  transition-property: color, background-color, border-color; transition-duration: var(--dur-default); transition-timing-function: var(--ease-default);
}
.hero__meta { margin-top: 2.5rem; display: flex; align-items: center; gap: 2rem; font-size: .875rem; line-height: calc(1.25 / .875); }
.hero__phone { display: flex; align-items: center; gap: .5rem; color: var(--secondary); font-weight: 600; }
.hero__phone-icon { height: 2.25rem; width: 2.25rem; border-radius: 9999px; background-color: color-mix(in oklab, var(--primary) 15%, transparent); display: grid; place-items: center; }
.hero__divider { height: 2rem; width: 1px; background-color: var(--border); }
.hero__exp { color: var(--muted-foreground); }
.hero__exp .cmsSpan { color: var(--secondary); font-weight: 600; }

.hero__visual { position: relative; height: 560px; display: flex; align-items: center; justify-content: center; }
.deck-stack { position: relative; width: 88%; height: 78%; perspective: 1400px; }
.deck-card {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: var(--radius-2xl); box-shadow: var(--shadow-elegant);
  border: 4px solid var(--background); background-color: var(--secondary);
  transform-origin: 50% 60%; will-change: transform, opacity; backface-visibility: hidden;
  animation: 9s cubic-bezier(.65, .05, .25, 1) infinite el-deck;
}
.deck-card:first-child { animation-delay: 0s; }
.deck-card:nth-child(2) { animation-delay: -3s; }
.deck-card:nth-child(3) { animation-delay: -6s; }
.deck-stack:hover .deck-card { animation-play-state: paused; }
.deck-card img { height: 100%; width: 100%; object-fit: cover; }
.hero__guarantee {
  position: absolute; top: 1.5rem; left: -.5rem; z-index: 50;
  background-color: var(--secondary); color: var(--secondary-foreground);
  padding: 1rem 1.25rem; border-radius: var(--radius-xl); box-shadow: var(--shadow-elegant);
}
.hero__guarantee-num { font-size: 1.875rem; font-family: var(--font-display); font-weight: 700; color: var(--primary); line-height: 1; }
.hero__guarantee-label { font-size: 10px; text-transform: uppercase; letter-spacing: var(--tracking-widest); margin-top: .25rem; }

/* ---------- 08. 01 — Pourquoi ELECTROLYS ---------- */
.why__head { gap: 3rem; margin-bottom: 4rem; }
.why__intro { display: flex; align-items: flex-end; }
.marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #0000, #000 6% 94%, #0000);
  mask-image: linear-gradient(90deg, #0000, #000 6% 94%, #0000);
}
.marquee-track { display: flex; width: max-content; gap: 1.25rem; padding-inline: 1rem; will-change: transform; animation: 40s linear infinite el-marquee; }
.feature-card {
  flex-shrink: 0; width: calc((100vw - 5rem) / 5);
  background-color: var(--card); border-radius: var(--radius-2xl); box-shadow: var(--shadow-soft);
  padding: 2rem; border: 1px solid var(--border);
}
.feature-card__icon {
  height: 3.5rem; width: 3.5rem; border-radius: var(--radius-xl);
  background-color: color-mix(in oklab, var(--primary) 15%, transparent);
  display: grid; place-items: center; margin-bottom: 1.5rem;
  transition-property: color, background-color, border-color; transition-duration: var(--dur-default); transition-timing-function: var(--ease-default);
}
.feature-card__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; text-transform: uppercase; color: var(--secondary); margin-bottom: .75rem; line-height: 1.25; }
.feature-card__text { font-size: .875rem; color: var(--muted-foreground); line-height: 1.625; }

/* ---------- 09. 02 — Nos prestations ---------- */
.services { position: relative; }
.services__head { max-width: 48rem; margin-bottom: 4rem; }
.services__head .lead { margin-top: 1.5rem; }
.services__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.service-card { background-color: var(--card); border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-soft); border: 1px solid var(--border); }
.service-card__media { position: relative; height: 18rem; overflow: hidden; }
.service-card__media img, .project-card__media img {
  height: 100%; width: 100%; object-fit: cover;
  transition-property: transform, translate, scale, rotate; transition-duration: 1.2s; transition-timing-function: var(--ease-default);
}
.service-card__shade { position: absolute; inset: 0; background-image: linear-gradient(to top in oklab, color-mix(in oklab, var(--secondary) 80%, transparent) 0%, color-mix(in oklab, var(--secondary) 10%, transparent) 50%, transparent 100%); }
.service-card__tag {
  position: absolute; top: 1.25rem; left: 1.25rem; display: inline-flex; align-items: center; gap: .5rem;
  background-color: var(--primary); color: var(--primary-foreground); padding: .375rem .75rem;
  font-size: .75rem; line-height: calc(1 / .75); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wider);
  border-radius: var(--radius-default);
}
.service-card__body { padding: 2rem; }
.service-card__title { font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; font-weight: 700; color: var(--secondary); line-height: 1.25; }
.service-card__text { margin-top: 1rem; color: var(--muted-foreground); line-height: 1.625; }
.service-card__list { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; font-size: .875rem; line-height: calc(1.25 / .875); }
.service-card__list li { display: flex; align-items: center; gap: .5rem; color: var(--foreground); }
.dot { height: .375rem; width: .375rem; background-color: var(--primary); border-radius: 9999px; flex-shrink: 0; }
.service-card__more {
  margin-top: 2rem; display: inline-flex; align-items: center; gap: .5rem;
  font-size: .875rem; line-height: calc(1.25 / .875); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wider);
  color: var(--secondary); cursor: not-allowed; opacity: .6;
}
.service-card__more .ico { transition-property: transform, translate, scale, rotate; transition-duration: var(--dur-default); transition-timing-function: var(--ease-default); }

/* ---------- 10. 03 — Réalisations ---------- */
.projects__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; margin-bottom: 3.5rem; }
.projects__head-main { max-width: 42rem; }
.projects__aside { max-width: 24rem; color: var(--muted-foreground); line-height: 1.625; }
.projects__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
.project-card { cursor: pointer; }
.project-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-2xl); box-shadow: var(--shadow-soft); }
.project-card__shade { position: absolute; inset: 0; opacity: .9; background-image: linear-gradient(to top in oklab, var(--secondary) 0%, color-mix(in oklab, var(--secondary) 30%, transparent) 50%, transparent 100%); }
.project-card__place {
  position: absolute; top: 1.25rem; left: 1.25rem; display: inline-flex; align-items: center; gap: .5rem;
  background-color: color-mix(in oklab, var(--background) 95%, transparent); color: var(--secondary);
  padding: .375rem .75rem; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wider);
  border-radius: 9999px;
}
.project-card__caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; color: var(--secondary-foreground); }
.project-card__kicker { font-size: .75rem; line-height: calc(1 / .75); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--primary); font-weight: 600; }
.project-card__title { font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; font-weight: 700; margin-top: .5rem; line-height: 1.25; }
.project-card__link {
  margin-top: 1rem; display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; line-height: calc(1 / .75); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wider);
  opacity: .9; transition: all var(--dur-default) var(--ease-default);
}

/* ---------- 11. 04 — Assurances (bandeau anthracite) ---------- */
.trust { position: relative; overflow: hidden; padding-block: 5rem; background-color: var(--secondary); color: var(--secondary-foreground); }
.trust__dots { position: absolute; inset: 0; opacity: .04; background-image: radial-gradient(circle at 1px 1px, var(--brand-yellow) 1px, transparent 0); background-size: 32px 32px; }
.trust__inner { position: relative; gap: 2.5rem; align-items: center; }
.trust__title { font-family: var(--font-display); font-size: 2.25rem; text-transform: uppercase; font-weight: 700; line-height: 1; text-wrap: balance; }
.trust__title strong, .trust__title > strong { color: var(--primary); font-weight: inherit; }
.trust__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.trust-card {
  border: 1px solid color-mix(in oklab, var(--secondary-foreground) 15%, transparent); border-radius: var(--radius-xl); padding: 1.5rem;
  transition-property: color, background-color, border-color; transition-duration: var(--dur-default); transition-timing-function: var(--ease-default);
}
.trust-card .ico { margin-bottom: 1rem; }
.trust-card__title { font-family: var(--font-display); font-size: 1.125rem; line-height: calc(1.75 / 1.125); font-weight: 700; text-transform: uppercase; }
.trust-card__text { font-size: .875rem; color: color-mix(in oklab, var(--secondary-foreground) 70%, transparent); margin-top: .5rem; line-height: 1.625; }

/* ---------- 12. 05 — Avis clients ---------- */
.reviews__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2.5rem; margin-bottom: 3.5rem; }
.reviews__grid{position:relative;text-align:center}
.nameReview{font-weight: bold;}
.dateReview{color: gray;}
.review_avgBox{padding:0.5em;box-sizing:border-box;margin-bottom:1em;}
.review_subBoxReview{width: calc(100% - 4em);aspect-ratio:1;display:flex;    flex-direction: column;margin:auto;box-sizing: border-box;padding:1em;margin:2em;border-radius:1rem;
	box-shadow: 0 1px 2px hsl(224 63% 25% /.06);background-color: var(--card);border:1px solid var(--border);justify-content: space-between;}
.areview_listReview{display : grid;grid-template-columns: repeat(4, 1fr); text-align : center; grid-column-gap: 8px;grid-row-gap: 8px;}
.review_txtAvis{display: none;}
.review_avgRate{display:inline-block;}
.review_txtnbReview{display:none;}
.review_avgRate{margin:0 0.5em;}
.commentReview{line-height: 1.33em; margin-top:0.75em; font-size:1rem;max-height: 8em;text-overflow: ellipsis;overflow:hidden;order:1}
.review_displayStar, .review_nbReview{display:inline-flex;}
.review_nbReview:before{content:'(';display:inline-block;}
.review_nbReview:after{content:')';display:inline-block;}
.review_contAVG{display:inline-flex;align-items:center;cursor:pointer;}


.profilePictureReview{max-width:3em;max-height:3em;grid-area: 1 / 1 / 4 / 2;}
.authorReview{display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: repeat(2, 1fr);order:2;    padding-top: 1rem;
	border-top:1px solid var(--border);    margin-top: 1rem;justify-content: space-between;}
.pictureReview{grid-area: 1 / 1 / 4 / 2;    justify-content: center;    display: flex;}
.nameReview{ grid-area: 1 / 2 / 2 / 3;    align-items: center; display: flex; justify-content: center;font-size:1rem}
.rateReview{line-height:0.75rem;}
.review_fullGStar{width:1rem;height:1rem;}
.dateReview{font-size:0.75rem;line-height:0.75rem;}

.review_logoGoogle {width:15%;    margin: auto;display:none;}
.review_logoGoogle .review_fullGStar{width:100%;height:auto;}
.review_listReview {  position: relative;  display: flex;  flex-wrap:nowrap;  agrid-template-columns: repeat(3, 1fr);  aflex-direction: column;   overflow: hidden;  height: 360px;}
.review_boxReview {
  --slides: 3;
  --width: calc( 100% / var(--slides) );
  width: var(--width);  display: flex;  height: 100%;  position: relative;  flex-shrink: 0;  cursor: pointer;}
.GG_carprev{position:absolute;left:2px;top: calc(50% - 1.5rem) ;}
.GG_carnext{position:absolute;right:2px;top: calc(50% - 1.5rem) ;}
.GG_carnext, .GG_carprev{ box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); cursor:pointer;background:white;display: grid;place-items: center;width: 3rem;height: 3rem;border:1px solid var(--border);border-radius:9999px;}
.GG_carnext:before, .GG_carprev:before{font-size:35px;}
.bntAvis{right:2rem;position:absolute;z-index:10;}

.GG_carprev:before, .GG_carnext:before{  content:''; display:inline-block; font-family:none;}
 .GG_carprev:before{transform:rotate(180deg)}
	
.GG_carprev:before, .GG_carnext:before{width:20px;height:20px;background-color:var(--secondary)!important;transition-property: all;    transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-duration: .3s;     animation-duration: .3s;}
.GG_carprev:hover:before, .GG_carnext:hover:before{background-color:var(--primary)!important;}




/* ---------- 13. 06 — À propos ---------- */
.about__inner { gap: 3rem; }
.about__stats { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.stat { border-left: 2px solid var(--primary); padding-left: 1rem; }
.stat__num { font-family: var(--font-display); font-size: 2.25rem; line-height: calc(2.5 / 2.25); font-weight: 700; color: var(--secondary); }
.stat__label { font-size: .75rem; line-height: calc(1 / .75); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--muted-foreground); margin-top: .25rem; }
.about__text { font-size: 15px; line-height: 1.75; color: color-mix(in oklab, var(--foreground) 85%, transparent); }
.about__text > :not(:last-child) { margin-block-end: 1.5rem; }
.about__text .brand { color: var(--secondary); }

/* ---------- 14. 07 — Contact ---------- */
.contact__head { text-align: center; margin-bottom: 4rem; }
.contact__head .section-title { max-width: 48rem; margin-inline: auto; }
.contact__grid { gap: 2rem; }
.zone-card { background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: 2rem; box-shadow: var(--shadow-soft); }
.zone-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.zone-card__title { font-family: var(--font-display); font-size: 1.25rem; line-height: calc(1.75 / 1.25); text-transform: uppercase; font-weight: 700; color: var(--secondary); }
.zone-card__sub { font-size: .875rem; line-height: calc(1.25 / .875); color: var(--muted-foreground); margin-top: .25rem; }
.zone-card__status { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; line-height: calc(1 / .75); font-weight: 700; text-transform: uppercase; color: var(--secondary); }
.zone-card__status .dot { height: .5rem; width: .5rem; }
.map { position: relative; aspect-ratio: 16 / 10; background-color: var(--secondary); border-radius: var(--radius-xl); overflow: hidden; }
.map__grid { position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(var(--brand-yellow) 1px, transparent 1px), linear-gradient(90deg, var(--brand-yellow) 1px, transparent 1px); background-size: 40px 40px; }
.pin { position: absolute; translate: -50% -50%; }
.pin--lille { left: 50%; top: 50%; }
.pin--roncq { left: 30%; top: 22%; }
.pin--halluin { left: 38%; top: 14%; }
.pin--tourcoing { left: 42%; top: 28%; }
.pin--marcq { left: 48%; top: 38%; }
.pin--wambrechies { left: 40%; top: 42%; }
.pin--villeneuve { left: 68%; top: 56%; }
.pin--lambersart { left: 40%; top: 52%; }
.pin--lomme { left: 32%; top: 58%; }
.pin__dot { position: relative; height: .625rem; width: .625rem; border-radius: 9999px; background-color: var(--primary); }
.pin--main .pin__dot { height: 1rem; width: 1rem; }
.pin__ping { position: absolute; inset: 0; border-radius: 9999px; background-color: var(--primary); opacity: .6; }
.pin__label { margin-top: .5rem; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wider); white-space: nowrap; color: color-mix(in oklab, var(--secondary-foreground) 80%, transparent); }
.pin--main .pin__label { color: var(--primary); }

.contact__side { display: flex; flex-direction: column; gap: 1rem; }
.contact-card { display: block; border-radius: var(--radius-2xl); padding: 1.75rem; }
.contact-card__row { display: flex; align-items: flex-start; justify-content: space-between; }
.contact-card__label { font-size: .75rem; line-height: calc(1 / .75); text-transform: uppercase; letter-spacing: var(--tracking-widest); font-weight: 700; }
.contact-card__value { font-family: var(--font-display); font-weight: 700; margin-top: .5rem; font-size: 1.5rem; line-height: calc(2 / 1.5); }
.contact-card__sub { font-size: .875rem; line-height: calc(1.25 / .875); margin-top: .25rem; display: flex; align-items: center; }
.contact-card__icon { height: 3rem; width: 3rem; border-radius: 9999px; display: grid; place-items: center; flex-shrink: 0; }

.contact-card--call { background-color: var(--secondary); color: var(--secondary-foreground); box-shadow: var(--shadow-elegant); transition: all var(--dur-default) var(--ease-default); }
.contact-card--call .contact-card__label { color: var(--primary); }
.contact-card--call .contact-card__value { font-size: 1.875rem; line-height: 1.2; }
.contact-card--call .contact-card__sub { color: color-mix(in oklab, var(--secondary-foreground) 70%, transparent); gap: .5rem; }
.contact-card--call .contact-card__icon { background-color: var(--primary); }

.contact-card--mail { background-color: var(--card); border: 1px solid var(--border); }
.contact-card--mail .contact-card__label { color: var(--primary); }
.contact-card--mail .contact-card__value { color: var(--secondary); word-break: break-all; }
.contact-card--mail .contact-card__sub { color: var(--muted-foreground); }
.contact-card--mail .contact-card__icon { background-color: color-mix(in oklab, var(--primary) 15%, transparent); }

.contact-card--quote { width: 100%; text-align: left; background-color: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-glow); transition: all var(--dur-default) var(--ease-default); }
.contact-card--quote .contact-card__label { opacity: .7; }
.contact-card--quote .contact-card__sub { opacity: .8; gap: .25rem; }
.contact-card--quote .contact-card__icon { background-color: var(--secondary); transition-property: transform, translate, scale, rotate; transition-duration: var(--dur-default); transition-timing-function: var(--ease-default); }

/* ---------- 15. Footer ---------- */
.site-footer { background-color: var(--secondary); color: var(--secondary-foreground); padding-block: 3.5rem; }
.site-footer__inner { gap: 2.5rem; }
.site-footer__logo-box { background-color: var(--background); display: inline-block; padding: .75rem; border-radius: var(--radius-lg); }
.site-footer__logo { height: 2.5rem; width: auto; }
.site-footer__text { margin-top: 1.25rem; font-size: .875rem; line-height: 1.625; color: color-mix(in oklab, var(--secondary-foreground) 70%, transparent); max-width: 24rem; }
.site-footer__text--flat { margin-top: 0; max-width: none; }
.site-footer__title { font-size: .75rem; line-height: calc(1 / .75); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--primary); font-weight: 700; margin-bottom: 1rem; }
.site-footer__list { font-size: .875rem; line-height: calc(1.25 / .875); }
.site-footer__list > :not(:last-child) { margin-block-end: .75rem; }
.site-footer__list li { display: flex; align-items: center; gap: .5rem; }
.site-footer__bottom {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in oklab, var(--secondary-foreground) 10%, transparent);
  font-size: .75rem; line-height: calc(1 / .75); color: color-mix(in oklab, var(--secondary-foreground) 50%, transparent);
  display: flex; justify-content: flex-end;gap:1rem;
}

/* ---------- 16. États hover (Tailwind v4 : sous @media (hover: hover)) ---------- */
@media (hover: hover) {
  .site-header__contact a:hover { color: var(--foreground); }
  .btn--primary:hover, button_valid:hover { translate: 0 -2px; }
  .btn--primary:hover .ico { translate: .25rem 0; }
  .btn--outline:hover { background-color: var(--secondary); color: var(--secondary-foreground); }
  .feature-card:hover .feature-card__icon { background-color: var(--primary); }
  .service-card:hover .service-card__media img { scale: 1.05; }
  .project-card:hover .project-card__media img { scale: 1.1; }
  .project-card:hover .project-card__link { opacity: 1; gap: .75rem; }
  .trust-card:hover { border-color: var(--primary); }
  .contact-card--quote:hover .contact-card__icon { rotate: 12deg; }
}

/* ---------- 17. Réduction des animations (identique à l'original) ---------- */
@media (prefers-reduced-motion: reduce) {
  .deck-card { animation: none; }
}

/* ---------- 18. Navigation entre pages ---------- */
/* Lien de menu vers une autre page (même rendu que les entrées à venir, mais cliquable) */
.site-nav__item {
  font-size: .875rem; line-height: calc(1.25 / .875); font-weight: 500; color: var(--muted-foreground);
  transition: color var(--dur-default) var(--ease-default);
}
@media (hover: hover) { .site-nav__item:hover { color: var(--foreground); } }

/* =====================================================================
   19. PAGE CONTACT
   Mêmes tokens, polices et composants que l'accueil.
   ===================================================================== */
:root { --destructive: oklch(57.7% .245 27.325); }   /* valeur du thème source (--destructive) */

/* --- 19.1 Bandeau d'ouverture --- */
.contact-hero { position: relative; overflow: hidden; background-color: var(--secondary); color: var(--secondary-foreground); padding-block: 4.5rem 5rem; }
.contact-hero__dots { position: absolute; inset: 0; opacity: .04; background-image: radial-gradient(circle at 1px 1px, var(--brand-yellow) 1px, transparent 0); background-size: 32px 32px; }
.contact-hero__glow { pointer-events: none; position: absolute; top: -10rem; right: -6rem; width: 520px; height: 520px; border-radius: 9999px; filter: blur(64px); background-color: color-mix(in oklab, var(--primary) 12%, transparent); }
.contact-hero__inner { position: relative; gap: 2.5rem; align-items: end; }
.breadcrumb { display: flex; align-items: center; gap: .625rem; margin-bottom: 2rem; font-size: .75rem; line-height: calc(1 / .75); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: color-mix(in oklab, var(--secondary-foreground) 60%, transparent); }
.breadcrumb a { transition: color var(--dur-default) var(--ease-default); }
@media (hover: hover) { .breadcrumb a:hover { color: var(--primary); } }
.breadcrumb [aria-current] { color: var(--secondary-foreground); font-weight: 600; }
.contact-hero__title { font-family: var(--font-display); font-size: 4.5rem; line-height: .95; font-weight: 700; text-transform: uppercase; text-wrap: balance; }
.contact-hero__accent { color: var(--primary); }
.contact-hero__text { margin-top: 1.5rem; max-width: 34rem; font-size: 1.125rem; line-height: 1.625; color: color-mix(in oklab, var(--secondary-foreground) 72%, transparent); }
.promise-list { display: flex; flex-direction: column; gap: .875rem; }
.promise {
  display: flex; align-items: center; gap: 1rem; padding: 1.125rem 1.25rem; border-radius: var(--radius-xl);
  border: 1px solid color-mix(in oklab, var(--secondary-foreground) 15%, transparent);
  background-color: color-mix(in oklab, var(--secondary-foreground) 3%, transparent);
  transition: border-color var(--dur-default) var(--ease-default);
}
@media (hover: hover) { .promise:hover { border-color: var(--primary); } }
.promise__icon { flex: 0 0 2.75rem; height: 2.75rem; border-radius: var(--radius-lg); display: grid; place-items: center; background-color: var(--primary); color: var(--secondary); }
.promise__title { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.2; font-weight: 700; text-transform: uppercase; }
.promise__text { font-size: .8125rem; line-height: 1.5; color: color-mix(in oklab, var(--secondary-foreground) 65%, transparent); }

/* --- 19.2 Formulaire + coordonnées --- */
.contact-main { padding-block: 6rem 7rem; }
.contact-main__grid { gap: 2.5rem; align-items: start; }
.col-8 { grid-column: span 8 / span 8; }
.form-card { background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-soft); padding: 2.75rem; }
.form-card__head { margin-bottom: 2.25rem; }
.form-card__title { font-family: var(--font-display); font-size: 2.5rem; line-height: 1; font-weight: 700; text-transform: uppercase; color: var(--secondary); }
.form-card__hint { margin-top: .875rem; font-size: .875rem; line-height: 1.5; color: var(--muted-foreground); }
.form-card__hint strong { color: var(--secondary); }
.contact-form { display: flex; flex-direction: column; gap: 1.75rem; }
.contact-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.25rem; }
.field--full { grid-column: 1 / -1; }

/* Type de travaux : pastilles radio */
.choice { border: 0; }
.choice__legend { margin-bottom: .75rem; }
.chips { display: flex; flex-wrap: wrap; gap: .75rem; }
.chip { position: relative; cursor: pointer; }
.chip__input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.chip__label {
  display: inline-flex; align-items: center; gap: .625rem; padding: .8125rem 1.25rem;
  border: 1px solid var(--border); border-radius: 9999px; background-color: var(--background);
  font-size: .875rem; line-height: calc(1.25 / .875); font-weight: 600; color: var(--secondary);
  transition: background-color var(--dur-default) var(--ease-default), border-color var(--dur-default) var(--ease-default), color var(--dur-default) var(--ease-default);
}
.chip__label::before { content: ""; width: .5rem; height: .5rem; border-radius: 9999px; background-color: var(--border); transition: background-color var(--dur-default) var(--ease-default); }
@media (hover: hover) { .chip:hover .chip__label { border-color: var(--secondary); } }
.chip__input:checked + .chip__label { background-color: var(--secondary); border-color: var(--secondary); color: var(--secondary-foreground); }
.chip__input:checked + .chip__label::before { background-color: var(--primary); }
.chip__input:focus-visible + .chip__label { outline: 2px solid var(--primary); outline-offset: 3px; }

/* Champs */
.field { display: flex; flex-direction: column; gap: .5rem; }
.field__label { font-size: .75rem; line-height: calc(1 / .75); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--secondary); }
.field__opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted-foreground); }
.field__control {
  width: 100%; height: 3.25rem; padding: 0 1rem;
  font: inherit; font-size: .9375rem; color: var(--foreground);
  background-color: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: border-color var(--dur-default) var(--ease-default), box-shadow var(--dur-default) var(--ease-default), background-color var(--dur-default) var(--ease-default);
}
.field__control::placeholder { color: color-mix(in oklab, var(--muted-foreground) 75%, transparent); }
@media (hover: hover) { .field__control:hover { border-color: color-mix(in oklab, var(--secondary) 35%, transparent); } }
.field__control:focus { outline: none; border-color: var(--primary); background-color: var(--card); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 30%, transparent); }
.field__control:user-invalid { border-color: var(--destructive); }
.field__control:user-invalid:focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent); }
.field__error { display: none; font-size: .75rem; line-height: calc(1 / .75); font-weight: 500; color: var(--destructive); }
.field__control:user-invalid ~ .field__error { display: block; }
.field__control--area { height: auto; min-height: 9.5rem; padding: .875rem 1rem; line-height: 1.6; resize: vertical; }
.field__select { position: relative; }
.field__select .field__control { appearance: none; -webkit-appearance: none; padding-right: 2.75rem; cursor: pointer; }
.field__select::after {
  content: ""; position: absolute; right: 1rem; top: 50%; width: 1rem; height: 1rem; margin-top: -.5rem; pointer-events: none;
  background-color: var(--muted-foreground);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Consentement RGPD */
.consent { display: flex; align-items: flex-start; gap: .875rem; font-size: .8125rem; line-height: 1.6; color: var(--muted-foreground); cursor: pointer; }
.consent__box {
  appearance: none; -webkit-appearance: none; flex: 0 0 1.25rem; width: 1.25rem; height: 1.25rem; margin: .125rem 0 0;
  display: grid; place-items: center; cursor: pointer;
  border: 1.5px solid color-mix(in oklab, var(--secondary) 35%, transparent); border-radius: .375rem; background-color: var(--background);
  transition: background-color var(--dur-default) var(--ease-default), border-color var(--dur-default) var(--ease-default);
}
.consent__box::after {
  content: ""; width: .8125rem; height: .8125rem; opacity: 0; background-color: var(--primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.consent__box:checked { background-color: var(--secondary); border-color: var(--secondary); }
.consent__box:checked::after { opacity: 1; }
.consent__box:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.consent__box:user-invalid { border-color: var(--destructive); }
.consent strong { color: var(--secondary); font-weight: 600; }

.contact-form__submit { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: 1.75rem; border-top: 1px solid var(--border); }
.contact-form__submit .btn { cursor: pointer; }
.contact-form__note { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; line-height: 1.4; color: var(--muted-foreground); }

/* Colonne coordonnées (reste visible au défilement) */
.contact-aside { position: sticky; top: 6.5rem; display: flex; flex-direction: column; gap: 1rem; }
.aside-card { border-radius: var(--radius-2xl); padding: 1.75rem; }
.aside-card__label { font-size: .75rem; line-height: calc(1 / .75); text-transform: uppercase; letter-spacing: var(--tracking-widest); font-weight: 700; color: var(--primary); }
.aside-card__title { margin-top: .5rem; font-family: var(--font-display); font-size: 1.75rem; line-height: 1.1; font-weight: 700; text-transform: uppercase; }
.aside-card__big { display: inline-block; margin-top: .75rem; font-family: var(--font-display); font-size: 2.25rem; line-height: 1; font-weight: 700; transition: color var(--dur-default) var(--ease-default); }
.aside-card__mail { display: inline-block; margin-top: .75rem; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2; font-weight: 700; color: var(--secondary); word-break: break-all; transition: color var(--dur-default) var(--ease-default); }
.aside-card__meta { margin-top: .75rem; display: flex; align-items: center; gap: .5rem; font-size: .875rem; line-height: calc(1.25 / .875); }
.aside-card--call { background-color: var(--secondary); color: var(--secondary-foreground); box-shadow: var(--shadow-elegant); }
.aside-card--call .aside-card__meta { color: color-mix(in oklab, var(--secondary-foreground) 70%, transparent); }
.aside-card--call .aside-card__intro { margin-top: .75rem; font-size: .875rem; line-height: 1.6; color: color-mix(in oklab, var(--secondary-foreground) 70%, transparent); }
.aside-card--call .btn { margin-top: 1.5rem; width: 100%; justify-content: center; }
@media (hover: hover) {
  .aside-card--call .aside-card__big:hover { color: var(--primary); }
  .aside-card--mail .aside-card__mail:hover { color: color-mix(in oklab, var(--secondary) 70%, var(--primary)); }
}
.aside-card--mail { background-color: var(--card); border: 1px solid var(--border); }
.aside-card--mail .aside-card__meta { color: var(--muted-foreground); }
.aside-card--zone { background-color: color-mix(in oklab, var(--primary) 14%, var(--card)); border: 1px solid color-mix(in oklab, var(--primary) 45%, transparent); }
.aside-card--zone .aside-card__label { color: var(--secondary); }
.aside-card__zone-text { margin-top: .625rem; font-size: .875rem; line-height: 1.6; color: color-mix(in oklab, var(--foreground) 85%, transparent); }
.aside-card__link { margin-top: 1rem; display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; line-height: calc(1 / .75); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--secondary); transition: gap var(--dur-default) var(--ease-default); }
@media (hover: hover) { .aside-card__link:hover { gap: .75rem; } }

/* --- 19.3 Comment ça se passe ? --- */
.steps-head { max-width: 48rem; margin-bottom: 4rem; }
.steps-head .lead { margin-top: 1.5rem; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; list-style: none; }
.step { position: relative; }
.step:not(:last-child)::after {
  content: ""; position: absolute; top: 1.75rem; left: 4.5rem; right: -.5rem; height: 2px;
  background-image: repeating-linear-gradient(90deg, color-mix(in oklab, var(--secondary) 30%, transparent) 0 6px, transparent 6px 12px);
}
.step__badge {
  position: relative; width: 3.5rem; height: 3.5rem; border-radius: var(--radius-xl); display: grid; place-items: center;
  background-color: var(--primary); color: var(--secondary); box-shadow: var(--shadow-glow);
  font-family: var(--font-display); font-size: 1.5rem; line-height: 1; font-weight: 700;
}
.step__badge-corner { position: absolute; top: -.25rem; right: -.25rem; height: .5rem; width: .5rem; background-color: var(--secondary); }
.step__icon { margin-top: 1.75rem; color: var(--secondary); }
.step__title { margin-top: 1rem; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.15; font-weight: 700; text-transform: uppercase; color: var(--secondary); }
.step__text { margin-top: .625rem; font-size: .9375rem; line-height: 1.625; color: var(--muted-foreground); max-width: 17rem; }
.step__tag { margin-top: 1rem; display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem; border-radius: 9999px; background-color: var(--secondary); color: var(--secondary-foreground); font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wider); }

/* --- 19.4 Zone d'intervention --- */
.zone__inner { gap: 3rem; align-items: center; }
.zone__text { margin-top: 1.5rem; }
.city-list { margin-top: 2.25rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .875rem 1.5rem; }
.city-list li { display: flex; align-items: center; gap: .625rem; font-size: .9375rem; line-height: 1.4; font-weight: 600; color: var(--secondary); }
.zone__note { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--border); font-size: .875rem; line-height: 1.6; color: var(--muted-foreground); }
/* La carte reprend le composant .zone-card de l'accueil (section 14) */

/* --- 19.5 Questions fréquentes --- */
.faq__inner { gap: 3rem; align-items: start; }
.faq__intro { position: sticky; top: 6.5rem; }
.faq__intro .lead { margin-top: 1.5rem; }
.faq__call { margin-top: 2rem; display: inline-flex; align-items: center; gap: .75rem; font-weight: 600; color: var(--secondary); }
.faq__call-icon { width: 2.75rem; height: 2.75rem; border-radius: 9999px; display: grid; place-items: center; background-color: var(--primary); color: var(--secondary); transition: rotate var(--dur-default) var(--ease-default); }
@media (hover: hover) { .faq__call:hover .faq__call-icon { rotate: 12deg; } }
.faq { display: flex; flex-direction: column; gap: 1rem; }
.faq__item { background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); transition: border-color var(--dur-default) var(--ease-default), box-shadow .35s; }
.faq__item.faq__item--open { border-color: color-mix(in oklab, var(--primary) 70%, transparent); box-shadow: var(--shadow-soft); }
.faq__q {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 1.75rem;
  font-family: var(--font-display); font-size: 1.375rem; line-height: 1.2; font-weight: 700; text-transform: uppercase; color: var(--secondary);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: var(--radius-xl); }
.faq__icon { position: relative; flex: 0 0 2rem; height: 2rem; border-radius: 9999px; background-color: color-mix(in oklab, var(--primary) 18%, transparent); transition: rotate .25s var(--ease-default), background-color var(--dur-default) var(--ease-default); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: .75rem; height: 2px; translate: -50% -50%; background-color: var(--secondary); }
.faq__icon::after { rotate: 90deg; }
.faq__item.faq__item--open .faq__icon { rotate: 45deg; background-color: var(--primary); }
.faq__a { padding: 0 1.75rem 1.625rem; max-width: 46rem; font-size: .9375rem; line-height: 1.7; color: var(--muted-foreground); }
.faq__a strong { color: var(--secondary); }

/* --- 19.6 Preuve sociale + relance --- */
.proof { padding-block: 4.5rem; background-color: var(--background); border-top: 1px solid var(--border); }
.proof__inner { display: flex; align-items: center; gap: 3rem; }
.proof__quote { position: relative; flex: 1; padding-left: 3.5rem; }
.proof__quote-icon { position: absolute; left: 0; top: .125rem; color: var(--primary); }
.proof__text { font-size: 1.125rem; line-height: 1.6; color: var(--foreground); }
.proof__cite { margin-top: .625rem; display: block; font-size: .8125rem; font-style: normal; font-weight: 600; color: var(--muted-foreground); }
.proof__cta { flex-shrink: 0; }

/* ========================================
   ICÔNES CMS
   Chaque icône SVG source est rendue par un pseudo-élément masqué (Data URI).
   Couleur = background-color (currentColor par défaut). Tailles reprises des classes
   du svg source (.s-35 → icoS35, .s-4 → icoS4…), couleurs de .c-primary / .c-secondary.
   ======================================== */
.icoArrowRight { --ico-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14'%3E%3C/path%3E%3Cpath d='m12 5 7 7-7 7'%3E%3C/path%3E%3C/svg%3E"); }
.icoArrowUpRight { --ico-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpath d='M7 7h10v10'%3E%3C/path%3E%3Cpath d='M7 17 17 7'%3E%3C/path%3E%3C/svg%3E"); }
.icoBadgeCheck { --ico-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z'%3E%3C/path%3E%3Cpath d='m9 12 2 2 4-4'%3E%3C/path%3E%3C/svg%3E"); }
.icoClock { --ico-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M12 6v6l4 2'%3E%3C/path%3E%3C/svg%3E"); }
.icoFileCheck { --ico-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 22H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.588 3.588A2.4 2.4 0 0 1 20 8v6'%3E%3C/path%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'%3E%3C/path%3E%3Cpath d='m14 20 2 2 4-4'%3E%3C/path%3E%3C/svg%3E"); }
.icoFileText { --ico-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'%3E%3C/path%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'%3E%3C/path%3E%3Cpath d='M10 9H8'%3E%3C/path%3E%3Cpath d='M16 13H8'%3E%3C/path%3E%3Cpath d='M16 17H8'%3E%3C/path%3E%3C/svg%3E"); }
.icoHammer { --ico-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpath d='m15 12-9.373 9.373a1 1 0 0 1-3.001-3L12 9'%3E%3C/path%3E%3Cpath d='m18 15 4-4'%3E%3C/path%3E%3Cpath d='m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172v-.344a2 2 0 0 0-.586-1.414l-1.657-1.657A6 6 0 0 0 12.516 3H9l1.243 1.243A6 6 0 0 1 12 8.485V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5'%3E%3C/path%3E%3C/svg%3E"); }
.icoHardHat { --ico-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M10 10V5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5'%3E%3C/path%3E%3Cpath d='M14 6a6 6 0 0 1 6 6v3'%3E%3C/path%3E%3Cpath d='M4 15v-3a6 6 0 0 1 6-6'%3E%3C/path%3E%3Crect height='4' rx='1' width='20' x='2' y='15'%3E%3C/rect%3E%3C/svg%3E"); }
.icoKeyRound { --ico-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z'%3E%3C/path%3E%3Ccircle cx='16.5' cy='7.5' fill='%23000' r='.5'%3E%3C/circle%3E%3C/svg%3E"); }
.icoMail { --ico-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'%3E%3C/path%3E%3Crect height='16' rx='2' width='20' x='2' y='4'%3E%3C/rect%3E%3C/svg%3E"); }
.icoMailFin { --ico-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'%3E%3C/path%3E%3Crect height='16' rx='2' width='20' x='2' y='4'%3E%3C/rect%3E%3C/svg%3E"); }
.icoMapPin { --ico-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E"); }
.icoQuote { --ico-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'%3E%3C/path%3E%3Cpath d='M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'%3E%3C/path%3E%3C/svg%3E"); }
.icoShieldCheck { --ico-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'%3E%3C/path%3E%3Cpath d='m9 12 2 2 4-4'%3E%3C/path%3E%3C/svg%3E"); }
.icoTel { --ico-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpath d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'%3E%3C/path%3E%3C/svg%3E"); }
.icoTelFin { --ico-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'%3E%3C/path%3E%3C/svg%3E"); }
.icoUserCheck { --ico-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m16 11 2 2 4-4'%3E%3C/path%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='9' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E"); }
.icoWrench { --ico-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z'%3E%3C/path%3E%3C/svg%3E"); }
.icoZap { --ico-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpath d='M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z'%3E%3C/path%3E%3C/svg%3E"); }
.GG_carprev { --ico-mask: url('data:image/svg+xml,\<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>'); }
.GG_carnext { --ico-mask: url('data:image/svg+xml,\<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>'); }
.icoArrowRight:not(.icoAfter)::before, .icoArrowRight.icoAfter::after,
.icoArrowUpRight:not(.icoAfter)::before, .icoArrowUpRight.icoAfter::after,
.icoBadgeCheck:not(.icoAfter)::before, .icoBadgeCheck.icoAfter::after,
.icoClock:not(.icoAfter)::before, .icoClock.icoAfter::after,
.icoFileCheck:not(.icoAfter)::before, .icoFileCheck.icoAfter::after,
.icoFileText:not(.icoAfter)::before, .icoFileText.icoAfter::after,
.icoHammer:not(.icoAfter)::before, .icoHammer.icoAfter::after,
.icoHardHat:not(.icoAfter)::before, .icoHardHat.icoAfter::after,
.icoKeyRound:not(.icoAfter)::before, .icoKeyRound.icoAfter::after,
.icoMail:not(.icoAfter)::before, .icoMail.icoAfter::after,
.icoMailFin:not(.icoAfter)::before, .icoMailFin.icoAfter::after,
.icoMapPin:not(.icoAfter)::before, .icoMapPin.icoAfter::after,
.icoQuote:not(.icoAfter)::before, .icoQuote.icoAfter::after,
.icoShieldCheck:not(.icoAfter)::before, .icoShieldCheck.icoAfter::after,
.icoTel:not(.icoAfter)::before, .icoTel.icoAfter::after,
.icoTelFin:not(.icoAfter)::before, .icoTelFin.icoAfter::after,
.icoUserCheck:not(.icoAfter)::before, .icoUserCheck.icoAfter::after,
.icoWrench:not(.icoAfter)::before, .icoWrench.icoAfter::after,
.icoZap:not(.icoAfter)::before, .icoZap.icoAfter::after,
.GG_carprev:not(.icoAfter)::before, .GG_carprev.icoAfter::after,
.GG_carnext:not(.icoAfter)::before, .GG_carnext.icoAfter::after,
.icoStars5::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: var(--ico-size, 1rem);
  height: var(--ico-size, 1rem);
  background-color: var(--ico-color, currentColor);
  -webkit-mask: var(--ico-mask) center / contain no-repeat;
  mask: var(--ico-mask) center / contain no-repeat;
}
.icoS35 { --ico-size: .875rem; }
.icoS4  { --ico-size: 1rem; }
.icoS5  { --ico-size: 1.25rem; }
.icoS6  { --ico-size: 1.5rem; }
.icoS7  { --ico-size: 1.75rem; }
.icoS8  { --ico-size: 2rem; }
.icoCPrimary   { --ico-color: var(--primary); }
.icoCSecondary { --ico-color: var(--secondary); }

/* Étoiles d'avis : 5 étoiles 16 px espacées de .125rem (source : .stars, svg 16×16) */
.icoStars5 { --ico-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' stroke='%23000' stroke-width='1.5' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'%3E%3C/path%3E%3C/svg%3E"); }
.icoStars5::before {
  width: calc(5 * 16px + 4 * .125rem);
  height: 16px;
  -webkit-mask: var(--ico-mask) left center / 16px 16px space no-repeat;
  mask: var(--ico-mask) left center / 16px 16px space no-repeat;
}

/* Icônes seules des cartes « assurances » (source : .trust-card .ico { margin-bottom: 1rem }) */
.trust-card .icoS7 { margin-bottom: 1rem; }

/* États (source : .btn--primary:hover .ico { translate: .25rem 0 }) */
.btn--primary.icoAfter::after { transition-property: transform, translate, scale, rotate; transition-duration: var(--dur-default); transition-timing-function: var(--ease-default); }
@media (hover: hover) { .btn--primary:hover.icoAfter::after { translate: .25rem 0; } }

/* ========================================
   COMPOSANTS JAVASCRIPT — ACCORDÉONS
   Contenu fermé par défaut ; ouverture pilotée par la classe d'état posée par global.js
   ======================================== */
.faq__a {
  display: none;
}

.faq__item--open .faq__a {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .faq__a {
    overflow: clip;
    interpolate-size: allow-keywords;
    transition: height .3s ease, padding-block .3s ease, display .3s allow-discrete;
  }

  .faq__item:not(.faq__item--open) .faq__a {
    height: 0;
    padding-block: 0;
  }

  @starting-style {
    .faq__item--open .faq__a {
      height: 0;
      padding-block: 0;
    }
  }
}

.faq__q {
  cursor: pointer;
}

/* =====================================================================
   ADAPTATIONS AU HTML GÉNÉRÉ PAR LE CMS
   ===================================================================== */

/* Paragraphes avec lien : si le CMS insère un <div> sans classe dans le <a>, il devient transparent */
a.c_r > div:only-child:not([class]) { display: contents; }

/* Les <li> sans classe de la maquette deviennent des paragraphes du groupe-liste */
.service-card__list > * { display: flex; align-items: center; gap: .5rem; color: var(--foreground); }
.site-footer__list > * { display: flex; align-items: center; gap: .5rem; }
.city-list > * { display: flex; align-items: center; gap: .625rem; font-size: .9375rem; line-height: 1.4; font-weight: 600; color: var(--secondary); }

/* Liens de contact du header (source : .site-header__contact a) */
.site-header__contact a { display: flex; align-items: center; gap: .5rem; }

/* Titres et textes découpés en zones (span stylé -> paragraphe distinct) : rendu en ligne comme dans la source */
.hero__exp > * { display: inline; }

/* Groupes liés (attribut link) : si le CMS insère un <a> sans classe entre le groupe et ses paragraphes,
   il devient transparent pour conserver la mise en page flex/grid du groupe */
.faq__call > a:only-child:not([class]),
.hero__phone > a:only-child:not([class]) { display: contents; }

/* Contact — pastilles des promesses : zone autonome placée dans un groupe technique,
   la base flex source (flex: 0 0 2.75rem) est reportée en largeur explicite */
.promise__icon { width: 2.75rem; }

/* Sous-groupes liés (Cas 5) : le CMS place un <a> sans classe autour du <div> du sous-groupe ;
   ce lien devient un bloc pour conserver la mise en page */
a:has(> .contact-card__row) { display: block; }

/* Périmètre cliquable d'origine : le <a> source englobait toute la carte (padding compris).
   Le lien CMS, posé sur le sous-groupe intérieur, est étendu à la carte entière par un pseudo-élément. */
.contact-card { position: relative; }
.contact-card a:has(> .contact-card__row)::after { content: ""; position: absolute; inset: 0; }


/* Titres : fragment stylé (span source) converti en <strong> dans le même paragraphe */
.contact-hero__title strong,
.contact-hero__title > strong { color: var(--primary); font-weight: inherit; }   /* source : .contact-hero__accent */

/* --- Images : wrapper CMS <div class="div_ ib {classe}"> [<a>] <img> --- */
.div_.site-header__logo { display: block; height: 3rem; width: auto; }
.site-header__logo > a { display: flex; align-items: center; gap: .75rem; height: 100%; }
.site-header__logo > img,
.site-header__logo > a > img { display: block; height: 100%; width: auto; max-width: none; }

.div_.site-footer__logo { display: block; height: 2.5rem; width: auto; }
.site-footer__logo > a { display: block; height: 100%; }
.site-footer__logo > img,
.site-footer__logo > a > img { display: block; height: 100%; width: auto; max-width: none; }

/* Logo Google (source : <svg class="ico s-5"> multicolore -> image WebP) */
.div_.s-5 { display: block; width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.div_.s-5 > img,
.div_.s-5 > a > img { display: block; width: 100%; height: 100%; }

/* Photos plein cadre (source : <img> sans classe, 100 % × 100 % + object-fit: cover) */
.deck-card .div_,
.service-card__media .div_,
.project-card__media .div_ { position: absolute; inset: 0; display: block; width: 100%; height: 100%; z-index: 0; }
.deck-card .div_ > a,
.service-card__media .div_ > a,
.project-card__media .div_ > a { display: block; width: 100%; height: 100%; }
.deck-card .div_ > img,
.deck-card .div_ > a > img { display: block; height: 100%; width: 100%; object-fit: cover; }
.service-card__media .div_ > img,
.service-card__media .div_ > a > img,
.project-card__media .div_ > img,
.project-card__media .div_ > a > img {
  display: block; height: 100%; width: 100%; object-fit: cover;
  transition-property: transform, translate, scale, rotate; transition-duration: 1.2s; transition-timing-function: var(--ease-default);
}
.service-card__shade, .service-card__tag,
.project-card__shade, .project-card__place, .project-card__caption { z-index: 1; }
@media (hover: hover) {
  .service-card:hover .service-card__media .div_ > img,
  .service-card:hover .service-card__media .div_ > a > img { scale: 1.05; }
  .project-card:hover .project-card__media .div_ > img,
  .project-card:hover .project-card__media .div_ > a > img { scale: 1.1; }
}

/* --- Formulaire de contact : rendu CMS
   <form class="contact-form gg_form"><table class="table_form_…"><tbody>
     <tr class="line_form_odd|line_form_peer"><td class="cell_1_form">libellé</td><td class="cell_2_form">champ</td></tr>…
   </tbody></table><button class="button_valid text_in_button input_submit">…</button></form>
   Ordre des lignes = ordre du fichier form : 1 type de travaux, 2 nom, 3 ville, 4 email, 5 téléphone,
   6 budget, 7 source, 8 projet, 9 RGPD, 10 mention. --- */
.contact-form table { width: 100%; border-collapse: separate; border-spacing: 0; }
.contact-form tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.25rem; }
.contact-form .line_form_odd,
.contact-form .line_form_peer { display: flex; flex-direction: column; gap: .5rem; }
.contact-form .line_form_odd:nth-child(1), .contact-form .line_form_peer:nth-child(1),
.contact-form .line_form_odd:nth-child(n+8), .contact-form .line_form_peer:nth-child(n+8) { grid-column: 1 / -1; }
.contact-form .cell_1_form,
.contact-form .cell_2_form { display: block; padding: 0; }
.contact-form .cell_1_form,
.contact-form .cell_1_form label { font-size: .75rem; line-height: calc(1 / .75); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--secondary); }
.contact-form input[type="text"],.formLogin  input[type="text"],.formLogin  input[type="password"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  width: 100%; height: 3.25rem; padding: 0 1rem;
  font: inherit; font-size: .9375rem; color: var(--foreground);
  background-color: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: border-color var(--dur-default) var(--ease-default), box-shadow var(--dur-default) var(--ease-default), background-color var(--dur-default) var(--ease-default);
}
.contact-form textarea { height: auto; min-height: 9.5rem; padding: .875rem 1rem; line-height: 1.6; resize: vertical; }
.contact-form select {
  appearance: none; -webkit-appearance: none; padding-right: 2.75rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6169' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: color-mix(in oklab, var(--muted-foreground) 75%, transparent); }
@media (hover: hover) {
  .contact-form input[type="text"]:hover, .contact-form input[type="email"]:hover, .contact-form input[type="tel"]:hover,
  .contact-form select:hover, .contact-form textarea:hover { border-color: color-mix(in oklab, var(--secondary) 35%, transparent); }
}
.contact-form input[type="text"]:focus, .contact-form input[type="email"]:focus, .contact-form input[type="tel"]:focus,
.contact-form select:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--primary); background-color: var(--card); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 30%, transparent);
}
.contact-form input:user-invalid,
.contact-form select:user-invalid,
.contact-form textarea:user-invalid { border-color: var(--destructive); }
.contact-form input[type="radio"],
.contact-form input[type="checkbox"] { width: 1.125rem; height: 1.125rem; accent-color: var(--secondary); cursor: pointer; }
.contact-form input[type="checkbox"]:user-invalid { outline: 2px solid var(--destructive); outline-offset: 1px; }
.contact-form .cell_2_form label { font-size: .875rem; font-weight: 600; color: var(--secondary); cursor: pointer; }
/* Ligne RGPD (lineClass « consent ») */
.contact-form .consent { font-size: .8125rem; line-height: 1.6; color: var(--muted-foreground); }
.contact-form .consent .cell_1_form,
.contact-form .consent label { font-size: .8125rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted-foreground); }
/* Bouton d'envoi (source : .btn .btn--primary) */
.contact-form .button_valid {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .5rem; padding: 1rem 1.75rem; border: 0; cursor: pointer;
  font: inherit; font-weight: 600; font-size: .875rem; line-height: calc(1.25 / .875); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  background-color: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-glow);
  transition: all var(--dur-default) var(--ease-default);
}
@media (hover: hover) { .contact-form .button_valid:hover { translate: 0 -2px; } }
.contact-form .button_valid:focus-visible { outline: 2px solid var(--secondary); outline-offset: 3px; }



.connected .site-nav{display:flex;gap:2.5rem;}
.connected .faq__a{display:block!important;height:auto!important;}
.connected .service-card__shade,.connected  .service-card__tag,.connected  .project-card__place, .connected .project-card__caption {z-index:360!important}