::selection {
  background: var(--bleu-digi);
  color: var(--marine-profond);
}

/* ============================================================
   TOKENS DIGI COM (Août 2026) — :root global
   ============================================================ */
:root {
  /* Couleurs Primaires (Source Logo) */
  --marine-profond: #0B182B;  /* Fond dominant (~60%) */
  --marine: #14233A;          /* Surfaces élevées / Cartes */
  --marine-clair: #233340;    /* Bordures / Séparateurs sur sombre */
  --ardoise: #32425B;         /* Halo du dégradé marine */
  --bleu-digi: #2F7CBE;       /* Actions, liens, boutons primaires */
  --bleu-signal: #4FA3DC;     /* Accents ponctuels, focus, anneaux (5% max) */
  --blanc-pur: #FFFFFF;       /* Texte sur fond marine */
  --argent: #E7E7E8;          /* Dégradé métal inférieur */

  /* Couleurs Secondaires */
  --bleu-profond: #1E5A8E;    /* États actifs / pressés */
  --bleu-texte: #276BA6;      /* Liens sur fond clair (ratio 5.62:1) */
  --bleu-brume: #A9CFEB;      /* Texte secondaire sur fond marine */
  --bleu-voile: rgba(47, 124, 190, 0.12); /* Survol / fond léger d'accent */

  /* Neutres */
  --gris-700: #233340;        /* Corps de texte sur fond clair */
  --gris-600: #32425B;        /* Titres secondaires sur clair */
  --gris-500: #6E7C8F;        /* Texte secondaire / icônes inactives */
  --gris-400: #A7B2C0;        /* Bordures fortes */
  --gris-300: #D6DCE3;        /* Filets 1px */
  --gris-200: #E7E7E8;        /* Fonds enfoncés */
  --gris-100: #F4F6F8;        /* Fond de page clair alternatif */
  --gris-000: #FFFFFF;

  /* Dégradés clés */
  --degrade-marine: radial-gradient(120% 90% at 50% 0%, #32425B 0%, #14233A 42%, #0B182B 100%);
  --degrade-metal: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 42%, #C9C003 68%, #E7E7E8 100%);

  /* Typographies */
  --font-titre: "Montserrat", "Poppins", "Archivo", sans-serif;
  --font-texte: "Barlow", "Source Sans 3", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* Espacements (Grille basée sur le multiple de 4px) */
  --esp-1: 4px;  --esp-2: 8px;  --esp-3: 12px; --esp-4: 16px;
  --esp-5: 24px; --esp-6: 32px; --esp-7: 48px; --esp-8: 64px;
  --esp-9: 96px; --esp-10: 128px;

  /* Rayons de bordure (Angles vifs à modérés - NE PAS DÉPASSER 14px sauf pilule) */
  --rayon-sm: 2px;     /* Badges, petits filets */
  --rayon-md: 4px;     /* Boutons, champs de saisie */
  --rayon-lg: 8px;     /* Cartes, blocs UI */
  --rayon-xl: 14px;    /* Modales, sections Hero */
  --rayon-pilule: 999px; /* Tags et bascules uniquement */

  /* Ombres (Toujours teintées marine, le noir pur #000 est INTERDIT) */
  --ombre-1: 0 1px 2px rgba(11, 24, 43, 0.28);
  --ombre-2: 0 4px 12px rgba(11, 24, 43, 0.18);
  --ombre-3: 0 12px 32px rgba(11, 24, 43, 0.26);
  --ombre-bleue: 0 8px 24px rgba(47, 124, 190, 0.34); /* Survol bouton primaire uniquement */
  --anneau-focus: 0 0 0 3px rgba(79, 163, 220, 0.55);

  /* Transitions */
  --duree-std: 180ms;
  --ease-std: cubic-bezier(.2, .6, .2, 1);
}

/* Motif de points discret du hero */
.dots-bg {
  background-image: radial-gradient(
    rgba(11, 24, 43, 0.1) 1.2px,
    transparent 1.2px
  );
  background-size: 24px 24px;
}

/* Topbar : bord gauche biseauté du bloc social */
.social-notch {
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%);
}

/* Pastilles sociales circulaires */
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background: var(--marine);
  color: #ffffff;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.social-link:hover {
  background: var(--bleu-digi);
  color: #ffffff;
  transform: translateY(-2px);
}
/* ============================================================
   TOPBAR — SÉLECTEUR DE LANGUE (menu en position: fixed)
   ============================================================ */

/* Le fond biseauté reste sur le pseudo-élément (évite le
   clip-path qui rognait le contenu) */
.social-notch {
  position: relative;
  isolation: isolate;
  background: transparent;
  clip-path: none; /* neutralise le polygon() du 1er bloc pour ne pas rogner le menu langue */
}
.social-notch::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bleu-digi);
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%);
  z-index: -1;
}
.social-notch > * {
  position: relative;
  z-index: 1;
}

/* ----- Séparateur ----- */
.lang-divider {
  width: 1px;
  height: 20px;
  background: rgba(11, 24, 43, 0.25);
  margin: 0 0.25rem;
  flex-shrink: 0;
}

/* ----- Switcher ----- */
.lang-switcher { position: relative; }

/* ----- Bouton ----- */
.lang-toggle {
  border: 1px solid rgba(11, 24, 43, 0.3);
  cursor: pointer;
  user-select: none;
}
#lang-switcher.is-open #lang-chevron {
  transform: rotate(180deg);
}
.lang-toggle:focus-visible {
  outline: 2px solid var(--marine);
  outline-offset: 2px;
}

/* ----- Menu : FIXED, hors de tout contexte d'empilement -----
   Le positionnement left/top est calculé par le JS à partir
   du bouton. z-index 9999 = au-dessus de TOUT (navbar, chat,
   cookies compris temporairement). Aucun CSS ne peut le battre. */
.lang-menu {
  position: fixed;
  z-index: 9999;
  width: 11rem;
  background: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 12px 32px rgba(11, 24, 43, 0.18);
  border: 1px solid #e5e7eb;
  overflow: hidden;
  padding: 0.25rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.lang-menu.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ----- Items ----- */
.lang-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #374151;
  background: transparent;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  text-align: left;
}
.lang-item:hover {
  background-color: #f4f6f5;
  color: var(--marine);
}

.lang-check {
  color: var(--marine);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.lang-item.is-active .lang-check { opacity: 1; }
.lang-item.is-active {
  background-color: rgba(47, 124, 190, 0.25);
  color: var(--marine);
  pointer-events: none;
}
.lang-item.is-active:hover {
  background-color: rgba(47, 124, 190, 0.35);
}

/* ----- RTL ----- */
html[dir="rtl"] .lang-item {
  flex-direction: row-reverse;
}

/* Liens navbar : soulignement vert citron animé */
.nav-link {
  position: relative;
  color: #374151;
  transition: color 0.2s ease;
}

.nav-link:hover,
.nav-link.active {
  color: var(--marine);
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  height: 3px;
  width: 100%;
  border-radius: 999px;
  background: var(--bleu-digi);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}

/* Bouton Explore More : flèche qui glisse au survol */
.btn-explore {
  transition:
    background-color 0.25s ease,
    transform 0.25s ease;
}

.btn-explore:hover {
  background-color: #0B182B;
  transform: translateY(-2px);
}

.icon-shift {
  transition: transform 0.25s ease;
}

.btn-explore:hover .icon-shift {
  transform: translateX(4px);
}
/* ============================================================
   Dropdowns de la navbar (desktop : au survol)
   ============================================================ */

/* Le soulignement animé s'applique aussi au bouton du dropdown */
.dropdown-trigger::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  height: 3px;
  width: 100%;
  border-radius: 999px;
  background: var(--bleu-digi);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

/* Panneau dropdown : caché par défaut, révélé au survol / focus */
.dropdown-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  padding-top: 14px; /* pont de survol : évite la coupure entre trigger et panneau */
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 50;
}

.dropdown:hover .dropdown-panel,
.dropdown:focus-within .dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Rotation du chevron quand le dropdown est ouvert */
.dropdown:hover .dropdown-chevron,
.dropdown:focus-within .dropdown-chevron {
  transform: rotate(180deg);
}

/* Item du dropdown */
.dropdown-item {
  display: block;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  border-radius: 0.75rem;
  transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

.dropdown-item:hover {
  background-color: #f4f4f5;
  color: var(--marine);
  padding-left: 1.5rem; /* léger décalage vers la droite */
}

/* Petit accent citron à gauche de l'item survolé */
.dropdown-item:hover::before {
  content: "";
  position: absolute;
}

.dropdown-item {
  position: relative;
}
.dropdown-item::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 4px;
  height: 55%;
  border-radius: 999px;
  background: var(--bleu-digi);
  transition: transform 0.2s ease;
}
.dropdown-item:hover::before {
  transform: translateY(-50%) scaleY(1);
}

/* ============================================================
   Accordéons du menu mobile
   ============================================================ */

.mobile-dropdown-panel {
  overflow: hidden;
  animation: mobile-slide-down 0.3s ease;
}
@keyframes mobile-slide-down {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mobile-dropdown-trigger[aria-expanded="true"] .mobile-dropdown-chevron {
  transform: rotate(180deg);
}

/* Menu mobile : zone scrollable — devis + langues toujours atteignables
   sur petits écrans (le menu vit dans le header sticky) */
#mobile-menu {
  max-height: calc(100vh - 120px);
  max-height: calc(100dvh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------
   Accessibilité : mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .dropdown-panel,
  .dropdown-trigger::after,
  .dropdown-chevron,
  .dropdown-item,
  .dropdown-item::before,
  .mobile-dropdown-chevron {
    transition: none;
    animation: none;
  }
}

/* Badge HIRE US : rotation lente du texte circulaire */
.badge-spin {
  transform-origin: 80px 80px;
  animation: badge-rotate 16s linear infinite;
}

@keyframes badge-rotate {
  to {
    transform: rotate(360deg);
  }
}

/* Étincelles : scintillement décalé */
.sparkle {
  animation: twinkle 2.8s ease-in-out infinite;
}

.sparkle-delay {
  animation-delay: 1.4s;
}

@keyframes twinkle {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(0.7);
    opacity: 0.6;
  }
}

/* ===== MARQUEE : défilé horizontal infini ===== */
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}

.marquee-footer:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-group {
  display: flex;
  align-items: center;
  gap: 2.75rem;
  padding-right: 2.75rem;
}

.marquee-item {
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: 500;
  white-space: nowrap;
}

.marquee-star {
  color: var(--bleu-digi);
  flex: none;
}

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

/* Accessibilité : mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  .badge-spin,
  .sparkle,
  .marquee-track {
    animation: none;
  }
}
/* ============================================================
   Section About — Compétences & Statistiques
   ============================================================ */


/* ------------------------------------------------------------
   Badge "HIRE US" : rotation lente du texte circulaire
   ------------------------------------------------------------ */
