/* Polices auto-hébergées : Manrope et Cairo, sous licence SIL OFL 1.1.
   Servies depuis notre domaine : aucune requête vers Google, donc aucune
   transmission de l'IP des visiteurs à un tiers. Sous-ensembles latins,
   font-display: swap pour afficher le texte sans attendre le téléchargement. */

@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cairo";
  src: url("/fonts/cairo-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cairo";
  src: url("/fonts/cairo-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cairo";
  src: url("/fonts/cairo-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cairo";
  src: url("/fonts/cairo-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


.content-grid {
  --padding-inline: 1rem;
  --content-max-width: 1300px;
  --breakout-max-width: 1400px;

  --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);

  display: grid;
  grid-template-columns:
    [full-width-start] minmax(var(--padding-inline), 1fr)
    [breakout-start] minmax(0, var(--breakout-size))
    [content-start] min(100% - (var(--padding-inline) * 2), var(--content-max-width))
    [content-end]
    minmax(0, var(--breakout-size)) [breakout-end]
    minmax(var(--padding-inline), 1fr) [full-width-end];
}

.content-grid > :not(.breakout, .full-width),
.full-width > :not(.breakout, .full-width) {
  grid-column: content;
}

.content-grid > .breakout {
  grid-column: breakout;
}

.content-grid > .full-width {
  grid-column: full-width;

  display: grid;
  grid-template-columns: inherit;
}

:root {
  --color-primary: #0a0d12;
  --color-primary-green: #44b131;
  --color-text-alt: #5a5a5a;
  --color-text-muted: #999999;
  --color-light-grey: #f3f3f3;

  --font-size-base: 18px;
  --font-size-h1: 5rem;
  --font-size-h2: 3rem;
  --font-size-h3: 1.5rem;
  --font-size-h4: 2rem;
  --font-size-h5: 0.8rem;
  --font-size-h6: 0.7rem;
  --font-size-p: 1rem;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --line-height-heading: 1.3;
  --line-height-text: 1.6;

  /* Rythme vertical : grand écart entre blocs, petit écart au sein d'un bloc */
  --space-block: clamp(4.5rem, 8vw, 7rem);
  --space-inner: clamp(1.75rem, 3.5vw, 2.75rem);

  --primary-font-family: "Manrope", system-ui, Helvetica, Arial, sans-serif;
  --secondary-font-family: "Cairo", sans-serif;
}

body {
  font-family: "Manrope", system-ui, Helvetica, sans-serif;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-text);
  max-width: 1440px;
  margin: 0 auto;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
  overflow-x: hidden;
  color: var(--color-text-alt);
}

p {
  margin: 1.5rem 0;
  max-width: 68ch;
}

.btn {
  display: inline-block;
  /* .btn sert aussi sur de vrais <button> (envoi du formulaire, bandeau
     cookies), qui gardent la flèche par défaut sans cette ligne. */
  cursor: pointer;
  background-color: black;
  color: white;
  text-transform: uppercase;
  padding: 0.7rem 3rem;
  border: 2px solid transparent;
  font-family: var(--secondary-font-family);
  font-size: var(--font-size-h5);
}

.btn:hover {
  background-color: white;
  color: black;
  border: 2px solid black;
  transition: all 0.3s ease-in-out;
}

.btn-outline {
  background-color: transparent;
  border: 2px solid white;
}

h3,
.h3 {
  font-family: var(--primary-font-family);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.01em;
  color: var(--color-primary);
}

h2,
.h2 {
  font-family: var(--primary-font-family);
  font-size: var(--font-size-h2);
  line-height: 1.15;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin: 1rem 0;
}

.subtitle {
  font-family: var(--secondary-font-family);
  text-transform: uppercase;
  color: var(--color-primary-green);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
}

/* Kicker placé au-dessus du titre : espacement resserré */
.subtitle + h2,
.subtitle + .h2 {
  margin-top: 0.5rem;
}

.p {
  font-family: var(--primary-font-family);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-regular);
}

/* header */

footer {
  background-color: var(--color-primary);
  color: white;
  /* Lisse le texte clair sur fond sombre (évite l'effet "plus gras") */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  margin-inline: auto;
  max-width: 1440px;
  color: white;
  background-color: transparent;
  transition: background-color 0.4s ease;
}

/* Dégradé sombre pour garder le texte blanc lisible sur le hero */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10, 13, 18, 0.6), transparent);
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.site-header.is-scrolled {
  background-color: var(--color-primary);
}

.site-header.is-scrolled::before {
  opacity: 0;
}

.site-header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  min-height: 8.5rem;
  /* La max-width doit englober le padding pour que le contenu de la barre
     tombe sur la même colonne que .content-grid, dont la colonne centrale
     fait min(100% - 2*padding, 1300px). Sans le calc, l'en-tête était
     rentré de 1 rem par rapport au reste de la page. */
  max-width: calc(1300px + var(--padding-inline, 1rem) * 2);
  margin-inline: auto;
  padding: 1.5rem var(--padding-inline, 1rem);
  transition: min-height 0.4s ease, padding 0.4s ease;
}

/* Logo calé à gauche, la navigation enchaîne juste après. position: relative
   sert d'ancrage à la roue dessinée en ::after. */
.site-header__logo {
  position: relative;
  flex: 0 0 auto;
}

/* Au survol : le logo s'efface et laisse place à une roue de voiture qui tourne.
   La rotation (--wheel-rot) et l'état actif (.wheel-active) sont pilotés par nav.js
   pour offrir une vraie inertie : la roue accélère puis ralentit en roue libre. */
.site-header__logo img {
  transition: width 0.4s ease, opacity 0.35s ease;
}

.site-header__logo.wheel-active img {
  opacity: 0;
}

.site-header__logo::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5rem;
  height: 5rem;
  translate: -50% -50%;
  rotate: var(--wheel-rot, 0deg);
  scale: 0.9;
  border-radius: 50%;
  border: none;
  /* Jante alu dessinée en SVG : 5 doubles-rayons (10 pointes), moyeu + boulons, liseré vert */
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'><path d='M62.5 50.0 L82.0 50.0 M82.0 50.0 L93.95 43.04 M82.0 50.0 L93.95 56.96'/><path d='M60.11 57.35 L75.89 68.81 M75.89 68.81 L89.65 70.2 M75.89 68.81 L81.47 81.47'/><path d='M53.86 61.89 L59.89 80.43 M59.89 80.43 L70.2 89.65 M59.89 80.43 L56.96 93.95'/><path d='M46.14 61.89 L40.11 80.43 M40.11 80.43 L43.04 93.95 M40.11 80.43 L29.8 89.65'/><path d='M39.89 57.35 L24.11 68.81 M24.11 68.81 L18.53 81.47 M24.11 68.81 L10.35 70.2'/><path d='M37.5 50.0 L18.0 50.0 M18.0 50.0 L6.05 56.96 M18.0 50.0 L6.05 43.04'/><path d='M39.89 42.65 L24.11 31.19 M24.11 31.19 L10.35 29.8 M24.11 31.19 L18.53 18.53'/><path d='M46.14 38.11 L40.11 19.57 M40.11 19.57 L29.8 10.35 M40.11 19.57 L43.04 6.05'/><path d='M53.86 38.11 L59.89 19.57 M59.89 19.57 L56.96 6.05 M59.89 19.57 L70.2 10.35'/><path d='M60.11 42.65 L75.89 31.19 M75.89 31.19 L81.47 18.53 M75.89 31.19 L89.65 29.8'/></g><circle cx='50' cy='50' r='46.5' fill='none' stroke='%23ffffff' stroke-width='3'/><circle cx='50' cy='50' r='29' fill='none' stroke='%23ffffff' stroke-width='2'/><circle cx='50' cy='50' r='12' fill='%23ffffff'/><g fill='%230a0d12'><circle cx='56.66' cy='52.16' r='1.5'/><circle cx='50.0' cy='57.0' r='1.5'/><circle cx='43.34' cy='52.16' r='1.5'/><circle cx='45.89' cy='44.34' r='1.5'/><circle cx='54.11' cy='44.34' r='1.5'/></g></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  transition: opacity 0.35s ease, scale 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    width 0.4s ease, height 0.4s ease;
  pointer-events: none;
}

