/* =====================================================================
   Pages fonctionnalité : la mise en page, et le KIT des démonstrations.

   POURQUOI UNE FEUILLE À PART, alors que la règle du thème est de n'éditer
   que theme.css. Ces styles ne servent QUE sur page-fonctionnalite.php.
   Versés dans theme.css, ils pèseraient sur toutes les pages du site. Elle
   est donc mise en file uniquement sur ce gabarit, et elle reste écrite à la
   main, jamais générée.

   DEUX PARTIES.
   1. La mise en page de la page (`.fn-…`).
   2. LE KIT (`.dm-…`) : les briques communes à toutes les démonstrations,
      puce, champ, compteur, bouton, bascule, onglet, ligne, jauge, appareil,
      confirmation. Une démonstration ASSEMBLE ces briques et n'ajoute que ce
      qui lui est propre, dans `assets/demos/<clé>.css`, préfixé `.dm-<clé>-`.
      C'est ce kit qui fait que trente pages écrites séparément se
      ressemblent.

   Charte du thème : variables de :root, rayon de carte 18 px, bouton 10 px,
   séparateurs en pointillés, ombres neutres. Aucun halo, aucun bord coloré
   d'un seul côté, aucune pilule parfaitement ronde, toute cible tactile au
   moins 40 px, et 44 px dès qu'on peut.
   ===================================================================== */

/* =====================================================================
   1. LA PAGE
   ===================================================================== */

/* ── Hero ───────────────────────────────────────────────────────────── */
.fn-hero { padding-top: var(--s-6); }
.fn-hero-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
}
@media (min-width: 62rem) {
  .fn-hero-grille { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: var(--s-7); }
}

/* Les mots forts du titre, en bleu. La couleur souligne des mots qui portent
   déjà l'argument : la phrase se lit entière sans elle, et elle ne sert
   jamais seule à distinguer une information. */
.fn-fort { color: var(--blue); }

.fn-hero-titre { max-width: 18ch; }
/* Le texte sous le H1, un cran sous le .section-lead du thème (18 px) :
   Théo le trouvait trop gros le 24 septembre. */
.fn-hero-chapo { max-width: 52ch; font-size: 16px; line-height: 1.6; }
@media (max-width: 720px) { .fn-hero-chapo { font-size: 15px; } }

/* .section-eyebrow, .section-title et .section-lead n'ont AUCUNE marge dans
   le thème : c'est leur parent .section-head qui pose les gouttières. Sortis
   de lui, ils se toucheraient. */
.fn-hero-dire {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--s-3);
}
.fn-hero-dire .fn-hero-titre { margin-top: 2px; }
.fn-hero-dire .svc-hero-cta { margin-top: var(--s-2); }

