/* ==========================================================================
   FD Stratégies — Sections
   ========================================================================== */

/* --------------------------------------------------------------------------
   Décor : plans tranchés & diagonales (charte 05)
   Aplats francs découpés au clip-path — aucun dégradé, aucune ombre portée.
   -------------------------------------------------------------------------- */

.fds-shape {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.fds-shape--tr { clip-path: polygon(100% 0, 100% 100%, 0 0); }
.fds-shape--bl { clip-path: polygon(0 0, 100% 100%, 0 100%); }
.fds-shape--tl { clip-path: polygon(0 0, 100% 0, 0 100%); }

/* Trame de points discrète, en fond de section. */
.fds-dots {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(20, 62, 116, .10) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
}
.fds-invert .fds-dots { background-image: radial-gradient(circle, rgba(255,255,255,.14) 1px, transparent 1px); }

/* Tout contenu de section passe au-dessus du décor. */
.fds-section > .fds-container { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

.fds-hero {
  position: relative;
  overflow: hidden;
  background: var(--fds-canvas);
}
.fds-hero__inner {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 1rem + 3vw, 3.75rem);
  align-items: center;
  padding-top: clamp(3.5rem, 2rem + 5vw, 6rem);
}
.fds-hero__copy { padding-bottom: clamp(3.5rem, 2rem + 5vw, 6rem); }

.fds-hero__title {
  font-size: clamp(2.5rem, 1.5rem + 4.4vw, 4.25rem);
  line-height: 1.06;
  margin: 1.75rem 0 0;
}
.fds-hero__lead { margin-top: 1.625rem; max-width: 35rem; }
.fds-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .875rem;
  margin-top: 2.375rem;
}

/* Bandeau de preuves chiffrées. */
.fds-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, .6rem + 2vw, 1.875rem);
  margin-top: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--fds-line);
}
.fds-stat { min-width: 7.5rem; }
.fds-stat__value {
  font-family: var(--fds-font-title);
  font-size: clamp(1.625rem, 1.4rem + 1vw, 1.875rem);
  font-weight: 700;
  color: var(--fds-marine);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fds-stat__label {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--fds-text-muted);
  line-height: 1.4;
  margin-top: .375rem;
  max-width: 12rem;
}
.fds-stat__sep { width: 1px; background: var(--fds-line); align-self: stretch; }

/* Panneau visuel du hero : plans tranchés sur aplat marine. */
.fds-hero__visual {
  position: relative;
  height: clamp(24rem, 18rem + 18vw, 40rem);
  align-self: end;
}
.fds-hero__panel {
  position: absolute;
  inset: 0 0 0 2.5rem;
  background: var(--fds-marine);
  border-radius: var(--fds-radius-xl) var(--fds-radius-xl) 0 0;
  overflow: hidden;
}
.fds-hero__panel .fds-shape--tr {
  top: -6.25rem; right: -6.25rem;
  width: 23.75rem; height: 23.75rem;
  background: var(--fds-orange);
}
.fds-hero__panel .fds-shape--bl {
  bottom: -5rem; left: -5rem;
  width: 18.75rem; height: 18.75rem;
  background: var(--fds-marine-deep);
}
.fds-hero__mark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  height: clamp(8rem, 6rem + 8vw, 13.75rem);
  width: auto;
  z-index: 1;
}
/* La carte de statut : la surface de verre la plus lisible du site. */
.fds-hero__status {
  position: absolute;
  left: 2.75rem; right: 2.75rem; bottom: 2.75rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.375rem 1.625rem;
  border-radius: var(--fds-radius-md);
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .20);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .fds-hero__inner { grid-template-columns: 1fr; }
  .fds-hero__visual { height: clamp(20rem, 14rem + 26vw, 26rem); order: 2; }
  .fds-hero__panel { inset: 0; }
  .fds-hero__status { left: 1.25rem; right: 1.25rem; bottom: 1.25rem; padding: 1rem 1.125rem; }
  .fds-stat__sep { display: none; }
}

/* --------------------------------------------------------------------------
   2. Notre société — texte à deux colonnes
   -------------------------------------------------------------------------- */

.fds-about {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}
.fds-about__body > * + * { margin-top: var(--fds-space-md); }

/* Emplacement de la colonne de gauche : occupe l'espace resté vide sous le
   titre, et — à partir du bureau — toute la hauteur de la section, fixe à
   l'écran pendant que le texte défile en parallaxe à côté (voir plus bas).
   Pas de cadre : une animation Lottie se suffit à elle-même. */
.fds-about__media {
  margin-top: clamp(1.25rem, 1rem + .8vw, 1.5rem);
  aspect-ratio: 3 / 4;
  border-radius: var(--fds-radius-xl);
  overflow: hidden;
}

.fds-about__lottie,
.fds-about__media-empty {
  width: 100%;
  height: 100%;
}
/* lottie-web dessine son propre <svg> (ou <canvas>) à l'intérieur, avec ses
   propres proportions (jamais recadrées, voir `preserveAspectRatio: 'meet'`
   dans app.js) : le centrage revient donc au conteneur, en flex, plutôt
   qu'au SVG lui-même — fiable quel que soit le format de l'animation. */
.fds-about__lottie {
  display: flex;
  align-items: center;
  justify-content: center;
}
.fds-about__lottie svg,
.fds-about__lottie canvas {
  max-width: 100%;
  max-height: 100%;
}

