/* ==========================================================================
   components.css — feuille de style du site Girard TP
   --------------------------------------------------------------------------
   Toute la mise en forme du site est ici. Les pages HTML ne contiennent plus
   aucune classe utilitaire Tailwind, aucune balise <style> ni aucun attribut
   style="" : uniquement des classes sémantiques définies dans ce fichier.

   Ce que fournit encore css/output.css, chargé AVANT celui-ci :
     - la réinitialisation (preflight) de Tailwind ;
     - rien d'autre dont ce fichier dépende : les jetons de conception et les
       enregistrements @property nécessaires sont redéclarés ci-dessous, si
       bien qu'une recompilation de Tailwind ne peut plus casser ces styles.

   Conventions :
     - point de rupture md -> @media (width >= 48rem)
     - point de rupture lg -> @media (width >= 64rem)
     - les :hover sont encapsulés dans @media (hover: hover), pour éviter les
       survols « collés » sur écrans tactiles ;
     - les classes d'état pilotées par js/script.js sont `is-open` et
       `is-hidden`.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Enregistrements @property repris de Tailwind. Indispensables : sans eux,
   les déclarations `translate`, `scale`, `box-shadow` et `filter`
   ci-dessous référenceraient des variables non initialisées et seraient
   ignorées par le navigateur.
   -------------------------------------------------------------------------- */
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
    }
  }
}

/* --------------------------------------------------------------------------
   Police Inter, hébergée sur le serveur du site.
   Aucun appel à fonts.googleapis.com : l'adresse IP des visiteurs n'est
   transmise à aucun tiers, et la page n'ouvre pas de connexion externe
   supplémentaire.
   Inter est une police variable : un seul fichier couvre toutes les graisses
   de 100 à 900 (le site en utilise quatre : 400, 600, 700 et 800).
   `unicode-range` fait que le sous-ensemble latin-ext n'est téléchargé que si
   la page contient réellement un caractère de cette plage — pour du texte
   français, seul le fichier « latin » (48 Ko) part sur le réseau.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   Jetons de conception. Repris des valeurs Tailwind pour que ce fichier soit
   autonome. La palette de marque se modifie directement ici.
   -------------------------------------------------------------------------- */
:root {
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --blur-3xl: 64px;
  --blur-sm: 8px;
  --color-black: #000;
  --color-blue-500: oklch(62.3% 0.214 259.815);
  --color-brand-navy: #3b1e1e;
  --color-brand-primary: #a10303;
  --color-brand-primary-dark: #000000;
  --color-gray-100: oklch(96.7% 0.003 264.542);
  --color-gray-200: oklch(92.8% 0.006 264.531);
  --color-gray-300: oklch(87.2% 0.01 258.338);
  --color-gray-400: oklch(70.7% 0.022 261.325);
  --color-gray-50: oklch(98.5% 0.002 247.839);
  --color-gray-500: oklch(55.1% 0.027 264.364);
  --color-gray-600: oklch(44.6% 0.03 256.802);
  --color-gray-700: oklch(37.3% 0.034 259.733);
  --color-gray-800: oklch(27.8% 0.033 256.848);
  --color-red-50: oklch(97.1% 0.013 17.38);
  --color-white: #fff;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-5xl: 64rem;
  --container-6xl: 72rem;
  --container-7xl: 80rem;
  --default-transition-duration: 150ms;
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
  --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
  /* Repli choisi pour ses métriques proches d'Inter, afin de limiter le
     décalage du texte au moment où la police se substitue (font-display: swap). */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --leading-relaxed: 1.625;
  --leading-tight: 1.25;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --spacing: 0.25rem;
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: calc(2.25 / 1.875);
  --text-4xl: 2.25rem;
  --text-4xl--line-height: calc(2.5 / 2.25);
  --text-5xl: 3rem;
  --text-5xl--line-height: 1;
  --text-6xl: 3.75rem;
  --text-6xl--line-height: 1;
  --text-9xl: 8rem;
  --text-9xl--line-height: 1;
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-sm: 0.875rem;
  --text-sm--line-height: calc(1.25 / 0.875);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-xs: 0.75rem;
  --text-xs--line-height: calc(1 / 0.75);
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* Liste exacte des propriétés animées par l'utilitaire Tailwind `transition`. */
  --gtp-transition-props:
    color, background-color, border-color, outline-color, text-decoration-color,
    fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to,
    opacity, box-shadow, transform, translate, scale, rotate, filter,
    -webkit-backdrop-filter, backdrop-filter, display, content-visibility,
    overlay, pointer-events;

  /* Ombres Tailwind. */
  --gtp-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --gtp-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --gtp-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --gtp-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* ==========================================================================
   0. BASE
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-gray-50);
  font-family: var(--font-sans);
  color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body ::selection,
body::selection {
  background-color: var(--color-brand-primary);
  color: var(--color-white);
}

/* Masque le texte alternatif tant que l'image n'est pas chargée. */
img {
  text-indent: -10000px;
}

/* Vignette de repli si une image est introuvable (attribut onerror). */
img.error {
  position: relative;
}

img.error::after {
  content: "\f03e";
  font-family: 'Font Awesome 7 Free';
  font-weight: 900;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e2e8f0;
  color: #94a3b8;
  font-size: 2rem;
}

/* ==========================================================================
   0 bis. MENUS DÉROULANTS ET REPLIABLES
   ========================================================================== */

/* `.dropdown` ne doit surtout PAS être positionné (pas de `position: relative`).
   Le panneau `.mega-menu` est en `position: absolute; left: 0; top: 100%` : son
   référent est donc le premier ancêtre positionné, c'est-à-dire `.nav-desktop`.
   C'est ce qui fait que les quatre méga-menus s'ouvrent tous au même endroit,
   aligné sur le bord gauche de la navigation. Positionner `.dropdown` ferait
   glisser chaque panneau sous son propre onglet. */

.dropdown .dropdown-menu {
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dropdown:hover .dropdown-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* Menu mobile : dépliage animé via grid-template-rows, pilotage par le JS. */
.mobile-menu {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  background-color: var(--color-white);
  border-top: 1px solid var(--color-gray-100);
  transition: grid-template-rows 0.4s ease-out, opacity 0.4s ease-out;
}

.mobile-menu.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.mobile-menu.is-hidden {
  display: none;
}

@media (width >= 64rem) {
  .mobile-menu {
    display: none;
  }
}

.mobile-submenu {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  background-color: var(--color-gray-50);
  transition: grid-template-rows 0.4s ease-out, opacity 0.4s ease-out;
}

.mobile-submenu.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.mobile-submenu-btn.is-open .submenu-chevron {
  rotate: 180deg;
}

/* Conteneur interne des blocs dépliables : empile et rogne le contenu. */
.menu-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* L'ancienne animation @keyframes du carrousel a été retirée : le défilement
   passe maintenant par `scrollLeft` (voir .marquee-track et js/script.js), ce
   qui permet de le piloter à la main autant qu'automatiquement. */


/* ==========================================================================
   1. NAVIGATION — barre supérieure et méga-menus
   ========================================================================== */

/* Lien de ville dans un méga-menu ou dans le menu mobile.
   Remplace : block px-6 py-2 whitespace-nowrap text-gray-600
              hover:bg-red-50 hover:text-brand-primary transition */
.nav-link {
  display: block;
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 2);
  white-space: nowrap;
  color: var(--color-gray-600);
  transition-property: var(--gtp-transition-props);
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--default-transition-duration);
}

@media (hover: hover) {
  .nav-link:hover {
    background-color: var(--color-red-50);
    color: var(--color-brand-primary);
  }
}

/* Entrée de premier niveau de la navigation desktop.
   Remplace : px-4 py-6 font-semibold text-white
              hover:text-brand-primary transition */
.nav-top-link {
  display: flex;
  align-items: center;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 6);
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
  transition-property: var(--gtp-transition-props);
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--default-transition-duration);
}

@media (hover: hover) {
  .nav-top-link:hover {
    color: var(--color-brand-primary);
  }
}