.site-header.is-scrolled .site-header__logo::after {
  width: 3.3rem;
  height: 3.3rem;
}

/* Roue révélée : fondu + léger « pop » (scale-in) */
.site-header__logo.wheel-active::after {
  opacity: 1;
  scale: 1;
}

@media (prefers-reduced-motion: reduce) {
  .site-header__logo::after {
    transition: opacity 0.3s ease;
  }
}

.site-header.is-scrolled .site-header__inner {
  min-height: 5.5rem;
  padding-block: 0.85rem;
}

.site-header__logo img {
  /* display: block supprime l'espace de ligne de base sous l'image, qui
     décalait le logo vers le haut par rapport aux liens de navigation. */
  display: block;
  width: 7rem;
  /* Le PNG a des marges transparentes inégales : 125 px à gauche, et 29 px en
     haut contre 93 px en bas (sur 2209 x 2068). Sa boîte est donc bien placée,
     mais le dessin apparaît rentré à droite et remonté. On compense en
     pourcentage de ses propres dimensions, pour rester juste aux trois tailles
     du logo (7rem, 4.5rem au scroll, 5.5rem en mobile). */
  transform: translate(-5.66%, 1.94%);
  transition: width 0.4s ease;
}

.site-header.is-scrolled .site-header__logo img {
  width: 4.5rem;
}

/* Casse naturelle plutôt que capitales forcées : WIZ'Us s'écrit avec un « s »
   minuscule, et un seul libellé échappant aux capitales aurait juré au milieu
   des autres. L'interlettrage, calibré pour des capitales, est resserré en
   conséquence : à 0.12em le texte en bas-de-casse paraîtrait délavé. */
.site-nav {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  font-family: var(--secondary-font-family);
  font-size: 1.15rem;
  letter-spacing: 0.03em;
}

/* Le bouton Contact est repoussé à droite */
.site-nav__cta {
  margin-left: auto;
}

.site-nav a {
  position: relative;
  padding-block: 0.35rem;
  color: inherit;
}

/* Soulignement vert animé sur tous les liens de nav, Contact inclus (icônes réseaux exclues plus bas) */
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary-green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.site-nav a[aria-current="page"] {
  color: var(--color-primary-green);
}

/* Réseaux sociaux dans le header, à côté du bouton Contact */
.site-nav__social {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.site-nav__social a {
  display: inline-flex;
  padding: 0;
}

/* Pas de barre verte sur les icônes (spécificité suffisante pour battre le soulignement de nav) */
.site-nav .site-nav__social a::after,
.site-nav .site-nav__social a:hover::after {
  content: none;
}

.site-nav__social img {
  width: 1.35rem;
  height: 1.35rem;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.site-nav__social a:hover img {
  opacity: 1;
}

/* Bouton burger (masqué en desktop, affiché en mobile) */
.nav-toggle {
  display: none;
  position: absolute;
  right: var(--padding-inline, 1rem);
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  z-index: 4;
}

.nav-toggle::before {
  content: "\2630"; /* ☰ */
}

.site-header.nav-open .nav-toggle::before {
  content: "\2715"; /* ✕ */
}

/* Hero : hauteur naturelle pour préserver le visuel (texte incrusté) */
.hero-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Fil d'Ariane (pages internes) */
.breadcrumb {
  margin: 2.25rem 0 0;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--secondary-font-family);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--color-text-alt);
}

.breadcrumb li + li::before {
  content: "›";
  opacity: 0.55;
}

.breadcrumb a {
  color: var(--color-text-alt);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb a:hover {
  color: var(--color-primary-green);
}

.breadcrumb [aria-current="page"] {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

/* Le fil d'Ariane resserre l'écart avec la première section qui suit */
.breadcrumb + .services-intro,
.breadcrumb + .contact {
  margin-top: 2.25rem;
}

/* Hero Contact : bande sombre pleine largeur */
.contact-hero {
  background: var(--color-primary);
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: clamp(9rem, 13vw, 12rem) var(--padding-inline, 1rem) clamp(3.5rem, 6vw, 5rem);
}

/* Headers à photo de fond assombrie (le texte reste lisible par-dessus).
   Réservés à ces pages : contact-hero sert aussi à contact, articles et pages légales,
   qui gardent leur fond noir uni. */
.contact-hero--wizus,
.contact-hero--services {
  position: relative;
  isolation: isolate;
  background-position: center;
  background-size: cover;
}

.contact-hero--wizus::before,
.contact-hero--services::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(10, 13, 18, 0.94) 0%,
    rgba(10, 13, 18, 0.82) 45%,
    rgba(10, 13, 18, 0.45) 100%
  );
}

.contact-hero--wizus {
  background-image: url(./images/wizus-instructeur-formateur-evenement-automobile.jpg);
}

.contact-hero--services {
  background-image: url(./images/wizus-lexus-essai-dynamique-stand.jpg);
}

.contact-hero__inner {
  max-width: 1300px;
  margin: 0 auto;
}

.contact-hero h1 {
  margin: 0.75rem 0 1.25rem;
  font-size: clamp(2.25rem, 4.8vw, 3.75rem);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #fff;
}

.contact-hero p {
  max-width: 52ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.7;
}

/* Hero vidéo plein écran (accueil) */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--color-primary);
}

/* Image de fond du hero, en attendant le retour de la vidéo */
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Vidéo <video> auto-hébergée (si utilisée) */
.hero__media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Iframe YouTube redimensionnée pour couvrir tout l'écran (16:9) */
.hero__media > iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw; /* 16:9 basé sur la largeur */
  min-height: 100%;
  min-width: 177.78vh; /* 16:9 basé sur la hauteur */
  border: 0;
  pointer-events: none; /* pas d'interaction : c'est un fond */
}

/* Voile de lisibilité en halo plutôt qu'uniforme : l'assombrissement se
   concentre derrière le texte et s'efface vers les bords, où la photo reprend
   ses couleurs. À densité perçue égale, le titre est mieux soutenu et l'image
   moins écrasée qu'avec l'aplat à 0.35 qui couvrait tout de la même façon. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 52% 48% at 50% 52%,
    rgba(10, 13, 18, 0.62) 0%,
    rgba(10, 13, 18, 0.12) 100%
  );
  z-index: -1;
}

.hero__inner {
  text-align: center;
  color: #fff;
  padding: 0 var(--padding-inline, 1rem);
}

.hero__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3rem;
  color: #fff;
  font-family: var(--primary-font-family);
  font-weight: var(--font-weight-medium);
  margin: 0;
  /* Halo sombre très diffus, sans décalage visible : décolle le texte des
     zones claires de la photo sans se lire comme une ombre portée. */
  text-shadow: 0 1px 2px rgba(10, 13, 18, 0.28), 0 2px 20px rgba(10, 13, 18, 0.4);
}

.hero__title-main {
  font-size: clamp(2rem, 7vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.hero__title-desc {
  max-width: 32ch;
  font-family: var(--secondary-font-family);
  /* Regular plutôt que light : sur une photo, une graisse 300 en blanc
     translucide se délave et devient difficile à lire. */
  font-weight: var(--font-weight-regular);
  font-size: clamp(1.15rem, 2.8vw, 1.85rem);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.95);
}

.green {
  color: var(--color-primary-green);
  font-family: var(--secondary-font-family);
  text-transform: uppercase;
  font-size: var(--font-size-p);
}

/* main */

/* Bandeau de confiance : logos clients monochromes défilants */
.trust {
  margin: 4rem 0;
}

.trust__label {
  max-width: none;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-family: var(--secondary-font-family);
  font-size: var(--font-size-h5);
  color: var(--color-text-alt);
  margin: 0 0 2.5rem;
}

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-scroll 35s linear infinite;
}

/* Pause au survol pour laisser le temps de voir un logo (qui repasse en couleur) */
.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee img {
  height: 3rem;
  margin: 0 2.5rem;
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.marquee img:hover {
  filter: none;
  opacity: 1;
}

@keyframes marquee-scroll {
  to {
    transform: translateX(-50%);
  }
}

.twocolumn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 5rem;
  margin: 7rem 0;
  align-items: center;
}