.fds-about__media-empty {
  position: relative;
  background: var(--fds-marine);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fds-about__media-empty .fds-shape--tr {
  top: 0; right: 0;
  width: 62%; height: 100%;
  background: var(--fds-orange);
  opacity: .9;
}
.fds-about__media-empty img.fds-about__media-mark {
  position: relative;
  z-index: 1;
  width: auto;
  height: 30%;
  max-height: 5rem;
  object-fit: contain;
  opacity: .9;
}

/* À partir du bureau : la colonne de gauche s'élargit (l'animation prend le
   pas sur le texte plutôt que l'inverse) et s'étire sur toute la hauteur de
   la rangée (align-items:stretch) ; la carte remplit cette hauteur (flex:1,
   hauteur minimale généreuse en filet de sécurité) et reste fixe à l'écran
   (position:sticky) tant que la section défile — le texte, lui, continue
   son propre mouvement de parallaxe (data-fds-parallax sur .fds-about__body). */
@media (min-width: 861px) {
  .fds-about {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: stretch;
  }
  .fds-about__col-left { display: flex; flex-direction: column; }
  .fds-about__media {
    flex: 1;
    aspect-ratio: auto;
    min-height: 46rem;
    position: sticky;
    top: 7rem;
  }
}

@media (max-width: 860px) {
  .fds-about { grid-template-columns: 1fr; }
  /* En une colonne, la carte suit directement le titre : pas besoin d'une
     hauteur de portrait complète, une bande plus large reste élégante. */
  .fds-about__media { aspect-ratio: 16 / 10; max-width: 28rem; }
}

/* --------------------------------------------------------------------------
   3. Expertises
   -------------------------------------------------------------------------- */

.fds-expertises { --fds-col: 260px; }

/* --------------------------------------------------------------------------
   4. Services — deux pôles
   -------------------------------------------------------------------------- */

.fds-poles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: var(--fds-space-md);
}
.fds-pole {
  position: relative;
  padding: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
  border-radius: var(--fds-radius-xl);
  overflow: hidden;
}
.fds-pole--a { background: var(--fds-blanc); border: 1px solid var(--fds-line); }
.fds-pole--b { background: var(--fds-marine); color: rgba(255,255,255,.82); }
.fds-pole--b .fds-shape--tr {
  top: -3.75rem; right: -3.75rem;
  width: 15rem; height: 15rem;
  background: var(--fds-orange);
  opacity: .9;
}
.fds-pole > * { position: relative; z-index: 1; }
.fds-pole__title { font-family: var(--fds-font-title); font-size: var(--fds-fs-h2); font-weight: 600; margin: .5rem 0 var(--fds-space-sm); }
.fds-pole--b .fds-pole__title { color: #fff; }
.fds-pole__grid { columns: 2; column-gap: var(--fds-space-md); margin-block: var(--fds-space-md); }
.fds-pole__grid > li { break-inside: avoid; }
@media (max-width: 560px) { .fds-pole__grid { columns: 1; } }

.fds-pole--b .fds-list-dot > li { color: rgba(255,255,255,.72); }
.fds-pole--b .fds-list-dot > li::before { background: var(--fds-orange-light); }

/* Bloc de sous-service dans le pôle B. */
.fds-subservice {
  padding: var(--fds-space-md) 0;
  border-top: 1px solid var(--fds-line-invert);
}
.fds-subservice h4 { color: #fff; font-size: 1rem; margin-bottom: .5rem; }
.fds-subservice p { font-size: .9375rem; color: rgba(255,255,255,.68); line-height: 1.6; margin: 0; }

/* Grille détaillée de la page Services. */
.fds-services-grid { --fds-col: 320px; }

/* --------------------------------------------------------------------------
   5. Avis clients — slider
   -------------------------------------------------------------------------- */

.fds-slider { position: relative; }

/* La grille à l'intérieur de chaque diapositive : trois colonnes qui se
   replient à 2 puis 1 sur petit écran, exactement comme avant le slider. */
.fds-testimonials { --fds-col: 320px; }

/* Le carrousel natif : fonctionne sans JavaScript (glisser au doigt, molette,
   flèches clavier une fois le rail focus) grâce à `scroll-snap`. Le JS ne
   fait qu'ajouter les points, les flèches et la lecture automatique. */
.fds-slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.fds-slider__track::-webkit-scrollbar { display: none; }
.fds-slider__track:focus-visible {
  outline: 3px solid var(--fds-orange);
  outline-offset: 4px;
}

/* Chaque diapositive porte une PAGE de cartes (trois par défaut), pas une
   carte isolée : `.fds-testimonials` à l'intérieur retrouve exactement la
   grille d'origine (auto-fit, colonnes de 320 px), qui se replie déjà
   naturellement à 2 puis 1 colonne sur petit écran. */
.fds-slider__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: center;
  padding-inline: clamp(0px, -0.5rem + 1vw, .5rem);
}

/* Masqués tant que le JS n'a pas fini de s'initialiser (classe posée par
   `initTestimonialSlider`) : sans elle, points et flèches ne feraient rien,
   le rail natif ci-dessus suffit déjà à parcourir les avis. */
.fds-slider__controls { display: none; }
.fds-slider.is-ready .fds-slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, .7rem + 1vw, 1.5rem);
  margin-top: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
}

.fds-slider__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--fds-blanc);
  border: 1px solid var(--fds-line);
  color: var(--fds-marine);
  transition: background-color var(--fds-dur) var(--fds-ease), border-color var(--fds-dur) var(--fds-ease), color var(--fds-dur) var(--fds-ease);
}
.fds-slider__arrow:hover { background: var(--fds-orange); border-color: var(--fds-orange); color: #fff; }
.fds-slider__arrow--prev svg { transform: scaleX(-1); }

.fds-slider__dots { display: flex; align-items: center; gap: .5rem; }

/* Point de navigation ; celui actif s'allonge en pilule — signature visuelle
   des carrousels modernes, plus lisible qu'un simple point rempli. */
.fds-slider__dot {
  position: relative;
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: var(--fds-radius-pill);
  background: var(--fds-brume);
  overflow: hidden;
  transition: width var(--fds-dur) var(--fds-ease-out), background-color var(--fds-dur) var(--fds-ease);
}
.fds-slider__dot:hover { background: var(--fds-acier); }
.fds-slider__dot[aria-selected="true"] {
  width: 26px;
  background: rgba(242, 101, 34, .25);
}

/* Remplissage progressif du point actif pendant la lecture automatique —
   se recale à chaque interaction manuelle (voir app.js). */
.fds-slider__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fds-orange);
  transform-origin: left;
  transform: scaleX(0);
}
.fds-slider.is-autoplaying .fds-slider__dot[aria-selected="true"].is-filling::after {
  animation: fds-dot-fill var(--fds-slider-interval, 5000ms) linear forwards;
}
@keyframes fds-dot-fill { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .fds-slider__dot[aria-selected="true"]::after { transform: scaleX(1); animation: none; }
}

