/* =====================================================================
   JL APP — SYSTÈME DE DESIGN
   =====================================================================

   Ce fichier ne « met pas en forme » : il pose un système. Une échelle
   de typographie, une échelle d'espaces, une palette, des états. Tout
   le reste en découle, et c'est ce qui fait qu'une page ajoutée demain
   ressemblera aux autres sans qu'on y pense.

   ORDRE
     1. Jetons          couleurs, typographie, espaces, ombres
     2. Base            remise à zéro et rythme vertical
     3. Typographie
     4. Éléments        boutons, liens, champs
     5. Structure       conteneurs, sections, grilles
     6. En-tête         barre, méga-menu, tiroir mobile
     7. Composants      cartes, carte métier, bandeaux, FAQ
     8. Pied de page
     9. Mouvement       transitions, respect des préférences système
   ===================================================================== */

/* ---------------------------------------------------------------------
   POLICES — auto-hébergées, sous-ensemble latin, à graisse variable.
   Deux fichiers au lieu de quatre : une police variable couvre toutes
   les graisses. 86 Ko pour l'ensemble.
   ------------------------------------------------------------------ */
@font-face{
  font-family:"Montserrat";
  src:url("/assets/fonts/montserrat-latin-var.woff2") format("woff2-variations");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Open Sans";
  src:url("/assets/fonts/open-sans-latin-var.woff2") format("woff2-variations");
  font-weight:300 800; font-style:normal; font-display:swap;
}

/* =====================================================================
   1. JETONS
   ================================================================== */
:root{
  /* Palette. L'encre est un violet très sombre, pas un noir : il réchauffe
     les grands aplats et évite l'effet « tableur ». */
  --ink:        #17131F;
  --ink-2:      #241E30;
  --ink-3:      #3A3348;
  --stone:      #6E6879;
  --stone-2:    #9A93A5;
  --line:       #E6E2DC;
  --line-2:     #F0EDE8;
  --paper:      #FCFBF9;
  --paper-2:    #F5F2ED;
  --white:      #FFFFFF;

  --brand:      #E5007E;
  --brand-deep: #B00062;
  --brand-soft: #FDEAF4;
  --blue:       #1B72B8;
  --blue-soft:  #E8F1F9;
  --gold:       #C99A2E;

  /* Typographie fluide. clamp() évite les paliers brutaux entre tailles
     d'écran : le titre grandit continûment, il ne saute pas. */
  --display: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --sans:    "Open Sans", ui-sans-serif, system-ui, sans-serif;

  --t-xs:  .78rem;
  --t-sm:  .885rem;
  --t-md:  1rem;
  --t-lg:  clamp(1.06rem, .98rem + .35vw, 1.22rem);
  --t-xl:  clamp(1.35rem, 1.2rem + .7vw, 1.7rem);
  --t-2xl: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);
  --t-3xl: clamp(2.2rem,  1.7rem + 2.4vw, 3.6rem);
  --t-4xl: clamp(2.6rem,  1.9rem + 3.4vw, 4.6rem);

  /* Espaces : une seule échelle, pas de valeurs au jugé. */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 88px; --s-10: 120px;

  --wrap: 1200px;
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px;

  /* Ombres : très diffuses et peu opaques. Une ombre qu'on remarque est
     une ombre ratée. */
  --sh-1: 0 1px 2px rgba(23,19,31,.05), 0 2px 8px rgba(23,19,31,.04);
  --sh-2: 0 4px 12px rgba(23,19,31,.07), 0 12px 32px rgba(23,19,31,.06);
  --sh-3: 0 10px 24px rgba(23,19,31,.10), 0 28px 70px rgba(23,19,31,.10);
  --sh-brand: 0 8px 26px rgba(229,0,126,.28);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .22s;
}

/* =====================================================================
   2. BASE
   ================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--t-md); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-deep)}
::selection{background:var(--brand);color:#fff}

/* Accessibilité : un focus visible, mais seulement au clavier. */
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* =====================================================================
   3. TYPOGRAPHIE
   ================================================================== */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.1;
  letter-spacing:-.022em;margin:0 0 var(--s-4);color:var(--ink)}