/* Panneau déroulant d'un méga-menu. À combiner avec la classe `dropdown-menu`
   (définie dans input.css) qui gère l'apparition au survol.
   Remplace : absolute left-0 top-full bg-white shadow-xl rounded-b-lg
              min-w-max p-5 z-50 border-t-2 border-brand-primary */
.mega-menu {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 50;
  min-width: max-content;
  padding: calc(var(--spacing) * 5);
  background-color: var(--color-white);
  border-top: 2px solid var(--color-brand-primary);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
  box-shadow: var(--gtp-shadow-xl);
}

/* Ligne interne d'un méga-menu : visuel à gauche, colonnes de liens à droite.
   Remplace : flex w-max h-auto gap-4 */
.mega-menu-row {
  display: flex;
  width: max-content;
  height: auto;
  gap: calc(var(--spacing) * 4);
}

/* Grille des colonnes de villes. Remplace : grid grid-cols-3 gap-2 w-full */
.mega-menu-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--spacing) * 2);
  width: 100%;
}

/* Visuel d'illustration d'un méga-menu.
   Remplace : w-full h-auto object-cover max-w-[200px] */
.mega-menu-img {
  width: 100%;
  height: auto;
  max-width: 200px;
  object-fit: cover;
}


/* ==========================================================================
   2. MENU MOBILE
   ========================================================================== */

/* Conteneur interne des blocs animés (menu mobile et sous-menus) : il empile
   toujours ses éléments en colonne. Complète la règle `.menu-panel`
   d'input.css, qui gère le débordement.
   Remplace : flex flex-col (répété sur chaque .menu-panel) */
.menu-panel {
  display: flex;
  flex-direction: column;
}

/* En-tête cliquable d'un accordéon du menu mobile.
   Remplace : flex justify-between items-center w-full px-4 py-3
              text-gray-700 font-semibold border-b border-gray-50
              focus:outline-none */
.mobile-submenu-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  color: var(--color-gray-700);
  font-weight: var(--font-weight-semibold);
  border-bottom: 1px solid var(--color-gray-50);
}

.mobile-submenu-btn:focus {
  outline-style: none;
}

/* Chevron d'un accordéon mobile. Le script ajoute/retire `rotate-180` dessus,
   cette classe ne doit donc jamais définir `rotate`.
   Remplace : text-xs transition-transform duration-300 */
.submenu-chevron {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: 300ms;
}


/* ==========================================================================
   3. BOUTONS
   ========================================================================== */

/* Bouton d'appel à l'action principal (« Devis gratuit »).
   Remplace : bg-brand-primary text-white px-6 py-3 rounded-full font-bold
              shadow-lg transition transform hover:-translate-y-0.5 */
.btn-primary {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 3);
  background-color: var(--color-brand-primary);
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  border-radius: calc(infinity * 1px);
  box-shadow: var(--gtp-shadow-lg);
  transition-property: var(--gtp-transition-props);
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--default-transition-duration);
}

@media (hover: hover) {
  .btn-primary:hover {
    background-color: var(--color-brand-primary-dark);
    translate: 0 calc(var(--spacing) * -0.5);
  }
}

/* Bouton rond à icône (téléphone, réalisations). La taille reste portée par des
   utilitaires Tailwind dans le HTML (w-10 h-10 sur mobile, w-11 h-11 en desktop).
   Remplace : text-white bg-brand-primary hover:bg-brand-primary-dark
              flex items-center justify-center rounded-full shadow-md transition */
.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-brand-primary);
  color: var(--color-white);
  border-radius: calc(infinity * 1px);
  box-shadow: var(--gtp-shadow-md);
  transition-property: var(--gtp-transition-props);
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--default-transition-duration);
}

@media (hover: hover) {
  .btn-icon:hover {
    background-color: var(--color-brand-primary-dark);
  }
}


/* ==========================================================================
   4. BLOCS DE CONTENU
   ========================================================================== */

/* Carte blanche arrondie servant de conteneur de section. L'ombre reste portée
   par un utilitaire Tailwind dans le HTML (shadow-lg ou shadow-xl selon la
   section), afin de garder les deux variantes existantes.
   Remplace : bg-white p-8 md:p-12 rounded-3xl border border-gray-100 */
.content-card {
  padding: calc(var(--spacing) * 8);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-3xl);
}

@media (width >= 48rem) {
  .content-card {
    padding: calc(var(--spacing) * 12);
  }
}

/* Étiquette noire de survol de section (« Nos services », « Section »…).
   Remplace : text-white bg-black px-2 rounded-lg font-bold */
.section-badge {
  padding-inline: calc(var(--spacing) * 2);
  background-color: var(--color-black);
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-lg);
}


/* ==========================================================================
   5. CARTES SERVICES
   ========================================================================== */

/* Carte d'un service (couverture, charpente, zinguerie, travaux acrobatiques).
   Remplace : rounded-xl bg-white hover:shadow-xl shadow-lg
              transition-shadow duration-300 overflow-hidden */
.card-service {
  overflow: hidden;
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--gtp-shadow-lg);
  transition-property: box-shadow;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: 300ms;
}

/* Visuel d'une carte service, zoomé au survol de la carte.
   Remplace : w-full h-auto rounded-t-lg transform transition-transform
              duration-500 group-hover:scale-110 */
.card-service-img {
  width: 100%;
  height: auto;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: 500ms;
}

@media (hover: hover) {
  .card-service:hover {
    box-shadow: var(--gtp-shadow-xl);
  }

  .card-service:hover .card-service-img {
    scale: 110% 110%;
  }
}


/* ==========================================================================
   6. CARROUSEL DE RÉALISATIONS
   ========================================================================== */

/* Vignette du carrousel défilant. Le survol pilote directement l'image, le voile
   et le libellé : la classe utilitaire `group/img` n'est donc plus nécessaire.
   Remplace : w-[280px] md:w-[380px] h-[200px] md:h-[260px] flex-shrink-0
              rounded-2xl overflow-hidden shadow-lg cursor-pointer
              group/img relative */
.marquee-card {
  position: relative;
  flex-shrink: 0;
  width: 280px;
  height: 200px;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  box-shadow: var(--gtp-shadow-lg);
  cursor: pointer;
}

@media (width >= 48rem) {
  .marquee-card {
    width: 380px;
    height: 260px;
  }
}

/* Image de la vignette.
   Remplace : w-full h-full object-cover transform
              group-hover/img:scale-110 transition duration-500 */
.marquee-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition-property: var(--gtp-transition-props);
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: 500ms;
}

/* Voile coloré révélé au survol de la vignette.
   Remplace : absolute inset-0 bg-brand-navy/50 opacity-0
              group-hover/img:opacity-100 transition duration-300
              flex items-center justify-center */
.marquee-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0%;
  pointer-events: none;
  background-color: color-mix(in srgb, #3b1e1e 50%, transparent);
  transition-property: var(--gtp-transition-props);
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: 300ms;
}

@supports (color: color-mix(in lab, red, red)) {
  .marquee-overlay {
    background-color: color-mix(in oklab, var(--color-brand-navy) 50%, transparent);
  }
}

/* Libellé « Voir la réalisation », qui remonte au survol.
   Remplace : bg-black/60 px-5 py-2.5 rounded-lg text-white font-bold
              text-lg md:text-xl translate-y-4 group-hover/img:translate-y-0
              transition duration-300 shadow-lg */