.fds-quote {
  display: flex;
  flex-direction: column;
  gap: var(--fds-space-md);
  padding: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  background: var(--fds-blanc);
  border: 1px solid var(--fds-line);
  border-radius: var(--fds-radius-lg);
  height: 100%;
}
.fds-quote__mark {
  font-family: var(--fds-font-title);
  font-size: 3.5rem;
  line-height: .6;
  color: var(--fds-peche);
  height: 1.4rem;
}
.fds-quote__text {
  font-family: var(--fds-font-title);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--fds-text);
  margin: 0;
  flex: 1;
  text-wrap: pretty;
}
.fds-quote__author { display: flex; align-items: center; gap: .875rem; margin-top: auto; }
.fds-quote__avatar {
  width: 46px; height: 46px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fds-ciel);
  color: var(--fds-marine);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .04em;
  border-radius: 50%;
  overflow: hidden;
}
.fds-quote__avatar img { width: 100%; height: 100%; object-fit: cover; }
.fds-quote__name { font-size: .9375rem; font-weight: 700; color: var(--fds-marine); line-height: 1.3; }
.fds-quote__role { font-size: .8125rem; color: var(--fds-text-muted); line-height: 1.3; }

/* --------------------------------------------------------------------------
   6. FAQ
   -------------------------------------------------------------------------- */

.fds-faq {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
}
.fds-faq__aside { position: sticky; top: 7rem; }
@media (max-width: 860px) {
  .fds-faq { grid-template-columns: 1fr; }
  .fds-faq__aside { position: static; }
  /* En une seule colonne, `gap` ne joue plus qu'un rôle vertical entre
     l'aside (titre + bouton) et l'accordéon — le clamp fluide y descend
     trop bas sur petit écran pour se lire comme une vraie coupure. */
  .fds-faq { row-gap: 3rem; }
}

/* --------------------------------------------------------------------------
   7. Clients — bandeau de logos défilant
   -------------------------------------------------------------------------- */

/* Section encadrée d'un filet en haut et en bas — la distingue comme une
   bande à part, plutôt qu'une section éditoriale comme les autres. */
/* Bande pleine largeur, encadrée d'un filet, autour de la seule rangée qui
   défile — jamais autour de tout le bloc (titre compris). Partagée par la
   bande de services sous le hero et la rangée de logos clients. */
.fds-logo-band {
  position: relative;
  z-index: 1;
  padding-block: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  border-top: 1px solid var(--fds-brume);
  border-bottom: 1px solid var(--fds-brume);
}
/* Espace un peu du contenu qui précède quand la bande vit à l'intérieur
   d'une section (ex. « Nos clients »), plutôt que juste sous le hero. */
.fds-section > .fds-logo-band { margin-top: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem); }

.fds-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.fds-marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  width: max-content;
  will-change: transform;
}
.fds-marquee__item {
  --fds-marquee-item-h: 3.5rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--fds-marquee-item-h);
  padding-inline: 1rem;
}
/* Couleurs réelles des logos, sans désaturation ni survol nécessaire.
   Hauteur reprise via la même variable plutôt qu'un pourcentage : en enfant
   flex, un `height`/`max-height` en pourcentage ne se résolvait pas de façon
   fiable contre la hauteur du conteneur — le logo s'affichait à sa taille
   intrinsèque et débordait, rogné par le `overflow:hidden` du bandeau (seul
   le motif central du logo restait visible, jamais le nom en dessous). */
.fds-marquee__item img { height: var(--fds-marquee-item-h); width: auto; max-width: 100%; }

/* Variante « cartes » (ex. le bandeau du journal) : les articles ne sont
   pas des logos à centrer sur une hauteur fixe, ils s'alignent en haut et
   gardent leur hauteur naturelle. */
.fds-marquee--cards { padding-block: .5rem; }
.fds-marquee--cards .fds-marquee__track { align-items: flex-start; gap: var(--fds-space-md); }
.fds-marquee--cards .fds-marquee__item { height: auto; padding-inline: 0; }
/* `.fds-marquee__item img` (plus haut, pensée pour des logos à 3.5rem de
   haut) l'emporterait sinon sur `.fds-article-card__img` à specificité
   égale : cette règle, à trois classes, prend le dessus pour que la photo
   remplisse bien sa carte plutôt que de retomber à la taille d'un logo. */
.fds-marquee--cards .fds-marquee__item .fds-article-card__img { width: 100%; height: 100%; max-width: none; }

/* Emplacement vide, en attendant les logos clients — même gabarit qu'un
   logo réel pour que l'aperçu de la rangée reste proportionné. */
.fds-logo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 9rem;
  height: 3.5rem;
  border: 1.5px dashed var(--fds-brume);
  border-radius: var(--fds-radius-md);
  color: var(--fds-brume);
  font-size: .8125rem;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   8. Réalisations
   -------------------------------------------------------------------------- */

.fds-works { --fds-col: 300px; }

/* Rangée défilante horizontale (façon « études de cas » Stripe) : la
   navigation se fait par flèches, plus par filtre de catégorie — l'image
   reste la porte d'entrée visuelle, la légende et le lien vivent en dessous,
   hors de la carte, jamais superposés dessus. */
.fds-work-row { position: relative; }

/* Masquées tant que le JS n'a pas câblé le défilement (voir initWorkRow
   dans app.js) : sans lui les flèches ne feraient rien, le rail natif
   ci-dessous suffit déjà à parcourir les projets. */
.fds-work-row__nav { display: none; }
.fds-work-row.is-ready .fds-work-row__nav {
  display: flex;
  justify-content: flex-end;
  gap: .625rem;
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
}
.fds-work-row__nav[hidden] { display: none; }
.fds-work-row__nav button:disabled { opacity: .35; pointer-events: none; }

/* Rail natif : molette, glisser au doigt et flèches clavier fonctionnent
   sans JavaScript grâce à scroll-snap ; les flèches ne font qu'appeler
   scrollBy() sur ce même rail (voir initWorkRow dans app.js). */
.fds-work-row__viewport {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--fds-gutter));
}
.fds-work-row__viewport::-webkit-scrollbar { display: none; }
.fds-work-row__viewport:focus-visible {
  outline: 3px solid var(--fds-orange);
  outline-offset: 4px;
}

/* Le padding de bord vit ici, pas sur .fds-work-row__viewport : posé sur
   l'élément qui défile lui-même, la plupart des navigateurs ne le
   respectent qu'en fin de scroll, jamais au début — la première carte
   se retrouvait collée au bord de l'écran. Posé sur le contenu défilé
   (ce bloc n'est pas le conteneur de scroll), il s'affiche de façon fiable
   des deux côtés. */
.fds-work-row__track {
  display: flex;
  gap: var(--fds-space-md);
  width: max-content;
  padding-inline: var(--fds-gutter);
}
.fds-work-row__track > .fds-work {
  flex: 0 0 clamp(300px, 30vw, 400px);
  scroll-snap-align: start;
}