.fn-essai {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2);
  margin: 0 0 var(--s-3);
  font-size: 0.875rem; line-height: 1.5; color: var(--ink-mute);
}
.fn-essai-pastille {
  display: inline-block; padding: 4px 9px;
  border: 1px solid var(--blue); border-radius: 8px;
  background: var(--blue-soft); color: var(--blue-deep);
  font-size: 0.6875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.fn-essai-note { margin: var(--s-3) 0 0; font-size: 0.8125rem; color: var(--ink-faint); }

/* ── Les deux boutons du hero ───────────────────────────────────────────
   .btn-pill-ghost est dessiné pour un hero SOMBRE : texte blanc, bordure
   blanche à 42 % et fond blanc à 12 %. Sur le fond clair de ces pages il
   devient invisible. On le rhabille ici, borné à ces deux blocs, plutôt que
   de toucher à la règle commune dont dépendent les hero sombres du site.
   Et .svc-hero-cta est en display:block hors de son hero d'origine. */
.fn-hero .svc-hero-cta,
.fn-appel .svc-hero-cta {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-top: var(--s-5);
}
.fn-hero .btn-pill-ghost,
.fn-appel .btn-pill-ghost {
  border-color: var(--line-2); background: var(--paper); color: var(--ink);
}
.fn-hero .btn-pill-ghost:hover,
.fn-appel .btn-pill-ghost:hover {
  border-color: var(--ink); background: var(--paper-2); color: var(--ink);
}

/* Les boutons du HERO, demande de Théo du 24 septembre : « Parlons de votre
   projet » en bouton bleu plein. En blanc sur ce fond blanc, il se lisait
   comme une ligne de texte. Les deux boutons passent au format bouton de la
   charte (coins de 10 px) au lieu de la pilule toute ronde, et à la même
   hauteur, pour que la paire se tienne. Aucune ombre teintée : le survol
   fonce le bleu, rien de plus. */
.fn-hero .svc-hero-cta .btn-pill,
.fn-hero .svc-hero-cta .btn-pill-ghost,
.fn-appel .svc-hero-cta .btn-pill,
.fn-appel .svc-hero-cta .btn-pill-ghost {
  min-height: 48px; padding: 12px 22px; border-radius: 10px;
}
.fn-hero .svc-hero-cta .btn-pill,
.fn-appel .svc-hero-cta .btn-pill {
  background: var(--blue); color: #fff;
}
.fn-hero .svc-hero-cta .btn-pill:hover,
.fn-appel .svc-hero-cta .btn-pill:hover {
  background: var(--blue-deep); color: #fff; transform: translateY(-1px);
}
.fn-hero .svc-hero-cta .btn-pill:focus-visible,
.fn-hero .svc-hero-cta .btn-pill-ghost:focus-visible,
.fn-appel .svc-hero-cta .btn-pill:focus-visible,
.fn-appel .svc-hero-cta .btn-pill-ghost:focus-visible {
  outline: 2px solid var(--blue-deep); outline-offset: 3px;
}

/* ── Ce que ça change ───────────────────────────────────────────────────
   Une seule carte, un argument par ligne : le titre à gauche, le texte à
   droite, les pointillés de la charte entre les lignes (forme choisie par
   Théo le 24 septembre). Avant, quatre cartes côte à côte donnaient des
   lignes d'une trentaine de caractères, et des numéros bleus laissaient
   croire à des étapes. La carte est plafonnée pour que le texte garde une
   longueur de ligne lisible sur un grand écran. */
.fn-quoi {
  max-width: 64rem; margin-inline: auto;
  padding: 0 clamp(20px, 3.4vw, 44px);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--paper);
}
.fn-quoi-carte {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px;
  padding: clamp(20px, 2.6vw, 30px) 0;
}
.fn-quoi-carte + .fn-quoi-carte { border-top: 1px dashed var(--line-strong); }
@media (min-width: 48rem) {
  .fn-quoi-carte {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
    gap: clamp(20px, 3.2vw, 44px); align-items: baseline;
  }
}
.fn-quoi-titre {
  margin: 0;
  font-size: clamp(1.125rem, 1.5vw, 1.3125rem); font-weight: 800;
  line-height: 1.25; letter-spacing: -.015em; color: var(--ink);
}
.fn-quoi-texte { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--ink-mute); }
/* Le bouton de contact au bout des arguments (24 septembre) : le même bouton
   bleu que dans le haut de page, centré sous la carte. */
.fn-quoi-suite { display: flex; justify-content: center; margin-top: var(--s-5); }
.fn-quoi-suite .btn-pill {
  min-height: 48px; padding: 12px 22px; border-radius: 10px;
  background: var(--blue); color: #fff;
}
.fn-quoi-suite .btn-pill:hover { background: var(--blue-deep); color: #fff; transform: translateY(-1px); }
.fn-quoi-suite .btn-pill:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 3px; }

/* ── Étapes et livraison ────────────────────────────────────────────── */
.fn-deux { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 62rem) { .fn-deux { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-7); } }

.fn-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.fn-etape { display: flex; gap: var(--s-4); align-items: flex-start; }
.fn-etape + .fn-etape { padding-top: var(--s-4); border-top: 1px dashed var(--line); }
.fn-etape-num {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px;
  border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--paper-2); color: var(--ink);
  font-size: 0.875rem; font-weight: 800;
}
.fn-etape-titre { margin: 4px 0 var(--s-2); font-size: 1rem; font-weight: 700; color: var(--ink); }
.fn-etape-texte { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-mute); }

.fn-inclus {
  padding: var(--s-5);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--paper-3);
}
.fn-inclus-titre { margin: 0 0 var(--s-4); font-size: 1rem; font-weight: 800; color: var(--ink); }
.fn-inclus-liste { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: var(--s-3); }
.fn-inclus-liste li {
  display: flex; gap: var(--s-3); align-items: flex-start;
  font-size: 0.9375rem; line-height: 1.5; color: var(--ink-mute);
}
.fn-coche { flex: none; margin-top: 2px; color: var(--blue); }
.fn-coche svg { width: 15px; height: 15px; display: block; }
.fn-prix {
  margin: 0; padding-top: var(--s-4);
  border-top: 1px dashed var(--line-2);
  font-size: 0.875rem; line-height: 1.6; color: var(--ink-mute);
}

/* ── L'ancrage local ────────────────────────────────────────────────── */
.fn-local { max-width: 62rem; margin: 0 auto; }
/* Le paragraphe reste aligné à gauche même quand tout le reste est centré :
   c'est la règle de lisibilité du site, un texte long centré se lit mal. */