.badge-spin {
  transform-origin: 80px 80px;
  animation: badge-rotate 16s linear infinite;
}
@keyframes badge-rotate {
  to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------
   Barres de progression : remplissage fluide
   ------------------------------------------------------------ */
.progress-fill {
  transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Curseur circulaire : léger agrandissement au survol de la barre */
.progress-item:hover .progress-fill span {
  transform: translate(50%, -50%) scale(1.15);
}

/* ------------------------------------------------------------
   Apparition en cascade (titre, items, stats)
   ------------------------------------------------------------ */
.section-header h2,
.progress-item,
.stat {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.section-header h2.revealed,
.progress-item.revealed,
.stat.revealed {
  opacity: 1;
  transform: translateY(0);
}
/* Décalages progressifs (effet cascade) */
.progress-item:nth-child(2) { transition-delay: 0.12s; }
.progress-item:nth-child(3) { transition-delay: 0.24s; }

/* ------------------------------------------------------------
   Accessibilité : mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .badge-spin { animation: none; }
  .progress-fill { transition: none; }
  .section-header h2,
  .progress-item,
  .stat {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ============================================================
   Section Our Services
   ============================================================ */

/* ------------------------------------------------------------
   Cartes de services : élévation douce au survol
   ------------------------------------------------------------ */
.service-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  border: 2px solid #dddddd4f;
}
.service-card:hover {
  transform: translateY(-8px);
}
/* La carte centrale (blanc) n'a plus d'ombre au survol */
.service-card.bg-\[\#0B182B\]:hover {
  box-shadow: none;
}

/* ------------------------------------------------------------
   Images des cartes : léger zoom au survol de la carte
   ------------------------------------------------------------ */
.service-card img {
  transition: transform 0.5s ease;
  margin: 8px 0;
}
.service-card:hover img {
  transform: scale(1.04);
}

/* ------------------------------------------------------------
   Bouton CTA "View All Services" : la flèche glisse
   ------------------------------------------------------------ */
a[href="#services-header-cta"] i,
.service-header-cta i {
  transition: transform 0.25s ease;
}

/* ------------------------------------------------------------
   Apparition en cascade au scroll
   ------------------------------------------------------------ */
#services .section-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
#services .section-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
/* Décalages progressifs : en-tête, puis carte 1, 2, 3 */
#services .reveal-delay-1 { transition-delay: 0.10s; }
#services .reveal-delay-2 { transition-delay: 0.22s; }
#services .reveal-delay-3 { transition-delay: 0.34s; }

/* ------------------------------------------------------------
   Accessibilité : mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-card img {
    transition: none;
  }
  .service-card:hover {
    transform: none;
  }
  .service-card:hover img {
    transform: none;
  }
  #services .section-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ============================================================
   Section Why Choose Us
   ============================================================ */

/* ------------------------------------------------------------
   Étincelles : scintillement doux et décalé
   ------------------------------------------------------------ */
.sparkle {
  animation: twinkle 2.8s ease-in-out infinite;
}
.sparkle-delay {
  animation-delay: 1.4s;
}
@keyframes twinkle {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(.7);  opacity: .6;  }
}

/* ------------------------------------------------------------
   Cartes de fonctionnalités : légère élévation de l'icône
   ------------------------------------------------------------ */
.feature-card > span {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover > span {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px -6px rgba(47, 124, 190, 0.4);
}

/* ------------------------------------------------------------
   Marquee : défilé horizontal infini (pause au survol)
   ------------------------------------------------------------ */
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.why-marquee:hover .marquee-track {
  animation-play-state: paused;
}
.marquee-group {
  display: flex;
  align-items: center;
  gap: 2.75rem;
  padding-right: 2.75rem;
}
.marquee-item {
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: 500;
  white-space: nowrap;
}
.marquee-star {
  color: var(--bleu-digi);
  flex: none;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ------------------------------------------------------------
   Apparition en cascade au scroll
   ------------------------------------------------------------ */
#why-us .section-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
#why-us .section-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
#why-us .reveal-delay-1 { transition-delay: 0.10s; }
#why-us .reveal-delay-2 { transition-delay: 0.20s; }
#why-us .reveal-delay-3 { transition-delay: 0.30s; }

/* ------------------------------------------------------------
   Accessibilité : mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .sparkle,
  .marquee-track {
    animation: none;
  }
  .feature-card > span {
    transition: none;
  }
  .feature-card:hover > span {
    transform: none;
  }
  #why-us .section-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ============================================================
   Section Our Work Process
   ============================================================ */

::selection {
  background: var(--bleu-digi);
  color: var(--marine);
}

/* ------------------------------------------------------------
   Bandeau inférieur des cartes :
   fond vert forêt + motif de hachures diagonales fines
   ------------------------------------------------------------ */
.step-band {
  background-color: var(--marine);
  /* Hachures diagonales discrètes : fines lignes blanches translucides */
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.05) 0px,
    rgba(255, 255, 255, 0.05) 1px,
    transparent 1px,
    transparent 7px
  );
}

/* ------------------------------------------------------------
   Cartes : élévation douce + filigrane qui se réveille au survol
   ------------------------------------------------------------ */
.process-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.process-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px -16px rgba(11, 24, 43, 0.25);
}

/* Le grand numéro en filigrane prend une teinte citron au survol */
.process-card .text-gray-100 {
  transition: color 0.4s ease;
}
.process-card:hover .text-gray-100 {
  color: rgba(47, 124, 190, 0.35);
}

/* ------------------------------------------------------------
   Marquee : défilé horizontal infini (pause au survol)
   ------------------------------------------------------------ */
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.process-marquee:hover .marquee-track {
  animation-play-state: paused;
}
.marquee-group {
  display: flex;
  align-items: center;
  gap: 2.75rem;
  padding-right: 2.75rem;
}
.marquee-item {
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: 500;
  white-space: nowrap;
}
.marquee-star {
  color: var(--bleu-digi);
  flex: none;
  transition: transform 0.4s ease;
}
/* Rotation lente continue des astérisques */
.marquee-star {
  animation: spin 8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ------------------------------------------------------------
   Apparition en cascade au scroll
   ------------------------------------------------------------ */
#process .section-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
#process .section-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
#process .reveal-delay-1 { transition-delay: 0.12s; }
#process .reveal-delay-2 { transition-delay: 0.24s; }

/* ------------------------------------------------------------
   Accessibilité : mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .marquee-track,
  .marquee-star {
    animation: none;
  }
  .process-card {
    transition: none;
  }
  .process-card:hover {
    transform: none;
  }
  .process-card:hover .text-gray-100 {
    color: #f1f5f9;
  }
  #process .section-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ============================================================
   Section Our Work (Portfolio)
   ============================================================ */

::selection {
  background: var(--bleu-digi);
  color: var(--marine);
}

/* ------------------------------------------------------------
   Cartes : images avec zoom doux au survol
   ------------------------------------------------------------ */
.work-card img {
  transition: transform 0.5s ease;
}
.work-card:hover img {
  transform: scale(1.03);
}

/* ------------------------------------------------------------
   Bouton flèche circulaire :
   la flèche quitte le cercle par le coin, puis revient
   ------------------------------------------------------------ */
.work-cta {
  transition: background-color 0.3s ease, transform 0.3s ease;
  overflow: hidden;
  position: relative;
}
.work-cta svg {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.work-card:hover .work-cta,
.work-cta:hover {
  background-color: var(--marine);
  transform: scale(1.08);
}
.work-card:hover .work-cta svg,
.work-cta:hover svg {
  transform: translate(18px, -18px);      /* sortie diagonale */
  animation: arrow-reenter 0.35s ease 0.3s forwards;
  animation-fill-mode: forwards;
}
/* La flèche revient par le coin opposé */
@keyframes arrow-reenter {
  from { transform: translate(-18px, 18px); }
  to   { transform: translate(0, 0); }
}
/* En survol du bouton citron → forêt, l'icône passe en citron */
.work-cta:hover svg,
.work-card:hover .work-cta svg {
  color: var(--bleu-digi);
}

/* ------------------------------------------------------------
   Titres de cartes : soulignement citron animé
   ------------------------------------------------------------ */
.work-card h3 {
  position: relative;
  display: inline-block;
  background-image: linear-gradient(var(--bleu-digi), var(--bleu-digi));
  background-repeat: no-repeat;
  background-size: 0% 3px;
  background-position: 0 100%;
  transition: background-size 0.35s ease;
  padding-bottom: 2px;
}
.work-card:hover h3 {
  background-size: 100% 3px;
}

/* ------------------------------------------------------------
   Apparition en cascade au scroll
   ------------------------------------------------------------ */
#work .section-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
#work .section-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
#work .reveal-delay-1 { transition-delay: 0.12s; }
#work .reveal-delay-2 { transition-delay: 0.24s; }
#work .reveal-delay-3 { transition-delay: 0.36s; }

/* ------------------------------------------------------------
   Accessibilité : mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .work-card img,
  .work-cta,
  .work-cta svg,
  .work-card h3 {
    transition: none;
    animation: none;
  }
  .work-card:hover img {
    transform: none;
  }
  .work-card:hover .work-cta svg,
  .work-cta:hover svg {
    transform: none;
  }
  #work .section-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ============================================================
   Section Contact Us / Free Quote
   ============================================================ */

::selection {
  background: var(--bleu-digi);
  color: var(--marine);
}

/* ------------------------------------------------------------
   Champs de saisie : bordure citron douce au survol
   ------------------------------------------------------------ */
#quote-form input:hover,
#quote-form select:hover,
#quote-form textarea:hover {
  border-color: var(--bleu-digi);
}

/* ------------------------------------------------------------
   État d'erreur des champs (classe ajoutée par app.js)
   ------------------------------------------------------------ */
.field-invalid {
  border-color: #ef4444 !important;
  background-color: #fef2f2 !important;
}
.field-invalid:focus {
  --tw-ring-color: #ef4444 !important; /* remplace le ring vert par rouge */
}

/* Animation de secousse légère sur champ invalide */
.field-shake {
  animation: field-shake 0.35s ease;
}
@keyframes field-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

/* ------------------------------------------------------------
   Bouton "Send Message" : la flèche/puce glisse (via translation)
   ------------------------------------------------------------ */
#quote-form button[type="submit"] {
  transition: background-color 0.25s ease, transform 0.25s ease;
}
#quote-form button[type="submit"]:hover {
  transform: translateY(-2px);
}
#quote-form button[type="submit"]:active {
  transform: translateY(0);
}

/* ------------------------------------------------------------
   Sparkles : scintillement doux et décalé
   ------------------------------------------------------------ */
.sparkle {
  animation: twinkle 2.8s ease-in-out infinite;
}
.sparkle-delay {
  animation-delay: 1.4s;
}
@keyframes twinkle {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(.75); opacity: .65; }
}

/* ------------------------------------------------------------
   Apparition en cascade au scroll
   ------------------------------------------------------------ */
#contact .section-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
#contact .section-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
#contact .reveal-delay-1 { transition-delay: 0.15s; }

/* ------------------------------------------------------------
   Accessibilité : mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .sparkle { animation: none; }
  .field-shake { animation: none; }
  #quote-form button[type="submit"] { transition: none; }
  #quote-form button[type="submit"]:hover { transform: none; }
  #contact .section-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Section Testimonials
   ============================================================ */

::selection {
  background: var(--bleu-digi);
  color: var(--marine);
}

/* ------------------------------------------------------------
   Carte de note globale : hachures diagonales fines en fond
   ------------------------------------------------------------ */
.rating-card {
  /* Hachures diagonales discrètes, réutilisant la même technique
     que les bandeaux "STEP" de la section Process */
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.04) 0px,
    rgba(255, 255, 255, 0.04) 1px,
    transparent 1px,
    transparent 8px
  );
}

/* ------------------------------------------------------------
   CTA "All Testimonials" : la flèche glisse au survol
   ------------------------------------------------------------ */
.cta-btn svg {
  transition: transform 0.25s ease;
}
.cta-btn:hover svg {
  transform: translateX(4px);
}

/* ------------------------------------------------------------
   Carousel : transition douce du témoignage actif
   (classes ajoutées/retirées par app.js)
   ------------------------------------------------------------ */
.testimonial-anim {
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.testimonial-anim.is-leaving {
  opacity: 0;
  transform: translateY(10px);
}
/* Sens directionnel : le nouveau contenu arrive du côté de la flèche cliquée */
.testimonial-anim.enter-from-left {
  opacity: 0;
  transform: translateY(10px) translateX(-14px);
}
.testimonial-anim.enter-from-right {
  opacity: 0;
  transform: translateY(10px) translateX(14px);
}
.testimonial-anim.is-entering {
  opacity: 1;
  transform: translateY(0) translateX(0);
}

/* Boutons de navigation : retour visuel au clic */
#testimonial-prev:active,
#testimonial-next:active {
  transform: scale(0.94);
}

/* ------------------------------------------------------------
   Apparition en cascade au scroll
   ------------------------------------------------------------ */
#testimonials .section-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
#testimonials .section-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
#testimonials .reveal-delay-1 { transition-delay: 0.15s; }

/* ------------------------------------------------------------
   Accessibilité : mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .testimonial-anim,
  .cta-btn svg {
    transition: none;
  }
  .testimonial-anim.is-leaving,
  .testimonial-anim.enter-from-left,
  .testimonial-anim.enter-from-right {
    opacity: 1;
    transform: none;
  }
  #testimonials .section-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Section Our Team
   ============================================================ */

::selection {
  background: var(--bleu-digi);
  color: var(--marine);
}

/* ------------------------------------------------------------
   Pilule sociale des cartes DÉFAUT :
   masquée + glissée hors de l'image, révélée au survol de la carte
   ------------------------------------------------------------ */
