/* ==========================================================================
   home.css — page d'accueil (index.html) et pages racine
   --------------------------------------------------------------------------
   Chargée après my_style.css et seo_pages.css. Toutes les règles sont
   préfixées par body.page-home : elles l'emportent sur les feuilles générales
   (y compris leurs !important, par spécificité) sans rien changer aux pages
   générées. Les pages racine (about, services, solutions, pointeuses,
   contact, politique, termes) portent aussi body.page-home, pour reprendre
   ce design, et chargent ensuite racine.css (body.page-racine) pour ce qui
   leur est propre : une règle modifiée ici les concerne donc aussi.

   Le contenu CMS injecté par main_script.js (innerHTML sur des id) n'est
   jamais stylé par son id : seulement par son conteneur. L'ordre des blocs
   de la page est celui d'origine ; seule la section #fonctionnement
   (workflows animés) a été ajoutée.

   Sommaire
     1. Jetons, typographie, utilitaires
     2. Header (verre dépoli) et boutons flottants
     3. Hero (#main_div) et bandeau consulting
     4. Partenaires (défilement continu)
     5. Workflows animés (#fonctionnement)
     6. Pointeuses (#feature)
     7. Solutions (12 modules)
     8. Galerie (captures de l'application)
     9. Services
    10. FAQ
    11. À propos (#details)
    12. Témoignages
    13. Contact
    14. Pied de page
    15. Apparition au défilement, mouvement réduit
   ========================================================================== */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. JETONS, TYPOGRAPHIE, UTILITAIRES
   -------------------------------------------------------------------------- */
body.page-home {
  --h-navy-950: #050f1f;
  --h-navy-900: #071428;
  --h-navy-800: #0b1f3d;
  --h-navy-700: #112b52;
  --h-blue: #3884c3;
  --h-blue-600: #2b6b9f;
  --h-blue-300: #8cc2ee;
  --h-cyan: #34c6e8;
  --h-ink: #0f223b;
  --h-text: #3d4b5d;
  --h-muted: #637389;
  --h-bg: #f4f8fc;
  --h-bg-2: #eaf2fa;
  --h-line: #e1e9f2;
  --h-grad: linear-gradient(120deg, #3884c3 0%, #2fb6df 100%);
  --h-grad-texte: linear-gradient(100deg, #8fd0ff 0%, #34c6e8 50%, #b8f3ff 100%);
  --h-rayon: 22px;
  --h-rayon-sm: 14px;
  --h-ombre-sm: 0 1px 2px rgba(15, 34, 59, .05), 0 6px 18px -6px rgba(15, 34, 59, .10);
  --h-ombre: 0 18px 40px -18px rgba(15, 34, 59, .28), 0 2px 6px rgba(15, 34, 59, .04);
  --h-ombre-lg: 0 40px 90px -30px rgba(5, 15, 31, .55);
  --h-titre: "Plus Jakarta Sans", "testfont", "Segoe UI", system-ui, sans-serif;
  background: #fff;
  color: var(--h-text);
  -webkit-font-smoothing: antialiased;
}

body.page-home h1,
body.page-home h2,
body.page-home h3,
body.page-home h4,
body.page-home h5 {
  font-family: var(--h-titre) !important;
  letter-spacing: -0.022em;
  color: var(--h-ink);
  line-height: 1.18 !important;
}

body.page-home p {
  line-height: 1.7;
}

body.page-home section {
  overflow: visible;
}

/* Haut plus court que le bas : le surtitre (.home-kicker) ne flotte pas dans un grand blanc. */
body.page-home .home-section {
  position: relative;
  padding: 50px 0 50px;
}

body.page-home .home-section--soft {
  background: var(--h-bg);
}

/* En-tête de section : surtitre en pastille, titre, chapeau. */
body.page-home .home-head {
  max-width: 780px;
  margin: 0 auto 52px;
  text-align: center;
}

body.page-home .home-head--left {
  margin-left: 0;
  text-align: left;
}

body.page-home .home-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(56, 132, 195, .10);
  color: var(--h-blue-600);
  font: 700 12.5px/1 var(--h-titre);
  letter-spacing: .12em;
  text-transform: uppercase;
}

body.page-home .home-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--h-grad);
  box-shadow: 0 0 0 4px rgba(52, 198, 232, .18);
}

body.page-home .home-head h2 {
  margin: 0 0 16px;
  font-size: clamp(28px, 3.3vw, 44px);
  font-weight: 800;
}

/* :not(.home-kicker) : le surtitre est aussi un <p> ; sans cela, cette règle (plus spécifique)
   lui retirait sa marge basse (titre collé), sa taille et sa couleur. */
body.page-home .home-head p:not(.home-kicker) {
  margin: 0;
  font-size: 17.5px;
  color: var(--h-muted);
}

body.page-home .home-grad-texte {
  background: var(--h-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Boutons */
body.page-home .btn-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 24px;
  border: 0;
  border-radius: 14px;
  font: 700 15.5px/1.1 var(--h-titre);
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

body.page-home .btn-home i {
  font-size: 20px;
  line-height: 0;
}

body.page-home .btn-home:focus-visible {
  outline: 3px solid rgba(52, 198, 232, .7);
  outline-offset: 3px;
}

body.page-home .btn-home--primaire {
  background: var(--h-grad);
  color: #fff !important;
  box-shadow: 0 14px 34px -12px rgba(47, 182, 223, .75), inset 0 1px 0 rgba(255, 255, 255, .28);
}

body.page-home .btn-home--primaire:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px -14px rgba(47, 182, 223, .85), inset 0 1px 0 rgba(255, 255, 255, .28);
}

body.page-home .btn-home--verre {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff !important;
  backdrop-filter: blur(8px);
}

body.page-home .btn-home--verre:hover {
  background: rgba(255, 255, 255, .14);
}

body.page-home .btn-home--clair {
  background: #fff;
  border: 1px solid var(--h-line);
  color: var(--h-ink) !important;
  box-shadow: var(--h-ombre-sm);
}

body.page-home .btn-home--clair:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 132, 195, .45);
  color: var(--h-blue-600) !important;
}

body.page-home .btn-home--sombre {
  background: var(--h-ink);
  color: #fff !important;
  box-shadow: 0 12px 28px -14px rgba(15, 34, 59, .7);
}

body.page-home .btn-home--sombre:hover {
  transform: translateY(-2px);
  background: var(--h-navy-700);
}

body.page-home .home-centre {
  text-align: center;
}

/* --------------------------------------------------------------------------
   2. HEADER (VERRE DÉPOLI) ET BOUTONS FLOTTANTS
   -------------------------------------------------------------------------- */