.fn-local-texte { margin: 0 0 var(--s-4); font-size: 1rem; line-height: 1.7; color: var(--ink-mute); text-align: left; }
.fn-local-villes {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s-2) var(--s-3);
  margin: 0; padding-top: var(--s-4);
  border-top: 1px dashed var(--line);
  font-size: 0.875rem; color: var(--ink-faint);
}
.fn-local-villes-dit { font-weight: 600; color: var(--ink-mute); }
.fn-local-sep { color: var(--line-strong); }
.fn-local-villes a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 2px;
  color: var(--ink-mute); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line-2);
}
.fn-local-villes a:hover { color: var(--blue-deep); text-decoration-color: var(--blue); }

/* ── Questions ──────────────────────────────────────────────────────── */
.fn-faq { max-width: 52rem; margin: 0 auto; }
.fn-qa { border-bottom: 1px dashed var(--line); }
.fn-qa-q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  text-align: left;
  min-height: 56px; padding: var(--s-4) 0;
  font-size: 1rem; font-weight: 600; color: var(--ink);
  cursor: pointer; list-style: none;
}
.fn-qa-q::-webkit-details-marker { display: none; }
.fn-qa-q:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.fn-qa-signe { flex: none; position: relative; width: 14px; height: 14px; }
.fn-qa-signe::before,
.fn-qa-signe::after {
  content: ''; position: absolute; left: 0; top: 6px;
  width: 14px; height: 2px; background: var(--ink-faint);
  transition: transform .2s var(--ease-soft);
}
.fn-qa-signe::after { transform: rotate(90deg); }
.fn-qa[open] .fn-qa-signe::after { transform: rotate(0deg); }
.fn-qa-a { margin: 0; padding: 0 0 var(--s-4); max-width: 62ch; font-size: 0.9375rem; line-height: 1.7; color: var(--ink-mute); }
.fn-qa-a a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 2px; }

/* ── La fin de page : l'appel et les fonctions voisines ────────────────────
   Redessinee le 24 septembre (« intelligent mais moche », dixit Theo). Une
   carte, deux parties. L'appel a gauche, en grand et sur le blanc : c'est le
   but de la page. Les voisines a droite, sur un gris a peine marque, en
   liste de lignes separees par les pointilles de la charte : c'est la suite.
   Avant, cartes et appel etaient empiles et centres pareil, et rien ne
   disait lequel comptait. */
.fn-fin {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--paper); overflow: hidden;
}
.fn-fin--seul { grid-template-columns: minmax(0, 1fr); }

.fn-appel {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: clamp(28px, 4vw, 52px);
}
.fn-appel .section-eyebrow { margin: 0; }
.fn-appel-titre {
  margin: 0; font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 800;
  line-height: 1.08; letter-spacing: -.03em; color: var(--ink);
}
.fn-appel-texte {
  margin: 0; max-width: 34rem;
  font-size: 1rem; line-height: 1.7; color: var(--ink-mute);
}
.fn-appel .svc-hero-cta { margin-top: 8px; justify-content: flex-start; }

/* La partie droite, refaite le meme jour (« change la partie a droite ») :
   des cartes blanches posees sur le gris, chacune avec l'icone de sa
   fonction dans le menu, au lieu de lignes nues. Toujours trois au moins
   (bwf_fonctionnalite_suggestions), pour que le panneau soit plein. */
.fn-voisines {
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  padding: clamp(24px, 3.4vw, 44px);
  background: var(--paper-3);
}
.fn-voisines-titre {
  margin: 0;
  font-size: 0.75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint);
}
.fn-voisines-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fn-voisine {
  display: flex; align-items: center; gap: 14px;
  min-height: 68px; padding: 12px 16px 12px 12px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper); text-decoration: none;
  transition: border-color .18s var(--ease-soft), transform .18s var(--ease);
}
.fn-voisine-ico {
  flex: none; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--blue-soft); color: var(--blue-deep);
}
.fn-voisine-ico svg { width: 21px; height: 21px; display: block; }
.fn-voisine-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fn-voisine-nom {
  font-size: 0.9375rem; font-weight: 700; color: var(--ink);
  transition: color .18s var(--ease-soft);
}
.fn-voisine-dit { font-size: 0.8125rem; line-height: 1.4; color: var(--ink-faint); }
.fn-voisine-fleche {
  flex: none; font-size: 1rem; color: var(--ink-faint);
  transition: color .18s var(--ease-soft), transform .18s var(--ease);
}
.fn-voisine:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.fn-voisine:hover .fn-voisine-nom { color: var(--blue-deep); }
.fn-voisine:hover .fn-voisine-fleche { color: var(--blue); transform: translateX(3px); }
.fn-voisine:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ── Le sommaire des pages piliers ──────────────────────────────────────
   Site web et Application sur mesure listent toutes les pages de leur
   branche, rangées par famille comme dans le méga-menu (24 septembre). Les
   cartes sont celles de « Ça va souvent avec » : une même chose a partout la
   même allure. */