.social-pill {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.4s ease;
}
.social-pill--hidden {
  transform: translateY(-50%) translateX(110%); /* cachée hors du bord droit */
  opacity: 0;
}
/* Au survol de la carte, la pilule glisse dans l'image */
.team-card:hover .social-pill--hidden {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}
/* Accessibilité clavier : la pilule apparaît aussi à la prise de focus */
.team-card:focus-within .social-pill--hidden {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}

/* ------------------------------------------------------------
   Icônes sociales : zoom + inversion au survol
   ------------------------------------------------------------ */
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.social-icon:hover {
  background-color: var(--marine); /* pastille vert foncé */
  transform: scale(1.15);
}
.social-icon:hover svg {
  color: #ffffff; /* icône reste blanche sur fond marine */
}
.social-icon svg {
  transition: color 0.25s ease;
}

/* ------------------------------------------------------------
   Cartes : élévation douce au survol
   ------------------------------------------------------------ */
.team-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease,
              border-color 0.35s ease;
}
.team-card--active,
.team-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px -16px rgba(11, 24, 43, 0.35);
}
/* La carte active a déjà l'ombre forte au repos */
.team-card--active {
  transform: translateY(-6px);
}

/* ------------------------------------------------------------
   Photos : zoom très léger au survol
   ------------------------------------------------------------ */
.team-card img {
  transition: transform 0.5s ease;
}
.team-card:hover img {
  transform: scale(1.03);
}

/* ------------------------------------------------------------
   Apparition en cascade au scroll
   ------------------------------------------------------------ */
#team .section-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
#team .section-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
/* Attention : translateY du reveal s'additionne avec l'élévation hover,
   on neutralise donc l'élévation pendant l'animation d'entrée */
#team .section-reveal:not(.revealed) {
  transform: translateY(28px) !important;
}
#team .reveal-delay-1 { transition-delay: 0.12s; }
#team .reveal-delay-2 { transition-delay: 0.24s; }

/* ------------------------------------------------------------
   Accessibilité : mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .social-pill,
  .social-icon,
  .social-icon svg,
  .team-card,
  .team-card img {
    transition: none;
  }
  .social-pill--hidden,
  .team-card:hover .social-pill--hidden {
    transform: translateY(-50%);
    opacity: 1; /* toujours visibles sans animation */
  }
  .team-card:hover,
  .team-card--active {
    transform: none;
  }
  .team-card:hover img {
    transform: none;
  }
  #team .section-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ============================================================
   Section News & Blogs
   ============================================================ */

::selection {
  background: var(--bleu-digi);
  color: var(--marine);
}

/* ------------------------------------------------------------
   Images : zoom doux au survol de la carte
   ------------------------------------------------------------ */
.blog-card img {
  transition: transform 0.5s ease;
}
.blog-card:hover img {
  transform: scale(1.04);
}

/* ------------------------------------------------------------
   Badge de catégorie : micro-interaction au survol de la carte
   ------------------------------------------------------------ */
.blog-tag {
  transition: transform 0.3s ease;
}
.blog-card:hover .blog-tag {
  transform: translateX(4px);
}

/* ------------------------------------------------------------
   Lien "Read More" : la flèche glisse au survol
   ------------------------------------------------------------ */
.read-more svg {
  transition: transform 0.25s ease;
}
.read-more:hover svg {
  transform: translateX(4px);
}

/* ------------------------------------------------------------
   CTA "View All Blogs" : la flèche glisse aussi
   ------------------------------------------------------------ */
.blog-cta svg {
  transition: transform 0.25s ease;
}
.blog-cta:hover svg {
  transform: translateX(4px);
}

/* ------------------------------------------------------------
   Cartes : ombre citron teintée subtile au survol
   (en complément du translate-y défini en Tailwind)
   ------------------------------------------------------------ */
.blog-card {
  transition-property: transform;
  transition-duration: 300ms;
  border: 1px solid #e5e7eb;
}


/* ------------------------------------------------------------
   Apparition en cascade au scroll
   ------------------------------------------------------------ */
#blog .section-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
#blog .section-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
#blog .reveal-delay-1 { transition-delay: 0.12s; }
#blog .reveal-delay-2 { transition-delay: 0.24s; }

/* Neutralise le conflit entre l'élévation hover (-4px via Tailwind)
   et la transformation de révélation pendant l'entrée */
#blog .blog-card.section-reveal:not(.revealed) {
  transform: translateY(28px) !important;
}
#blog .blog-card.section-reveal.revealed:hover {
  transform: translateY(-4px);
}

/* ------------------------------------------------------------
   Accessibilité : mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .blog-card img,
  .blog-tag,
  .read-more svg,
  .blog-cta svg,
  .blog-card {
    transition: none;
  }
  .blog-card:hover img {
    transform: none;
  }
  .blog-card:hover .blog-tag {
    transform: none;
  }
  #blog .section-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ============================================================
   Section FAQs / Accordéon
   ============================================================ */

::selection {
  background: var(--bleu-digi);
  color: var(--marine);
}

/* ------------------------------------------------------------
   Carte support : hachures diagonales fines en filigrane
   (même technique que les bandeaux STEP / carte de note)
   ------------------------------------------------------------ */
.support-card {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.04) 0px,
    rgba(255, 255, 255, 0.04) 1px,
    transparent 1px,
    transparent 8px
  );
}

/* ------------------------------------------------------------
   Accordéon : transition fluide de la réponse
   ------------------------------------------------------------ */
.faq-answer {
  transition: opacity 0.3s ease;
}

/* ------------------------------------------------------------
   Icône toggle : rotation légère au survol de l'item
   ------------------------------------------------------------ */
.faq-item .faq-icon-plus,
.faq-item .faq-icon-minus {
  transition: transform 0.3s ease;
}
.faq-item:hover .faq-icon-plus,
.faq-item:hover .faq-icon-minus {
  transform: rotate(90deg);
}

/* ------------------------------------------------------------
   Bouton "Contact Us" : légère élévation au survol
   ------------------------------------------------------------ */
.support-cta {
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.support-cta:hover {
  transform: translateY(-2px);
}

/* ------------------------------------------------------------
   Apparition en cascade au scroll
   ------------------------------------------------------------ */
#faq .section-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
#faq .section-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
#faq .reveal-delay-1 { transition-delay: 0.15s; }

/* ------------------------------------------------------------
   Accessibilité : mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .faq-answer,
  .faq-item .faq-icon-plus,
  .faq-item .faq-icon-minus,
  .support-cta {
    transition: none;
  }
  .faq-item:hover .faq-icon-plus,
  .faq-item:hover .faq-icon-minus {
    transform: none;
  }
  #faq .section-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ============================================================
   Section Job Opening / Current Openings
   ============================================================ */

::selection {
  background: var(--bleu-digi);
  color: var(--marine);
}

/* ------------------------------------------------------------
   Contenu déplié : apparition en fondu (le hidden est géré en JS,
   l'opacité donne la douceur à l'ouverture)
   ------------------------------------------------------------ */
.job-details {
  animation: details-in 0.35s ease;
}
@keyframes details-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------
   Bouton Details : transitions douces des couleurs
   ------------------------------------------------------------ */
.toggle-details {
  transition: background-color 0.25s ease, color 0.25s ease,
              border-color 0.25s ease;
}

/* ------------------------------------------------------------
   Bouton Apply Now : légère élévation au survol
   ------------------------------------------------------------ */
a[href="#"].bg-\[\#2F7CBE\] {
  transition: background-color 0.25s ease, transform 0.25s ease;
}
a[href="#"].bg-\[\#2F7CBE\]:hover {
  transform: translateY(-2px);
}

/* ------------------------------------------------------------
   Cartes : élévation douce au survol
   ------------------------------------------------------------ */
.job-card:hover {
  border-color: #cbd5e1;
}

/* ------------------------------------------------------------
   Puces custom : micro-zoom au survol de la liste
   ------------------------------------------------------------ */
.job-details ul:hover li span {
  transform: scale(1.2);
}
.job-details li span {
  transition: transform 0.25s ease;
}

/* ------------------------------------------------------------
   Apparition en cascade au scroll
   ------------------------------------------------------------ */
#jobs .section-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
#jobs .section-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
#jobs .reveal-delay-1 { transition-delay: 0.15s; }

/* ------------------------------------------------------------
   Accessibilité : mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .job-details { animation: none; }
  .toggle-details,
  a[href="#"].bg-\[\#2F7CBE\],
  .job-details li span {
    transition: none;
  }
  .job-details ul:hover li span {
    transform: none;
  }
  #jobs .section-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ============================================================
   Section Our Newsletter
   ============================================================ */

::selection {
  background: var(--bleu-digi);
  color: var(--marine);
}

/* ------------------------------------------------------------
   Puce citron : micro pulsation au focus du champ
   ------------------------------------------------------------ */
#newsletter-email:focus ~ * {
  /* rien : la puce est avant l'input dans le DOM, voir animation JS-free ci-dessous */
}

/* Animation douce de la puce quand le champ reçoit le focus
   (sélecteur sibling inversé : on anime via :focus-within du parent) */
#newsletter-form div.relative:focus-within > div:first-child {
  animation: chip-pop 0.35s ease;
}
@keyframes chip-pop {
  0%   { transform: translateY(-50%) scale(1);    }
  50%  { transform: translateY(-50%) scale(1.12); }
  100% { transform: translateY(-50%) scale(1);    }
}

/* ------------------------------------------------------------
   Champ input : état d'erreur (classe ajoutée par app.js)
   ------------------------------------------------------------ */
.newsletter-invalid {
  border-color: #ef4444 !important;
  --tw-ring-color: #ef4444 !important;
  animation: shake 0.35s ease;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}

/* ------------------------------------------------------------
   Bouton Subscribe : état "envoi en cours" (classe JS)
   ------------------------------------------------------------ */
#newsletter-form button[type="submit"].is-sending {
  opacity: 0.75;
  pointer-events: none;
}

/* ------------------------------------------------------------
   Messages de retour : apparition en fondu
   ------------------------------------------------------------ */
#newsletter-error,
#newsletter-success {
  animation: msg-in 0.35s ease;
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------
   Apparition en cascade au scroll
   ------------------------------------------------------------ */
#newsletter .section-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
#newsletter .section-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
#newsletter .reveal-delay-1 { transition-delay: 0.15s; }

/* ------------------------------------------------------------
   Accessibilité : mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  #newsletter-form div.relative:focus-within > div:first-child {
    animation: none;
  }
  .newsletter-invalid { animation: none; }
  #newsletter-error,
  #newsletter-success { animation: none; }
  #newsletter .section-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ============================================================
   Footer & Call-to-Action "Let's Connect there"
   ============================================================ */

::selection {
  background: var(--bleu-digi);
  color: var(--marine);
}

/* ------------------------------------------------------------
   CTA "Contact Us" : légère élévation au survol
   ------------------------------------------------------------ */
.cta-contact {
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.cta-contact:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(11, 24, 43, 0.4);
}

/* ------------------------------------------------------------
   Cercles sociaux : inversion des couleurs au survol
   (citron → forêt, icône forêt → citron)
   ------------------------------------------------------------ */
.footer-social {
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.footer-social:hover {
  background-color: var(--marine);
  transform: scale(1.08);
}
.footer-social svg {
  transition: color 0.25s ease;
}
.footer-social:hover svg {
  color: var(--bleu-digi);
}

/* ------------------------------------------------------------
   Liens de navigation & barre de copyright :
   soulignement citron animé de gauche à droite
   ------------------------------------------------------------ */
.footer-link {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--bleu-digi), var(--bleu-digi));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
  transition: background-size 0.3s ease, color 0.2s ease;
}
.footer-link:hover {
  background-size: 100% 2px;
}

/* ------------------------------------------------------------
   Coordonnées : l'icône glisse légèrement au survol de la ligne
   ------------------------------------------------------------ */
.footer-contact svg {
  transition: transform 0.25s ease;
  color: var(--marine);
}
.footer-contact:hover svg {
  transform: translateY(-2px);
}

/* ------------------------------------------------------------
   Mini formulaire newsletter : état d'erreur (classe JS)
   ------------------------------------------------------------ */
.footer-newsletter-invalid {
  border-color: #ef4444 !important;
  animation: shake 0.35s ease;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}