h1{font-size:var(--t-4xl);letter-spacing:-.032em}
h2{font-size:var(--t-3xl);letter-spacing:-.026em}
h3{font-size:var(--t-xl)}
h4{font-size:var(--t-lg);font-weight:600}
p{margin:0 0 var(--s-4)}
.lead{font-size:var(--t-lg);color:var(--ink-3);line-height:1.6;max-width:64ch}
.muted{color:var(--stone)}
.eyebrow{display:inline-flex;align-items:center;gap:var(--s-2);
  font-family:var(--display);font-size:var(--t-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--brand);margin-bottom:var(--s-3)}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--brand);border-radius:2px}

/* =====================================================================
   4. ÉLÉMENTS
   ================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  font-family:var(--display);font-weight:600;font-size:var(--t-sm);
  padding:14px 26px;border-radius:var(--r-pill);border:1.5px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-brand{background:var(--brand);color:#fff;box-shadow:var(--sh-brand)}
.btn-brand:hover{background:var(--brand-deep);color:#fff;box-shadow:0 12px 32px rgba(229,0,126,.34)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--ink-2);color:#fff}
.btn-line{border-color:var(--line);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--ink);color:var(--ink);background:var(--white)}
.btn-ghost-light{border-color:rgba(255,255,255,.28);color:#fff}
.btn-ghost-light:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.btn-sm{padding:10px 18px;font-size:var(--t-xs)}
.btn-lg{padding:17px 34px;font-size:var(--t-md)}

/* Lien qui se souligne à l'approche, plutôt qu'un soulignement permanent. */
.lien{color:var(--ink);font-weight:600;position:relative}
.lien::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:2px;
  background:var(--brand);transition:right var(--dur) var(--ease)}
.lien:hover{color:var(--ink)}
.lien:hover::after{right:0}

/* =====================================================================
   5. STRUCTURE
   ================================================================== */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s-5)}
@media(min-width:900px){.wrap{padding-inline:var(--s-6)}}

.section{padding-block:var(--s-9)}
.section-sm{padding-block:var(--s-8)}
.section-alt{background:var(--paper-2)}
.section-ink{background:var(--ink);color:#fff}
.section-ink h1,.section-ink h2,.section-ink h3{color:#fff}
.section-ink .lead{color:rgba(255,255,255,.76)}
.section-ink .muted{color:rgba(255,255,255,.55)}

.grid{display:grid;gap:var(--s-5)}
.g-2{grid-template-columns:1fr}
.g-3{grid-template-columns:1fr}
.g-4{grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.g-2{grid-template-columns:repeat(2,1fr)}.g-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.g-3{grid-template-columns:repeat(3,1fr)}.g-4{grid-template-columns:repeat(4,1fr)}}

.split{display:grid;gap:var(--s-7);align-items:center;grid-template-columns:1fr}
@media(min-width:960px){.split{grid-template-columns:1.05fr .95fr;gap:var(--s-8)}}

/* =====================================================================
   6. EN-TÊTE, MÉGA-MENU, TIROIR
   ================================================================== */
.header{position:sticky;top:0;z-index:100;background:rgba(252,251,249,.86);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.header.scrolled{border-bottom-color:var(--line);box-shadow:var(--sh-1)}
.header .wrap{display:flex;align-items:center;gap:var(--s-5);min-height:74px}

.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);
  font-weight:700;font-size:1.06rem;color:var(--ink);letter-spacing:-.02em}
.brand:hover{color:var(--ink)}
.brand svg{flex:none}

.nav{display:none;margin-left:auto;align-items:center;gap:var(--s-1)}
@media(min-width:1040px){.nav{display:flex}}
.nav > a,.nav > .has-mega > button{
  font-family:var(--display);font-weight:600;font-size:var(--t-sm);color:var(--ink);
  background:none;border:0;cursor:pointer;padding:10px 14px;border-radius:var(--r-sm);
  display:inline-flex;align-items:center;gap:6px;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.nav > a:hover,.nav > .has-mega > button:hover{background:var(--paper-2);color:var(--ink)}
.nav .chev{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--dur) var(--ease)}
.has-mega[data-open="1"] .chev{transform:rotate(-135deg) translate(-3px,-3px)}
.has-mega[data-open="1"] > button{background:var(--paper-2)}

/* Le méga-menu. Il est dans le flux, en position absolue sous l'en-tête :
   pas de calcul de position en JavaScript, donc rien qui se décale. */
.mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--white);border-top:1px solid var(--line);
  box-shadow:var(--sh-3);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
}
.has-mega[data-open="1"] .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega-in{display:grid;gap:var(--s-6);padding-block:var(--s-6) var(--s-7);
  grid-template-columns:1fr;align-items:start}