.fn-hub { display: grid; gap: var(--s-6); }
.fn-hub-famille { display: grid; gap: 12px; }
.fn-hub-titre {
  margin: 0;
  font-size: 0.75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint);
}
.fn-hub-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

/* =====================================================================
   2. LE KIT DES DÉMONSTRATIONS
   Tout ce qui suit est COMMUN. Une démonstration assemble ces briques et
   n'écrit dans son propre fichier que ce qui lui est vraiment particulier.
   ===================================================================== */


/* ── L'attribut [hidden] gagne toujours ─────────────────────────────────
   LE PIEGE DU [hidden] : une regle d auteur qui pose `display: flex` ou
   `display: grid` BAT le `display: none` que le navigateur applique a
   [hidden]. Un bloc qu une demonstration croit cacher reste alors visible,
   et le defaut est invisible a la relecture du code. Deux demonstrations
   ecrites separement sont tombees dedans le meme jour.
   On tranche ici, pour toutes : sous une demonstration, [hidden] cache. */
.fn-demo [hidden] { display: none !important; }

/* ── La fausse fenêtre, et le faux téléphone ────────────────────────── */
.fn-fenetre {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(31, 36, 46, .06), 0 12px 28px rgba(31, 36, 46, .07);
}
.fn-fenetre-barre {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0 var(--s-4); height: 40px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.fn-fenetre-points { display: inline-flex; gap: 6px; }
.fn-fenetre-points i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.fn-fenetre-url {
  font-size: 0.75rem; color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fn-fenetre-corps { padding: var(--s-5) var(--s-4) var(--s-4); }
@media (min-width: 40rem) { .fn-fenetre-corps { padding: var(--s-5); } }

/* Le téléphone, pour les démonstrations dont le sujet EST le téléphone
   (appli installable, notifications, bouton d'appel). Ailleurs la fenêtre
   suffit : un téléphone dessiné autour de tout rétrécit le contenu. */
.dm-tel {
  width: 236px; margin: 0 auto; padding: 10px;
  border: 1px solid var(--ink); border-radius: 26px;
  background: var(--ink);
}
.dm-tel-encoche {
  width: 74px; height: 5px; margin: 0 auto 8px;
  border-radius: 3px; background: rgba(255, 255, 255, .34);
}
.dm-tel-ecran {
  overflow: hidden; min-height: 380px;
  border-radius: 18px; background: var(--paper);
}

/* ── La zone qui annonce ce qui vient de se passer ──────────────────── */
.fn-demo .dm-dit {
  min-height: 1.25rem; margin: var(--s-2) 0 0;
  font-size: 0.8125rem; color: var(--ink-faint);
}

/* ── Titres, champs et légendes ─────────────────────────────────────── */
.dm-titre {
  margin: 0 0 var(--s-4);
  font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em; color: var(--ink);
}
.dm-champ { margin: 0 0 var(--s-4); padding: 0; border: 0; }
.dm-champ:last-of-type { margin-bottom: var(--s-5); }
.dm-legende {
  padding: 0; margin: 0 0 var(--s-2);
  font-size: 0.75rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* ── Les puces de choix ─────────────────────────────────────────────── */
.dm-puces { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.dm-puce {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  min-height: 44px; padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--paper); color: var(--ink);
  font-family: inherit; font-size: 0.875rem; font-weight: 600;
  cursor: pointer;
  transition: border-color .18s var(--ease-soft), background .18s var(--ease-soft), color .18s var(--ease-soft);
}
.dm-puce:hover:not(:disabled) { border-color: var(--line-strong); background: var(--paper-2); }
.dm-puce:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.dm-puce.est-choisi { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.dm-puce:disabled { cursor: not-allowed; background: var(--paper-3); color: var(--line-strong); }
/* Une puce qui tient sur une ligne, pour une étiquette ou un filtre. */
.dm-puce--plate { flex-direction: row; gap: var(--s-2); }

/* ── Le compteur ────────────────────────────────────────────────────── */
.dm-compteur { display: flex; align-items: center; gap: var(--s-2); }
.dm-compteur-bt {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--paper); color: var(--ink);
  cursor: pointer;
  transition: border-color .18s var(--ease-soft), background .18s var(--ease-soft);
}
.dm-compteur-bt svg { width: 18px; height: 18px; }
.dm-compteur-bt:hover { border-color: var(--line-strong); background: var(--paper-2); }
.dm-compteur-bt:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.dm-compteur-val {
  min-width: 2.25rem; text-align: center;
  font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink);
}
.dm-compteur-mot { font-size: 0.875rem; color: var(--ink-mute); }

/* ── Saisies ────────────────────────────────────────────────────────── */
.dm-saisie {
  width: 100%; min-height: 44px; padding: 0 var(--s-3);
  border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--paper); color: var(--ink);
  font-family: inherit; font-size: 0.9375rem;
}
textarea.dm-saisie { padding: var(--s-3); line-height: 1.5; resize: vertical; min-height: 84px; }
.dm-saisie::placeholder { color: var(--line-strong); }
.dm-saisie:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
/* Un champ que l'on MONTRE sans le laisser saisir : mot de passe d'exemple,
   numéro de carte factice. On ne demande jamais une vraie donnée sensible
   dans une démonstration, même pour de faux. */
.dm-saisie--figee { background: var(--paper-3); color: var(--ink-faint); cursor: default; }

/* ── Boutons ────────────────────────────────────────────────────────── */
.dm-valider {
  width: 100%; min-height: 48px; padding: 0 var(--s-4);
  border: 1px solid var(--ink); border-radius: 10px;
  background: var(--ink); color: var(--paper);
  font-family: inherit; font-size: 0.9375rem; font-weight: 700;
  cursor: pointer;
  transition: opacity .18s var(--ease-soft);
}
.dm-valider:hover:not(:disabled) { opacity: .88; }
.dm-valider:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.dm-valider:disabled {
  border-color: var(--line); background: var(--paper-3); color: var(--ink-faint);
  cursor: not-allowed;
}
.dm-valider--bleu { border-color: var(--blue); background: var(--blue); }
.dm-valider--auto { width: auto; }

.dm-refaire {
  min-height: 40px; padding: 0 var(--s-4);
  border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--paper); color: var(--ink-mute);
  font-family: inherit; font-size: 0.875rem; font-weight: 600;
  cursor: pointer;
}
.dm-refaire:hover { border-color: var(--line-strong); color: var(--ink); }
.dm-refaire:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ── La bascule, deux états ─────────────────────────────────────────── */
.dm-bascule {
  display: inline-flex; align-items: center; gap: var(--s-3);
  min-height: 44px; padding: 0;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 0.9375rem; color: var(--ink);
}
.dm-bascule-piste {
  flex: none; position: relative; width: 44px; height: 26px;
  border: 1px solid var(--line-2); border-radius: 13px; background: var(--paper-3);
  transition: background .18s var(--ease-soft), border-color .18s var(--ease-soft);
}
.dm-bascule-pouce {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--paper);
  box-shadow: 0 1px 2px rgba(31, 36, 46, .18);
  transition: transform .18s var(--ease-soft);
}
.dm-bascule[aria-pressed="true"] .dm-bascule-piste { background: var(--blue); border-color: var(--blue); }
.dm-bascule[aria-pressed="true"] .dm-bascule-pouce { transform: translateX(18px); }
.dm-bascule:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 8px; }

