/* ==========================================================================
   Fit Your Com : composants dynamiques
   Carrousel vidéo, section sombre, parcours, accordéons, badges du hero.
   ========================================================================== */

:root {
  --rouge-clair: #ff5c8a;   /* variante lisible du rouge sur fond sombre */
}

/* ============================================ 1. Hero centré (page d'accueil)
   Composition en colonne : pastille, titre, sous-titre, appel à l'action,
   arguments, puis ruban vidéo pleine largeur. Le dégradé rouge de marque
   éclaire les deux bords et se fond en blanc avant la section suivante. */
.hero-centre {
  position: relative; overflow: hidden;
  text-align: center;
  padding-top: calc(var(--entete) + clamp(36px, 6vw, 78px));
  padding-bottom: 0;
}
/* Tout est empilé dans un seul `background` : les calques listés en premier
   passent au-dessus. Un pseudo-élément aurait recouvert le texte. */
.hero-centre__fond {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0) 58%, var(--blanc) 88%),
    radial-gradient(46% 40% at 50% 22%, var(--blanc) 0%, rgba(255, 255, 255, .9) 46%, rgba(255, 255, 255, 0) 78%),
    radial-gradient(34% 34% at -12% 16%, rgba(228, 14, 79, .42), rgba(228, 14, 79, 0) 74%),
    radial-gradient(34% 34% at 112% 16%, rgba(228, 14, 79, .42), rgba(228, 14, 79, 0) 74%),
    radial-gradient(30% 30% at -8% 52%, rgba(228, 14, 79, .24), rgba(228, 14, 79, 0) 74%),
    radial-gradient(30% 30% at 108% 52%, rgba(228, 14, 79, .24), rgba(228, 14, 79, 0) 74%);
}

.hero-centre__in { position: relative; display: grid; justify-items: center; }
.hero-centre__in > :first-child { margin-top: 0; }


.badge-hero {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 9px 20px;
  background: rgba(255, 255, 255, .88); border: 1px solid var(--trait); border-radius: 100px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: .86rem; font-weight: 600; letter-spacing: -.005em;
}

.titre-geant {
  font-family: var(--police-titre); font-weight: 600;
  font-size: clamp(2.55rem, 6.4vw, 5.1rem); line-height: 1.0; letter-spacing: -.04em;
  margin-top: clamp(22px, 3vw, 32px); max-width: 16ch; text-wrap: balance;
}
.hero-centre .chapo { margin-top: clamp(18px, 2.2vw, 26px); max-width: 52ch; text-wrap: balance; }

.btn--grand { padding: 18px 32px; font-size: 1.02rem; }
.btn--grand svg { width: 16px; }
.hero-centre .btn--grand { margin-top: clamp(26px, 3.4vw, 38px); }

.points-hero {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px clamp(20px, 3vw, 34px); margin-top: clamp(22px, 2.8vw, 30px);
}
.points-hero li { display: inline-flex; align-items: center; gap: 9px; font-size: .93rem; font-weight: 500; }
.points-hero .rond {
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  background: var(--blanc); border: 4px solid var(--rouge);
}

/* ------------------------- Bloc de présentation intégré au hero
   Il partage le fond dégradé du hero, d'où la marge haute plutôt qu'une
   section autonome. Le hero est centré : on rétablit ici l'alignement à
   gauche, sinon titre, liste et boutons héritent du centrage. */
.hero-presentation { position: relative; margin-top: clamp(46px, 6vw, 84px); }
.hero-presentation .duo { align-items: center; }

@media (min-width: 900px) {
  .hero-presentation { text-align: left; }
  .hero-presentation .groupe-btn { justify-content: flex-start; }
}
@media (max-width: 899px) {
  .hero-presentation { text-align: center; }
  .hero-presentation .duo__image--portrait { max-width: 400px; margin-inline: auto; }
  .hero-presentation .liste-points { display: inline-grid; text-align: left; }
  .hero-presentation .groupe-btn { justify-content: center; }
}