/* Le flou est posé sur un ::before (et non sur #header lui-même) : un
   backdrop-filter sur #header en ferait le containing block de ses
   descendants position:fixed — dont #navbar, le menu mobile plein écran,
   qui se retrouverait alors comprimé dans les 96px du header au lieu de
   couvrir l'écran (menu mobile cassé, bug constaté le 2026-09-28). */
body.page-home #header.header-transparent {
  box-shadow: 0 1px 0 rgba(15, 34, 59, .06);
}

body.page-home #header.header-transparent::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  pointer-events: none;
}

body.page-home #header.header-scrolled {
  box-shadow: 0 10px 30px -18px rgba(15, 34, 59, .35);
}

body.page-home .back-to-top {
  border-radius: 14px;
  background: var(--h-ink);
  box-shadow: 0 10px 24px -10px rgba(15, 34, 59, .6);
}

/* Pas de border-radius ni de box-shadow sur le logo : l'arrondi coupait la pointe de la
   bulle (en bas à gauche) ; drop-shadow suit la forme du PNG transparent. */
body.page-home #num_wtsp .go_wtsp {
  filter: drop-shadow(0 8px 12px rgba(37, 211, 102, .45));
  transition: transform .2s ease;
}

body.page-home #num_wtsp:hover .go_wtsp {
  transform: scale(1.08);
}

/* --------------------------------------------------------------------------
   3. HERO (#main_div) ET BANDEAU CONSULTING
   -------------------------------------------------------------------------- */
body.page-home #main_div.home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 0 !important;
  padding: calc(var(--ep-header-h) + 64px) 0 104px !important;
  text-align: left;
  color: #c8dbef;
  background:
    radial-gradient(1100px 620px at 88% -8%, rgba(52, 198, 232, .30), transparent 62%),
    radial-gradient(900px 560px at -12% 108%, rgba(56, 132, 195, .45), transparent 62%),
    linear-gradient(162deg, var(--h-navy-950) 0%, #0a2143 52%, #0f3564 100%);
}

/* Le fond oblique de my_style.css n'a plus lieu d'être sous le nouveau hero. */
body.page-home #main_div.home-hero::before {
  display: none;
}

/* Décor : motif zellige (étoile à huit branches), grille, halos. */
body.page-home .home-hero__zellige,
body.page-home .home-hero__grille,
body.page-home .home-hero__halo {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

body.page-home .home-hero__zellige {
  inset: 0;
  opacity: .085;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.1'%3E%3Crect x='24' y='24' width='40' height='40'/%3E%3Crect x='24' y='24' width='40' height='40' transform='rotate(45 44 44)'/%3E%3Ccircle cx='44' cy='44' r='8'/%3E%3Cpath d='M0 0l15.7 15.7M88 0L72.3 15.7M0 88l15.7-15.7M88 88L72.3 72.3M44 0v7.7M44 88v-7.7M0 44h7.7M88 44h-7.7'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 72% 30%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 80% at 72% 30%, #000 0%, transparent 72%);
}

body.page-home .home-hero__grille {
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 30% 20%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 55% at 30% 20%, #000 0%, transparent 75%);
}

body.page-home .home-hero__halo {
  width: 560px;
  height: 560px;
  right: -140px;
  top: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52, 198, 232, .42) 0%, rgba(52, 198, 232, 0) 68%);
  filter: blur(20px);
  animation: home-flotte-lent 16s ease-in-out infinite alternate;
}

body.page-home .home-hero__halo--2 {
  width: 420px;
  height: 420px;
  left: -160px;
  right: auto;
  top: auto;
  bottom: -120px;
  background: radial-gradient(circle, rgba(56, 132, 195, .5) 0%, rgba(56, 132, 195, 0) 70%);
  animation-duration: 20s;
}

@keyframes home-flotte-lent {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-40px, 30px, 0) scale(1.08); }
}

body.page-home .home-hero__texte {
  position: relative;
  z-index: 2;
}

body.page-home .home-hero__surtitre {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 7px 16px 7px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #d9e8f7;
  font: 600 13.5px/1.2 var(--h-titre);
  backdrop-filter: blur(8px);
}

body.page-home .home-hero__surtitre b {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--h-grad);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* `#main_div h1` de my_style.css impose testfont en !important : l'id se
   bat avec un id. */
body.page-home #main_div .home-hero__titre {
  font-family: var(--h-titre) !important;
  margin: 22px 0 18px !important;
  color: #fff !important;
  font-size: clamp(44px, 6vw, 76px);
  font-weight: 800;
  line-height: 1.02 !important;
  letter-spacing: -0.035em;
}

body.page-home .home-hero__titre .home-hero__mot {
  background: var(--h-grad-texte);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

body.page-home .home-hero__chapeau {
  max-width: 580px;
  margin: 0 0 8px;
  color: #e3eefa;
  font-size: 20px;
  line-height: 1.5;
}

body.page-home .home-hero__complement {
  max-width: 580px;
  margin: 0;
  color: #9fb7d1;
  font-size: 16px;
  line-height: 1.65;
}

/* Les dix points clés (contenu CMS). */
body.page-home .home-hero__points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  margin: 30px 0 32px;
  padding: 0;
  list-style: none;
}

body.page-home .home-hero__points li {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .09);
  color: #e6f0fb;
  font-size: 14.5px;
  line-height: 1.35;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

body.page-home .home-hero__points li:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(143, 208, 255, .35);
  transform: translateX(3px);
}

body.page-home .home-hero__points li > i {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--h-grad);
  color: #fff;
  font-size: 16px;
  line-height: 0;
  box-shadow: 0 6px 14px -6px rgba(52, 198, 232, .8);
}

body.page-home .home-hero__points li strong {
  font-weight: 400;
}

body.page-home .home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Coordonnées (contenu CMS) */
body.page-home .home-hero__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
}

body.page-home .home-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13);
  color: #e6f0fb !important;
  font-size: 14px;
  letter-spacing: .04em;
  transition: background-color .2s ease;
}

body.page-home .home-pill:hover {
  background: rgba(255, 255, 255, .12);
}

body.page-home .home-pill a {
  color: inherit !important;
}

body.page-home .home-pill__icone {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 17px;
  line-height: 0;
}

body.page-home .home-pill--wa {
  padding-right: 6px;
}

body.page-home .home-pill--wa .home-pill__icone {
  background: #25d366;
}

body.page-home .home-pill--wa img {
  width: 20px;
  height: 20px;
}

/* Visuel : l'application dans une fenêtre de navigateur + cartes flottantes. */
body.page-home .home-hero__visuel {
  position: relative;
  z-index: 1;
  padding: 36px 0 56px 28px;
  perspective: 1800px;
}