/* ── Onglets ────────────────────────────────────────────────────────── */
.dm-onglets { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.dm-onglet {
  min-height: 40px; padding: 0 var(--s-4);
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--paper); color: var(--ink-mute);
  font-family: inherit; font-size: 0.875rem; font-weight: 700; cursor: pointer;
}
.dm-onglet[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.dm-onglet:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ── Lignes de liste ────────────────────────────────────────────────── */
.dm-lignes { display: grid; gap: var(--s-2); }
.dm-ligne {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3);
  min-height: 48px; padding: var(--s-3);
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
  font-size: 0.875rem; color: var(--ink-mute);
}
.dm-ligne--active { border-color: var(--blue); background: var(--blue-tint); }
.dm-ligne-titre { font-weight: 700; color: var(--ink); }
.dm-ligne-fin { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ── Étiquettes ─────────────────────────────────────────────────────── */
.dm-etiq {
  display: inline-block; padding: 3px 8px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper-3); color: var(--ink-faint);
  font-size: 0.6875rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.dm-etiq--bleu  { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-deep); }
.dm-etiq--vert  { border-color: var(--green); background: rgba(34, 197, 94, .1); color: #15803D; }
.dm-etiq--chaud { border-color: var(--accent-warm); background: var(--accent-warm-bg); color: var(--accent-warm-text); }

/* ── Jauges et barres ───────────────────────────────────────────────── */
.dm-jauge {
  position: relative; overflow: hidden;
  height: 8px; border-radius: 4px; background: var(--paper-3);
}
.dm-jauge-part {
  position: absolute; inset: 0 auto 0 0; width: 0;
  border-radius: 4px; background: var(--blue);
  transition: width .5s var(--ease);
}
.dm-jauge-part--vert { background: var(--green); }
.dm-jauge-part--gris { background: var(--line-strong); }

/* ── La confirmation, commune ───────────────────────────────────────── */
.dm-vue--fin { text-align: center; }
.dm-vue--fin:focus { outline: none; }
.dm-fin-coche {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin: 0 auto var(--s-3);
  border: 1px solid var(--blue); border-radius: 12px;
  background: var(--blue-soft); color: var(--blue-deep);
}
.dm-fin-coche svg { width: 22px; height: 22px; }
.dm-fin-titre { margin: 0 0 var(--s-2); font-size: 1.125rem; font-weight: 800; color: var(--ink); }
.dm-fin-recap { margin: 0 auto var(--s-2); max-width: 34ch; font-size: 0.9375rem; color: var(--ink-mute); }
.dm-fin-ref { margin: 0 0 var(--s-5); font-size: 0.8125rem; color: var(--ink-faint); }
.dm-fin-ref b { font-variant-numeric: tabular-nums; color: var(--ink-mute); }

/* Le contrechamp : « et de votre côté, voilà ce que vous recevez ». C'est
   lui qui fait comprendre que la fonction sert le professionnel autant que
   son client ; presque toutes les démonstrations en ont un. */
.dm-cote {
  padding: var(--s-4); margin-bottom: var(--s-4);
  border: 1px dashed var(--line-2); border-radius: 12px;
  background: var(--paper-2); text-align: left;
}
.dm-cote-tete {
  margin: 0 0 var(--s-3);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-faint);
}
.dm-cote-pied { margin: var(--s-3) 0 0; font-size: 0.8125rem; color: var(--ink-faint); }