.fds-work {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.fds-work__media {
  position: relative;
  box-sizing: border-box;
  /* 8∶5 : le même ratio que le recadrage WordPress (taille fds-work,
     880×550) — une capture de site web est intrinsèquement large, un cadre
     portrait la recadrait de façon trop serrée pour rester lisible. */
  aspect-ratio: 8 / 5;
  /* Petite marge intérieure : la capture respire un peu au lieu de toucher
     les bords de la carte — un effet légèrement dézoomé. */
  padding: .625rem;
  border-radius: var(--fds-radius-md);
  background: var(--fds-ciel);
  overflow: hidden;
}
.fds-work__media img {
  width: 100%;
  height: 100%;
  /* « contain », pas « cover » : une capture de site ne doit jamais être
     rognée sur les côtés — quel que soit son format réel, elle doit
     toujours apparaître en entière, quitte à laisser un peu de fond visible
     en haut/bas ou à gauche/droite. Le rayon se répète ici : en contain,
     l'image ne remplit pas forcément tout le cadre, donc le overflow:hidden
     du parent ne suffit pas à lui seul à arrondir SES coins à elle. */
  object-fit: contain;
  object-position: top center;
  border-radius: var(--fds-radius-md);
  transition: transform var(--fds-dur-slow) var(--fds-ease-out);
}
.fds-work:hover .fds-work__media img,
.fds-work:focus-within .fds-work__media img { transform: scale(1.05); }

/* Pastille de catégorie, superposée sur l'image comme le logo client chez
   Stripe — seul élément qui vit sur la photo elle-même. */
.fds-work__tag {
  position: absolute;
  bottom: .75rem;
  left: .75rem;
  z-index: 1;
  padding: .35rem .75rem;
  background: rgba(255, 255, 255, .92);
  color: var(--fds-marine);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: var(--fds-radius-pill);
}

/* Repli visuel quand la réalisation n'a pas encore d'image. */
.fds-work__media--empty { background: var(--fds-marine); }
.fds-work__media--empty .fds-shape--tr {
  top: 0; right: 0;
  width: 60%; height: 100%;
  background: var(--fds-orange);
  opacity: .85;
}

/* Légende hors de la carte : description en une phrase, puis un lien texte
   avec flèche — exactement le schéma des études de cas Stripe. */
.fds-work__caption { display: flex; flex-direction: column; gap: .625rem; }
.fds-work__excerpt {
  margin: 0;
  color: var(--fds-text-muted);
  font-size: .9375rem;
  line-height: 1.6;
}
.fds-work__cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  width: fit-content;
  font-weight: 700;
  font-size: .9375rem;
  color: var(--fds-orange);
}
.fds-work__cta svg { transition: transform var(--fds-dur) var(--fds-ease); }
.fds-work:hover .fds-work__cta svg,
.fds-work__cta:focus-visible svg { transform: translateX(3px); }

/* Lien étiré : toute la carte navigue, un seul <a> réel — pas d'ancres
   imbriquées, pas de JS nécessaire pour le clic. Le lien lui-même reste
   statique : son ::after se positionne par rapport à .fds-work (le seul
   ancêtre positionné), pas par rapport au petit lien — sinon l'étirement
   ne couvrirait que le texte, jamais la photo. */
.fds-work__cta::after { content: ""; position: absolute; inset: 0; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .fds-work-row__viewport { scroll-behavior: auto; }
  .fds-work__media img, .fds-work__cta svg { transition: none; }
}

/* --------------------------------------------------------------------------
   8 bis. Journal (aperçu blog)
   Même slider automatique que les avis clients (.fds-slider, plus haut) :
   une page de quatre cartes par diapositive, lecture automatique, sans
   flèches ni points affichés — seul le rail natif reste disponible pour
   parcourir manuellement au doigt/à la molette.
   -------------------------------------------------------------------------- */

/* `max-width` plutôt qu'une largeur fixe : la carte suit la colonne de la
   grille tant qu'elle est raisonnable, mais arrête de grossir quand une
   diapositive contient moins de quatre articles (le dernier lot d'un
   nombre non multiple de quatre, ou tant qu'il n'y a qu'un seul article
   publié) — sinon la grille en 1fr l'étirait sur toute la largeur. */
.fds-article-card { display: flex; flex-direction: column; gap: .875rem; max-width: 360px; }

.fds-article-card__media {
  position: relative;
  /* Pas de padding ici, contrairement à .fds-work__media : la photo est
     recadrée en « cover », elle doit remplir le cadre plutôt que respirer
     dans un passe-partout (utile seulement pour un « contain » non rogné). */
  aspect-ratio: 8 / 5;
  border-radius: var(--fds-radius-md);
  background: var(--fds-ciel);
  overflow: hidden;
}
.fds-article-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--fds-radius-md);
  transition: transform var(--fds-dur-slow) var(--fds-ease-out);
}
.fds-article-card:hover .fds-article-card__img,
.fds-article-card:focus-within .fds-article-card__img { transform: scale(1.05); }

.fds-article-card__media--empty { background: var(--fds-marine); }
.fds-article-card__media--empty .fds-shape--tr {
  top: 0; right: 0;
  width: 60%; height: 100%;
  background: var(--fds-orange);
  opacity: .85;
}

.fds-article-card__meta {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--fds-text-muted);
}
.fds-article-card__cat { color: var(--fds-orange); }

.fds-article-card__title {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.35;
}
.fds-article-card__excerpt {
  margin: 0;
  color: var(--fds-text-muted);
  font-size: .875rem;
  line-height: 1.6;
}
.fds-article-card__link { color: inherit; }
.fds-article-card__link:hover .fds-article-card__title,
.fds-article-card__link:focus-visible .fds-article-card__title { color: var(--fds-orange); }

@media (prefers-reduced-motion: reduce) {
  .fds-article-card__img { transition: none; }
}

/* --------------------------------------------------------------------------
   8 ter. Pourquoi nous choisir
   Cartes empilées au défilement : `position: sticky` natif, sans JavaScript
   — chaque carte reste épinglée sous l'en-tête jusqu'à ce que la suivante,
   plus haute dans l'ordre d'empilement (z-index croissant, fond opaque),
   glisse par-dessus au fil du scroll.
   -------------------------------------------------------------------------- */

.fds-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.fds-stack__card {
  position: sticky;
  /* Sous l'en-tête verre (92px + un peu d'air), la même valeur pour toutes
     les cartes : c'est ce qui les fait s'empiler au même point de repos. */
  top: clamp(84px, 68px + 2vw, 120px);
  z-index: calc(var(--fds-stack-i, 0) + 1);
  background: var(--fds-papier);
  border: 1px solid var(--fds-line);
  border-radius: var(--fds-radius-xl);
  padding: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem);
}