.marquee-label {
  padding-inline: calc(var(--spacing) * 5);
  padding-block: calc(var(--spacing) * 2.5);
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
  border-radius: var(--radius-lg);
  background-color: color-mix(in srgb, #000 60%, transparent);
  box-shadow: var(--gtp-shadow-lg);
  translate: 0 calc(var(--spacing) * 4);
  transition-property: var(--gtp-transition-props);
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: 300ms;
  text-align: center;
}

@supports (color: color-mix(in lab, red, red)) {
  .marquee-label {
    background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
  }
}

@media (width >= 48rem) {
  .marquee-label {
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
  }
}

/* Révélation du libellé.
   Trois déclencheurs pour trois publics :
     - :hover        souris, uniquement sur les appareils qui savent survoler ;
     - .is-revealed  posée par js/script.js au tap, sur les écrans tactiles ;
     - :focus-within  navigation au clavier, quand le libellé est un lien.
   `pointer-events` suit l'opacité : sans cela, un libellé transparent resterait
   cliquable, et un lien invisible piégerait le pointeur au survol des cartes. */
@media (hover: hover) {
  .marquee-card:hover .marquee-img {
    scale: 110% 110%;
  }

  .marquee-card:hover .marquee-overlay {
    opacity: 100%;
    pointer-events: auto;
  }

  .marquee-card:hover .marquee-label {
    translate: 0 0;
  }
}

.marquee-card.is-revealed .marquee-img,
.marquee-card:focus-within .marquee-img {
  scale: 110% 110%;
}

.marquee-card.is-revealed .marquee-overlay,
.marquee-card:focus-within .marquee-overlay {
  opacity: 100%;
  pointer-events: auto;
}

.marquee-card.is-revealed .marquee-label,
.marquee-card:focus-within .marquee-label {
  translate: 0 0;
}


/* ==========================================================================
   7. FAQ
   --------------------------------------------------------------------------
   js/script.js se contente de basculer `is-open` sur le `.faq-item` ;
   fond, ombre, dépliage et rotation du chevron en découlent ici.
   ========================================================================== */

.faq-item {
  overflow: hidden;
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-2xl);
  background-color: var(--color-gray-50);
  box-shadow: var(--gtp-shadow-sm);
  cursor: pointer;
  transition-property: all;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--default-transition-duration);
}

.faq-item.is-open {
  background-color: var(--color-white);
  box-shadow: var(--gtp-shadow-md);
}

.faq-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: calc(var(--spacing) * 6);
  text-align: left;
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-navy);
}

.faq-btn:focus {
  outline-style: none;
}

.faq-icon {
  flex-shrink: 0;
  margin-left: calc(var(--spacing) * 4);
  color: var(--color-brand-primary);
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: 300ms;
}

.faq-item.is-open .faq-icon {
  rotate: 180deg;
}

.faq-content {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition-property: grid-template-rows, opacity;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: 300ms;
}

.faq-item.is-open .faq-content {
  grid-template-rows: 1fr;
  opacity: 1;
}

.faq-answer {
  padding-inline: calc(var(--spacing) * 6);
  padding-bottom: calc(var(--spacing) * 6);
  color: var(--color-gray-600);
  line-height: var(--leading-relaxed);
  cursor: text;
}


/* ==========================================================================
   8. FORMULAIRE DE CONTACT
   ========================================================================== */

/* Remplace : block text-sm font-semibold text-brand-navy mb-2 */
/* Piège à robots. Volontairement pas `display: none` : certains automates
   ignorent les champs ainsi masqués. On le sort de l'écran tout en le laissant
   dans le flux, et `aria-hidden` + `tabindex="-1"` l'écartent des lecteurs
   d'écran comme du parcours clavier. */
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Consentement RGPD. */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 3);
}

.form-consent-box {
  margin-top: calc(var(--spacing) * 1);
  width: calc(var(--spacing) * 5);
  height: calc(var(--spacing) * 5);
  flex-shrink: 0;
  accent-color: var(--color-brand-primary);
}

.form-consent-label {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-600);
}

.form-consent-label a {
  color: var(--color-brand-primary);
}

/* Message de réponse. Masqué tant que le serveur n'a rien dit. */
.form-feedback {
  display: none;
  border-radius: var(--radius-xl);
  padding: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  text-align: center;
}

.form-feedback.is-ok,
.form-feedback.is-error {
  display: block;
}

.form-feedback.is-ok {
  background-color: color-mix(in srgb, #16a34a 10%, transparent);
  color: #15803d;
}

.form-feedback.is-error {
  background-color: color-mix(in srgb, #a10303 10%, transparent);
  color: var(--color-brand-primary);
}

.form-label {
  display: block;
  margin-bottom: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-navy);
}

/* Champ de saisie (input, select, textarea). Les particularités de chaque type
   restent dans le HTML : `appearance-none` pour le select, `resize-none` pour
   le textarea.
   Remplace : w-full bg-gray-50 text-gray-800 border border-gray-200 rounded-xl
              px-5 py-4 focus:outline-none focus:border-brand-primary
              focus:ring-2 focus:ring-brand-primary/20 transition
              placeholder-gray-400 */
.form-field {
  width: 100%;
  padding-inline: calc(var(--spacing) * 5);
  padding-block: calc(var(--spacing) * 4);
  background-color: var(--color-gray-50);
  color: var(--color-gray-800);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  transition-property: var(--gtp-transition-props);
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--default-transition-duration);
}

.form-field::placeholder {
  color: var(--color-gray-400);
}

.form-field:focus {
  outline-style: none;
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, #a10303 20%, transparent);
}

@supports (color: color-mix(in lab, red, red)) {
  .form-field:focus {
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-brand-primary) 20%, transparent);
  }
}


/* ==========================================================================
   9. PIED DE PAGE
   ========================================================================== */

/* Lien de la colonne « Nos Services ».
   Remplace : hover:text-brand-primary transition flex items-center */
.footer-link {
  display: flex;
  align-items: center;
  transition-property: var(--gtp-transition-props);
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--default-transition-duration);
}

@media (hover: hover) {
  .footer-link:hover {
    color: var(--color-brand-primary);
  }
}

/* Chevron précédant un lien de service. Remplace : text-xs mr-2 */
.footer-link-icon {
  margin-right: calc(var(--spacing) * 2);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
}

/* Ligne de la colonne « Coordonnées » (icône à droite en desktop).
   Remplace : flex md:flex-row-reverse md:justify-start items-center
              text-left md:text-right */
.footer-contact-item {
  display: flex;
  align-items: center;
  text-align: left;
}

@media (width >= 48rem) {
  .footer-contact-item {
    flex-direction: row-reverse;
    justify-content: flex-start;
    text-align: right;
  }
}

/* Icône d'une ligne de coordonnées.
   Remplace : text-brand-primary md:ml-3 mr-3 md:mr-0 */
.footer-contact-icon {
  margin-right: calc(var(--spacing) * 3);
  color: var(--color-brand-primary);
}

@media (width >= 48rem) {
  .footer-contact-icon {
    margin-left: calc(var(--spacing) * 3);
    margin-right: 0;
  }
}


/* ==========================================================================
   10. LOGOS
   ========================================================================== */

/* Remplace : h-11 md:h-12 lg:h-14 lg:px-4 object-contain px-2 py-1
              bg-white rounded-lg */
.logo-header {
  height: calc(var(--spacing) * 11);
  padding-inline: calc(var(--spacing) * 2);
  padding-block: var(--spacing);
  object-fit: contain;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
}

@media (width >= 48rem) {
  .logo-header {
    height: calc(var(--spacing) * 12);
  }
}

@media (width >= 64rem) {
  .logo-header {
    height: calc(var(--spacing) * 14);
    padding-inline: calc(var(--spacing) * 4);
  }
}

/* Remplace : h-24 md:h-28 object-contain bg-white rounded-2xl p-4
              shadow-xl transform hover:scale-105 transition */
.logo-footer {
  height: calc(var(--spacing) * 24);
  padding: calc(var(--spacing) * 4);
  object-fit: contain;
  background-color: var(--color-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--gtp-shadow-xl);
  transition-property: var(--gtp-transition-props);
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--default-transition-duration);
}

@media (width >= 48rem) {
  .logo-footer {
    height: calc(var(--spacing) * 28);
  }
}

@media (hover: hover) {
  .logo-footer:hover {
    scale: 105% 105%;
  }
}


/* ==========================================================================
   11. DIVERS — remplace les anciens attributs style="" du HTML
   ========================================================================== */

/* Volet « avant » du comparateur avant/après : position initiale du volet.
   js/script.js pilote ensuite `clip-path` en style inline au déplacement du
   curseur, ce qui prend naturellement le dessus sur cette règle.
   Remplace : style="clip-path: inset(0 50% 0 0)" */
.ba-slider-before {
  clip-path: inset(0 50% 0 0);
}

