/* ==============================================================================
   Ipplied — site vitrine.

   Deux héritages assumés :
   — la MARQUE vient de l'app (bleu #073698, Plus Jakarta Sans, le saut du point
     de saut-logo.tsx, les huit couleurs de statut de model.ts) ;
   — la MISE EN SCÈNE vient du site gCompté : fond sombre continu avec halos
     fixes et grain, navbar en pilule de verre, sections empilées en feuilles
     (radius 48px en tête, chevauchement négatif), colonne de fonctionnalités
     avec téléphone collant, notifications pivotées, FAQ en accordéon.

   Le site est mono-thème, comme sa référence : un monde sombre bleu nuit dans
   lequel les sections claires viennent respirer.
   ============================================================================ */

:root {
  /* Le monde sombre */
  --nuit-1: #070C18;
  --nuit-2: #0B1326;
  --nuit-3: #132248;
  --bleu: #073698;
  --bleu-clair: #0A46BE;

  /* L'accent lisible sur fond de nuit — le jumeau sombre du bleu Ipplied */
  --accent: #7FA8EC;
  --accent-doux: #C3D7F8;
  --halo: rgba(127, 168, 236, 0.34);

  /* Le monde clair — le fond et l'encre de l'app */
  --clair: #F1F4F7;
  --clair-2: #FFFFFF;
  --encre: #131A22;
  --encre-douce: #5C6875;
  --encre-tres-douce: #8B98A5;

  /* Les huit couleurs de statut, version claire (model.ts) */
  --s-grey: #8B98A5;   --s-grey-f: #EDF0F3;
  --s-sky: #4A7FA8;    --s-sky-f: #E6EEF5;
  --s-amber: #B9843A;  --s-amber-f: #F8F0E1;
  --s-violet: #7E71B4; --s-violet-f: #EEECF8;
  --s-indigo: #5A6BA8; --s-indigo-f: #E9ECF7;
  --s-teal: #2F8A88;   --s-teal-f: #E1EFEF;
  --s-rose: #A97A76;   --s-rose-f: #F5EBEA;
  --s-green: #2E8B68;  --s-green-f: #E3F0EA;

  --verre: rgba(255, 255, 255, 0.06);
  --verre-bord: rgba(255, 255, 255, 0.12);

  /* Le jaune de Buy Me a Coffee. Il ne sert qu'à leur bouton : c'est la seule
     couleur du site qui n'appartienne pas à Ipplied, et elle reste cantonnée
     à l'objet qui la justifie. */
  --cafe: #FFDD00;

  /* Trois familles, trois rôles — comme la référence.
     --display : Bricolage Grotesque, grotesque à optique variable. Elle porte
                 les titres, et elle seule : le mot-symbole « ipplied » reste
                 en Plus Jakarta Sans 800, parce que c'est la marque.
     --texte   : Plus Jakarta Sans, celle de l'app.
     --mono    : IBM Plex Mono, celle des chiffres de l'app. */
  --display: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
  --texte: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --rayon-feuille: 48px;
}

* { box-sizing: border-box; }

/* Le site est mono-thème : on le déclare, pour que l'ascenseur et les rares
   contrôles natifs (les <details> de la FAQ) s'accordent au fond de nuit. */
:root { color-scheme: dark; }

img, svg, video { max-width: 100%; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--nuit-1);
  color: #FFFFFF;
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.6;
  /* `clip` et non `hidden` : `overflow-x: hidden` rend implicitement l'axe
     vertical défilable, ce qui fait du body le conteneur de défilement — et
     détache les éléments `position: sticky` du viewport. `clip` coupe le
     débordement sans créer ce contexte. La ligne `hidden` reste en repli pour
     les navigateurs qui ignoreraient `clip`. */
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* Grain léger sur toute la page, comme sur le site gCompté. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  z-index: 60;
  pointer-events: none;
  opacity: 0.5;
}

h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }

::selection { background: var(--accent); color: var(--nuit-1); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
.sur-clair :focus-visible { outline-color: var(--bleu); }

/* ─── Le logo, et son saut ─────────────────────────────────────────────────
   Transposition des sept segments de src/components/saut-logo.tsx : il
   s'accroupit, décolle en faisant un tour sur lui-même, retombe et rebondit
   deux fois pendant que le corps encaisse le choc.                        */

.marque { display: block; overflow: visible; }
.marque path { fill: currentColor; }
.m-corps, .m-point { transform-box: fill-box; }
.m-corps { transform-origin: bottom center; }
.m-point { transform-origin: center; }

.marque--anime .m-corps { animation: encaisse 1600ms both; }
.marque--anime .m-point { animation: saut 1600ms both; }

@keyframes saut {
  0%, 12.5%   { transform: translateY(0) rotate(0deg) scale(1, 1); }
  20.6%       { transform: translateY(50px) rotate(0deg) scale(1.2, 0.8); }
  39.4%       { transform: translateY(-550px) rotate(190deg) scale(1, 1); }
  55.6%       { transform: translateY(0) rotate(360deg) scale(1.14, 0.86); }
  60%         { transform: translateY(-40px) rotate(360deg) scale(1, 1); }
  64.4%       { transform: translateY(-132px) rotate(360deg) scale(1, 1); }
  73.8%       { transform: translateY(0) rotate(360deg) scale(1.06, 0.94); }
  79.4%       { transform: translateY(-44px) rotate(360deg) scale(1, 1); }
  85.6%, 100% { transform: translateY(0) rotate(360deg) scale(1, 1); }
}

@keyframes encaisse {
  0%, 53%   { transform: scaleY(1); }
  57%       { transform: scaleY(0.955); }
  63%       { transform: scaleY(1.015); }
  70%, 100% { transform: scaleY(1); }
}

/* Le mot-symbole, écrit lettre à lettre au pas de 52 ms du splash. */
.mot {
  font-family: var(--texte);
  font-weight: 800;
  letter-spacing: -0.038em;
  line-height: 1;
  display: inline-flex;
}
.mot--anime span { animation: lettre 300ms cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.mot--anime span:nth-child(1) { animation-delay: 980ms; }
.mot--anime span:nth-child(2) { animation-delay: 1032ms; }
.mot--anime span:nth-child(3) { animation-delay: 1084ms; }
.mot--anime span:nth-child(4) { animation-delay: 1136ms; }
.mot--anime span:nth-child(5) { animation-delay: 1188ms; }
.mot--anime span:nth-child(6) { animation-delay: 1240ms; }
.mot--anime span:nth-child(7) { animation-delay: 1292ms; }

@keyframes lettre {
  from { opacity: 0; transform: translateY(0.3em) scale(0.86); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── Navbar en pilule de verre ────────────────────────────────────────── */

.navbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding: 14px 20px;
}
.navbar-inner {
  max-width: 1160px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 10px 10px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background 350ms ease, border-color 350ms ease, box-shadow 350ms ease;
}
.navbar--colle .navbar-inner {
  background: rgba(9, 16, 34, 0.74);
  border-color: var(--verre-bord);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.navbar-marque {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #FFFFFF;
}
.navbar-marque .marque { width: 21px; height: 21px; }
.navbar-marque .mot { font-size: 19px; }

.navbar-liens {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.6vw, 30px);
}
.navbar-liens a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  transition: color 200ms ease;
}
.navbar-liens a:hover { color: #FFFFFF; }

/* Buy Me a Coffee.
   Le bouton officiel de leur service est une image servie depuis leur CDN : la
   CSP du site la bloquerait, et la charger transmettrait l'adresse IP de chaque
   visiteur à un tiers — exactement ce que l'auto-hébergement des polices évite.
   Il est donc redessiné ici, et reste un simple lien sortant : rien n'est
   chargé tant que personne ne clique.

   Le jaune de la marque n'intervient qu'en touche — sur l'icône au pied, au
   survol dans la navbar. Un aplat jaune tiendrait tête au bleu, qui est la
   couleur du site. */
.bouton-cafe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--verre-bord);
  background: var(--verre);
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  flex: none;
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease, transform 200ms ease;
}
.bouton-cafe svg { width: 17px; height: 17px; }

/* La bulle au survol, reprise du navbar-qr-pop de gCompté. */
.cafe-wrap { position: relative; display: inline-flex; }

.bulle-cafe {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  padding: 10px 15px 11px;
  border-radius: 14px;
  background: rgba(9, 16, 34, 0.95);
  border: 1px solid var(--verre-bord);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
  white-space: nowrap;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -8px) scale(0.96);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity 250ms ease, transform 250ms ease;
}

/* Pont invisible par-dessus les 12 px qui séparent le bouton de la bulle :
   sans lui, le pointeur quitte la zone de survol en descendant et la bulle
   clignote au moment précis où l'on essaie de l'atteindre. */
.bulle-cafe::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

/* `focus-within` autant que `hover` : un survol seul laisserait la bulle
   invisible à qui navigue au clavier. */
.cafe-wrap:hover .bulle-cafe,
.cafe-wrap:focus-within .bulle-cafe {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  pointer-events: auto;
}

.bulle-cafe b { display: block; font-size: 13.5px; font-weight: 700; color: #FFFFFF; }
.bulle-cafe span {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.5);
}
.bouton-cafe:hover {
  color: var(--cafe);
  border-color: rgba(255, 221, 0, 0.45);
  background: rgba(255, 221, 0, 0.1);
  transform: translateY(-2px);
}