body.page-home .home-mock {
  position: relative;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--h-ombre-lg), 0 0 0 1px rgba(255, 255, 255, .08), 0 0 80px -10px rgba(52, 198, 232, .35);
  overflow: hidden;
  transform: rotateY(-9deg) rotateX(4deg) rotateZ(.4deg);
  transform-origin: 60% 50%;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

body.page-home .home-hero__visuel:hover .home-mock {
  transform: rotateY(-3deg) rotateX(1.5deg);
}

body.page-home .home-mock__barre {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: linear-gradient(180deg, #f7f9fc, #eef3f8);
  border-bottom: 1px solid #e3eaf2;
}

body.page-home .home-mock__barre span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ff6159;
}

body.page-home .home-mock__barre span:nth-child(2) {
  background: #ffbd2e;
}

body.page-home .home-mock__barre span:nth-child(3) {
  background: #28c941;
}

body.page-home .home-mock__barre em {
  flex: 1;
  margin-left: 12px;
  padding: 5px 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e3eaf2;
  color: #7d8a9b;
  font: 600 12px/1.2 var(--h-titre);
  font-style: normal;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.page-home .home-mock img {
  display: block;
  width: 100%;
  height: auto;
}

body.page-home .home-carte {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 22px 44px -18px rgba(5, 15, 31, .55), 0 0 0 1px rgba(15, 34, 59, .05);
  color: var(--h-ink);
  animation: home-flotte 7s ease-in-out infinite;
}

body.page-home .home-carte > i {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #e6f6ee;
  color: #1f9d6b;
  font-size: 22px;
  line-height: 0;
}

body.page-home .home-carte strong {
  display: block;
  font: 800 14px/1.2 var(--h-titre);
  letter-spacing: -.01em;
}

body.page-home .home-carte span {
  display: block;
  margin-top: 2px;
  color: var(--h-muted);
  font-size: 12.5px;
}

body.page-home .home-carte--pointage {
  top: 0;
  left: -8px;
}

body.page-home .home-carte--gps {
  top: 44%;
  right: -18px;
  animation-delay: -2.4s;
}

body.page-home .home-carte--gps > i {
  background: #e7f1fb;
  color: var(--h-blue);
}

body.page-home .home-carte--conge {
  bottom: 18px;
  left: 34%;
  animation-delay: -4.6s;
}

body.page-home .home-carte--conge > i {
  background: #fff3e0;
  color: #e08a00;
}

body.page-home .home-hero__terminal {
  position: absolute;
  z-index: 2;
  left: -10px;
  bottom: -6px;
  width: 168px;
  height: auto;
  filter: drop-shadow(0 26px 28px rgba(0, 0, 0, .45));
  animation: home-flotte 8s ease-in-out infinite;
  animation-delay: -1.2s;
}

@keyframes home-flotte {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -10px, 0); }
}

/* Seconde fenêtre (suivi des retards), posée en avant du bas du tableau de bord. */
body.page-home .home-mock--second {
  z-index: 1;
  width: 64%;
  margin: -9% -3% 0 auto;
  transform: rotateY(-9deg) rotateX(4deg) rotateZ(.4deg) translateZ(40px);
}

body.page-home .home-hero__visuel:hover .home-mock--second {
  transform: rotateY(-3deg) rotateX(1.5deg) translateZ(40px);
}

/* Écran large : la colonne de texte (dix points clés) est bien plus haute que le visuel.
   Centré, le visuel laissait un grand vide au-dessus de lui ; il part désormais du haut de
   la colonne et l'accompagne au défilement (sticky) jusqu'aux boutons. */
@media (min-width: 992px) {
  /* hidden ferait du hero un conteneur de défilement : sticky n'y fonctionnerait pas */
  body.page-home #main_div.home-hero {
    overflow: clip;
  }

  body.page-home .home-hero__colonne-visuel {
    align-self: stretch;
  }

  body.page-home .home-hero__visuel {
    position: sticky;
    top: calc(var(--ep-header-h) + 24px);
    padding: 34px 0 76px 28px;
  }

  body.page-home .home-carte--gps {
    top: 31%;
  }

  body.page-home .home-carte--conge {
    bottom: 8px;
    left: 24%;
  }

  body.page-home .home-hero__terminal {
    width: 150px;
    bottom: 22px;
  }
}

/* Au-delà du conteneur de 1 320 px, le visuel déborde un peu à droite, dans la marge. */
@media (min-width: 1400px) {
  body.page-home .home-hero__visuel {
    margin-right: -64px;
  }
}

/* Bandeau consulting : carte blanche à cheval sur le bas de la vitrine sombre des pointeuses
   (#feature), qui lui réserve la place par sa marge basse. */
body.page-home .home-consulting {
  position: relative;
  z-index: 5;
  margin-top: -78px;
}

body.page-home .hero-consulting-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  border-radius: var(--h-rayon);
  background: #fff;
  box-shadow: var(--h-ombre-lg), 0 0 0 1px rgba(15, 34, 59, .04);
}

body.page-home .hero-consulting-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: var(--h-grad);
  color: #fff;
  font-size: 28px;
  line-height: 0;
  box-shadow: 0 14px 28px -12px rgba(47, 182, 223, .8);
}

body.page-home .hero-consulting-content {
  flex: 1;
  min-width: 0;
}

body.page-home .hero-consulting-title {
  display: block;
  color: var(--h-ink);
  font: 800 18px/1.3 var(--h-titre);
  letter-spacing: -.015em;
}

body.page-home .hero-consulting-desc {
  display: block;
  margin-top: 4px;
  color: var(--h-muted);
  font-size: 15px;
}

body.page-home .hero-consulting-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.page-home .hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--h-bg);
  border: 1px solid var(--h-line);
  color: var(--h-ink);
  font: 700 13px/1 var(--h-titre);
}

body.page-home .hero-pill i {
  color: var(--h-blue);
  font-size: 16px;
  line-height: 0;
}

/* --------------------------------------------------------------------------
   4. PARTENAIRES — défilement continu sur deux rangées (home.js)
   -------------------------------------------------------------------------- */
body.page-home .home-partenaires {
  padding: 56px 0 64px;
  background: #fff;
}

body.page-home .home-partenaires .home-head {
  margin-bottom: 36px;
}

body.page-home .home-partenaires__compteur {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 14px;
  color: var(--h-muted);
  font-size: 15px;
}

body.page-home .home-partenaires__compteur b {
  color: var(--h-ink);
  font: 800 22px/1 var(--h-titre);
}

body.page-home #loading_partenaires {
  color: var(--h-muted);
}

body.page-home .home-defile {
  position: relative;
  overflow: hidden;
  padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}