.fds-stack__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1.2rem + 3vw, 4rem);
  align-items: center;
}

.fds-stack__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .875rem;
}
.fds-stack__title {
  margin: 0;
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  line-height: 1.25;
}
.fds-stack__desc {
  margin: 0;
  max-width: 42ch;
  color: var(--fds-text-muted);
  font-size: 1rem;
  line-height: 1.7;
}

.fds-stack__media {
  position: relative;
  aspect-ratio: 4 / 3;
  /* Orange plutôt qu'un filet neutre : reste visible aussi bien sur une
     photo que sur le repli marine (un filet marine translucide s'y fondrait
     complètement). Angles nets, jamais arrondis sur le visuel : seul le
     cadre de la carte porte du rayon. */
  border: 1px dashed var(--fds-orange);
  overflow: hidden;
  background: var(--fds-ciel);
}
.fds-stack__img, .fds-stack__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Léger effet « Ken Burns » en boucle : le seul mouvement continu de la
   carte, coupé net par la requête ci-dessous — jamais de parallaxe liée au
   scroll ici, seulement une respiration lente et prévisible. */
.fds-stack__img {
  animation: fds-kenburns 18s ease-in-out infinite alternate;
}
@keyframes fds-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* Repli visuel quand aucun visuel n'est fourni : même traitement que les
   cartes de réalisation, pour rester dans le même langage. */
.fds-stack__media--empty { background: var(--fds-marine); }
.fds-stack__media--empty .fds-shape--tr {
  top: 0; right: 0;
  width: 60%; height: 100%;
  background: var(--fds-orange);
  opacity: .85;
}

@media (max-width: 780px) {
  .fds-stack__inner { grid-template-columns: 1fr; }
  .fds-stack__media { order: -1; aspect-ratio: 16 / 10; }
  .fds-stack__desc { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fds-stack__img { animation: none; }
}


/* --------------------------------------------------------------------------
   9. Contact
   -------------------------------------------------------------------------- */

.fds-contact {
  position: relative;
  overflow: hidden;
  /* En plus du padding-bottom hérité de .fds-section : cette section et le
     pied de page qui la suit immédiatement partagent la même famille de
     bleu marine — sans ce surplus, le padding ne se lit pas comme une
     coupure, tout se fond en un seul aplat continu jusqu'au footer. */
  margin-bottom: clamp(2rem, 1.2rem + 3vw, 4rem);
}
.fds-contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
}
@media (max-width: 860px) { .fds-contact__inner { grid-template-columns: 1fr; } }

.fds-contact__meta { display: grid; gap: .75rem; margin-top: var(--fds-space-lg); }
.fds-contact__link {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-weight: 600;
  color: inherit;
}
.fds-contact__link .fds-icon { color: var(--fds-orange-light); }