/* La photo s'étire sur toute la hauteur de la colonne de texte, au lieu de flotter
   au centre avec du blanc au-dessus et en dessous. align-self ne vise que les
   colonnes image : l'accordéon de Services garde son alignement d'origine. */
.twocolumn .image {
  width: 100%;
  align-self: stretch;
}

.twocolumn .image img {
  width: 100%;
  height: 100%;
  min-height: clamp(320px, 30vw, 460px);
  object-fit: cover;
  display: block;
}

.gallery {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  margin: 8rem 0;
}

.gallery-services {
  justify-content: center;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(2, 1fr);
  margin: 3rem 0 7rem;
}

.gallery-services > div:last-child {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2rem;
  grid-template-areas:
    "img1 img3"
    "img2 img3";
}

.gallery-services img {
  height: 100%;
  object-fit: cover;
}

.gallery-services .img1 {
  grid-area: img1;
}
.gallery-services .img2 {
  grid-area: img2;
}
.gallery-services .img3 {
  grid-area: img3;
}

.gallery > div {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  height: clamp(440px, 48vw, 680px);
}

/* Chaque photo est une figure : l'image remplit le cadre, le nom de marque
   se pose par-dessus en bas à gauche. */
.gallery__item {
  position: relative;
  margin: 0;
  min-height: 0;
  overflow: hidden;
}

.gallery > div > .gallery__item > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery > div > .gallery__item:first-child {
  flex: 2;
}

.gallery > div > .gallery__item:last-child {
  flex: 1;
}

/* Voile dégradé sous la légende : le nom reste lisible quelle que soit la
   photo, sans assombrir l'image entière. */
.gallery__item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 1rem 0.9rem;
  font-family: var(--secondary-font-family);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to top, rgba(10, 13, 18, 0.72), rgba(10, 13, 18, 0));
  pointer-events: none;
}

.gallery > div.reverse {
  flex-direction: column-reverse;
}

.services {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
.services img {
  margin-bottom: 0.5rem;
}

.workstyle img {
  max-height: 1rem;
  margin-right: 0.5rem;
}

.margin-block {
  margin-block: 2rem;
}

.align-top {
  align-items: flex-start;
}

.fullimage img {
  margin: 5rem 0rem 0rem 0rem;
}

/* Section « Approche professionnelle » / témoignages */
.fullimage {
  margin-top: 6rem;
}

.fullimage h2 {
  margin: 0;
}

.fullimage .subtitle {
  display: block;
  margin-top: 0.75rem;
}

.keyinformations {
  background-image: url(./images/wizus-some-key-informations.jpg);
  background-size: cover;
}

.keyinformations h4 {
  color: white;
  padding-top: 400px;
  text-align: center;
  font-weight: 300;
  font-size: 1.75rem;
}

.keyinformations ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  text-align: center;
  color: white;
  font-family: var(--secondary-font-family);
  margin-bottom: 0;
}

.keyinformations ul h3 {
  color: white;
  font-weight: 900;
  font-size: 5rem;
  margin: 1rem;
}

.keyinformations p {
  line-height: 1.1;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

/* Bloc chiffres clés (bande sombre) */
.stats {
  min-width: 0;
  background: var(--color-primary);
  color: #fff;
  padding-block: clamp(3.5rem, 7vw, 5rem);
  margin-block: clamp(4.5rem, 8vw, 7rem);
}

.stats__inner {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.stats__kicker {
  margin: 0;
  font-family: var(--secondary-font-family);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #fff;
}

.stats__grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stats__grid li {
  padding: 0.25rem 1rem;
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.stats__grid li:first-child {
  border-left: none;
}

.stats__num {
  display: block;
  font-family: var(--secondary-font-family);
  font-weight: var(--font-weight-bold);
  font-size: clamp(2.5rem, 4.5vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.01em;
}

.stats__unit {
  color: var(--color-primary-green);
  margin-left: 0.05em;
}

.stats__label {
  display: block;
  margin: 0.9rem auto 0;
  max-width: 16ch;
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.68);
}

/* Libellé un peu plus long : largeur élargie pour tenir sur 2 lignes */
.stats__label--wide {
  max-width: 20ch;
}

.testimonial {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 4rem 0 7rem;
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 2.5rem 2rem 2.25rem;
  background: #f7f7f7;
  border: 1px solid rgba(10, 13, 18, 0.08);}

.testimonial-card__mark {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4rem;
  line-height: 0.7;
  color: var(--color-primary-green);
}

.testimonial-card blockquote {
  margin: 1.25rem 0 2rem;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--color-primary);
}

.testimonial-card__author {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(10, 13, 18, 0.12);
}

.testimonial-card__logo {
  flex-shrink: 0;
  width: auto;
  height: 22px;
  max-width: 66px;
  object-fit: contain;
}

.testimonial-card__meta {
  flex: 1;
  min-width: 0;
}

.testimonial-card__name {
  margin: 0;
  font-weight: var(--font-weight-bold);
  font-size: 0.95rem;
  color: var(--color-primary);
}

.testimonial-card__role {
  margin: 0.1rem 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--color-text-alt);
}

.testimonial-card__linkedin {
  flex-shrink: 0;
  display: inline-flex;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.testimonial-card__linkedin:hover {
  opacity: 1;
}

.testimonial-card__linkedin img {
  width: 22px;
  height: 22px;
}


/* --- Témoignages "minimal" : citation en fondu/flou + avatars cliquables --- */
.tmini {
  /* Gouttière réservée aux flèches de chaque côté de la citation. La ligne
     auteur s'aligne dessus pour rester dans l'axe du texte. */
  --tmini-arrow: 38px;
  --tmini-gutter: clamp(0.5rem, 2vw, 1.25rem);
  box-sizing: border-box;
  max-width: calc(640px + 2 * (var(--tmini-arrow) + var(--tmini-gutter)));
  margin: clamp(4rem, 8vw, 7rem) auto;
  padding-inline: 1rem;
}

/* Sans flèches (un seul témoignage), pas de gouttière à réserver. */
.tmini--solo {
  --tmini-arrow: 0px;
  --tmini-gutter: 0px;
}

.tmini__stage {
  display: flex;
  align-items: center;
  gap: var(--tmini-gutter);
  margin-bottom: 2.5rem;
}

.tmini__quotes {
  display: grid;
  align-items: center; /* citation centrée verticalement : vide équilibré haut/bas */
  flex: 1 1 auto;
  min-width: 0;
}

/* Toutes les citations occupent la même cellule de grille : le conteneur
   prend la hauteur de la plus haute, sans JS ni chevauchement. */
.tmini__quote {
  grid-area: 1 / 1;
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  font-weight: 300;
  line-height: 1.55;
  color: var(--color-primary);
  opacity: 0;
  transform: translateY(12px);
  filter: blur(6px);
  transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease;
  pointer-events: none;
}

.tmini__quote.is-active {
  opacity: 1;
  transform: none;
  filter: blur(0);
  pointer-events: auto;
}

.tmini__quote::before {
  content: "\201C";
}
.tmini__quote::after {
  content: "\201D";
}

.tmini__author {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-inline: calc(var(--tmini-arrow) + var(--tmini-gutter));
}

.tmini__avatars {
  display: flex;
  flex: 0 0 auto;
  gap: 0.5rem; /* espacés, plus de superposition */
}

.tmini__avatar {
  width: 44px;
  height: 44px;
  padding: 8px;
  border: 1px solid rgba(10, 13, 18, 0.12);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(10, 13, 18, 0.06);
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0.5; /* estompé mais en couleur (pas de gris) */
  transition: transform 0.25s ease, opacity 0.25s ease, border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.tmini__avatar img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Le logo Renault est vertical : sans limite il remplit le cercle et paraît
   bien plus gros que les logos larges. On plafonne sa hauteur pour l'équilibrer,
   et un léger décalage optique vers le haut le recentre visuellement. */
.tmini__avatar img[src*="logo-renault"] {
  max-height: 65%;
  transform: translateY(-13%);
}


.tmini__avatar:hover {
  opacity: 1;
}

.tmini__avatar.is-active {
  opacity: 1;
  transform: scale(1.12);
  border-color: var(--color-primary-green);
  box-shadow: 0 0 0 2px rgba(68, 177, 49, 0.35), 0 4px 12px rgba(10, 13, 18, 0.12);
  z-index: 2;
}

.tmini__divider {
  flex: 0 0 auto;
  width: 1px;
  height: 34px;
  background: rgba(10, 13, 18, 0.15);
}

/* Flèches précédent/suivant : second moyen de navigation, en retrait des
   logos qui restent l'entrée principale. */
.tmini__arrow {
  flex: 0 0 auto;
  width: var(--tmini-arrow);
  height: var(--tmini-arrow);
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(10, 13, 18, 0.15);
  border-radius: 50%;
  background: #fff;
  color: var(--color-primary);
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.tmini__arrow:hover {
  border-color: var(--color-primary-green);
  color: var(--color-primary-green);
}

.tmini__arrow:focus-visible {
  outline: 2px solid var(--color-primary-green);
  outline-offset: 2px;
}

.tmini__info {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
}

/* Métas empilées dans la même cellule : le conteneur prend la taille de la
   plus grande, sans position absolue (évite l'effondrement en colonne mobile). */
.tmini__meta {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.tmini__meta.is-active {
  opacity: 1;
  transform: none;
}

.tmini__name {
  font-weight: var(--font-weight-bold);
  font-size: 0.95rem;
  color: var(--color-primary);
}

.tmini__role {
  margin-top: 0.1rem;
  font-size: 0.8rem;
  color: var(--color-text-alt);
}

@media (prefers-reduced-motion: reduce) {
  .tmini__quotes,
  .tmini__quote,
  .tmini__meta,
  .tmini__avatar {
    transition: none;
  }
}

.customer {
  font-size: var(--font-size-h6);
  text-transform: uppercase;
}

.brand {
  color: var(--color-primary-green);
  font-weight: var(--font-weight-bold);
  font-size: 0.85rem;
}

.quote-mark {
  position: absolute;
  z-index: -3;
  left: 50px;
}
.wizus-testimonial {
  position: relative;
  text-align: center;
  padding-top: 10rem;
  padding-bottom: 7rem;
  background-color: var(--color-primary);
}
.wizus-testimonial blockquote {
  font-size: 2rem;
  padding-left: 10rem;
  padding-right: 10rem;
  color: var(--color-light-grey);
  position: relative;
  z-index: 10;
}

.wizusservices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: 3rem;
  margin-bottom: 4rem;
}

/* Chaque prestation dans une card sobre */
.wizusservices > div {
  display: flex;
  flex-direction: column;
  padding: 2.25rem 2rem;
  background: #f7f7f7;
  border: 1px solid rgba(10, 13, 18, 0.08);
}

.svc-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.25rem;
}

.svc-head img {
  height: 2rem;
  width: auto;
  flex-shrink: 0;
}

/* Icônes en ligne : une par prestation, même style que l'ancienne (trait noir 2px) */
.svc-head svg {
  height: 1.75rem;
  width: 1.75rem;
  flex-shrink: 0;
  color: var(--color-primary);
  /* Trait affiné : la grille 24px agrandie à 32px épaissirait le trait de 2 à ~2,7px */
  stroke-width: 1.5;
}

.svc-head h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: var(--font-weight-medium);
}

/* Intro Services : header + accroche + valeurs, puis en-tête de la grille */
.services-intro {
  margin-top: 6rem;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 4rem;
  align-items: stretch;
}

.services-intro__content {
  align-self: center;
}

.services-intro__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 400px;
  object-fit: cover;}

.services-intro__lead {
  max-width: 60ch;
}

/* CTA en fin de bloc texte : on le décolle du paragraphe */
.services-intro__content > .btn {
  margin-top: 1.75rem;
}

.services-intro__values {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 2rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}

.services-intro__values li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.marker__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: #f2f2f2;
  color: var(--color-primary-green);
}