/* ── Moins de mouvement ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fn-voisine, .dm-puce, .dm-compteur-bt, .dm-valider,
  .dm-bascule-piste, .dm-bascule-pouce, .dm-jauge-part,
  .fn-qa-signe::before, .fn-qa-signe::after {
    transition: none;
  }
  .fn-voisine:hover { transform: none; }
}

/* ── Mobile et tablette : on centre ce qui doit l'être ──────────────────
   Règle du site : sur mobile, titres, sous-titres, intros, kickers et
   boutons sont centrés ; les paragraphes longs, les listes, les cartes et
   les questions restent alignés à gauche pour la lisibilité. */
@media (max-width: 61.999rem) {
  .fn-hero-dire { align-items: center; text-align: center; }
  .fn-hero-titre, .fn-hero-chapo { max-width: none; }
  .fn-hero .svc-hero-cta, .fn-appel .svc-hero-cta { justify-content: center; }
  .fn-fin { grid-template-columns: minmax(0, 1fr); }
  .fn-appel { align-items: center; text-align: center; }
  .fn-appel-texte { margin-inline: auto; }
  .fn-essai { justify-content: center; text-align: center; }
  .fn-essai-note { text-align: center; }
  .fn-local-texte { text-align: left; }
  .fn-local-villes { justify-content: center; }
}

/* =====================================================================
   3. LES SCÈNES ANIMÉES DU HERO
   ---------------------------------------------------------------------
   Décision du 23 septembre au soir : les démonstrations jouables sont
   remplacées par des scènes qui se jouent toutes seules. Elles montrent la
   même chose, sans rien demander au visiteur. Aucun JavaScript.

   LE CADRE EST FIXE, 520 x 360 px, et c'est délibéré. Une scène animée
   positionne des éléments les uns par rapport aux autres et promène un
   curseur : si la largeur change, le curseur clique dans le vide. On dessine
   donc dans une toile de taille connue, et on la RÉDUIT d'un bloc sur les
   petits écrans, comme le thème le fait déjà pour le bureau. Les coordonnées
   restent vraies partout.

   LE MINUTAGE EST COMMUN : 12 secondes, en boucle. Tout élément d'une scène
   reçoit la durée, l'accélération et la répétition ; une scène n'écrit donc
   que des @keyframes et un animation-name, jamais une durée.
   ===================================================================== */