.copy {
    background-color: var(--marine);
    padding: 10px;
    color: #fff;
}
.copy a:hover {
  color: #ddd;
}
.copy .footer-link {
    color: #ddd;
}
/* ------------------------------------------------------------
   Messages de retour : apparition en fondu
   ------------------------------------------------------------ */
#footer-newsletter-error,
#footer-newsletter-success {
  animation: msg-in 0.35s ease;
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------
   Apparition en cascade au scroll
   ------------------------------------------------------------ */
.cta-banner-reveal,
.footer-col {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.cta-banner-reveal.revealed,
.footer-col.revealed {
  opacity: 1;
  transform: translateY(0);
}
/* Décalages progressifs des 4 colonnes du footer */
.footer-col:nth-child(2) { transition-delay: 0.10s; }
.footer-col:nth-child(3) { transition-delay: 0.20s; }
.footer-col:nth-child(4) { transition-delay: 0.30s; }

/* ------------------------------------------------------------
   Accessibilité : mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .cta-contact,
  .footer-social,
  .footer-social svg,
  .footer-link,
  .footer-contact svg {
    transition: none;
  }
  .cta-contact:hover { transform: none; }
  .footer-newsletter-invalid { animation: none; }
  #footer-newsletter-error,
  #footer-newsletter-success { animation: none; }
  .cta-banner-reveal,
  .footer-col {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ============================================================
   PRELOADER
   ============================================================ */

/* Barres du logo : longueurs finales différentes + animation de montée */
.preloader-bar {
  height: 14px;
  animation: bar-rise 1.1s ease-in-out infinite;
  transform-origin: bottom;
}
.preloader-bar:nth-child(1) { height: 22px; animation-delay: 0s;    }
.preloader-bar:nth-child(2) { height: 34px; animation-delay: 0.15s; }
.preloader-bar:nth-child(3) { height: 46px; animation-delay: 0.3s;  }

@keyframes bar-rise {
  0%, 100% { transform: scaleY(0.35); opacity: 0.6; }
  50%      { transform: scaleY(1);    opacity: 1;    }
}

/* Le contenu de la page démarre légèrement estompé
   (révélé au retrait du preloader, voir la classe .is-loaded sur body) */
body:not(.is-loaded) main,
body:not(.is-loaded) header.navbar,
body:not(.is-loaded) .topbar {
  opacity: 0;
}
main,
header.navbar,
.topbar {
  transition: opacity 0.6s ease 0.15s;
}

/* Sortie du preloader : fondu + léger zoom */
#preloader {
  transition: opacity 0.6s ease, visibility 0.6s;
}
#preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Verrouillage du scroll pendant le chargement
   (classe posée en dur dans le HTML, retirée par le JS) */
body.is-loading {
  overflow: hidden;
  height: 100vh;
}

/* ------------------------------------------------------------
   Accessibilité : mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .preloader-bar { animation: none; opacity: 1; transform: none; }
  #preloader { transition: opacity 0.2s ease, visibility 0.2s; }
  main, header.navbar, .topbar { transition: none; }
}
/* ============================================================
   COOKIE BANNER & MODAL
   ============================================================ */

/* --- Bannière : entrée / sortie --- */
.cookie-banner {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.cookie-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.cookie-banner.is-hiding {
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
}

/* --- Modal : fondu du backdrop + montée du panneau --- */
#cookie-modal {
  transition: opacity 0.3s ease;
}
#cookie-modal.is-hiding {
  opacity: 0;
  pointer-events: none;
}
.cookie-modal-panel {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
  transform: translateY(24px);
  opacity: 0;
}
#cookie-modal.is-open .cookie-modal-panel {
  transform: translateY(0);
  opacity: 1;
}

/* ------------------------------------------------------------
   Cases à cocher style bascule (switch)
   Le <input> est en sr-only ; le label <label> englobe tout,
   donc cliquer n'importe où sur la ligne bascule la case.
   ------------------------------------------------------------ */
.switch {
  display: inline-flex;
  align-items: center;
}
.switch-track {
  display: inline-block;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background-color: #d1d5db;           /* gris : désactivé */
  transition: background-color 0.25s ease;
  position: relative;
}
.switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
/* État coché : track vert citron, poulet déplacé à droite */
.peer:checked + .switch-track {
  background-color: var(--bleu-digi);
}
.peer:checked + .switch-track::after {
  transform: translateX(20px);
  background-color: var(--marine);           /* pouce vert foncé une fois activé */
}
/* Anneau de focus clavier */
.peer:focus-visible + .switch-track {
  outline: 2px solid var(--marine);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   Accessibilité : mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .cookie-banner,
  #cookie-modal,
  .cookie-modal-panel,
  .switch-track,
  .switch-track::after {
    transition: none;
  }
}

/* ============================================================
   SECTION PARTNERS — slider de logos
   ============================================================ */

/* ----- Piste du slider : largeur du contenu, défilement continu ----- */
.partners-track {
  width: max-content;
  animation: partners-scroll 35s linear infinite;
  will-change: transform;
}
@keyframes partners-scroll {
  to { transform: translateX(-50%); } /* -50% = largeur d'un groupe */
}

/* Pause du défilement au survol de la zone */
.partners-slider:hover .partners-track {
  animation-play-state: paused;
}

/* ----- Groupes : espacement régulier entre logos ----- */
.partners-group {
  display: flex;
  align-items: center;
}
/* Espace autour de chaque logo (gap uniforme via marge) */
.partner-logo {
  margin-right: 4.5rem; /* espace entre logos */
}

/* ----- Logos : monochromes au repos, pleins au survol ----- */
.partner-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 700;
  font-size: 1.25rem;
  color: #9ca3af;                                  /* gris au repos */
  filter: grayscale(1);
  opacity: 0.65;
  transition: color 0.35s ease, opacity 0.35s ease,
              filter 0.35s ease, transform 0.35s ease;
  white-space: nowrap;
  flex: none;
}
.partner-logo:hover {
  color: var(--marine);                                  /* vert forêt au survol */
  opacity: 1;
  filter: grayscale(0);
  transform: translateY(-3px) scale(1.05);
}
/* L'icône Lucide passe en vert citron au survol */
.partner-logo svg {
  transition: color 0.35s ease, transform 0.35s ease;
}
.partner-logo:hover svg {
  color: var(--bleu-digi);                                  /* citron assombri (lisible sur blanc) */
  transform: rotate(-8deg);
}

/* ----- Masques dégradés sur les bords ----- */
.partner-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  pointer-events: none;
  z-index: 5;
}
.partner-fade--left {
  left: 0;
  background: linear-gradient(to right, #ffffff, transparent);
}
.partner-fade--right {
  right: 0;
  background: linear-gradient(to left, #ffffff, transparent);
}

/* ----- Responsive : logos plus compacts sur mobile ----- */
@media (max-width: 640px) {
  .partner-logo {
    font-size: 1rem;
    margin-right: 2.75rem;
  }
  .partner-logo svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .partner-fade {
    width: 40px;
  }
}

/* ----- Apparition en cascade au scroll ----- */
#partners .section-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
#partners .section-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------------
   Accessibilité : mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .partners-track {
    /* Défilement arrêté : les logos restent lisibles en statique */
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  .partners-group[aria-hidden="true"] {
    display: none; /* le groupe dupliqué est masqué */
  }
  .partner-logo {
    transition: none;
  }
  #partners .section-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ============================================================
   BACK TO TOP
   ============================================================ */

/* ----- Entrée / sortie du bouton (classes posées par le JS) ----- */
#back-to-top {
  transition: opacity 0.35s ease, transform 0.35s ease,
              background-color 0.25s ease, box-shadow 0.25s ease;
}
#back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* État initial / sortie : caché + décalé vers le bas */
#back-to-top:not(.is-visible) {
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}

/* ----- Survol : fond citron, flèche forêt, ombre teintée ----- */
#back-to-top:hover {
  background-color: var(--bleu-digi);
  box-shadow: 0 12px 28px -8px rgba(47, 124, 190, 0.5);
}
#back-to-top:hover .btt-arrow {
  color: var(--marine);
  transform: translateY(-2px); /* la flèche "tentonne" vers le haut */
}
.btt-arrow {
  transition: color 0.25s ease, transform 0.25s ease;
}

/* ----- Tooltip : apparaît au survol ----- */
#back-to-top:hover .btt-tooltip {
  opacity: 1;
  transform: translateY(calc(-50% - 4px));
}

/* ----- Anneau de progression : le remplissage est animé
     en JS via stroke-dashoffset (fluide, 60 fps) ----- */
#btt-progress {
  transition: stroke-dashoffset 0.1s linear;
}

/* ------------------------------------------------------------
   Accessibilité : mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  #back-to-top,
  .btt-arrow,
  .btt-tooltip,
  #btt-progress {
    transition: none;
  }
  /* Le scroll natif "smooth" est aussi neutralisé côté JS */
}
/* ============================================================
   PAGE BANNER — en-tête de sous-page
   ============================================================ */

/* ------------------------------------------------------------
   Alternative pur CSS aux SVG : grille de points en fond
   (utilisable en ajoutant la classe .dots-pattern à la section)
   ------------------------------------------------------------ */
.page-banner.dots-pattern {
  background-image: radial-gradient(#d1d5db 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  background-position: center;
}

/* ------------------------------------------------------------
   Titre & breadcrumb : apparition à l'arrivée sur la page
   ------------------------------------------------------------ */
.page-banner-title {
  opacity: 0;
  transform: translateY(18px);
  animation: banner-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}
.page-banner-title + nav {
  opacity: 0;
  transform: translateY(14px);
  animation: banner-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}
@keyframes banner-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------
   Breadcrumb : liens et séparateurs
   ------------------------------------------------------------ */
.banner-crumb-link {
  position: relative;
  color: var(--marine);
  transition: opacity 0.2s ease;
}
.banner-crumb-link:hover {
  opacity: 0.7;
  text-decoration: underline;
  text-decoration-color: var(--bleu-digi);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.banner-crumb-current {
  color: var(--marine);
  font-weight: 600;
  position: relative;
}
/* Petit soulignement citron discret sous la page active */
.banner-crumb-current::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2.5px;
  border-radius: 999px;
  background: var(--bleu-digi);
}

/* Séparateur incliné (le "/" est stylé fin et gris) */
.banner-crumb-sep {
  color: #9ca3af;
  font-weight: 300;
  user-select: none;
  transform: skewX(-12deg); /* léger italique structurel */
}

/* ------------------------------------------------------------
   Accessibilité : mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .page-banner-title,
  .page-banner-title + nav {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
/* ============================================================
   SECTION VISION & MISSION + LIGHTBOX VIDÉO
   ============================================================ */

/* ------------------------------------------------------------
   Bouton play : pulsation lente de l'anneau (appel "à l'action")
   ------------------------------------------------------------ */
#video-play-btn::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 9999px;
  border: 2px solid rgba(47, 124, 190, 0.5);
  animation: play-pulse 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes play-pulse {
  0%   { transform: scale(1);    opacity: 0.8; }
  70%  { transform: scale(1.25); opacity: 0;   }
  100% { transform: scale(1.25); opacity: 0;   }
}

/* ------------------------------------------------------------
   Blocs Vision / Mission : les cercles d'icônes s'animent au survol
   ------------------------------------------------------------ */
.vm-block > div:first-child {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.vm-block:hover > div:first-child {
  transform: translateY(-4px) rotate(-6deg);
  box-shadow: 0 12px 28px -10px rgba(11, 24, 43, 0.4);
}

/* ------------------------------------------------------------
   Lightbox : fondu du backdrop + zoom doux du panneau
   ------------------------------------------------------------ */
#video-modal {
  transition: opacity 0.3s ease;
}
#video-modal.is-hiding {
  opacity: 0;
  pointer-events: none;
}
.video-modal-panel {
  transform: scale(0.94);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
#video-modal.is-open .video-modal-panel {
  transform: scale(1);
  opacity: 1;
}

/* ------------------------------------------------------------
   Accessibilité : mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  #video-play-btn::before { animation: none; }
  #video-banner img { transition: none; }
  #video-banner:hover img { transform: none; }
  .vm-block > div:first-child { transition: none; }
  .vm-block:hover > div:first-child { transform: none; }
  #video-modal,
  .video-modal-panel { transition: none; }
  .video-modal-panel { transform: none; opacity: 1; }
}
/* ============================================================
   Section About Us
   ============================================================ */