/* Avant la mise en rangées (ou sans JavaScript) : simple grille qui passe à la ligne. */
body.page-home .home-defile .swiper-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  transform: none !important;
}

body.page-home .home-defile.is-pret .swiper-wrapper {
  display: block;
}

/* La marge droite égale à l'espacement rend les deux moitiés identiques :
   la translation de -50 % retombe exactement sur un logo (boucle sans à-coup). */
body.page-home .home-defile__rangee {
  display: flex;
  gap: 16px;
  width: max-content;
  padding: 8px 16px 8px 0;
  animation: home-defile var(--duree, 70s) linear infinite;
}

body.page-home .home-defile__rangee--inverse {
  animation-direction: reverse;
}

body.page-home .home-defile:hover .home-defile__rangee,
body.page-home .home-defile:focus-within .home-defile__rangee {
  animation-play-state: paused;
}

@keyframes home-defile {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

body.page-home .home-defile .swiper-slide {
  flex: none;
  width: auto !important;
  height: auto;
}

body.page-home .home-defile .box {
  display: grid;
  place-items: center;
  width: 176px;
  height: 92px;
  padding: 14px 20px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--h-line);
  box-shadow: var(--h-ombre-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

body.page-home .home-defile .box:hover {
  transform: translateY(-3px);
  border-color: rgba(56, 132, 195, .35);
  box-shadow: var(--h-ombre);
}

body.page-home .home-defile .box .img-box {
  width: 100%;
  height: 100%;
}

body.page-home .home-defile .box .img-box img {
  width: 100% !important;
  height: 100% !important;
  max-height: 62px;
  object-fit: contain;
  opacity: .72;
  transition: filter .3s ease, opacity .3s ease;
}

body.page-home .home-defile .box:hover .img-box img {
  filter: none;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   5. WORKFLOWS ANIMÉS (#fonctionnement) — onglets + scène + étapes
   Composant partagé avec les pages générées (voir seo_pages.css « .flow »).
   -------------------------------------------------------------------------- */
body.page-home .home-flows {
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(56, 132, 195, .10), transparent 70%),
    var(--h-bg);
}

/* Onglets : une seule rangée de colonnes égales, quel que soit le nombre de parcours (plus de
   dernier onglet seul sur une deuxième ligne). Icône au-dessus, libellé centré sur deux lignes au
   plus ; l'onglet actif est une carte sombre. */
body.page-home .flows__onglets {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  margin: 0 0 26px;
  padding: 6px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--h-line);
  box-shadow: var(--h-ombre-sm);
}

body.page-home .flows__onglet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 14px 8px 13px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--h-muted);
  font: 700 13.5px/1.25 var(--h-titre);
  text-align: center;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

body.page-home .flows__onglet i {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--h-bg);
  color: var(--h-blue-600);
  font-size: 20px;
  line-height: 0;
  transition: background-color .2s ease, color .2s ease;
}

body.page-home .flows__onglet > span {
  text-wrap: balance;
}

body.page-home .flows__onglet:hover {
  color: var(--h-ink);
  background: var(--h-bg);
}

body.page-home .flows__onglet:hover i {
  background: #fff;
}

body.page-home .flows__onglet[aria-selected="true"] {
  background: var(--h-ink);
  color: #fff;
  box-shadow: 0 12px 24px -14px rgba(15, 34, 59, .85);
}

body.page-home .flows__onglet[aria-selected="true"] i {
  background: rgba(255, 255, 255, .12);
  color: var(--h-blue-300);
}

body.page-home .flows__onglet:focus-visible {
  outline: 3px solid rgba(52, 198, 232, .7);
  outline-offset: 2px;
}

body.page-home .home-flows .flow__scene {
  box-shadow: 0 40px 80px -40px rgba(15, 34, 59, .45), 0 2px 6px rgba(15, 34, 59, .04);
}

/* Sous 992 px : les colonnes deviendraient trop étroites pour leur libellé ; la rangée garde des
   onglets de largeur fixe et défile au doigt. */
@media (max-width: 991px) {
  body.page-home .flows__onglets {
    grid-auto-columns: 124px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body.page-home .flows__onglets::-webkit-scrollbar {
    display: none;
  }

  body.page-home .flows__onglet {
    scroll-snap-align: start;
  }
}

/* Sous 768 px : pastilles compactes (icône + libellé sur une ligne), chacune à sa largeur ;
   l'onglet suivant dépasse du bord et montre que la rangée défile. */
@media (max-width: 767px) {
  body.page-home .flows__onglets {
    grid-auto-columns: max-content;
    border-radius: 18px;
  }

  body.page-home .flows__onglet {
    flex-direction: row;
    gap: 8px;
    padding: 7px 14px 7px 7px;
    border-radius: 13px;
    font-size: 13.5px;
  }

  body.page-home .flows__onglet > span {
    white-space: nowrap;
  }

  body.page-home .flows__onglet i {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 17px;
  }
}

/* --------------------------------------------------------------------------
   6. POINTEUSES (#feature) — vitrine sombre
   -------------------------------------------------------------------------- */
body.page-home .home-devices {
  position: relative;
  isolation: isolate;
  padding: 80px 0 164px;    /* bas : place du bandeau consulting qui chevauche la section */
  background:
    radial-gradient(900px 500px at 15% 0%, rgba(56, 132, 195, .35), transparent 65%),
    radial-gradient(700px 420px at 100% 100%, rgba(52, 198, 232, .22), transparent 65%),
    linear-gradient(180deg, var(--h-navy-900), var(--h-navy-800));
  color: #b9cbe0;
}

body.page-home .home-devices .home-head h2 {
  color: #fff;
}

body.page-home .home-devices .home-kicker,
body.page-home .home-contact__panneau .home-kicker {
  background: rgba(143, 208, 255, .12);
  color: var(--h-blue-300);
}

body.page-home .home-devices__sous-titre {
  margin: 0;
  color: #a9c2dc;
  font-size: 17px;
}

/* Grilles de l'accueil en flex centré : une dernière rangée incomplète (14 pointeuses
   sur 4 colonnes) reste centrée. --cols = cartes par rangée, réduit par les media queries. */
body.page-home .home-devices__grille,
body.page-home .home-solutions__grille {
  --cols: 4;
  --gap: 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}

body.page-home .home-devices__grille > *,
body.page-home .home-solutions__grille > * {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  min-width: 0;
}

body.page-home .device {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--h-rayon);
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .10);
  overflow: hidden;
  color: #d8e6f5 !important;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s ease, background-color .3s ease;
}

body.page-home .device:hover {
  transform: translateY(-6px);
  border-color: rgba(143, 208, 255, .45);
}