.marker__icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

.marker__text {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--color-text-alt);
}

.marker__text b {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--color-primary);
  font-size: 1rem;
}

.services-heading {
  margin-top: 5.5rem;
  text-align: center;
}

/* CTA ajoutés en fin de section : on les décolle du contenu */
.services-heading .btn {
  margin-top: 1.75rem;
}

/* CTA de section : centré pour ne pas paraître rattaché à la 1re colonne */
.method__inner > .btn {
  display: block;
  width: fit-content;
  margin: 3rem auto 0;
}

.services-heading p {
  max-width: 56ch;
  margin: 1rem auto 0;
}

.wizusservices p {
  margin: 0 0 1.25rem;
  max-width: none;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-text-alt);
}

/* Les puces sont poussées en bas de carte : les traits de séparation s'alignent
   sur toute la rangée, quel que soit le nombre de lignes du texte et l'écran */
.wizusservices ul {
  margin: auto 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid rgba(10, 13, 18, 0.1);
  list-style: none;
}

.wizusservices li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-bottom: 0.55rem;
  font-size: 0.92rem;
  line-height: 1.4;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-alt);
}

.wizusservices li:last-child {
  margin-bottom: 0;
}

.wizusservices li img {
  max-height: 0.9rem;
  margin: 0.2rem 0 0;
  flex-shrink: 0;
}
.btncenter {
  display: flex;
  justify-content: center;
}

.banner {
  margin-top: 10rem;
}

/* Bloc Méthode (page Services) : réassurance / désamorçage du risque */
/* Bande sombre « Notre méthode » : process numéroté 01-04 */
/* Photo de flotte en fond, sous un voile sombre : le texte blanc et les
   chiffres verts gardent leur contraste. La couleur reste en repli si
   l'image ne charge pas. */
.method {
  margin-block: clamp(4.5rem, 8vw, 7rem);
  padding-block: clamp(4rem, 8vw, 6rem);
  background-color: var(--color-primary);
  background-image: linear-gradient(
      rgba(10, 13, 18, 0.86),
      rgba(10, 13, 18, 0.86)
    ),
    url("/images/wizus-flotte-vehicules-vue-aerienne.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.method__inner {
  min-width: 0;
}

.method h2 {
  color: #fff;
}

.method__grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem 2rem;
  margin-top: 3.25rem;
}

.method__num {
  display: block;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  font-family: var(--secondary-font-family);
  font-weight: var(--font-weight-bold);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--color-primary-green);
}

.method__grid h3 {
  margin: 0 0 0.6rem;
  color: #fff;
  font-size: 1.15rem;
}

.method__grid p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
}