.fds-form {
  display: grid;
  gap: var(--fds-space-sm);
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  border-radius: var(--fds-radius-xl);
  background: var(--fds-glass-bg-strong);
  border: 1px solid var(--fds-glass-border);
  -webkit-backdrop-filter: blur(var(--fds-glass-blur)) saturate(var(--fds-glass-saturate));
  backdrop-filter: blur(var(--fds-glass-blur)) saturate(var(--fds-glass-saturate));
}
.fds-invert .fds-form .fds-label { color: #fff; }
.fds-invert .fds-form .fds-form-note { color: rgba(255,255,255,.6); }
.fds-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fds-space-sm); }
@media (max-width: 620px) { .fds-form__row { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   10. Appel à l'action de bas de page
   -------------------------------------------------------------------------- */

.fds-cta {
  position: relative;
  overflow: hidden;
  background: var(--fds-marine);
  border-radius: var(--fds-radius-xl);
  padding: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  text-align: center;
}
.fds-cta .fds-shape--tr {
  top: -5rem; right: -5rem;
  width: 20rem; height: 20rem;
  background: var(--fds-orange);
}
.fds-cta .fds-shape--bl {
  bottom: -5rem; left: -5rem;
  width: 16rem; height: 16rem;
  background: var(--fds-marine-deep);
}
.fds-cta > * { position: relative; z-index: 1; }
.fds-cta__title { color: #fff; font-size: var(--fds-fs-h1); margin-bottom: var(--fds-space-sm); }
.fds-cta__lead { color: rgba(255,255,255,.75); margin-inline: auto; margin-bottom: var(--fds-space-lg); }

/* --------------------------------------------------------------------------
   11. En-tête de page intérieure
   -------------------------------------------------------------------------- */

.fds-pagehead {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem) clamp(2rem, 1.5rem + 2vw, 3.5rem);
  background: var(--fds-papier);
  border-bottom: 1px solid var(--fds-line);
}
.fds-pagehead__title { margin: var(--fds-space-sm) 0 var(--fds-space-sm); }
.fds-pagehead .fds-shape--tr {
  top: 0; right: 0;
  width: 18rem; height: 12rem;
  background: var(--fds-ciel);
  opacity: .6;
}

.fds-anchors { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: var(--fds-space-md); }

/* --------------------------------------------------------------------------
   12. Pied de page
   -------------------------------------------------------------------------- */

.fds-footer {
  position: relative;
  overflow: hidden;
  /* Plus sombre que la section contact qui précède (elle-même en
     --fds-marine via .fds-invert) : sans cet écart de ton, les deux
     blocs sont d'une seule et même couleur et se confondent sans
     limite visible. Le filet du haut marque la coupure, sans ombre. */
  background: var(--fds-marine-deep);
  border-top: 1px solid var(--fds-line-invert);
  color: rgba(255,255,255,.72);
  padding-top: clamp(3rem, 2rem + 3vw, 4.5rem);
}
.fds-footer .fds-shape--bl {
  bottom: -6rem; left: -4rem;
  width: 20rem; height: 20rem;
  /* Le fond du pied de page est désormais --fds-marine-deep : la forme
     décorative doit prendre un ton plus sombre encore pour rester visible. */
  background: var(--fds-encre);
}
.fds-footer > * { position: relative; z-index: 1; }
.fds-footer__grid {
  display: grid;
  /* Marque, Plan du site, Expertises, Contact. */
  grid-template-columns: 1.3fr .85fr .85fr .85fr;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  padding-bottom: var(--fds-space-xl);
}
@media (max-width: 1024px) { .fds-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 780px) { .fds-footer__grid { grid-template-columns: 1fr; } }

.fds-footer__brand img, .fds-footer__brand svg { height: 112px; width: auto; max-width: 360px; object-fit: contain; margin-bottom: var(--fds-space-sm); }
.fds-footer__tagline { font-size: .9375rem; line-height: 1.7; max-width: 30rem; margin: 0; }

/* Icônes sociales : deux systèmes de tracé cohabitent (trait pour LinkedIn,
   plein pour les marques réelles — voir inc/social-icons.php) ; cette règle
   les ramène à la même taille et à la même couleur quel que soit le cas. */
/* Icônes sociales, partagées par le pied de page et le tiroir mobile — deux
   systèmes de tracé cohabitent (trait pour LinkedIn, plein pour les marques
   réelles, voir inc/social-icons.php) ; cette règle les ramène à la même
   taille et à la même couleur quel que soit le cas. */
.fds-social {
  display: inline-flex;
  transition: color var(--fds-dur) var(--fds-ease);
}
.fds-social .fds-icon,
.fds-social .fds-tech-icon { width: 28px; height: 28px; }
.fds-social .fds-icon { stroke-width: 1.8; }
.fds-social .fds-tech-icon { fill: currentColor; }

.fds-footer__socials { margin-top: 1.5rem; row-gap: 1rem; gap: 1.125rem; }
.fds-footer__socials .fds-social { color: rgba(255, 255, 255, .72); }
.fds-footer__socials .fds-social:hover { color: #fff; }
.fds-footer__title,
/* Garde-fou : un widget ajouté un jour dans « Pied de page — colonne
   libre » peut porter son propre titre (bloc Gutenberg, extension) sans
   passer par notre before_title/after_title — il hériterait alors des
   tailles de titres géantes du site (h2 en 60px+) au lieu de rester dans
   le langage visuel discret du pied de page. On force systématiquement
   tout titre trouvé dans cette zone à ce même style. */
.fds-footer__widget h2,
.fds-footer__widget h3,
.fds-footer__widget h4 {
  font-family: var(--fds-font-body);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: var(--fds-ls-eyebrow);
  text-transform: uppercase;
  color: var(--fds-orange-light);
  margin: 0 0 var(--fds-space-sm);
}
.fds-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.fds-footer a { font-size: .9375rem; color: rgba(255,255,255,.72); }
.fds-footer a:hover { color: #fff; }

.fds-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fds-space-sm);
  padding-block: var(--fds-space-md);
  border-top: 1px solid var(--fds-line-invert);
  font-size: .8125rem;
}
/* Sélecteur à deux classes : gagne sur .fds-footer ul (plus spécifique
   qu'une seule classe) pour rester en ligne plutôt qu'empilé en grille. */
.fds-footer .fds-footer__legal { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Retour en haut. */
.fds-totop {
  position: fixed;
  right: clamp(1rem, .5rem + 1vw, 1.75rem);
  bottom: clamp(1rem, .5rem + 1vw, 1.75rem);
  z-index: var(--fds-z-nav);
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fds-marine);
  color: #fff;
  border-radius: var(--fds-radius-md);
  box-shadow: var(--fds-shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--fds-dur) var(--fds-ease), transform var(--fds-dur) var(--fds-ease-out), visibility var(--fds-dur), background-color var(--fds-dur) var(--fds-ease);
}
.fds-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.fds-totop:hover { background: var(--fds-orange); color: #fff; }

/* --------------------------------------------------------------------------
   13. Blogue / archives
   -------------------------------------------------------------------------- */

.fds-posts { --fds-col: 320px; }
.fds-post-card__media { aspect-ratio: 16/9; background: var(--fds-givre); overflow: hidden; border-radius: var(--fds-radius-md); margin-bottom: var(--fds-space-sm); }
.fds-post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.fds-post-card__meta { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fds-acier); }

/* --- Grille bento du blog -------------------------------------------------
   Un article vedette (grande tuile) + deux secondaires empilées à côté,
   uniquement sur la première page. Image pleine tuile, texte en
   surimpression sur un voile — jamais de dégradé décoratif sur le motif de
   marque, mais ici un voile de lisibilité est une convention d'usage
   distincte, nécessaire pour lire du texte blanc sur une photo quelconque. */
.fds-bento-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--fds-space-md);
  margin-bottom: clamp(2.5rem, 1.8rem + 3vw, 4rem);
}
.fds-bento-grid > :nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.fds-bento-grid > :nth-child(2) { grid-column: 2; grid-row: 1; }
.fds-bento-grid > :nth-child(3) { grid-column: 2; grid-row: 2; }

.fds-bento-post {
  position: relative;
  border-radius: var(--fds-radius-sm);
  overflow: hidden;
  border: 1px solid var(--fds-line);
}
.fds-bento-post--feature { min-height: 420px; }
.fds-bento-post--secondary { min-height: 200px; }

.fds-bento-post__link { display: block; height: 100%; color: #fff; }
.fds-bento-post__link:hover { color: #fff; }

.fds-bento-post__media { position: absolute; inset: 0; }
.fds-bento-post__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--fds-dur-slow) var(--fds-ease-out); }
.fds-bento-post:hover .fds-bento-post__img { transform: scale(1.05); }

.fds-bento-post__media--empty { background: var(--fds-marine); width: 100%; height: 100%; }
.fds-bento-post__media--empty .fds-shape--tr { top: 0; right: 0; width: 60%; height: 100%; background: var(--fds-orange); opacity: .85; }

/* Voile de lisibilité : plus opaque en bas (où vit le texte), transparent
   en haut — un dégradé fonctionnel, pas décoratif. */
.fds-bento-post__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14, 26, 43, .88) 0%, rgba(14, 26, 43, .3) 55%, transparent 100%);
}

.fds-bento-post__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: clamp(1rem, .8rem + 1vw, 1.75rem);
}
.fds-bento-post__meta {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
  margin-bottom: .5rem;
}
.fds-bento-post__cat { color: var(--fds-orange-light); }
.fds-bento-post__title {
  color: #fff;
  margin: 0;
  font-family: var(--fds-font-title);
  font-weight: var(--fds-weight-title);
  line-height: 1.2;
}
.fds-bento-post--feature .fds-bento-post__title { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); }
.fds-bento-post--secondary .fds-bento-post__title { font-size: 1.0625rem; }
.fds-bento-post__excerpt {
  color: rgba(255, 255, 255, .82);
  font-size: .9375rem;
  line-height: 1.6;
  margin-top: .625rem;
  max-width: 48ch;
}

