/* Refonte Uniweb - v1.1 - feuille unique (socle v1.07 + styles de page + adaptation au prompt d'intégration) */

/* =========================================================
   UNIWEB : SOCLE COMMUN V6 (1.06) (Bootstrap 5.3 surchargé)
   Charte : Primaire #0B6FCB / Secondaire #15222B / Accent #1EB4EE / Fond clair (Brume) #F2F7FA
   Titres et texte : Outfit (design system Uniweb v1.0)
   Signature : deux U qui se chevauchent pour former un W, dont un qui monte.
   V6 = design 1.05 conservé, repassé avec les règles du design system :
   - menu complet (Accueil, Expertises, Réalisations, L'agence, Blog, Étude gratuite)
   - motifs en U réutilisables (.bg-motif, .u-arcs, .uw-glyph, .u-stroke) sur hero, CTA, réalisations
   - nouveaux composants : blog (mosaïque, cartes, article), réalisation type (navigateur de prévisualisation,
     galerie), expertise type (navigation latérale, encart collant), contact (choix en pastilles, carte)
   - pictos Uniweb du kit (duotone) : <i class="fa-kit-duotone fa-uniweb-picto-nom" aria-hidden="true"></i>
   V1.08 = repasse design system : pictos du kit, Outfit partout, Brume, formes / motifs / compositions officiels (assets/ds)
   Tout en CSS pur ; animations coupées si l'utilisateur préfère réduire les mouvements.
   ========================================================= */

/* ---------- 1. Variables ---------- */
@property --uw-n {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
:root {
  --uw-primary: #0b6fcb;
  --uw-primary-dark: #0959a3;
  --uw-dark: #15222b;
  --uw-dark-2: #1c2d39;
  --uw-dark-3: #24384a;
  --uw-accent: #1eb4ee;
  --uw-light: #f2f7fa;
  --uw-muted: #4a5863;
  --uw-muted-dark: #aeb8c6;
  --uw-on-dark: #c3ccd8;
  --uw-border: #e3e9ed;
  --uw-border-dark: rgba(255, 255, 255, 0.12);
  --uw-star: #f2b33d;
  --uw-grad: linear-gradient(135deg, #1eb4ee 0%, #0b6fcb 100%);
  --uw-grad-up: linear-gradient(to top, #1eb4ee 0%, #0b6fcb 100%);
  --uw-grad-x: linear-gradient(90deg, #1eb4ee 0%, #0b6fcb 100%);
  --uw-radius-sm: 0.75rem;
  --uw-radius: 1.125rem;
  --uw-radius-lg: 1.5rem;
  --uw-radius-xl: 2rem;
  --uw-radius-u: 999px;
  --uw-shadow: 0 14px 34px rgba(21, 34, 43, 0.08);
  --uw-shadow-lg: 0 24px 60px rgba(21, 34, 43, 0.16);
  --uw-shadow-blue: 0 14px 30px rgba(11, 111, 203, 0.28);
  --uw-offset: -6px 6px 0 0 var(--uw-accent);
  --uw-font-title: "Outfit", Arial, sans-serif;
  --uw-font-text: "Outfit", Arial, sans-serif;
  --uw-header-h: 84px;
  --uw-ease: cubic-bezier(0.22, 0.8, 0.26, 1);
  --uw-gutter-x: max(24px, calc((100vw - 1200px) / 2 + 12px));
  --uw-cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='32' viewBox='0 0 28 32'%3E%3Cpath d='M5 3v14a9 9 0 0 0 18 0V3' fill='none' stroke='%231EB4EE' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E")
      14 16,
    auto;
  --uw-motif-dark: url(../assets/ds/motifs/uniweb-motif-u-sombre.svg);
  --uw-motif-light: url(../assets/ds/motifs/uniweb-motif-u-clair.svg);

  --bs-primary: #0b6fcb;
  --bs-primary-rgb: 11, 111, 203;
  --bs-secondary: #15222b;
  --bs-secondary-rgb: 21, 34, 43;
  --bs-dark: #15222b;
  --bs-dark-rgb: 21, 34, 43;
  --bs-info: #1eb4ee;
  --bs-info-rgb: 30, 180, 238;
  --bs-light: #f2f7fa;
  --bs-light-rgb: 242, 247, 250;
  --bs-body-font-family: "Outfit", Arial, sans-serif;
  --bs-body-color: #15222b;
  --bs-body-color-rgb: 21, 34, 43;
  --bs-heading-color: #15222b;
  --bs-secondary-color: #4a5863;
  --bs-link-color: #0b6fcb;
  --bs-link-color-rgb: 11, 111, 203;
  --bs-link-hover-color: #0959a3;
  --bs-link-hover-color-rgb: 9, 89, 163;
  --bs-border-color: #e3e9ed;
  --bs-border-radius: 0.75rem;
  --bs-border-radius-sm: 0.5rem;
  --bs-border-radius-lg: 1.125rem;
  --bs-border-radius-xl: 1.5rem;
  --bs-focus-ring-color: rgba(11, 111, 203, 0.25);
}

/* ---------- 2. Typographie ---------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--uw-header-h) + 16px);
}
body {
  font-family: var(--uw-font-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--uw-dark);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* Le clip du body est reporté sur la fenêtre : sur mobile, le contenu qui dépasse élargissait quand même la page.
   On rogne donc aussi <main> (clip ne crée pas de conteneur de défilement : position:sticky reste opérant). */
main {
  overflow-x: clip;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.ff-title {
  font-family: var(--uw-font-title);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: inherit;
  line-height: 1.1;
}
h1,
.h1 {
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  line-height: 1.02;
}
h2,
.h2 {
  font-size: clamp(2rem, 3.6vw, 3.1rem);
}
h3,
.h3 {
  font-size: 1.5rem;
  letter-spacing: -0.015em;
}
h4,
.h4 {
  font-size: 1.25rem;
}
h5,
.h5 {
  font-size: 1.1rem;
}
h6,
.h6 {
  font-size: 1rem;
}
.display-uw {
  font-family: var(--uw-font-title);
  font-weight: 800;
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.display-6 {
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  font-weight: 700;
  line-height: 1.1;
}
p {
  margin-bottom: 1.1rem;
}
.lead {
  font-size: 1.2rem;
  color: var(--uw-muted);
  font-weight: 400;
  line-height: 1.6;
}
strong,
b {
  font-weight: 700;
}
small,
.small {
  font-size: 0.875rem;
}
.text-muted-uw {
  color: var(--uw-muted) !important;
}
.text-primary-uw {
  color: var(--uw-primary) !important;
}
.text-accent {
  color: var(--uw-accent) !important;
}
.text-on-dark {
  color: var(--uw-on-dark) !important;
}
.text-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px currentColor;
}
.text-grad {
  background: var(--uw-grad-x);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.fw-title {
  font-family: var(--uw-font-title);
  font-weight: 700;
}
.container {
  max-width: 1200px;
}
::selection {
  background: rgba(30, 180, 238, 0.3);
}

.u-arc {
  position: relative;
  white-space: nowrap;
  display: inline-block;
  z-index: 0;
}
.u-arc::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -0.16em;
  height: 0.3em;
  z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%231EB4EE'/%3E%3Cstop offset='1' stop-color='%230B6FCB'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4 5 Q100 30 196 5' fill='none' stroke='url(%23g)' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E")
    center/100% 100% no-repeat;
  transform-origin: left;
  animation: uw-draw-x 1s var(--uw-ease) 0.9s both;
}
.hl-accent {
  color: var(--uw-accent);
}
.hl-primary {
  color: var(--uw-primary);
}

.line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.line-mask > span {
  display: inline-block;
}
.js .line-mask > span {
  animation: uw-line-up 1s var(--uw-ease) both;
}
.js .line-mask:nth-child(2) > span {
  animation-delay: 0.12s;
}
.js .line-mask:nth-child(3) > span {
  animation-delay: 0.24s;
}
.js .line-mask:nth-child(4) > span {
  animation-delay: 0.36s;
}

.word-rotator {
  display: inline-block;
  height: 1.08em;
  overflow: hidden;
  vertical-align: bottom;
  position: relative;
  color: var(--uw-primary);
}
.word-rotator .wr-track {
  display: flex;
  flex-direction: column;
  animation: uw-words 11s var(--uw-ease) infinite;
}
.word-rotator .wr-track > span {
  display: block;
  height: 1.08em;
  line-height: 1.08;
  white-space: nowrap;
}
.bg-brand .word-rotator,
.acf-hero .word-rotator,
.page-intro .word-rotator {
  color: var(--uw-accent);
}

/* ---------- 3. Liens ---------- */
a {
  color: var(--uw-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
a:hover {
  color: var(--uw-primary-dark);
}
.link-arrow {
  font-weight: 700;
  color: var(--uw-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.link-arrow::after {
  content: "";
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--uw-light)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6FCB' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")
    center/14px no-repeat;
  transition:
    transform 0.25s var(--uw-ease),
    background-color 0.25s,
    box-shadow 0.25s;
}
.link-arrow:hover {
  color: var(--uw-primary-dark);
}
.link-arrow:hover::after {
  transform: translateX(4px);
  background-color: #fff;
  box-shadow: 0 0 0 2px var(--uw-accent);
}
.bg-brand .link-arrow,
.acf-hero .link-arrow,
.page-intro .link-arrow {
  color: #fff;
}
.bg-brand .link-arrow::after,
.acf-hero .link-arrow::after,
.page-intro .link-arrow::after {
  background-color: rgba(255, 255, 255, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231EB4EE' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.bg-brand .link-arrow:hover,
.acf-hero .link-arrow:hover,
.page-intro .link-arrow:hover {
  color: var(--uw-accent);
}
:focus-visible {
  outline: 3px solid rgba(30, 180, 238, 0.6);
  outline-offset: 3px;
}

/* ---------- 4. Icônes (kit Font Awesome 5ada4c3411) ----------
   Picto Uniweb (31 pictos duotones du design system) : <i class="fa-kit-duotone fa-uniweb-picto-nom" aria-hidden="true"></i>
   Noms : automatisation, avis, contenu, croissance, devis, e-commerce, email, fermer, fleche, geo-1, hebergement, ia,
   identite-visuelle, lien-externe, maintenance, menu, message, mobile, performance, plus, publicite, refonte, rendez-vous,
   securite, seo, seo-local, site-web, statistiques, telephone, utilisateur, valider.
   Calque principal = Bleu Uniweb (l'action), calque secondaire = Bleu Ciel (le support) ; sur fond sombre : blanc + Bleu Ciel ;
   sur fond bleu (bouton, dégradé) : blanc + blanc translucide. Les couleurs passent par les variables --fa-*, héritées du conteneur.
   Icônes standard restantes (horloge des durées, étoiles de notation, marques) : fa-regular / fa-solid / fa-brands, couleur héritée. */
:root {
  --fa-primary-color: var(--uw-primary);
  --fa-secondary-color: var(--uw-accent);
  --fa-secondary-opacity: 1;
}
.fa-kit-duotone,
.fa-solid,
.fa-regular,
.fa-brands {
  color: inherit;
  line-height: 1;
}
.fa-kit-duotone {
  vertical-align: -0.14em;
}
.svg-inline--fa {
  color: inherit;
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
}
.svg-inline--fa path {
  fill: currentColor;
}
/* Fonds sombres */
.bg-brand,
.acf-hero,
.page-intro,
.cta-box,
.aside-cta,
.site-footer,
.uw-offcanvas,
.zone-box,
.burger,
.float-card.is-dark,
.ico-box.is-dark,
.post-feature,
.callout.is-dark,
.project-nav a:hover,
.post-mini:hover,
.choice-chips input:checked + label,
.side-nav a[aria-current],
.side-nav a.is-active,
.btn-light-outline,
.btn-outline-dark:hover {
  --fa-primary-color: #fff;
  --fa-secondary-color: var(--uw-accent);
  --fa-secondary-opacity: 1;
}
/* Fonds bleus : bouton principal, dégradé */
.btn-primary,
.ico-box.is-grad,
.service-card.is-featured,
.join-card,
.cta-box.is-grad,
.pagination-uw a[aria-current],
.share-links a:hover,
.footer-socials a:hover,
.header-phone:hover .ph-ico,
.feature-card:hover .ico-box {
  --fa-primary-color: #fff;
  --fa-secondary-color: #fff;
  --fa-secondary-opacity: 0.55;
}
.service-card:hover {
  --fa-primary-color: #fff;
  --fa-secondary-color: var(--uw-accent);
  --fa-secondary-opacity: 1;
}
/* Encarts clairs posés sur un fond sombre : on revient aux couleurs de base */
.float-card:not(.is-dark),
.btn-light,
.form-card,
.spin-badge:not(.is-dark),
.bg-brand .btn-light {
  --fa-primary-color: var(--uw-primary);
  --fa-secondary-color: var(--uw-accent);
  --fa-secondary-opacity: 1;
}
.uw-i {
  display: inline-grid;
  place-items: center;
  line-height: 1;
  color: var(--uw-primary);
}
.bg-brand .uw-i,
.acf-hero .uw-i,
.page-intro .uw-i {
  color: var(--uw-accent);
}
.uw-i-accent {
  color: var(--uw-accent) !important;
  --fa-primary-color: var(--uw-accent);
  --fa-secondary-color: #fff;
}
.uw-i-primary {
  color: var(--uw-primary) !important;
  --fa-primary-color: var(--uw-primary);
  --fa-secondary-color: var(--uw-accent);
}
/* Pastille de picto : la forme U du design system (coin haut-gauche arrondi, haut-droit vif, bas en U) */
.ico-box {
  width: 56px;
  height: 62px;
  border-radius: 10px 0 50% 50%/10px 0 24px 24px;
  background: var(--uw-light);
  display: grid;
  place-items: center;
  padding-bottom: 6px;
  margin-bottom: 1.5rem;
  color: var(--uw-primary);
  flex-shrink: 0;
  font-size: 1.5rem;
  transition:
    background-color 0.3s,
    color 0.3s,
    transform 0.4s var(--uw-ease);
}
.ico-box i,
.ico-box svg,
.ico-box .svg-inline--fa {
  font-size: inherit;
  line-height: 1;
  height: 1em;
  vertical-align: 0;
}
.bg-soft .ico-box {
  background: #fff;
}
.ico-box.is-u {
  border-radius: 10px 0 50% 50%/10px 0 30px 30px;
  height: 68px;
  padding-bottom: 10px;
}
.ico-box.is-grad {
  background: var(--uw-grad);
  color: #fff;
}
.ico-box.is-dark,
.bg-brand .ico-box {
  background: var(--uw-dark-3);
  color: var(--uw-accent);
}
.ico-box.is-sm {
  width: 44px;
  height: 50px;
  font-size: 1.2rem;
  border-radius: 8px 0 50% 50%/8px 0 20px 20px;
  padding-bottom: 5px;
}
.ico-box.is-lg {
  width: 72px;
  height: 80px;
  font-size: 2rem;
  border-radius: 12px 0 50% 50%/12px 0 32px 32px;
  padding-bottom: 8px;
}
.ico-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.ico-inline > i,
.ico-inline > svg {
  color: var(--uw-primary);
  font-size: 1.05em;
}
.bg-brand .ico-inline > i,
.bg-brand .ico-inline > svg {
  color: var(--uw-accent);
}

/* ---------- 5. Boutons (une apparence par type) ---------- */
.btn {
  font-family: var(--uw-font-text);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  padding: 0.85rem 1.6rem;
  border-radius: var(--uw-radius-sm);
  border-width: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  transition:
    background-color 0.25s,
    border-color 0.25s,
    color 0.25s,
    box-shadow 0.3s var(--uw-ease),
    transform 0.3s var(--uw-ease);
}
.btn:active {
  transform: none !important;
  box-shadow: none !important;
}
.btn > i,
.btn > svg {
  font-size: 1.05em;
}
.btn-lg {
  font-size: 1.0625rem;
  padding: 1rem 1.9rem;
  border-radius: 0.9rem;
}
.btn-sm {
  font-size: 0.875rem;
  padding: 0.55rem 1.05rem;
  border-radius: 0.6rem;
}
.btn .btn-ico {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")
    center/13px no-repeat;
  transition: transform 0.3s var(--uw-ease);
}
.btn:hover .btn-ico {
  transform: translateX(3px) rotate(-45deg);
}
.btn-light .btn-ico,
.btn-outline-dark .btn-ico,
.btn-outline-primary .btn-ico {
  background-color: var(--uw-light);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6FCB' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0b6fcb;
  --bs-btn-border-color: #0b6fcb;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0959a3;
  --bs-btn-hover-border-color: #0959a3;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0959a3;
  --bs-btn-active-border-color: #0959a3;
  --bs-btn-focus-shadow-rgb: 11, 111, 203;
  --bs-btn-disabled-bg: #0b6fcb;
  --bs-btn-disabled-border-color: #0b6fcb;
}
.btn-primary:hover,
.btn-light:hover {
  transform: translate(3px, -3px);
  box-shadow: var(--uw-offset);
}
.btn-outline-primary {
  --bs-btn-color: #0b6fcb;
  --bs-btn-border-color: #0b6fcb;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0b6fcb;
  --bs-btn-hover-border-color: #0b6fcb;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0959a3;
  --bs-btn-active-border-color: #0959a3;
  --bs-btn-focus-shadow-rgb: 11, 111, 203;
}
.btn-outline-dark {
  --bs-btn-color: #15222b;
  --bs-btn-border-color: #15222b;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #15222b;
  --bs-btn-hover-border-color: #15222b;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #15222b;
  --bs-btn-active-border-color: #15222b;
  --bs-btn-focus-shadow-rgb: 21, 34, 43;
}
.btn-outline-primary:hover,
.btn-outline-dark:hover {
  transform: translateY(-2px);
}
.btn-outline-primary:hover .btn-ico,
.btn-outline-dark:hover .btn-ico {
  background-color: rgba(255, 255, 255, 0.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.btn-light {
  --bs-btn-color: #15222b;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: #15222b;
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: #15222b;
  --bs-btn-active-bg: #f2f7fa;
  --bs-btn-active-border-color: #f2f7fa;
}
.btn-light-outline {
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: transparent;
}
.btn-light-outline:hover,
.btn-light-outline:focus {
  color: #fff;
  border-color: var(--uw-accent);
  background: rgba(30, 180, 238, 0.1);
  transform: translateY(-2px);
}
.btn-light-outline > i,
.btn-light-outline > svg {
  color: var(--uw-accent);
}
.btn-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: var(--uw-radius-sm);
}
.btn-group-uw {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.btn[aria-current="page"] {
  box-shadow: var(--uw-offset);
  transform: translate(3px, -3px);
}

/* ---------- 6. Signature de marque : formes et motifs en U ---------- */
/* Glyphe : icône officielle du design system (assets/ds/logos/uniweb-icone-couleur.svg), taille via --s */
.uw-glyph {
  --s: 220px;
  position: relative;
  display: block;
  width: calc(var(--s) * 1.73);
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
  flex-shrink: 0;
}
/* Taille prioritaire : les règles génériques du type « .zone img { width: 100% } » ne doivent pas étirer le glyphe */
img.uw-glyph {
  width: calc(var(--s) * 1.73) !important;
  height: auto !important;
  max-width: none !important;
}
.uw-glyph.is-ghost {
  opacity: 0.12;
}
.uw-glyph.is-soft {
  opacity: 0.35;
}

.u-arcs {
  --w: 420px;
  position: absolute;
  width: var(--w);
  height: calc(var(--w) * 1.2);
  pointer-events: none;
  z-index: 0;
}
.u-arcs span {
  position: absolute;
  bottom: 0;
  display: block;
  border: 2px solid;
  border-top: 0;
  border-radius: 0 0 var(--uw-radius-u) var(--uw-radius-u);
}
.u-arcs span:nth-child(1) {
  left: 0;
  width: 58%;
  height: 78%;
  border-color: rgba(30, 180, 238, 0.55);
}
.u-arcs span:nth-child(2) {
  left: 30%;
  width: 58%;
  height: 100%;
  border-color: rgba(11, 111, 203, 0.55);
}
.u-arcs span:nth-child(3) {
  left: 15%;
  width: 58%;
  height: 62%;
  border-color: rgba(30, 180, 238, 0.25);
  border-style: dashed;
}
.bg-brand .u-arcs span:nth-child(2) {
  border-color: rgba(255, 255, 255, 0.18);
}
.u-arcs.is-filled span:nth-child(1) {
  border-width: 18px;
  border-top: 0;
  border-color: rgba(30, 180, 238, 0.12);
}
.u-arcs.is-filled span:nth-child(2) {
  border-width: 18px;
  border-top: 0;
  border-color: rgba(11, 111, 203, 0.14);
}

/* Motif répété « W » (trame de deux U) : fonds de hero, CTA, bandeaux */
.bg-motif {
  position: relative;
  isolation: isolate;
}
.bg-motif::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--uw-motif-dark) 0 0/96px 96px;
  -webkit-mask-image: radial-gradient(
    ellipse at 80% 30%,
    #000 0%,
    transparent 72%
  );
  mask-image: radial-gradient(ellipse at 80% 30%, #000 0%, transparent 72%);
}
.bg-motif.is-light::before {
  background-image: var(--uw-motif-light);
}
.bg-motif.is-full::before {
  -webkit-mask-image: none;
  mask-image: none;
}

.u-stroke {
  display: block;
  width: 8px;
  height: 120px;
  border-radius: 8px;
  background: var(--uw-grad-up);
  transform-origin: bottom;
}
.u-stroke.is-tall {
  height: 220px;
}

/* Images du design system */
.u-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--uw-radius-lg) var(--uw-radius-lg) var(--uw-radius-u)
    var(--uw-radius-u);
  aspect-ratio: 4/5;
  background: var(--uw-light);
}
.u-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--uw-ease);
}
.u-frame:hover img {
  transform: scale(1.04);
}
.u-frame.is-wide {
  aspect-ratio: 1/1;
}
.u-frame.is-land {
  aspect-ratio: 4/3;
  border-radius: var(--uw-radius-lg) var(--uw-radius-lg) 50% 50% /
    var(--uw-radius-lg) var(--uw-radius-lg) 30% 30%;
}
.img-offset {
  position: relative;
  border-radius: var(--uw-radius-lg);
  box-shadow: -10px 10px 0 0 var(--uw-accent);
}

.u-duo {
  --ring: #fff;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
}
.bg-soft .u-duo {
  --ring: var(--uw-light);
}
.bg-brand .u-duo {
  --ring: var(--uw-dark);
}
.u-duo .u-frame:nth-child(1) {
  aspect-ratio: 3/4;
  z-index: 2;
  box-shadow: 0 0 0 10px var(--ring);
}
.u-duo .u-frame:nth-child(2) {
  aspect-ratio: 3/5.2;
  margin-left: -14%;
  z-index: 1;
}
.u-duo .duo-badge {
  position: absolute;
  left: -18px;
  top: 18%;
  z-index: 3;
}

.u-dot {
  display: inline-block;
  width: 14px;
  height: 16px;
  border: 4px solid var(--uw-accent);
  border-top: 0;
  border-radius: 0 0 var(--uw-radius-u) var(--uw-radius-u);
  flex-shrink: 0;
}

.uw-cursor,
.uw-cursor * {
  cursor: var(--uw-cursor);
}
.uw-cursor a,
.uw-cursor button,
.uw-cursor label,
.uw-cursor summary {
  cursor: pointer;
}

.tilt {
  transition:
    transform 0.5s var(--uw-ease),
    box-shadow 0.5s var(--uw-ease);
}
.tilt:hover {
  transform: perspective(900px) rotateX(3deg) rotateY(-4deg) translateY(-4px);
}

.spin-badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: #fff;
  color: var(--uw-dark);
  text-decoration: none;
  box-shadow: var(--uw-shadow-lg);
  transition: transform 0.4s var(--uw-ease);
}
.spin-badge > svg {
  position: absolute;
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  animation: uw-spin 18s linear infinite;
}
.spin-badge text {
  font-family: var(--uw-font-text);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: currentColor;
}
.spin-badge .uw-glyph {
  --s: 22px;
}
.spin-badge:hover {
  transform: scale(1.06) rotate(-4deg);
  color: var(--uw-primary);
}
.spin-badge:hover > svg {
  animation-duration: 6s;
}
.spin-badge.is-dark {
  background: var(--uw-dark-2);
  color: #fff;
  border: 1px solid var(--uw-border-dark);
}
.spin-badge.is-dark:hover {
  color: var(--uw-accent);
}

/* ---------- 7. Titres de section ---------- */
.section-kicker,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--uw-font-text);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--uw-primary);
  margin-bottom: 1rem;
}
.section-kicker::before,
.eyebrow::before {
  content: "";
  width: 12px;
  height: 14px;
  border: 3.5px solid var(--uw-accent);
  border-top: 0;
  border-radius: 0 0 var(--uw-radius-u) var(--uw-radius-u);
}
.section-title,
.title-line {
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height: 1.08;
  margin-bottom: 1.25rem;
}
.section-lead {
  font-size: 1.125rem;
  color: var(--uw-muted);
  max-width: 640px;
  margin-bottom: 0;
}
.text-center .section-lead {
  margin-left: auto;
  margin-right: auto;
}
.section-head {
  position: relative;
  margin-bottom: 3.5rem;
  padding-left: 34px;
}
.section-head::before {
  content: "";
  position: absolute;
  left: 0;
  top: -28px;
  bottom: 0.35rem;
  width: 7px;
  border-radius: 7px;
  background: var(--uw-grad-up);
  transform-origin: bottom;
}
.section-head.text-center {
  padding-left: 0;
  padding-top: 64px;
}
.section-head.text-center::before {
  left: 50%;
  top: 0;
  bottom: auto;
  height: 48px;
  margin-left: -3.5px;
}
.section-head-split {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}
.section-head-split > .section-head {
  margin-bottom: 0;
  max-width: 720px;
}
.bg-brand .section-kicker,
.bg-brand .eyebrow,
.acf-hero .section-kicker,
.acf-hero .eyebrow,
.page-intro .eyebrow,
.page-intro .section-kicker {
  color: var(--uw-accent);
}
.bg-brand .section-kicker::before,
.bg-brand .eyebrow::before,
.acf-hero .eyebrow::before,
.acf-hero .section-kicker::before,
.page-intro .eyebrow::before,
.page-intro .section-kicker::before {
  border-color: #fff;
}
.section-index {
  position: absolute;
  right: 3%;
  top: 40px;
  z-index: 0;
  font-family: var(--uw-font-title);
  font-weight: 800;
  font-size: clamp(6rem, 16vw, 14rem);
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--uw-border);
  pointer-events: none;
  user-select: none;
}
.bg-soft .section-index {
  -webkit-text-stroke-color: #d6dfea;
}
.bg-brand .section-index {
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.08);
}

/* ---------- 8. Sections : espacements et fonds ---------- */
.section,
.section-pad {
  padding: 112px 0;
  position: relative;
}
.section-sm {
  padding: 64px 0;
  position: relative;
}
.section.pt-0 {
  padding-top: 0;
}
.section > .container {
  position: relative;
  z-index: 1;
}
.bg-soft {
  background: var(--uw-light) !important;
}
.bg-white {
  background: #fff !important;
}
.bg-brand {
  background: var(--uw-dark) !important;
  color: #fff;
}
.bg-brand h1,
.bg-brand h2,
.bg-brand h3,
.bg-brand h4 {
  color: #fff;
}
.bg-brand p,
.bg-brand .lead,
.bg-brand .section-lead {
  color: var(--uw-on-dark);
}
.bg-brand a:not(.btn) {
  color: #fff;
}
.bg-brand a:not(.btn):hover {
  color: var(--uw-accent);
}
.has-grid {
  position: relative;
  isolation: isolate;
}
.has-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.07) 1.2px,
    transparent 1.2px
  );
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(
    ellipse at 70% 40%,
    #000 0%,
    transparent 70%
  );
  mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%);
}
.has-glow {
  position: relative;
  isolation: isolate;
}
.has-glow::after {
  content: "";
  position: absolute;
  width: 640px;
  height: 640px;
  right: -180px;
  top: -160px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(30, 180, 238, 0.18),
    transparent 65%
  );
  pointer-events: none;
}
.overflow-clip {
  overflow: clip;
}
.section-lift {
  border-radius: var(--uw-radius-xl) var(--uw-radius-xl) 0 0;
  margin-top: -32px;
  z-index: 2;
}
.section-curtain {
  border-radius: 50% 50% 0 0/80px 80px 0 0;
  margin-top: -80px;
  z-index: 2;
  padding-top: 160px;
}
.section-u-bottom {
  border-radius: 0 0 50% 50%/0 0 80px 80px;
  z-index: 2;
}
.sticky-uw {
  position: sticky;
  top: calc(var(--uw-header-h) + 32px);
}