/* Carte Google Maps intégrée. Elle remplit la boîte de ratio de son conteneur
   (`relative aspect-[16/9] md:aspect-[16/6] lg:aspect-[16/4]`) : le
   positionnement absolu garantit la résolution de la hauteur dans tous les
   navigateurs, là où `height: 100%` dépend d'un parent de hauteur définie.
   Remplace : style="width: 100%" */
.map-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}


/* ==========================================================================
   STRUCTURE ET CONTENEURS
   ========================================================================== */

.wrap {
  width: 100%;
  @media (width >= 40rem) {
  }
  @media (width >= 48rem) {
  }
  @media (width >= 64rem) {
  }
  @media (width >= 80rem) {
  }
  @media (width >= 96rem) {
  max-width: 96rem;
  }
  margin-inline: auto;
  padding-inline: calc(var(--spacing) * 4);
}

.wrap-3xl {
  max-width: var(--container-3xl);
}

.wrap-4xl {
  max-width: var(--container-4xl);
}

.wrap-5xl {
  max-width: var(--container-5xl);
}

.wrap-6xl {
  max-width: var(--container-6xl);
}

.wrap-7xl {
  max-width: var(--container-7xl);
}

.wrap-above {
  position: relative;
  z-index: 10;
}

.clip {
  overflow: hidden;
}

.main {
  position: relative;
  z-index: 0;
}

.section {
  padding-block: calc(var(--spacing) * 16);
}
@media (width >= 48rem) {
  .section {
    padding-block: calc(var(--spacing) * 24);
  }
}

.section-gray {
  background-color: var(--color-gray-50);
  padding-block: calc(var(--spacing) * 16);
}
@media (width >= 48rem) {
  .section-gray {
    padding-block: calc(var(--spacing) * 24);
  }
}

.section-white {
  background-color: var(--color-white);
  padding-block: calc(var(--spacing) * 16);
}
@media (width >= 48rem) {
  .section-white {
    padding-block: calc(var(--spacing) * 24);
  }
}

.section-head {
  margin-bottom: calc(var(--spacing) * 12);
  text-align: center;
}

.section-head-sm {
  margin-bottom: calc(var(--spacing) * 10);
  text-align: center;
}

.section-head-xs {
  margin-bottom: calc(var(--spacing) * 5);
  text-align: center;
}

.section-title {
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  --tw-font-weight: var(--font-weight-extrabold);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-brand-primary);
}
@media (width >= 48rem) {
  .section-title {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
}

.rule {
  margin-inline: auto;
  height: var(--spacing);
  width: calc(var(--spacing) * 24);
  border-radius: calc(infinity * 1px);
  background-color: var(--color-brand-primary);
}

.rule-spaced {
  margin-inline: auto;
  margin-bottom: calc(var(--spacing) * 4);
  height: var(--spacing);
  width: calc(var(--spacing) * 24);
  border-radius: calc(infinity * 1px);
  background-color: var(--color-brand-primary);
}


/* ==========================================================================
   EN-TÊTE ET NAVIGATION
   ========================================================================== */

.site-header {
  position: absolute;
  top: 0px;
  z-index: 50;
  width: 100%;
  background-color: transparent;
  color: var(--color-gray-700);
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: calc(var(--spacing) * 4);
}
@media (width >= 64rem) {
  .header-bar {
    padding-block: 0px;
  }
}

.header-logo {
  display: flex;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
}
@media (width >= 64rem) {
  .header-actions {
    display: none;
  }
}

.menu-toggle {
  margin-left: calc(var(--spacing) * 2);
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  color: var(--color-white);
}
.menu-toggle:focus {
  --tw-outline-style: none;
  outline-style: none;
}

.nav-desktop {
  position: relative;
  display: none;
  align-items: center;
}
:where(.nav-desktop > :not(:last-child)) {
  --tw-space-x-reverse: 0;
  margin-inline-start: calc(var(--spacing) * var(--tw-space-x-reverse));
  margin-inline-end: calc(var(--spacing) * calc(1 - var(--tw-space-x-reverse)));
}
@media (width >= 64rem) {
  .nav-desktop {
    display: flex;
  }
}

.nav-top-chevron {
  margin-left: calc(var(--spacing) * 2);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
}

.mega-menu-visual {
  flex-shrink: 0;
}

.btn-icon-sm {
  height: calc(var(--spacing) * 10);
  width: calc(var(--spacing) * 10);
}

.btn-icon-lg {
  height: calc(var(--spacing) * 11);
  width: calc(var(--spacing) * 11);
}

.btn-primary-nav {
  margin-left: calc(var(--spacing) * 4);
}

.mobile-menu-foot {
  padding: calc(var(--spacing) * 4);
  padding-bottom: calc(var(--spacing) * 6);
}

.btn-primary-block {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  background-color: var(--color-brand-primary);
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 3);
  text-align: center;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}


/* ==========================================================================
   HÉROS (index)
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  height: 70vh;
  align-items: center;
  overflow: hidden;
}
@media (width >= 48rem) {
  .hero {
    height: 90vh;
  }
}

.hero-video {
  position: absolute;
  inset: 0px;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.overlay-dark {
  position: absolute;
  inset: 0px;
  background-color: color-mix(in srgb, #000 60%, transparent);
}
@supports (color: color-mix(in lab, red, red)) {
  .overlay-dark {
    background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
  }
}

.hero-inner {
  position: relative;
  z-index: 10;
  width: 100%;
  @media (width >= 40rem) {
  }
  @media (width >= 48rem) {
  }
  @media (width >= 64rem) {
  }
  @media (width >= 80rem) {
  }
  @media (width >= 96rem) {
  max-width: 96rem;
  }
  margin-inline: auto;
  padding-inline: calc(var(--spacing) * 4);
  text-align: center;
}
@media (width >= 48rem) {
  .hero-inner {
    margin-top: calc(var(--spacing) * 20);
  }
}

.hero-title {
  margin-bottom: calc(var(--spacing) * 6);
  font-size: var(--text-4xl);
  --tw-leading: var(--leading-tight);
  line-height: var(--leading-tight);
  --tw-font-weight: var(--font-weight-extrabold);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-white);
  --tw-drop-shadow-size: drop-shadow(0 4px 4px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
  --tw-drop-shadow: drop-shadow(var(--drop-shadow-lg));
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
@media (width >= 48rem) {
  .hero-title {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }
}
@media (width >= 64rem) {
  .hero-title {
    font-size: var(--text-6xl);
    line-height: var(--tw-leading, var(--text-6xl--line-height));
  }
}

.hero-subtitle {
  margin-inline: auto;
  margin-bottom: calc(var(--spacing) * 8);
  max-width: var(--container-2xl);
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  color: var(--color-gray-200);
  --tw-drop-shadow-size: drop-shadow(0 3px 3px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.12)));
  --tw-drop-shadow: drop-shadow(var(--drop-shadow-md));
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
@media (width >= 48rem) {
  .hero-subtitle {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
}


/* ==========================================================================
   BLOC DE PRÉSENTATION
   ========================================================================== */

.intro-card {
  position: relative;
  margin-bottom: calc(var(--spacing) * 12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--spacing) * 10);
  overflow: hidden;
  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
@media (width >= 64rem) {
  .intro-card {
    flex-direction: row;
    gap: calc(var(--spacing) * 16);
  }
}

.intro-accent {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: calc(var(--spacing) * 2);
  background-color: var(--color-brand-primary);
}

.badge-float {
  position: absolute;
  top: calc(var(--spacing) * 3);
  left: calc(var(--spacing) * 12);
  height: 100%;
}

@media (width >= 64rem) {
  .intro-body {
    width: calc(8 / 12 * 100%);
  }
}

@media (width >= 64rem) {
  .intro-aside {
    width: calc(4 / 12 * 100%);
  }
}

.intro-title {
  margin-bottom: calc(var(--spacing) * 2);
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-primary);
}
@media (width >= 48rem) {
  .intro-title {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
}

.intro-text {
  font-size: var(--text-lg);
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-600);
}

/* Aère la lecture en séparant les paragraphes consécutifs.
   Le sélecteur frère `+` n'ajoute d'espace qu'ENTRE deux paragraphes :
     - rien avant le premier, dont l'écart est déjà donné par le titre
       qui le précède (.intro-title / .plain-title, margin-bottom) ;
     - rien après le dernier, sans quoi la marge s'ajouterait au
       margin-top de .intro-underline et doublerait le blanc.
   1,5 rem, soit la même valeur que .article-p sur la page article. */
