/* MAN Digital — composants de la version claire (branche proto-theme-clair).
   Chargé sur toutes les pages, après style.css. Tout passe par les variables de thème. */

/* ============================================================================
   ZONE CLAIRE — une section sur fond blanc au milieu d'une page sombre
   ============================================================================ */
.zone-light {
  --ink: #ffffff; --ink-2: #f4f4f0;
  --panel: #f6f6f2; --panel-2: #ededE8; --panel-3: #e3e3dc;
  --text: #0a1a2b; --text-2: #3a516e; --muted: #5b6f88;
  --line: rgba(7, 24, 43, 0.09); --line-2: rgba(7, 24, 43, 0.16); --line-3: rgba(31, 127, 206, 0.45);
  background: #ffffff; color: var(--text);
}
.zone-light h1, .zone-light h2, .zone-light h3, .zone-light .h-lg { color: var(--text); }
.zone-light .hl, .zone-light .em-brand { color: var(--brand-700); }
.zone-light .hly { color: var(--accent-700); }
.zone-light .impact__num, .zone-light .impact__num .u { color: #176aaf; }
.zone-light .impact__cell p, .zone-light .impact__src { color: var(--text-2); }
.zone-light .impact__cell strong { color: var(--text); }
/* le panneau de chiffres reste une carte sombre : contraste fort sur le blanc */
.zone-light .stat-panel {
  --panel: #0d1626; --panel-2: #122036; --text: #eaf2fc; --text-2: #b3c6e0; --muted: #8aa0bd;
  --line: rgba(146, 186, 234, 0.12); --line-2: rgba(146, 186, 234, 0.22);
  color: var(--text);
}

/* ============================================================================
   DUEL « Rester comme ça, ou prendre l'avantage » : cartes claires sur le bleu nuit
   ============================================================================ */
.vs--light .vs__col {
  --panel: #ffffff; --text: #0a1a2b; --text-2: #3a516e; --line: rgba(7, 24, 43, 0.1);
  color: var(--text);
  border-color: transparent;
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, 0.75);
}
.vs--light .vs__col--no { background: linear-gradient(180deg, rgba(200, 60, 60, 0.08), transparent 55%), #ffffff; }
.vs--light .vs__col--yes {
  background: linear-gradient(180deg, rgba(81, 175, 247, 0.16), transparent 62%), #ffffff;
  border-color: rgba(201, 138, 29, 0.55);
  box-shadow: 0 34px 70px -30px rgba(46, 151, 230, 0.6);
}
.vs--light .vs__col--no .vs__head, .vs--light .vs__col--no .vs__list svg { color: #b3423a; }
.vs--light .vs__col--yes .vs__head, .vs--light .vs__col--yes .vs__list svg { color: #8a5e0b; }
.vs--light .vs__list li { color: var(--text-2); }
.vs--light .vs__col--yes .vs__list li { color: var(--text); }

/* ============================================================================
   RÉALISATIONS dans la tablette : captures légères, défilement horizontal
   ============================================================================ */
.tabletshow__stage { flex-direction: column; align-items: center; }
.tablet__full { opacity: 1; }
.tablet__live { display: none !important; }
.works { overflow: hidden; background: #0b1424; }
.works__track {
  display: flex; height: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.works__track::-webkit-scrollbar { display: none; }
.works__track:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
.works__slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: start; display: block; overflow: hidden; }
.works__slide img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.works__slide:hover img { transform: scale(1.02); }
/* « Découvrir le site », centré sur l'aperçu, avec un léger voile pour rester lisible sur la capture */
.works__slide::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(42% 38% at 50% 50%, rgba(4, 10, 20, 0.38), transparent 72%);
  transition: opacity 0.3s ease;
}
.works__cta {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px; border-radius: var(--r-pill);
  background: var(--brand); color: var(--brand-ink);
  font-family: var(--font-brand); font-weight: 600; font-size: 1.02rem; white-space: nowrap;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.65), 0 0 0 6px rgba(81, 175, 247, 0.22);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.works__cta svg { width: 16px; height: 16px; }
.works__slide:hover .works__cta,
.works__slide:focus-visible .works__cta { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 22px 46px -12px rgba(0, 0, 0, 0.7), 0 0 0 8px rgba(81, 175, 247, 0.3); }
.works__slide:focus-visible { outline: none; }
.works__nav {
  position: absolute; top: 50%; z-index: 6;
  width: 46px; height: 46px; margin-top: -23px;
  display: grid; place-items: center; border-radius: 50%;
  background: #0a1626; color: #fff; border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.7);
  cursor: pointer; transition: background 0.2s, transform 0.2s;
}
.works__nav svg { width: 20px; height: 20px; }
.works__nav:hover { background: var(--brand); color: var(--brand-ink); }
.works__nav:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.works__nav--prev { left: -23px; }
.works__nav--next { right: -23px; }
.works__dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.works__dot {
  width: 10px; height: 10px; padding: 0; border-radius: var(--r-pill); cursor: pointer;
  background: var(--line-2); transition: background 0.3s ease;
}
.works__dot.is-on { width: 30px; background: var(--brand); }
.works__dot:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
@media (max-width: 700px) {
  .works__nav { width: 38px; height: 38px; margin-top: -19px; }
  .works__nav--prev { left: 6px; }
  .works__nav--next { right: 6px; }
  .works__cta { padding: 9px 16px; font-size: 0.86rem; gap: 6px; }
  .works__cta svg { width: 13px; height: 13px; }
}

/* ============================================================================
   OFFRES (services) : cartes qui s'empilent au défilement
   ============================================================================ */
.stack { position: relative; padding-block: clamp(24px, 4vw, 48px) clamp(40px, 6vw, 80px); }
.stack__item {
  position: sticky; top: 16px; isolation: isolate;
  width: min(100% - 2 * var(--gutter, 20px), 1280px); margin-inline: auto;
  border-radius: 30px; padding-block: clamp(36px, 5vw, 64px);
  background: linear-gradient(155deg, #122036, #0a1e38);
  border: 1px solid var(--line-2);
  box-shadow: 0 -18px 60px -30px rgba(0, 0, 0, 0.7), 0 30px 80px -40px rgba(0, 0, 0, 0.8);
  transform-origin: 50% 0;
  will-change: transform;
}
.stack__item + .stack__item { margin-top: clamp(28px, 4vw, 48px); }
/* liseré « électrique » dégradé autour de chaque carte */
.stack__item::before {
  content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 32px; pointer-events: none;
  background: conic-gradient(from 210deg, transparent 0deg, rgba(81, 175, 247, 0.85) 60deg, rgba(81, 175, 247, 0.5) 120deg,
    transparent 180deg, rgba(244, 196, 78, 0.45) 240deg, transparent 360deg);
}
.stack .divider-top { border-top: 0; }
.stack .svc--flagship { background: none; border: 0; box-shadow: none; padding: 0; }
.stack__item.section--ink2.section--warm { background: radial-gradient(52% 46% at 92% 8%, rgba(244, 196, 78, 0.12), transparent 56%), #08101f; }
.stack__item.section--light { background: radial-gradient(80% 60% at 82% -10%, #ffffff, transparent 60%), #eef4fb; }
@media (max-width: 700px) {
  .stack__item { border-radius: 24px; padding-block: 34px; width: calc(100% - 20px); }
  .stack__item::before { border-radius: 26px; }
}
@media (prefers-reduced-motion: reduce) { .stack__item { will-change: auto; } }

/* ============================================================================
   CARTES 3D (méthode) : inclinaison qui suit la souris + reflet
   ============================================================================ */
.tilt { transform-style: preserve-3d; }
.tilt__spot {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  opacity: 0; transition: opacity 0.3s ease;
  background: radial-gradient(circle at var(--sx, 50%) var(--sy, 50%), rgba(255, 255, 255, 0.2), transparent 42%);
}
.tilt.is-tilting .tilt__spot { opacity: 1; }
.tilt.is-tilting { box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.75); }

/* ============================================================================
   FOOTER : bord en vague + logo et signature en grand
   ============================================================================ */
.footer { position: relative; }
.footer::before, .footer::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px);
  height: clamp(38px, 6vw, 92px); pointer-events: none;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.footer::before { /* vague arrière, bleu MaN translucide */
  background: var(--brand); opacity: 0.35;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 26C260 78 520 0 760 28s460 26 680 54v18H0Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 26C260 78 520 0 760 28s460 26 680 54v18H0Z'/%3E%3C/svg%3E");
}
.footer::after { /* vague avant, couleur du footer */
  background: inherit;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 58C240 100 480 12 720 40s480 58 720 4v56H0Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 58C240 100 480 12 720 40s480 58 720 4v56H0Z'/%3E%3C/svg%3E");
}
.fhero {
  position: relative; isolation: isolate;
  display: grid; justify-items: center; gap: clamp(6px, 1.6vw, 14px);
  text-align: center;
  padding-block: clamp(4px, 2vw, 20px) clamp(36px, 6vw, 70px);
  margin-bottom: clamp(30px, 5vw, 56px);
  border-bottom: 1px solid var(--line);
}
.fhero::before { /* lueur qui suit la souris */
  content: ""; position: absolute; inset: -10% 5%; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 55% at var(--gx, 50%) var(--gy, 40%), rgba(81, 175, 247, 0.22), transparent 70%);
  opacity: 0.55; transition: opacity 0.4s ease;
}
.fhero.is-hot::before { opacity: 1; }
.fhero__logo { width: clamp(190px, 30vw, 420px); height: auto; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease; }
.fhero.is-hot .fhero__logo { filter: drop-shadow(0 22px 40px rgba(81, 175, 247, 0.45)); }
.fhero__slogan {
  margin: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  font-size: clamp(2.1rem, 7.2vw, 5.6rem); color: var(--text);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.fhero__slogan span { font-family: var(--font-brand); font-weight: 600; color: var(--brand); }
@media (prefers-reduced-motion: reduce) {
  .fhero__logo, .fhero__slogan { transition: none; transform: none !important; }
}

/* ============================================================================
   BULLE WHATSAPP (milieu du bord droit, loin du menu et de la pastille d'avis)
   ============================================================================ */
.wa {
  position: fixed; right: clamp(12px, 2vw, 24px); top: 50%; transform: translateY(-50%); z-index: 295;
  display: inline-flex; align-items: center; flex-direction: row-reverse; gap: 10px;
  text-decoration: none;
}
.wa__btn {
  width: 56px; height: 56px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: #25d366; color: #fff;
  box-shadow: 0 14px 30px -10px rgba(18, 140, 70, 0.75), 0 0 0 4px rgba(37, 211, 102, 0.16);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}
.wa__btn svg { width: 30px; height: 30px; }
.wa__label {
  padding: 9px 14px; border-radius: var(--r-pill);
  background: #ffffff; color: #0a1a2b; font-family: var(--font-brand); font-weight: 600; font-size: 0.88rem; white-space: nowrap;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.45);
  opacity: 0; transform: translateX(8px); pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.wa:hover .wa__btn, .wa:focus-visible .wa__btn { transform: scale(1.07); }
.wa:hover .wa__label, .wa:focus-visible .wa__label { opacity: 1; transform: none; }
.wa:focus-visible { outline: none; }
.wa:focus-visible .wa__btn { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #25d366; }
.wa.is-nudge .wa__label { opacity: 1; transform: none; }
@media (max-width: 899px) {
  .wa__btn { width: 50px; height: 50px; }
  .wa__btn svg { width: 27px; height: 27px; }
  .wa__label { display: none; }
}
@media (prefers-reduced-motion: reduce) { .wa__btn, .wa__label { transition: none; } }

/* ============================================================================
   GRILLE CENTRÉE : une carte seule sur sa ligne se place au milieu (Histoire)
   ============================================================================ */
.grid-auto--center {
  --g: clamp(18px, 2.4vw, 28px);
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--g);
}
.grid-auto--center > * { flex: 0 1 calc((100% - 2 * var(--g)) / 3); min-width: 0; }
@media (max-width: 980px) { .grid-auto--center > * { flex-basis: calc((100% - var(--g)) / 2); } }
@media (max-width: 640px) { .grid-auto--center > * { flex-basis: 100%; } }