/* ---------- 9. Hero d'accueil (immersif, sombre) ---------- */
.acf-hero {
  position: relative;
  background: var(--uw-dark);
  color: #fff;
  padding: 96px 0 120px;
  overflow: hidden;
  isolation: isolate;
  min-height: calc(100vh - var(--uw-header-h));
  display: flex;
  align-items: center;
}
.acf-hero > .container {
  position: relative;
  z-index: 2;
}
.acf-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--uw-motif-dark) 0 0/96px 96px;
  -webkit-mask-image: radial-gradient(
    ellipse at 75% 45%,
    #000,
    transparent 70%
  );
  mask-image: radial-gradient(ellipse at 75% 45%, #000, transparent 70%);
}
.acf-hero::after {
  content: "";
  position: absolute;
  width: 720px;
  height: 720px;
  right: -200px;
  top: -180px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(30, 180, 238, 0.22),
    transparent 65%
  );
  animation: uw-glow 9s ease-in-out infinite alternate;
}
.acf-hero h1 {
  color: #fff;
  font-size: clamp(2.6rem, 5.4vw, 4.9rem);
  line-height: 1.02;
  margin-bottom: 1.5rem;
}
.acf-hero h1 .hl-accent {
  color: var(--uw-accent);
}
.acf-hero .lead {
  color: var(--uw-on-dark);
  max-width: 540px;
  margin-bottom: 2.25rem;
}
.hero-glyph {
  position: absolute;
  right: -6%;
  bottom: -14%;
  z-index: 0;
}
.hero-glyph.uw-glyph {
  --s: min(36vw, 460px);
}
.acf-hero .u-arcs {
  right: 4%;
  top: 8%;
  --w: min(34vw, 440px);
}
.hero-visual {
  position: relative;
  z-index: 1;
}
.hero-visual .u-frame {
  max-width: 420px;
  margin-left: auto;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.04);
}
.hero-visual .uw-glyph {
  position: absolute;
  left: 48%;
  bottom: -23%;
  z-index: -1;
}
.hero-visual img {
  width: 100%;
}
.hero-visual .spin-badge {
  position: absolute;
  left: -40px;
  top: 8%;
  z-index: 4;
}
.float-card {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: #fff;
  color: var(--uw-dark);
  border-radius: var(--uw-radius);
  padding: 0.9rem 1.15rem;
  box-shadow: var(--uw-shadow-lg);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
}
.float-card strong {
  display: block;
  font-family: var(--uw-font-title);
  font-size: 1.5rem;
  color: var(--uw-primary);
  line-height: 1;
}
.float-card .ico-box {
  margin: 0;
  width: 44px;
  height: 50px;
  font-size: 1.2rem;
  border-radius: 8px 0 50% 50%/8px 0 20px 20px;
  padding-bottom: 5px;
}
.float-card.fc-1 {
  left: -8%;
  bottom: 14%;
}
.float-card.fc-2 {
  right: -4%;
  top: 10%;
}
.float-card.is-dark {
  background: var(--uw-dark-2);
  color: #fff;
  border: 1px solid var(--uw-border-dark);
}
.float-card.is-dark strong {
  color: var(--uw-accent);
}
.hero-badge {
  position: absolute;
  left: -28px;
  bottom: 32px;
  background: #fff;
  color: var(--uw-dark);
  border-radius: var(--uw-radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--uw-shadow-lg);
  display: flex;
  gap: 0.8rem;
  align-items: center;
}
.hero-badge strong {
  font-family: var(--uw-font-title);
  font-size: 1.6rem;
  color: var(--uw-primary);
  line-height: 1;
}
.hero-checks {
  list-style: none;
  padding: 0;
  margin: 2.25rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
}
.hero-checks li {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  font-weight: 600;
  font-size: 0.95rem;
}
.hero-checks li::before {
  content: "";
  width: 12px;
  height: 14px;
  border: 3.5px solid var(--uw-accent);
  border-top: 0;
  border-radius: 0 0 var(--uw-radius-u) var(--uw-radius-u);
  flex-shrink: 0;
}
.acf-hero .hero-checks li,
.page-intro .hero-checks li {
  color: #fff;
}
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 2;
  width: 26px;
  height: 40px;
  margin-left: -13px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top: 0;
  border-radius: 0 0 var(--uw-radius-u) var(--uw-radius-u);
}
.scroll-cue::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--uw-accent);
}

/* ---------- 10. Bandeau défilant (marquee) ---------- */
.uw-marquee {
  overflow: hidden;
  padding: 30px 0;
  background: #fff;
  border-bottom: 1px solid var(--uw-border);
}
.uw-marquee-track {
  display: flex;
  width: max-content;
}
.uw-marquee-group {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding-right: 3rem;
}
.uw-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 3rem;
  font-family: var(--uw-font-title);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.75rem);
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--uw-dark);
  transition: color 0.3s;
}
.uw-marquee-item::after {
  content: "";
  width: 22px;
  height: 26px;
  border: 6px solid var(--uw-accent);
  border-top: 0;
  border-radius: 0 0 var(--uw-radius-u) var(--uw-radius-u);
}
.uw-marquee-item:hover {
  color: var(--uw-primary);
}
.uw-marquee-item.is-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--uw-dark);
}
.uw-marquee.is-dark {
  background: var(--uw-dark);
  border-color: var(--uw-border-dark);
}
.uw-marquee.is-dark .uw-marquee-item {
  color: #fff;
}
.uw-marquee.is-dark .uw-marquee-item.is-outline {
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.7);
}
.uw-marquee.is-grad {
  background: var(--uw-grad-x);
  border: 0;
}
.uw-marquee.is-grad .uw-marquee-item {
  color: #fff;
}
.uw-marquee.is-grad .uw-marquee-item.is-outline {
  -webkit-text-stroke-color: #fff;
  color: transparent;
}
.uw-marquee.is-grad .uw-marquee-item::after {
  border-color: var(--uw-dark);
}
.uw-marquee.is-tilt {
  transform: rotate(-2deg) scale(1.04);
  margin: -12px 0;
  position: relative;
  z-index: 3;
}
.uw-marquee:hover .uw-marquee-track {
  animation-play-state: paused;
}

/* ---------- 11. Bandeau d'introduction des pages internes ---------- */
.page-intro {
  background: var(--uw-dark);
  color: #fff;
  padding: 80px 0 96px;
  min-height: 420px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.page-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--uw-motif-dark) 0 0/96px 96px;
  -webkit-mask-image: radial-gradient(
    ellipse at 85% 40%,
    #000,
    transparent 65%
  );
  mask-image: radial-gradient(ellipse at 85% 40%, #000, transparent 65%);
}
.page-intro::after {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  right: -160px;
  top: -200px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(30, 180, 238, 0.18),
    transparent 65%
  );
}
.page-intro > .container {
  position: relative;
  z-index: 1;
  width: 100%;
}
.page-intro h1 {
  color: #fff;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  line-height: 1.05;
  margin-bottom: 1.25rem;
  max-width: 820px;
}
.page-intro h1 .hl-accent {
  color: var(--uw-accent);
}
.page-intro .lead {
  color: var(--uw-on-dark);
  max-width: 640px;
  margin-bottom: 0;
}
.page-intro .btn-group-uw {
  margin-top: 2rem;
}
.page-intro .uw-glyph {
  position: absolute;
  right: 4%;
  bottom: -60px;
  z-index: 0;
}
.page-intro.is-compact {
  min-height: 0;
  padding: 64px 0 72px;
}
.page-intro-img {
  width: 100%;
  border-radius: var(--uw-radius-lg);
  aspect-ratio: 4/3;
  object-fit: cover;
}
.breadcrumb-uw {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--uw-muted-dark);
}
.breadcrumb-uw li + li::before {
  content: "/";
  margin-right: 0.4rem;
  color: rgba(255, 255, 255, 0.3);
}
.breadcrumb-uw a {
  color: var(--uw-muted-dark);
  text-decoration: none;
}
.breadcrumb-uw a:hover {
  color: var(--uw-accent);
}
.breadcrumb-uw [aria-current] {
  color: #fff;
}

/* ---------- 12. Cartes ---------- */
.card {
  --bs-card-border-color: var(--uw-border);
  --bs-card-border-radius: var(--uw-radius-lg);
  --bs-card-inner-border-radius: var(--uw-radius-lg);
  --bs-card-spacer-x: 1.75rem;
  --bs-card-spacer-y: 1.75rem;
  --bs-card-bg: #fff;
  --bs-card-color: var(--uw-dark);
}
.card-soft {
  --bs-card-bg: var(--uw-light);
  --bs-card-border-color: transparent;
}
.card-title {
  font-family: var(--uw-font-title);
  font-weight: 700;
}
.card-hover {
  transition:
    transform 0.3s var(--uw-ease),
    box-shadow 0.3s,
    border-color 0.3s;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--uw-shadow);
  border-color: var(--uw-accent);
}