::selection {
  background: var(--bleu-digi);
  color: var(--marine);
}

/* ------------------------------------------------------------
   Badge rotatif "HIRE US" :
   le TEXTE circulaire tourne, le bouton citron reste FIXE
   ------------------------------------------------------------ */
.hire-badge-text {
  animation: hire-rotate 14s linear infinite;
}
@keyframes hire-rotate {
  to { transform: rotate(360deg); }
}

/* Le bouton central réagit au survol du badge */
.hire-badge-btn {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
}
.hire-badge:hover .hire-badge-btn {
  transform: scale(1.12) rotate(8deg);
  box-shadow: 0 10px 24px -8px rgba(47, 124, 190, 0.6);
}

/* ------------------------------------------------------------
   Barres de progression : remplissage animé (JS) + transitions
   ------------------------------------------------------------ */
.progress-fill {
  transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
/* La bulle citron "respire" légèrement pendant le remplissage */
.progress-fill span {
  transition: transform 0.3s ease;
}
.progress-item:hover .progress-fill span {
  transform: translateY(-50%) scale(1.25);
}

/* ------------------------------------------------------------
   CTA "About Us" : la flèche glisse au survol
   ------------------------------------------------------------ */
.about-cta svg {
  transition: transform 0.25s ease;
}
.about-cta:hover svg {
  transform: translateX(4px);
}

/* ------------------------------------------------------------
   Séparateurs du bandeau de stats :
   ligne verticale grise + double demi-cercle centré dessus
   ------------------------------------------------------------ */
.stat-divider {
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  right: 0;
  width: 1px;
  background-color: #e5e7eb;
}
/* Les deux demi-cercles chevauchent la ligne, fond blanc pour la "couper" */
.stat-divider-dots {
  position: absolute;
  top: 2.25rem;          /* aligné avec la ligne de base du chiffre */
  right: -1.15rem;       /* centré sur la ligne de 1px */
  display: flex;
  flex-direction: column;
  gap: 2px;
  background-color: #ffffff;
  padding: 0.3rem 0.45rem;
}

/* ------------------------------------------------------------
   Apparition en cascade au scroll
   ------------------------------------------------------------ */
#about .section-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
#about .section-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
#about .reveal-delay-1 { transition-delay: 0.12s; }
#about .reveal-delay-2 { transition-delay: 0.24s; }

/* ------------------------------------------------------------
   Accessibilité : mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hire-badge-text { animation: none; }
  .progress-fill { transition: none; }
  .about-cta svg { transition: none; }
  #about .section-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ============================================================
   PAGE HISTORY — styles complets
   ============================================================ */

::selection {
  background: var(--bleu-digi);
  color: var(--marine);
}

/* ============================================================
   PAGE BANNER & BREADCRUMB
   ============================================================ */

/* Titre + nav : apparition en cascade à l'arrivée sur la page */
.page-banner-title,
.page-banner-nav {
  opacity: 0;
  transform: translateY(18px);
  animation: banner-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}
.page-banner-nav { animation-delay: 0.3s; }
@keyframes banner-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* ----- Breadcrumb : Home › About Us › History ----- */

/* Niveaux intermédiaires : gris discrets, soulignement citron animé */
.banner-crumb-link {
  color: #6b7280;
  transition: color 0.2s ease;
  position: relative;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--bleu-digi), var(--bleu-digi));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
}
.banner-crumb-link:hover {
  color: var(--marine);
  background-size: 100% 2px;
}

/* Page active : vert foncé, gras, trait citron centré dessous */
.banner-crumb-current {
  color: var(--marine);
  font-weight: 700;
  position: relative;
  padding-bottom: 4px;
}
.banner-crumb-current::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 60%;
  height: 3px;
  border-radius: 999px;
  background: var(--bleu-digi);
}

/* Séparateur chevron */
.banner-crumb-sep {
  color: #d1d5db;
  user-select: none;
  display: flex;
  align-items: center;
}

/* ============================================================
   TIMELINE — The Journey So Far
   ============================================================ */

/* Ligne verticale : mobile à gauche, centrée sur desktop,
   dégradé citron → gris → citron */
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 24px;
  width: 2px;
  background: linear-gradient(to bottom, var(--bleu-digi) 0%, #e5e7eb 12%, #e5e7eb 88%, var(--bleu-digi) 100%);
}
@media (min-width: 768px) {
  .timeline::before {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ----- Items : ESPACEMENT GÉNÉREUX entre les cartes ----- */
.timeline-item {
  position: relative;
  padding-left: 64px;        /* place pour la ligne + point (mobile) */
  margin-bottom: 3.5rem;     /* ← mobile : respiration entre cartes */
}
.timeline-item:last-child {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .timeline-item {
    width: calc(50% - 3rem); /* écart central élargi */
    padding-left: 0;
    margin-bottom: 4.5rem;   /* ← desktop : respiration nette */
  }
  .timeline-item:last-child { margin-bottom: 0; }

  /* Alternance gauche / droite */
  .timeline-item[data-side="left"]  { margin-right: auto; }
  .timeline-item[data-side="right"] { margin-left: auto;  }

  /* Les cartes de droite alignent leur contenu vers la ligne */
  .timeline-item[data-side="right"] .timeline-card { text-align: right; }
  .timeline-item[data-side="right"] .timeline-year { margin-left: auto; }
}

/* ----- Points sur la ligne ----- */
.timeline-dot {
  position: absolute;
  top: 2.5rem;               /* aligné au badge de l'année */
  left: 24px;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background-color: var(--bleu-digi);
  border: 3px solid var(--marine);
  z-index: 10;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Le point pulse quand sa carte est révélée */
.timeline-item.revealed .timeline-dot {
  transform: translate(-50%, -50%) scale(1.3);
  box-shadow: 0 0 0 5px rgba(47, 124, 190, 0.3);
}

/* Point final drapeau : plus grand, avec icône */
.timeline-dot--last {
  width: 34px;
  height: 34px;
  background-color: var(--bleu-digi);
  display: flex;
  align-items: center;
  justify-content: center;
  border-width: 2px;
}

@media (min-width: 768px) {
  .timeline-dot { left: auto; }

  /* Items gauche : point sur la ligne, côté droit de la carte */
  .timeline-item[data-side="left"] .timeline-dot {
    right: -3rem;
    transform: translate(50%, -50%);
  }
  .timeline-item.revealed[data-side="left"] .timeline-dot {
    transform: translate(50%, -50%) scale(1.3);
  }
  /* Items droite : point côté gauche */
  .timeline-item[data-side="right"] .timeline-dot {
    left: -3rem;
    transform: translate(-50%, -50%);
  }
  .timeline-item.revealed[data-side="right"] .timeline-dot {
    transform: translate(-50%, -50%) scale(1.3);
  }
}

/* ----- Cartes ----- */
.timeline-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.timeline-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -12px rgba(11, 24, 43, 0.2);
}
.timeline-card--highlight {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.timeline-card--highlight:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -14px rgba(11, 24, 43, 0.45);
}

/* ============================================================
   SLIDER ÉQUIPE
   ============================================================ */

/* Largeur des slides : 1 mobile → 2 tablette → 3 desktop */
.team-slide { width: 100%; }
@media (min-width: 640px)  { .team-slide { width: 50%; } }
@media (min-width: 1024px) { .team-slide { width: 33.3333%; } }

/* ----- Pilule sociale : cachée, révélée au survol ----- */
.social-pill {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}
.social-pill--hidden {
  transform: translateY(-50%) translateX(110%);
  opacity: 0;
}
.team-slide .group:hover .social-pill--hidden,
.team-slide .group:focus-within .social-pill--hidden {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}

/* Icônes sociales */
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.social-icon:hover {
  background-color: var(--marine);
  transform: scale(1.15);
}
.social-icon:hover svg { color: #ffffff; }
.social-icon svg { transition: color 0.25s ease; }

/* Photos : zoom doux */
.team-slide img {
  transition: transform 0.5s ease;
}
.team-slide .group:hover img {
  transform: scale(1.03);
}

/* ----- Points de pagination ----- */
.team-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background-color: #d1d5db;
  transition: background-color 0.3s ease, width 0.3s ease;
  cursor: pointer;
  border: none;
  padding: 0;
}
.team-dot.is-active {
  background-color: var(--bleu-digi);
  width: 26px;               /* le point actif s'étire en pilule */
}
.team-dot:focus-visible {
  outline: 2px solid var(--marine);
  outline-offset: 2px;
}

/* ----- Boutons désactivés ----- */
#team-prev:disabled,
#team-next:disabled {
  cursor: not-allowed;
}

/* ============================================================
   VALEURS
   ============================================================ */
.value-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.value-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 34px -14px rgba(11, 24, 43, 0.2);
}
.value-card > div:first-child {
  transition: transform 0.3s ease;
}
.value-card:hover > div:first-child {
  transform: translateY(-4px) rotate(-6deg);
}

/* ============================================================
   CTA & FOOTER
   ============================================================ */
.cta-contact {
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.cta-contact:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(11, 24, 43, 0.4);
}

.footer-link {
  position: relative;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--bleu-digi), var(--bleu-digi));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
  transition: background-size 0.3s ease, color 0.2s ease;
}
.footer-link:hover {
  color: var(--marine);
  background-size: 100% 2px;
}

/* ============================================================
   RÉVÉLATIONS AU SCROLL
   ============================================================ */
.section-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.section-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
/* Les jalons glissent depuis leur côté (desktop) */
@media (min-width: 768px) {
  .timeline-item.section-reveal:not(.revealed)[data-side="left"]  { transform: translateX(-40px); }
  .timeline-item.section-reveal:not(.revealed)[data-side="right"] { transform: translateX(40px); }
  .timeline-item.section-reveal.revealed { transform: translateX(0); }
}

/* ============================================================
   ACCESSIBILITÉ : mouvement réduit
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .page-banner-title,
  .page-banner-nav { animation: none; opacity: 1; transform: none; }

  .timeline-card,
  .timeline-dot,
  .social-pill,
  .social-icon,
  .social-icon svg,
  .team-slide img,
  .team-dot,
  .value-card,
  .value-card > div:first-child,
  .cta-contact,
  .footer-link,
  #team-track,
  .section-reveal {
    transition: none;
  }
  .social-pill--hidden,
  .team-slide .group:hover .social-pill--hidden {
    transform: translateY(-50%);
    opacity: 1;
  }
  .timeline-item.section-reveal:not(.revealed)[data-side="left"],
  .timeline-item.section-reveal:not(.revealed)[data-side="right"] {
    transform: none;
  }
}
/* ----- Breadcrumb (partagé : History, profil membre…) ----- */
.page-banner-title,
.page-banner-nav {
  opacity: 0;
  transform: translateY(18px);
  animation: banner-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}
.page-banner-nav { animation-delay: 0.3s; }
@keyframes banner-rise {
  to { opacity: 1; transform: translateY(0); }
}

.banner-crumb-link {
  color: #6b7280;
  transition: color 0.2s ease;
  position: relative;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--bleu-digi), var(--bleu-digi));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
}
.banner-crumb-link:hover {
  color: var(--marine);
  background-size: 100% 2px;
}

.banner-crumb-current {
  color: var(--marine);
  font-weight: 700;
  position: relative;
  padding-bottom: 4px;
}
.banner-crumb-current::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 60%;
  height: 3px;
  border-radius: 999px;
  background: var(--bleu-digi);
}

.banner-crumb-sep {
  color: #d1d5db;
  user-select: none;
  display: flex;
  align-items: center;
}
/* ============================================================
   PAGE SERVICE DETAILS
   ============================================================ */

/* ------------------------------------------------------------
   Lettrine drop-cap : le "L" rond flotte à gauche du texte
   ------------------------------------------------------------ */
.drop-cap {
  line-height: 1;
  user-select: none;
}

/* ------------------------------------------------------------
   Bannière vidéo : image zoom + bouton play avec anneau pulsant
   ------------------------------------------------------------ */
#svc-video-banner img {
  transition: transform 0.7s ease;
}
#svc-video-banner:hover img {
  transform: scale(1.03);
}
#play-video-btn::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 9999px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  animation: play-pulse-white 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes play-pulse-white {
  0%   { transform: scale(1);    opacity: 0.7; }
  70%  { transform: scale(1.3);  opacity: 0;   }
  100% { transform: scale(1.3);  opacity: 0;   }
}