/* ============================== Grille de réalisations (page dédiée)
   Quatre colonnes serrées, marges latérales tenues : la page respire
   sans laisser de grands vides blancs entre les vidéos. */
.grille-videos {
  display: grid; gap: clamp(12px, 1.1vw, 18px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px)  { .grille-videos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .grille-videos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.grille-videos .carte-video { gap: 0; }
.grille-videos .carte-video__media {
  border-radius: 14px;
  transition: transform 420ms cubic-bezier(.2, .7, .25, 1), box-shadow 420ms ease;
}
.grille-videos .carte-video:hover .carte-video__media {
  transform: translateY(-6px); box-shadow: 0 20px 40px rgba(16, 16, 20, .16);
}
.grille-videos .carte-video video { transition: transform 900ms cubic-bezier(.2, .7, .25, 1); }
.grille-videos .carte-video:hover video { transform: scale(1.05); }
.grille-videos .carte-video__son,
.grille-videos .carte-video__son[data-etat="pause"] {
  left: 12px; right: auto; bottom: 12px; width: 42px; height: 42px; background: var(--rouge);
}
.grille-videos .carte-video__son svg { width: 15px; }

/* Le nom du client ne s'affiche qu'au survol : la grille reste calme. */
.grille-videos .carte-video__legende { left: 12px; top: 12px; }
.grille-videos .carte-video__infos { display: none; }

/* Conteneur un peu plus large que le reste du site, marges tenues */
.shell--large { max-width: 1480px; }

/* ===================================== Galerie vidéo (carrousel large)
   Cartes grand format, lecture automatique muette, défilement manuel :
   flèches, pastilles et glissement au doigt. Aucun défilement automatique. */
.galerie { overflow: hidden; }   /* le rail déborde volontairement du conteneur */
.galerie__tete { display: grid; justify-items: center; text-align: center; }
.galerie__tete h2 { max-width: 20ch; text-wrap: balance; }
.galerie__tete .chapo { margin-top: 18px; max-width: 62ch; text-wrap: balance; }

.plateformes { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.plateformes > * {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blanc); border: 1px solid var(--trait); color: var(--encre);
  transition: transform 220ms ease, border-color 220ms ease, color 220ms ease;
}
.plateformes svg { width: 21px; height: 21px; }
.plateformes a:hover { transform: translateY(-3px); border-color: var(--rouge); color: var(--rouge); }

.rail.rail--grand { padding-block: clamp(24px, 3vw, 36px) 6px; }
.rail.rail--grand > * { flex-basis: clamp(212px, 19vw, 330px); }
.rail.rail--grand .carte-video__media { border-radius: 18px; }
.rail.rail--grand .carte-video__son,
.rail.rail--grand .carte-video__son[data-etat="pause"] {
  left: 14px; right: auto; bottom: 14px;
  width: 48px; height: 48px; background: var(--rouge);
}
.rail.rail--grand .carte-video__son svg { width: 18px; }
.rail.rail--grand .carte-video__son:hover { background: var(--rouge-fonce); transform: scale(1.06); }

.carte-video__legende {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  padding: 6px 14px; border-radius: 100px;
  background: rgba(255, 255, 255, .93); color: var(--encre);
  font-size: .84rem; font-weight: 600; white-space: nowrap;
  opacity: 0; transform: translateY(-6px);
  transition: opacity 260ms ease, transform 260ms ease;
}
.carte-video:hover .carte-video__legende,
.carte-video:focus-within .carte-video__legende { opacity: 1; transform: none; }

@media (hover: none) {
  .carte-video__legende { opacity: 1; transform: none; }
}

.rail-pied { display: flex; justify-content: center; margin-top: 24px; }
.rail-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.rail-point {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
  background: #d8d4d0; cursor: pointer;
  transition: background-color 220ms ease, transform 220ms ease;
}
.rail-point:hover { background: #b6b1ac; }
.rail-point[aria-current="true"] { background: var(--rouge); transform: scale(1.25); }

/* ================================ Bandeau d'avis défilant (accueil)
   Cartes horizontales larges, deux pistes qui glissent en sens opposés.
   Même principe de boucle que la galerie : contenu dupliqué, retour d'une
   demi-largeur, ici en CSS puisqu'il n'y a rien à piloter. */
.avis-bandeau { overflow: hidden; display: grid; gap: 14px; }
.avis-piste { display: flex; gap: 14px; width: max-content; }
.avis-piste--gauche { animation: avis-defile 64s linear infinite; }
.avis-piste--droite { animation: avis-defile 64s linear infinite reverse; }
.avis-bandeau:hover .avis-piste,
.avis-bandeau:focus-within .avis-piste { animation-play-state: paused; }
@keyframes avis-defile { to { transform: translateX(-50%); } }

.avis-carte {
  flex: 0 0 clamp(300px, 30vw, 420px);
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(20px, 1.8vw, 26px);
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon);
  transition: border-color 260ms ease, transform 320ms cubic-bezier(.2, .7, .25, 1),
              box-shadow 320ms ease;
}
.avis-carte:hover {
  border-color: transparent; transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(16, 16, 20, .1);
}
.avis-carte__tete { display: flex; align-items: center; gap: 12px; }
.avis-carte .avis__photo { width: 46px; height: 46px; }
.avis-carte__identite strong {
  display: block; font-family: var(--police-titre); font-size: 1rem; letter-spacing: -.018em; line-height: 1.2;
}
.avis-carte__identite span { font-size: .84rem; color: var(--graphite); }
.avis-carte__note { display: flex; gap: 3px; color: var(--rouge); }
.avis-carte__note svg { width: 15px; height: 15px; }
.avis-carte__texte {
  margin: 0; font-size: .97rem; line-height: 1.6; color: var(--encre);
  /* Les avis Google sont longs : on les tronque, la page dédiée les donne en entier. */
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.avis-carte__texte p { margin: 0; }
.avis-carte__texte p + p { margin-top: 8px; }


@media (prefers-reduced-motion: reduce) {
  .avis-bandeau { overflow-x: auto; }
  .avis-piste { animation: none; }
}

/* -------------------------- Appel à l'action final, composition centrée */
.cta-final .shell {
  display: grid; justify-items: center; text-align: center;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 40px);
}
.cta-final h2 { max-width: 22ch; margin-inline: auto; text-wrap: balance; }
.cta-final p { margin-inline: auto; }
.cta-final .zone-btn { justify-items: center; gap: 16px; }

/* ------------------------------------------- Réseaux sociaux (pied de page) */
.reseaux { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.reseaux a {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .86);
  transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease, transform 220ms ease;
}
.reseaux a:hover { background: var(--rouge); border-color: var(--rouge); color: #fff; transform: translateY(-2px); }
.reseaux svg { width: 18px; height: 18px; }

/* --------------------------------------------- 2. Carrousel de vidéos */
.rail-tete {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}
.rail-nav { display: none; gap: 10px; flex: none; }
@media (min-width: 760px) { .rail-nav { display: flex; } }
.rail-nav button {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--trait); background: var(--blanc); cursor: pointer;
  display: grid; place-items: center;
  transition: border-color 220ms ease, background-color 220ms ease, color 220ms ease;
}
.rail-nav button:hover { border-color: var(--encre); background: var(--encre); color: #fff; }
.rail-nav button:disabled { opacity: .32; cursor: default; }
.rail-nav button:disabled:hover { border-color: var(--trait); background: var(--blanc); color: inherit; }
.rail-nav svg { width: 15px; }

.rail {
  display: flex; gap: clamp(14px, 1.6vw, 20px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-block: 4px 20px;
  padding-inline: max(var(--gouttiere), calc((100% - var(--largeur)) / 2 + var(--gouttiere)));
  /* Sans ce calage, l'ancrage magnétique masque la marge de gauche au chargement. */
  scroll-padding-inline: max(var(--gouttiere), calc((100% - var(--largeur)) / 2 + var(--gouttiere)));
  align-items: stretch;
  scrollbar-width: none; -ms-overflow-style: none;
}

/* Galerie de l'accueil : bord à bord, défilement continu, prise à la souris.
   L'ancrage magnétique est désactivé ici, il lutterait contre l'avance
   automatique et contre le glissement libre. */
.rail.rail--auto {
  scroll-snap-type: none; scroll-behavior: auto;
  padding-inline: 0; padding-block: 4px 14px;
  cursor: grab; user-select: none; -webkit-user-select: none;
}
.rail.rail--auto.est-tenu { cursor: grabbing; }
.rail.rail--auto > * { scroll-snap-align: none; }
/* Pendant le glissement, les clics sur la vidéo ne doivent pas se déclencher. */
.rail.rail--auto.a-glisse a, .rail.rail--auto.a-glisse video { pointer-events: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 clamp(210px, 23vw, 264px); scroll-snap-align: start; }
.rail .carte-video { justify-content: flex-end; }   /* bas de carte aligné, quel que soit le ratio */
@media (prefers-reduced-motion: reduce) { .rail { scroll-behavior: auto; } }

.carte-video { display: flex; flex-direction: column; gap: 14px; }
/* La règle ci-dessus l'emporte sur le display:none que le navigateur applique
   à [hidden] : sans cette ligne, le filtre pose l'attribut sans rien masquer. */
.carte-video[hidden], .projet[hidden] { display: none; }

/* Apparition : les cartes montent et se dévoilent l'une après l'autre.
   Le décalage est posé en JavaScript, carte par carte. */
.rail--auto .carte-video {
  opacity: 0; transform: translateY(26px) scale(.96);
}
.rail--auto.est-apparu .carte-video {
  opacity: 1; transform: none;
  transition: opacity 620ms ease, transform 720ms cubic-bezier(.2, .7, .25, 1);
  transition-delay: var(--retard, 0ms);
}

/* Relief au survol : la carte se détache, l'image respire */
.rail--grand .carte-video__media {
  transition: transform 420ms cubic-bezier(.2, .7, .25, 1),
              box-shadow 420ms ease;
}
.rail--grand .carte-video:hover .carte-video__media {
  transform: translateY(-8px);
  box-shadow: 0 22px 46px rgba(16, 16, 20, .17);
}
.rail--grand .carte-video video { transition: transform 900ms cubic-bezier(.2, .7, .25, 1); }
.rail--grand .carte-video:hover video { transform: scale(1.06); }
.carte-video__media {
  position: relative; overflow: hidden;
  border-radius: var(--rayon); background: var(--craie);
  aspect-ratio: 9 / 16;
}
.carte-video[data-format="16:9"] .carte-video__media { aspect-ratio: 16 / 9; }
.carte-video[data-format="3:4"] .carte-video__media { aspect-ratio: 3 / 4; }
.carte-video video, .carte-video img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 700ms cubic-bezier(.2, .7, .25, 1);
}
.carte-video:hover video { transform: scale(1.03); }
.carte-video__media::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(16, 16, 20, .08); pointer-events: none;
}

.carte-video__son {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  border: 0; background: rgba(16, 16, 20, .55); color: #fff;
  display: grid; place-items: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background-color 200ms ease, transform 200ms ease;
}
.carte-video__son:hover { background: var(--rouge); transform: scale(1.06); }
.carte-video__son svg { width: 16px; }
.carte-video__son svg { display: none; }
.carte-video__son[data-etat="pause"] .icone-lecture { display: block; }
.carte-video__son[data-etat="muet"] .icone-muet { display: block; }
.carte-video__son[data-etat="son"] .icone-son { display: block; }
.carte-video__son:not([data-etat]) .icone-muet { display: block; }
.carte-video__son[data-etat="son"] { background: var(--rouge); }
.carte-video__son[data-etat="pause"] { width: 46px; height: 46px; background: rgba(16, 16, 20, .68); }

.carte-video__infos { display: grid; gap: 5px; }

/* -------------------------------------------------- 3. Section sombre */
.section--sombre { background: var(--encre); color: #fff; }
.section--sombre .etiquette { color: var(--rouge-clair); }
.section--sombre .etiquette .goutte { color: var(--rouge-clair); }
.section--sombre .bloc-tete p,
.section--sombre .chapo { color: rgba(255, 255, 255, .64); }

/* ============================================ 4. Parcours (méthode)
   Chronologie horizontale au-delà de 900 px : rail sur toute la largeur,
   les quatre étapes alignées en colonnes. En dessous, retour à la verticale,
   quatre colonnes de texte seraient illisibles sur un téléphone. */
.parcours { position: relative; display: grid; gap: clamp(30px, 4vw, 46px); }

.parcours__rail {
  position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px;
  background: rgba(255, 255, 255, .13); border-radius: 2px; overflow: hidden;
}
.parcours__jauge {
  position: absolute; inset: 0 0 auto 0; height: var(--progression, 0%);
  background: linear-gradient(180deg, var(--rouge), var(--rouge-clair));
  border-radius: 2px; transition: height 220ms linear;
}
.parcours__jauge::before {
  content: ""; position: absolute; left: -1px; right: -1px; height: 46px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.8), rgba(255,255,255,0));
  animation: reflet 2.8s ease-in-out infinite;
}
.parcours__jauge::after {
  content: ""; position: absolute; inset: auto -3px 0 -3px; height: 8px;
  background: var(--rouge-clair); border-radius: 50%;
  box-shadow: 0 0 12px 3px rgba(255, 92, 138, .75);
}
@keyframes reflet {
  0% { transform: translateY(-100%); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translateY(calc(100% + 46px)); opacity: 0; }
}

.parcours__etape {
  position: relative;
  display: grid; grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 20px; align-items: start;
}
.parcours__pastille { grid-column: 1; grid-row: 1; }
.parcours__contenu { grid-column: 2; grid-row: 1; min-width: 0; }

.parcours__pastille {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: #17171d; border: 1px solid rgba(255, 255, 255, .2);
  font-family: var(--police-titre); font-weight: 700; font-size: .92rem; letter-spacing: -.02em;
  color: rgba(255, 255, 255, .5);
  transition: background-color 420ms ease, border-color 420ms ease,
              color 420ms ease, box-shadow 420ms ease;
}
.parcours__etape.est-atteint .parcours__pastille {
  background: var(--rouge); border-color: var(--rouge); color: #fff;
  box-shadow: 0 0 22px 2px rgba(228, 14, 79, .55);
  animation: pastille-atteinte 1.1s ease-out 1;
}
@keyframes pastille-atteinte {
  0% { box-shadow: 0 0 0 0 rgba(255, 92, 138, .75), 0 0 22px 2px rgba(228, 14, 79, .55); }
  100% { box-shadow: 0 0 0 20px rgba(255, 92, 138, 0), 0 0 22px 2px rgba(228, 14, 79, .55); }
}

.parcours__titre {
  display: flex; align-items: center; min-height: 44px; margin: 0;
  font-family: var(--police-titre); font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 600; letter-spacing: -.028em; line-height: 1.12;
}
.parcours__texte { color: rgba(255, 255, 255, .64); font-size: 1rem; margin-top: 8px; }

/* --------------------------------------------- Version horizontale */
@media (min-width: 900px) {
  .parcours {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 38px);
    padding-top: 62px;                 /* place du rail au-dessus des étapes */
  }

  .parcours__rail {
    left: 0; right: 0; top: 22px; bottom: auto;
    width: auto; height: 2px;
  }
  .parcours__jauge {
    inset: 0 auto 0 0;
    width: var(--progression, 0%); height: 100%;
    background: linear-gradient(90deg, var(--rouge), var(--rouge-clair));
    transition: width 220ms linear;
  }
  .parcours__jauge::before {
    left: auto; right: 0; top: 0; bottom: 0;
    width: 46px; height: auto;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.8), rgba(255,255,255,0));
    animation: reflet-h 2.8s ease-in-out infinite;
  }
  .parcours__jauge::after {
    inset: -3px -4px -3px auto; right: -4px;
    width: 8px; height: auto;
  }
  @keyframes reflet-h {
    0% { transform: translateX(-100%); opacity: 0; }
    25% { opacity: 1; }
    100% { transform: translateX(calc(100% + 46px)); opacity: 0; }
  }

  .parcours__etape { display: block; padding-top: 0; text-align: center; }
  /* La pastille remonte sur le rail, centrée sur sa colonne. */
  .parcours__pastille { position: absolute; top: -62px; left: 50%; transform: translateX(-50%); }
  .parcours__titre { min-height: 0; margin-bottom: 10px; justify-content: center; }
  .parcours__texte { margin-top: 0; margin-inline: auto; max-width: 30ch; }
}