body.page-home .device__image {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3.2;
  margin: 10px 10px 0;
  border-radius: 16px;
  background: radial-gradient(circle at 50% 38%, #ffffff 0%, #eef4fa 70%, #e3ecf5 100%);
  overflow: hidden;
}

/* Position absolue : la hauteur en % se résout contre la boîte à ratio fixe. En flux,
   la piste de grille « auto » prenait la hauteur naturelle de l'image, et un appareil
   haut et étroit (DS-K1T344MX-E1) débordait, recadré. */
body.page-home .device__image img {
  position: absolute;
  top: 7%;
  left: 11%;
  width: 78%;
  height: 86%;
  object-fit: contain;
  filter: drop-shadow(0 16px 18px rgba(15, 34, 59, .22));
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}

body.page-home .device:hover .device__image img {
  transform: scale(1.06) translateY(-4px);
}

/* z-index : l'image porte un filtre (ombre portée), qui la ferait peindre
   par-dessus l'étiquette. */
body.page-home .device__marque {
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 10px;
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(15, 34, 59, .88);
  color: #fff;
  font: 800 10.5px/1 var(--h-titre);
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.page-home .device__corps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 16px;
}

body.page-home .device__nom {
  margin: 0;
  color: #fff !important;
  font-size: 16.5px;
  font-weight: 800;
}

body.page-home .device__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.page-home .device__tags span {
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(143, 208, 255, .12);
  color: #bfe0ff;
  font-size: 12px;
  font-weight: 600;
}

body.page-home .device__lien {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  color: var(--h-blue-300);
  font: 700 13px/1 var(--h-titre);
}

body.page-home .device:hover .device__lien i {
  transform: translateX(3px);
}

body.page-home .device__lien i {
  transition: transform .2s ease;
}

body.page-home .home-devices__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}

/* --------------------------------------------------------------------------
   7. SOLUTIONS (12 MODULES)
   -------------------------------------------------------------------------- */
body.page-home .solution {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px 22px;
  border-radius: var(--h-rayon);
  background: #fff;
  border: 1px solid var(--h-line);
  color: var(--h-text) !important;
  text-decoration: none;
  box-shadow: var(--h-ombre-sm);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, border-color .3s ease;
  overflow: hidden;
}

body.page-home .solution::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--h-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}

body.page-home .solution:hover {
  transform: translateY(-5px);
  border-color: rgba(56, 132, 195, .32);
  box-shadow: var(--h-ombre);
}

body.page-home .solution:hover::after {
  transform: scaleX(1);
}

body.page-home .solution__icone {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: linear-gradient(145deg, #eef6fd, #e2eef9);
}

body.page-home .solution__icone img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

body.page-home .solution__titre {
  margin: 6px 0 0;
  font-size: 17.5px;
  font-weight: 800;
}

body.page-home .solution__texte {
  margin: 0;
  color: var(--h-muted);
  font-size: 14.5px;
  line-height: 1.6;
}

body.page-home .solution__plus {
  margin-top: auto;
  padding-top: 6px;
  color: var(--h-blue-600);
  font: 700 13.5px/1 var(--h-titre);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
}

body.page-home .solution:hover .solution__plus,
body.page-home .solution:focus-visible .solution__plus {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   8. GALERIE — captures de l'application dans une fenêtre de navigateur
   -------------------------------------------------------------------------- */
body.page-home .home-galerie__cadre {
  max-width: 1080px;
  margin: 0 auto;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--h-ombre-lg), 0 0 0 1px rgba(15, 34, 59, .06);
  overflow: hidden;
}

body.page-home .home-galerie__cadre .home-mock__barre em {
  max-width: 420px;
  margin: 0 auto;
}

body.page-home #gallery .carousel-item {
  min-height: 0 !important;
}

/* Captures entières, jamais recadrées : toutes au même format (1424 × 810, captures.py), leurs
   attributs width/height donnent la hauteur du carrousel. Au clic, galerie.js les ouvre en grand. */
body.page-home #gallery .carousel-item img {
  position: static;
  width: 100%;
  height: auto !important;
}

body.page-home .home-galerie__lien {
  position: relative;
  display: block;
  cursor: zoom-in;
}

body.page-home .home-galerie__lien:focus-visible {
  outline: 3px solid rgba(52, 198, 232, .7);
  outline-offset: -3px;
}

body.page-home .home-galerie__agrandir {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  background: rgba(15, 34, 59, .82);
  color: #fff;
  font: 700 12.5px/1 var(--h-titre);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}

body.page-home .home-galerie__agrandir i {
  font-size: 16px;
  line-height: 0;
}

body.page-home .home-galerie__lien:hover .home-galerie__agrandir,
body.page-home .home-galerie__lien:focus-visible .home-galerie__agrandir {
  opacity: 1;
  transform: none;
}

/* Écran tactile ou étroit : pas de survol, l'invitation reste visible. */
@media (hover: none), (max-width: 991px) {
  body.page-home .home-galerie__agrandir {
    opacity: 1;
    transform: none;
  }
}

body.page-home #gallery .carousel-indicators {
  position: static;
  margin: 22px auto 0;
  gap: 6px;
}

body.page-home #gallery .carousel-indicators [data-bs-target] {
  width: 26px;
  height: 5px;
  border: 0;
  border-radius: 999px;
  background-color: #c9d8e8 !important;
  opacity: 1;
  transition: width .3s ease, background-color .3s ease;
}

body.page-home #gallery .carousel-indicators .active {
  width: 44px;
  background-color: var(--h-blue) !important;
}

body.page-home #gallery .carousel-control-prev,
body.page-home #gallery .carousel-control-next {
  top: 50%;
  bottom: auto;
  width: 48px;
  height: 48px;
  margin: 0 14px;
  border-radius: 50%;
  background: rgba(15, 34, 59, .78);
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity .25s ease;
}

body.page-home #gallery .carousel:hover .carousel-control-prev,
body.page-home #gallery .carousel:hover .carousel-control-next,
body.page-home #gallery .carousel-control-prev:focus-visible,
body.page-home #gallery .carousel-control-next:focus-visible {
  opacity: 1;
}

body.page-home #gallery .carousel-control-prev-icon,
body.page-home #gallery .carousel-control-next-icon {
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
}

body.page-home #gallery .carousel-control-next-icon {
  transform: scaleX(-1);
}

body.page-home .home-galerie__legende {
  min-height: 26px;
  margin: 18px 0 0;
  color: var(--h-muted);
  font-size: 15px;
  text-align: center;
}

body.page-home .home-galerie__legende b {
  color: var(--h-ink);
  font-family: var(--h-titre);
}

/* --------------------------------------------------------------------------
   9. SERVICES
   -------------------------------------------------------------------------- */