/* ------------------------------------------------------------
   Puces checkmark : le cercle "pop" au survol de la ligne
   ------------------------------------------------------------ */
.grid > .flex:hover > .w-5 {
  transform: scale(1.2) rotate(-8deg);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ------------------------------------------------------------
   Duo d'images : zoom léger indépendant
   ------------------------------------------------------------ */
.grid img {
  transition: transform 0.5s ease;
}
.grid img:hover {
  transform: scale(1.02);
}

/* ------------------------------------------------------------
   Cartes d'expertise numérotées :
   le badge s'incline et le numéro vire au blanc au survol
   ------------------------------------------------------------ */
.expertise-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.expertise-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -12px rgba(11, 24, 43, 0.2);
}
.expertise-card > div:first-child {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.expertise-card:hover > div:first-child {
  transform: rotate(-8deg) scale(1.08);
}

/* ------------------------------------------------------------
   Puces de bénéfices : le point central grandit au survol
   ------------------------------------------------------------ */
.space-y-3 > .flex .w-2 {
  transition: transform 0.3s ease;
}
.space-y-3 > .flex:hover .w-2 {
  transform: scale(1.6);
}
.space-y-3 > .flex > div:first-child {
  transition: transform 0.3s ease;
}
.space-y-3 > .flex:hover > div:first-child {
  transform: scale(1.1);
}

/* ------------------------------------------------------------
   Lightbox vidéo (identique à Vision & Mission)
   ------------------------------------------------------------ */
#video-modal {
  transition: opacity 0.3s ease;
}
#video-modal.is-hiding {
  opacity: 0;
  pointer-events: none;
}
.video-modal-panel {
  transform: scale(0.94);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
#video-modal.is-open .video-modal-panel {
  transform: scale(1);
  opacity: 1;
}

/* ------------------------------------------------------------
   Révélations au scroll
   ------------------------------------------------------------ */
.service-detail-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.service-detail-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.expertise-card.section-reveal {
  opacity: 0;
  transform: translateY(24px);
}
.expertise-card.section-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------------
   Accessibilité : mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  #play-video-btn::before { animation: none; }
  #svc-video-banner img, .grid img { transition: none; }
  #svc-video-banner:hover img { transform: none; }
  .expertise-card, .expertise-card > div:first-child { transition: none; }
  .expertise-card:hover { transform: none; }
  .expertise-card:hover > div:first-child { transform: none; }
  #video-modal, .video-modal-panel { transition: none; }
  .video-modal-panel { transform: none; opacity: 1; }
  .service-detail-reveal, .expertise-card.section-reveal {
    opacity: 1; transform: none; transition: none;
  }
}
/* ============================================================
   PAGE PROJECT DETAILS
   ============================================================ */

/* ------------------------------------------------------------
   Lettrine drop-cap
   ------------------------------------------------------------ */
.drop-cap {
  line-height: 1;
  user-select: none;
}

/* ------------------------------------------------------------
   Carte meta : motif hachuré diagonales fines en filigrane
   ------------------------------------------------------------ */
.meta-card {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.04) 0px,
    rgba(255, 255, 255, 0.04) 1px,
    transparent 1px,
    transparent 8px
  );
}
/* Les items meta se soulèvent légèrement au survol */
.meta-card > div {
  transition: transform 0.3s ease;
}
.meta-card > div:hover {
  transform: translateX(4px);
}
.meta-card > div:hover h4 {
  color: var(--bleu-digi); /* la valeur passe en citron au survol */
}
.meta-card h4 {
  transition: color 0.3s ease;
}

/* ------------------------------------------------------------
   Bannière vidéo : zoom + anneau pulsant blanc
   ------------------------------------------------------------ */
#project-video-banner img {
  transition: transform 0.7s ease;
}
#project-video-banner:hover img {
  transform: scale(1.03);
}
#play-project-video::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 9999px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  animation: play-pulse-white 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes play-pulse-white {
  0%   { transform: scale(1);   opacity: 0.7; }
  70%  { transform: scale(1.3); opacity: 0;   }
  100% { transform: scale(1.3); opacity: 0;   }
}

/* ------------------------------------------------------------
   Puces checkmark : "pop" au survol de la ligne
   ------------------------------------------------------------ */
.grid > .flex:hover > .w-5 {
  transform: scale(1.2) rotate(-8deg);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ------------------------------------------------------------
   Témoignage : le guillemet filigrane se teinte au survol
   ------------------------------------------------------------ */
.testimonial-card .text-gray-100 {
  transition: color 0.4s ease;
}
.testimonial-card:hover .text-gray-100 {
  color: rgba(47, 124, 190, 0.35);
}

/* ------------------------------------------------------------
   Bannière CTA : motif hachuré + le bouton passe au blanc
   ------------------------------------------------------------ */
.cta-hatch {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.04) 0px,
    rgba(255, 255, 255, 0.04) 1px,
    transparent 1px,
    transparent 8px
  );
  pointer-events: none;
}

/* ------------------------------------------------------------
   Autres projets : flèche circulaire inversée au survol
   ------------------------------------------------------------ */
.project-arrow svg {
  transition: transform 0.3s ease;
}
.other-project:hover .project-arrow svg {
  transform: translate(3px, -3px);
}

/* ------------------------------------------------------------
   Lightbox vidéo (réutilisée de Service Details)
   ------------------------------------------------------------ */
#video-modal {
  transition: opacity 0.3s ease;
}
#video-modal.is-hiding {
  opacity: 0;
  pointer-events: none;
}
.video-modal-panel {
  transform: scale(0.94);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
#video-modal.is-open .video-modal-panel {
  transform: scale(1);
  opacity: 1;
}

/* ------------------------------------------------------------
   Révélations au scroll
   ------------------------------------------------------------ */
.project-detail-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.project-detail-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------------
   Accessibilité : mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  #play-project-video::before { animation: none; }
  #project-video-banner img { transition: none; }
  #project-video-banner:hover img { transform: none; }
  .meta-card > div, .meta-card h4 { transition: none; }
  .meta-card > div:hover h4 { color: #ffffff; }
  .grid > .flex:hover > .w-5 { transform: none; }
  .testimonial-card .text-gray-100 { transition: none; }
  #video-modal, .video-modal-panel { transition: none; }
  .video-modal-panel { transform: none; opacity: 1; }
  .project-detail-reveal, .other-project { opacity: 1; transform: none; transition: none; }
}
/* ============================================================
   PAGE BLOG DETAILS
   ============================================================ */

/* ------------------------------------------------------------
   Lettrine drop-cap
   ------------------------------------------------------------ */
.drop-cap {
  line-height: 1;
  user-select: none;
}

/* ------------------------------------------------------------
   Hero image : zoom très léger
   ------------------------------------------------------------ */
.rounded-3xl img {
  transition: transform 0.6s ease;
}

/* ------------------------------------------------------------
   Encadré "Also Read" : petit motif hachuré discret
   ------------------------------------------------------------ */
.bg-\[\#0B182B\].border-l-4 {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.04) 0px,
    rgba(255, 255, 255, 0.04) 1px,
    transparent 1px,
    transparent 8px
  );
}

/* ------------------------------------------------------------
   Cartes d'étapes numérotées : badge s'incline au survol
   ------------------------------------------------------------ */
.step-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.step-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px -12px rgba(11, 24, 43, 0.18);
}
.step-card > div:first-child {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.step-card:hover > div:first-child {
  transform: rotate(-8deg) scale(1.1);
}

/* Puces chevron citron : rotation au survol de la ligne */
.space-y-3 > li .bg-\[\var(--bleu-digi)\] {
  transition: transform 0.3s ease;
}
.space-y-3 > li:hover .bg-\[\var(--bleu-digi)\] {
  transform: scale(1.15) rotate(90deg);
}

/* ------------------------------------------------------------
   SOMMAIRE (Table of Content) : état actif (classe posée par JS)
   ------------------------------------------------------------ */
.toc-link {
  color: #6b7280;
}
.toc-link.is-active {
  color: var(--marine);
  font-weight: 700;
}
.toc-link.is-active .toc-bullet {
  background-color: var(--bleu-digi);
  transform: scale(1.6);
}
.toc-bullet {
  transition: background-color 0.3s ease, transform 0.3s ease;
}

/* ------------------------------------------------------------
   CTA "Hire Us" : zoom lent de l'image de fond
   ------------------------------------------------------------ */
.sidebar-hire img {
  transition: transform 0.6s ease;
}
.sidebar-hire:hover img {
  transform: scale(1.05);
}

/* ------------------------------------------------------------
   Articles liés : flèche "Read More" glisse (héritée du group)
   ------------------------------------------------------------ */
.related-card svg {
  transition: transform 0.25s ease;
}

/* ------------------------------------------------------------
   Révélations au scroll
   ------------------------------------------------------------ */
.blog-detail-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.blog-detail-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------------
   Accessibilité : mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .step-card, .step-card > div:first-child,
  .space-y-3 > li .bg-\[\var(--bleu-digi)\],
  .sidebar-hire img,
  .toc-bullet,
  .blog-detail-reveal {
    transition: none;
    animation: none;
  }
  .step-card:hover { transform: none; }
  .step-card:hover > div:first-child { transform: none; }
  .blog-detail-reveal { opacity: 1; transform: none; }
}
/* ============================================================
   PAGE CAREER
   ============================================================ */

/* ------------------------------------------------------------
   Hero vidéo : zoom + anneau pulsant
   ------------------------------------------------------------ */
#career-video-banner img {
  transition: transform 0.7s ease;
}
#career-video-banner:hover img {
  transform: scale(1.03);
}
#career-play-btn::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 9999px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  animation: career-pulse 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes career-pulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  70%  { transform: scale(1.3); opacity: 0;   }
  100% { transform: scale(1.3); opacity: 0;   }
}

/* ------------------------------------------------------------
   Cartes perks : élévation + icône qui s'incline au survol
   ------------------------------------------------------------ */
.perk-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.perk-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -12px rgba(11, 24, 43, 0.25);
}
.perk-card > div:first-child {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.perk-card:hover > div:first-child {
  transform: rotate(-8deg) scale(1.1);
}

/* ------------------------------------------------------------
   Accordéon des offres : contenu animé, bouton Details
   ------------------------------------------------------------ */
.details-content {
  animation: details-in 0.35s ease;
}
@keyframes details-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Puces demi-cercle des listes : zoom au survol de ligne */
.job-item .details-content li span {
  transition: transform 0.25s ease;
}
.job-item .details-content li:hover span {
  transform: scale(1.3);
}

/* ------------------------------------------------------------
   Galerie Life @ Company : motif rayures verticales subtiles
   ------------------------------------------------------------ */
.stripes-pattern {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.02) 0px,
    rgba(255, 255, 255, 0.02) 2px,
    transparent 2px,
    transparent 10px
  );
  pointer-events: none;
}

/* ------------------------------------------------------------
   Modal de candidature : fondu + zoom, en-tête hachuré
   ------------------------------------------------------------ */
#applyModal {
  transition: opacity 0.25s ease;
}
#applyModal.is-hiding {
  opacity: 0;
  pointer-events: none;
}
#applyModalPanel {
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}
#applyModal.is-open #applyModalPanel {
  transform: scale(1);
  opacity: 1;
}
.modal-head-hatch {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.04) 0px,
    rgba(255, 255, 255, 0.04) 1px,
    transparent 1px,
    transparent 8px
  );
}

/* ------------------------------------------------------------
   Modal de devis (pricing) : même animation que candidature
   ------------------------------------------------------------ */
#quoteModal {
  transition: opacity 0.25s ease;
}
#quoteModal.is-hiding {
  opacity: 0;
  pointer-events: none;
}
#quoteModalPanel {
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}
#quoteModal.is-open #quoteModalPanel {
  transform: scale(1);
  opacity: 1;
}

/* Champ invalide (classe posée par app.js) */
.apply-invalid {
  border-color: #ef4444 !important;
  animation: apply-shake 0.35s ease;
}
@keyframes apply-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

/* Notification de succès : apparition en fondu */
#apply-success {
  animation: apply-success-in 0.35s ease;
}
@keyframes apply-success-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------
   Révélations au scroll
   ------------------------------------------------------------ */