@media (prefers-reduced-motion: reduce) {
  .parcours__jauge::before { animation: none; opacity: 0; }
  .parcours__etape.est-atteint .parcours__pastille { animation: none; }
}

/* ---------------------------------------------------- 5. Accordéons */
.accordeon { border-top: 1px solid var(--trait); max-width: 880px; margin-inline: auto; }
.section--sombre .accordeon { border-top-color: rgba(255, 255, 255, .16); }
.accordeon__item { border-bottom: 1px solid var(--trait); }
.section--sombre .accordeon__item { border-bottom-color: rgba(255, 255, 255, .16); }

.accordeon__tete {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 22px 2px; background: none; border: 0; cursor: pointer; text-align: center;
  font-family: var(--police-titre); font-size: clamp(1.02rem, 1.9vw, 1.3rem);
  font-weight: 600; letter-spacing: -.022em; color: inherit;
  transition: color 220ms ease, padding-left 320ms cubic-bezier(.2, .7, .25, 1);
}
.accordeon__tete:hover { color: var(--rouge); }
.section--sombre .accordeon__tete:hover { color: var(--rouge-clair); }

.accordeon__signe { position: relative; width: 20px; height: 20px; flex: none; }
.accordeon__signe::before, .accordeon__signe::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.6px; background: currentColor;
  transition: transform 340ms cubic-bezier(.2, .7, .25, 1), opacity 240ms ease;
}
.accordeon__signe::after { transform: rotate(90deg); }
.accordeon__item[data-ouvert="true"] .accordeon__signe::after { transform: rotate(0deg); opacity: 0; }
.accordeon__item[data-ouvert="true"] .accordeon__tete { color: var(--rouge); }
.section--sombre .accordeon__item[data-ouvert="true"] .accordeon__tete { color: var(--rouge-clair); }