.service-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--uw-light);
  border-radius: var(--uw-radius-lg);
  padding: 32px;
  text-decoration: none;
  color: var(--uw-dark);
  transition:
    transform 0.4s var(--uw-ease),
    box-shadow 0.4s,
    color 0.3s;
}
.service-card::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  top: 0;
  height: 0;
  z-index: -1;
  background: var(--uw-dark);
  border-radius: 0 0 50% 50%/0 0 34% 34%;
  transition:
    height 0.55s var(--uw-ease),
    border-radius 0.55s var(--uw-ease);
}
.service-card::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -60px;
  z-index: -1;
  width: 120px;
  height: 150px;
  border: 28px solid var(--uw-accent);
  border-top: 0;
  border-radius: 0 0 var(--uw-radius-u) var(--uw-radius-u);
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.4s,
    transform 0.6s var(--uw-ease);
}
.service-card:hover {
  color: #fff;
  transform: translateY(-6px);
  box-shadow: var(--uw-shadow-lg);
}
.service-card:hover::before {
  height: 135%;
  border-radius: 0 0 50% 50%/0 0 12% 12%;
}
.service-card:hover::after {
  opacity: 0.18;
  transform: none;
}
.bg-soft .service-card {
  background: #fff;
}
.service-card .card-num {
  position: absolute;
  top: 26px;
  right: 30px;
  font-family: var(--uw-font-title);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--uw-muted);
  transition: color 0.3s;
}
.service-card .ico {
  width: 56px;
  height: 62px;
  border-radius: 10px 0 50% 50%/10px 0 24px 24px;
  background: #fff;
  display: grid;
  place-items: center;
  padding-bottom: 6px;
  margin-bottom: 1.5rem;
  color: var(--uw-primary);
  font-size: 1.6rem;
  flex-shrink: 0;
  transition:
    background-color 0.3s,
    color 0.3s,
    transform 0.4s var(--uw-ease);
}
.bg-soft .service-card .ico {
  background: var(--uw-light);
}
.service-card h3 {
  font-size: 1.4rem;
  margin-bottom: 0.6rem;
  transition: color 0.3s;
}
.service-card p {
  font-size: 0.95rem;
  color: var(--uw-muted);
  margin-bottom: 1.5rem;
  transition: color 0.3s;
}
.service-card .more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--uw-primary);
  transition:
    color 0.3s,
    gap 0.3s;
}
.service-card .more::after {
  content: "→";
}
.service-card:hover .ico {
  background: var(--uw-dark-3);
  color: var(--uw-accent);
  transform: rotate(-6deg);
}
.service-card:hover h3 {
  color: #fff;
}
.service-card:hover p {
  color: var(--uw-on-dark);
}
.service-card:hover .card-num {
  color: var(--uw-accent);
}
.service-card:hover .more {
  color: var(--uw-accent);
  gap: 0.85rem;
}
.service-card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
}
/* Tags lisibles : la carte est déjà sur Brume, le tag passe en blanc (et inversement) */
.service-card .badge-soft {
  background: #fff;
  color: var(--uw-dark);
}
.bg-soft .service-card .badge-soft {
  background: var(--uw-light);
}
.service-card.is-featured .badge-soft {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.service-card.is-featured {
  background: var(--uw-grad);
  color: #fff;
}
.service-card.is-featured h3 {
  color: #fff;
}
.service-card.is-featured p {
  color: rgba(255, 255, 255, 0.9);
}
.service-card.is-featured .more,
.service-card.is-featured .card-num {
  color: #fff;
}
.service-card.is-featured .ico {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.service-rows {
  border-bottom: 1px solid var(--uw-border);
}
.service-row {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 72px 1fr 1.1fr 56px;
  align-items: center;
  gap: 24px;
  padding: 30px 12px;
  border-top: 1px solid var(--uw-border);
  color: var(--uw-dark);
  text-decoration: none;
  transition:
    padding 0.45s var(--uw-ease),
    color 0.3s;
}
.service-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--uw-light);
  border-radius: var(--uw-radius-lg);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s var(--uw-ease);
}
.service-row .sr-num {
  font-family: var(--uw-font-title);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--uw-muted);
}
.service-row .sr-num i,
.service-row .sr-num svg {
  font-size: 1.4rem;
  color: var(--uw-primary);
}
.service-row .sr-title {
  font-family: var(--uw-font-title);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  transition:
    transform 0.45s var(--uw-ease),
    color 0.3s;
}
.service-row .sr-desc {
  font-size: 0.95rem;
  color: var(--uw-muted);
}
.service-row .sr-arrow {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--uw-border);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315222B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")
    center/20px no-repeat;
  transition:
    transform 0.45s var(--uw-ease),
    background-color 0.3s,
    border-color 0.3s;
}
.service-row .sr-img {
  position: absolute;
  right: 120px;
  top: 50%;
  width: 170px;
  height: 210px;
  object-fit: cover;
  border-radius: var(--uw-radius) var(--uw-radius) var(--uw-radius-u)
    var(--uw-radius-u);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-40%) rotate(8deg) scale(0.7);
  transition:
    opacity 0.35s,
    transform 0.5s var(--uw-ease);
  z-index: 2;
  box-shadow: var(--uw-offset);
}
.service-row:hover {
  color: var(--uw-dark);
  padding-left: 28px;
  padding-right: 28px;
}
.service-row:hover::before {
  transform: none;
}
.service-row:hover .sr-title {
  color: var(--uw-primary);
  transform: translateX(6px);
}
.service-row:hover .sr-num {
  color: var(--uw-primary);
}
.service-row:hover .sr-arrow {
  transform: rotate(-45deg);
  background-color: var(--uw-primary);
  border-color: var(--uw-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.service-row:hover .sr-img {
  opacity: 1;
  transform: translateY(-50%) rotate(-4deg) scale(1);
}
.bg-brand .service-rows,
.bg-brand .service-row {
  border-color: var(--uw-border-dark);
}
.bg-brand .service-row {
  color: #fff;
}
.bg-brand .service-row::before {
  background: var(--uw-dark-2);
}
.bg-brand .service-row .sr-desc,
.bg-brand .service-row .sr-num {
  color: var(--uw-muted-dark);
}
.bg-brand .service-row .sr-num i,
.bg-brand .service-row .sr-num svg {
  color: var(--uw-accent);
}
.bg-brand .service-row:hover .sr-title,
.bg-brand .service-row:hover .sr-num {
  color: var(--uw-accent);
}
.bg-brand .service-row .sr-arrow {
  border-color: var(--uw-border-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

.feature-card {
  background: #fff;
  border: 1px solid var(--uw-border);
  border-radius: var(--uw-radius-lg);
  padding: 30px;
  height: 100%;
  transition:
    border-color 0.3s,
    transform 0.3s var(--uw-ease),
    box-shadow 0.3s var(--uw-ease);
}
.feature-card:hover {
  border-color: var(--uw-primary);
  transform: translate(3px, -3px);
  box-shadow: var(--uw-offset);
}
.bg-soft .feature-card {
  border-color: transparent;
}
.feature-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
.feature-card p {
  font-size: 0.95rem;
  color: var(--uw-muted);
  margin: 0;
}
.feature-card .ico-box {
  background: var(--uw-light);
}
.feature-card:hover .ico-box {
  transform: rotate(-6deg);
  background: var(--uw-grad);
  color: #fff;
}
.bg-brand .feature-card {
  background: var(--uw-dark-2);
  border-color: var(--uw-border-dark);
}
.bg-brand .feature-card p {
  color: var(--uw-on-dark);
}
.bg-brand .feature-card .ico-box {
  background: var(--uw-dark-3);
  color: var(--uw-accent);
}

.stack {
  display: grid;
  gap: 28px;
}
.stack-item {
  position: sticky;
  top: calc(var(--uw-header-h) + 28px + var(--i, 0) * 18px);
  background: #fff;
  border: 1px solid var(--uw-border);
  border-radius: var(--uw-radius-xl);
  padding: 44px;
  box-shadow: 0 -10px 40px rgba(21, 34, 43, 0.06);
  transform-origin: top center;
}
.bg-soft .stack-item {
  border-color: transparent;
}
.stack-item .stack-num {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 60px;
  border-radius: 0.7rem 0.7rem var(--uw-radius-u) var(--uw-radius-u);
  background: var(--uw-grad);
  color: #fff;
  font-family: var(--uw-font-title);
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
}
.stack-item h3 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}
.stack-item p {
  color: var(--uw-muted);
}
.bg-brand .stack-item {
  background: var(--uw-dark-2);
  border-color: var(--uw-border-dark);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25);
}
.bg-brand .stack-item p {
  color: var(--uw-on-dark);
}

.figure-box {
  position: relative;
  background: #fff;
  border-radius: var(--uw-radius-lg);
  padding: 30px;
  height: 100%;
  overflow: hidden;
}
.bg-white .figure-box,
.section:not(.bg-soft):not(.bg-brand) .figure-box {
  background: var(--uw-light);
}
.figure-box .num {
  font-family: var(--uw-font-title);
  font-weight: 800;
  font-size: clamp(2.6rem, 4.4vw, 3.8rem);
  letter-spacing: -0.04em;
  color: var(--uw-primary);
  line-height: 1;
}
.figure-box .num small {
  font-size: 0.5em;
  font-weight: 700;
  margin-left: 0.1em;
}
.figure-box p {
  margin: 0.6rem 0 0;
  color: var(--uw-muted);
  font-size: 0.95rem;
  font-weight: 600;
}
.figure-box::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 22px;
  width: 16px;
  height: 19px;
  border: 4px solid var(--uw-accent);
  border-top: 0;
  border-radius: 0 0 var(--uw-radius-u) var(--uw-radius-u);
}
.bg-brand .figure-box {
  background: var(--uw-dark-2);
  border: 1px solid var(--uw-border-dark);
}
.bg-brand .figure-box .num {
  color: var(--uw-accent);
}
.bg-brand .figure-box p {
  color: var(--uw-on-dark);
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--uw-border);
}
.stat-row > div {
  padding: 28px 24px 0 0;
}
.stat-row > div + div {
  padding-left: 24px;
  border-left: 1px solid var(--uw-border);
}
.stat-row .num {
  font-family: var(--uw-font-title);
  font-weight: 800;
  font-size: clamp(2.4rem, 4vw, 3.5rem);
  letter-spacing: -0.04em;
  color: var(--uw-primary);
  line-height: 1;
}
.stat-row .num small {
  font-size: 0.5em;
  font-weight: 700;
  margin-left: 0.1em;
}
.stat-row p {
  margin: 0.5rem 0 0;
  color: var(--uw-muted);
  font-weight: 600;
  font-size: 0.95rem;
}
.bg-brand .stat-row,
.bg-brand .stat-row > div + div {
  border-color: var(--uw-border-dark);
}
.bg-brand .stat-row .num {
  color: var(--uw-accent);
}
.bg-brand .stat-row p {
  color: var(--uw-on-dark);
}
.count-up {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
.zone-box {
  position: relative;
  overflow: hidden;
  background: var(--uw-dark);
  color: #fff;
  border-radius: var(--uw-radius-lg);
  padding: 36px;
  height: 100%;
}
.zone-box h3 {
  color: #fff;
}
.zone-box p {
  color: var(--uw-on-dark);
}
.zone-box .uw-glyph {
  position: absolute;
  right: -30px;
  bottom: -40px;
}
.tag {
  display: inline-block;
  background: rgba(30, 180, 238, 0.15);
  color: var(--uw-accent);
  border-radius: 2rem;
  padding: 0.3rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0.35rem 0.5rem 0;
  text-decoration: none;
  transition:
    background-color 0.2s,
    color 0.2s;
}
.tag:hover {
  background: var(--uw-accent);
  color: var(--uw-dark);
}

.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--uw-dark);
  background: var(--uw-light);
  border-radius: var(--uw-radius-lg);
  overflow: hidden;
  height: 100%;
  transition:
    transform 0.45s var(--uw-ease),
    box-shadow 0.45s var(--uw-ease);
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='%230B6FCB'/%3E%3Cpath d='M25 39l14-14M27 25h12v12' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      32 32,
    pointer;
}
.bg-soft .project-card {
  background: #fff;
}
.project-card .thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--uw-ease);
}
.project-card .thumb::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--uw-primary)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E")
    center/20px no-repeat;
  transform: scale(0) rotate(-45deg);
  transition: transform 0.4s var(--uw-ease);
}
.project-card:hover {
  color: var(--uw-dark);
  transform: translate(4px, -4px);
  box-shadow: -8px 8px 0 0 var(--uw-accent);
}
.project-card:hover .thumb::after {
  transform: scale(1) rotate(0);
}
.project-card:hover img {
  transform: scale(1.06);
}
.project-card .body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.project-card h3 {
  font-size: 1.3rem;
  margin: 0.6rem 0 0.25rem;
  transition: color 0.2s;
}
.project-card:hover h3 {
  color: var(--uw-primary);
}
.project-card p {
  font-size: 0.92rem;
  color: var(--uw-muted);
  margin: 0;
}
.bg-brand .project-card {
  background: var(--uw-dark-2);
  color: #fff;
  border: 1px solid var(--uw-border-dark);
}
.bg-brand .project-card h3 {
  color: #fff;
}
.bg-brand .project-card:hover h3 {
  color: var(--uw-accent);
}
.bg-brand .project-card p {
  color: var(--uw-on-dark);
}
.project-card.is-tall .thumb {
  aspect-ratio: 4/5;
}
.project-card.is-u .thumb {
  margin: 12px 12px 0;
  border-radius: var(--uw-radius) var(--uw-radius) var(--uw-radius-u)
    var(--uw-radius-u);
  aspect-ratio: 1/1;
}

.h-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, calc((100% - 48px) / 3));
  gap: 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 12px 4px 28px 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--uw-accent) transparent;
}
.h-scroll > * {
  scroll-snap-align: start;
}
.h-scroll::-webkit-scrollbar {
  height: 6px;
}
.h-scroll::-webkit-scrollbar-thumb {
  background: var(--uw-accent);
  border-radius: 6px;
}
.h-scroll-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--uw-muted);
}
.h-scroll-hint i,
.h-scroll-hint svg {
  color: var(--uw-primary);
}
.bg-brand .h-scroll-hint {
  color: var(--uw-muted-dark);
}
.bg-brand .h-scroll-hint i,
.bg-brand .h-scroll-hint svg {
  color: var(--uw-accent);
}

.h-pin {
  position: relative;
}
.h-pin-sticky {
  padding: 112px 0;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--uw-accent) transparent;
}
.h-pin-track {
  display: flex;
  gap: 24px;
  width: max-content;
  padding: 14px var(--uw-gutter-x) 8px;
}
.h-pin-track > * {
  width: clamp(300px, 32vw, 440px);
  flex-shrink: 0;
  height: auto;
}
.h-pin-progress {
  display: block;
  height: 4px;
  border-radius: 4px;
  background: var(--uw-border-dark);
  margin: 32px var(--uw-gutter-x) 0;
  overflow: hidden;
}
.h-pin-progress::before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  background: var(--uw-grad-x);
  transform-origin: left;
  transform: scaleX(0.25);
}

.team-card {
  background: var(--uw-light);
  border-radius: var(--uw-radius-lg);
  overflow: hidden;
  height: 100%;
}
.bg-soft .team-card {
  background: #fff;
}
.team-card .photo {
  overflow: hidden;
  border-radius: 0 0 var(--uw-radius-u) var(--uw-radius-u);
  margin: 0 12px; 
}
.team-card img {
  aspect-ratio: 1/1;
  width: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--uw-ease);
}
.team-card:hover img {
  transform: scale(1.05);
}
.team-card .body {
  padding: 18px 22px 22px;
}
.team-card h3 {
  font-size: 1.15rem;
  margin: 0 0 0.15rem;
}
.team-card p {
  font-size: 0.9rem;
  color: var(--uw-muted);
  margin: 0;
}
.team-card .badge-soft {
  background: #fff;
}
.bg-soft .team-card .badge-soft {
  background: var(--uw-light);
}

.step-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--uw-border);
  border-radius: var(--uw-radius-lg);
  padding: 30px;
  height: 100%;
}
.bg-soft .step-card {
  border-color: transparent;
}
.step-card .step-num {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 54px;
  border-radius: 0.6rem 0.6rem var(--uw-radius-u) var(--uw-radius-u);
  background: var(--uw-grad);
  color: #fff;
  font-family: var(--uw-font-title);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 1.1rem;
}
.step-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
.step-card p {
  font-size: 0.95rem;
  color: var(--uw-muted);
  margin: 0;
}
.bg-brand .step-card {
  background: var(--uw-dark-2);
  border-color: var(--uw-border-dark);
}
.bg-brand .step-card p {
  color: var(--uw-on-dark);
}
.step-list {
  list-style: none;
  padding: 0 0 0 40px;
  margin: 0;
  position: relative;
}
.step-list::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 4px;
  background: var(--uw-grad-up);
}
.step-list li {
  position: relative;
  padding-bottom: 2rem;
}
.step-list li:last-child {
  padding-bottom: 0;
}
.step-list li::before {
  content: "";
  position: absolute;
  left: -40px;
  top: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--uw-primary);
}
.bg-brand .step-list li::before {
  background: var(--uw-dark);
  border-color: var(--uw-accent);
}
.step-list .year {
  display: block;
  font-family: var(--uw-font-title);
  font-weight: 800;
  color: var(--uw-primary);
  font-size: 0.95rem;
  margin-bottom: 0.15rem;
}
.bg-brand .step-list .year {
  color: var(--uw-accent);
}
.step-list h3 {
  font-size: 1.25rem;
  margin-bottom: 0.35rem;
}
.step-list p {
  color: var(--uw-muted);
  margin: 0;
}
.bg-brand .step-list p {
  color: var(--uw-on-dark);
}

.project-meta {
  background: var(--uw-light);
  border-radius: var(--uw-radius-lg);
  padding: 28px;
}
.bg-soft .project-meta {
  background: #fff;
}
.project-meta dl {
  margin: 0;
}
.project-meta dt {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--uw-muted);
  margin-bottom: 0.2rem;
}
.project-meta dd {
  font-weight: 600;
  margin-bottom: 1.1rem;
}
.project-meta dd:last-child {
  margin-bottom: 0;
}
.img-rounded {
  width: 100%;
  border-radius: var(--uw-radius-lg);
  object-fit: cover;
}
.img-frame {
  background: var(--uw-light);
  border-radius: var(--uw-radius-lg);
  padding: 24px;
}
.img-frame img {
  width: 100%;
  border-radius: var(--uw-radius);
  box-shadow: var(--uw-shadow);
}
.zoom-scroll {
  overflow: hidden;
  border-radius: var(--uw-radius-lg);
}
.zoom-scroll img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.result-box {
  background: #fff;
  border-left: 5px solid var(--uw-accent);
  border-radius: 0 var(--uw-radius) var(--uw-radius) 0;
  padding: 22px 26px;
}
.section:not(.bg-soft):not(.bg-brand) .result-box {
  background: var(--uw-light);
}
.result-box .num {
  font-family: var(--uw-font-title);
  font-weight: 800;
  font-size: 2.4rem;
  color: var(--uw-primary);
  line-height: 1;
}
.result-box p {
  margin: 0.4rem 0 0;
  color: var(--uw-muted);
  font-weight: 600;
  font-size: 0.95rem;
}

/* Réalisation type : navigateur de prévisualisation (capture qui défile ou iframe) */
.browser-frame {
  --screen-h: 540px;
  position: relative;
  background: #fff;
  border: 1px solid var(--uw-border);
  border-radius: var(--uw-radius-lg);
  box-shadow: var(--uw-shadow-lg);
  overflow: hidden;
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 12px 16px;
  background: var(--uw-light);
  border-bottom: 1px solid var(--uw-border);
}
.browser-dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.browser-dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #c9d3e0;
}
.browser-dots span:first-child {
  background: var(--uw-accent);
}
.browser-dots span:nth-child(2) {
  background: var(--uw-primary);
}
.browser-url {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  background: #fff;
  border-radius: 2rem;
  padding: 0.35rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--uw-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.browser-url i,
.browser-url svg {
  color: var(--uw-primary);
  font-size: 0.8em;
}
.browser-screen {
  position: relative;
  height: var(--screen-h);
  overflow: hidden;
  background: var(--uw-light);
}
.browser-screen img {
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(0);
  transition: transform 7s cubic-bezier(0.45, 0.05, 0.4, 1);
}
.browser-frame:hover .browser-screen img {
  transform: translateY(calc(-100% + var(--screen-h)));
}
.browser-screen iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Visuel non défilant (photo de l'écran, pas capture pleine page) : il remplit le cadre */
.browser-screen img.is-fit {
  height: 100%;
  object-fit: cover;
}
.browser-frame:hover .browser-screen img.is-fit {
  transform: none;
}
.browser-hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--uw-dark);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 2rem;
  padding: 0.45rem 1rem;
  box-shadow: var(--uw-shadow);
  transition: opacity 0.3s;
  pointer-events: none;
}
.browser-hint::before {
  content: "";
  width: 9px;
  height: 11px;
  border: 2.5px solid var(--uw-accent);
  border-top: 0;
  border-radius: 0 0 var(--uw-radius-u) var(--uw-radius-u);
}
.browser-frame:hover .browser-hint {
  opacity: 0;
}
.bg-brand .browser-frame {
  border-color: var(--uw-border-dark);
  background: var(--uw-dark-2);
}
.bg-brand .browser-bar {
  background: var(--uw-dark-3);
  border-color: var(--uw-border-dark);
}
.bg-brand .browser-url {
  background: var(--uw-dark-2);
  color: var(--uw-muted-dark);
}
.device-mobile {
  position: absolute;
  right: -28px;
  bottom: -36px;
  width: 150px;
  border: 6px solid var(--uw-dark);
  border-radius: 1.6rem;
  overflow: hidden;
  background: var(--uw-dark);
  box-shadow: var(--uw-shadow-lg);
  z-index: 3;
}
.device-mobile img {
  width: 100%;
  aspect-ratio: 9/19;
  object-fit: cover;
  object-position: top;
  border-radius: 1.1rem;
  display: block;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.gallery-item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--uw-radius-lg);
  background: var(--uw-light);
}
.gallery-item:first-child {
  grid-column: 1/-1;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--uw-ease);
}
.gallery-item:first-child img {
  aspect-ratio: 16/9;
}
.gallery-item:hover img {
  transform: scale(1.05);
}
.gallery-item figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: rgba(21, 34, 43, 0.85);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 2rem;
  padding: 0.3rem 0.85rem;
}
.project-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.project-nav a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 26px 28px;
  border-radius: var(--uw-radius-lg);
  background: var(--uw-light);
  color: var(--uw-dark);
  text-decoration: none;
  transition:
    background-color 0.3s,
    color 0.3s,
    transform 0.3s var(--uw-ease);
}
.project-nav a span {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--uw-muted);
}
.project-nav a strong {
  font-family: var(--uw-font-title);
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}
.project-nav a.is-next {
  text-align: right;
}
.project-nav a:hover {
  background: var(--uw-dark);
  color: #fff;
  transform: translateY(-3px);
}
.project-nav a:hover span {
  color: var(--uw-accent);
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2.5rem;
}
.filter-chips a {
  display: inline-block;
  padding: 0.55rem 1.15rem;
  border-radius: 2rem;
  border: 1px solid var(--uw-border);
  background: #fff;
  color: var(--uw-dark);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  transition: 0.2s;
}
.filter-chips a:hover {
  border-color: var(--uw-accent);
  color: var(--uw-primary);
}
.filter-chips a.is-active,
.filter-chips a[aria-current] {
  background: var(--uw-dark);
  border-color: var(--uw-dark);
  color: #fff;
}
.pagination-uw {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 3rem 0 0;
}
.pagination-uw a {
  display: grid;
  place-items: center;
  min-width: 46px;
  height: 46px;
  border-radius: var(--uw-radius-sm);
  border: 1px solid var(--uw-border);
  color: var(--uw-dark);
  font-weight: 700;
  text-decoration: none;
}
.pagination-uw a:hover {
  border-color: var(--uw-accent);
  color: var(--uw-primary);
}
.pagination-uw a[aria-current] {
  background: var(--uw-primary);
  border-color: var(--uw-primary);
  color: #fff;
}

.logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.5rem 3.5rem;
}
.logo-strip img {
  height: 40px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.6;
  transition: 0.3s;
}
.logo-strip img:hover {
  filter: none;
  opacity: 1;
}
.bg-brand .logo-strip img {
  filter: grayscale(1) brightness(3);
  opacity: 0.5;
}

/* ---------- 13. Blog : mosaïque d'accueil, cartes, liste ---------- */
.post-date {
  display: inline-grid;
  place-items: center;
  width: 58px;
  padding: 0.55rem 0 0.9rem;
  border-radius: 0.8rem 0.8rem var(--uw-radius-u) var(--uw-radius-u);
  background: #fff;
  color: var(--uw-dark);
  font-family: var(--uw-font-title);
  line-height: 1;
  text-align: center;
  box-shadow: var(--uw-shadow);
}
.post-date strong {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.post-date span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--uw-primary);
  margin-top: 0.2rem;
}
.post-cat {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--uw-primary);
}
.post-cat::before {
  content: "";
  width: 9px;
  height: 11px;
  border: 2.5px solid var(--uw-accent);
  border-top: 0;
  border-radius: 0 0 var(--uw-radius-u) var(--uw-radius-u);
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--uw-muted);
}
.post-meta i,
.post-meta svg {
  color: var(--uw-primary);
  margin-right: 0.3rem;
}
.bg-brand .post-meta,
.page-intro .post-meta {
  color: var(--uw-muted-dark);
}
.bg-brand .post-meta i,
.page-intro .post-meta i,
.bg-brand .post-meta svg,
.page-intro .post-meta svg {
  color: var(--uw-accent);
}

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: var(--uw-dark);
  background: #fff;
  border: 1px solid var(--uw-border);
  border-radius: var(--uw-radius-lg);
  overflow: hidden;
  transition:
    transform 0.4s var(--uw-ease),
    box-shadow 0.4s var(--uw-ease),
    border-color 0.3s;
}
.bg-soft .post-card {
  border-color: transparent;
}
.post-card .thumb {
  position: relative;
  overflow: hidden;
  margin: 12px 12px 0;
  border-radius: var(--uw-radius) var(--uw-radius) var(--uw-radius-u)
    var(--uw-radius-u);
  aspect-ratio: 16/11;
}
.post-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--uw-ease);
}
.post-card .thumb .post-date {
  position: absolute;
  left: 14px;
  top: 14px;
}
.post-card .body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 20px 24px 26px;
}
.post-card h3 {
  font-size: 1.25rem;
  line-height: 1.25;
  margin: 0.6rem 0 0.5rem;
  transition: color 0.2s;
}
.post-card p {
  font-size: 0.93rem;
  color: var(--uw-muted);
  margin-bottom: 1.1rem;
}
.post-card .post-meta {
  margin-top: auto;
}
.post-card:hover {
  color: var(--uw-dark);
  transform: translate(4px, -4px);
  box-shadow: -8px 8px 0 0 var(--uw-accent);
  border-color: var(--uw-accent);
}
.post-card:hover img {
  transform: scale(1.06);
}
.post-card:hover h3 {
  color: var(--uw-primary);
}

.post-feature {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 580px;
  height: 100%;
  padding: 40px;
  border-radius: var(--uw-radius-xl);
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: var(--uw-dark);
}
.post-feature > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--uw-ease);
}
.post-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(21, 34, 43, 0.97) 10%,
    rgba(21, 34, 43, 0.8) 52%,
    rgba(21, 34, 43, 0.15) 100%
  );
}
.post-feature::after {
  content: "";
  position: absolute;
  right: -50px;
  top: -70px;
  z-index: -1;
  width: 200px;
  height: 260px;
  border: 44px solid var(--uw-accent);
  border-top: 0;
  border-radius: 0 0 var(--uw-radius-u) var(--uw-radius-u);
  opacity: 0.35;
  transition: transform 0.7s var(--uw-ease);
}
.post-feature .post-date {
  position: absolute;
  left: 32px;
  top: 32px;
}
.post-feature .post-cat {
  color: var(--uw-accent);
}
.post-feature .post-cat::before {
  border-color: #fff;
}
.post-feature h3 {
  color: #fff;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  line-height: 1.1;
  margin: 0.75rem 0 0.75rem;
}
.post-feature p {
  color: var(--uw-on-dark);
  max-width: 520px;
  margin-bottom: 1.25rem;
}
.post-feature .post-meta {
  color: var(--uw-muted-dark);
}
.post-feature .post-meta i,
.post-feature .post-meta svg {
  color: var(--uw-accent);
}
.post-feature .read {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
  font-weight: 700;
  color: #fff;
}
.post-feature .read::after {
  content: "";
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--uw-primary)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")
    center/15px no-repeat;
  transition: transform 0.3s var(--uw-ease);
}
.post-feature:hover {
  color: #fff;
}
.post-feature:hover > img {
  transform: scale(1.05);
}
.post-feature:hover::after {
  transform: translateY(34px);
}
.post-feature:hover .read {
  color: var(--uw-accent);
}
.post-feature:hover .read::after {
  transform: rotate(-45deg);
}

/* Mosaïque d'accueil : 1 article à la une + liste numérotée */
.blog-mosaic {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.post-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  counter-reset: post;
}
.post-mini {
  position: relative;
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 20px;
  align-items: center;
  padding: 16px 20px 16px 16px;
  border-radius: var(--uw-radius-lg);
  background: var(--uw-light);
  color: var(--uw-dark);
  text-decoration: none;
  flex-grow: 1;
  transition:
    background-color 0.35s,
    color 0.35s,
    transform 0.35s var(--uw-ease);
}
.bg-soft .post-mini {
  background: #fff;
}
.bg-brand .post-mini {
  background: var(--uw-dark-2);
  color: #fff;
  border: 1px solid var(--uw-border-dark);
}
.post-mini .thumb {
  overflow: hidden;
  border-radius: var(--uw-radius-sm) var(--uw-radius-sm) var(--uw-radius-u)
    var(--uw-radius-u);
  aspect-ratio: 1/1.1;
}
.post-mini .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--uw-ease);
}
.post-mini h3 {
  font-size: 1.12rem;
  line-height: 1.25;
  margin: 0.4rem 0 0.45rem;
  transition: color 0.2s;
}
.post-mini .post-meta {
  font-size: 0.8rem;
}
.post-mini::after {
  counter-increment: post;
  content: "0" counter(post);
  position: absolute;
  right: 18px;
  top: 14px;
  font-family: var(--uw-font-title);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px #c3cdd9;
  transition: -webkit-text-stroke-color 0.3s;
}
.post-mini:hover {
  background: var(--uw-dark);
  color: #fff;
  transform: translateX(6px);
}
.post-mini:hover h3 {
  color: #fff;
}
.post-mini:hover .post-cat {
  color: var(--uw-accent);
}
.post-mini:hover .post-meta {
  color: var(--uw-muted-dark);
}
.post-mini:hover::after {
  -webkit-text-stroke-color: var(--uw-accent);
}
.post-mini:hover img {
  transform: scale(1.08);
}

/* Liste d'articles en lignes (page blog) */
.post-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  align-items: center;
  padding: 28px 0;
  border-top: 1px solid var(--uw-border);
  color: var(--uw-dark);
  text-decoration: none;
}
.post-row .thumb {
  overflow: hidden;
  border-radius: var(--uw-radius-lg);
  aspect-ratio: 4/3;
}
.post-row .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--uw-ease);
}
.post-row h3 {
  font-size: 1.6rem;
  margin: 0.5rem 0;
  transition: color 0.2s;
}
.post-row p {
  color: var(--uw-muted);
  margin-bottom: 0.9rem;
}
.post-row:hover {
  color: var(--uw-dark);
}
.post-row:hover h3 {
  color: var(--uw-primary);
}
.post-row:hover img {
  transform: scale(1.05);
}

/* Article type */
.article-cover {
  position: relative;
  margin-top: -72px;
  z-index: 3;
}
.article-cover img {
  width: 100%;
  aspect-ratio: 21/9;
  object-fit: cover;
  border-radius: var(--uw-radius-xl);
  box-shadow: var(--uw-shadow-lg);
}
.article-body {
  max-width: 760px;
}
.article-lead {
  font-size: 1.3rem;
  line-height: 1.6;
  font-weight: 500;
  color: var(--uw-dark);
  padding-bottom: 1.75rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--uw-border);
}
.toc {
  background: var(--uw-light);
  border-radius: var(--uw-radius-lg);
  padding: 26px;
}
.toc-title {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--uw-muted);
  margin-bottom: 0.9rem;
}
.toc ol {
  list-style: none;
  counter-reset: toc;
  padding: 0;
  margin: 0;
}
.toc li {
  counter-increment: toc;
  margin-bottom: 0.35rem;
}
.toc a {
  display: flex;
  gap: 0.7rem;
  padding: 0.4rem 0;
  color: var(--uw-dark);
  font-weight: 600;
  font-size: 0.93rem;
  text-decoration: none;
  line-height: 1.4;
  transition:
    color 0.2s,
    transform 0.3s var(--uw-ease);
}
.toc a::before {
  content: "0" counter(toc);
  font-family: var(--uw-font-title);
  font-weight: 700;
  color: var(--uw-primary);
  min-width: 1.5rem;
}
.toc a:hover {
  color: var(--uw-primary);
  transform: translateX(4px);
}
.callout {
  position: relative;
  background: var(--uw-light);
  border-radius: var(--uw-radius-lg);
  padding: 26px 28px 26px 74px;
  margin: 2rem 0;
}
.callout > i,
.callout > svg {
  position: absolute;
  left: 26px;
  top: 28px;
  font-size: 1.35rem;
  color: var(--uw-primary);
}
.callout p:last-child {
  margin: 0;
}
.callout.is-dark {
  background: var(--uw-dark);
  color: #fff;
}
.callout.is-dark p {
  color: var(--uw-on-dark);
}
.callout.is-dark > i,
.callout.is-dark > svg {
  color: var(--uw-accent);
}
.author-box {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  padding: 26px;
  border-radius: var(--uw-radius-lg);
  border: 1px solid var(--uw-border);
}
.author-box img {
  width: 72px;
  height: 80px;
  object-fit: cover;
  border-radius: 0.8rem 0.8rem var(--uw-radius-u) var(--uw-radius-u);
  flex-shrink: 0;
}
.author-box strong {
  display: block;
  font-family: var(--uw-font-title);
  font-size: 1.15rem;
}
.author-box p {
  margin: 0.2rem 0 0;
  font-size: 0.92rem;
  color: var(--uw-muted);
}
.share-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.share-links a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 0.75rem;
  background: var(--uw-light);
  color: var(--uw-primary);
  text-decoration: none;
  transition: 0.25s;
}
.share-links a:hover {
  background: var(--uw-primary);
  color: #fff;
  transform: translate(2px, -2px);
  box-shadow: -4px 4px 0 0 var(--uw-accent);
}

/* ---------- 14. Expertise type : navigation latérale et encart collant ---------- */
.side-nav {
  background: var(--uw-light);
  border-radius: var(--uw-radius-lg);
  padding: 14px;
}
.side-nav-title {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--uw-muted);
  padding: 10px 14px 8px;
  margin: 0;
}
.side-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.side-nav a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 14px;
  border-radius: var(--uw-radius-sm);
  color: var(--uw-dark);
  font-weight: 700;
  font-size: 0.93rem;
  text-decoration: none;
  transition:
    background-color 0.2s,
    color 0.2s;
}
.side-nav a i,
.side-nav a svg {
  width: 1.2em;
  color: var(--uw-primary);
  text-align: center;
}
.side-nav a:hover {
  background: #fff;
  color: var(--uw-primary);
}
.side-nav a[aria-current],
.side-nav a.is-active {
  background: var(--uw-dark);
  color: #fff;
}
.side-nav a[aria-current] i,
.side-nav a.is-active i,
.side-nav a[aria-current] svg,
.side-nav a.is-active svg {
  color: var(--uw-accent);
}
.aside-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--uw-dark);
  color: #fff;
  border-radius: var(--uw-radius-lg);
  padding: 32px;
}
/* Forme « quart » du design system calée dans le coin haut-droit (l'ancien U coupé en bas chevauchait le texte) */
.aside-cta::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  width: 132px;
  height: 132px;
  border-radius: 0 0 0 100%;
  background: var(--uw-accent);
  opacity: 0.14;
}
.aside-cta h3 {
  color: #fff;
  font-size: 1.4rem;
}
.aside-cta p {
  color: var(--uw-on-dark);
  font-size: 0.95rem;
}
.aside-cta .btn {
  width: 100%;
}
.aside-cta .cta-phone {
  font-size: 1.25rem;
  margin-top: 1rem;
}
.deliverables {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.deliverables li {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 16px 18px;
  border-radius: var(--uw-radius);
  background: var(--uw-light);
  font-weight: 700;
  font-size: 0.95rem;
}
.bg-soft .deliverables li {
  background: #fff;
}
.deliverables li i,
.deliverables li svg {
  color: var(--uw-primary);
  font-size: 1.15rem;
  width: 1.3em;
  text-align: center;
}
.offer-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--uw-border);
  border-radius: var(--uw-radius-xl);
  padding: 36px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.bg-soft .offer-card {
  border-color: transparent;
}
.offer-card .price {
  font-family: var(--uw-font-title);
  font-weight: 800;
  font-size: 2.6rem;
  letter-spacing: -0.04em;
  color: var(--uw-dark);
  line-height: 1;
  margin: 0.75rem 0 1rem;
}
.offer-card .price small {
  font-size: 0.4em;
  font-weight: 600;
  color: var(--uw-muted);
  letter-spacing: 0;
}
.offer-card .check-list {
  margin-bottom: 1.75rem;
}
.offer-card .btn {
  margin-top: auto;
}
.offer-card.is-featured {
  background: var(--uw-dark);
  color: #fff;
  border-color: var(--uw-dark);
  box-shadow: var(--uw-offset);
}
.offer-card.is-featured h3,
.offer-card.is-featured .price {
  color: #fff;
}
.offer-card.is-featured p {
  color: var(--uw-on-dark);
}
.offer-card.is-featured .check-list li {
  color: #fff;
}

/* ---------- 15. Contact et étude gratuite ---------- */
.choice-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.choice-chips input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.choice-chips label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: 2rem;
  border: 1px solid var(--uw-border);
  background: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition: 0.2s;
}
.choice-chips label i,
.choice-chips label svg {
  color: var(--uw-primary);
}
.choice-chips label:hover {
  border-color: var(--uw-accent);
  color: var(--uw-primary);
}
.choice-chips input:checked + label {
  background: var(--uw-dark);
  border-color: var(--uw-dark);
  color: #fff;
}
.choice-chips input:checked + label i,
.choice-chips input:checked + label svg {
  color: var(--uw-accent);
}
.choice-chips input:focus-visible + label {
  outline: 3px solid rgba(30, 180, 238, 0.6);
  outline-offset: 2px;
}
.contact-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 24px;
  border-radius: var(--uw-radius-lg);
  background: var(--uw-light);
  color: var(--uw-dark);
  text-decoration: none;
  height: 100%;
  transition:
    transform 0.3s var(--uw-ease),
    box-shadow 0.3s var(--uw-ease);
}
.bg-soft .contact-card {
  background: #fff;
}
.contact-card .ico-box {
  margin: 0;
  background: #fff;
}
.bg-soft .contact-card .ico-box {
  background: var(--uw-light);
}
.contact-card strong {
  display: block;
  font-family: var(--uw-font-title);
  font-size: 1.15rem;
  margin-bottom: 0.15rem;
}
.contact-card span {
  font-size: 0.92rem;
  color: var(--uw-muted);
}
a.contact-card:hover {
  color: var(--uw-dark);
  transform: translate(3px, -3px);
  box-shadow: var(--uw-offset);
}
.bg-brand .contact-card {
  background: var(--uw-dark-2);
  color: #fff;
  border: 1px solid var(--uw-border-dark);
}
.bg-brand .contact-card span {
  color: var(--uw-on-dark);
}
.map-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--uw-radius-lg) var(--uw-radius-lg) var(--uw-radius-u)
    var(--uw-radius-u);
  aspect-ratio: 4/3;
  background: var(--uw-light);
}
.map-frame iframe,
.map-frame img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  filter: grayscale(0.3);
}
.hours-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px dashed var(--uw-border);
  font-weight: 600;
  font-size: 0.95rem;
}
.hours-list li span:last-child {
  color: var(--uw-muted);
}
.bg-brand .hours-list li {
  border-color: var(--uw-border-dark);
}
.bg-brand .hours-list li span:last-child {
  color: var(--uw-on-dark);
}
.form-steps {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  counter-reset: fs;
}
.form-steps li {
  flex: 1;
  counter-increment: fs;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--uw-muted);
  padding-top: 0.7rem;
  border-top: 4px solid var(--uw-border);
}
.form-steps li::before {
  content: "0" counter(fs) " ";
  color: var(--uw-primary);
}
.form-steps li.is-done,
.form-steps li[aria-current] {
  border-top-color: var(--uw-primary);
  color: var(--uw-dark);
}

/* ---------- 16. Texte + image, éditorial ---------- */
.acf-text_image img,
.text-image-img {
  width: 100%;
  border-radius: var(--uw-radius-lg);
  aspect-ratio: 4/3;
  object-fit: cover;
}
.acf-text_image .u-frame img {
  aspect-ratio: auto;
  border-radius: 0;
}
.prose h2 {
  font-size: 1.9rem;
  margin: 2.5rem 0 1rem;
  scroll-margin-top: calc(var(--uw-header-h) + 24px);
}
.prose h3 {
  font-size: 1.4rem;
  margin: 1.75rem 0 0.75rem;
}
.prose p,
.prose li {
  color: #2c3a45;
}
.prose ul {
  padding-left: 0;
  list-style: none;
}
.prose ul li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.5rem;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 11px;
  height: 13px;
  border: 3px solid var(--uw-accent);
  border-top: 0;
  border-radius: 0 0 var(--uw-radius-u) var(--uw-radius-u);
}
.prose ol {
  padding-left: 1.3rem;
}
.prose ol li {
  margin-bottom: 0.5rem;
}
.prose ol li::marker {
  font-family: var(--uw-font-title);
  font-weight: 700;
  color: var(--uw-primary);
}
.prose img {
  width: 100%;
  border-radius: var(--uw-radius-lg);
  margin: 1.25rem 0;
}
.prose a {
  font-weight: 600;
}
.prose blockquote {
  margin: 2rem 0;
}
.bg-brand .prose p,
.bg-brand .prose li {
  color: var(--uw-on-dark);
}
.big-quote-text {
  font-family: var(--uw-font-title);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.25;
  letter-spacing: -0.025em;
}
.scroll-fill {
  color: var(--uw-dark);
}
.bg-brand .scroll-fill {
  color: #fff;
}