.fn-scene-boite {
  /* La hauteur suit l'échelle : sans ça, la réduction laisse un trou blanc
     sous la scène, puisque transform ne change pas la place occupée.
     `--sc-haut` est posé par chaque scène : une hauteur unique obligerait à
     prendre la plus haute partout, ou à serrer les autres. */
  height: calc(var(--sc-haut, 400px) * var(--sc-echelle, 1));
  overflow: hidden;
}
.fn-scene {
  position: relative;
  width: 520px; height: var(--sc-haut, 400px);
  transform: scale(var(--sc-echelle, 1));
  transform-origin: top left;
}
/* L'ÉCHELLE SE MESURE SUR LA COLONNE, par paliers.

   QUATRE TENTATIVES. Les trois premières étaient fausses, et chacune pour une
   raison différente qu'il vaut mieux ne pas réapprendre.
   1. Paliers sur la largeur de FENÊTRE : la toile dépassait de 5 px sur un
      écran de 360 px, parce que le rembourrage du conteneur change à 480 px.
   2. Formule `min(1, calc(100cqw / 520))` : INVALIDE. Diviser une longueur
      par un nombre donne une longueur, et `min()` refuse de mélanger un
      nombre et une longueur. La règle était ignorée EN SILENCE, la toile
      restait à 520 px et se faisait rogner de 247 px sur un écran de 320.
   3. Paliers sur la colonne, mais dimensionnés sur le HAUT de leur plage :
      un palier « jusqu'à 360 px » sert aussi une colonne de 321 px, et la
      toile dépassait de 24 px. Un palier se dimensionne sur le BAS de sa
      plage, jamais sur le haut.
   4. Ce qui suit. Des paliers de 20 px, calculés sur la colonne la plus
      étroite que chacun peut servir, avec 6 px de garde. Le repli en `vw`
      sert les navigateurs sans requête de conteneur : il rend la scène plus
      petite que nécessaire, jamais rognée.

   VÉRIFIÉ PAR LA MESURE, colonne par colonne, sur la page en ligne. */
.fn-hero-faire { container-type: inline-size; }
@media (max-width: 78rem) { .fn-scene-boite { --sc-echelle: .74; } }
@media (max-width: 62rem) { .fn-scene-boite { --sc-echelle: .60; } }
@supports (container-type: inline-size) {
  @container (max-width: 520px) { .fn-scene-boite { --sc-echelle: 0.95; } }
  @container (max-width: 500px) { .fn-scene-boite { --sc-echelle: 0.9115; } }
  @container (max-width: 480px) { .fn-scene-boite { --sc-echelle: 0.8731; } }
  @container (max-width: 460px) { .fn-scene-boite { --sc-echelle: 0.8346; } }
  @container (max-width: 440px) { .fn-scene-boite { --sc-echelle: 0.7962; } }
  @container (max-width: 420px) { .fn-scene-boite { --sc-echelle: 0.7577; } }
  @container (max-width: 400px) { .fn-scene-boite { --sc-echelle: 0.7192; } }
  @container (max-width: 380px) { .fn-scene-boite { --sc-echelle: 0.6808; } }
  @container (max-width: 360px) { .fn-scene-boite { --sc-echelle: 0.6423; } }
  @container (max-width: 340px) { .fn-scene-boite { --sc-echelle: 0.6038; } }
  @container (max-width: 320px) { .fn-scene-boite { --sc-echelle: 0.5654; } }
  @container (max-width: 300px) { .fn-scene-boite { --sc-echelle: 0.5269; } }
  @container (max-width: 280px) { .fn-scene-boite { --sc-echelle: 0.4885; } }
  @container (max-width: 260px) { .fn-scene-boite { --sc-echelle: 0.45; } }
  @container (max-width: 240px) { .fn-scene-boite { --sc-echelle: 0.4115; } }
}

/* Les pages de SERVICE (creation, refonte, back-office...), 24 septembre.
   La scene y prend la colonne de droite de la carte du hero, environ 570 px.
   Le kit reduit les scenes a 74 % sous 78 rem d'ecran : reglage pense pour la
   colonne plus etroite des pages fonctionnalite. Ici la colonne a la place de
   la toile entiere, on la rend donc a sa taille des que le conteneur depasse
   520 px ; en dessous, les paliers du conteneur ci-dessus reprennent la main.
   La boite prend la largeur de la toile et se centre : pleine largeur, la
   toile se calait a gauche. */
.svc-scene { container-type: inline-size; width: 100%; }
.svc-scene .fn-scene-boite {
  width: calc(520px * var(--sc-echelle, 1)); max-width: 100%;
  margin-inline: auto;
}
@supports (container-type: inline-size) {
  @container (min-width: 521px) { .svc-scene .fn-scene-boite { --sc-echelle: 1; } }
}