body.page-home .home-services__intro {
  position: sticky;
  top: calc(var(--ep-header-h) + 32px);
}

body.page-home .home-services__intro img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 28px 0 26px;
}

body.page-home .home-services__grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

body.page-home .service {
  padding: 24px 22px;
  border-radius: var(--h-rayon);
  background: #fff;
  border: 1px solid var(--h-line);
  box-shadow: var(--h-ombre-sm);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

body.page-home .service:hover {
  transform: translateY(-4px);
  border-color: rgba(56, 132, 195, .3);
  box-shadow: var(--h-ombre);
}

body.page-home .service > i {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 16px;
  border-radius: 15px;
  background: var(--h-grad);
  color: #fff;
  font-size: 25px;
  line-height: 0;
  box-shadow: 0 12px 24px -12px rgba(47, 182, 223, .85);
}

body.page-home .service h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
}

body.page-home .service p {
  margin: 0;
  color: var(--h-muted);
  font-size: 14.5px;
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   10. FAQ
   -------------------------------------------------------------------------- */
body.page-home .home-faq__intro {
  position: sticky;
  top: calc(var(--ep-header-h) + 32px);
}

body.page-home .home-faq__aide {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding: 18px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--h-line);
}

body.page-home .home-faq__aide > i {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--h-bg-2);
  color: var(--h-blue);
  font-size: 24px;
  line-height: 0;
}

body.page-home .home-faq__aide strong {
  display: block;
  color: var(--h-ink);
  font-family: var(--h-titre);
}

body.page-home .home-faq__aide a {
  font-weight: 700;
}

body.page-home .faq .accordion-list {
  padding: 0;
}

body.page-home .faq .accordion-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.page-home .faq .accordion-list li {
  position: relative;
  padding: 0;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--h-line);
  box-shadow: var(--h-ombre-sm);
  transition: border-color .25s ease, box-shadow .25s ease;
}

body.page-home .faq .accordion-list li + li {
  margin-top: 12px;
}

body.page-home .faq .accordion-list li:hover {
  border-color: rgba(56, 132, 195, .35);
}

body.page-home .faq .accordion-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  padding: 20px 56px 20px 60px;
  color: var(--h-ink) !important;
  font: 700 16px/1.45 var(--h-titre);
  /* my_style.css : `.faq .accordion-list a { font-family: testfont !important }` */
  font-family: var(--h-titre) !important;
  cursor: pointer;
}

body.page-home .faq .accordion-list a strong {
  font-weight: 700;
}

body.page-home .faq .accordion-list .icon-help {
  position: absolute;
  top: 18px;
  left: 18px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--h-bg-2);
  color: var(--h-blue);
  font-size: 18px;
  line-height: 0;
}

body.page-home .faq .accordion-list .icon-show,
body.page-home .faq .accordion-list .icon-close {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--h-bg);
  color: var(--h-ink);
  font-size: 20px;
}

/* Une seule des deux flèches visible : Bootstrap pose .collapsed sur la
   question fermée. */
body.page-home .faq .accordion-list .icon-show,
body.page-home .faq .accordion-list a.collapsed .icon-close {
  display: none;
}

body.page-home .faq .accordion-list .icon-close,
body.page-home .faq .accordion-list a.collapsed .icon-show {
  display: grid;
}

body.page-home .faq .accordion-list p {
  margin: 0;
  padding: 0 24px 22px 60px;
  color: var(--h-muted);
  font-size: 15.5px;
}

/* Liens dans une réponse (accueil.FAQ_ACCUEIL) : la règle des questions (.accordion-list a,
   ici et dans my_style.css) en ferait des blocs. */
body.page-home .faq .accordion-list p a {
  display: inline;
  padding: 0;
  color: var(--h-blue-600) !important;
  font: inherit;
  font-family: inherit !important;
  font-weight: 700;
}

body.page-home .faq .accordion-list p a:hover {
  color: var(--h-blue) !important;
}

/* --------------------------------------------------------------------------
   11. À PROPOS (#details)
   -------------------------------------------------------------------------- */
body.page-home .home-apropos__ligne {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: 56px;
}

body.page-home .home-apropos__ligne + .home-apropos__ligne {
  margin-top: 80px;
}

body.page-home .home-apropos__ligne--inverse {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

body.page-home .home-apropos__ligne--inverse .home-apropos__visuel {
  order: 2;
}

body.page-home .home-apropos__visuel {
  position: relative;
  display: grid;
  place-items: center;
  padding: 26px;
  border-radius: 32px;
  background:
    radial-gradient(circle at 30% 20%, rgba(52, 198, 232, .18), transparent 60%),
    linear-gradient(145deg, #eef6fd, #e3eef9);
}

body.page-home .home-apropos__visuel img {
  width: 100%;
  height: auto;
}

body.page-home .home-apropos__num {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: var(--h-ink);
  color: #fff;
  font: 800 16px/1 var(--h-titre);
}

body.page-home #details .content h3 {
  margin: 0 0 14px;
  color: var(--h-ink) !important;
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 800;
  text-transform: none;
}

body.page-home #details .content p {
  color: var(--h-muted);
  font-size: 16.5px;
}

body.page-home #details .content ul {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

body.page-home #details .content ul li {
  display: flex;
  gap: 12px;
  padding: 7px 0;
  color: var(--h-text);
  font-size: 15.5px;
  line-height: 1.6;
}

body.page-home #details .content ul li span {
  font-size: 15.5px !important;
}

body.page-home #details .content ul i {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  padding: 0;
  border-radius: 50%;
  background: rgba(31, 157, 107, .12);
  color: #1f9d6b;
  font-size: 15px;
  line-height: 0;
}

/* --------------------------------------------------------------------------
   12. TÉMOIGNAGES
   -------------------------------------------------------------------------- */
body.page-home #testimonials {
  overflow: hidden;
}

body.page-home #loading_testimonials {
  color: var(--h-muted);
}

body.page-home .testimonials .testimonials-slider {
  overflow: visible;
  padding: 6px 4px 8px;
}

body.page-home .testimonials .testimonial-item {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  min-height: 240px;
  margin: 0;
  padding: 30px 30px 26px;
  border-radius: var(--h-rayon);
  background: #fff;
  border: 1px solid var(--h-line);
  box-shadow: var(--h-ombre-sm);
}

body.page-home .testimonials .testimonial-item .quote-icon-left {
  position: static;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--h-grad);
  color: #fff;
  font-size: 24px;
  line-height: 0;
  box-shadow: 0 12px 24px -12px rgba(47, 182, 223, .8);
}

body.page-home .testimonials .temoi_text {
  flex: 1;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--h-text);
  font-size: 16.5px !important;
  line-height: 1.7;
}