/* Apparition en cascade des étapes au scroll (activée par JS via .reveal-ready) */
.method.reveal-ready .method__grid > div {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.method.reveal-ready.is-visible .method__grid > div {
  opacity: 1;
  transform: none;
}

.method.reveal-ready.is-visible .method__grid > div:nth-child(2) {
  transition-delay: 0.12s;
}
.method.reveal-ready.is-visible .method__grid > div:nth-child(3) {
  transition-delay: 0.24s;
}
.method.reveal-ready.is-visible .method__grid > div:nth-child(4) {
  transition-delay: 0.36s;
}

@media (prefers-reduced-motion: reduce) {
  .method.reveal-ready .method__grid > div {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Mobile : pas d'animation de révélation, le contenu s'affiche directement */
@media (max-width: 860px) {
  .method.reveal-ready .method__grid > div {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Accordéon d'images (bloc « Des essais sur mesure ») : survol pour déplier */
.accordion {
  display: flex;
  gap: 0.5rem;
  height: clamp(360px, 34vw, 480px);
  min-width: 0;
}

.accordion__panel {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: flex 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 13, 18, 0.75) 0%, rgba(10, 13, 18, 0) 55%);
}

/* Panneau ouvert par défaut = le premier ; le survol prend le relais */
.accordion__panel:first-child {
  flex: 4.5;
}

.accordion:hover .accordion__panel:first-child {
  flex: 1;
}

.accordion:hover .accordion__panel:hover {
  flex: 4.5;
}

.accordion__label {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  z-index: 1;
  color: #fff;
  font-family: var(--secondary-font-family);
  font-weight: var(--font-weight-bold);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: translateX(-50%) rotate(180deg);
}

/* Label horizontal quand le panneau est ouvert */
.accordion__panel:first-child .accordion__label {
  writing-mode: horizontal-tb;
  left: 1.5rem;
  transform: none;
}

.accordion:hover .accordion__panel:first-child .accordion__label {
  writing-mode: vertical-rl;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
}

.accordion:hover .accordion__panel:hover .accordion__label {
  writing-mode: horizontal-tb;
  left: 1.5rem;
  transform: none;
}

/* Page Contact : accroche + coordonnées à gauche, formulaire à droite */
.contact {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 4.5rem;
  margin: 6rem 0;
  align-items: start;
}

.contact__intro p {
  max-width: 40ch;
  margin: 0;
  color: var(--color-text-alt);
  line-height: 1.7;
}

.contact__coords {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.contact__coord-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.contact__coord address {
  font-style: normal;
  line-height: 1.65;
  color: var(--color-primary);
}

.contact__coord .footer-phone {
  margin-top: 0;
  font-size: 1.05rem;
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contact__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

/* Champs en filet (soulignés) pour un rendu épuré, haut de gamme */
.contact__form input,
.contact__form textarea {
  width: 100%;
  padding: 0.75rem 0.25rem;
  border: none;
  border-bottom: 1px solid rgba(10, 13, 18, 0.22);
  background: transparent;
  font-family: var(--primary-font-family);
  font-size: 1.05rem;
  color: var(--color-primary);
  transition: border-color 0.3s ease;
}

.contact__form input::placeholder,
.contact__form textarea::placeholder {
  color: var(--color-text-muted);
}

.contact__form input:focus,
.contact__form textarea:focus {
  outline: none;
  border-bottom-color: var(--color-primary-green);
}

.contact__form textarea {
  min-height: 130px;
  resize: vertical;
}

/* Select « Objet de la demande » : même filet, flèche custom */
.contact__form select {
  width: 100%;
  padding: 0.75rem 0.25rem;
  border: none;
  border-bottom: 1px solid rgba(10, 13, 18, 0.22);
  background: transparent;
  font-family: var(--primary-font-family);
  font-size: 1.05rem;
  color: var(--color-primary);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a5a5a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.25rem center;
  transition: border-color 0.3s ease;
}

.contact__form select:focus {
  outline: none;
  border-bottom-color: var(--color-primary-green);
}

/* Prompt grisé tant qu'aucune option réelle n'est choisie */
.contact__form select:invalid {
  color: var(--color-text-muted);
}

.contact__file {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.contact__file input {
  font-size: 0.85rem;
  color: var(--color-text-alt);
  text-transform: none;
  letter-spacing: normal;
}

.contact__file input::file-selector-button {
  margin-right: 0.9rem;
  padding: 0.55rem 1.2rem;
  border: 1px solid rgba(10, 13, 18, 0.25);
  background: transparent;
  font-family: var(--secondary-font-family);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.contact__file input::file-selector-button:hover {
  border-color: var(--color-primary);
  background: #f5f5f5;
}

.contact__required {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* Mention RGPD sous le formulaire : l'information doit être donnée au moment
   de la collecte (art. 13), un lien en pied de page ne suffit pas. Volontairement
   discrète pour ne pas concurrencer le bouton d'envoi. */
.contact__legal {
  margin: 1.5rem 0 0;
  max-width: 60ch;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.contact__legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.contact__legal a:hover {
  color: var(--color-primary);
}

.contact__form .btn {
  align-self: flex-start;
  margin-top: 0.75rem;
  padding: 0.9rem 3.5rem;
  cursor: pointer;
}

/* footer */

footer {
  padding-top: 9rem;
  padding-bottom: 2.5rem;
}
footer h2 {
  color: var(--color-light-grey);
  font-size: var(--font-size-h2);
}

.news {
  margin-top: 5rem;
}

/* Cartes réalisation / newsroom */
.news-card {
  position: relative;
  display: block;
  height: clamp(380px, 42vw, 520px);
  overflow: hidden;
  color: #fff;
}

/* Badge marque : pastille blanche en haut de carte, hors du bloc de texte.
   Le dégradé du ::after ne couvre pas le haut de l'image, d'où le fond blanc
   opaque qui détache le logo quelle que soit la photo. */
.news-card__badge {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0 0.8rem;
  border-radius: 999px;
  background: #fff;
}

.news-card__badge img {
  height: 1rem;
  width: auto;
  max-width: 68px;
  object-fit: contain;
}

/* Ligne de métadonnées au-dessus du titre : marque, puis date de l'événement.
   Le wrap évite que la date passe sous le voile si le nom du client est long. */
.news-card__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.45rem;
}

/* Nom de la marque en kicker au-dessus du titre : reprend la typo de .subtitle. */
.news-card__brand {
  font-family: var(--secondary-font-family);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  color: var(--color-primary-green);
}

/* Date volontairement en retrait par rapport à la marque : même graisse et même
   taille, mais en blanc atténué plutôt qu'en vert. */
.news-card__date {
  font-family: var(--secondary-font-family);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.6);
}

.news-card__brand + .news-card__date::before {
  content: "\00b7";
  margin-right: 0.45rem;
  color: rgba(255, 255, 255, 0.4);
}

/* Dernière carte du carrousel : pas de photo, fond sombre uni. Elle se distingue
   franchement des réalisations sans rompre le gabarit ni le rythme du texte. */
.news-card--cta {
  display: flex;
  align-items: flex-end;
  background: var(--color-primary);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: background 0.4s ease, border-color 0.4s ease;
}

.news-card--cta:hover {
  background: #11161f;
  border-color: rgba(255, 255, 255, 0.3);
}

/* Sans photo, il n'y a rien à assombrir : le voile n'a plus lieu d'être et le
   bloc de texte reprend sa place dans le flux. */
.news-card--cta::after {
  content: none;
}

.news-card--cta .news-card__body {
  position: static;
  width: 100%;
}

.news-card--cta .news-card__title {
  display: block;
}

.news-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease, filter 0.6s ease;
}

.news-card:hover .news-card__img {
  transform: scale(1.06);
  filter: brightness(0.92);
}

/* Voile arrêté à mi-hauteur : il ne porte plus que la marque et le titre,
   les deux tiers hauts de la photo restent intacts. */
.news-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 13, 18, 0.88) 0%,
    rgba(10, 13, 18, 0.5) 24%,
    rgba(10, 13, 18, 0) 54%
  );
}

.news-card__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  /* Rythme du bloc : marque/date collées au titre, CTA un peu plus détaché. */
  gap: 0.6rem;
  padding: 2rem;
}

.news-card__title {
  /* Le reset ne neutralise pas les marges des titres : sans ce margin, le h3
     ajoute 1em au-dessus et en dessous, qui s'empilent avec le gap du body. */
  margin: 0;
  color: #fff;
  font-size: clamp(1.3rem, 1.9vw, 1.6rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Repère de clic volontairement discret : petit et en retrait, il se révèle au
   survol (blanc plein + flèche qui avance). Toute la carte est cliquable, mais
   sans ce libellé rien ne le dit explicitement. */
.news-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.55rem;
  font-family: var(--secondary-font-family);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.3s ease;
}

.news-card:hover .news-card__more {
  color: #fff;
}

.news-card__more span {
  transition: transform 0.3s ease;
}

.news-card:hover .news-card__more span {
  transform: translateX(4px);
}





/* Flèches de navigation (carrées, cohérentes avec l'identité « angles droits ») */
.blogsplide .splide__arrow {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.4);
  opacity: 1;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.blogsplide .splide__arrow--prev {
  left: -0.5rem;
}

.blogsplide .splide__arrow--next {
  right: -0.5rem;
}

.blogsplide .splide__arrow svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: #fff;
  transition: fill 0.2s ease;
}

.blogsplide .splide__arrow:hover {
  background: #fff;
  border-color: #fff;
}

.blogsplide .splide__arrow:hover svg {
  fill: var(--color-primary);
}

.blogsplide .splide__arrow:disabled {
  opacity: 0.25;
}

/* Pagination (points) */
.blogsplide .splide__pagination {
  position: static;
  margin-top: 2.5rem;
  gap: 0.5rem;
}

.blogsplide .splide__pagination__page {
  width: 8px;
  height: 8px;
  margin: 0;
  background: rgba(255, 255, 255, 0.28);
  opacity: 1;
  transition: background 0.3s ease, transform 0.3s ease;
}

.blogsplide .splide__pagination__page.is-active {
  background: #fff;
  transform: scale(1.25);
}

/* Newsroom sur fond clair (home) : puces sombres pour rester visibles */
.home-main .blogsplide .splide__pagination__page {
  background: rgba(10, 13, 18, 0.22);
}

.home-main .blogsplide .splide__pagination__page.is-active {
  background: var(--color-primary);
}

/* CTA sous les réalisations */
.btn-light {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Page 404 : même traitement que le hero, photo plein cadre sous voile sombre */
.notfound {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 70vh;
  overflow: hidden;
  text-align: center;
  color: #fff;
}

.notfound__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.notfound::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(10, 13, 18, 0.7);
}

.notfound__inner {
  max-width: 34rem;
  padding: 4rem var(--padding-inline, 1rem);
}

.notfound__inner h1 {
  margin: 0.5rem 0 1rem;
  color: #fff;
}

.notfound__inner p {
  margin-bottom: 2rem;
  color: rgba(255, 255, 255, 0.85);
}

.notfound__inner .btn {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
}

.notfound__inner .btn:hover {
  background: #fff;
  color: var(--color-primary);
  border-color: #fff;
}

.btn-light:hover {
  background: #fff;
  color: var(--color-primary);
  /* bordure forcée à 1px (comme au repos) pour éviter que la section grandisse
     de 2px au survol et fasse "bouger" le fond en cover */
  border: 1px solid #fff;
}

/* CTA final (bandeau de conversion avant le footer) */
.cta-final {
  position: relative;
  isolation: isolate;
  padding-block: clamp(5rem, 10vw, 8rem);
  background: url(./images/wizus-coulisses-evenement-automobile.jpg) center / cover;
  color: #fff;
}

/* Chaque page a sa propre photo de CTA final (l'accueil garde la sienne) */
.cta-final--services {
  background-image: url(./images/wizus-briefing-depart-operation-automobile.jpg);
}

.cta-final--wizus {
  background-image: url(./images/wizus-equipe-agence-evenementielle-automobile.jpg);
}

.cta-final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(10, 13, 18, 0.94) 0%,
    rgba(10, 13, 18, 0.78) 42%,
    rgba(10, 13, 18, 0.35) 100%
  );
}