/* La variante du pied : le même objet, avec son libellé. */
.bouton-cafe--texte {
  width: auto;
  height: auto;
  gap: 9px;
  padding: 10px 18px 10px 15px;
  font-size: 13.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 16px;
}
.bouton-cafe--texte svg { width: 16px; height: 16px; color: var(--cafe); }
.bouton-cafe--texte:hover { color: #FFFFFF; }

.navbar-cta {
  background: var(--accent);
  color: var(--nuit-1);
  font-weight: 700;
  font-size: 14.5px;
  padding: 10px 20px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.navbar-cta:hover {
  color: var(--nuit-1);
  background: var(--accent-doux);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px var(--halo);
}

/* ─── Hero ─────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 28px;
  max-width: 1240px;
  margin-inline: auto;
  padding: 132px 32px 92px;
}

/* Halos fixes : le fond ne défile pas, les sections passent devant. */
.hero-fond {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 20% 32%, var(--nuit-3), transparent),
    radial-gradient(ellipse 55% 70% at 82% 52%, rgba(10, 70, 190, 0.5), transparent),
    radial-gradient(ellipse 45% 45% at 55% 82%, rgba(7, 54, 152, 0.28), transparent);
}

.hero-texte { position: relative; z-index: 10; max-width: 620px; }

/* Le logo ne se répète pas ici : il est déjà dans la navbar, qui porte
   désormais la signature animée (le saut du point, puis le mot qui s'écrit).
   Elle ne coûte alors aucune hauteur au-dessus du titre. */
.hero-titre {
  font-family: var(--display);
  /* Plafonné à 3,4 rem, et non 4,9 : à la taille précédente, une accroche de
     cette longueur tombait sur quatre lignes et repoussait le bouton sous la
     ligne de flottaison. Le hero gagne à être lu d'un coup, pas à crier. */
  font-size: clamp(2.3rem, 4.4vw, 3.4rem);
  font-weight: 700;
  font-variation-settings: "opsz" 54;
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}
.hero-titre span {
  background: linear-gradient(100deg, var(--accent) 10%, var(--accent-doux) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


.hero-description {
  font-size: 1.04rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
  max-width: 490px;
  margin-bottom: 22px;
}

/* Lève l'objection « où vont mes données ? » juste avant le bouton. */
.hero-confiance {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 28px;
  font-size: 0.87rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.58);
}
.hero-confiance svg { flex: none; color: var(--accent); width: 16px; height: 16px; }

.cta-rangee {
  display: flex;
  align-items: center;
  gap: 16px 26px;
  flex-wrap: wrap;
}

/* Les badges de sortie.
   Ce sont des <span>, pas des <a>, et ils ne portent donc ni `cursor: pointer`
   ni translation au survol : tant que la date de sortie n'est pas connue, il
   n'y a rien à ouvrir, et l'aspect d'un bouton le promettrait. Le verre les
   distingue aussi des deux boutons pleins qu'ils remplaceront le jour venu. */
.badge-store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px 11px 18px;
  border-radius: 14px;
  background: var(--verre);
  border: 1px solid var(--verre-bord);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: #FFFFFF;
  cursor: default;
}
.badge-store svg { width: 25px; height: 25px; fill: currentColor; flex: none; opacity: 0.9; }
.badge-store .bs-petit {
  display: block;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-doux);
  line-height: 1.25;
}
.badge-store .bs-grand {
  display: block;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

/* Le visuel : le téléphone, son halo, et les cartes qui flottent autour */
.hero-visuel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 580px;
}
.hero-halo {
  position: absolute;
  width: 66%;
  height: 66%;
  background: radial-gradient(circle, var(--halo), transparent 65%);
  filter: blur(60px);
  pointer-events: none;
}
.hero-tel { position: relative; z-index: 5; animation: derive 6s ease-in-out infinite; }

@keyframes derive {
  0%, 100% { transform: translateY(-6px); }
  50%      { transform: translateY(6px); }
}

/* Les cartes flottantes : l'équivalent Ipplied des icônes de gCompté.
   Ce sont de vraies pastilles de statut — elles disent quelque chose. */
.flottante {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px 9px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid var(--verre-bord);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
  white-space: nowrap;
  animation: flotte 7s ease-in-out infinite;
}
.flottante .pastille {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c);
  flex: none;
  box-shadow: 0 0 12px var(--c);
}
.flottante b {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.flottante span {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
}

@keyframes flotte {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-14px) rotate(1.5deg); }
}

.f-1 { top: 7%;    left: -6%;  animation-delay: 0s; }
.f-2 { top: 23%;   right: -8%; animation-delay: 0.9s; }
.f-3 { top: 52%;   left: -11%; animation-delay: 1.8s; }
.f-4 { bottom: 17%; right: -6%; animation-delay: 2.7s; }
.f-5 { bottom: 3%;  left: 4%;  animation-delay: 3.6s; }