/* ---------- 17. Listes de marque ---------- */
.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.check-list li {
  position: relative;
  padding-left: 2.2rem;
  margin-bottom: 0.8rem;
  font-weight: 600;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 22px;
  height: 22px;
  border-radius: 0.4rem 0.4rem var(--uw-radius-u) var(--uw-radius-u);
  background: var(--uw-grad);
}
.check-list li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center/14px no-repeat;
}
.bg-brand .check-list li {
  color: #fff;
}
.dot-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dot-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.5rem;
}
.dot-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 11px;
  height: 13px;
  border: 3px solid var(--uw-accent);
  border-top: 0;
  border-radius: 0 0 var(--uw-radius-u) var(--uw-radius-u);
}
.icon-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.icon-list li {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  margin-bottom: 0.75rem;
  font-weight: 600;
}
.icon-list li > i,
.icon-list li > svg {
  flex-shrink: 0;
  width: 1.4em;
  margin-top: 0.22em;
  text-align: center;
  color: var(--uw-primary);
}
.bg-brand .icon-list li {
  color: #fff;
}
.bg-brand .icon-list li > i,
.bg-brand .icon-list li > svg {
  color: var(--uw-accent);
}

/* ---------- 18. Badges ---------- */
.badge-uw {
  display: inline-block;
  background: #fff;
  color: var(--uw-primary);
  border: 1px solid var(--uw-accent);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  border-radius: 2rem;
  padding: 0.22rem 0.7rem;
  margin: 0 0.3rem 0.3rem 0;
}
.badge-soft {
  display: inline-block;
  background: var(--uw-light);
  color: var(--uw-dark);
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 2rem;
  padding: 0.3rem 0.85rem;
}
.bg-soft .badge-soft {
  background: #fff;
}
.badge-dark {
  display: inline-block;
  background: rgba(30, 180, 238, 0.15);
  color: var(--uw-accent);
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 2rem;
  padding: 0.3rem 0.85rem;
}
.service-card:hover .badge-soft {
  background: var(--uw-dark-3);
  color: #fff;
}
.badge-live {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--uw-border-dark);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 2rem;
  padding: 0.4rem 1rem 0.4rem 0.8rem;
  margin-bottom: 1.5rem;
}
.badge-live::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--uw-accent);
  box-shadow: 0 0 0 4px rgba(30, 180, 238, 0.25);
  animation: uw-pulse 2.2s ease-out infinite;
}

/* ---------- 19. Citations & avis ---------- */
.stars {
  color: var(--uw-star);
  letter-spacing: 2px;
}
.testi {
  position: relative;
  background: var(--uw-light);
  border-radius: var(--uw-radius-lg);
  padding: 34px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.35s var(--uw-ease),
    box-shadow 0.35s var(--uw-ease);
}
.testi::before {
  content: "“";
  position: absolute;
  right: 26px;
  top: 6px;
  font-family: var(--uw-font-title);
  font-weight: 800;
  font-size: 6rem;
  line-height: 1;
  color: var(--uw-accent);
  opacity: 0.35;
  transition: transform 0.45s var(--uw-ease);
}
.testi:hover {
  transform: translate(3px, -3px);
  box-shadow: var(--uw-offset);
}
.testi:hover::before {
  transform: translateY(-6px) rotate(-6deg);
}
.bg-soft .testi {
  background: #fff;
}
.bg-brand .testi {
  background: var(--uw-dark-2);
  border: 1px solid var(--uw-border-dark);
}
.bg-brand .testi blockquote {
  color: #fff;
}
.testi blockquote {
  font-size: 1.02rem;
  margin: 1rem 0 1.5rem;
  flex-grow: 1;
}
.testi .who {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.testi .who strong {
  display: block;
  line-height: 1.2;
}
.testi .who span {
  font-size: 0.88rem;
  color: var(--uw-muted);
}
.testi .who .avatar {
  font-size: 0.95rem;
  color: #fff;
}
.bg-brand .testi .who span {
  color: var(--uw-muted-dark);
}
.avatar {
  width: 48px;
  height: 48px;
  border-radius: 0.7rem 0.7rem var(--uw-radius-u) var(--uw-radius-u);
  background: var(--uw-grad);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--uw-font-title);
  font-weight: 700;
  flex-shrink: 0;
}
.google-score {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--uw-light);
  border-radius: 2rem;
  padding: 0.55rem 1.15rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--uw-dark);
}
.google-score i,
.google-score svg {
  color: var(--uw-primary);
}
.bg-soft .google-score {
  background: #fff;
}
.bg-brand .google-score,
.page-intro .google-score,
.acf-hero .google-score {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.bg-brand .google-score i,
.bg-brand .google-score svg,
.page-intro .google-score i,
.acf-hero .google-score i {
  color: var(--uw-accent);
}
.quote-uw {
  position: relative;
  margin: 0;
  padding: 8px 0 8px 34px;
  font-family: var(--uw-font-title);
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.35;
}
.quote-uw::before {
  content: "";
  position: absolute;
  left: 0;
  top: -14px;
  bottom: 8px;
  width: 6px;
  border-radius: 6px;
  background: var(--uw-grad-up);
  transform-origin: bottom;
}
.quote-uw footer {
  margin-top: 1rem;
  font-family: var(--uw-font-text);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--uw-muted);
}
.bg-brand .quote-uw footer {
  color: var(--uw-muted-dark);
}

/* ---------- 20. FAQ (details/summary, sans JS) ---------- */
.faq-item {
  background: #fff;
  border-radius: var(--uw-radius);
  margin-bottom: 12px;
  border: 1px solid var(--uw-border);
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}
.bg-white .faq-item,
.section:not(.bg-soft):not(.bg-brand) .faq-item {
  background: var(--uw-light);
  border-color: transparent;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 72px 22px 26px;
  font-family: var(--uw-font-title);
  font-weight: 600;
  font-size: 1.15rem;
  position: relative;
  transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  border-radius: 50%;
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6FCB' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")
    center/16px no-repeat;
  transition:
    transform 0.35s var(--uw-ease),
    background-color 0.3s;
}
.bg-soft .faq-item summary::after {
  background-color: var(--uw-light);
}
.faq-item summary:hover {
  color: var(--uw-primary);
}
.faq-item[open] {
  border-color: var(--uw-accent);
  box-shadow: var(--uw-shadow);
}
.faq-item[open] summary::after {
  transform: rotate(135deg);
  background-color: var(--uw-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.faq-item .answer {
  padding: 0 26px 24px;
  color: var(--uw-muted);
}
.faq-item[open] .answer {
  animation: uw-rise 0.5s var(--uw-ease) both;
}
.bg-brand .faq-item {
  background: var(--uw-dark-2);
  border-color: var(--uw-border-dark);
  color: #fff;
}
.bg-brand .faq-item summary::after {
  background-color: var(--uw-dark-3);
}
.bg-brand .faq-item summary:hover {
  color: var(--uw-accent);
}
.bg-brand .faq-item .answer {
  color: var(--uw-on-dark);
}

/* ---------- 21. Formulaires ---------- */
.form-label {
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 0.4rem;
}
.form-control,
.form-select {
  font-family: var(--uw-font-text);
  font-size: 1rem;
  color: var(--uw-dark);
  background-color: #fff;
  border: 1px solid var(--uw-border);
  border-radius: var(--uw-radius-sm);
  padding: 0.8rem 1rem;
  min-height: 54px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
textarea.form-control {
  min-height: 150px;
}
.form-control::placeholder {
  color: #8b96a3;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--uw-primary);
  box-shadow: 0 0 0 0.25rem rgba(30, 180, 238, 0.2);
}
.form-check-input {
  width: 1.2em;
  height: 1.2em;
  border-color: #b9c4d2;
}
.form-check-input:checked {
  background-color: var(--uw-primary);
  border-color: var(--uw-primary);
}
.form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(11, 111, 203, 0.15);
  border-color: var(--uw-primary);
}
.form-check-label {
  font-size: 0.92rem;
}
.form-text {
  color: var(--uw-muted);
  font-size: 0.85rem;
}
.form-card {
  background: #fff;
  border-radius: var(--uw-radius-xl);
  padding: 44px;
  box-shadow: var(--uw-shadow-lg);
  color: var(--uw-dark);
}
.form-card p {
  color: var(--uw-muted);
}
.bg-white .form-card {
  background: var(--uw-light);
  box-shadow: none;
}
.bg-white .form-card .form-control,
.bg-white .form-card .form-select {
  background-color: #fff;
}
.bg-brand .form-card h2,
.bg-brand .form-card h3 {
  color: var(--uw-dark);
}
.bg-brand .form-card p {
  color: var(--uw-muted);
}
.contact-line {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.4rem;
}
.contact-line .ico-box {
  margin: 0;
  width: 48px;
  height: 54px;
  font-size: 1.3rem;
}
.bg-brand .contact-line .ico-box {
  background: var(--uw-dark-2);
  color: var(--uw-accent);
}
.newsletter-form {
  display: flex;
  gap: 0.5rem;
  background: #fff;
  border-radius: var(--uw-radius);
  padding: 6px;
}
.newsletter-form .form-control {
  border: 0;
  min-height: 48px;
}
.newsletter-form .form-control:focus {
  box-shadow: none;
}
.bg-soft .newsletter-form,
.bg-white .newsletter-form {
  border: 1px solid var(--uw-border);
}

/* ---------- 22. Bandeau d'appel à l'action final ---------- */
.acf-cta_band {
  background: #fff;
  padding: 112px 0;
}
.acf-cta_band.bg-soft {
  background: var(--uw-light);
}
.cta-box {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--uw-dark);
  color: #fff;
  border-radius: var(--uw-radius-xl);
  padding: 72px 64px;
}
.cta-box h2 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.02;
  margin-bottom: 1rem;
  max-width: 640px;
}
.cta-box h2 .hl-accent {
  color: var(--uw-accent);
}
.cta-box p {
  color: var(--uw-on-dark);
  max-width: 520px;
}
.cta-box .uw-glyph {
  position: absolute;
  right: 6%;
  bottom: -70px;
  z-index: -1;
}
.cta-box .spin-badge {
  position: absolute;
  right: 5%;
  top: 50%;
  margin-top: -66px;
}
.cta-box.is-grad {
  background: var(--uw-grad);
}
.cta-box.is-grad p {
  color: rgba(255, 255, 255, 0.92);
}
.cta-box.is-grad .hl-accent {
  color: var(--uw-dark);
}
.cta-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  font-family: var(--uw-font-title);
  font-size: 1.6rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.cta-phone i,
.cta-phone svg {
  color: var(--uw-accent);
  font-size: 0.8em;
}
.cta-phone:hover {
  color: var(--uw-accent);
}

/* Glyphe central des badges rotatifs : neutralise les positionnements absolus des décors (.hero-visual, .cta-box)
   qui le sortaient du cercle */
a.spin-badge > .uw-glyph {
  --s: 22px !important;
  position: relative;
  inset: auto;
  z-index: 1;
  margin: 0;
  opacity: 1;
}

/* ---------- 22b. Éléments graphiques du design system (assets/ds) ----------
   Papier peint : <div class="uw-papier is-elan" aria-hidden="true"></div> en premier enfant d'une .section
   (motifs : u, elan, feuilles, points, quarts, vague ; suffixe -sombre sur Nuit ou Bleu Uniweb).
   Règles de la charte : un seul motif par page, sous le contenu, jamais derrière un paragraphe long ;
   opacité livrée conservée. Masque par défaut : coin haut-droit ; .is-fade-left / .is-fade-bottom / .is-fade-right.
   Forme : <span class="uw-forme is-quart" style="--f:180px" aria-hidden="true"></span> (u, jambe, feuille, quart,
   demi-lune, point, pilule, vague). Composition : .uw-compo-nuit / .uw-compo-clair (fonds de hero 1600 x 900). */
.uw-papier {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat;
  background-size: var(--p, 96px) auto;
  -webkit-mask-image: radial-gradient(
    ellipse 42% 60% at 100% 0%,
    #000 15%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 42% 60% at 100% 0%,
    #000 15%,
    transparent 100%
  );
}
.uw-papier.is-fade-left {
  -webkit-mask-image: linear-gradient(to right, #000, transparent 45%);
  mask-image: linear-gradient(to right, #000, transparent 45%);
}
.uw-papier.is-fade-right {
  -webkit-mask-image: linear-gradient(to left, #000, transparent 45%);
  mask-image: linear-gradient(to left, #000, transparent 45%);
}
.uw-papier.is-fade-bottom {
  -webkit-mask-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75),
    transparent 38%
  );
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent 38%);
}
.uw-papier.is-u {
  background-image: url(../assets/ds/motifs/uniweb-motif-u-clair.svg);
}
.uw-papier.is-u-sombre {
  background-image: url(../assets/ds/motifs/uniweb-motif-u-sombre.svg);
}
.uw-papier.is-elan {
  --p: 120px;
  background-image: url(../assets/ds/motifs/uniweb-motif-elan-clair.svg);
}
.uw-papier.is-elan-sombre {
  --p: 120px;
  background-image: url(../assets/ds/motifs/uniweb-motif-elan-sombre.svg);
}
.uw-papier.is-feuilles {
  background-image: url(../assets/ds/motifs/uniweb-motif-feuilles-clair.svg);
}
.uw-papier.is-feuilles-sombre {
  background-image: url(../assets/ds/motifs/uniweb-motif-feuilles-sombre.svg);
}
.uw-papier.is-points {
  background-image: url(../assets/ds/motifs/uniweb-motif-points-clair.svg);
}
.uw-papier.is-points-sombre {
  background-image: url(../assets/ds/motifs/uniweb-motif-points-sombre.svg);
}
.uw-papier.is-quarts {
  --p: 192px;
  background-image: url(../assets/ds/motifs/uniweb-motif-quarts-clair.svg);
}
.uw-papier.is-quarts-sombre {
  --p: 192px;
  background-image: url(../assets/ds/motifs/uniweb-motif-quarts-sombre.svg);
}
.uw-papier.is-vague {
  --p: 48px;
  background-image: url(../assets/ds/motifs/uniweb-motif-vague-clair.svg);
}
.uw-papier.is-vague-sombre {
  --p: 48px;
  background-image: url(../assets/ds/motifs/uniweb-motif-vague-sombre.svg);
}
.uw-forme {
  position: absolute;
  z-index: 0;
  display: block;
  width: var(--f, 160px);
  aspect-ratio: 1;
  background: center/contain no-repeat;
  pointer-events: none;
}
.uw-forme.is-u {
  background-image: url(../assets/ds/formes/uniweb-forme-u.svg);
}
.uw-forme.is-jambe {
  background-image: url(../assets/ds/formes/uniweb-forme-jambe.svg);
}
.uw-forme.is-feuille {
  background-image: url(../assets/ds/formes/uniweb-forme-feuille.svg);
}
.uw-forme.is-quart {
  background-image: url(../assets/ds/formes/uniweb-forme-quart.svg);
}
.uw-forme.is-demi-lune {
  background-image: url(../assets/ds/formes/uniweb-forme-demi-lune.svg);
}
.uw-forme.is-point {
  background-image: url(../assets/ds/formes/uniweb-forme-point.svg);
}
.uw-forme.is-pilule {
  background-image: url(../assets/ds/formes/uniweb-forme-pilule.svg);
}
.uw-forme.is-vague {
  background-image: url(../assets/ds/formes/uniweb-forme-vague.svg);
}
/* Bandeaux d'introduction des pages internes : composition « Nuit » du design system à la place de la trame */
.page-intro::before {
  background: url(../assets/ds/compositions/uniweb-composition-nuit.svg) right
    center/cover no-repeat;
  -webkit-mask-image: none;
  mask-image: none;
  opacity: 0.9;
}
/* La composition porte déjà les formes : on retire les U décoratifs posés en direct dans le bandeau (doublon) */
.page-intro > .uw-glyph,
.page-intro > .u-arcs {
  display: none;
}

/* ---------- 23. En-tête ---------- */
/* Le fond flouté est porté par ::after : un backdrop-filter sur l'en-tête lui-même deviendrait le bloc conteneur
   du menu mobile (position:fixed), qui se retrouvait limité à la hauteur de l'en-tête. */
.site-header {
  background: transparent;
  position: sticky;
  top: 0;
  z-index: 1030;
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.3s;
}
.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  pointer-events: none;
}
.site-header::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--uw-grad-x);
  transform-origin: left;
  z-index: 2;
}
.site-header .header-inner {
  min-height: var(--uw-header-h);
}
.site-header .logo {
  display: block;
  flex-shrink: 0;
  transition: transform 0.3s var(--uw-ease);
}
.site-header .logo:hover {
  transform: translateY(-1px);
}
.site-header .logo img {
  height: 36px;
  width: auto;
  display: block;
}
.main-nav ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.25rem;
}
.main-nav a {
  position: relative;
  display: block;
  color: var(--uw-dark);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.55rem 0.85rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 18px;
  height: 9px;
  margin-left: -9px;
  border: 3px solid var(--uw-accent);
  border-top: 0;
  border-radius: 0 0 var(--uw-radius-u) var(--uw-radius-u);
  transform: scaleX(0) translateY(-4px);
  opacity: 0;
  transition:
    transform 0.3s var(--uw-ease),
    opacity 0.3s;
}
.main-nav a:hover {
  color: var(--uw-primary);
}
.main-nav a:hover::after {
  transform: none;
  opacity: 1;
}
.main-nav a[aria-current="page"],
.main-nav a.active {
  color: var(--uw-primary);
}
.main-nav a[aria-current="page"]::after,
.main-nav a.active::after {
  transform: none;
  opacity: 1;
  border-color: var(--uw-primary);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  height: 50px;
  padding: 0 1rem 0 0.4rem;
  border-radius: var(--uw-radius-sm);
  color: var(--uw-dark);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.2s;
}
.header-phone .ph-ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 0.6rem;
  background: var(--uw-light);
  color: var(--uw-primary);
  font-size: 1rem;
  transition: 0.25s var(--uw-ease);
}
.header-phone:hover {
  color: var(--uw-primary);
}
.header-phone:hover .ph-ico {
  background: var(--uw-primary);
  color: #fff;
  transform: rotate(-10deg);
}
.header-cta[aria-current="page"] {
  background: var(--uw-dark);
  border-color: var(--uw-dark);
}
.burger {
  display: inline-grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 0;
  background: var(--uw-dark);
  color: #fff;
  padding: 0;
  cursor: pointer;
  border-radius: var(--uw-radius-sm);
  font-size: 1.25rem;
  margin: 0;
  transition:
    background-color 0.2s,
    transform 0.3s var(--uw-ease),
    box-shadow 0.3s var(--uw-ease);
}
.burger:hover {
  background: var(--uw-primary);
  transform: translate(2px, -2px);
  box-shadow: -4px 4px 0 0 var(--uw-accent);
}