.cta-final__inner {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6rem;
  text-align: left;
}

.cta-final h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.75rem, 4vw, 3rem);
}

.cta-final p {
  max-width: 58ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.65;
}

.cta-final .btn {
  margin-top: 0.5rem;
}

.footersection {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 3rem 4rem;
  align-items: start;
  margin-top: 6rem;
  font-size: 0.85rem;
}

/* Pages sans newsroom : la section identité est en tête du footer,
   on retire la marge haute pour ne pas doubler le padding du footer */
.footersection:first-child {
  margin-top: 0;
}

.footersection p {
  color: var(--color-text-muted);
  margin: 1.5rem 0 0;
}

/* Bloc identité : logo à gauche, texte + téléphone à droite */
.businessresume {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.5rem;
  align-items: start;
}

.businessresume .logowizus {
  grid-row: 1 / span 2;
  align-self: start;
}

.businessresume p {
  margin-top: 0;
}

.footersection .logowizus {
  height: 5.5rem;
}

.footersection img {
  height: 2.5rem;
}

.footersection ol {
  color: var(--color-text-muted);
}

.footercol h6 {
  margin: 0 0 1.25rem;
}

.footercol li {
  margin-bottom: 0.6rem;
}

.footersection a:hover {
  color: var(--color-primary-green);
  transition: all 0.2s ease-in-out;
}

.footersection h6 {
  color: var(--color-light-grey);
  font-size: 0.92rem;
  font-weight: var(--font-weight-bold);
  margin: 0;
}

.footer-phone {
  display: inline-block;
  margin-top: 1.5rem;
  color: var(--color-primary-green);
  font-family: var(--secondary-font-family);
  text-transform: uppercase;
}

/* Réseaux sociaux + téléphone : empilés sur desktop, alignés sur une ligne en mobile */
.social-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.social-row .social-icons,
.social-row .footer-phone {
  margin-top: 0;
}

.social-icons {
  display: flex;
  gap: 0.85rem;
  margin-top: 1.25rem;
}

.social-icons img {
  height: 1.6rem;
}

footer hr {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 3rem;
}

.wizusrigths p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  max-width: none;
  column-gap: 1.5rem;
  row-gap: 0.4rem;
  font-family: var(--secondary-font-family);
  color: var(--color-text-muted);
  font-size: 0.7rem;
  margin-top: 1.25rem;
}

/* Le copyright pousse les liens légaux à droite */
.wizusrigths p .legal-links {
  margin-left: auto;
}