.intro-text + .intro-text {
  margin-top: calc(var(--spacing) * 6);
}

.intro-underline {
  margin-top: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 1.5);
  width: calc(var(--spacing) * 20);
  border-radius: calc(infinity * 1px);
  background-color: var(--color-brand-primary);
}

.intro-img {
  height: 100%;
  width: 100%;
  border-radius: var(--radius-lg);
}


/* ==========================================================================
   SERVICES
   ========================================================================== */

.services {
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
  border-color: var(--color-gray-200);
  background-color: var(--color-white);
  padding-block: calc(var(--spacing) * 10);
  color: var(--color-gray-600);
}

.services-title {
  margin-top: calc(var(--spacing) * 3);
  margin-bottom: calc(var(--spacing) * 6);
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-primary);
}
@media (width >= 48rem) {
  .services-title {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
}

.services-lead {
  margin-top: calc(var(--spacing) * 2);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: calc(var(--spacing) * 5);
  padding-inline: calc(var(--spacing) * 5);
}
@media (width >= 48rem) {
  .services-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-inline: calc(var(--spacing) * 10);
  }
}

.card-service-body {
  margin-top: calc(var(--spacing) * 2);
  margin-bottom: calc(var(--spacing) * 5);
  padding-inline: calc(var(--spacing) * 10);
  text-align: center;
}

.card-service-title {
  margin-bottom: calc(var(--spacing) * 3);
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
}

.card-service-text {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}


/* ==========================================================================
   INTERVENTION D'URGENCE
   ========================================================================== */

.urgence {
  position: relative;
  overflow: hidden;
  background-color: var(--color-gray-100);
  padding-block: calc(var(--spacing) * 16);
}

.urgence-inner {
  position: relative;
  z-index: 10;
  width: 100%;
  @media (width >= 40rem) {
  }
  @media (width >= 48rem) {
  }
  @media (width >= 64rem) {
  }
  @media (width >= 80rem) {
  }
  @media (width >= 96rem) {
  max-width: 96rem;
  }
  margin-inline: auto;
  padding-inline: calc(var(--spacing) * 4);
  text-align: center;
}

.urgence-card {
  margin-inline: auto;
  display: flex;
  max-width: var(--container-5xl);
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-3xl);
  background-color: var(--color-white);
  --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
@media (width >= 48rem) {
  .urgence-card {
    flex-direction: row;
  }
}

.urgence-alert {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--color-brand-primary);
  padding: calc(var(--spacing) * 10);
  color: var(--color-white);
}
@media (width >= 48rem) {
  .urgence-alert {
    width: calc(2 / 5 * 100%);
  }
}

.urgence-pulse {
  position: absolute;
  inset: 0px;
  animation: var(--animate-pulse);
  opacity: 40%;
}

.urgence-icon {
  position: relative;
  z-index: 10;
  margin-bottom: calc(var(--spacing) * 6);
  font-size: var(--text-6xl);
  line-height: var(--tw-leading, var(--text-6xl--line-height));
  --tw-drop-shadow-size: drop-shadow(0 4px 4px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
  --tw-drop-shadow: drop-shadow(var(--drop-shadow-lg));
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}

.urgence-title {
  position: relative;
  z-index: 10;
  text-align: center;
  font-size: var(--text-3xl);
  --tw-leading: var(--leading-tight);
  line-height: var(--leading-tight);
  --tw-font-weight: var(--font-weight-extrabold);
  font-weight: var(--font-weight-extrabold);
}
@media (width >= 48rem) {
  .urgence-title {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
}

.urgence-days {
  position: relative;
  z-index: 10;
  margin-top: calc(var(--spacing) * 4);
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: var(--tracking-widest);
  letter-spacing: var(--tracking-widest);
  color: var(--color-white);
  text-transform: uppercase;
}

.urgence-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--spacing) * 10);
  text-align: left;
}
@media (width >= 48rem) {
  .urgence-body {
    width: calc(3 / 5 * 100%);
    padding: calc(var(--spacing) * 12);
  }
}

.urgence-mark {
  pointer-events: none;
  position: absolute;
  right: 0px;
  bottom: 0px;
  --tw-translate-x: calc(1 / 4 * 100%);
  --tw-translate-y: calc(1 / 4 * 100%);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  opacity: 5%;
}

.urgence-mark-icon {
  font-size: var(--text-9xl);
  line-height: var(--tw-leading, var(--text-9xl--line-height));
}

.urgence-subtitle {
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-primary);
}
@media (width >= 48rem) {
  .urgence-subtitle {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
}

.urgence-text {
  margin-bottom: calc(var(--spacing) * 8);
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  color: var(--color-gray-600);
}

.urgence-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--spacing) * 4);
}
@media (width >= 40rem) {
  .urgence-actions {
    flex-direction: row;
  }
}

.btn-phone {
  display: flex;
  width: 100%;
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  background-color: var(--color-brand-primary);
  padding-inline: calc(var(--spacing) * 8);
  padding-block: calc(var(--spacing) * 4);
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
@media (hover: hover) {
  .btn-phone:hover {
    --tw-translate-y: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    background-color: var(--color-brand-primary-dark);
  }
}
@media (width >= 40rem) {
  .btn-phone {
    width: auto;
  }
}

.btn-phone-icon {
  margin-right: calc(var(--spacing) * 3);
}


/* ==========================================================================
   SECTION LIBRE
   ========================================================================== */

.plain-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.plain-body {
  margin-top: calc(var(--spacing) * 6);
  width: 100%;
}

.plain-title {
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-primary);
}
@media (width >= 48rem) {
  .plain-title {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
}

/* Sous-titre (h3) d'un bloc .plain-card. Noir, et d'un cran sous .plain-title
   sur l'échelle typographique à chaque point de rupture : 1,5 rem contre
   1,875 rem en mobile, 1,875 rem contre 2,25 rem à partir de md. La hiérarchie
   reste donc lisible quelle que soit la largeur d'écran. */
.plain-subtitle {
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
}
@media (width >= 48rem) {
  .plain-subtitle {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
}


/* ==========================================================================
   GALERIE D'UN PROJET (gabarit article.html)
   ========================================================================== */

/* Masonry en grille. Chaque photo garde ses proportions : portrait et paysage
   se mélangent sans recadrage.
   Volontairement une grille et non `columns`. Les colonnes CSS se remplissent
   de haut en bas colonne par colonne : sur une galerie de chantier, la photo
   « fin de travaux » se retrouverait en haut à droite et la chronologie serait
   illisible. La grille, elle, place les photos de gauche à droite dans l'ordre
   du document ; c'est js/script.js qui donne à chacune le nombre de rangées
   correspondant à sa hauteur, d'où le décalage vertical.
   Sans JavaScript, la galerie reste une grille classique à rangées alignées :
   moins jolie, mais parfaitement lisible. */
.gallery-grid {
  margin-top: calc(var(--spacing) * 8);
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: calc(var(--spacing) * 5);
  align-items: start;
}

@media (width >= 48rem) {
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width >= 64rem) {
  .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mode masonry : des rangées très fines que chaque photo occupe en nombre
   proportionnel à sa hauteur. L'espacement vertical est intégré au calcul du
   span, d'où le row-gap remis à zéro. */
.gallery-grid.is-masonry {
  grid-auto-rows: 8px;
  row-gap: 0;
}

.gallery-item {
  margin: 0;
}

/* `height: auto` laisse l'image à ses proportions réelles. Les attributs width
   et height du HTML donnent le rapport au navigateur, qui réserve la place
   avant le chargement — sans quoi la mise en page sursauterait au défilement. */
.gallery-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--gtp-shadow-md);
  background-color: var(--color-gray-100);
}

.gallery-caption {
  margin-top: calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-600);
  text-align: center;
}


/* ==========================================================================
   PAGE DEVIS GRATUIT
   ========================================================================== */