.hero-indice {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: rgba(255, 255, 255, 0.46);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 200ms ease;
}
.hero-indice:hover { color: #FFFFFF; }
.hero-indice svg { width: 18px; height: 18px; animation: descend 1.6s ease-in-out infinite; }

@keyframes descend {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* ─── Feuilles empilées ────────────────────────────────────────────────── */

.feuille {
  position: relative;
  border-radius: var(--rayon-feuille) var(--rayon-feuille) 0 0;
  padding-inline: clamp(18px, 4vw, 28px);
}
.feuille + .feuille { margin-top: -56px; }

.sur-clair { background: var(--clair); color: var(--encre); }
.sur-sombre { background: var(--nuit-1); }

#fonctions { z-index: 4; padding-block: clamp(70px, 9vw, 112px) clamp(90px, 11vw, 150px); }
#parcours  { z-index: 5; padding-block: clamp(70px, 9vw, 118px) clamp(80px, 10vw, 140px); }
#questions { z-index: 6; padding-block: clamp(70px, 9vw, 112px) clamp(80px, 10vw, 140px); }
#telecharger { z-index: 7; padding-block: clamp(60px, 7vw, 98px) 72px; }

.contenu { max-width: 1160px; margin-inline: auto; }

/* Le trio de tête, répété à chaque section */
.kicker {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bleu);
  margin-bottom: 14px;
}
.sur-sombre .kicker { color: var(--accent); }

.titre-section {
  font-family: var(--display);
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  font-weight: 700;
  font-variation-settings: "opsz" 48;
  line-height: 1.12;
  letter-spacing: -0.026em;
  margin-bottom: 16px;
}

.sous-titre {
  font-size: 1.06rem;
  line-height: 1.72;
  color: var(--encre-douce);
  max-width: 62ch;
}
.sur-sombre .sous-titre { color: rgba(255, 255, 255, 0.62); }

.tete-centree { max-width: 800px; margin-inline: auto; text-align: center; }
.tete-centree .sous-titre { margin-inline: auto; }

/* Révélation au défilement. L'état caché n'est posé que si JS tourne :
   sans lui — ou sur une capture — la page est entièrement lisible au repos. */
.js .revele {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 640ms ease, transform 640ms ease;
}
.js .revele.vu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .revele { opacity: 1; transform: none; }
}

/* ─── Fonctionnalités : blocs qui défilent, téléphone collant ──────────── */

.fonctions-tete { max-width: 820px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.fonctions-tete .sous-titre { margin-inline: auto; }

/* La colonne collante vient AVANT les blocs dans le DOM, et se replace à droite
   par la grille. C'est ce qui permet, en une seule colonne, de la laisser coller
   en tête pendant que les blocs défilent dessous : un `order` ne l'aurait pas
   fait, car un élément collant ne tient que dans la rangée qui le contient. */
.fonctions-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  /* Surtout PAS d'`align-items: start` ici : la colonne de droite se contenterait
     alors de sa propre hauteur, et l'élément collant qu'elle contient n'aurait
     que cette hauteur-là de course — il se décollerait au bout d'un écran. En
     étirement (le défaut), la colonne couvre toute la rangée, donc toute la
     pile de blocs, et le téléphone tient du premier au dernier. */
}
.fonctions-blocs { grid-column: 1; grid-row: 1; }
.colonne-collante { grid-column: 2; grid-row: 1; }

.bloc-fonction {
  min-height: 74vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 36px;
}

.etiquette {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  background: rgba(7, 54, 152, 0.09);
  color: var(--bleu);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.etiquette i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c, var(--bleu));
}

.titre-fonction {
  font-family: var(--display);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 700;
  font-variation-settings: "opsz" 36;
  line-height: 1.18;
  letter-spacing: -0.024em;
  margin-bottom: 15px;
}

.texte-fonction {
  font-size: 1.04rem;
  line-height: 1.75;
  color: var(--encre-douce);
  max-width: 48ch;
}
.texte-fonction b { color: var(--encre); font-weight: 700; }

.precision {
  margin-top: 20px;
  padding: 13px 17px;
  border-left: 2px solid rgba(7, 54, 152, 0.28);
  background: rgba(7, 54, 152, 0.045);
  border-radius: 0 10px 10px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--encre-douce);
  max-width: 46ch;
}
.precision b { color: var(--bleu); font-weight: 700; }

.colonne-collante { position: relative; }
.tel-collant {
  position: sticky;
  top: 14vh;
  height: 72vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tel-halo {
  position: absolute;
  width: 72%;
  height: 58%;
  background: radial-gradient(circle, rgba(7, 54, 152, 0.2), transparent 66%);
  filter: blur(50px);
  pointer-events: none;
}

.pile-ecrans { position: relative; z-index: 2; width: 264px; height: 556px; }
.pile-ecrans .telephone {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(30px) scale(0.96);
  transition: opacity 420ms ease, transform 420ms ease;
  pointer-events: none;
}
.pile-ecrans .telephone.actif { opacity: 1; transform: none; pointer-events: auto; }
/* Sans JS, le premier écran reste posé et visible. */
html:not(.js) .pile-ecrans .telephone { opacity: 0; }
html:not(.js) .pile-ecrans .telephone:first-child { opacity: 1; transform: none; }

.avancee { display: flex; gap: 8px; margin-top: 24px; position: relative; z-index: 2; }
.avancee i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(19, 26, 34, 0.18);
  transition: width 350ms ease, background 350ms ease;
}
.avancee i.actif { width: 26px; background: var(--bleu); }