@media(min-width:1040px){.mega-in{grid-template-columns:1fr 1fr 1fr .9fr}}
.mega-col h4{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.12em;
  color:var(--stone);font-weight:700;margin-bottom:var(--s-3)}
.mega-link{display:flex;gap:var(--s-3);align-items:center;padding:9px 10px;margin-inline:-10px;
  border-radius:var(--r-sm);transition:background var(--dur) var(--ease)}
.mega-link:hover{background:var(--paper-2)}
.mega-link img{width:46px;height:34px;object-fit:cover;border-radius:6px;flex:none;box-shadow:var(--sh-1)}
.mega-link b{display:block;font-family:var(--display);font-weight:600;font-size:var(--t-sm);color:var(--ink);line-height:1.3}
.mega-link span{display:block;font-size:var(--t-xs);color:var(--stone);line-height:1.4}
.mega-promo{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:var(--s-5);align-self:stretch;
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-4)}
.mega-promo h4{color:rgba(255,255,255,.6)}
.mega-promo p{color:rgba(255,255,255,.8);font-size:var(--t-sm);margin:0}
.mega-promo strong{font-family:var(--display);font-size:var(--t-lg);color:#fff;display:block;margin-bottom:6px}

/* Bouton hamburger + tiroir mobile */
.burger{margin-left:auto;display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;border:0;background:none;cursor:pointer;padding:0 10px}
@media(min-width:1040px){.burger{display:none}}
.burger i{display:block;height:2px;background:var(--ink);border-radius:2px;
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
body.menu-ouvert .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-ouvert .burger i:nth-child(2){opacity:0}
body.menu-ouvert .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.tiroir{position:fixed;inset:74px 0 0;background:var(--paper);z-index:99;
  overflow-y:auto;padding:var(--s-5) 0 var(--s-8);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur)}
body.menu-ouvert .tiroir{opacity:1;visibility:visible;transform:none}
body.menu-ouvert{overflow:hidden}
@media(min-width:1040px){.tiroir{display:none}}
.tiroir h4{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--stone);margin:var(--s-5) 0 var(--s-2)}
.tiroir a{display:block;padding:12px 0;border-bottom:1px solid var(--line-2);
  font-family:var(--display);font-weight:600;color:var(--ink)}
.tiroir .metiers-mini{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s-4)}

/* =====================================================================
   7. COMPOSANTS
   ================================================================== */
.hero{position:relative;overflow:hidden;background:var(--ink);color:#fff;
  padding-block:var(--s-9) var(--s-10)}
.hero::before{content:"";position:absolute;width:760px;height:760px;right:-200px;top:-320px;
  background:radial-gradient(circle,rgba(229,0,126,.34),transparent 62%);pointer-events:none}