/* Le TEXTE du hero des pages de service, demande de Théo du 24 septembre
   (revue de la page Création) : « les textes en haut du bloc, et les CTA on
   les voit pas ».
   1. En haut : la carte centrait son texte en hauteur face à la scène, plus
      haute que lui ; il flottait au milieu d'un vide. Il se cale en haut,
      et le surtitre, que .section-head centrait, s'aligne sur le titre.
      Sur tablette et mobile, une colonne : titre et boutons centrés, comme
      partout ailleurs sur le site.
   2. Les boutons : .btn-pill est BLANC et .btn-pill-ghost écrit en blanc,
      pour les hero sombres ; sur cette carte blanche, le premier se lisait
      comme une ligne de texte et le second disparaissait. Même habillage que
      le hero des pages fonctionnalité : bleu plein, et bouton clair bordé.
   Ce fichier n'est chargé que sur les pages qui ont une scène : les autres
   cartes du même gabarit (aperçu gratuit, test de site) ne bougent pas. */
@media (min-width: 901px) {
  .svc-hero--card .container { align-items: start; }
  .svc-hero--card .section-head { align-items: flex-start; }
}
@media (max-width: 900px) {
  .svc-hero--card .section-head { align-items: center; text-align: center; }
  .svc-hero--card .svc-hero-cta { justify-content: center; }
}
.svc-hero--card .svc-hero-cta .btn-pill,
.svc-hero--card .svc-hero-cta .btn-pill-ghost {
  min-height: 48px; padding: 12px 22px; border-radius: 10px;
}
.svc-hero--card .svc-hero-cta .btn-pill { background: var(--blue); color: #fff; }
.svc-hero--card .svc-hero-cta .btn-pill:hover {
  background: var(--blue-deep); color: #fff; transform: translateY(-1px);
}
.svc-hero--card .svc-hero-cta .btn-pill-ghost {
  border-color: var(--line-2); background: var(--paper); color: var(--ink);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.svc-hero--card .svc-hero-cta .btn-pill-ghost:hover {
  border-color: var(--ink); background: var(--paper-2); color: var(--ink);
}
.svc-hero--card .svc-hero-cta .btn-pill:focus-visible,
.svc-hero--card .svc-hero-cta .btn-pill-ghost:focus-visible {
  outline: 2px solid var(--blue-deep); outline-offset: 3px;
}

/* Le minutage commun. Une scène n'écrit que son animation-name. */
.fn-scene [class*="sc-"] {
  animation-duration: 12s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

/* Le curseur, commun à toutes les scènes. Sa trajectoire, elle, est propre à
   chacune : @keyframes sc-cur-<clé>. */
.sc-cur {
  position: absolute; top: 0; left: 0; z-index: 5;
  width: 22px; height: 22px; pointer-events: none;
  color: var(--ink);
}
.sc-cur svg { width: 22px; height: 22px; display: block; }
.sc-cur-onde {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--blue); opacity: 0;
}
@keyframes sc-onde {
  0%, 21%   { transform: scale(.4); opacity: 0; }
  24%       { transform: scale(.4); opacity: .9; }
  30%       { transform: scale(2.2); opacity: 0; }
  100%      { transform: scale(.4); opacity: 0; }
}

/* Le fondu de jonction, entre la fin d'une boucle et le debut de la suivante.

   Il portait une phrase de conclusion en bleu, sur un voile opaque de deux
   secondes. Theo l'a fait retirer le 24 septembre : « c'est horrible ». Il ne
   reste qu'un fondu au blanc d'environ une seconde, pile a la jonction.

   IL COUVRE TOUJOURS LA COUTURE DE LA BOUCLE. Il est opaque de 98,4 % au
   premier pour cent du tour suivant, et c'est dans cette fenetre que chaque
   scene fait son retour en arriere : fondu-de-fin.py y a ramene tous les
   arrets d'animation situes apres 86 %. L'etat final reste donc visible
   jusqu'au fondu, puis la scene repart de son debut, sans qu'on la voie
   rembobiner. Blanc PUR, pas 96 % : a 96 %, le saut se devinait au travers. */
.sc-fin {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: var(--paper, #fff);
  opacity: 0;
}
@keyframes sc-conclure {
  0%, 1%       { opacity: 1; }
  4%, 95%      { opacity: 0; }
  98.4%, 100%  { opacity: 1; }
}

/* Moins de mouvement : on montre l'état d'arrivée, sans rien faire bouger.
   Une scène qui se contente de s'arrêter laisserait un écran vide. */
@media (prefers-reduced-motion: reduce) {
  .fn-scene [class*="sc-"] { animation: none !important; }
  .sc-cur { display: none; }
  /* Le voile ne porte plus de phrase : affiche en permanence, il couvrirait
     la scene d'un rectangle blanc. On le retire, la scene reste immobile. */
  .sc-fin { display: none; }
}