/* ─── Le téléphone et ses écrans ───────────────────────────────────────── */

.telephone {
  width: 264px;
  height: 556px;
  border-radius: 40px;
  padding: 9px;
  background: #171D25;
  box-shadow: 0 34px 70px -26px rgba(4, 12, 30, 0.75), 0 4px 14px rgba(4, 12, 30, 0.3);
  flex: none;
}
.sur-sombre .telephone, .hero .telephone { background: #2B333E; }

/* Les jetons de la maquette : deux jeux, les deux thèmes de l'app. */
.ecran {
  --m-bg: #F1F4F7;
  --m-surface: #FFFFFF;
  --m-surface2: #F5F7FA;
  --m-ink: #131A22;
  --m-ink2: #5C6875;
  --m-ink3: #8B98A5;
  --m-line: rgba(19, 26, 34, 0.09);
  --m-accent: #073698;
  --m-accent-f: #E5EBF7;
  --m-panel-h: #0A3CA3;
  --m-panel-b: #062B78;
  --m-grey: #8B98A5;   --m-grey-f: #EDF0F3;
  --m-sky: #4A7FA8;    --m-sky-f: #E6EEF5;
  --m-amber: #B9843A;  --m-amber-f: #F8F0E1;
  --m-violet: #7E71B4; --m-violet-f: #EEECF8;
  --m-indigo: #5A6BA8; --m-indigo-f: #E9ECF7;
  --m-teal: #2F8A88;   --m-teal-f: #E1EFEF;
  --m-rose: #A97A76;   --m-rose-f: #F5EBEA;
  --m-green: #2E8B68;  --m-green-f: #E3F0EA;

  width: 100%;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: var(--m-bg);
  color: var(--m-ink);
  display: flex;
  flex-direction: column;
  font-family: var(--texte);
  font-size: 11px;
  line-height: 1.35;
}

.ecran--nuit {
  --m-bg: #0F1319;
  --m-surface: #171D25;
  --m-surface2: #1E2530;
  --m-ink: #EDF1F6;
  --m-ink2: #9AA7B4;
  --m-ink3: #6C7987;
  --m-line: rgba(255, 255, 255, 0.09);
  --m-accent: #7FA8EC;
  --m-accent-f: #182339;
  --m-panel-h: #082F80;
  --m-panel-b: #041B4A;
  --m-grey: #8B98A5;   --m-grey-f: #20262F;
  --m-sky: #78A9CF;    --m-sky-f: #182430;
  --m-amber: #DDA95F;  --m-amber-f: #2A2116;
  --m-violet: #A99CDC; --m-violet-f: #221F31;
  --m-indigo: #8593CE; --m-indigo-f: #1B2030;
  --m-teal: #5FB6B4;   --m-teal-f: #152726;
  --m-rose: #CFA09B;   --m-rose-f: #2A2120;
  --m-green: #5CBE95;  --m-green-f: #172A23;
}

.barre-etat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 20px 2px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
}
.barre-etat .ondes { display: flex; gap: 2px; align-items: flex-end; }
.barre-etat .ondes i { width: 2.5px; background: currentColor; border-radius: 1px; display: block; }
.barre-etat .ondes i:nth-child(1) { height: 4px; }
.barre-etat .ondes i:nth-child(2) { height: 6px; }
.barre-etat .ondes i:nth-child(3) { height: 8px; }
.barre-etat .ondes i:nth-child(4) { height: 10px; }

.volet {
  background: linear-gradient(180deg, var(--m-panel-h), var(--m-panel-b));
  color: #FFFFFF;
  padding: 0 14px 15px;
}
.volet .barre-etat { color: rgba(255, 255, 255, 0.9); }
.volet h4 { margin: 8px 0 1px; font-size: 19px; font-weight: 800; letter-spacing: -0.026em; }
.volet .sous { font-family: var(--mono); font-size: 10px; color: rgba(255, 255, 255, 0.66); }
.volet .retour { font-size: 10px; color: rgba(255, 255, 255, 0.7); margin-top: 6px; }

.tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 13px; }
.tuile {
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 7px 8px 8px;
}
.tuile b {
  display: block;
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.tuile span { display: block; font-size: 8.5px; color: rgba(255, 255, 255, 0.7); margin-top: 1px; }

.puces { display: flex; gap: 5px; padding: 11px 14px 9px; overflow: hidden; }
.puce {
  font-size: 9.5px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--m-surface);
  border: 1px solid var(--m-line);
  color: var(--m-ink2);
  white-space: nowrap;
  flex: none;
}
.puce.on { background: var(--m-accent); color: var(--m-bg); border-color: transparent; }
.puce .n { font-family: var(--mono); opacity: 0.66; margin-left: 3px; }