/* ---------- Navigation mobile ---------- */
@media (max-width: 860px) {
  .nav-toggle {
    display: flex;
  }

  /* En mobile : barre simple, logo à gauche, burger à droite */
  .site-header__inner {
    justify-content: space-between;
    min-height: auto;
  }

  /* z-index : le logo reste visible au-dessus de l'overlay du menu ouvert */
  .site-header__logo {
    z-index: 5;
  }

  .site-header__logo img {
    width: 5.5rem;
  }

  .site-nav {
    flex: none;
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    font-size: 1.4rem;
    /* Resserré comme en desktop : l'interlettrage large était calibré pour des
       capitales, la navigation est désormais en casse naturelle. */
    letter-spacing: 0.03em;
    background-color: var(--color-primary);
    transform: translateX(100%);
    transition: transform 0.4s ease;
  }

  /* Dans l'overlay, le Contact reprend sa place dans la pile */
  .site-nav__cta {
    margin-left: 0;
  }

  .site-nav__social {
    margin-left: 0;
  }

  .site-header.nav-open .site-nav {
    transform: translateX(0);
  }

  /* Le logo et le burger restent visibles au-dessus de l'overlay */
  .site-header.nav-open .site-header__inner {
    z-index: 3;
  }

  body.no-scroll {
    overflow: hidden;
  }

  .stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.75rem 1rem;
  }

  .stats__grid li,
  .stats__grid li:first-child {
    border-left: none;
  }

  .testimonial {
    grid-template-columns: 1fr;
  }

  .tmini {
    margin-block: 3rem;
  }

  /* Flèches plus compactes : la citation garde de la largeur */
  .tmini:not(.tmini--solo) {
    --tmini-arrow: 32px;
    --tmini-gutter: 0.5rem;
  }

  .tmini__stage {
    margin-bottom: 2rem;
  }

  .tmini__quote {
    font-size: 1.15rem;
    line-height: 1.5;
  }

  .tmini__author {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
  }

  .tmini__info {
    width: 100%;
  }

  .tmini__divider {
    display: none;
  }

  .tmini__avatars {
    gap: 0.4rem;
    flex-wrap: wrap;
  }

  .tmini__avatar {
    width: 36px;
    height: 36px;
    padding: 6px;
  }

  /* Rythme vertical resserré sur mobile */
  :root {
    --space-block: clamp(3rem, 9vw, 5rem);
    --space-inner: clamp(1.5rem, 5vw, 2.25rem);
  }

  /* Sections deux colonnes : empilées (texte puis image) */
  .twocolumn {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Galerie : 2 images par ligne, hauteur maîtrisée */
  .gallery {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .gallery > div,
  .gallery > div.reverse {
    flex-direction: row;
    height: auto;
    gap: 1rem;
  }

  .gallery > div > .gallery__item,
  .gallery > div > .gallery__item:first-child,
  .gallery > div > .gallery__item:last-child {
    flex: 1 1 0;
    height: clamp(130px, 38vw, 200px);
  }

  .gallery__item figcaption {
    padding: 1.75rem 0.7rem 0.6rem;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
  }

  /* Chiffres : taille réduite pour tenir en 2 colonnes sans déborder */
  .stats__num {
    font-size: clamp(1.5rem, 6vw, 2.3rem);
  }

  .stats__grid li {
    padding: 0 0.25rem;
  }

  /* Footer allégé : on garde l'identité + réseaux, on masque les listes de
     liens (Navigation / Services) redondantes avec le menu burger */
  /* Footer resserré sur mobile : moins d'espace noir vide au-dessus,
     blocs plus rapprochés (le 9rem de padding-top est pensé pour le desktop) */
  footer {
    padding-top: 4.5rem;
  }

  .footersection {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 4rem;
  }

  .footersection > .footercol:nth-child(2),
  .footersection > .footercol:nth-child(3) {
    display: none;
  }

  footer hr {
    margin-top: 2rem;
  }

  /* Téléphone aligné sur la même ligne que les réseaux sociaux (gain de hauteur) */
  .social-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
  }

  /* Bloc Méthode (Services) : 2 colonnes sur mobile */
  .method__grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1.25rem;
  }

  .services-intro {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .services-intro__media img {
    min-height: 260px;
  }

  .services-intro__values {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }

  /* Cards prestations : empilées sur mobile */
  .wizusservices {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 2rem;
    margin-bottom: 3.5rem;
  }

  /* Page Services : rythme vertical resserré sur mobile
     (cette page n'est pas scopée .home-main, ses marges restent sinon celles du desktop) */
  .services-heading {
    margin-top: 3.5rem;
  }

  .twocolumn {
    margin: 3.5rem 0;
  }

  .gallery-services {
    margin: 2rem 0 3.5rem;
  }

  .method {
    margin-block: 3.5rem;
    padding-block: clamp(2.75rem, 9vw, 3.75rem);
  }

  .cta-final {
    padding-block: clamp(3.5rem, 12vw, 5rem);
  }

  .trust {
    margin: 3rem 0;
  }

  /* Page Wiz'Us : mêmes marges resserrées pour valeurs / chiffres / témoignage */
  .values {
    margin-block: 3.5rem;
  }

  .stats {
    margin-block: 3.5rem;
  }

  .quote-feature {
    margin-block: 3.5rem;
  }

  /* Contact : colonnes empilées, champs Nom/Prénom empilés */
  .contact {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin: 3rem 0;
  }

  .contact__row {
    grid-template-columns: 1fr;
  }

  /* Bouton d'envoi pleine largeur : cible tactile confortable */
  .contact__form .btn {
    width: 100%;
    text-align: center;
    padding-inline: 1rem;
  }

  /* Accordéon : grille de tuiles en mobile (pas de survol sur tactile).
     Chaque image occupe une vraie tuile, plus de bandes rognées. */
  .accordion {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: auto;
    gap: 0.6rem;
  }

  .accordion__panel,
  .accordion__panel:first-child {
    flex: none;
    height: clamp(130px, 34vw, 170px);
  }

  .accordion__label,
  .accordion__panel:first-child .accordion__label {
    writing-mode: horizontal-tb;
    left: 1rem;
    bottom: 1rem;
    transform: none;
    font-size: 0.85rem;
    white-space: normal;
  }

  /* Le tactile déclenche :hover au tap : on neutralise la bascule des labels
     et l'agrandissement, pour que les tuiles restent figées en mobile. */
  .accordion:hover .accordion__panel,
  .accordion:hover .accordion__panel:first-child,
  .accordion:hover .accordion__panel:hover {
    flex: none;
  }

  .accordion:hover .accordion__panel:first-child .accordion__label,
  .accordion:hover .accordion__panel:hover .accordion__label {
    writing-mode: horizontal-tb;
    left: 1rem;
    bottom: 1rem;
    transform: none;
  }
}

/* ================================================================
   Rythme vertical harmonisé de la home (scopé à .home-main)
   Grand écart entre blocs, petit écart au sein d'un même bloc.
   ================================================================ */
.home-main > .trust,
.home-main > .twocolumn,
.home-main > .stats,
.home-main > .gallery,
.home-main > .subtitle,
.home-main > .fullimage,
.home-main > .cta-final {
  margin: var(--space-block) 0 0;
}

.home-main > .subtitle + h2 {
  margin: 0.5rem 0 0;
}

.home-main > .news,
.home-main > .testimonial {
  margin: var(--space-inner) 0 0;
}

/* ================================================================
   Page Wiz'Us : bloc Valeurs + témoignage signature
   ================================================================ */
.values {
  margin-block: clamp(4.5rem, 8vw, 7rem);
  text-align: center;
}

.values__head h2 {
  margin-top: 0.5rem;
}

.values__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem 2rem;
  margin: 3.5rem 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.values__grid li {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.values__grid h3 {
  margin: 0;
  font-size: 1.15rem;
}

.values__grid p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-text-alt);
}

/* Témoignage signature : une citation centrée, sobre, sur fond clair */
/* Témoignage compact de la page Contact : placé sous les coordonnées, dans la
   colonne de gauche, il rassure au moment où le visiteur remplit le formulaire */
.contact__quote {
  margin: 2.75rem 0 0;
  padding: 1.75rem;
  background: #f7f7f7;
  border: 1px solid rgba(10, 13, 18, 0.08);
}

.contact__quote-mark {
  display: block;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--color-primary-green);
}

.contact__quote blockquote {
  margin: 0.35rem 0 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--color-primary);
}

.contact__quote figcaption {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.35rem;
}

.contact__quote figcaption img {
  height: 1.5rem;
  width: auto;
  max-width: 70px;
  object-fit: contain;
  flex-shrink: 0;
}

.contact__quote-name {
  margin: 0;
  font-size: 0.9rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
}

.contact__quote-role {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  color: var(--color-text-alt);
}

.quote-feature {
  max-width: 760px;
  margin: clamp(4.5rem, 8vw, 7rem) auto;
  text-align: center;
}

.quote-feature__mark {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 5rem;
  line-height: 0.6;
  color: var(--color-primary-green);
}

.quote-feature blockquote {
  margin: 1.25rem 0 2rem;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--color-primary);
}

.quote-feature__author {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.quote-feature__author img {
  height: 30px;
  width: auto;
  max-width: 90px;
  object-fit: contain;
}

.quote-feature__author > div {
  text-align: left;
}

.quote-feature__name {
  margin: 0;
  font-weight: var(--font-weight-bold);
  font-size: 0.95rem;
  color: var(--color-primary);
}

.quote-feature__role {
  margin: 0.1rem 0 0;
  font-size: 0.8rem;
  color: var(--color-text-alt);
}

/* FAQ (accordéon natif <details>, page Services) */
.faq {
  margin-block: clamp(4.5rem, 8vw, 7rem);
}

.faq .services-heading {
  margin-top: 0;
}

.faq__list {
  max-width: 820px;
  margin: 3rem auto 0;
  border-top: 1px solid rgba(10, 13, 18, 0.14);
}

.faq__item {
  border-bottom: 1px solid rgba(10, 13, 18, 0.14);
}

.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.4rem 0;
  font-size: 1.15rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  transition: color 0.2s ease;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary:hover {
  color: var(--color-primary-green);
}

/* Indicateur + / − */
.faq__item summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-primary-green);
}

.faq__item[open] summary::after {
  content: "−";
}

.faq__answer {
  padding: 0 0 1.6rem;
}

.faq__answer p {
  max-width: 68ch;
  margin: 0;
  color: var(--color-text-alt);
  line-height: 1.7;
}

/* Pages légales (mentions légales, confidentialité) */
.legal {
  max-width: 820px;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(4.5rem, 8vw, 7rem);
}

.legal h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  margin: 2.75rem 0 1rem;
}

.legal h2:first-of-type {
  margin-top: 0;
}

.legal p,
.legal li {
  color: var(--color-text-alt);
  line-height: 1.75;
  max-width: 72ch;
}

.legal p {
  margin: 0 0 1rem;
}

.legal ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.legal li {
  margin-bottom: 0.4rem;
}

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