/* Arguments à gauche, formulaire à droite. Une seule colonne en dessous de lg :
   sur tablette, deux colonnes rendraient le formulaire trop étroit pour être
   confortable à remplir. */
.devis-grid,
.zone-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacing) * 10);
  align-items: start;
}

@media (width >= 64rem) {
  .devis-grid,
  .zone-grid {
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--spacing) * 12);
  }
}

/* Liste d'arguments : puces remplacées par une pastille et un filet à gauche. */
.devis-points {
  margin-top: calc(var(--spacing) * 8);
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 6);
  list-style: none;
}

.devis-point {
  border-left: 3px solid var(--color-brand-primary);
  padding-left: calc(var(--spacing) * 5);
}

.devis-point-title {
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-navy);
}

.devis-point-text {
  margin-top: calc(var(--spacing) * 1);
  color: var(--color-gray-600);
  line-height: var(--leading-relaxed);
}

/* Encadré d'urgence : volontairement contrasté, c'est le seul endroit de la
   page qui détourne du formulaire. */
.devis-urgence {
  margin-top: calc(var(--spacing) * 10);
  border-radius: var(--radius-2xl);
  border-left: 4px solid var(--color-brand-primary);
  background-color: var(--color-gray-50);
  padding: calc(var(--spacing) * 8);
  text-align: center;
}

.devis-urgence-icon {
  font-size: var(--text-3xl);
  color: var(--color-brand-primary);
}

.devis-urgence-title {
  margin-top: calc(var(--spacing) * 4);
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-primary);
}

.devis-urgence-text {
  margin-top: calc(var(--spacing) * 3);
  margin-bottom: calc(var(--spacing) * 6);
  color: var(--color-gray-600);
  line-height: var(--leading-relaxed);
}

/* Le formulaire garde la carte blanche d'index.html, sans la marge automatique
   qui le centrerait dans sa colonne. */
.devis-form {
  margin-inline: 0;
  max-width: none;
}

/* Étiquettes de communes. */
.city-tags {
  margin-top: calc(var(--spacing) * 6);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2);
  list-style: none;
}

.city-tag {
  border-radius: calc(infinity * 1px);
  border: 1px solid var(--color-gray-200);
  background-color: var(--color-white);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-navy);
}

/* La carte reprend le cadre de l'accueil ; elle doit rester haute même
   lorsqu'elle partage la ligne avec la colonne de texte. */
.zone-map .map-box {
  height: calc(var(--spacing) * 100);
}


/* ==========================================================================
   LISTES D'IDENTITÉ (page mentions-legales.html)
   ========================================================================== */

/* Paires « intitulé / valeur ». Une <dl> plutôt qu'un tableau : il s'agit de
   définitions, pas de données croisées. Empilées en mobile, sur deux colonnes
   dès qu'il y a la place. */
.legal-list {
  margin-top: calc(var(--spacing) * 2);
}

.legal-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacing) * 1);
  padding-block: calc(var(--spacing) * 3);
  border-bottom: 1px solid var(--color-gray-100);
}

.legal-row:last-child {
  border-bottom: 0;
}

@media (width >= 48rem) {
  .legal-row {
    grid-template-columns: 15rem 1fr;
    gap: calc(var(--spacing) * 6);
    align-items: baseline;
  }
}

.legal-term {
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-navy);
}

.legal-value {
  margin: 0;
  color: var(--color-gray-600);
  line-height: var(--leading-relaxed);
}

.legal-value a {
  color: var(--color-brand-primary);
}


/* ==========================================================================
   GRILLE DES RÉALISATIONS (page realisations.html)
   ========================================================================== */

/* 1 projet par ligne en mobile, 3 en desktop. Le palier intermédiaire à 2
   colonnes évite des vignettes démesurées sur tablette ; le supprimer suffit
   à revenir à un passage direct de 1 à 3. */
.works-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: calc(var(--spacing) * 10);
}

@media (width >= 48rem) {
  .works-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width >= 64rem) {
  .works-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(var(--spacing) * 12);
  }
}

/* La carte entière est cliquable grâce au ::after de .work-link, qui la
   recouvre. Un seul lien existe donc dans l'arbre d'accessibilité, et son
   intitulé est le titre du projet — pas un « lire la suite » sans contexte. */
.work-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.work-media {
  overflow: hidden;
  border-radius: var(--radius-2xl);
  box-shadow: var(--gtp-shadow-lg);
  aspect-ratio: 4 / 3;
}

.work-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition-property: scale;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: 500ms;
}

.work-title {
  margin-top: calc(var(--spacing) * 5);
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-brand-navy);
  transition-property: color;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--default-transition-duration);
}

.work-link {
  color: inherit;
}

.work-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.work-link:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 4px;
}

.work-rule {
  width: calc(var(--spacing) * 12);
  height: 3px;
  margin-top: calc(var(--spacing) * 3);
  margin-inline: auto;
  border-radius: calc(infinity * 1px);
  background-color: var(--color-brand-primary);
}

.work-text {
  margin-top: calc(var(--spacing) * 3);
  color: var(--color-gray-600);
  line-height: var(--leading-relaxed);
}

@media (hover: hover) {
  .work-card:hover .work-img {
    scale: 105% 105%;
  }

  .work-card:hover .work-title {
    color: var(--color-brand-primary);
  }
}


/* ==========================================================================
   COMPARATEUR AVANT / APRÈS
   ========================================================================== */

.badge-caps {
  border-radius: var(--radius-lg);
  background-color: var(--color-black);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: var(--spacing);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: var(--tracking-wide);
  letter-spacing: var(--tracking-wide);
  color: var(--color-white);
  text-transform: uppercase;
}