.liste { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

.fiche {
  background: var(--m-surface);
  border: 1px solid var(--m-line);
  border-radius: 13px;
  padding: 10px 11px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: start;
}
.blason {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--cf);
  color: var(--c);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
}
.fiche .poste {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -0.012em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fiche .ent {
  font-size: 10px;
  color: var(--m-ink2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fiche .bas { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.jeton {
  font-size: 8.5px;
  font-weight: 700;
  padding: 2.5px 7px;
  border-radius: 999px;
  background: var(--cf);
  color: var(--c);
  white-space: nowrap;
}
.fiche .sal { font-family: var(--mono); font-size: 9.5px; color: var(--m-ink2); }
.fiche .action {
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px dashed var(--m-line);
  font-size: 9.5px;
  color: var(--m-amber);
  display: flex;
  gap: 5px;
  align-items: center;
}
.fiche .action .quand { font-family: var(--mono); color: var(--m-ink3); margin-left: auto; }
.note {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--m-accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.note i { font-style: normal; font-size: 8px; opacity: 0.6; }

.onglets {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--m-line);
  background: var(--m-surface);
  padding: 7px 0 13px;
  text-align: center;
}
.onglets span { font-size: 8.5px; color: var(--m-ink3); font-weight: 600; }
.onglets span.on { color: var(--m-accent); }
.onglets .ic {
  display: block;
  width: 14px;
  height: 14px;
  margin: 0 auto 3px;
  border-radius: 4px;
  border: 1.6px solid currentColor;
  opacity: 0.85;
}
.onglets span.on .ic { background: var(--m-accent-f); }

/* Kanban */
.colonnes { display: flex; gap: 8px; padding: 12px 14px; flex: 1; overflow: hidden; align-items: flex-start; }
.colonne {
  width: 114px;
  flex: none;
  background: var(--m-surface2);
  border: 1px solid var(--m-line);
  border-radius: 12px;
  padding: 8px 7px;
}
.col-tete { display: flex; align-items: center; gap: 5px; margin-bottom: 8px; padding-inline: 2px; }
.col-tete .p { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.col-tete b { font-size: 9.5px; font-weight: 700; }
.col-tete .n { margin-left: auto; font-family: var(--mono); font-size: 9px; color: var(--m-ink3); }
.mini {
  background: var(--m-surface);
  border: 1px solid var(--m-line);
  border-left: 2.5px solid var(--c);
  border-radius: 9px;
  padding: 7px 8px;
  margin-bottom: 6px;
}
.mini b { display: block; font-size: 9.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini span { display: block; font-size: 8.5px; color: var(--m-ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini.saisie {
  border: 1.5px dashed var(--m-accent);
  background: var(--m-accent-f);
  transform: rotate(-2.4deg);
  box-shadow: 0 10px 20px -8px rgba(4, 12, 30, 0.5);
}

/* Fiche détaillée + pertinence */
.corps-ecran { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; overflow: hidden; }

.frise { display: flex; align-items: center; gap: 3px; }
.frise i { height: 4px; border-radius: 3px; background: var(--c); flex: 1; }
.frise i.off { background: var(--m-line); }

.bloc {
  background: var(--m-surface);
  border: 1px solid var(--m-line);
  border-radius: 12px;
  padding: 11px;
}
.bloc h5 { margin: 0 0 9px; font-size: 10px; font-weight: 700; }

.jauge-tete { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.jauge-tete b {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--m-accent);
  font-variant-numeric: tabular-nums;
}
.jauge-tete b i { font-style: normal; font-size: 12px; opacity: 0.6; }
.jauge-tete span { font-size: 9px; color: var(--m-ink2); font-family: var(--mono); }
.piste { height: 7px; border-radius: 4px; background: var(--m-grey-f); overflow: hidden; }
.piste i { display: block; height: 100%; background: var(--c, var(--m-accent)); border-radius: 4px; }

.criteres { display: grid; gap: 5px; margin-top: 10px; }
.critere { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 7px; font-size: 9px; align-items: baseline; }
.critere .s { font-family: var(--mono); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.critere .plus { color: var(--m-green); }
.critere .moins { color: var(--m-rose); }
.critere .q { color: var(--m-ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Statistiques */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kpi { background: var(--m-surface); border: 1px solid var(--m-line); border-radius: 12px; padding: 9px 10px 10px; }
.kpi b {
  display: block;
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.kpi span { display: block; font-size: 8.5px; color: var(--m-ink2); margin-top: 1px; }

.etage { margin-bottom: 8px; }
.etage:last-child { margin-bottom: 0; }
.etage .lg { display: flex; justify-content: space-between; font-size: 9px; color: var(--m-ink2); margin-bottom: 3px; }
.etage .lg b { color: var(--m-ink); font-family: var(--mono); font-weight: 600; }

.rythme { display: flex; align-items: flex-end; gap: 4px; height: 44px; }
.rythme i {
  flex: 1;
  background: var(--m-accent-f);
  border-top: 2px solid var(--m-accent);
  border-radius: 3px 3px 0 0;
  display: block;
}
.rythme-lg { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 8px; color: var(--m-ink3); margin-top: 5px; }

/* Écran « Nouvelle » — presse-papier */
.proposition {
  background: var(--m-accent-f);
  border: 1px solid var(--m-accent);
  border-radius: 12px;
  padding: 10px 11px;
}
.proposition b { display: block; font-size: 10.5px; font-weight: 700; margin-bottom: 3px; }
.proposition p { margin: 0 0 8px; font-size: 9px; color: var(--m-ink2); line-height: 1.5; }
.proposition .duo-bouton { display: flex; gap: 6px; }
.bt {
  flex: 1;
  text-align: center;
  font-size: 9.5px;
  font-weight: 700;
  padding: 6px 0;
  border-radius: 8px;
  border: 1px solid var(--m-line);
  color: var(--m-ink2);
}
.bt.plein { background: var(--m-accent); color: var(--m-bg); border-color: transparent; }

.champ {
  background: var(--m-surface);
  border: 1px solid var(--m-line);
  border-radius: 11px;
  padding: 8px 11px 9px;
}
.champ .lb { font-size: 8px; font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--m-ink3); }
.champ .vl { font-size: 11.5px; font-weight: 600; margin-top: 2px; }
.champ .vl.vide { color: var(--m-ink3); font-weight: 400; font-style: italic; }
.champ.rempli { border-color: var(--m-accent); box-shadow: 0 0 0 2px var(--m-accent-f); }

/* ─── Parcours des statuts ─────────────────────────────────────────────── */

.parcours-defile { overflow-x: auto; padding-bottom: 8px; margin-top: clamp(34px, 4vw, 52px); }
.rail {
  display: grid;
  grid-template-columns: repeat(7, minmax(94px, 1fr));
  min-width: 700px;
  position: relative;
  padding-top: 28px;
}
.rail::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 7%;
  right: 7%;
  height: 2px;
  background: linear-gradient(90deg, #8B98A5, #78A9CF, #DDA95F, #A99CDC, #8593CE, #5FB6B4, #5CBE95);
  opacity: 0.55;
}
.etape { text-align: center; }
.etape .rond {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--c);
  margin: 0 auto 14px;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 4px var(--nuit-1), 0 0 14px var(--c);
}
.etape .lb { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; }
.etape .nu { display: block; font-family: var(--mono); font-size: 11px; color: rgba(255, 255, 255, 0.4); margin-top: 4px; }

.sortie {
  margin-top: 30px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  max-width: 62ch;
  padding: 16px 20px;
  border-radius: 16px;
  background: var(--verre);
  border: 1px solid var(--verre-bord);
}
.sortie .rond {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #CFA09B;
  box-shadow: 0 0 14px rgba(207, 160, 155, 0.6);
  flex: none;
  margin-top: 6px;
}
.sortie p { font-size: 14.5px; color: rgba(255, 255, 255, 0.72); }
.sortie b { color: #FFFFFF; }

/* Notifications, légèrement pivotées */
.notifs {
  margin-top: clamp(50px, 6vw, 76px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.notif {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--verre-bord);
  border-radius: 22px;
  padding: 18px 20px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  transition: transform 260ms ease;
}
.notif:nth-child(odd) { transform: rotate(-1.2deg); }
.notif:nth-child(even) { transform: rotate(1.2deg); }
.notif:hover { transform: rotate(0) scale(1.03); }

.notif-tete { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.notif-tete .marque { width: 17px; height: 17px; color: #FFFFFF; flex: none; }
.notif-tete .app {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
}
.notif-tete .h { margin-left: auto; font-family: var(--mono); font-size: 10px; color: rgba(255, 255, 255, 0.55); }
.notif .t { font-size: 15px; font-weight: 700; letter-spacing: -0.012em; margin-bottom: 5px; }
.notif .b { font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.72); }

/* ─── Questions ────────────────────────────────────────────────────────── */

.grille-questions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
  margin-top: clamp(36px, 4vw, 54px);
}
.col-questions { display: flex; flex-direction: column; gap: 14px; }

.question {
  background: var(--clair-2);
  border: 1px solid rgba(19, 26, 34, 0.08);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color 250ms ease, box-shadow 250ms ease;
}
.question[open] {
  border-color: rgba(7, 54, 152, 0.3);
  box-shadow: 0 12px 36px rgba(19, 26, 34, 0.08);
}
.question summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 22px;
  cursor: pointer;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--encre);
  list-style: none;
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--bleu);
  border-bottom: 2px solid var(--bleu);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 250ms ease;
}
.question[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.question .reponse {
  padding: 0 22px 21px;
  font-size: 0.97rem;
  line-height: 1.72;
  color: var(--encre-douce);
}
.question .reponse b { color: var(--encre); }
.question .reponse a {
  color: var(--bleu);
  font-weight: 600;
  text-underline-offset: 2px;
}

/* ─── Télécharger ──────────────────────────────────────────────────────── */

.panneau {
  position: relative;
  max-width: 1160px;
  margin-inline: auto;
  background: linear-gradient(135deg, var(--bleu-clair) 0%, #0A2A6E 62%, #071C4A 100%);
  border-radius: 44px;
  padding: clamp(48px, 6vw, 84px) clamp(26px, 4vw, 60px) 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 30px;
  /* Le texte se centre sur la hauteur du panneau — que c'est le téléphone qui
     impose. Seul ce dernier reste calé en bas, pour en déborder. */
  align-items: center;
}
.panneau-halo {
  position: absolute;
  top: -30%;
  right: -10%;
  width: 60%;
  height: 80%;
  background: radial-gradient(circle, var(--halo), transparent 65%);
  filter: blur(70px);
  pointer-events: none;
}
.panneau-texte { position: relative; z-index: 2; padding-bottom: clamp(40px, 5vw, 64px); }
.panneau-titre {
  font-family: var(--display);
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight: 700;
  font-variation-settings: "opsz" 48;
  line-height: 1.12;
  letter-spacing: -0.026em;
  margin-bottom: 16px;
}
.panneau-texte p.d {
  font-size: 1.06rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  max-width: 46ch;
  margin-bottom: 32px;
}
.panneau-tel {
  position: relative;
  z-index: 2;
  justify-self: center;
  align-self: end;
  transform: translateY(44px);
}
.panneau-tel .telephone { box-shadow: 0 34px 70px rgba(0, 0, 0, 0.55); }

/* ─── Pied ─────────────────────────────────────────────────────────────── */

.pied {
  position: relative;
  z-index: 8;
  background: #050912;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 50px clamp(18px, 4vw, 28px);
}
.pied-inner {
  max-width: 1160px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 26px 40px;
  justify-content: space-between;
  align-items: flex-start;
}
.pied-marque { display: flex; align-items: flex-start; gap: 14px; }
.pied-marque .marque { width: 34px; height: 34px; color: var(--accent); flex: none; }
.pied-marque .mot { font-size: 21px; display: block; margin-bottom: 4px; }
.pied-marque p { font-size: 13.5px; color: rgba(255, 255, 255, 0.45); max-width: 34ch; }

.pied-technique { display: grid; gap: 6px; font-size: 13.5px; }
.pied-technique div { display: grid; grid-template-columns: 96px auto; gap: 14px; }
.pied-technique dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  align-self: center;
}
.pied-technique dd { margin: 0; color: rgba(255, 255, 255, 0.82); }

.pied-liens { display: grid; gap: 9px; font-size: 14px; }
.pied-liens a { color: rgba(255, 255, 255, 0.6); text-decoration: none; transition: color 200ms ease; }
.pied-liens a:hover { color: #FFFFFF; }

.pied-bas {
  max-width: 1160px;
  margin: 34px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.42);
}

/* ─── Adaptations ──────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 118px;
    gap: 44px;
  }
  .hero-visuel { min-height: 620px; }
  .panneau { grid-template-columns: 1fr; }
  .panneau-tel { transform: translateY(30px); }
}

@media (max-width: 900px) {
  :root { --rayon-feuille: 34px; }
  .navbar-liens a:not(.navbar-cta):not(.bouton-cafe) { display: none; }

  /* Une seule colonne. C'est la colonne entière qui devient collante, et non le
     bloc qu'elle contient : un élément collant ne tient que dans son parent, et
     `.colonne-collante` est trop courte pour retenir quoi que ce soit. Remontée
     par `order`, elle colle alors le temps de toute la section pendant que les
     blocs défilent dessous — d'où le fond opaque et le plan supérieur. */
  .fonctions-grille {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .fonctions-blocs, .colonne-collante { grid-column: auto; grid-row: auto; }
  .colonne-collante {
    order: -1;
    position: sticky;
    top: 78px;
    z-index: 3;
    background: linear-gradient(180deg, var(--clair) 0%, var(--clair) 84%, rgba(241, 244, 247, 0));
  }
  .tel-collant {
    position: static;
    height: auto;
    padding-block: 12px 10px;
  }
  .pile-ecrans { transform: scale(0.64); transform-origin: top center; height: 372px; }
  .tel-halo { display: none; }
  .bloc-fonction { min-height: 62vh; padding-block: 26px; }

  .notifs { grid-template-columns: 1fr; }
  .grille-questions { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .flottante { display: none; }
  .f-1, .f-3 { display: flex; }
  .f-1 { top: 2%; left: -2%; }
  .f-3 { bottom: 2%; left: auto; right: -2%; top: auto; }
  .hero-visuel { min-height: 600px; }
  .pied-technique div { grid-template-columns: 84px auto; }
}