/* Menu mobile : offcanvas à droite (gabarit Bootscore) en CSS pur (case à cocher) */
.nav-toggle {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.nav-toggle:focus-visible ~ .header-inner .burger {
  outline: 3px solid rgba(30, 180, 238, 0.6);
  outline-offset: 3px;
}
/* Fermé : masqué par clip-path (et non décalé hors écran), pour ne pas élargir la page sur mobile */
.uw-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 90vw;
  background: var(--uw-dark);
  color: #fff;
  z-index: 1045;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  clip-path: inset(0 0 0 100%);
  visibility: hidden;
  transition:
    clip-path 0.5s var(--uw-ease),
    visibility 0.5s;
  box-shadow: -18px 0 40px rgba(21, 34, 43, 0.25);
}
.uw-offcanvas::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--uw-motif-dark) 0 0/96px 96px;
  -webkit-mask-image: linear-gradient(to top, #000, transparent 60%);
  mask-image: linear-gradient(to top, #000, transparent 60%);
}
.uw-offcanvas-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(21, 34, 43, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s,
    visibility 0.3s;
  cursor: pointer;
}
.nav-toggle:checked ~ .uw-offcanvas {
  clip-path: inset(0 0 0 -60px);
  visibility: visible;
}
.nav-toggle:checked ~ .uw-offcanvas-backdrop {
  opacity: 1;
  visibility: visible;
}
body:has(.nav-toggle:checked) {
  overflow: hidden;
}
.uw-offcanvas-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--uw-border-dark);
}
.uw-offcanvas-header .logo-mark {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--uw-font-title);
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
}
.uw-offcanvas-header .logo-mark img {
  height: 26px;
  width: auto;
}
.uw-offcanvas-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--uw-radius-sm);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  font-size: 1.2rem;
  margin: 0;
  transition:
    background-color 0.2s,
    transform 0.3s var(--uw-ease);
}
.uw-offcanvas-close:hover {
  background: var(--uw-primary);
  transform: rotate(90deg);
}
.uw-offcanvas-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 16px 24px 28px;
  overflow-y: auto;
}
.uw-offcanvas .mobile-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: nav;
}
.uw-offcanvas .mobile-nav a {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  color: #fff;
  font-weight: 700;
  font-family: var(--uw-font-title);
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--uw-border-dark);
  text-decoration: none;
  transition:
    color 0.2s,
    padding 0.3s var(--uw-ease);
}
.uw-offcanvas .mobile-nav a::before {
  counter-increment: nav;
  content: "0" counter(nav);
  font-size: 0.85rem;
  color: var(--uw-accent);
  letter-spacing: 0;
  min-width: 1.6rem;
}
.uw-offcanvas .mobile-nav a:hover {
  color: var(--uw-accent);
  padding-left: 0.4rem;
}
.uw-offcanvas .mobile-nav a[aria-current="page"] {
  color: var(--uw-accent);
}
.uw-offcanvas .mobile-nav a[aria-current="page"]::before {
  color: #fff;
}
.uw-offcanvas-footer {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 28px;
  display: grid;
  gap: 0.7rem;
}
.uw-offcanvas-footer .btn {
  width: 100%;
}
.uw-offcanvas-footer p {
  font-size: 0.88rem;
  color: var(--uw-muted-dark);
  margin: 0.4rem 0 0;
  text-align: center;
}
.uw-offcanvas .offcanvas-deco {
  position: absolute;
  right: -40px;
  bottom: 120px;
  z-index: 0;
  opacity: 0.12;
  pointer-events: none;
}
.uw-offcanvas .offcanvas-deco.uw-glyph {
  --s: 130px;
}

/* ---------- 24. Pied de page ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--uw-dark);
  color: var(--uw-muted-dark);
  padding: 0;
  font-size: 0.95rem;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--uw-motif-dark) 0 0/96px 96px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 55%);
  mask-image: linear-gradient(to bottom, #000, transparent 55%);
}
.footer-top {
  position: relative;
  padding: 96px 0 72px;
  border-bottom: 1px solid var(--uw-border-dark);
}
.footer-top .footer-claim {
  font-family: var(--uw-font-title);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.6vw, 4rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: #fff;
  margin: 0;
}
.footer-top .footer-claim .hl-accent {
  color: var(--uw-accent);
}
.footer-top .footer-glyph {
  position: absolute;
  right: -60px;
  top: 40px;
  z-index: -1;
  opacity: 0.1;
}
.footer-top .footer-glyph.uw-glyph {
  --s: 200px;
}
.footer-main {
  padding: 64px 0 0;
}
.site-footer h4 {
  color: #fff;
  font-size: 1rem;
  font-family: var(--uw-font-text);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.site-footer h4::before {
  content: "";
  width: 11px;
  height: 13px;
  border: 3px solid var(--uw-accent);
  border-top: 0;
  border-radius: 0 0 var(--uw-radius-u) var(--uw-radius-u);
}
.site-footer a {
  color: var(--uw-muted-dark);
  text-decoration: none;
  transition:
    color 0.2s,
    padding 0.3s var(--uw-ease);
}
.site-footer a:hover {
  color: var(--uw-accent);
}
.site-footer a[aria-current="page"] {
  color: #fff;
}
.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer li {
  margin-bottom: 0.6rem;
}
.site-footer li a {
  display: inline-block;
}
.site-footer li a:hover {
  padding-left: 0.35rem;
}
.site-footer .logo svg,
.site-footer .logo img {
  height: 38px;
  width: auto;
  display: block;
}
.site-footer .btn-primary {
  color: #fff;
}
.site-footer .footer-phone {
  color: #fff;
  font-weight: 700;
  font-family: var(--uw-font-title);
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.site-footer .footer-phone i,
.site-footer .footer-phone svg {
  color: var(--uw-accent);
  font-size: 0.8em;
}
.site-footer .footer-phone:hover {
  color: var(--uw-accent);
}
.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.footer-contact li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 0.9rem;
}
.footer-contact li > i,
.footer-contact li > svg {
  flex-shrink: 0;
  width: 1.2em;
  margin-top: 0.25em;
  text-align: center;
  color: var(--uw-accent);
}
.footer-socials {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.5rem;
}
.footer-socials a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 0.75rem;
  background: var(--uw-dark-2);
  border: 1px solid var(--uw-border-dark);
  color: #fff;
  font-size: 1.05rem;
  transition: 0.25s;
}
.footer-socials a:hover {
  background: var(--uw-primary);
  border-color: var(--uw-primary);
  color: #fff;
  transform: translate(2px, -2px);
  box-shadow: -4px 4px 0 0 var(--uw-accent);
}
.footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.footer-badges span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--uw-border-dark);
  border-radius: 2rem;
  padding: 0.35rem 0.85rem;
}
.footer-badges i,
.footer-badges svg {
  color: var(--uw-accent);
}
.footer-wordmark {
  display: block;
  margin-top: 72px;
  font-family: var(--uw-font-title);
  font-weight: 800;
  font-size: clamp(4rem, 17vw, 15rem);
  line-height: 0.78;
  letter-spacing: -0.06em;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.12);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}
.footer-bottom {
  border-top: 1px solid var(--uw-border-dark);
  padding: 22px 0;
  font-size: 0.85rem;
}
.footer-bottom .sep {
  opacity: 0.35;
  margin: 0 0.45rem;
}
.back-top {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: #fff !important;
}
.back-top::before {
  content: "";
  width: 12px;
  height: 14px;
  border: 3px solid var(--uw-accent);
  border-bottom: 0;
  border-radius: var(--uw-radius-u) var(--uw-radius-u) 0 0;
  transition: transform 0.3s var(--uw-ease);
}
.back-top:hover::before {
  transform: translateY(-3px);
}

/* ---------- 25. Mouvement : animations temporelles ---------- */
@keyframes uw-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.uw-marquee-track {
  animation: uw-marquee 38s linear infinite;
}
.uw-marquee.is-reverse .uw-marquee-track {
  animation-direction: reverse;
}
.uw-marquee.is-fast .uw-marquee-track {
  animation-duration: 24s;
}
@keyframes uw-cue {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translateY(20px);
    opacity: 0;
  }
}
.scroll-cue::after {
  animation: uw-cue 1.8s var(--uw-ease) infinite;
}
@keyframes uw-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
.float-card.fc-1 {
  animation: uw-float 6s ease-in-out infinite;
}
.float-card.fc-2 {
  animation: uw-float 7s ease-in-out infinite 0.8s;
}
@keyframes uw-rise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.js .anim-rise {
  animation: uw-rise 0.9s var(--uw-ease) both;
}
.anim-d1 {
  animation-delay: 0.1s;
}
.anim-d2 {
  animation-delay: 0.2s;
}
.anim-d3 {
  animation-delay: 0.3s;
}
.anim-d4 {
  animation-delay: 0.45s;
}
.anim-d5 {
  animation-delay: 0.6s;
}
@keyframes uw-line-up {
  from {
    transform: translateY(105%);
  }
  to {
    transform: none;
  }
}
@keyframes uw-glow {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(-60px, 40px) scale(1.12);
  }
}
@keyframes uw-leg-up {
  from {
    height: calc(var(--s) * 1.22);
  }
  to {
    height: calc(var(--s) * 1.565);
  }
}
@keyframes uw-grow-up {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
@keyframes uw-draw-x {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes uw-words {
  0%,
  18% {
    transform: translateY(0);
  }
  25%,
  43% {
    transform: translateY(-1.08em);
  }
  50%,
  68% {
    transform: translateY(-2.16em);
  }
  75%,
  93% {
    transform: translateY(-3.24em);
  }
  100% {
    transform: translateY(-4.32em);
  }
}
@keyframes uw-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes uw-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(30, 180, 238, 0.55);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(30, 180, 238, 0);
  }
}
@keyframes uw-motif-drift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 96px 96px;
  }
}
.bg-motif.is-drift::before,
.acf-hero::before {
  animation: uw-motif-drift 14s linear infinite;
}
.nav-toggle:checked ~ .uw-offcanvas .mobile-nav li {
  animation: uw-rise 0.55s var(--uw-ease) both;
}
.nav-toggle:checked ~ .uw-offcanvas .mobile-nav li:nth-child(2) {
  animation-delay: 0.06s;
}
.nav-toggle:checked ~ .uw-offcanvas .mobile-nav li:nth-child(3) {
  animation-delay: 0.12s;
}
.nav-toggle:checked ~ .uw-offcanvas .mobile-nav li:nth-child(4) {
  animation-delay: 0.18s;
}
.nav-toggle:checked ~ .uw-offcanvas .mobile-nav li:nth-child(5) {
  animation-delay: 0.24s;
}
.nav-toggle:checked ~ .uw-offcanvas .mobile-nav li:nth-child(6) {
  animation-delay: 0.3s;
}

/* ---------- 26. Mouvement lié au défilement et parallaxe (CSS pur) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes uw-reveal {
      from {
        opacity: 0;
        transform: translateY(48px);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }
    @keyframes uw-reveal-left {
      from {
        opacity: 0;
        transform: translateX(-48px);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }
    @keyframes uw-reveal-right {
      from {
        opacity: 0;
        transform: translateX(48px);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }
    @keyframes uw-scale-in {
      from {
        opacity: 0;
        transform: scale(0.9);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }
    @keyframes uw-par-slow {
      from {
        transform: translateY(60px);
      }
      to {
        transform: translateY(-60px);
      }
    }
    @keyframes uw-par-fast {
      from {
        transform: translateY(140px);
      }
      to {
        transform: translateY(-140px);
      }
    }
    @keyframes uw-par-rev {
      from {
        transform: translateY(-80px);
      }
      to {
        transform: translateY(80px);
      }
    }
    @keyframes uw-slide-x {
      from {
        transform: translateX(8%);
      }
      to {
        transform: translateX(-18%);
      }
    }
    @keyframes uw-slide-x-rev {
      from {
        transform: translateX(-12%);
      }
      to {
        transform: translateX(6%);
      }
    }
    @keyframes uw-clip-u {
      from {
        clip-path: inset(0 0 100% 0 round 0 0 999px 999px);
      }
      to {
        clip-path: inset(0 0 0 0 round 0 0 0 0);
      }
    }
    @keyframes uw-header-shadow {
      to {
        box-shadow: 0 10px 30px rgba(21, 34, 43, 0.08);
        border-bottom-color: var(--uw-border);
      }
    }
    @keyframes uw-header-shrink {
      to {
        min-height: calc(var(--uw-header-h) - 16px);
      }
    }
    @keyframes uw-logo-shrink {
      to {
        height: 30px;
      }
    }
    @keyframes uw-progress {
      from {
        transform: scaleX(0);
      }
      to {
        transform: scaleX(1);
      }
    }
    @keyframes uw-split-l {
      from {
        transform: translate(8%, -4%);
      }
      to {
        transform: translate(-16%, 10%);
      }
    }
    @keyframes uw-split-r {
      from {
        transform: translate(-8%, 12%);
      }
      to {
        transform: translate(14%, -18%);
      }
    }
    @keyframes uw-hero-out {
      to {
        opacity: 0.12;
        transform: translateY(-70px) scale(0.97);
      }
    }
    @keyframes uw-par-img {
      from {
        transform: scale(1.18) translateY(-7%);
      }
      to {
        transform: scale(1.18) translateY(7%);
      }
    }
    @keyframes uw-zoom {
      from {
        transform: scale(1.25);
      }
      to {
        transform: scale(1);
      }
    }
    @keyframes uw-count {
      from {
        --uw-n: 0;
      }
      to {
        --uw-n: var(--to);
      }
    }
    @keyframes uw-fill {
      from {
        background-position: 0 100%;
      }
      to {
        background-position: 0 0;
      }
    }
    @keyframes uw-pin-x {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(calc(-100% + 100vw));
      }
    }
    @keyframes uw-stack-dim {
      to {
        transform: scale(0.94);
        filter: brightness(0.97);
      }
    }
    @keyframes uw-arc-1 {
      from {
        transform: translate(-6%, 10%);
      }
      to {
        transform: translate(8%, -14%);
      }
    }
    @keyframes uw-arc-2 {
      from {
        transform: translate(6%, -6%);
      }
      to {
        transform: translate(-10%, 16%);
      }
    }
    @keyframes uw-arc-3 {
      from {
        transform: translateY(18%) scale(0.9);
      }
      to {
        transform: translateY(-20%) scale(1.05);
      }
    }
    @keyframes uw-curtain {
      from {
        border-radius: 50% 50% 0 0/160px 160px 0 0;
      }
      to {
        border-radius: 50% 50% 0 0/0 0 0 0;
      }
    }
    @keyframes uw-read {
      from {
        transform: scaleX(0);
      }
      to {
        transform: scaleX(1);
      }
    }

    .js [data-reveal] {
      animation: uw-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }
    .js [data-reveal="left"] {
      animation: uw-reveal-left linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
    .js [data-reveal="right"] {
      animation: uw-reveal-right linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
    .js [data-reveal="scale"] {
      animation: uw-scale-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
    .js [data-reveal-delay="1"] {
      animation-range: entry 6% cover 32%;
    }
    .js [data-reveal-delay="2"] {
      animation-range: entry 12% cover 36%;
    }
    .js [data-reveal-delay="3"] {
      animation-range: entry 18% cover 40%;
    }
    .js [data-parallax="slow"] {
      animation: uw-par-slow linear both;
      animation-timeline: view();
    }
    .js [data-parallax="fast"] {
      animation: uw-par-fast linear both;
      animation-timeline: view();
    }
    .js [data-parallax="rev"],
    .js .section-index {
      animation: uw-par-rev linear both;
      animation-timeline: view();
    }
    .js [data-parallax="x"] {
      animation: uw-slide-x linear both;
      animation-timeline: view();
    }
    .js [data-parallax="x-rev"] {
      animation: uw-slide-x-rev linear both;
      animation-timeline: view();
    }
    [data-parallax="img"] {
      overflow: hidden;
    }
    .js [data-parallax="img"] img {
      animation: uw-par-img linear both;
      animation-timeline: view();
    }
    .js .zoom-scroll img {
      animation: uw-zoom linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 60%;
    }
    .js .u-arcs span:nth-child(1) {
      animation: uw-arc-1 linear both;
      animation-timeline: view();
    }
    .js .u-arcs span:nth-child(2) {
      animation: uw-arc-2 linear both;
      animation-timeline: view();
    }
    .js .u-arcs span:nth-child(3) {
      animation: uw-arc-3 linear both;
      animation-timeline: view();
    }
    .js .section-curtain {
      animation: uw-curtain linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
    .js .section-head::before,
    .js .u-stroke,
    .js .quote-uw::before,
    .js .step-list::before {
      animation: uw-grow-up linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 35%;
    }
    .js .step-list::before {
      transform-origin: top;
      animation-range: entry 20% cover 60%;
    }
    .js [data-reveal="u"] {
      animation: uw-clip-u linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
    .js .hero-out {
      animation: uw-hero-out linear both;
      animation-timeline: scroll(root);
      animation-range: 0 90vh;
    }
    .site-header {
      animation: uw-header-shadow linear both;
      animation-timeline: scroll(root);
      animation-range: 0 120px;
    }
    .site-header .header-inner {
      animation: uw-header-shrink linear both;
      animation-timeline: scroll(root);
      animation-range: 0 160px;
    }
    .site-header .logo img {
      animation: uw-logo-shrink linear both;
      animation-timeline: scroll(root);
      animation-range: 0 160px;
    }
    .site-header::before {
      animation: uw-progress linear both;
      animation-timeline: scroll(root);
    }
    .js .scroll-fill {
      background: linear-gradient(to bottom, var(--uw-dark) 50%, #c3cdd9 50%) 0
        100%/100% 200% no-repeat;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: uw-fill linear both;
      animation-timeline: view();
      animation-range: cover 15% cover 55%;
    }
    .js .bg-brand .scroll-fill {
      background-image: linear-gradient(
        to bottom,
        #fff 50%,
        rgba(255, 255, 255, 0.2) 50%
      );
    }
    .js .stack-item {
      animation: uw-stack-dim linear both;
      animation-timeline: view();
      animation-range: exit-crossing 0% exit-crossing 100%;
    }
    .bg-brand .stack-item {
      animation: none;
    }
    .js .post-mini {
      animation: uw-reveal-right linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
  }
  
}

/* ---------- Page « accueil » (ex-accueil.css, préfixée par .page-accueil) ---------- */
.page-accueil .acf-hero .hero-since {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.75rem;
  padding: 0.45rem 1.15rem 0.45rem 0.45rem;
  border: 1px solid var(--uw-border-dark);
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.05);
}
.page-accueil .acf-hero .hs-u {
  display: grid;
  place-items: center;
  width: 58px;
  height: 46px;
  border-radius:  var(--uw-radius-u)  0.6rem  0.6rem var(--uw-radius-u);
  background: var(--uw-grad);
  font-family: var(--uw-font-title);
  font-weight: 800;
  font-size: 0.95rem;
  color: #fff;
}
.page-accueil .acf-hero .hs-txt {
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--uw-on-dark);
}
.page-accueil .acf-hero .hs-txt strong {
  display: block;
  font-size: 0.95rem;
  color: #fff;
}
.page-accueil .acf-projects_grid .bg-word {
  position: absolute;
  left: 0;
  top: 4%;
  z-index: 0;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.07);
  pointer-events: none;
  user-select: none;
}
.page-accueil .acf-projects_grid .proj-glyph {
  position: absolute;
  right: -70px;
  bottom: -60px;
  z-index: 0;
}
.page-accueil .acf-projects_grid .carousel-uw > .container,
.page-accueil .acf-projects_grid .carousel-uw__swiper,
.page-accueil .acf-projects_grid .carousel-uw__nav {
  position: relative;
  z-index: 1;
}
.page-accueil .acf-key_figures .zone-mark {
  position: absolute;
  right: 28px;
  top: 28px;
  width: 52px;
  height: auto;
}
.page-accueil .acf-key_figures .stat-row .pre {
  font-size: 0.6em;
  vertical-align: 0.35em;
  margin-right: 0.05em;
}
.page-accueil .acf-blog_posts .u-arcs {
  left: -140px;
  bottom: -120px;
  --w: 380px;
  opacity: 0.7;
}
.page-accueil .acf-blog_posts .blog-mosaic {
  position: relative;
  z-index: 1;
}
.page-accueil .acf-faq .aside-cta .hours {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--uw-muted-dark);
  margin-top: 0.75rem;
}
@media (max-width: 991.98px) {
  .page-accueil .acf-projects_grid .h-pin-sticky {
    position: relative;
  }
  .page-accueil .acf-projects_grid .proj-glyph {
    display: none;
  }
}
@media (max-width: 575.98px) {
  .page-accueil .acf-hero .hero-since {
    border-radius: var(--uw-radius);
  }
  .page-accueil .acf-key_figures .zone-mark {
    width: 40px;
    right: 20px;
    top: 20px;
  }
}