@media (max-width: 780px) {
  .fds-bento-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .fds-bento-grid > :nth-child(1),
  .fds-bento-grid > :nth-child(2),
  .fds-bento-grid > :nth-child(3) { grid-column: 1; grid-row: auto; }
  .fds-bento-post--feature { min-height: 320px; }
  .fds-bento-post--secondary { min-height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .fds-bento-post__img { transition: none; }
}

.fds-404 { text-align: center; padding-block: var(--fds-section); }
.fds-404__code {
  font-family: var(--fds-font-title);
  font-size: clamp(5rem, 3rem + 12vw, 11rem);
  font-weight: 600;
  line-height: 1;
  color: var(--fds-ciel);
}

/* --------------------------------------------------------------------------
   15. Article — auteur, temps de lecture, partage, articles liés
   -------------------------------------------------------------------------- */

.fds-post-byline {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.25rem 0;
}
.fds-post-byline__avatar { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto; }
.fds-post-byline__name { font-weight: 700; color: var(--fds-heading); font-size: .9375rem; line-height: 1.3; }
.fds-post-byline__meta { font-size: .8125rem; color: var(--fds-text-muted); }

/* Rangée de partage : icônes rondes, discrètes jusqu'au survol. */
.fds-share { position: relative; display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; }
.fds-share__label { font-size: .8125rem; font-weight: 700; color: var(--fds-text-muted); margin-right: .125rem; }
.fds-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--fds-papier);
  color: var(--fds-marine);
  border: 1px solid var(--fds-line);
  cursor: pointer;
  transition: background-color var(--fds-dur) var(--fds-ease), color var(--fds-dur) var(--fds-ease), border-color var(--fds-dur) var(--fds-ease);
}
.fds-share__btn:hover, .fds-share__btn:focus-visible { background: var(--fds-orange); color: #fff; border-color: var(--fds-orange); }
.fds-share__btn .fds-tech-icon { fill: currentColor; }

.fds-share__check-icon { display: none; }
.fds-share.is-copied .fds-share__copy-icon { display: none; }
.fds-share.is-copied .fds-share__check-icon { display: inline-block; }
.fds-share.is-copied .fds-share__copy { background: var(--fds-success); color: #fff; border-color: var(--fds-success); }

.fds-share__toast {
  position: absolute;
  bottom: calc(100% + .625rem);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--fds-encre);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  padding: .4rem .85rem;
  border-radius: var(--fds-radius-xs);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity var(--fds-dur) var(--fds-ease), transform var(--fds-dur) var(--fds-ease);
}
.fds-share__toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Navigation article précédent/suivant, en cartes plutôt qu'en texte brut. */
.fds-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fds-space-md);
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--fds-line);
}
.fds-post-nav__link {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--fds-line);
  border-radius: var(--fds-radius-md);
  transition: border-color var(--fds-dur) var(--fds-ease), background-color var(--fds-dur) var(--fds-ease);
}
.fds-post-nav__link:hover, .fds-post-nav__link:focus-visible { border-color: rgba(242, 101, 34, .5); background: var(--fds-papier); }
.fds-post-nav__link--next { text-align: right; align-items: flex-end; }
.fds-post-nav__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fds-text-muted);
}
.fds-post-nav__link--next .fds-post-nav__eyebrow { flex-direction: row-reverse; }
.fds-post-nav__title { font-weight: 700; color: var(--fds-heading); font-size: .9375rem; line-height: 1.4; }

@media (max-width: 620px) {
  .fds-post-nav { grid-template-columns: 1fr; }
  .fds-post-nav__link--next { text-align: left; align-items: flex-start; }
  .fds-post-nav__link--next .fds-post-nav__eyebrow { flex-direction: row; }
}

@media (prefers-reduced-motion: reduce) {
  .fds-share__btn, .fds-share__toast, .fds-post-nav__link { transition: none; }
}

/* --------------------------------------------------------------------------
   16. Réalisation — étude de cas (Contexte → Problème → Solution → Résultat)
   -------------------------------------------------------------------------- */

.fds-case-study {
  display: grid;
  max-width: var(--fds-container-text);
}

/* Chronologie numérotée : pastille + filet vertical qui relie chaque étape
   à la suivante, comme une frise plutôt qu'un simple filet de séparation. */
.fds-case-study__block {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
.fds-case-study__block--last { padding-bottom: 0; }

/* position: relative est nécessaire ici : sans lui, le ::after du filet
   (ci-dessous) se positionnerait par rapport à .fds-case-study__block tout
   entier — numéro ET texte confondus — au lieu de rester centré sous la
   seule colonne du numéro. */
.fds-case-study__marker { position: relative; display: flex; justify-content: center; }
.fds-case-study__num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--fds-peche);
  color: var(--fds-orange);
  font-family: var(--fds-font-title);
  font-weight: 700;
  font-size: 1rem;
}
/* Le filet part du bas de la pastille et rejoint la suivante — absent sur
   la dernière étape, qui n'a rien à relier. */
.fds-case-study__block:not(.fds-case-study__block--last) .fds-case-study__marker::after {
  content: "";
  position: absolute;
  top: 3.5rem;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--fds-line);
  transform: translateX(-50%);
}

.fds-case-study__body { padding-top: .5rem; }
.fds-case-study__title {
  margin: 0 0 .625rem;
  font-size: var(--fds-fs-h3);
  color: var(--fds-heading);
}
.fds-case-study__block .fds-prose { max-width: none; }
.fds-case-study__stat {
  display: inline-block;
  margin-top: 1.125rem;
  padding: .5rem 1rem;
  background: var(--fds-peche);
  color: var(--fds-orange);
  font-weight: 700;
  font-size: 1.0625rem;
  border-radius: var(--fds-radius-sm);
}

@media (max-width: 560px) {
  .fds-case-study__block { grid-template-columns: 2.75rem 1fr; gap: 1rem; }
  .fds-case-study__num { width: 2.75rem; height: 2.75rem; font-size: .875rem; }
  .fds-case-study__marker::after { top: 2.75rem; }
}

/* --------------------------------------------------------------------------
   17. Réalisation — vitrine du projet (photo/slider en carte flottante)
   -------------------------------------------------------------------------- */

.fds-realisation-showcase {
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  background: var(--fds-papier);
}