.career-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.career-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------------
   Accessibilité : mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  #career-play-btn::before { animation: none; }
  #career-video-banner img { transition: none; }
  #career-video-banner:hover img { transform: none; }
  .perk-card, .perk-card > div:first-child { transition: none; }
  .perk-card:hover { transform: none; }
  .perk-card:hover > div:first-child { transform: none; }
  .details-content { animation: none; }
  #applyModal, #applyModalPanel { transition: none; }
  #applyModalPanel { transform: none; opacity: 1; }
  #quoteModal, #quoteModalPanel { transition: none; }
  #quoteModalPanel { transform: none; opacity: 1; }
  .apply-invalid { animation: none; }
  .career-reveal { opacity: 1; transform: none; transition: none; }
}
/* ============================================================
   CHAT WIDGET — Diggi (au-dessus du back-to-top)
   ============================================================ */

/* ----- Bouton flottant ----- */
#diggi-toggle {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
}
#diggi-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 14px 32px -10px rgba(11, 24, 43, 0.5);
}

/* Tooltip : piloté 100% en CSS */
.diggi-tooltip {
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform: translateY(-50%) translateX(6px);
}
#diggi-toggle:hover .diggi-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

#diggi-toggle:hover #diggi-icon-open svg {
  animation: diggi-wave 0.6s ease;
}
@keyframes diggi-wave {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-12deg); }
  75%      { transform: rotate(12deg); }
}

/* Badge notification */
#diggi-badge {
  animation: diggi-ping 2s ease-in-out infinite;
}
@keyframes diggi-ping {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(47, 124, 190, 0.5); }
  50%      { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(47, 124, 190, 0);   }
}

/* ----- Panneau : LE CORRECTIF PRINCIPAL -----
   La hauteur est bornée au viewport : le panneau ne peut plus
   dépasser le haut de l'écran, quelle que soit la conversation. */
#diggi-panel {
  /* Hauteur max = viewport moins l'offset bas (10.5rem) moins une marge */
  max-height: calc(100vh - 12rem);
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
#diggi-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* En-tête : hachures + ombre (détaché visuellement du fil) */
.diggi-header {
  position: relative;
  z-index: 10;
  flex-shrink: 0; /* ne se compresse jamais */
  box-shadow: 0 4px 12px -4px rgba(11, 24, 43, 0.35);
}
.diggi-header-hatch {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.04) 0px,
    rgba(255, 255, 255, 0.04) 1px,
    transparent 1px,
    transparent 8px
  );
}

/* Point "online" */
.diggi-online-dot {
  animation: diggi-blink 2s ease-in-out infinite;
}
@keyframes diggi-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* ----- Zone des messages : DEUXIÈME CORRECTIF -----
   Elle devient le seul élément FLEXIBLE du panneau (flex: 1)
   et peut rétrécir (min-height: 0) → c'est elle qui scroll
   à l'intérieur du panneau borné, jamais l'inverse. */
#diggi-messages {
  flex: 1 1 auto;
  min-height: 0;          /* indispensable pour autoriser le rétrécissement flex */
  max-height: none;       /* écrase le max-h Tailwind : la contrainte vient du parent */
  padding: 1.25rem 1rem;
  overflow-y: auto;
  scroll-behavior: smooth;
}
#diggi-messages > div {
  margin-bottom: 0.85rem;
}
#diggi-messages > div:last-child {
  margin-bottom: 0;
}

/* ----- Messages ----- */
.diggi-msg {
  max-width: 80%;
  padding: 0.65rem 1rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  animation: diggi-msg-in 0.3s ease;
}
@keyframes diggi-msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.diggi-msg--bot {
  background: #ffffff;
  color: #374151;
  border: 1px solid #e5e7eb;
  border-radius: 1rem 1rem 1rem 0.25rem;
  margin-right: auto;
}
.diggi-msg--user {
  background: var(--marine);
  color: #ffffff;
  border-radius: 1rem 1rem 0.25rem 1rem;
  margin-left: auto;
}

.diggi-time {
  font-size: 0.625rem;
  color: #9ca3af;
  margin-top: 0.25rem;
  display: block;
}
.diggi-msg--user .diggi-time { color: rgba(255, 255, 255, 0.6); }

/* ----- Indicateur "Diggi is typing…" ----- */
.diggi-typing {
  display: inline-flex;
  gap: 4px;
  padding: 0.75rem 1rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem 1rem 1rem 0.25rem;
}
.diggi-typing span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--bleu-digi);
  animation: diggi-bounce 1.2s ease-in-out infinite;
}
.diggi-typing span:nth-child(2) { animation-delay: 0.15s; }
.diggi-typing span:nth-child(3) { animation-delay: 0.3s;  }
@keyframes diggi-bounce {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.5; }
  30%           { transform: translateY(-5px); opacity: 1;   }
}

/* ----- Suggestions rapides : ne se compressent pas ----- */
#diggi-suggestions {
  flex-shrink: 0;
}
.diggi-chip {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  background: #ffffff;
  color: var(--marine);
  border: 1px solid #e5e7eb;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.diggi-chip:hover {
  background: var(--marine);
  color: var(--bleu-digi);
  border-color: var(--marine);
}

/* ----- Formulaire : ancré en bas, jamais compressé ----- */
#diggi-form {
  flex-shrink: 0;
}

/* ------------------------------------------------------------
   Mobile : pile verticale conservée, hauteur adaptée
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  #diggi-toggle { bottom: 5.5rem; right: 1.25rem; }
  #diggi-panel {
    bottom: 9.5rem;
    right: 1.25rem;
    left: 1.25rem;                          /* pleine largeur maîtrisée */
    width: auto;
    max-width: none;
    max-height: calc(100vh - 11.5rem);      /* borné aussi sur mobile */
  }
}

/* ------------------------------------------------------------
   Accessibilité : mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  #diggi-badge,
  .diggi-online-dot,
  .diggi-typing span { animation: none; }
  #diggi-panel,
  .diggi-msg,
  .diggi-tooltip { transition: none; animation: none; }
  #diggi-toggle { transition: none; }
  #diggi-toggle:hover #diggi-icon-open svg { animation: none; }
  #diggi-messages { scroll-behavior: auto; }
}
/* ============================================================
   PAGE CGU
   ============================================================ */

/* ------------------------------------------------------------
   Cartes articles : légère élévation au survol
   ------------------------------------------------------------ */
.cgu-article {
  padding: 1.5rem;
  margin: -1.5rem;
  border-radius: 1.5rem;
  transition: background-color 0.3s ease;
}
.cgu-article:hover {
  background-color: #f8faf9;
}
/* Zone cliquable étendue : le hover couvre toute la carte
   sans décaler le layout (padding négatif technique) */

/* ------------------------------------------------------------
   Sommaire (Table des matières) : état actif (posé par JS)
   ------------------------------------------------------------ */
.cgu-toc-link {
  color: #6b7280;
}
.cgu-toc-link.is-active {
  color: var(--marine);
  font-weight: 700;
}
.cgu-toc-link.is-active .cgu-bullet {
  background-color: var(--bleu-digi);
  transform: scale(1.6);
}
.cgu-bullet {
  transition: background-color 0.3s ease, transform 0.3s ease;
}

/* ------------------------------------------------------------
   Carte contact : motif hachuré (réutilisé)
   ------------------------------------------------------------ */
.cgu-hatch {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.04) 0px,
    rgba(255, 255, 255, 0.04) 1px,
    transparent 1px,
    transparent 8px
  );
  pointer-events: none;
}

/* ------------------------------------------------------------
   Liens inline du texte juridique : soulignement citron fixe
   ------------------------------------------------------------ */
.cgu-article a {
  text-decoration-color: var(--bleu-digi);
}

/* ------------------------------------------------------------
   Révélations au scroll
   ------------------------------------------------------------ */
.cgu-article.section-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease,
              background-color 0.3s ease;
}
.cgu-article.section-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------------
   Accessibilité : mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .cgu-article { transition: none; }
  .cgu-bullet { transition: none; }
  .cgu-article.section-reveal { opacity: 1; transform: none; transition: none; }
}
/* ============================================================
   PAGE MENTIONS LÉGALES
   ============================================================ */

/* ------------------------------------------------------------
   Cartes d'identification : élévation au survol
   ------------------------------------------------------------ */
.legal-id-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.legal-id-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px -14px rgba(11, 24, 43, 0.3);
}
/* L'icône en tête de carte s'incline au survol */
.legal-id-card > div:first-child {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.legal-id-card:hover > div:first-child {
  transform: rotate(-8deg) scale(1.1);
}

/* ------------------------------------------------------------
   Articles : fond gris clair au survol (technique padding négatif)
   ------------------------------------------------------------ */
.legal-article {
  padding: 1.5rem;
  margin: -1.5rem;
  border-radius: 1.5rem;
  transition: background-color 0.3s ease;
}
.legal-article:hover {
  background-color: #f8faf9;
}

/* ------------------------------------------------------------
   Sommaire : état actif (classe posée par le scroll-spy JS)
   ------------------------------------------------------------ */
.legal-toc-link {
  color: #6b7280;
}
.legal-toc-link.is-active {
  color: var(--marine);
  font-weight: 700;
}
.legal-toc-link.is-active .legal-bullet {
  background-color: var(--bleu-digi);
  transform: scale(1.6);
}
.legal-bullet {
  transition: background-color 0.3s ease, transform 0.3s ease;
}

/* ------------------------------------------------------------
   Carte CTA : motif hachuré (réutilisé du design system)
   ------------------------------------------------------------ */
.legal-hatch {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.04) 0px,
    rgba(255, 255, 255, 0.04) 1px,
    transparent 1px,
    transparent 8px
  );
  pointer-events: none;
}

/* ------------------------------------------------------------
   Liens inline juridiques : soulignement citron
   ------------------------------------------------------------ */
.legal-article a {
  text-decoration-color: var(--bleu-digi);
}

/* ------------------------------------------------------------
   Révélations au scroll
   ------------------------------------------------------------ */
.legal-article.section-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease,
              background-color 0.3s ease;
}
.legal-article.section-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------------
   Accessibilité : mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .legal-id-card,
  .legal-id-card > div:first-child { transition: none; }
  .legal-id-card:hover { transform: none; }
  .legal-id-card:hover > div:first-child { transform: none; }
  .legal-bullet { transition: none; }
  .legal-article.section-reveal { opacity: 1; transform: none; transition: none; }
}
/* ============================================================
   PAGE PRIVACY POLICY
   ============================================================ */

/* ------------------------------------------------------------
   Cartes engagements RGPD (résumé en haut)
   ------------------------------------------------------------ */
.privacy-pill-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.privacy-pill-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -12px rgba(11, 24, 43, 0.2);
}
.privacy-pill-card > div:first-child {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.privacy-pill-card:hover > div:first-child {
  transform: rotate(-8deg) scale(1.1);
}

/* ------------------------------------------------------------
   Articles : fond gris clair au survol (padding négatif)
   ------------------------------------------------------------ */
.privacy-article {
  padding: 1.5rem;
  margin: -1.5rem;
  border-radius: 1.5rem;
  transition: background-color 0.3s ease;
}
.privacy-article:hover {
  background-color: #f8faf9;
}

/* ------------------------------------------------------------
   Sommaire : état actif (classe posée par le scroll-spy JS)
   ------------------------------------------------------------ */
.privacy-toc-link {
  color: #6b7280;
}
.privacy-toc-link.is-active {
  color: var(--marine);
  font-weight: 700;
}
.privacy-toc-link.is-active .privacy-bullet {
  background-color: var(--bleu-digi);
  transform: scale(1.6);
}
.privacy-bullet {
  transition: background-color 0.3s ease, transform 0.3s ease;
}

/* ------------------------------------------------------------
   Tableau cookies/finalités : lignes qui se teintent au survol
   ------------------------------------------------------------ */
.privacy-article tbody tr {
  transition: background-color 0.2s ease;
}
.privacy-article tbody tr:hover {
  background-color: #f8faf9;
}

/* ------------------------------------------------------------
   Carte CTA : motif hachuré (réutilisé du design system)
   ------------------------------------------------------------ */
.privacy-hatch {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.04) 0px,
    rgba(255, 255, 255, 0.04) 1px,
    transparent 1px,
    transparent 8px
  );
  pointer-events: none;
}