body.page-home .testimonials .temoi_text span {
  font-size: inherit !important;
}

body.page-home .testimonial-auteur {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--h-line);
}

body.page-home .testimonials .testimonial-item .testimonial-img {
  position: static;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--h-bg-2);
}

body.page-home .testimonials .testimonial-item h3 {
  margin: 0;
  color: var(--h-ink);
  font-size: 15.5px;
  font-weight: 800;
}

body.page-home .testimonials .swiper-slide {
  height: auto;
}

body.page-home .testimonials .swiper-pagination {
  margin-top: 30px;
}

body.page-home .testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  border: 0;
  background: #c9d8e8;
  transition: width .3s ease, background-color .3s ease;
}

body.page-home .testimonials .swiper-pagination .swiper-pagination-bullet-active {
  width: 28px;
  border-radius: 999px;
  background: var(--h-blue);
}

/* --------------------------------------------------------------------------
   13. CONTACT
   -------------------------------------------------------------------------- */
body.page-home .home-contact__carte {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--h-ombre-lg), 0 0 0 1px rgba(15, 34, 59, .05);
  overflow: hidden;
}

body.page-home .home-contact__panneau {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 42px 38px;
  background:
    radial-gradient(500px 300px at 100% 0%, rgba(52, 198, 232, .35), transparent 60%),
    linear-gradient(160deg, var(--h-navy-900), var(--h-navy-700));
  color: #c8dbef;
  overflow: hidden;
}

body.page-home .home-contact__panneau h2 {
  margin: 0 0 12px;
  color: #fff;
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 800;
}

body.page-home .home-contact__panneau p:not(.home-kicker) {
  margin: 0;
  color: #a9c2dc;
}

body.page-home .home-contact__panneau img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto -42px;
}

body.page-home .home-contact__formulaire {
  padding: 42px 40px;
}

body.page-home .contact .email-form {
  padding: 0;
  box-shadow: none;
  background: transparent;
}

body.page-home .contact .email-form .form-control {
  height: auto;
  padding: 15px 16px;
  border-radius: 14px;
  border: 1px solid #d6e1ec;
  background: #f8fbfe;
  color: var(--h-ink);
  font-size: 15.5px;
  box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

body.page-home .contact .email-form .form-control:focus {
  border-color: var(--h-blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(56, 132, 195, .14);
}

body.page-home .contact .email-form button[type="submit"] {
  margin-top: 6px;
  padding: 15px 30px;
  border: 0;
  border-radius: 14px;
  background: var(--h-grad);
  color: #fff;
  font: 700 15.5px/1 var(--h-titre);
  box-shadow: 0 14px 30px -14px rgba(47, 182, 223, .85);
  transition: transform .2s ease, box-shadow .2s ease;
}

body.page-home .contact .email-form button[type="submit"]:hover {
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   14. PIED DE PAGE
   -------------------------------------------------------------------------- */
body.page-home #footer {
  background: var(--h-navy-900);
  color: #9fb4ca;
}

body.page-home #footer .footer-newsletter {
  position: relative;
  padding: 56px 0;
  background:
    radial-gradient(600px 240px at 50% 0%, rgba(52, 198, 232, .25), transparent 70%),
    linear-gradient(180deg, var(--h-navy-800), var(--h-navy-900));
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  text-align: center;
}

body.page-home #footer .footer-newsletter h4 {
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  text-transform: none;
}

body.page-home #footer .footer-newsletter p {
  color: #a9c2dc;
}

body.page-home #footer .footer-newsletter form {
  display: flex;
  margin-top: 22px;
  padding: 6px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: none;
}

body.page-home #footer .footer-newsletter form input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: #fff;
}

body.page-home #footer .footer-newsletter form input[type="email"]::placeholder {
  color: #8aa3be;
}

body.page-home #footer .footer-newsletter form input[type="submit"] {
  position: static;
  height: auto;
  padding: 12px 22px;
  border: 0;
  border-radius: 12px;
  background: var(--h-grad);
  color: #fff;
  font: 700 15px/1 var(--h-titre);
  box-shadow: none;
}

body.page-home #footer .footer-top {
  padding: 56px 0 26px;
  background: transparent;
}

body.page-home #footer .footer-top h4,
body.page-home #footer .footer-seo h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
}

body.page-home #footer .footer-top .footer-contact p,
body.page-home #footer .footer-top .footer-contact strong {
  color: #b8c9dc;
}

body.page-home #footer .footer-top .footer-contact .logo {
  padding: 10px 14px;
  border-radius: 14px;
  background: #fff;
}

body.page-home #footer .footer-top .footer-links ul a,
body.page-home #footer .footer-seo a {
  color: #9fb4ca !important;
}

body.page-home #footer .footer-top .footer-links ul a:hover,
body.page-home #footer .footer-seo a:hover {
  color: #fff !important;
}

body.page-home #footer .footer-top .footer-links ul i {
  color: var(--h-cyan);
}

body.page-home #footer .footer-seo {
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

body.page-home #footer .social-links a {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

body.page-home #footer .social-links a:hover {
  background: var(--h-blue);
}

body.page-home #footer .copyright {
  color: #7f95ad;
}

body.page-home #footer .container.py-4 {
  border-top: 1px solid rgba(255, 255, 255, .07);
}

/* --------------------------------------------------------------------------
   15. APPARITION AU DÉFILEMENT, RESPONSIVE, MOUVEMENT RÉDUIT
   -------------------------------------------------------------------------- */
/* home.js pose .js-reveal sur <html> : sans JavaScript, tout reste visible. */
.js-reveal body.page-home [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1);
  transition-delay: var(--delai, 0s);
}