.hero::after{content:"";position:absolute;width:520px;height:520px;left:-180px;bottom:-280px;
  background:radial-gradient(circle,rgba(27,114,184,.28),transparent 64%);pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.hero h1{color:#fff;max-width:17ch}
.hero .lead{color:rgba(255,255,255,.78);max-width:56ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
.hero-note{margin-top:var(--s-5);font-size:var(--t-sm);color:rgba(255,255,255,.55)}

.carte{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-5);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.carte:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:transparent}
.carte h3{font-size:var(--t-lg);margin-bottom:var(--s-2)}
.carte p{color:var(--stone);font-size:var(--t-sm);margin:0}

/* Carte métier : l'illustration fait le travail. */
.mcard{display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.mcard:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:transparent}
.mcard-img{aspect-ratio:3/2;overflow:hidden;background:var(--paper-2)}
.mcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.mcard:hover .mcard-img img{transform:scale(1.045)}
.mcard-txt{padding:var(--s-4) var(--s-5) var(--s-5)}
.mcard-txt b{display:block;font-family:var(--display);font-weight:700;font-size:var(--t-lg);
  color:var(--ink);margin-bottom:4px;letter-spacing:-.015em}
.mcard-txt span{display:block;font-size:var(--t-sm);color:var(--stone)}
.mcard-txt .fleche{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s-3);
  font-family:var(--display);font-weight:600;font-size:var(--t-sm);color:var(--brand)}
.mcard-txt .fleche svg{transition:transform var(--dur) var(--ease)}
.mcard:hover .fleche svg{transform:translateX(4px)}

/* Liste à puces sobre */
.liste{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.liste li{position:relative;padding-left:32px;color:var(--ink-3)}
.liste li::before{content:"";position:absolute;left:0;top:9px;width:18px;height:18px;border-radius:50%;
  background:var(--brand-soft)}
.liste li::after{content:"";position:absolute;left:5.5px;top:14px;width:7px;height:4px;
  border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(-45deg)}
.section-ink .liste li{color:rgba(255,255,255,.82)}
.section-ink .liste li::before{background:rgba(229,0,126,.24)}

/* Objections, en vis-à-vis */
.objection{border-left:3px solid var(--brand);padding-left:var(--s-4)}
.objection .q{font-family:var(--display);font-weight:600;font-size:var(--t-lg);
  color:var(--ink);margin:0 0 var(--s-2);letter-spacing:-.015em}
.objection .a{color:var(--stone);margin:0}

/* FAQ */
.faq details{border-bottom:1px solid var(--line);padding:var(--s-4) 0}
.faq summary{list-style:none;cursor:pointer;font-family:var(--display);font-weight:600;
  font-size:var(--t-lg);color:var(--ink);display:flex;justify-content:space-between;
  align-items:center;gap:var(--s-4);letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:11px;height:11px;border-right:2px solid var(--brand);
  border-bottom:2px solid var(--brand);transform:rotate(45deg);transition:transform var(--dur) var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{margin:var(--s-3) 0 0;color:var(--stone);max-width:72ch}

/* Bandeau de rappel */
.cta{background:var(--ink);border-radius:var(--r-xl);padding:var(--s-8) var(--s-6);
  text-align:center;color:#fff;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:auto -80px -160px auto;width:420px;height:420px;
  background:radial-gradient(circle,rgba(229,0,126,.4),transparent 62%)}
.cta > *{position:relative}
.cta h2{color:#fff;max-width:20ch;margin-inline:auto}
.cta p{color:rgba(255,255,255,.72);max-width:54ch;margin-inline:auto}

/* Fil d'Ariane */
.fil{font-size:var(--t-sm);color:var(--stone);padding-top:var(--s-5)}
.fil a{color:var(--stone)} .fil a:hover{color:var(--brand)}
.fil span[aria-hidden]{padding-inline:6px;color:var(--stone-2)}

/* Chiffres */
.stat b{display:block;font-family:var(--display);font-weight:700;font-size:var(--t-2xl);
  color:var(--brand);letter-spacing:-.02em;line-height:1}
.stat span{display:block;font-size:var(--t-sm);color:var(--stone);margin-top:6px}

/* Bandeau de liens entre métiers */
.autres{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.autres a{display:inline-block;padding:8px 15px;border:1px solid var(--line);border-radius:var(--r-pill);
  font-size:var(--t-sm);color:var(--ink-3);background:var(--white);
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.autres a:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}

/* =====================================================================
   8. PIED DE PAGE
   ================================================================== */
.footer{background:var(--ink);color:rgba(255,255,255,.62);padding-block:var(--s-8) var(--s-6);font-size:var(--t-sm)}
.footer a{color:rgba(255,255,255,.82)}
.footer a:hover{color:#fff}
.footer h4{color:#fff;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.12em;margin-bottom:var(--s-3)}
.footer-grid{display:grid;gap:var(--s-6);grid-template-columns:1fr}
@media(min-width:760px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footer-bas{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);justify-content:space-between;align-items:center}

/* =====================================================================
   9. MOUVEMENT
   ================================================================== */
/* Apparition au défilement.
   LE CONTENU EST VISIBLE PAR DÉFAUT. Il n'est masqué que si la classe
   « js » a été posée sur <html> — c'est-à-dire si le JavaScript tourne
   et pourra donc le révéler. Sans cette précaution, une erreur de script,
   un bloqueur ou un navigateur ancien laissaient la moitié de la page
   invisible, définitivement, sans aucun message. */
.js .reveal{opacity:0;transform:translateY(14px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.js .reveal.vu{opacity:1;transform:none}

/* Une animation qui donne la nausée à quelqu'un n'est pas une animation
   réussie. Le système le signale, on l'écoute. */
@media(prefers-reduced-motion:reduce){
  /* animation-iteration-count MANQUAIT, et c'etait un piege en embuscade :
     une animation « infinite » n'est pas arretee par une duree de 0,01 ms,
     elle reboucle cent mille fois par seconde — pour exactement les
     personnes que cette regle protege. Le film du bandeau ne declare
     aucune animation par defaut, il n'en depend donc pas ; mais la
     prochaine animation du site en dependrait. */
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
}

/* =====================================================================
   PAGE DE DÉMONSTRATION — /demo
   Les captures sont de vraies images de l'application. Le cadre de
   téléphone est dessiné en CSS : rien de plus à télécharger, et il
   s'adapte à la largeur disponible.
   ================================================================== */
.demo-liste{display:flex;flex-direction:column;gap:clamp(48px,8vw,96px);padding-block:clamp(16px,3vw,32px)}

.demo-ecran{display:grid;gap:clamp(24px,4vw,48px);align-items:center;
            grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){
  .demo-ecran{grid-template-columns:minmax(0,340px) minmax(0,1fr)}
  .demo-ecran--inverse{grid-template-columns:minmax(0,1fr) minmax(0,340px)}
  .demo-ecran--inverse .demo-tel{order:2}
  .demo-ecran--inverse .demo-texte{order:1}
}

.demo-tel{display:flex;justify-content:center}
.demo-tel-cadre{
  width:min(280px,72vw);padding:10px;border-radius:38px;
  background:linear-gradient(160deg,#3a3440,#1b1820);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.demo-tel-cadre img{display:block;width:100%;height:auto;border-radius:28px;
                    background:#1a1614}

.demo-texte h2{font-size:clamp(22px,3.2vw,30px);margin:0 0 12px}
.demo-texte p{margin:0 0 14px;line-height:1.65;max-width:56ch}
.demo-atout{display:flex;align-items:flex-start;gap:9px;font-weight:600;
            line-height:1.5}
.demo-atout svg{flex:none;margin-top:3px}

.demo-cta{text-align:center;padding:clamp(28px,5vw,56px) clamp(20px,4vw,48px);
          border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
          border:1px solid rgba(255,255,255,.09)}
.demo-cta h2{font-size:clamp(22px,3.4vw,32px);margin:0 0 12px}
.demo-cta p{margin:0 auto 24px;max-width:52ch;line-height:1.65}
.demo-cta-boutons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Sans JavaScript comme avec, la page doit être entièrement lisible :
   aucune de ces règles ne masque quoi que ce soit au départ. */

/* =====================================================================
   BANDE DE TÉLÉPHONES — réutilisée sur l'accueil, les pages métier et
   la page de démonstration.
   Défilement horizontal NATIF sur mobile : aucun script. Une bande qui
   dépend d'un JavaScript est une bande qui disparaît quand il ne charge
   pas — et c'est justement la partie qui doit donner envie.
   ================================================================== */
.ecrans-bande{display:flex;gap:clamp(16px,3vw,32px);margin-top:clamp(28px,4vw,44px);
              overflow-x:auto;scroll-snap-type:x mandatory;
              padding-bottom:12px;-webkit-overflow-scrolling:touch}
.ecrans-bande::-webkit-scrollbar{height:6px}
.ecrans-bande::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}

.ecran-item{flex:0 0 auto;width:min(240px,64vw);margin:0;scroll-snap-align:center}
.ecran-item figcaption{margin-top:14px;text-align:center}
.ecran-item figcaption b{display:block;font-size:var(--t-md);margin-bottom:4px}
.ecran-item figcaption span{display:block;font-size:var(--t-sm);color:var(--stone);line-height:1.5}

@media (min-width:900px){
  .ecrans-bande{overflow:visible;justify-content:center}
  .ecran-item{width:min(260px,30%)}
}

/* =====================================================================
   12. LE DEFILE DU BANDEAU
   ---------------------------------------------------------------------
   Six captures de l'application, qui se succedent dans un cadre de
   telephone, avec leur legende dessous. Rien d'autre.

   Pas de decor dessine : une version precedente ajoutait des objets au
   trait par-dessus, et le resultat etait grossier. Ce qui vaut quelque
   chose ici, ce sont les vraies captures ; tout ce qu'on pose a cote
   leur fait concurrence.

   TROIS REGLES
   1. Aucune animation par defaut. Le mouvement est AJOUTE dans
      @media (prefers-reduced-motion: no-preference). La regle globale
      de ce fichier ne neutralise pas animation-iteration-count : une
      animation infinie y rebouclerait sans fin pour les personnes
      qu'elle protege.
   2. Seule opacity est animee. Rien d'autre, nulle part.
   3. Une seule horloge : 24s, lineaire, pour tous les elements.
   ===================================================================== */

.hero-grid{display:grid;gap:var(--s-7);align-items:center;grid-template-columns:1fr}
@media(min-width:960px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:var(--s-8)}}
.hero-film-bloc{min-width:0}

.defile{position:relative;display:flex;flex-direction:column;align-items:center;width:100%}
.defile-tel{width:clamp(230px,24vw,290px)}
.defile-ecran{position:relative}
.defile-vue{position:absolute;inset:0;opacity:0}
.defile-vue:first-child{position:relative}
.defile-vue img{display:block;width:100%;height:auto;border-radius:28px;background:#1a1614}

/* width:100% est indispensable : les legendes sont en position absolue,
   elles ne donnent donc aucune largeur a leur conteneur. Dans une colonne
   flex centree, le bloc se reduirait a zero et le texte sortirait un mot
   par ligne. */
.defile-legende{position:relative;width:100%;margin:var(--s-5) auto 0;max-width:40ch;
  text-align:center;min-height:7.8em}
.defile-legende figcaption{position:absolute;inset:0;opacity:0}
.defile-legende b{display:block;font-family:var(--display);font-size:var(--t-md);
  font-weight:700;color:#fff;margin-bottom:5px}
.defile-legende span{display:block;font-size:var(--t-sm);color:rgba(255,255,255,.72);line-height:1.55}

/* Les points de progression : six reperes, pour qu'on voie qu'il y a
   une suite et combien il en reste. */
.defile-points{display:flex;gap:7px;justify-content:center;margin-top:var(--s-4)}
.defile-points i{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.22}

.defile-mention{margin:var(--s-4) 0 0;font-size:var(--t-xs);color:rgba(255,255,255,.4);
  text-align:center;position:relative}

/* ----- ETAT DE REPOS : la premiere capture et sa legende. C'est aussi
   ce que voit une personne qui a demande moins de mouvement. ----- */
.defile-vue:first-child{opacity:1}
.defile-legende figcaption:first-child{opacity:1}
.defile-points i:first-child{opacity:.75}

@media (prefers-reduced-motion: no-preference){
.defile-vue,.defile-legende figcaption,.defile-points i{
  animation-duration:24s;animation-timing-function:linear;
  animation-iteration-count:infinite;animation-delay:0s;animation-fill-mode:both}
.defile-vue:first-child,.defile-legende figcaption:first-child{opacity:0}
.defile-points i:first-child{opacity:.22}
.defile-vue:nth-child(1){animation-name:defile1}
@keyframes defile1{0%{opacity:1} 14.1667%{opacity:1} 16.6667%{opacity:0} 97.5%{opacity:0} 100%{opacity:1}}
.defile-legende figcaption:nth-child(1){animation-name:defile1}
.defile-points i:nth-child(1){animation-name:point1}
@keyframes point1{0%,0%{opacity:.22} 0%,14.1667%{opacity:.75} 16.6667%,100%{opacity:.22}}
.defile-vue:nth-child(2){animation-name:defile2}
@keyframes defile2{0%,14.1667%{opacity:0} 16.6667%{opacity:1} 30.8333%{opacity:1} 33.3333%,100%{opacity:0}}
.defile-legende figcaption:nth-child(2){animation-name:defile2}
.defile-points i:nth-child(2){animation-name:point2}
@keyframes point2{0%,14.1667%{opacity:.22} 16.6667%,30.8333%{opacity:.75} 33.3333%,100%{opacity:.22}}
.defile-vue:nth-child(3){animation-name:defile3}
@keyframes defile3{0%,30.8333%{opacity:0} 33.3333%{opacity:1} 47.5%{opacity:1} 50%,100%{opacity:0}}
.defile-legende figcaption:nth-child(3){animation-name:defile3}
.defile-points i:nth-child(3){animation-name:point3}
@keyframes point3{0%,30.8333%{opacity:.22} 33.3333%,47.5%{opacity:.75} 50%,100%{opacity:.22}}
.defile-vue:nth-child(4){animation-name:defile4}
@keyframes defile4{0%,47.5%{opacity:0} 50%{opacity:1} 64.1667%{opacity:1} 66.6667%,100%{opacity:0}}
.defile-legende figcaption:nth-child(4){animation-name:defile4}
.defile-points i:nth-child(4){animation-name:point4}
@keyframes point4{0%,47.5%{opacity:.22} 50%,64.1667%{opacity:.75} 66.6667%,100%{opacity:.22}}
.defile-vue:nth-child(5){animation-name:defile5}
@keyframes defile5{0%,64.1667%{opacity:0} 66.6667%{opacity:1} 80.8333%{opacity:1} 83.3333%,100%{opacity:0}}
.defile-legende figcaption:nth-child(5){animation-name:defile5}
.defile-points i:nth-child(5){animation-name:point5}
@keyframes point5{0%,64.1667%{opacity:.22} 66.6667%,80.8333%{opacity:.75} 83.3333%,100%{opacity:.22}}
.defile-vue:nth-child(6){animation-name:defile6}
@keyframes defile6{0%,80.8333%{opacity:0} 83.3333%{opacity:1} 97.5%{opacity:1} 100%,100%{opacity:0}}
.defile-legende figcaption:nth-child(6){animation-name:defile6}
.defile-points i:nth-child(6){animation-name:point6}
@keyframes point6{0%,80.8333%{opacity:.22} 83.3333%,97.5%{opacity:.75} 100%,100%{opacity:.22}}
}

@media(max-width:959px){
  .hero-film-bloc{margin-top:var(--s-7)}
  .defile-tel{width:min(250px,56vw)}
  .defile-legende{min-height:10.5em}
}
@media(max-width:959px) and (max-height:620px){
  .defile-legende,.defile-mention,.defile-points{display:none}
}