/* La photo « flotte » sur un fond neutre plutôt que de remplir le cadre à
   ras bord — même logique dézoomée que les cartes de la liste : jamais de
   recadrage forcé, une capture de site reste toujours lisible en entier. */
.fds-realisation-showcase__frame {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, .7rem + 1.4vw, 2rem);
  background: var(--fds-blanc);
  border-radius: var(--fds-radius-xl);
  box-shadow: var(--fds-shadow-lg);
  overflow: hidden;
}
.fds-realisation-showcase__frame img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--fds-radius-md);
}

/* Le carrousel garde ses propres flèches/points (.fds-slider__controls) ;
   seule la carte de la diapositive change ici. */
.fds-work-gallery .fds-slider__slide { display: flex; }

/* --------------------------------------------------------------------------
   18. Page Contact — deux parcours (client existant / nouveau client)
   -------------------------------------------------------------------------- */

.fds-contact-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fds-space-md);
}
.fds-contact-choice__card {
  padding: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  background: var(--fds-blanc);
  border: 1px solid var(--fds-line);
  border-radius: var(--fds-radius-lg);
  transition: border-color var(--fds-dur) var(--fds-ease), box-shadow var(--fds-dur) var(--fds-ease);
}
.fds-contact-choice__card:hover { border-color: rgba(242, 101, 34, .5); box-shadow: var(--fds-shadow-md); }
.fds-contact-choice__card .fds-icon-box { margin-bottom: 1.25rem; }
.fds-contact-choice__title { font-size: var(--fds-fs-h3); color: var(--fds-heading); margin: 0 0 .625rem; }
.fds-contact-choice__text { color: var(--fds-text-muted); font-size: .9375rem; line-height: 1.6; margin: 0 0 1.5rem; }

@media (max-width: 700px) {
  .fds-contact-choice { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   19. Page À propos — intro image/texte, mosaïque en éventail, bandeau de
   chiffres
   -------------------------------------------------------------------------- */

/* Mosaïque en éventail (« Intelligence, stratégie et exécution ») : cinq
   photos superposées et inclinées, la centrale mise en avant. Carrousel
   interactif — cliquer/glisser une carte latérale la fait passer au centre
   (voir initFan() dans app.js) ; l'inclinaison/l'échelle de chaque carte
   sont posées en ligne (par PHP au chargement, par le script à chaque
   interaction), cette feuille ne gère que la transition et l'affordance.
   Aucune ombre portée (charte 05) — la profondeur vient du chevauchement
   et du filet 1px, pas d'un box-shadow. */
.fds-fan {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: clamp(2rem, 1.2rem + 3vw, 4rem) clamp(1rem, .3rem + 2vw, 2.5rem) clamp(3rem, 2rem + 3vw, 5rem);
  overflow: visible;
  touch-action: pan-y;
}

.fds-fan__slot {
  flex: 0 0 auto;
  width: clamp(200px, 20vw, 320px);
  aspect-ratio: 3 / 4;
  margin-inline: clamp(-3rem, -2vw, -1.5rem);
  cursor: pointer;
  transition: transform var(--fds-dur-slow) var(--fds-ease-out), z-index 0s;
}
.fds-fan__slot:focus-visible {
  outline: 2px solid var(--fds-orange);
  outline-offset: 6px;
  border-radius: var(--fds-radius-lg);
}

.fds-fan__card {
  width: 100%;
  height: 100%;
  border-radius: var(--fds-radius-lg);
  overflow: hidden;
  border: 1px solid var(--fds-line-invert);
  background: var(--fds-marine-deep);
}
.fds-fan__card img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fds-fan__card--empty { display: flex; align-items: center; justify-content: center; }
.fds-fan__card--empty .fds-shape--tr {
  top: 0; right: 0;
  width: 60%; height: 100%;
  background: var(--fds-orange);
  opacity: .85;
}

/* Sous 700px, l'éventail (inclinaisons + chevauchement en lignes multiples)
   ne se lit plus : les cartes passent à plat, en rangée qui défile au
   doigt — même esprit que le bandeau du journal, plus simple que le
   carrousel au survol qui n'a de toute façon pas de sens sans souris. */
@media (max-width: 700px) {
  .fds-fan {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-inline: var(--fds-gutter);
  }
  .fds-fan__slot {
    width: clamp(150px, 52vw, 220px);
    margin-inline: 0 1rem;
    scroll-snap-align: start;
    transform: none !important;
  }
}

.fds-about-intro {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, 1.2rem + 3vw, 4rem);
  align-items: center;
}
@media (max-width: 780px) {
  .fds-about-intro { grid-template-columns: 1fr; }
  .fds-about-intro__media { order: -1; }
}

.fds-about-intro__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--fds-radius-xl);
  overflow: hidden;
  background: var(--fds-ciel);
}
.fds-about-intro__media img { width: 100%; height: 100%; object-fit: cover; }

.fds-about-intro__media--empty {
  background: var(--fds-marine);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fds-about-intro__media--empty .fds-shape--tr {
  top: 0; right: 0;
  width: 60%; height: 100%;
  background: var(--fds-orange);
  opacity: .85;
}
.fds-about-intro__mark { position: relative; z-index: 1; width: 35%; height: auto; opacity: .9; }

/* Trois chiffres clés (mêmes réglages que la mosaïque du hero, voir
   Personnaliser → FD Stratégies → Bannière d'accueil), sur un aplat marine
   au lieu d'être imbriqués dans une carte de mosaïque. */
.fds-stats-band {
  background: var(--fds-marine);
  border-radius: var(--fds-radius-xl);
  padding: clamp(2rem, 1.5rem + 2vw, 3rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.fds-stats-band__item {
  text-align: center;
  padding-inline: 1rem;
  border-left: 1px solid var(--fds-line-invert);
}
.fds-stats-band__item:first-child { border-left: none; }
.fds-stats-band__value {
  margin: 0;
  font-family: var(--fds-font-title);
  font-weight: var(--fds-weight-title);
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  color: #fff;
}
.fds-stats-band__label {
  margin: .5rem 0 0;
  color: rgba(255, 255, 255, .72);
  font-size: .9375rem;
}
@media (max-width: 600px) {
  .fds-stats-band { grid-template-columns: 1fr; gap: 1.5rem; }
  .fds-stats-band__item { border-left: none; border-top: 1px solid var(--fds-line-invert); padding-top: 1.5rem; }
  .fds-stats-band__item:first-child { border-top: none; padding-top: 0; }
}