.accordeon__corps {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 400ms cubic-bezier(.2, .7, .25, 1);
}
.accordeon__item[data-ouvert="true"] .accordeon__corps { grid-template-rows: 1fr; }
.accordeon__corps > div { overflow: hidden; }
.accordeon__corps > div > :first-child { padding-top: 0; }
.accordeon__corps > div > :last-child { padding-bottom: 26px; }
.accordeon__corps p {
  padding: 0 2px; max-width: 64ch; margin-inline: auto; text-align: center;
  color: var(--graphite); font-size: 1rem;
}
.accordeon__corps p + p { margin-top: 12px; }
.section--sombre .accordeon__corps p { color: rgba(255, 255, 255, .64); }

/* ------------------------------------- 6. Grille de projets avec vidéo */
/* Une vidéo paysage occupe deux colonnes : elle garde sa lisibilité dans la grille. */
@media (min-width: 560px) {
  .projets .carte-video[data-format="16:9"] { grid-column: span 2; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__badge { animation: none; }
  .carte-video:hover video { transform: none; }
}

.btn--wa { background: #25d366; color: #fff; }
.btn--wa:hover { background: #1eb457; }
.btn--wa svg { width: 20px; height: 20px; }
.encart-rdv--wa { border-color: #25d366; }

/* ================================ Bulle de discussion WhatsApp
   Bouton flottant présent sur toutes les pages. Au clic, une fenêtre de
   conversation s'ouvre : photo, nom, message d'accueil et champ de saisie.
   Le texte saisi part vers WhatsApp, il n'est jamais envoyé au site. */
.wa { position: fixed; right: 20px; bottom: 20px; z-index: 95; }
@media (min-width: 900px) { .wa { right: 28px; bottom: 28px; } }

.wa__bouton {
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; margin-left: auto;
  background: #25d366; color: #fff;
  box-shadow: 0 10px 28px rgba(37, 211, 102, .38);
  transition: transform 260ms cubic-bezier(.2,.7,.25,1), box-shadow 260ms ease;
}
.wa__bouton:hover { transform: scale(1.06); box-shadow: 0 14px 34px rgba(37, 211, 102, .48); }
.wa__bouton svg { width: 30px; height: 30px; }
.wa__bouton .wa__fermer { display: none; width: 22px; height: 22px; }
.wa[data-ouvert="true"] .wa__bouton { background: var(--encre); box-shadow: 0 10px 26px rgba(16,16,20,.3); }
.wa[data-ouvert="true"] .wa__bouton .wa__logo { display: none; }
.wa[data-ouvert="true"] .wa__bouton .wa__fermer { display: block; }

/* Pastille d'appel, effacée dès la première ouverture */
.wa__pastille {
  position: absolute; top: -2px; right: -2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--rouge); color: #fff; border: 2px solid var(--blanc);
  font-size: .62rem; font-weight: 700; display: grid; place-items: center;
  animation: wa-pulse 2.4s ease-out infinite;
}
.wa[data-ouvert="true"] .wa__pastille, .wa[data-vu="true"] .wa__pastille { display: none; }
@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(228, 14, 79, .5); }
  70% { box-shadow: 0 0 0 8px rgba(228, 14, 79, 0); }
}

.wa__fenetre {
  position: absolute; right: 0; bottom: 72px;
  width: min(330px, calc(100vw - 40px));
  background: var(--blanc); border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(16, 16, 20, .26);
  opacity: 0; transform: translateY(14px) scale(.96); transform-origin: bottom right;
  pointer-events: none; visibility: hidden;
  transition: opacity 240ms ease, transform 320ms cubic-bezier(.2,.7,.25,1), visibility 0s 320ms;
}
.wa[data-ouvert="true"] .wa__fenetre {
  opacity: 1; transform: none; pointer-events: auto; visibility: visible;
  transition: opacity 240ms ease, transform 320ms cubic-bezier(.2,.7,.25,1), visibility 0s;
}

.wa__tete { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #075e54; color: #fff; }
.wa__photo { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; }
.wa__identite strong { display: block; font-family: var(--police-titre); font-size: 1rem; letter-spacing: -.018em; }
.wa__identite span { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: rgba(255,255,255,.86); }
.wa__identite span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; }

/* Fond façon papier peint de la messagerie, dessiné en CSS */
.wa__corps {
  padding: 20px 16px; min-height: 118px;
  background: #ece5dd;
  background-image: radial-gradient(rgba(0, 0, 0, .045) 1px, transparent 1px);
  background-size: 18px 18px;
}
.wa__message {
  background: var(--blanc); border-radius: 4px 12px 12px 12px;
  padding: 12px 14px 8px; max-width: 92%;
  font-size: .9rem; line-height: 1.5; color: var(--encre);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.wa__message p { margin: 0; }
.wa__message p + p { margin-top: 4px; }
.wa__heure { display: block; text-align: right; font-size: .8rem; color: var(--graphite); margin-top: 4px; }

.wa__pied { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #f4f1ee; }
.wa__champ {
  flex: 1; min-width: 0; padding: 11px 14px;
  border: 1px solid var(--trait); border-radius: 100px; background: var(--blanc); font-size: .88rem;
}
.wa__champ:focus { outline: none; border-color: #25d366; }
.wa__envoi {
  width: 42px; height: 42px; border-radius: 50%; border: 0; flex: none; cursor: pointer;
  display: grid; place-items: center; background: #25d366; color: #fff;
  transition: background-color 200ms ease, transform 200ms ease;
}
.wa__envoi:hover { background: #1eb457; transform: scale(1.05); }
.wa__envoi svg { width: 18px; height: 18px; }

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

/* ======================================= Vignettes de service (accueil)
   Image et texte côte à côte, alternés d'une vignette à l'autre. Sous
   900 px, l'image passe au-dessus : deux colonnes y seraient trop étroites. */
.vignettes { display: grid; gap: clamp(20px, 2.6vw, 34px); }

.vignette {
  display: grid; gap: clamp(20px, 2.6vw, 42px);
  align-items: center;
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon);
  overflow: hidden;
  transition: border-color 300ms ease, box-shadow 300ms ease;
}
.vignette:hover { border-color: transparent; box-shadow: 0 20px 48px rgba(16, 16, 20, .1); }

@media (min-width: 900px) {
  .vignette { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
  .vignette--inverse .vignette__media { order: 2; }
}

.vignette__media { align-self: stretch; min-height: 240px; overflow: hidden; }
.vignette__media img {
  width: 100%; height: 100%; min-height: 240px; object-fit: cover;
  transition: transform 800ms cubic-bezier(.2, .7, .25, 1);
}
.vignette:hover .vignette__media img { transform: scale(1.04); }

.vignette__texte {
  padding: clamp(24px, 3vw, 44px);
  display: grid; justify-items: start; gap: 12px;
}
.vignette__num {
  font-family: var(--police-titre); font-size: 1.1rem; font-weight: 700;
  letter-spacing: -.03em; color: var(--rouge);
}
.vignette__accroche { font-size: 1.04rem; font-weight: 500; color: var(--encre); }
.vignette__corps { color: var(--graphite); font-size: .98rem; max-width: 56ch; }
.vignette .btn { margin-top: 8px; }

/* Mots-clés d'une offre ou d'un univers */
.jalons {
  display: flex; flex-wrap: wrap; gap: 6px 8px;
  font-size: .82rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--graphite);
}
.jalons li { display: inline-flex; align-items: center; }
.jalons li + li::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--rouge); margin-right: 8px; flex: none;
}

/* ============================================ Univers accompagnés */
.univers-grille {
  display: grid; gap: 1px;
  background: var(--trait); border: 1px solid var(--trait);
  border-radius: var(--rayon); overflow: hidden;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 860px) { .univers-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.univers {
  background: var(--blanc); padding: clamp(26px, 3vw, 38px);
  display: grid; justify-items: start; gap: 12px; align-content: start;
  position: relative; transition: background-color 280ms ease;
}
.univers::before {
  content: ""; position: absolute; inset: -1px auto auto -1px; height: 2px; width: 0;
  background: var(--rouge); transition: width 360ms cubic-bezier(.2, .7, .25, 1);
}
.univers:hover { background: var(--craie); }
.univers:hover::before { width: calc(100% + 2px); }
.univers__num {
  font-family: var(--police-titre); font-size: 1.05rem; font-weight: 700;
  letter-spacing: -.03em; color: var(--rouge);
}
.univers p { color: var(--graphite); font-size: .97rem; }

/* Univers illustré : l'image coiffe la carte, le texte garde la même grille
   que les cartes sans image, pour que les trois colonnes restent alignées. */
.univers--illustre { padding-top: 0; }
/* La carte est en `justify-items: start` : sans cette ligne, l'image se réduit
   à sa largeur de contenu au lieu de couvrir toute la carte. */
.univers__media {
  justify-self: stretch; width: auto;
  margin: 0 calc(clamp(26px, 3vw, 38px) * -1) clamp(22px, 2.4vw, 30px);
  overflow: hidden;
}
.univers__media img {
  width: 100%; height: clamp(170px, 19vw, 230px); object-fit: cover; display: block;
  transition: transform 800ms cubic-bezier(.2, .7, .25, 1);
}
.univers--illustre:hover .univers__media img { transform: scale(1.04); }
.univers--illustre::before { z-index: 2; }