/* ------------------------------------------------------------
   Liens inline juridiques : soulignement citron
   ------------------------------------------------------------ */
.privacy-article a {
  text-decoration-color: var(--bleu-digi);
}

/* ------------------------------------------------------------
   Révélations au scroll
   ------------------------------------------------------------ */
.privacy-article.section-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease,
              background-color 0.3s ease;
}
.privacy-article.section-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------------
   Accessibilité : mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .privacy-pill-card,
  .privacy-pill-card > div:first-child { transition: none; }
  .privacy-pill-card:hover { transform: none; }
  .privacy-pill-card:hover > div:first-child { transform: none; }
  .privacy-bullet { transition: none; }
  .privacy-article.section-reveal { opacity: 1; transform: none; transition: none; }
}
/* ============================================================
   PAGE THANKS
   ============================================================ */

/* ------------------------------------------------------------
   Cercle de confirmation : apparition en zoom élastique
   ------------------------------------------------------------ */
.thanks-circle {
  animation: thanks-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s backwards;
}
@keyframes thanks-pop {
  from { transform: scale(0);    opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* Coche : se DESSINE trait par trait (dashoffset animé) */
.thanks-check {
  stroke-dasharray: 80;          /* longueur approximative du tracé */
  stroke-dashoffset: 80;         /* invisible au départ */
  animation: thanks-draw 0.5s ease-out 0.7s forwards;
}
@keyframes thanks-draw {
  to { stroke-dashoffset: 0; }
}

/* Anneau citron : pulsation continue autour du cercle */
.thanks-ring {
  animation: thanks-pulse 2.2s ease-out 1.2s infinite;
}
@keyframes thanks-pulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(47, 124, 190, 0.5); }
  70%  { transform: scale(1.15); box-shadow: 0 0 0 18px rgba(47, 124, 190, 0); }
  100% { transform: scale(1.15); box-shadow: 0 0 0 18px rgba(47, 124, 190, 0); }
}

/* ------------------------------------------------------------
   Cascade d'entrée : badge → titre → texte → étapes
   ------------------------------------------------------------ */
#thanks > div > *:nth-child(2),
#thanks > div > *:nth-child(3),
#thanks > div > *:nth-child(4) {
  opacity: 0;
  transform: translateY(18px);
  animation: thanks-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
#thanks > div > *:nth-child(2) { animation-delay: 0.5s; }
#thanks > div > *:nth-child(3) { animation-delay: 0.65s; }
#thanks > div > *:nth-child(4) { animation-delay: 0.8s; }

@keyframes thanks-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* Les étapes et les CTA apparaissent via IntersectionObserver (classe JS) */
.next-step,
.thanks-cta {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.next-step.revealed,
.thanks-cta.revealed {
  opacity: 1;
  transform: translateY(0);
}
.next-step:nth-child(2) { transition-delay: 0.1s; }
.next-step:nth-child(3) { transition-delay: 0.2s; }

/* Étape au survol : légère élévation + le badge de délai s'agrandit */
.next-step {
  transition: opacity 0.6s ease, transform 0.6s ease,
              box-shadow 0.3s ease, background-color 0.3s ease;
}
.next-step:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px -12px rgba(11, 24, 43, 0.2);
  background-color: #ffffff;
}
.next-step > span:last-child {
  transition: transform 0.3s ease;
}
.next-step:hover > span:last-child {
  transform: scale(1.08);
}

/* ------------------------------------------------------------
   Compteur de redirection : mise en évidence du chiffre
   ------------------------------------------------------------ */
#thanks-countdown {
  display: inline-block;
  min-width: 1.5ch;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   Accessibilité : mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .thanks-circle, .thanks-check, .thanks-ring { animation: none; }
  .thanks-check { stroke-dashoffset: 0; } /* coche visible directement */
  .thanks-ring { transform: none; box-shadow: none; }
  #thanks > div > *:nth-child(2),
  #thanks > div > *:nth-child(3),
  #thanks > div > *:nth-child(4) {
    animation: none; opacity: 1; transform: none;
  }
  .next-step, .thanks-cta { opacity: 1; transform: none; transition: none; }
}
/* ============================================================
   PAGE PRICING
   ============================================================ */

/* ----- Filtres : état actif (classe posée par JS) ----- */
.pricing-filter.is-active {
  background-color: var(--marine);
  color: #ffffff;
}

/* ------------------------------------------------------------
   Cartes filtrées : sortie propre (classe posée par app.js)
   ------------------------------------------------------------ */
.pricing-card.is-hidden {
  display: none;
}
.pricing-card {
  animation: pricing-in 0.4s ease;
}
@keyframes pricing-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ------------------------------------------------------------
   Cartes : l'icône du pôle s'incline au survol
   ------------------------------------------------------------ */
.pricing-card > div:first-child > div:first-child {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pricing-card:hover > div:first-child > div:first-child {
  transform: rotate(-8deg) scale(1.1);
}

/* Flèche "Get a Quote" glisse au survol de la carte entière */
.pricing-card a svg {
  transition: transform 0.25s ease;
}
.pricing-card:hover a svg {
  transform: translateX(3px);
}

/* ----- Facteurs de prix : élévation ----- */
.price-factor {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.price-factor:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -12px rgba(11, 24, 43, 0.18);
}
.price-factor > div:first-child {
  transition: transform 0.3s ease;
}
.price-factor:hover > div:first-child {
  transform: rotate(-8deg);
}

/* ----- Icônes check des listes "inclus" ----- */
.pricing-card ul svg {
  flex-shrink: 0;
}

/* ----- CTA : motif hachuré (réutilisé) ----- */
.cta-hatch {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.04) 0px,
    rgba(255, 255, 255, 0.04) 1px,
    transparent 1px,
    transparent 8px
  );
  pointer-events: none;
}

/* ----- Accordéon FAQ (réutilise faq-item/faq-answer globaux) ----- */
.faq-answer { animation: pricing-faq-in 0.3s ease; }
@keyframes pricing-faq-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----- Révélations au scroll ----- */
.pricing-card.section-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease,
              border-color 0.3s ease, box-shadow 0.3s ease;
}
.pricing-card.section-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ----- Accessibilité : mouvement réduit ----- */
@media (prefers-reduced-motion: reduce) {
  .pricing-card { animation: none; transition: none; }
  .pricing-card:hover > div:first-child > div:first-child { transform: none; }
  .pricing-card:hover a svg { transform: none; }
  .price-factor { transition: none; }
  .price-factor:hover { transform: none; }
  .pricing-card.section-reveal { opacity: 1; transform: none; transition: none; }
  .faq-answer { animation: none; }
}
/* ============================================================
   PAGE SEARCH GLOBALE
   ============================================================ */

/* ------------------------------------------------------------
   Résultats groupés : en-tête de groupe avec compteur
   ------------------------------------------------------------ */
.search-group-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--marine);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.search-group-count {
  font-size: 0.625rem;
  background: var(--bleu-digi);
  color: var(--marine);
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
}

/* ----- Carte résultat ----- */
.search-result {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.search-result:hover {
  border-color: var(--marine);
  transform: translateX(4px);
  box-shadow: 0 8px 22px -10px rgba(11, 24, 43, 0.2);
}

/* Icône de type */
.search-result-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--bleu-digi);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.search-result:hover .search-result-icon {
  transform: rotate(-8deg) scale(1.1);
}

/* Textes */
.search-result h3 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--marine);
  margin-bottom: 0.15rem;
}
.search-result p {
  font-size: 0.8125rem;
  color: #6b7280;
  line-height: 1.5;
}
.search-result .search-result-url {
  font-size: 0.6875rem;
  color: #9ca3af;
  margin-top: 0.25rem;
  display: block;
}

/* ----- Surlignage du terme recherché ----- */
.search-highlight {
  background: var(--bleu-digi);
  color: var(--marine);
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 700;
}

/* ----- Filtres : état actif ----- */
.search-filter.is-active {
  background-color: var(--marine);
  color: #ffffff;
}

/* ----- Animation d'entrée des résultats ----- */
.search-result {
  animation: search-in 0.35s ease;
}
@keyframes search-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);   }
}
/* Cascade interne : chaque résultat d'un groupe est légèrement décalé */
.search-group .search-result:nth-child(2) { animation-delay: 0.05s; }
.search-group .search-result:nth-child(3) { animation-delay: 0.1s;  }
.search-group .search-result:nth-child(4) { animation-delay: 0.15s; }

/* ----- Bouton effacer ----- */
#global-search-clear { display: flex; }
#global-search-clear.hidden { display: none; }

/* ------------------------------------------------------------
   Accessibilité : mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .search-result { animation: none; transition: none; }
  .search-result:hover { transform: none; }
  .search-result-icon { transition: none; }
  .search-result:hover .search-result-icon { transform: none; }
}

/* =============================================================
   BLOG CONTENT — rendu du contenu édité via CKEditor
   ============================================================= */
.blog-content h2,
.prose-content h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0B182B;
  padding-top: 1rem;
  scroll-margin-top: 7rem;
  margin-bottom: 0.75rem;
}

.blog-content h3,
.prose-content h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0B182B;
  margin-bottom: 0.5rem;
}

.blog-content h4,
.prose-content h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #0B182B;
  margin-bottom: 0.5rem;
}

.blog-content p,
.prose-content p {
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.75;
  margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
  .blog-content p,
  .prose-content p {
    font-size: 1rem;
  }
}

.blog-content img,
.prose-content img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 1rem;
  filter: grayscale(100%);
  margin: 1.5rem 0;
}

.blog-content .image-duo,
.prose-content .image-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
}

@media (max-width: 640px) {
  .blog-content .image-duo,
  .prose-content .image-duo {
    grid-template-columns: 1fr;
  }
}

.blog-content .also-read,
.prose-content .also-read {
  background: #0B182B;
  border-radius: 0.75rem;
  padding: 1.25rem;
  border-left: 4px solid #2F7CBE;
  color: white;
  margin: 1.5rem 0;
  position: relative;
  overflow: hidden;
}

.blog-content .also-read-label,
.prose-content .also-read-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #2F7CBE;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.blog-content .also-read a,
.prose-content .also-read a {
  color: white;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  position: relative;
  z-index: 1;
}

.blog-content .also-read a:hover,
.prose-content .also-read a:hover {
  text-decoration: underline;
}

.blog-content .step-cards,
.prose-content .step-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding-top: 1rem;
}

@media (max-width: 640px) {
  .blog-content .step-cards,
  .prose-content .step-cards {
    grid-template-columns: 1fr;
  }
}

.blog-content .step-card,
.prose-content .step-card {
  background: #f8faf9;
  border-radius: 0.75rem;
  padding: 1rem;
  border: 1px solid #f3f4f6;
}

.blog-content .step-card .step-num,
.prose-content .step-card .step-num {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: #2F7CBE;
  color: white;
  font-weight: 700;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.blog-content ul.chevron-list,
.prose-content ul.chevron-list {
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
}

.blog-content ul.chevron-list li,
.prose-content ul.chevron-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

.blog-content ul.chevron-list li::before,
.prose-content ul.chevron-list li::before {
  content: '';
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background: #2F7CBE;
  flex-shrink: 0;
  margin-top: 0.125rem;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}

.blog-content ul,
.prose-content ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin: 0.5rem 0;
}

.blog-content ol,
.prose-content ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
  margin: 0.5rem 0;
}

.blog-content li,
.prose-content li {
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.6;
  margin-bottom: 0.125rem;
}

@media (min-width: 768px) {
  .blog-content li,
  .prose-content li {
    font-size: 1rem;
  }
}

.blog-content blockquote,
.prose-content blockquote {
  border-left: 4px solid #2F7CBE;
  background: #f8faf9;
  padding: 1rem 1.25rem;
  border-radius: 0 0.75rem 0.75rem 0;
  margin: 1.5rem 0;
  font-style: italic;
  color: #374151;
}

.blog-content blockquote p,
.prose-content blockquote p {
  margin: 0;
}

.blog-content strong,
.prose-content strong {
  color: #0B182B;
}

.blog-content a,
.prose-content a {
  color: #2F7CBE;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.blog-content a:hover,
.prose-content a:hover {
  color: #0B182B;
}