/* ---------- Page « expertises » (ex-expertises.css, préfixée par .page-expertises) ---------- */
.page-expertises .acf-page_intro .hero-visual .u-frame {
  aspect-ratio: 4/4.6;
}
.page-expertises .acf-page_intro .intro-glyph {
  --s: 150px;
  position: absolute;
  right: -30px;
  bottom: -40px;
  z-index: -1;
  opacity: 0.5;
}
.page-expertises .acf-anchor_nav {
  border-bottom: 1px solid var(--uw-border);
}
.page-expertises .acf-anchor_nav .filter-chips {
  margin: 0;
  justify-content: center;
}
.page-expertises .acf-anchor_nav .filter-chips i {
  color: var(--uw-primary);
  margin-right: 0.4rem;
}
.page-expertises .acf-services_rows .u-arcs {
  right: -150px;
  top: -200px;
  opacity: 0.55;
}
.page-expertises .acf-features_split .split-glyph {
  --s: 180px;
  position: absolute !important;
  left: -290px;
}
.page-expertises .acf-project_spotlight .browser-frame {
  --screen-h: 460px;
}
.page-expertises .acf-project_spotlight .u-arcs {
  left: -120px;
  bottom: -80px;
  --w: 360px;
}
.page-expertises .acf-faq .faq-aside {
  background: var(--uw-light);
  border-radius: var(--uw-radius-lg);
  padding: 32px;
}
@media (max-width: 991.98px) {
  .page-expertises .acf-page_intro .intro-glyph {
    display: none;
  }
  .page-expertises .acf-anchor_nav .filter-chips {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .page-expertises .acf-anchor_nav .filter-chips a {
    white-space: nowrap;
  }
  .page-expertises .acf-project_spotlight .browser-frame {
    --screen-h: 380px;
  }
}


.section #automatiser .uw-glyph{
  position: absolute;
}

/* ---------- Page « realisations » (ex-realisations.css, préfixée par .page-realisations) ---------- */
.page-realisations .acf-page_intro .intro-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--uw-border-dark);
}
.page-realisations .acf-page_intro .intro-figures strong {
  display: block;
  font-family: var(--uw-font-title);
  font-weight: 800;
  font-size: 2.4rem;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--uw-accent);
}
.page-realisations .acf-page_intro .intro-figures span {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--uw-on-dark);
}
.page-realisations .acf-page_intro .uw-glyph {
  --s: 200px;
}
.page-realisations .acf-page_intro .u-arcs {
  right: 18%;
  top: -10%;
  --w: 360px;
  opacity: 0.6;
}
.page-realisations .acf-project_featured .featured-visual {
  position: relative;
  padding: 0 28px 36px 0;
}
.page-realisations .acf-project_featured .featured-visual .u-arcs {
  left: auto;
  right: -90px;
  bottom: -140px;
  --w: 340px;
  z-index: -1;
}
.page-realisations .acf-project_featured .featured-visual {
  isolation: isolate;
}
.page-realisations .acf-project_featured .result-box .num {
  font-size: 2rem;
}
.page-realisations .acf-projects_grid .project-card .badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.page-realisations .acf-projects_grid .project-card .p-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--uw-muted);
}
.page-realisations .acf-projects_grid .project-card .p-foot i {
  color: var(--uw-primary);
  margin-right: 0.35rem;
}
.page-realisations .acf-projects_grid .grid-count {
  font-weight: 700;
  color: var(--uw-muted);
  font-size: 0.95rem;
}
.page-realisations .acf-stats_band .stats-glyph {
  position: absolute;
  left: -60px;
  bottom: -80px;
  z-index: 0;
}
.page-realisations .acf-stats_band .stats-glyph.uw-glyph {
  --s: 180px;
}
@media (max-width: 991.98px) {
  .page-realisations .acf-project_featured .featured-visual {
    padding: 0;
    margin-top: 2.5rem;
  }
  .page-realisations .acf-page_intro .u-arcs {
    display: none;
  }
}
@media (max-width: 575.98px) {
  .page-realisations .acf-page_intro .intro-figures {
    gap: 1.5rem;
  }
  .page-realisations .acf-page_intro .intro-figures strong {
    font-size: 1.9rem;
  }
}

/* ---------- Page « l-agence » (ex-l-agence.css, préfixée par .page-l-agence) ---------- */
.page-l-agence .acf-page_intro .u-duo {
  --ring: var(--uw-dark);
  max-width: 460px;
  margin-left: auto;
}
.page-l-agence .acf-page_intro .duo-badge {
  left: -28px;
  top: auto;
  bottom: 14%;
}
.page-l-agence .acf-page_intro .intro-glyph {
  position: absolute;
  right: -4%;
  bottom: -90px;
  z-index: 0;
}
.page-l-agence .acf-page_intro .intro-glyph.uw-glyph {
  --s: 260px;
}
.page-l-agence .acf-text_image .ti-quote {
  position: absolute;
  right: -12px;
  bottom: -28px;
  max-width: 280px;
  height: auto;
  z-index: 3;
  box-shadow: var(--uw-shadow);
}
.page-l-agence .acf-stats .zone-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.page-l-agence .acf-timeline .tl-visual {
  position: relative;
}
.page-l-agence .acf-timeline .tl-visual .float-card {
  right: -18px;
  bottom: 28px;
  left: auto;
  top: auto;
}
.page-l-agence .acf-team .join-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: 340px;
  padding: 30px;
  border-radius: var(--uw-radius-lg);
  background: var(--uw-grad);
  color: #fff;
  text-decoration: none;
  transition:
    transform 0.35s var(--uw-ease),
    box-shadow 0.35s var(--uw-ease);
}
.page-l-agence .acf-team .join-card::after {
  content: "";
  position: absolute;
  right: -30px;
  top: -50px;
  z-index: -1;
  width: 130px;
  height: 170px;
  border: 30px solid rgba(255, 255, 255, 0.18);
  border-top: 0;
  border-radius: 0 0 999px 999px;
}
.page-l-agence .acf-team .join-card h3 {
  color: #fff;
  font-size: 1.4rem;
}
.page-l-agence .acf-team .join-card p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
}
.page-l-agence .acf-team .join-card:hover {
  color: #fff;
  transform: translate(3px, -3px);
  box-shadow: -6px 6px 0 0 var(--uw-dark);
}
.page-l-agence .acf-team .team-card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.75rem;
}
@media (max-width: 991.98px) {
  .page-l-agence .acf-page_intro .u-duo {
    margin: 3rem auto 0;
  }
  .page-l-agence .acf-page_intro .duo-badge {
    left: 0;
  }
  .page-l-agence .acf-text_image .ti-quote {
    position: static;
    max-width: none;
    margin-top: 1rem;
  }
  .page-l-agence .acf-timeline .tl-visual {
    margin-bottom: 2.5rem;
  }
  .page-l-agence .acf-timeline .tl-visual .float-card {
    right: 12px;
  }
}

/* ---------- Page « blog » (ex-blog.css, préfixée par .page-blog) ---------- */
.page-blog .acf-page_intro .intro-panel {
  position: relative;
  z-index: 1;
  background: var(--uw-dark-2);
  border: 1px solid var(--uw-border-dark);
  border-radius: var(--uw-radius-lg);
  padding: 28px;
}
.page-blog .acf-page_intro .intro-panel h2 {
  font-size: 1.15rem;
  color: #fff;
  margin-bottom: 1rem;
}
.page-blog .acf-page_intro .intro-search {
  display: flex;
  gap: 0.5rem;
  background: #fff;
  border-radius: var(--uw-radius);
  padding: 6px;
  margin-top: 2rem;
  max-width: 520px;
}
.page-blog .acf-page_intro .intro-search .form-control {
  border: 0;
  min-height: 48px;
}
.page-blog .acf-page_intro .intro-search .form-control:focus {
  box-shadow: none;
}
.page-blog .acf-page_intro .u-arcs {
  right: 2%;
  top: 6%;
  --w: 340px;
  opacity: 0.6;
}
.page-blog .acf-blog_mosaic .filter-chips {
  margin-bottom: 0;
}
.page-blog .acf-blog_topics .feature-card {
  display: block;
  text-decoration: none;
  color: #fff;
}
.page-blog .acf-blog_topics .feature-card .count {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--uw-accent);
}
.page-blog .acf-blog_popular .post-row .rank {
  font-family: var(--uw-font-title);
  font-weight: 800;
  font-size: 1rem;
  color: var(--uw-primary);
  margin-right: 0.5rem;
}
.page-blog .acf-blog_popular .post-row:last-child {
  border-bottom: 1px solid var(--uw-border);
}
@media (max-width: 991.98px) {
  .acf-page_intro .u-arcs {
    display: none;
  }
}
@media (max-width: 575.98px) {
  .acf-page_intro .intro-search {
    flex-direction: column;
  }
}

/* ---------- Page « etude-gratuite » (ex-etude-gratuite.css, préfixée par .page-etude-gratuite) ---------- */
.page-etude-gratuite .acf-contact_form fieldset {
  margin-bottom: 1.75rem;
}
.page-etude-gratuite .acf-contact_form legend {
  font-family: var(--uw-font-text);
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
  float: none;
}
.page-etude-gratuite .acf-contact_form .form-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.page-etude-gratuite .acf-contact_form .form-head h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  margin: 0;
}
.page-etude-gratuite .acf-contact_form .form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--uw-border);
}
.page-etude-gratuite .acf-contact_form .study-box {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.page-etude-gratuite .acf-contact_form .study-box .uw-glyph {
  position: absolute;
  right: -40px;
  bottom: -50px;
  z-index: -1;
  --s: 90px;
}
.page-etude-gratuite .acf-page_intro .intro-side {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}
@media (max-width: 991.98px) {
  .acf-page_intro .intro-side {
    justify-content: flex-start;
    margin-top: 2rem;
  }
}

/* =========================================================================
   v1.1 - adaptation au PROMPT-MAQUETTE.md et au design system (rendu v1.07 conservé)
   ========================================================================= */

/* Utilitaires demandés par le prompt (alias des classes existantes) */
.d-contents {
  display: contents;
}
.u-on-dark {
  color: #fff !important;
}
.u-on-dark-muted {
  color: var(--uw-on-dark) !important;
}
.eyebrow--on-dark {
  color: var(--uw-accent);
}
.u-title-xl {
  font-size: clamp(2.6rem, 5.4vw, 4.9rem);
  line-height: 1.02;
}
.u-title-lg {
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height: 1.08;
}
.u-title-md {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.1;
}
.u-title-sm {
  font-size: 1.25rem;
  line-height: 1.2;
}
.bg-surface {
  background: #fff !important;
}
.bg-surface-alt {
  background: var(--uw-light) !important;
}
.bg-nuit {
  background: var(--uw-dark) !important;
  color: #fff;
}

/* Anciens styles en ligne, devenus classes */
.uw-glyph--s120 {
  --s: 120px;
}
.uw-glyph--s150 {
  --s: 150px;
}
.uw-glyph--s160 {
  --s: 160px;
}
.uw-glyph--s170 {
  --s: 170px;
}
.uw-glyph--s180 {
  --s: 180px;
}
.uw-glyph--s200 {
  --s: 200px;
}
.uw-glyph--s240 {
  --s: 240px;
}
.uw-glyph--s260 {
  --s: 260px;
}
.h-pin--long {
  --pin-len: 320vh;
}
.faq-forme {
  --f: 260px;
  right: -70px;
  bottom: -70px;
  opacity: 0.08;
  transform: rotate(180deg);
}
.ico-box.is-glass {
  background: rgba(255, 255, 255, 0.18);
}
.zone-box.is-bordered {
  border: 1px solid var(--uw-border-dark);
}
.obj-left {
  object-position: 30% 40%;
}
.obj-right {
  object-position: 80% 50%;
}
.stack-item:nth-child(2) {
  --i: 1;
}
.stack-item:nth-child(3) {
  --i: 2;
}
.stack-item:nth-child(4) {
  --i: 3;
}

/* Numéros générés (affichage seulement, aucun champ ACF) */
main {
  counter-reset: uw-section;
}
main
  > section.section:not(.acf-cta_band):not(.acf-marquee):not(.acf-anchor_nav) {
  counter-increment: uw-section;
}
.section-index::before {
  content: counter(uw-section, decimal-leading-zero);
}
.row:has(> * > .service-card) {
  counter-reset: uw-card;
}
.service-card {
  counter-increment: uw-card;
}
.service-card .card-num::before {
  content: counter(uw-card, decimal-leading-zero);
}
.stack {
  counter-reset: uw-stack;
}
.stack-item {
  counter-increment: uw-stack;
}
.stack-item .stack-num::before {
  content: counter(uw-stack, decimal-leading-zero);
}
.row:has(.step-card) {
  counter-reset: uw-step;
}
.step-card {
  counter-increment: uw-step;
}
.step-card .step-num::before {
  content: counter(uw-step);
}
.step-list {
  counter-reset: uw-steplist;
}
.step-list > li {
  counter-increment: uw-steplist;
}
.step-label {
  display: block;
  font-family: var(--uw-font-title);
  font-weight: 800;
  color: var(--uw-primary);
  font-size: 0.95rem;
  margin-bottom: 0.15rem;
}
.step-label::before {
  content: "Étape " counter(uw-steplist, decimal-leading-zero);
}

/* Compteurs : le nombre réel est dans le HTML ; l'animation (CSS) ne s'arme qu'avec JavaScript, qui pose --to */

/* Forme des cartes du design system : coins opposés (haut-gauche et bas-droit arrondis) */
.service-card,
.feature-card,
.project-card,
.testi,
.team-card,
.step-card,
.stack-item,
.figure-box,
.zone-box,
.offer-card,
.contact-card,
.post-card,
.post-mini,
.post-feature,
.result-box,
.aside-cta,
.join-card,
.author-box,
.form-card,
.cta-box,
.float-card,
.faq-aside {
  border-radius: var(--uw-radius-lg) 0 var(--uw-radius-lg) 0;
}
.result-box {
  border-left: 0;
  border-top: 5px solid var(--uw-accent);
}
.project-card:hover,
.post-card:hover {
  box-shadow: -8px 8px 0 0 var(--uw-accent);
}

/* Pas d'image en U dans les cartes : images à coins opposés */
.post-card .thumb,
.post-mini .thumb,
.project-card.is-u .thumb,
.team-card .photo {
  border-radius: var(--uw-radius) 0 var(--uw-radius) 0;
}
.team-card .photo {
  margin: 12px 12px 0;
}
.author-box img {
  border-radius: 0.8rem 0 0.8rem 0;
  height: 72px;
}

/* Carrousel des réalisations (accueil) : Swiper à toutes les tailles */
.carousel-uw {
  padding: 112px 0;
}
.carousel-uw__swiper {
  margin: 0 var(--uw-gutter-x);
  overflow: visible;
  clip-path: inset(-40px -100vw -40px 0);
}
.carousel-uw__track {
  padding: 14px 0 8px;
}
.carousel-uw__track > .swiper-slide {
  width: clamp(300px, 32vw, 440px);
  height: auto;
}
.carousel-uw__track > .swiper-slide > .project-card {
  height: 100%;
}
.carousel-uw__nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 32px var(--uw-gutter-x) 0;
}
.carousel-uw__progress.swiper-pagination {
  position: relative;
  inset: auto;
  flex-grow: 1;
  width: auto;
  height: 4px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--uw-border-dark);
}
.carousel-uw__progress .swiper-pagination-progressbar-fill {
  background: var(--uw-grad-x);
}
.carousel-uw__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border: 1px solid var(--uw-border-dark);
  border-radius: var(--uw-radius-sm);
  background: transparent;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, transform 0.3s var(--uw-ease), box-shadow 0.3s var(--uw-ease);
}
.carousel-uw__btn::before {
  content: "\2192";
  font-weight: 700;
}
.carousel-uw__btn--prev::before {
  content: "\2190";
}
.carousel-uw__btn:hover {
  background: var(--uw-primary);
  border-color: var(--uw-primary);
  transform: translate(2px, -2px);
  box-shadow: -4px 4px 0 0 var(--uw-accent);
}
.carousel-uw__btn.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
  box-shadow: none;
}
@media (max-width: 991.98px) {
  .carousel-uw {
    padding: 80px 0;
  }
  .carousel-uw__track > .swiper-slide {
    width: min(78vw, 380px);
  }
}
@media (max-width: 575.98px) {
  .carousel-uw {
    padding: 60px 0;
  }
}
/* Sans JavaScript : défilement horizontal natif */
html:not(.js) .carousel-uw__swiper {
  overflow-x: auto;
  clip-path: none;
}
html:not(.js) .carousel-uw__nav {
  display: none;
}


/* =========================================================================
   v1.1 - pages type : article, réalisation, expertise
   ========================================================================= */

/* Article : métadonnées sous le titre, tableau, partage, avatar auteur */
.page-intro--article{padding-bottom:140px}
.page-intro .post-meta{gap:.5rem 1.5rem;margin-top:1.75rem;font-size:.95rem}
.page-intro .post-meta li{display:inline-flex;align-items:center;gap:.5rem}
.article-cover{margin-top:-96px}
.table-uw{width:100%;margin:1.5rem 0;border-collapse:separate;border-spacing:0;font-size:.95rem;border:1px solid var(--uw-border);border-radius:var(--uw-radius-lg) 0 var(--uw-radius-lg) 0;overflow:hidden}
.table-uw th,.table-uw td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--uw-border)}
.table-uw thead th{background:var(--uw-dark);color:#fff;font-family:var(--uw-font-title);font-weight:700}
.table-uw tbody th{background:var(--uw-light);font-weight:700;color:var(--uw-dark)}
.table-uw tbody tr:last-child th,.table-uw tbody tr:last-child td{border-bottom:0}
.share-links__label{font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--uw-muted);margin-right:.25rem}
.avatar--lg{width:64px;height:64px;font-size:1.2rem}
.author-box .avatar{flex-shrink:0}
.prose .faq-item summary{font-size:1.05rem}
.toc ol{counter-reset:toc}