.ba-title {
  margin-top: calc(var(--spacing) * 4);
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  --tw-font-weight: var(--font-weight-extrabold);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-brand-primary);
}
@media (width >= 48rem) {
  .ba-title {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
}

.ba-lead {
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  color: var(--color-gray-600);
}

/* Liens en ligne dans le texte courant. Le preflight de Tailwind impose
   `a { color: inherit }` : sans cette règle, un lien reprend le gris du
   paragraphe qui le contient et devient indiscernable du texte.
   Les trois contextes de texte rédactionnel du site sont couverts, pour que
   tout lien ajouté à l'avenir dans un chapô, un paragraphe de contenu ou une
   réponse de FAQ soit visible sans intervention. */
.ba-lead a,
.intro-text a,
.faq-answer a {
  color: var(--color-brand-primary);
}

.ba-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: calc(var(--spacing) * 6);
}
@media (width >= 48rem) {
  .ba-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (width >= 64rem) {
  .ba-grid {
    gap: calc(var(--spacing) * 8);
  }
}

.ba-col {
  width: 100%;
}

.ba-slider {
  position: relative;
  margin-inline: auto;
  height: 350px;
  width: 100%;
  max-width: var(--container-4xl);
  overflow: hidden;
  border-radius: var(--radius-3xl);
  --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  -webkit-user-select: none;
  user-select: none;
}

.ba-layer-back {
  position: absolute;
  inset: 0px;
  z-index: 0;
  height: 100%;
  width: 100%;
}

.ba-layer-front {
  position: absolute;
  inset: 0px;
  z-index: 10;
  height: 100%;
  width: 100%;
}

.ba-fill {
  position: absolute;
  inset: 0px;
  height: 100%;
  width: 100%;
}

.ba-img {
  pointer-events: none;
  position: absolute;
  inset: 0px;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.ba-tag-after {
  pointer-events: none;
  position: absolute;
  top: calc(var(--spacing) * 6);
  right: calc(var(--spacing) * 6);
  z-index: 10;
  border-radius: var(--radius-lg);
  background-color: color-mix(in srgb, #a10303 90%, transparent);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-backdrop-blur: blur(var(--blur-sm));
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
@supports (color: color-mix(in lab, red, red)) {
  .ba-tag-after {
    background-color: color-mix(in oklab, var(--color-brand-primary) 90%, transparent);
  }
}
@media (width >= 48rem) {
  .ba-tag-after {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
}

.ba-tag-before {
  pointer-events: none;
  position: absolute;
  top: calc(var(--spacing) * 6);
  left: calc(var(--spacing) * 6);
  z-index: 10;
  border-radius: var(--radius-lg);
  background-color: color-mix(in srgb, #000 70%, transparent);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-backdrop-blur: blur(var(--blur-sm));
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
@supports (color: color-mix(in lab, red, red)) {
  .ba-tag-before {
    background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
  }
}
@media (width >= 48rem) {
  .ba-tag-before {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
}

.ba-handle {
  position: absolute;
  inset-block: 0px;
  left: calc(1 / 2 * 100%);
  z-index: 20;
  display: flex;
  width: calc(var(--spacing) * 1.5);
  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  cursor: ew-resize;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
}

.ba-knob {
  display: flex;
  height: calc(var(--spacing) * 12);
  width: calc(var(--spacing) * 12);
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  background-color: var(--color-white);
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
  color: var(--color-gray-800);
  --tw-shadow: 0 0 15px var(--tw-shadow-color, rgba(0,0,0,0.5));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.ba-input {
  position: absolute;
  inset: 0px;
  z-index: 30;
  height: 100%;
  width: 100%;
  cursor: ew-resize;
  opacity: 0%;
}

.ba-thumbs {
  display: grid;
  height: 350px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: calc(var(--spacing) * 4);
}

.ba-thumb {
  height: 100%;
  width: 100%;
  border-radius: var(--radius-2xl);
  object-fit: cover;
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}


/* ==========================================================================
   ZONE D'INTERVENTION (carte)
   ========================================================================== */

.map-section {
  background-color: var(--color-white);
  padding-block: calc(var(--spacing) * 20);
}

.map-icon {
  margin-bottom: calc(var(--spacing) * 4);
  display: inline-flex;
  height: calc(var(--spacing) * 16);
  width: calc(var(--spacing) * 16);
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  background-color: var(--color-red-50);
  color: var(--color-brand-primary);
}

.map-icon-glyph {
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
}

/* Titre de section souligné par un filet rouge (.rule-spaced placé juste après
   le <h2> dans le HTML). Présentation partagée par « Où intervient GIRARD TP ? »
   et « Demander un devis gratuit » : les deux sélecteurs sont volontairement
   groupés ici pour qu'ils ne puissent pas diverger. */
.map-title,
.contact-title {
  margin-top: calc(var(--spacing) * 2);
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  --tw-font-weight: var(--font-weight-extrabold);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-brand-primary);
}
@media (width >= 48rem) {
  .map-title,
  .contact-title {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
}

.map-lead {
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  color: var(--color-gray-500);
}

.map-frame {
  overflow: hidden;
  border-radius: var(--radius-3xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-100);
  background-color: var(--color-gray-50);
  padding: calc(var(--spacing) * 4);
  --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
@media (width >= 48rem) {
  .map-frame {
    padding: calc(var(--spacing) * 8);
  }
}

.map-box {
  position: relative;
  height: 350px;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
@media (width >= 48rem) {
  .map-box {
    height: 450px;
  }
}


/* ==========================================================================
   FORMULAIRE DE CONTACT
   ========================================================================== */

.contact {
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
  border-color: var(--color-gray-100);
  background-color: var(--color-gray-50);
  padding-block: calc(var(--spacing) * 20);
}

/* .contact-title est défini plus haut, groupé avec .map-title
   (section « ZONE D'INTERVENTION »). */

.contact-lead {
  color: var(--color-gray-600);
}

.contact-card {
  position: relative;
  margin-inline: auto;
  max-width: var(--container-3xl);
  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.contact-badge {
  position: absolute;
  top: calc(var(--spacing) * -6);
  right: calc(var(--spacing) * -4);
  display: flex;
  height: calc(var(--spacing) * 14);
  width: calc(var(--spacing) * 14);
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  background-color: var(--color-brand-primary);
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  color: var(--color-white);
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
@media (width >= 48rem) {
  .contact-badge {
    height: calc(var(--spacing) * 16);
    width: calc(var(--spacing) * 16);
  }
}

:where(.contact-form > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
}

.form-row {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: calc(var(--spacing) * 6);
}
@media (width >= 40rem) {
  .form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.form-field-select {
  appearance: none;
}

.form-field-textarea {
  resize: none;
}

.form-placeholder {
  color: var(--color-gray-500);
}

.btn-submit {
  display: flex;
  width: 100%;
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  background-color: var(--color-brand-primary);
  padding-inline: calc(var(--spacing) * 8);
  padding-block: calc(var(--spacing) * 4);
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
@media (hover: hover) {
  .btn-submit:hover {
    --tw-translate-y: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    background-color: var(--color-brand-primary-dark);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
}

.btn-submit-icon {
  margin-left: calc(var(--spacing) * 3);
}


/* ==========================================================================
   CARROUSEL DE RÉALISATIONS
   ========================================================================== */

.marquee-section {
  position: relative;
  overflow: hidden;
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
  border-color: var(--color-gray-100);
  background-color: var(--color-white);
  padding-block: calc(var(--spacing) * 16);
}

.marquee-title {
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  --tw-font-weight: var(--font-weight-extrabold);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-brand-primary);
}
@media (width >= 48rem) {
  .marquee-title {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
}

.marquee {
  position: relative;
  display: flex;
  width: 100%;
}

.marquee-fade-l {
  pointer-events: none;
  position: absolute;
  inset-block: 0px;
  left: 0px;
  z-index: 10;
  width: calc(var(--spacing) * 12);
  --tw-gradient-position: to right in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
  --tw-gradient-from: var(--color-white);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  --tw-gradient-to: transparent;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
@media (width >= 48rem) {
  .marquee-fade-l {
    width: calc(var(--spacing) * 32);
  }
}

.marquee-fade-r {
  pointer-events: none;
  position: absolute;
  inset-block: 0px;
  right: 0px;
  z-index: 10;
  width: calc(var(--spacing) * 12);
  --tw-gradient-position: to left in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
  --tw-gradient-from: var(--color-white);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  --tw-gradient-to: transparent;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
@media (width >= 48rem) {
  .marquee-fade-r {
    width: calc(var(--spacing) * 32);
  }
}

/* Le rail est un vrai conteneur de défilement horizontal, et non plus une
   animation CSS de `transform`. Ce choix donne gratuitement le glissement au
   doigt avec inertie sur mobile, que rien ne sait reproduire correctement en
   JavaScript. Le défilement automatique, la boucle et le glissement à la souris
   sont pilotés par js/script.js, qui écrit dans `scrollLeft`. */
.marquee-track {
  display: flex;
  flex: 1;
  min-width: 0;
  padding-inline: calc(var(--spacing) * 2);
  overflow-x: auto;
  overflow-y: hidden;
  /* évite d'entraîner le défilement vertical de la page en fin de course */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}

.marquee-track::-webkit-scrollbar {
  display: none;
}

.marquee-track.is-dragging {
  cursor: grabbing;
  user-select: none;
}
:where(.marquee-track > :not(:last-child)) {
  --tw-space-x-reverse: 0;
  margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
  margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
}
@media (width >= 48rem) {
  :where(.marquee-track > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)));
  }
}
/* La mise en pause au survol est désormais gérée par js/script.js, en même
   temps que la pause au glissement et au respect de `prefers-reduced-motion`. */

.marquee-set {
  display: flex;
}
:where(.marquee-set > :not(:last-child)) {
  --tw-space-x-reverse: 0;
  margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
  margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
}
@media (width >= 48rem) {
  :where(.marquee-set > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)));
  }
}

.marquee-set-next {
  margin-left: calc(var(--spacing) * 4);
  display: flex;
}
:where(.marquee-set-next > :not(:last-child)) {
  --tw-space-x-reverse: 0;
  margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
  margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
}
@media (width >= 48rem) {
  .marquee-set-next {
    margin-left: calc(var(--spacing) * 6);
  }
}
@media (width >= 48rem) {
  :where(.marquee-set-next > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)));
  }
}


/* ==========================================================================
   FAQ (compléments)
   ========================================================================== */

.faq-section {
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
  border-color: var(--color-gray-100);
  background-color: var(--color-white);
  padding-block: calc(var(--spacing) * 20);
}

:where(.faq-list > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
}

.faq-list-narrow {
  margin-inline: auto;
  max-width: var(--container-3xl);
}
:where(.faq-list-narrow > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
}

/* Le titre de question enveloppe le bouton, conformément au motif accordéon du
   W3C : un <button> n'accepte que du contenu phrasé, un titre n'en est pas.
   Le <h3> ne porte donc aucun style propre — le preflight ramène déjà sa taille
   et sa graisse à `inherit` — il ne sert qu'à imposer le noir au bouton qu'il
   contient, là où .faq-btn applique sinon la couleur brand-navy. */
.faq-question > .faq-btn {
  color: var(--color-black);
}

.faq-highlight {
  color: var(--color-brand-primary);
}

.faq-eyebrow {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: var(--tracking-wider);
  letter-spacing: var(--tracking-wider);
  color: var(--color-brand-primary);
  text-transform: uppercase;
}

.faq-heading {
  margin-top: calc(var(--spacing) * 2);
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-navy);
}


/* ==========================================================================
   PIED DE PAGE (compléments)
   ========================================================================== */

.site-footer {
  border-top-style: var(--tw-border-style);
  border-top-width: 4px;
  border-color: var(--color-brand-primary);
  background-color: var(--color-black);
  padding-top: calc(var(--spacing) * 20);
  padding-bottom: calc(var(--spacing) * 10);
}

.footer-grid {
  margin-bottom: calc(var(--spacing) * 16);
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  align-items: center;
  gap: calc(var(--spacing) * 12);
}
@media (width >= 48rem) {
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.footer-logo-col {
  margin-left: calc(var(--spacing) * 4);
  display: flex;
  justify-content: flex-start;
}
@media (width >= 48rem) {
  .footer-logo-col {
    margin-left: calc(var(--spacing) * 12);
  }
}
@media (width >= 64rem) {
  .footer-logo-col {
    margin-left: calc(var(--spacing) * 16);
  }
}

.footer-col {
  display: flex;
  flex-direction: column;
  color: var(--color-white);
}
@media (width >= 48rem) {
  .footer-col {
    align-items: center;
  }
}

.footer-col-end {
  display: flex;
  flex-direction: column;
  color: var(--color-white);
}
@media (width >= 48rem) {
  .footer-col-end {
    align-items: flex-end;
    text-align: right;
  }
}

.footer-heading {
  margin-bottom: calc(var(--spacing) * 6);
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}

:where(.footer-list > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
}

.footer-phone {
  display: inline-block;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.footer-phone-num {
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
@media (hover: hover) {
  .footer-phone:hover .footer-phone-num {
    color: var(--color-brand-primary);
  }
}

.footer-link-plain {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
@media (hover: hover) {
  .footer-link-plain:hover {
    color: var(--color-brand-primary);
  }
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
  border-color: color-mix(in srgb, #fff 10%, transparent);
  padding-top: calc(var(--spacing) * 8);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-400);
}
@supports (color: color-mix(in lab, red, red)) {
  .footer-bottom {
    border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
  }
}
@media (width >= 48rem) {
  .footer-bottom {
    flex-direction: row;
  }
}

.footer-legal {
  margin-top: calc(var(--spacing) * 4);
  display: flex;
}
:where(.footer-legal > :not(:last-child)) {
  --tw-space-x-reverse: 0;
  margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
  margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
}
@media (width >= 48rem) {
  .footer-legal {
    margin-top: 0px;
  }
}

.footer-legal-link {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
@media (hover: hover) {
  .footer-legal-link:hover {
    color: var(--color-white);
  }
}


/* ==========================================================================
   PAGE ARTICLE
   ========================================================================== */

.article-main {
  position: relative;
  z-index: 0;
  background-color: var(--color-gray-50);
  padding-bottom: calc(var(--spacing) * 24);
}

.article-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-black);
  padding-top: calc(var(--spacing) * 32);
  padding-bottom: calc(var(--spacing) * 24);
}

.article-hero-img {
  position: absolute;
  inset: 0px;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.article-blob-a {
  position: absolute;
  top: 0px;
  right: 0px;
  height: calc(var(--spacing) * 64);
  width: calc(var(--spacing) * 64);
  --tw-translate-x: calc(1 / 2 * 100%);
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  border-radius: calc(infinity * 1px);
  background-color: var(--color-brand-primary);
  opacity: 20%;
  mix-blend-mode: multiply;
  --tw-blur: blur(var(--blur-3xl));
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}

.article-blob-b {
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: calc(var(--spacing) * 64);
  width: calc(var(--spacing) * 64);
  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
  --tw-translate-y: calc(1 / 2 * 100%);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  border-radius: calc(infinity * 1px);
  background-color: var(--color-blue-500);
  opacity: 20%;
  mix-blend-mode: multiply;
  --tw-blur: blur(var(--blur-3xl));
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}

.breadcrumb {
  margin-bottom: calc(var(--spacing) * 8);
  display: flex;
  align-items: center;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-300);
}
:where(.breadcrumb > :not(:last-child)) {
  --tw-space-x-reverse: 0;
  margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
  margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
}

.breadcrumb-current {
  color: var(--color-white);
}

.article-hero-body {
  max-width: var(--container-4xl);
  color: var(--color-white);
}

.article-title {
  margin-bottom: calc(var(--spacing) * 6);
  font-size: var(--text-4xl);
  --tw-leading: var(--leading-tight);
  line-height: var(--leading-tight);
  --tw-font-weight: var(--font-weight-extrabold);
  font-weight: var(--font-weight-extrabold);
}
@media (width >= 48rem) {
  .article-title {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }
}
@media (width >= 64rem) {
  .article-title {
    font-size: var(--text-6xl);
    line-height: var(--tw-leading, var(--text-6xl--line-height));
  }
}

.article-lead {
  max-width: var(--container-2xl);
  font-size: var(--text-xl);
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
}

.article-stack {
  position: relative;
  z-index: 20;
  width: 100%;
  @media (width >= 40rem) {
  }
  @media (width >= 48rem) {
  }
  @media (width >= 64rem) {
  }
  @media (width >= 80rem) {
  }
  @media (width >= 96rem) {
  }
  margin-inline: auto;
  margin-top: calc(var(--spacing) * -10);
  max-width: var(--container-5xl);
  padding-inline: calc(var(--spacing) * 4);
}
:where(.article-stack > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 16) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 16) * calc(1 - var(--tw-space-y-reverse)));
}

.article-shadow {
  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.article-shadow-lg {
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.article-body {
  color: var(--color-gray-600);
}

.article-h2 {
  margin-bottom: calc(var(--spacing) * 6);
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-primary);
}

.article-h3 {
  margin-top: calc(var(--spacing) * 8);
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-primary);
}

.article-h4 {
  margin-top: calc(var(--spacing) * 8);
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-primary);
}

.article-p {
  margin-bottom: calc(var(--spacing) * 6);
}

.article-quote {
  margin-block: calc(var(--spacing) * 8);
  border-top-right-radius: var(--radius-2xl);
  border-bottom-right-radius: var(--radius-2xl);
  border-left-style: var(--tw-border-style);
  border-left-width: 4px;
  border-color: var(--color-brand-primary);
  background-color: var(--color-gray-50);
  padding: calc(var(--spacing) * 6);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.article-quote-text {
  margin: 0px;
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-800);
}

.article-quote-icon {
  margin-right: calc(var(--spacing) * 2);
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
  color: color-mix(in srgb, #a10303 40%, transparent);
}
@supports (color: color-mix(in lab, red, red)) {
  .article-quote-icon {
    color: color-mix(in oklab, var(--color-brand-primary) 40%, transparent);
  }
}

.article-list {
  margin-bottom: calc(var(--spacing) * 6);
  list-style-type: disc;
  padding-left: calc(var(--spacing) * 6);
}
:where(.article-list > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
}
.article-list ::marker {
  color: var(--color-brand-primary);
}
.article-list::marker {
  color: var(--color-brand-primary);
}
.article-list ::-webkit-details-marker {
  color: var(--color-brand-primary);
}
.article-list::-webkit-details-marker {
  color: var(--color-brand-primary);
}