.legal address {
  font-style: normal;
}

/* Repère « à compléter » : bien visible, à retirer avant mise en ligne */
.legal__todo {
  background: #fff2b2;
  color: #7a5b00;
  padding: 0.05em 0.4em;
  border-radius: 2px;
  font-weight: var(--font-weight-bold);
  font-size: 0.9em;
}

/* Bandeau de consentement cookies */
.wz-strip {
  position: fixed;
  z-index: 200;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  max-width: 460px;
  margin-inline: auto;
  padding: 1.5rem 1.6rem;
  background: var(--color-primary);
  color: #fff;
  -webkit-font-smoothing: antialiased;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.wz-strip[hidden] {
  display: none;
}

.wz-strip p {
  margin: 0 0 1.1rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.wz-strip a {
  color: var(--color-primary-green);
}

.wz-strip__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.wz-strip .btn {
  font-size: 0.72rem;
  padding: 0.6rem 1.4rem;
}

.wz-strip__refuse {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
  font-family: var(--secondary-font-family);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 0.6rem 1.4rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.wz-strip__refuse:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

/* Liens légaux à droite de la barre de copyright, séparés par une barre verticale */
.legal-links {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}

.legal-links a {
  color: var(--color-text-muted);
  font-family: var(--secondary-font-family);
  font-size: 0.7rem;
  transition: color 0.2s ease;
}

.legal-links a + a::before {
  content: "|";
  margin-right: 0.85rem;
  color: var(--color-text-muted);
  opacity: 0.55;
}

.legal-links a:hover {
  color: var(--color-primary-green);
}

/* Page Réalisations : grille d'articles (réutilise les cartes .news-card) */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(4.5rem, 8vw, 7rem);
}

@media (max-width: 900px) {
  .blog-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }

  /* CTA en pleine largeur sur mobile (cibles de tap plus grandes). */
  .btn {
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding-inline: 1.25rem;
    text-align: center;
  }

  /* Galerie coulisses masquée en mobile (rendu instable / "saute"). */
  .gallery-services {
    display: none;
  }

  /* Les 4 blocs "services intro" : une seule colonne sur mobile
     (en 2 colonnes ils étaient trop étroits et se cassaient). */
  .services-intro__values {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  /* Section "Ce qui nous distingue" (page Wiz'Us) : une seule colonne sur
     mobile. En 2 colonnes, les titres de longueurs différentes désalignaient
     les paragraphes. Sélecteur enfant pour surcharger la règle ≤860px. */
  .values > .values__grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  /* Icône + titre sur la même ligne, paragraphe en dessous (gain de place). */
  .values__grid li {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.5rem 1rem;
  }

  .values__grid p {
    grid-column: 1 / -1;
    margin-top: -0.25rem;
  }

  /* CTA final : sur mobile on cadre sur la partie droite de la photo. */
  .cta-final {
    background-position: right;
  }

  /* Header "Qui sommes-nous" : idem, cadrage sur la partie droite en mobile. */
  .contact-hero--wizus {
    background-position: right;
  }
}

/* Page Article (gabarit d'un article seul) */
/* Marque : logo en blanc monochrome, discret, sans cadre, sur le hero sombre */
.article__brand {
  display: flex;
  width: fit-content;
  align-items: center;
  height: 2rem;
  padding: 0 0.85rem;
  margin-bottom: 1.1rem;
  border-radius: 999px;
  background: #fff;
}

.article__brand img {
  height: 1.05rem;
  width: auto;
  max-width: 80px;
  object-fit: contain;
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.25rem;
  margin: 0.75rem 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--secondary-font-family);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.article__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.article__meta svg {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
  opacity: 0.8;
}

.article__cover {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
}

.article__cover img {
  display: block;
  width: 100%;
  height: clamp(280px, 42vw, 560px);
  object-fit: cover;
}

/* Article = photo-essai : peu de texte (colonne étroite centrée),
   beaucoup de photos (galeries pleine largeur du contenu) */
.article {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(4.5rem, 8vw, 7rem);
}

/* Blocs de texte : colonne lisible centrée */
.article > p,
.article > h2,
.article > h3,
.article > ul,
.article > blockquote,
.article > .article__lead,
.article__back {
  max-width: 720px;
  margin-inline: auto;
}

.article h3 {
  margin: 2.25rem auto 0.75rem;
  font-size: clamp(1.1rem, 2.1vw, 1.35rem);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
}

/* Listes à puces (ex. rôle de WIZ'Us) */
.article > ul:not(.article__facts) {
  margin: 0 auto 1.35rem;
  padding-left: 0;
  list-style: none;
}

.article > ul:not(.article__facts) li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.55rem;
  line-height: 1.7;
  color: var(--color-text-alt);
}

.article > ul:not(.article__facts) li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--color-primary-green);
}

/* Chiffres clés : bande sobre, bornée par des filets.
   Flex centré plutôt qu'une grille à 4 colonnes fixes : la série reste centrée
   quel que soit le nombre de faits, là où 3 chiffres laissaient une colonne
   vide qui décalait tout vers la gauche. */
.article__facts {
  max-width: 720px;
  margin: clamp(2rem, 4vw, 2.75rem) auto;
  padding: 1.75rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem 1.5rem;
  list-style: none;
  border-top: 1px solid rgba(10, 13, 18, 0.14);
  border-bottom: 1px solid rgba(10, 13, 18, 0.14);
  text-align: center;
}

.article__facts li {
  flex: 0 1 150px;
}

.article__facts .num {
  display: block;
  font-family: var(--secondary-font-family);
  font-weight: var(--font-weight-bold);
  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  line-height: 1;
  color: var(--color-primary);
}

.article__facts .lbl {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--color-text-alt);
}

@media (max-width: 600px) {
  .article__facts li {
    flex-basis: 130px;
  }
}

.article > p {
  margin-block: 0 1.35rem;
  line-height: 1.8;
  color: var(--color-text-alt);
}

.article > .article__lead {
  margin-bottom: 2rem;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  line-height: 1.65;
  color: var(--color-primary);
}

.article h2 {
  margin: 2.75rem auto 1rem;
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
}

.article blockquote {
  margin: 2.75rem auto;
  padding-left: 1.5rem;
  border-left: 2px solid var(--color-primary-green);
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  line-height: 1.5;
  color: var(--color-primary);
}

/* Photos : rythme entre grandes images seules (format naturel) et paires côte à côte */
.article__photo {
  max-width: 880px;
  margin: clamp(1.75rem, 3.5vw, 2.75rem) auto;
}

.article__photo img {
  display: block;
  width: 100%;
  height: auto;
}

.article__duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: 880px;
  margin: clamp(1.75rem, 3.5vw, 2.75rem) auto;
}

.article__duo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Badge marque en filigrane sur les photos de l'article */
.article__img-wrap {
  position: relative;
}

.article__badge {
  position: absolute;
  left: 0.7rem;
  bottom: 0.7rem;
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  padding: 0 0.65rem;
  border-radius: 999px;
  background: #fff;
}

.article__badge img {
  height: 0.9rem;
  width: auto;
  max-width: 62px;
  aspect-ratio: auto;
  object-fit: contain;
}

/* Bloc « Autres réalisations » en fin d'article */
/* Le bloc article porte déjà une marge basse : on la réduit quand des
   suggestions suivent, sinon les deux marges s'additionnent (pas de collapse
   dans .content-grid, qui est une grille). */
.article:has(+ .related) {
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

.related {
  margin: 0 0 clamp(4rem, 7vw, 6rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid rgba(10, 13, 18, 0.12);
}

.related .blog-grid {
  margin: 2rem 0 0;
}

.article figcaption {
  margin-top: 0.7rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-family: var(--secondary-font-family);
  text-align: center;
}

.article__back {
  margin: 2.5rem auto 0;
}

.article__back a {
  color: var(--color-primary-green);
  font-family: var(--secondary-font-family);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

/* Responsive Wiz'Us : placé après les règles de base pour bien les surcharger */
@media (max-width: 860px) {
  .values__grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.25rem 1.5rem;
  }

  .quote-feature blockquote {
    font-size: 1.25rem;
  }
}