/* Réalisation : visionneuse à onglets (site navigable en iframe, maquette, logo), en CSS pur */
.viewer{position:relative}
.viewer__input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.viewer__tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.viewer__tab{display:inline-flex;align-items:center;gap:.55rem;padding:.6rem 1.15rem;border-radius:var(--uw-radius-sm) 0 var(--uw-radius-sm) 0;border:1px solid var(--uw-border);background:#fff;font-weight:700;font-size:.92rem;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.viewer__tab:hover{border-color:var(--uw-accent);color:var(--uw-primary)}
#viewer-site:checked ~ .viewer__tabs [for="viewer-site"],
#viewer-maquette:checked ~ .viewer__tabs [for="viewer-maquette"],
#viewer-logo:checked ~ .viewer__tabs [for="viewer-logo"]{background:var(--uw-dark);border-color:var(--uw-dark);color:#fff;--fa-primary-color:#fff;--fa-secondary-color:var(--uw-accent)}
.viewer__input:focus-visible ~ .viewer__tabs{outline:3px solid rgba(30,180,238,.6);outline-offset:4px;border-radius:var(--uw-radius-sm)}
.viewer__frame{border-radius:var(--uw-radius-lg) 0 var(--uw-radius-lg) 0}
.viewer__frame .browser-url{display:flex;align-items:center;gap:.5rem}
.viewer__open{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;border-radius:var(--uw-radius-sm);background:#fff;font-size:1rem}
.viewer__panel{display:none;height:620px;background:var(--uw-light)}
.viewer__panel iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.viewer__panel--maquette a,.viewer__panel--maquette img{display:block;width:100%;height:100%;object-fit:cover}
.viewer__panel--logo{place-items:center;padding:48px;background:#fff url(../assets/ds/motifs/uniweb-motif-u-clair.svg) 0 0/96px 96px}
.viewer__panel--logo img{max-width:min(480px,80%);height:auto}
#viewer-site:checked ~ .viewer__frame .viewer__panel--site,
#viewer-maquette:checked ~ .viewer__frame .viewer__panel--maquette{display:block}
#viewer-logo:checked ~ .viewer__frame .viewer__panel--logo{display:grid}
.viewer__hint{margin:.9rem 0 0;font-size:.88rem;font-weight:600;color:var(--uw-muted)}
.project-meta dd .badge-uw{margin-bottom:.2rem}
@media (max-width:991.98px){.viewer__panel{height:480px}}
@media (max-width:575.98px){.viewer__panel{height:420px}.page-intro--article{padding-bottom:110px}.article-cover{margin-top:-72px}}

/* Expertise : cartes d'interlocuteurs */
.team-member .who span{display:block}
.team-member:hover{transform:none;box-shadow:none}
.team-member::before{content:none}


/* =========================================================================
   v1.1 - page Étude gratuite : 2 formulaires (étude en 3 étapes / contact) dans des onglets
   ========================================================================= */
/* Onglets en CSS pur (boutons radio) */
.form-tabs-uw__input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.form-tabs-uw__tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:-8px 0 2rem}
.form-tabs-uw__tab{display:flex;align-items:center;gap:.85rem;padding:14px 18px;border:1px solid var(--uw-border);border-radius:var(--uw-radius) 0 var(--uw-radius) 0;background:#fff;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,box-shadow .3s var(--uw-ease),transform .3s var(--uw-ease)}
.form-tabs-uw__tab > i{font-size:1.6rem;flex-shrink:0}
.form-tabs-uw__tab strong{display:block;font-family:var(--uw-font-title);font-size:1.02rem;line-height:1.2}
.form-tabs-uw__tab small{display:block;font-size:.82rem;color:var(--uw-muted);font-weight:600}
.form-tabs-uw__tab:hover{border-color:var(--uw-accent)}
#form-tab-etude:checked ~ .form-tabs-uw__tabs [for="form-tab-etude"],
#form-tab-contact:checked ~ .form-tabs-uw__tabs [for="form-tab-contact"]{background:var(--uw-dark);border-color:var(--uw-dark);color:#fff;box-shadow:-5px 5px 0 0 var(--uw-accent);transform:translate(2px,-2px);--fa-primary-color:#fff;--fa-secondary-color:var(--uw-accent)}
#form-tab-etude:checked ~ .form-tabs-uw__tabs [for="form-tab-etude"] small,
#form-tab-contact:checked ~ .form-tabs-uw__tabs [for="form-tab-contact"] small{color:var(--uw-on-dark)}
.form-tabs-uw__input:focus-visible ~ .form-tabs-uw__tabs{outline:3px solid rgba(30,180,238,.6);outline-offset:4px}
.form-tabs-uw__pane{display:none}
#form-tab-etude:checked ~ .form-tabs-uw__pane--etude,
#form-tab-contact:checked ~ .form-tabs-uw__pane--contact{display:block;animation:uw-rise .5s var(--uw-ease) both}

/* Étapes : sans JavaScript tout s'affiche ; avec JavaScript une étape à la fois */
.form-step{border:0;margin:0 0 2rem;padding:0;min-width:0}
.form-step__nav{display:none}
.js [data-stepper] .form-step{display:none;margin:0}
.js [data-stepper] .form-step.is-active{display:block;animation:uw-rise .45s var(--uw-ease) both}
.js [data-stepper] .form-step__nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:1.5rem;margin-top:1.75rem;border-top:1px solid var(--uw-border)}
html:not(.js) [data-step-prev]{display:none}
.form-step__error{display:block;margin-top:.6rem;font-size:.85rem;font-weight:700;color:#C8312F}
.form-step__error[hidden]{display:none}
.form-reassurance{margin:1.25rem 0 0}
.form-steps li{cursor:default}
.form-steps li.is-done{color:var(--uw-primary)}

/* Pastilles de choix au format généré par Contact Form 7 (input à l'intérieur du label) */
.choice-chips .wpcf7-list-item{margin:0}
.choice-chips .wpcf7-list-item label{position:relative}
.choice-chips label:has(input:checked){background:var(--uw-dark);border-color:var(--uw-dark);color:#fff}
.choice-chips label:has(input:focus-visible){outline:3px solid rgba(30,180,238,.6);outline-offset:2px}
/* Pictos du design system selon la valeur (Contact Form 7 n'accepte pas de HTML dans les libellés) */
.choice-chips input[type="checkbox"] + .wpcf7-list-item-label{display:inline-flex;align-items:center;gap:.5rem}
.choice-chips input[type="checkbox"] + .wpcf7-list-item-label::before{content:"";width:20px;height:20px;flex-shrink:0;background:center/contain no-repeat}
.choice-chips input[value="Création de site"] + .wpcf7-list-item-label::before{background-image:url(../assets/ds/pictos/uniweb-picto-site-web.svg)}
.choice-chips input[value="Refonte"] + .wpcf7-list-item-label::before{background-image:url(../assets/ds/pictos/uniweb-picto-refonte.svg)}
.choice-chips input[value="E-commerce"] + .wpcf7-list-item-label::before{background-image:url(../assets/ds/pictos/uniweb-picto-e-commerce.svg)}
.choice-chips input[value="SEO / GEO"] + .wpcf7-list-item-label::before{background-image:url(../assets/ds/pictos/uniweb-picto-seo.svg)}
.choice-chips input[value="Google & Meta Ads"] + .wpcf7-list-item-label::before{background-image:url(../assets/ds/pictos/uniweb-picto-publicite.svg)}
.choice-chips input[value="Maintenance"] + .wpcf7-list-item-label::before{background-image:url(../assets/ds/pictos/uniweb-picto-securite.svg)}
.choice-chips input[value="IA & automatisation"] + .wpcf7-list-item-label::before{background-image:url(../assets/ds/pictos/uniweb-picto-ia.svg)}
.choice-chips input:checked + .wpcf7-list-item-label::before{filter:brightness(0) invert(1)}
@media (max-width:575.98px){
  .form-tabs-uw__tabs{grid-template-columns:1fr}
  .form-tabs-uw__tab small{display:none}
}


/* =========================================================================
   v1.1 - article en version sombre (variantes .bg-brand des composants éditoriaux)
   ========================================================================= */
/* Image de mise en avant réduite et centrée */
.page-article .article-cover{max-width:none}
.page-article .article-cover img{display:block;width:100%;height:auto;aspect-ratio:4/1;object-position:center 35%;border-radius:var(--uw-radius-lg) 0 var(--uw-radius-lg) 0;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.page-article .page-intro--article{padding-bottom:120px}
@media (max-width:991.98px){.page-article .article-cover img{aspect-ratio:3/1}}
@media (max-width:575.98px){.page-article .article-cover img{aspect-ratio:16/9}}
.page-article .article-cover{margin-top:-80px}
/* Texte */
.bg-brand .article-lead{color:#fff;border-bottom-color:var(--uw-border-dark)}
.bg-brand .prose h2,.bg-brand .prose h3{color:#fff}
.bg-brand .prose strong{color:#fff}
.bg-brand .prose a{color:var(--uw-accent)}
.bg-brand .prose ol li::marker{color:var(--uw-accent)}
/* Tableau */
.bg-brand .table-uw{border-color:var(--uw-border-dark)}
.bg-brand .table-uw th,.bg-brand .table-uw td{border-bottom-color:var(--uw-border-dark);color:var(--uw-on-dark)}
.bg-brand .table-uw thead th{background:var(--uw-primary);color:#fff}
.bg-brand .table-uw tbody th{background:var(--uw-dark-2);color:#fff}
/* Encadré, citation, FAQ, auteur */
.bg-brand .callout{background:var(--uw-dark-2);border:1px solid var(--uw-border-dark)}
.bg-brand .callout p{color:var(--uw-on-dark)}
.bg-brand .callout strong{color:#fff}
.bg-brand .quote-uw{color:#fff}
.bg-brand .author-box{border-color:var(--uw-border-dark);background:var(--uw-dark-2)}
.bg-brand .author-box strong{color:#fff}
.bg-brand .author-box p{color:var(--uw-on-dark)}
/* Colonne latérale : sommaire, encart, partage */
.bg-brand .toc{background:var(--uw-dark-2);border:1px solid var(--uw-border-dark)}
.bg-brand .toc-title,.bg-brand .share-links__label{color:var(--uw-muted-dark)}
.bg-brand .toc a{color:#fff}
.bg-brand .toc a::before{color:var(--uw-accent)}
.bg-brand .toc a:hover{color:var(--uw-accent)}
.bg-brand .aside-cta{background:var(--uw-dark-3);border:1px solid var(--uw-border-dark)}
.bg-brand .share-links a{background:var(--uw-dark-2);border:1px solid var(--uw-border-dark);--fa-primary-color:#fff;--fa-secondary-color:var(--uw-accent);color:#fff}
.bg-brand .share-links a:hover{background:var(--uw-primary);border-color:var(--uw-primary)}
/* Articles liés et navigation */
.bg-brand .post-card{background:var(--uw-dark-2);border-color:var(--uw-border-dark);color:#fff}
.bg-brand .post-card h3{color:#fff}
.bg-brand .post-card p{color:var(--uw-on-dark)}
.bg-brand .post-card:hover{color:#fff}
.bg-brand .post-card:hover h3{color:var(--uw-accent)}
.bg-brand .post-card .post-cat{color:var(--uw-accent)}
.bg-brand .project-nav a{background:var(--uw-dark-2);color:#fff;border:1px solid var(--uw-border-dark)}
.bg-brand .project-nav a span{color:var(--uw-muted-dark)}
.bg-brand .project-nav a:hover{background:var(--uw-primary);border-color:var(--uw-primary)}
.bg-brand .project-nav a:hover span{color:#fff}
/* Séparation entre le contenu et les articles liés (deux sections sombres) */
.bg-brand + .bg-brand{border-top:1px solid var(--uw-border-dark)}


/* =========================================================================
   v1.1 - équipe (L'agence) : photos carrées non déformées, carte « Rejoindre » horizontale pleine largeur
   ========================================================================= */
.team-card .photo{aspect-ratio:1/1}
.team-card img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.page-l-agence .acf-team .join-card--wide{flex-direction:row;align-items:center;justify-content:flex-start;gap:28px;height:auto;min-height:0;padding:32px 40px}
.join-card--wide .join-card__icon{margin:0;width:64px;height:72px;font-size:1.8rem;--fa-primary-color:#fff;--fa-secondary-color:#fff;--fa-secondary-opacity:.6}
.join-card--wide .join-card__body{flex:1 1 auto}
.join-card--wide .join-card__title{display:block;font-family:var(--uw-font-title);font-weight:700;font-size:clamp(1.4rem,2.2vw,1.8rem);letter-spacing:-.02em;line-height:1.15;color:#fff}
.join-card--wide .join-card__text{display:block;margin-top:.35rem;font-size:.98rem;color:rgba(255,255,255,.9)}
.join-card--wide .join-card__cta{display:inline-flex;align-items:center;gap:.6rem;flex-shrink:0;padding:.85rem 1.4rem;border-radius:var(--uw-radius-sm);background:#fff;color:var(--uw-dark);font-weight:700;white-space:nowrap;transition:transform .3s var(--uw-ease)}
.join-card--wide .join-card__cta .btn-ico{display:inline-block;width:22px;height:22px;border-radius:50%;background-position:center;background-size:13px;background-repeat:no-repeat;background-color:var(--uw-light);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6FCB' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.join-card--wide:hover .join-card__cta{transform:translateX(4px)}
@media (max-width:767.98px){
  .page-l-agence .acf-team .join-card--wide{flex-direction:column;align-items:flex-start;padding:28px}
}

/* ---------- 27. Responsive ---------- */
@media (max-width: 1199.98px) {
  .float-card.fc-1 {
    left: 0;
  }
  .float-card.fc-2 {
    right: 0;
  }
  .header-phone .ph-num {
    display: none;
  }
  .header-phone {
    padding: 0;
    width: 50px;
    justify-content: center;
  }
  .main-nav a {
    padding: 0.55rem 0.6rem;
  }
  .service-row .sr-img {
    right: 90px;
    width: 140px;
    height: 176px;
  }
  .post-mini {
    grid-template-columns: 104px 1fr;
  }
  .device-mobile {
    right: -10px;
    width: 120px;
  }
}
@media (max-width: 991.98px) {
  :root {
    --uw-header-h: 72px;
  }
  .section,
  .section-pad,
  .acf-cta_band {
    padding: 80px 0;
  }
  .section-sm {
    padding: 52px 0;
  }
  .section-curtain {
    margin-top: -48px;
    padding-top: 112px;
    border-radius: 50% 50% 0 0/48px 48px 0 0;
  }
  .acf-hero {
    min-height: 0;
    padding: 64px 0 96px;
  }
  .acf-hero .u-arcs {
    opacity: 0.5;
    --w: 300px;
    right: -60px;
  }
  .hero-visual {
    margin-top: 3rem;
  }
  .hero-visual .u-frame {
    margin: 0 auto;
    max-width: 360px;
  }
  .hero-visual .uw-glyph {
    --s: 150px !important;
    left: 0;
  }
  .hero-visual .spin-badge {
    left: 0;
  }
  .hero-glyph {
    opacity: 0.25;
  }
  .page-intro {
    min-height: 340px;
    padding: 64px 0 72px;
  }
  .page-intro .uw-glyph {
    opacity: 0.06;
  }
  .cta-box {
    padding: 52px 36px;
  }
  .cta-box .spin-badge {
    display: none;
  }
  .section-head,
  .section-head-split {
    margin-bottom: 2.5rem;
  }
  .form-card {
    padding: 34px;
  }
  .stat-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-row > div:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .stat-row > div:nth-child(n + 3) {
    border-top: 1px solid var(--uw-border);
    margin-top: 28px;
  }
  .bg-brand .stat-row > div:nth-child(n + 3) {
    border-color: var(--uw-border-dark);
  }
  .h-scroll {
    grid-auto-columns: minmax(280px, calc((100% - 24px) / 2));
  }
  .h-pin-sticky {
    padding: 80px 0;
  }
  .h-pin-track > * {
    width: min(78vw, 380px);
  }
  .h-pin-progress {
    display: none;
  }
  .u-duo {
    max-width: 520px;
    margin: 0 auto;
  }
  .sticky-uw {
    position: static;
  }
  .service-row {
    grid-template-columns: 40px 1fr 48px;
    gap: 6px 16px;
    padding: 24px 4px;
  }
  .service-row .sr-desc {
    grid-column: 2/3;
    grid-row: 2;
  }
  .service-row .sr-arrow {
    grid-column: 3;
    grid-row: 1/3;
    width: 48px;
    height: 48px;
  }
  .service-row .sr-img {
    display: none;
  }
  .service-row:hover {
    padding-left: 16px;
    padding-right: 16px;
  }
  .stack-item {
    padding: 34px;
    top: calc(var(--uw-header-h) + 16px + var(--i, 0) * 12px);
  }
  .section-index {
    font-size: clamp(5rem, 22vw, 9rem);
    top: 24px;
  }
  .footer-top {
    padding: 72px 0 52px;
  }
  .tilt:hover {
    transform: translateY(-4px);
  }
  .blog-mosaic {
    grid-template-columns: 1fr;
  }
  .post-feature {
    min-height: 460px;
  }
  .post-row {
    grid-template-columns: 200px 1fr;
    gap: 22px;
  }
  .article-cover {
    margin-top: -48px;
  }
  .browser-frame {
    --screen-h: 420px;
  }
  .device-mobile {
    display: none;
  }
  .side-nav ul {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .side-nav a {
    white-space: nowrap;
  }
}
@media (max-width: 575.98px) {
  body {
    font-size: 1rem;
  }
  .row.g-5,
  .row.gx-5 {
    --bs-gutter-x: 1.5rem;
  }
  .section,
  .section-pad,
  .acf-cta_band {
    padding: 60px 0;
  }
  .section-sm {
    padding: 40px 0;
  }
  .section-curtain {
    padding-top: 84px;
  }
  h3,
  .h3 {
    font-size: 1.3rem;
  }
  .lead,
  .acf-hero .lead {
    font-size: 1.05rem;
  }
  .acf-hero {
    padding: 48px 0 88px;
  }
  .acf-hero .u-arcs {
    display: none;
  }
  .page-intro {
    min-height: 0;
    padding: 48px 0 56px;
  }
  .site-header .logo img {
    height: 28px;
  }
  .header-actions .btn {
    display: none !important;
  }
  .section-head {
    padding-left: 24px;
  }
  .section-head::before {
    width: 5px;
    top: -18px;
  }
  .section-head.text-center {
    padding-left: 0;
    padding-top: 52px;
  }
  .cta-box {
    padding: 40px 24px;
    border-radius: var(--uw-radius-lg);
  }
  .cta-phone {
    font-size: 1.35rem;
  }
  .float-card {
    padding: 0.7rem 0.9rem;
    font-size: 0.8rem;
  }
  .float-card strong {
    font-size: 1.2rem;
  }
  .float-card.fc-2 {
    display: none;
  }
  .spin-badge {
    width: 104px;
    height: 104px;
  }
  .spin-badge text {
    font-size: 11.5px;
  }
  .hero-badge {
    position: static;
    margin-top: 1rem;
    box-shadow: none;
    border: 1px solid var(--uw-border);
  }
  .btn-group-uw .btn {
    width: 100%;
  }
  .quote-uw {
    font-size: 1.25rem;
    padding-left: 24px;
  }
  .form-card {
    padding: 26px;
  }
  .service-card,
  .feature-card,
  .step-card,
  .figure-box,
  .testi,
  .offer-card,
  .aside-cta {
    padding: 26px;
  }
  .stack-item {
    padding: 26px;
    border-radius: var(--uw-radius-lg);
  }
  .stat-row {
    grid-template-columns: 1fr;
  }
  .stat-row > div,
  .stat-row > div + div {
    padding: 22px 0 0;
    border-left: 0;
    margin-top: 0;
  }
  .stat-row > div + div {
    border-top: 1px solid var(--uw-border);
    margin-top: 22px;
  }
  .h-scroll {
    grid-auto-columns: 86%;
  }
  .h-pin-sticky {
    padding: 60px 0;
  }
  .uw-marquee {
    padding: 22px 0;
  }
  .uw-marquee.is-tilt {
    transform: rotate(-2deg) scale(1.1);
  }
  .u-duo .duo-badge {
    left: 8px;
  }
  .footer-wordmark {
    margin-top: 48px;
  }
  .post-feature {
    min-height: 400px;
    padding: 26px;
    border-radius: var(--uw-radius-lg);
  }
  .post-feature .post-date {
    left: 20px;
    top: 20px;
  }
  .post-mini {
    grid-template-columns: 88px 1fr;
    gap: 14px;
    padding: 12px;
  }
  .post-mini::after {
    display: none;
  }
  .post-row {
    grid-template-columns: 1fr;
  }
  .article-cover img {
    aspect-ratio: 4/3;
    border-radius: var(--uw-radius-lg);
  }
  .article-lead {
    font-size: 1.12rem;
  }
  .callout {
    padding: 22px 22px 22px 60px;
  }
  .callout > i,
  .callout > svg {
    left: 22px;
    top: 24px;
  }
  .browser-frame {
    --screen-h: 320px;
  }
  .gallery-grid {
    grid-template-columns: 1fr;
  }
  .project-nav {
    grid-template-columns: 1fr;
  }
  .project-nav a.is-next {
    text-align: left;
  }
  .deliverables {
    grid-template-columns: 1fr;
  }
  .author-box {
    flex-direction: column;
    align-items: flex-start;
  }
  .newsletter-form {
    flex-direction: column;
  }
}
@media (hover: none) {
  .uw-cursor,
  .uw-cursor * {
    cursor: auto;
  }
  .browser-screen {
    overflow-y: auto;
  }
  .browser-hint {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .uw-marquee {
    overflow-x: auto;
  }
  .word-rotator .wr-track > span:not(:first-child) {
    display: none;
  }
  .line-mask > span {
    transform: none;
  }
  .browser-screen {
    overflow-y: auto;
  }
}