.js-reveal body.page-home [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (max-width: 1199px) {
  body.page-home .home-devices__grille,
  body.page-home .home-solutions__grille {
    --cols: 3;
  }

  body.page-home .home-carte--gps {
    right: -6px;
  }
}

@media (max-width: 991px) {
  body.page-home .home-section {
    padding: 56px 0 72px;
  }

  body.page-home #main_div.home-hero {
    padding: calc(var(--ep-header-h) + 40px) 0 72px !important;
    text-align: left !important;
  }

  body.page-home .home-hero__visuel {
    max-width: 640px;
    margin: 44px auto 0;
    padding: 26px 0 40px 18px;
  }

  body.page-home .home-mock {
    transform: rotateY(-5deg) rotateX(3deg);
  }

  body.page-home .hero-consulting-banner {
    flex-wrap: wrap;
  }

  body.page-home .hero-consulting-pills {
    width: 100%;
    padding-left: 78px;
  }

  body.page-home .home-services__intro,
  body.page-home .home-faq__intro {
    position: static;
    margin-bottom: 36px;
    text-align: center;
  }

  body.page-home .home-services__intro .home-head--left,
  body.page-home .home-faq__intro .home-head--left {
    margin: 0 auto 0;
    text-align: center;
  }

  body.page-home .home-services__intro img {
    max-width: 340px;
    margin: 24px auto;
  }

  body.page-home .home-apropos__ligne,
  body.page-home .home-apropos__ligne--inverse {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: left;
  }

  body.page-home .home-apropos__ligne--inverse .home-apropos__visuel {
    order: 0;
  }

  body.page-home .home-apropos__visuel {
    max-width: 460px;
    margin: 0 auto;
  }

  body.page-home #details .content h3,
  body.page-home #details .content p,
  body.page-home #details .content ul {
    text-align: left !important;
  }

  body.page-home .home-contact__carte {
    grid-template-columns: 1fr;
  }

  body.page-home .home-contact__panneau img {
    max-width: 240px;
    margin-bottom: -42px;
  }

  body.page-home #footer .footer-top {
    text-align: left !important;
  }
}

@media (max-width: 767px) {
  /* Pointeuses : deux par rangée. Solutions : une par rangée (icône à côté du titre). */
  body.page-home .home-devices__grille {
    --cols: 2;
    --gap: 12px;
  }

  body.page-home .home-solutions__grille {
    --cols: 1;
    --gap: 12px;
  }

  body.page-home .home-services__grille {
    grid-template-columns: 1fr;
  }

  body.page-home .home-head {
    margin-bottom: 32px;
  }

  body.page-home .home-head p:not(.home-kicker) {
    font-size: 16px;
  }

  body.page-home .home-kicker {
    margin-bottom: 14px;
    font-size: 11.5px;
  }

  /* Les pointeuses remontent : partenaires et vitrine moins hautes. */
  body.page-home .home-partenaires {
    padding: 44px 0 48px;
  }

  body.page-home .home-partenaires .home-head {
    margin-bottom: 26px;
  }

  body.page-home .home-devices {
    padding-top: 56px;
  }

  /* Les dix points clés, en deux colonnes compactes (empilés un par ligne, ils prenaient
     plus d'un écran de téléphone avant les pointeuses). */
  body.page-home .home-hero__points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 22px 0 24px;
  }

  body.page-home .home-hero__points li {
    gap: 7px;
    padding: 8px 9px;
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.3;
  }

  body.page-home .home-hero__points li > i {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    font-size: 13px;
  }

  body.page-home .home-hero__visuel {
    margin-top: 30px;
  }

  body.page-home .home-hero__chapeau {
    font-size: 18px;
  }

  /* Bandeau consulting : empilé et centré. */
  body.page-home .hero-consulting-banner {
    flex-direction: column;
    gap: 14px;
    padding: 24px 20px;
    text-align: center;
  }

  body.page-home .hero-consulting-pills {
    justify-content: center;
    padding-left: 0;
  }

  body.page-home .home-carte--conge {
    left: auto;
    right: 8px;
  }

  body.page-home .home-hero__terminal {
    width: 118px;
    left: -10px;
  }

  /* un seul écran sur téléphone : le hero reste court (image en lazy, non chargée) */
  body.page-home .home-mock--second {
    display: none;
  }

  body.page-home .solution {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px 14px;
    padding: 18px;
  }

  body.page-home .solution__icone {
    width: 56px;
    height: 56px;
    border-radius: 16px;
  }

  body.page-home .solution__icone img {
    width: 40px;
    height: 40px;
  }

  body.page-home .solution__titre {
    margin: 0;
    font-size: 16.5px;
  }

  body.page-home .solution__texte,
  body.page-home .solution__plus {
    grid-column: 1 / -1;
  }

  body.page-home .solution__texte {
    font-size: 14.5px;
  }

  body.page-home .solution__plus {
    padding-top: 0;
    opacity: 1;
    transform: none;
  }

  body.page-home .device__corps {
    padding: 12px 12px 14px;
  }

  body.page-home .device__nom {
    font-size: 14.5px;
  }

  body.page-home .home-defile .box {
    width: 138px;
    height: 76px;
    padding: 10px 14px;
  }

  body.page-home .faq .accordion-list a {
    padding: 18px 52px 18px 56px;
    font-size: 15px;
  }

  body.page-home .faq .accordion-list p {
    padding: 0 18px 18px 56px;
  }

  body.page-home .home-contact__formulaire,
  body.page-home .home-contact__panneau {
    padding: 30px 22px;
  }

  body.page-home #gallery .carousel-control-prev,
  body.page-home #gallery .carousel-control-next {
    display: none;
  }

  /* 12 traits : ils doivent tenir dans la largeur d'un téléphone. */
  body.page-home #gallery .carousel-indicators {
    flex-wrap: wrap;
    gap: 4px;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  body.page-home #gallery .carousel-indicators [data-bs-target] {
    width: 14px;
    margin: 0;
  }

  body.page-home #gallery .carousel-indicators .active {
    width: 28px;
  }
}

@media (max-width: 575px) {
  body.page-home #main_div .home-hero__titre {
    font-size: 42px;
  }

  body.page-home .home-hero__surtitre {
    font-size: 12.5px;
  }

  body.page-home .home-hero__actions .btn-home {
    flex: 1 1 100%;
  }

  body.page-home .home-hero__contact {
    flex-direction: column;
    align-items: stretch;
  }

  body.page-home .home-pill {
    justify-content: center;
  }

  body.page-home .home-carte {
    padding: 9px 12px 9px 9px;
    gap: 9px;
  }

  body.page-home .home-carte > i {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 18px;
  }

  body.page-home .home-carte strong {
    font-size: 12.5px;
  }

  body.page-home .home-carte span {
    font-size: 11px;
  }

  body.page-home .home-carte--gps {
    display: none;
  }

  /* Capture de l'application : sur un téléphone, l'écran reste entier ; pour le lire, on
     l'agrandit (visionneuse à taille réelle, galerie.js). */
  body.page-home .home-galerie__agrandir {
    right: 8px;
    bottom: 8px;
    padding: 5px 9px 5px 7px;
    font-size: 11.5px;
  }

  body.page-home .home-devices__grille {
    --gap: 10px;
  }

  body.page-home .device__tags span {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-home *,
  body.page-home *::before,
  body.page-home *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .js-reveal body.page-home [data-reveal] {
    opacity: 1;
    transform: none;
  }

  body.page-home .home-defile__rangee {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
  }

  body.page-home .home-defile__rangee [aria-hidden="true"] {
    display: none;
  }

  body.page-home .home-mock {
    transform: none;
  }
}