@charset "UTF-8";
/* La vitrine d'Alpboard : ce que voit sur alpboard.com qui n'a pas de session.

   Une carte suisse. Le papier, l'encre, le bleu d'Alpboard ; le relief ombre
   du heros, ses courbes de niveau en bistre, ses toponymes ;
   la legende-index des fonctions ; les annotations en bleu italique. Clair
   partout, et quatre haltes filmees ou la journee passe : le glacier de jour,
   le sommet au soir, le refuge de nuit, la mer de nuages au matin. Sur grand
   ecran, les maquettes entrent en relief et se penchent sous la souris.

   Les maquettes du produit (la liste des clients, le fil d'Alppy, la synthese)
   reprennent ses regles telles que style.css les ecrit, sous `.app`, avec ses
   jetons poses ici sans prefixe : leurs noms ne recouvrent aucun de ceux de la
   vitrine. `.app` y remet les courbes du produit, que `--ease` de la vitrine
   remplace ailleurs. Ce qu'on montre est ce qu'on livre.

   Aucun tiret median, et sur les ronds `background-color`, jamais le
   raccourci : le relief des pastilles tient a `--avatar-lumiere`. */

:root {
  /* La vitrine */
  --papier: #F6F8FB;
  --papier-2: #EEF2F7;
  --encre: #0B1A2E;
  --encre-2: #3D4B5E;
  --encre-3: #5B6878;
  --alp: #0E4DBE;
  --alp-fonce: #0A3A94;
  --lac: #4D84F2;
  --glacier: #DCE7FA;
  --bistre: #9A6A45;
  --filet: #D5DCE6;
  --champ-bord: #8994A3;
  --nuit: #0B1A2E;
  --nuit-texte: #B8C4D6;
  --titre: "Geologica", "Geologica repli", system-ui, sans-serif;
  --texte: "Inter", "Inter repli", system-ui, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gouttiere: clamp(16px, 4vw, 48px);
  --largeur: 1240px;
  --marge-page: max(var(--gouttiere), calc((100% - var(--largeur)) / 2));
  --entre-sections: clamp(72px, 10vw, 140px);
  --entete-h: 68px;
  --ombre-carte: 0 30px 80px -28px rgba(11, 26, 46, .28), 0 2px 8px rgba(11, 26, 46, .05);

  /* Alppy */
  --alppy: #BC1627;
  --alppy-dark: #7F0716;
  --alppy-pale: #FEF5ED;
  --alppy-light: #FADBD6;
  --alppy-neige: #FFFBF5;
  --alppy-encre: #1F0E0F;

  /* Le produit, tel que style.css les declare */
  --cyan: #0E4DBE;
  --cyan-dark: #0A3A94;
  --cyan-pale: #F1F4FB;
  --cyan-light: #E0E8F7;
  --red: #d64545;
  --red-dark: #b93838;
  --red-pale: #fdecec;
  --orange: #FF8A3D;
  --orange-dark: #c96a1f;
  --orange-pale: #fff3e9;
  --green: #2e9e5b;
  --green-dark: #1f7a44;
  --green-pale: #eafaf0;
  --yellow: #c9971f;
  --yellow-pale: #fdf6e3;
  --blue: #3b6fd6;
  --blue-dark: #2c53a1;
  --purple: #7c5cbf;
  --purple-pale: #f2eefa;
  --black: #0e1216;
  --gray-1: #f6f8fa;
  --gray-2: #eceff3;
  --gray-3: #dde2e8;
  --gray-4: #9aa3af;
  --gray-5: #5c6470;
  --gray-6: #3a414b;
  /* Le fond des cartes du produit, sous le nom que lui donne style.css : les
     regles d'Alppy recopiees ici l'appellent ainsi, et un blanc ecrit a la
     main dans chacune divergerait le jour ou le produit le retouche. */
  --surface: #fff;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --fs: .85rem;
  --fs-3xs: .6rem;
  --fs-2xs: .68rem;
  --fs-xs: .75rem;
  --fs-sm: .8rem;
  --fs-md: .9rem;
  --fs-lg: .95rem;
  --fs-xl: 1rem;
  --fs-h3: 1.15rem;
  --fs-h2: 1.3rem;
  --fs-h1: 1.4rem;
  --fs-hero: 1.75rem;
  --espace-3xs: .15rem;
  --espace-2xs: .25rem;
  --espace-xs: .4rem;
  --espace-sm: .6rem;
  --espace: .8rem;
  --espace-md: 1rem;
  --espace-lg: 1.25rem;
  --espace-xl: 1.5rem;
  --espace-2xl: 2rem;
  --espace-3xl: 2.5rem;
  --icon: 16px;
  --icon-xs: 12px;
  --icon-sm: 14px;
  --icon-md: 18px;
  --icon-lg: 20px;
  --icon-xl: 24px;
  --radius-xs: 4px;
  --radius-sm: 7px;
  --radius: 10px;
  --radius-lg: 16px;
  --h-sm: 28px;
  --h-champ: 32px;
  --h-etiquette: 22px;
  --m-tap: 44px;
  --col-statut: calc(3 * var(--h-sm) + 2 * var(--espace-xs));
  --col-echeance: 66px;
  --col-honoraires: 72px;
  --col-fec: 48px;
  --col-exercice: 71px;
  --col-collaborateurs: 30px;
  --col-signataire: 24px;
  --suivi-titre: .06em;
  --suivi-entete: .04em;
  --suivi-serre: .02em;
  --avatar-initiales: .4;
  --avatar-lumiere: linear-gradient(145deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 52%, rgba(14, 18, 22, .16));
  --avatar-relief: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 1px 2px rgba(14, 18, 22, .16);
  --anneau-champ: 0 0 0 3px var(--cyan-light);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 1px rgba(15, 23, 42, .04);
  --shadow-md: 0 6px 20px rgba(15, 23, 42, .07), 0 2px 6px rgba(15, 23, 42, .05);
  --shadow-lg: 0 20px 48px rgba(15, 23, 42, .13), 0 6px 16px rgba(15, 23, 42, .07);
}

/* Les jetons propres a la vitrine, `--vitrine-*`.

   La vitrine est une surface de marque : elle ne charge pas style.css, et ses
   valeurs ne suivent pas l'echelle du produit. Chaque couleur et chaque arrondi
   qui n'avait pas encore de jeton passe donc par un jeton d'ici, au lieu d'etre
   ecrit a la main dans la regle. Une valeur qui avait deja le sien plus haut
   (le papier, l'encre, le bleu d'Alpboard, ou les jetons du produit dans ses
   copies) le prend ; seules les valeurs strictement identiques partagent un
   jeton, et rien n'a ete ramene au barreau voisin : ces jetons disent les
   valeurs telles qu'elles sont, les faire converger changerait le rendu.

   Pas de mode sombre ici : la vitrine est claire partout (`color-scheme:
   light` dans son cadre), ses haltes filmees comprises. */
:root {
  /* Le blanc et le noir. */
  --vitrine-blanc: #fff;
  --vitrine-noir: #000;
  /* Les composantes des teintes reprises en transparence, pour `rgba(var(...),
     alpha)`. Chacune suit son jumeau ecrit en hexadecimal : retoucher l'un,
     c'est retoucher l'autre. */
  --vitrine-blanc-rgb: 255, 255, 255;
  --vitrine-noir-rgb: 0, 0, 0;
  --vitrine-encre-rgb: 11, 26, 46;
  --vitrine-papier-rgb: 246, 248, 251;
  --vitrine-alp-rgb: 14, 77, 190;
  --vitrine-filet-rgb: 213, 220, 230;
  --vitrine-glacier-rgb: 220, 231, 250;
  --vitrine-brume-rgb: 227, 232, 239;
  --vitrine-gris-5-rgb: 92, 100, 112;
  --vitrine-vert-rgb: 46, 158, 91;
  --vitrine-rouge-fonce-rgb: 185, 56, 56;
  /* La brume du heros, et l'ombre de nuit des cartes posees sur les films. */
  --vitrine-brume: #E3E8EF;
  --vitrine-ombre-nuit-rgb: 3, 10, 20;
  /* La feuille de nommage, imprimee a l'encre ardoise. */
  --vitrine-feuille-encre: #1f2733;
  /* Les appareils : l'iPhone, l'iPad et la montre, dessines comme iOS les
     montre (l'icone de l'app, les gris du systeme, la vignette d'une photo). */
  --vitrine-ios-chevron: #C4C4C9;
  --vitrine-ios-separateur: #E3E3E8;
  --vitrine-ios-texte-2: #6C6C72;
  --vitrine-ios-recherche: #EEEEF0;
  --vitrine-ios-recherche-texte: #8A8A90;
  --vitrine-ios-poignee: #5A5A5F;
  --vitrine-ios-doigt-rgb: 142, 142, 150;
  --vitrine-ios-remplissage-rgb: 120, 120, 128;
  --vitrine-vignette-bord: #DADCE2;
  --vitrine-vignette-trait: #C9CED6;
  --vitrine-vignette-trait-2: #DADDE3;
  --vitrine-vignette-coin: #F4F6F9;
  --vitrine-photo-ciel: #9CC0EA;
  --vitrine-photo-horizon: #D6E4F2;
  --vitrine-photo-pre: #7D8C6A;
  --vitrine-photo-sol: #53613F;
  --vitrine-montre-bleu: #4F86EC;
  --vitrine-montre-texte: #C9D1DB;
  /* La super app : le portable, son ecran, son socle, et la banniere. Les
     teintes des tuiles, elles, sont deja une echelle (`--sa-a`, `--sa-b`). */
  --vitrine-portable-reflet: #26344B;
  --vitrine-ardoise-nuit: #3A4A68;
  --vitrine-portable-ciel: #E4EDFF;
  --vitrine-portable-ciel-2: #F6F9FF;
  --vitrine-socle-haut: #EEF1F6;
  --vitrine-socle-milieu: #C9D1DC;
  --vitrine-socle-bas: #A6B0BE;
  --vitrine-banniere-lueur: #7FAEFF;
  /* Les haltes filmees : le cuivre du soir, le chapeau clair sur le film,
     l'icone des garanties, le fond de la tuile d'un sommet. */
  --vitrine-cuivre: #E3A36F;
  --vitrine-chapo-film: #E3EAF3;
  --vitrine-garantie-icone: #8FB3F7;
  --vitrine-tuile-filmee-rgb: 10, 24, 44;
  /* Le ciel du massif du FEC, du haut vers le papier. */
  --vitrine-ciel-1: #CFDDF1;
  --vitrine-ciel-2: #DFE8F5;
  --vitrine-ciel-3: #EAF0F8;
  /* Les arrondis de la vitrine, du filet de pile au cadre de la montre. Ils ne
     prennent pas `--radius*` : ceux-la recopient le produit, et le jour ou
     style.css les retouche, la vitrine n'a pas a bouger avec. */
  --vitrine-rayon-1: 1px;
  --vitrine-rayon-2: 2px;
  --vitrine-rayon-3: 3px;
  --vitrine-rayon-4: 4px;
  --vitrine-rayon-5: 5px;
  --vitrine-rayon-6: 6px;
  --vitrine-rayon-7: 7px;
  --vitrine-rayon-8: 8px;
  --vitrine-rayon-9: 9px;
  --vitrine-rayon-10: 10px;
  --vitrine-rayon-11: 11px;
  --vitrine-rayon-12: 12px;
  --vitrine-rayon-14: 14px;
  --vitrine-rayon-18: 18px;
  --vitrine-rayon-20: 20px;
  --vitrine-rayon-22: 22px;
  --vitrine-rayon-34: 34px;
  --vitrine-rayon-44: 44px;
}

/* Sous `.app`, le produit reprend ses courbes et sa voix. */
.app {
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);
  font-family: var(--sans);
  color: var(--black);
  line-height: 1.5;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ Socle */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete-h) + 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
  overflow-x: clip;
}

img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
p, h1, h2, h3, figure, dl, dd, blockquote { margin: 0; }
a { color: var(--alp); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--alp-fonce); }
[hidden] { display: none !important; }
::selection { background-color: var(--glacier); color: var(--encre); }
:focus-visible { outline: 2px solid var(--alp); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--titre); color: var(--encre); text-wrap: balance; }
p { text-wrap: pretty; }

.visuellement-cache {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.evitement {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--vitrine-rayon-10);
  background-color: var(--encre);
  color: var(--vitrine-blanc);
  font-weight: 600;
  text-decoration: none;
  translate: 0 -200%;
  transition: translate .2s var(--ease);
}
.evitement:focus { translate: 0 0; color: var(--vitrine-blanc); }

.icon { width: var(--icon); height: var(--icon); flex: none; fill: none; stroke: currentColor; }

/* --------------------------------------------------------------- En-tete
   Son dessin est dans vitrine-cadre.css, partage avec les pages de reference.
   Ici, ce qui ne vaut que sur la vitrine : il se pose sur la premiere section
   (qui s'en ecarte d'elle-meme), transparent sur la carte du heros. Sans
   script, il reste pose : c'est vitrine.js qui le rend transparent. */
.entete { margin-bottom: calc(-1 * var(--entete-h)); }
.entete.est-sur-heros { background-color: rgba(var(--vitrine-papier-rgb), 0); box-shadow: 0 1px 0 rgba(var(--vitrine-filet-rgb), 0); }

/* ---------------------------------------------------------------- Sections */
.section {
  position: relative;
  padding-block: var(--entre-sections) 0;
  padding-inline: var(--marge-page);
}
.section-tete { max-width: 48rem; margin-bottom: clamp(36px, 5vw, 64px); }
.section-tete h2 {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -.03em;
}
.chapo {
  max-width: 62ch;
  margin-top: 20px;
  color: var(--encre-2);
  font-size: 1.2rem;
  line-height: 1.55;
}
.section-tete > p + p { margin-top: 16px; }
.section-tete .chapo a { font-weight: 500; }

/* Les titres se composent mot a mot quand ils arrivent (vitrine.js) ; le
   chapeau suit. Sans script, ils sont deja la. */
.a-reveler .mot {
  display: inline-block;
  opacity: 0;
  translate: 0 .45em;
  filter: blur(8px);
  transition: opacity .8s var(--ease), translate .8s var(--ease), filter .8s var(--ease);
  transition-delay: calc(var(--i) * 60ms);
}
.a-reveler.est-vu .mot { opacity: 1; translate: 0 0; filter: blur(0); }
.section-tete:has(.a-reveler) > p {
  opacity: 0;
  translate: 0 14px;
  transition: opacity .8s var(--ease) .35s, translate .8s var(--ease) .35s;
}
.section-tete:has(.est-vu) > p { opacity: 1; translate: 0 0; }

/* Les grilles a deux colonnes : le texte a gauche, qui tient pendant qu'on
   lit a droite. */
:is(.juridique-grille, .espace-grille, .livrables-grille, .tarifs-grille, .questions-grille, .demo-grille) {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
:is(.juridique-grille, .espace-grille, .livrables-grille, .tarifs-grille, .questions-grille, .demo-grille) > .section-tete {
  position: sticky;
  top: calc(var(--entete-h) + 32px);
  margin-bottom: 0;
}
:is(.juridique-note, .livrables-note, .demo-note, .espace-note) {
  margin-top: 24px;
  padding-left: 14px;
  border-left: 2px solid var(--bistre);
  color: var(--encre-2);
  font-size: .95rem;
  line-height: 1.55;
}

/* Les annotations de la carte : bleu, italique, a la plume. */
:is(.repere, .renommage-pourquoi, .toponyme-glacier, .toponyme-lac) {
  font-family: var(--titre);
  font-style: oblique 10deg;
}

/* ------------------------------------------------------------------ Heros
   La carte est une fenetre en kilometres, (--fx, --fy) pour son coin et
   --fw x --fh pour sa taille, cadree comme `object-fit: cover` : --s est le
   nombre de pixels d'un kilometre. Le relief (vitrine-relief.js), l'affiche
   qui en a ete tiree et les toponymes lisent la meme fenetre, donc tombent
   au meme endroit. Sur un telephone, la fenetre se resserre sur les sommets.

   Par defaut (telephone, tablette), la carte est une bande et le texte vient
   dessous. Sur un grand ecran couche, la carte prend tout le heros et le
   texte se pose sur le lac. La fenetre resserree ne vaut que debout : une
   bande couchee, meme etroite, garde la fenetre large, sans quoi elle ne
   montrerait qu'une tranche des pentes, sommets coupes. */
.heros {
  --fx: 0;
  --fy: 0;
  --fw: 16;
  --fh: 10;
  --s: max(100cqw / var(--fw), 100cqh / var(--fh));
  position: relative;
}
@media (orientation: portrait) {
  .heros { --fx: 7.5; --fy: .5; --fw: 8.5; --fh: 8; }
}

.heros-carte {
  position: relative;
  height: 62svh;
  min-height: 340px;
  max-height: 640px;
  container-type: size;
  overflow: clip;
  background-color: var(--papier);
  background-image:
    radial-gradient(90% 80% at 80% 20%, var(--vitrine-brume) 0, rgba(var(--vitrine-brume-rgb), 0) 62%),
    radial-gradient(60% 55% at 16% 84%, var(--glacier) 0, rgba(var(--vitrine-glacier-rgb), 0) 72%);
}
.heros-zoom { position: absolute; inset: 0; }
.heros-relief, .heros-zoom picture, .heros-affiche {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.heros-affiche { object-fit: cover; object-position: 50% 50%; }
.heros-relief { opacity: 0; transition: opacity .6s var(--ease); }
.heros-relief.est-pret { opacity: 1; }

/* La carte s'approche un peu quand on la quitte, vers la Pointe de la
   Liasse : sur grand ecran, ce point ne bouge pas. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .heros-zoom {
      animation: heros-approche linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }
}
@keyframes heros-approche { to { scale: 1.12; } }

/* Les toponymes : du texte, place en kilometres. */
.toponymes { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.toponyme {
  position: absolute;
  left: calc(50cqw + (var(--x) - var(--fx) - var(--fw) / 2) * var(--s));
  top: calc(50cqh + (var(--y) - var(--fy) - var(--fh) / 2) * var(--s));
  display: flex;
  align-items: center;
  gap: 5px;
  translate: -50% -50%;
  font-family: var(--titre);
  line-height: 1.1;
  white-space: nowrap;
  color: var(--encre);
  text-shadow: 0 0 2px var(--papier), 0 0 4px var(--papier), 0 0 7px rgba(var(--vitrine-papier-rgb), .9);
  transition: opacity 1s var(--ease), translate 1s var(--ease);
}
.toponyme-sommet {
  flex-direction: column;
  gap: 1px;
  translate: -50% calc(-100% + 4px);
}
.toponyme-sommet::after {
  content: "";
  order: 3;
  width: 9px;
  height: 8px;
  margin-top: 3px;
  background-color: var(--encre);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.toponyme-sommet .toponyme-nom { font-size: .84rem; font-weight: 600; letter-spacing: -.005em; }
.toponyme-cote {
  font-family: var(--texte);
  font-size: .72rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--encre-2);
}
.toponyme-col { translate: -7px -50%; }
.toponyme-col::before {
  content: ")(";
  font-family: var(--texte);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: -.1em;
}
.toponyme-col .toponyme-nom { font-size: .76rem; font-weight: 500; color: var(--encre-2); }
.toponyme-glacier { rotate: -14deg; }
.toponyme-glacier .toponyme-nom {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--alp);
}
.toponyme-lac .toponyme-nom {
  font-size: 1.05rem;
  font-weight: 450;
  letter-spacing: .26em;
  color: var(--alp);
}
.toponyme-lieu { translate: -3px -50%; }
.toponyme-lieu::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--encre);
}
.toponyme-lieu .toponyme-nom { font-size: .76rem; font-weight: 500; color: var(--encre-2); }
.toponyme-portrait { display: none; }
/* Debout, la fenetre resserree perd le lac et le plan : la combe les
   remplace. Couchee, la bande garde la fenetre large, et ses noms. */
@media (orientation: portrait) {
  .toponyme-portrait { display: flex; }
  .toponyme-lac, .toponyme-lieu:not(.toponyme-portrait) { display: none; }
}
@media (orientation: portrait), (max-width: 760px) {
  /* Pres du bord droit, et sous le glacier : le nom passe a gauche de son
     triangle, et en dessous. */
  .toponyme-repere { align-items: flex-end; translate: calc(-100% + 5px) -4px; }
  .toponyme-repere::after { order: -1; margin: 0 0 3px; }
  /* Serres entre un voisin et le bord : le nom passe a gauche de son
     signe. */
  .toponyme-gauche { flex-direction: row-reverse; }
  .toponyme-col.toponyme-gauche { translate: calc(-100% + 7px) -50%; }
  .toponyme-lieu.toponyme-gauche { translate: calc(-100% + 3px) -50%; }
}
/* Sur grand ecran, le nom passe a droite, sur deux lignes. */
@media (min-width: 1080px) and (orientation: landscape) {
  .toponyme-repere { align-items: flex-start; translate: -5px calc(-100% + 4px); }
  .toponyme-suite { display: block; }
}

/* Avant l'aube, la carte est nue ; les noms s'y posent ensuite, un par un. */
.heros-carte[data-aube="avant"] .toponyme { opacity: 0; }
.heros-carte[data-aube="avant"] .toponyme-sommet:not(.toponyme-repere) { translate: -50% calc(-100% + 10px); }
.toponyme:nth-child(2) { transition-delay: .08s; }
.toponyme:nth-child(3) { transition-delay: .16s; }
.toponyme:nth-child(4) { transition-delay: .24s; }
.toponyme:nth-child(5) { transition-delay: .32s; }
.toponyme:nth-child(6) { transition-delay: .4s; }
.toponyme:nth-child(7) { transition-delay: .48s; }

/* Le cadre : un filet fin. Sa graduation au kilometre, des traits noirs et
   blancs le long des bords gauche et bas, a ete retiree le 1er octobre 2026
   avec le cartouche : trop d'information visuelle autour des montagnes. */
.carte-marges {
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(var(--vitrine-encre-rgb), .32);
  pointer-events: none;
}
.carte-coord {
  position: absolute;
  z-index: 1;
  padding: 2px 6px;
  background-color: var(--papier);
  font-size: .68rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: var(--encre-2);
}
.carte-coord-lat { left: 0; top: 50%; translate: -50% -50%; rotate: -90deg; }
.carte-coord-lon { left: 50%; bottom: 0; translate: -50% 50%; }
.carte-nord {
  position: absolute;
  top: calc(var(--entete-h) - 4px);
  right: 14px;
  width: 16px;
  height: 27px;
  overflow: visible;
  fill: var(--encre);
}
.carte-nord .carte-nord-creux { fill: var(--papier); }
.carte-nord text { font-family: var(--titre); font-size: 9px; font-weight: 700; }


/* Le texte du heros. L'encart de la convocation qui l'accompagnait a ete
   retire le 13 octobre 2026 : il ne disait pas pourquoi il etait la. */
.heros-dedans {
  display: grid;
  gap: 40px;
  padding: 32px var(--gouttiere) 0;
}
.heros-texte { position: relative; isolation: isolate; }
.heros h1 {
  max-width: 9.6em;
  font-size: clamp(2.6rem, 6.2vw, 5.4rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.035em;
}
.heros .chapo { max-width: 36rem; margin-top: 22px; font-size: clamp(1.05rem, 1.4vw, 1.2rem); }
.heros-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.section-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Le tampon de reception, tel que tampon_reception.py le pose : une ligne,
   la mention puis la date, en gras, un filet fin et un coin a peine arrondi,
   le paraphe dessous. Pas de biais : c'est un cachet pose par le logiciel,
   pas un coup de tampon a la main. L'encre est celle du paraphe, a defaut
   le bleu du logiciel. */
.tampon {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 6px 10px 3px;
  border: 1px solid var(--blue);
  border-radius: var(--radius-xs);
  background-color: var(--vitrine-blanc);
  color: var(--blue);
  font-family: var(--sans);
  font-size: .64rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.tampon-paraphe {
  width: 58px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 1080px) and (orientation: landscape) {
  .heros { height: max(680px, 100svh); container-type: size; }
  .heros-carte { position: absolute; inset: 0; height: auto; min-height: 0; max-height: none; }
  .heros-zoom {
    transform-origin:
      calc(50cqw + (14.4 - var(--fx) - var(--fw) / 2) * var(--s))
      calc(50cqh + (4.4 - var(--fy) - var(--fh) / 2) * var(--s));
  }
  .heros-dedans {
    position: relative;
    height: 100%;
    align-items: end;
    padding: calc(var(--entete-h) + 40px) var(--marge-page) max(20cqh, 120px);
  }
  /* Le voile deborde du texte a dessein, mais pas de la page : sans cette
     coupe, il faisait defiler l'accueil de 272 px en largeur au bureau
     (ronde de design du 28 octobre 2026). `clip` et non `hidden`, pour ne
     pas creer de conteneur de defilement. */
  .heros-dedans { overflow-x: clip; }
  /* Un voile de papier sous le texte, pour qu'il se lise sur le lac. */
  .heros-texte::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -28% -30% -22% -40%;
    background-image: radial-gradient(closest-side, rgba(var(--vitrine-papier-rgb), .88), rgba(var(--vitrine-papier-rgb), .6) 55%, rgba(var(--vitrine-papier-rgb), 0));
    pointer-events: none;
  }
}
@media (max-width: 1079px), (orientation: portrait) {
  .heros-dedans { padding-bottom: 8px; }
}
/* Tablette ou telephone couche : la bande est large et basse, les sommets
   touchent son bord haut et passaient sous les liens de l'en-tete. La carte
   commence donc sous l'en-tete, qui reste pose sur le papier. Quand la bande
   est vraiment basse, la fenetre remonte vers les sommets et laisse le lac.
   A cette echelle, le nom du col toucherait la cote de l'aiguille : il passe
   a gauche de son signe, comme sur un telephone. */
@media (max-width: 1079px) and (orientation: landscape) {
  .heros { padding-top: var(--entete-h); }
  .carte-nord { top: 18px; }
  .entete.est-sur-heros { background-color: rgba(var(--vitrine-papier-rgb), .97); box-shadow: 0 1px 0 var(--filet); }
  .toponyme-col.toponyme-gauche { flex-direction: row-reverse; translate: calc(-100% + 7px) -50%; }
}
@media (max-width: 1079px) and (orientation: landscape) and (max-height: 560px) {
  .heros { --fy: .9; --fh: 7; }
  /* L'affiche est tiree sur toute la hauteur (0 a 10) : on la remonte autant
     que la fenetre, sans quoi les noms tomberaient a cote des sommets. */
  .heros-affiche { object-position: 50% 34%; }
}
@media (max-width: 520px) {
  .carte-marges { inset: 8px; }
  .carte-nord { right: 12px; }
}

/* ------------------------------------------------------------ Les maquettes
   Ce qui suit `.app` est la feuille du produit, recopiee regle pour regle
   (static/css/style.css) : la liste et Alppy ont ici le dessin qu'ils ont
   dans le logiciel. Seuls le cadre, les reperes et ce qui tient au fait qu'il
   s'agit d'une demonstration sont propres a la vitrine. */
.maquette { position: relative; }
.app-cadre {
  padding: clamp(10px, 1.6vw, 20px);
  border: 1px solid var(--filet);
  border-radius: var(--vitrine-rayon-20);
  background-color: var(--gray-1);
  box-shadow: var(--ombre-carte);
}

/* Les reperes : sans script, une ligne de notes au-dessus de la liste ; avec,
   chacune se place au-dessus de ce qu'elle designe et y descend d'un filet. */
.maquette-reperes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-bottom: 18px;
}
.repere {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--titre);
  font-size: .86rem;
  font-weight: 450;
  line-height: 1.2;
  color: var(--alp);
  white-space: nowrap;
}
.repere::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--alp);
}
.maquette-reperes.est-place {
  position: relative;
  z-index: 2;
  display: block;
  height: calc(var(--niveaux, 2) * 24px + 14px);
  margin-bottom: 0;
  pointer-events: none;
}
.maquette-reperes.est-place .repere {
  position: absolute;
  left: var(--rx);
  bottom: calc(var(--niveau, 0) * 24px + 14px);
  translate: -3px 0;
  transition: left .5s var(--ease), opacity .3s var(--ease);
}
.maquette-reperes.est-place .repere.est-a-gauche { translate: calc(-100% + 3px) 0; flex-direction: row-reverse; }
.maquette-reperes.est-place .repere::after {
  content: "";
  position: absolute;
  left: 2.5px;
  top: calc(100% - 6px);
  height: calc(var(--rh, 20px) + 6px);
  border-left: 1px dashed var(--alp);
  opacity: .75;
  transition: height .5s var(--ease);
}
.maquette-reperes.est-place .repere.est-a-gauche::after { left: auto; right: 2.5px; }
.maquette-reperes.est-place .repere.est-perdu { opacity: 0; }

/* --------------------------------------------------- La liste des mandats */
.app .tuile {
  border: 1px solid var(--gray-3);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--espace-md) var(--espace-lg);
}
.app .btn-link {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-xs);
  min-height: var(--h-sm);
  line-height: 1.3;
  border: none;
  background: none;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--cyan-dark);
  cursor: pointer;
  text-decoration: none;
  padding: var(--espace-2xs) var(--espace-sm);
  border-radius: var(--radius-sm);
}
.app .btn-link:hover { background: var(--cyan-pale); }
.app .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-xs);
  font-family: var(--sans);
  font-size: var(--fs);
  font-weight: 600;
  color: var(--vitrine-blanc);
  background: var(--cyan);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--espace-sm) var(--espace-lg);
  cursor: pointer;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(var(--vitrine-blanc-rgb), .18);
}
.app .btn-primary.btn-sm { font-size: var(--fs-sm); min-height: var(--h-sm); line-height: 1.3; padding: var(--espace-2xs) var(--espace); }
.app .btn-primary.btn-sm.btn-icon-only,
.app .btn-link.btn-icon-only { padding: var(--espace-2xs); gap: 0; justify-content: center; min-width: var(--h-sm); }
.app :is(.btn-primary, .btn-link) {
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease),
              box-shadow .2s var(--ease), transform .28s var(--ease-spring);
}
.app .btn-primary:hover { background: var(--cyan-dark); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(var(--vitrine-blanc-rgb), .18); transform: translateY(-1px); }
.app :is(.btn-primary, .btn-link):not(:disabled):active { transform: scale(.97); transition-duration: .08s; }
.app :is(.btn-primary, .btn-link):focus-visible { outline-offset: 2px; box-shadow: 0 0 0 5px var(--cyan-pale); }
/* Les gestes que la demonstration ne fait pas gardent leur dessin : grises,
   ils diraient du logiciel qu'il ne sait pas exporter. Ils restent inertes. */
.app :is(.btn-primary, .btn-link):disabled { cursor: default; }
.app .btn-primary:disabled:hover { transform: none; background: var(--cyan); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(var(--vitrine-blanc-rgb), .18); }
.app .btn-link:disabled:hover { background: none; }
/* Le geste a confirmer d'Alppy : Confirmer et Annuler viennent de la gamme
   (ronde de design, 14 octobre 2026). La vitrine ne charge pas style.css :
   les deux dessins y sont recopies a l'identique, a la racine, pour qu'ils ne
   se lisent pas comme une retouche de la gamme dans un contexte. */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-xs);
  font-family: var(--sans);
  font-size: var(--fs);
  font-weight: 600;
  line-height: 1.3;
  color: var(--gray-6);
  background: var(--surface);
  border: 1px solid var(--gray-3);
  border-radius: var(--radius-sm);
  padding: var(--espace-sm) var(--espace-lg);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.btn-secondary:hover { background: var(--gray-1); border-color: var(--gray-4); }
.btn-secondary.btn-sm {
  font-size: var(--fs-sm);
  min-height: var(--h-sm);
  line-height: 1.3;
  padding: var(--espace-2xs) var(--espace);
}
.btn-primary.btn-danger { background: var(--red); color: var(--vitrine-blanc); }
.btn-primary.btn-danger:hover { background: var(--red-dark); }

.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--espace-sm); flex-wrap: wrap; gap: var(--espace-md); }
.toolbar .toolbar-search { padding: var(--espace-2xs) var(--espace); }
.toolbar-group { display: flex; align-items: center; gap: var(--espace-sm); }
.toolbar:has(.toolbar-search-group) > .toolbar-group + .toolbar-group { position: relative; }
.toolbar:has(.toolbar-search-group) > .toolbar-group + .toolbar-group::before {
  content: "";
  position: absolute;
  left: calc(var(--espace-md) / -2);
  top: 50%;
  margin-top: calc(var(--h-sm) / -2);
  width: 1px;
  height: var(--h-sm);
  background: var(--gray-3);
}
.toolbar .filtre-tuiles { padding-left: var(--tuile-anneau); }
.toolbar-label { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--suivi-titre); color: var(--gray-5); }
.toolbar-count { font-size: var(--fs-2xs); color: var(--gray-5); }
.toolbar-search-group { flex: 1; min-width: 200px; }
.toolbar-search {
  display: flex;
  align-items: center;
  gap: var(--espace-xs);
  width: 100%;
  max-width: 320px;
  padding: var(--espace-sm) var(--espace);
  border: 1px solid var(--gray-3);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.toolbar-search:focus-within { border-color: var(--cyan); box-shadow: var(--anneau-champ); }
/* Le halo du champ ne tranche pas assez sur le blanc (1,26:1) : le contour
   de 2 px du reste de la page s'y ajoute, au clavier comme au clic. */
.toolbar-search:has(input:focus-visible) { outline: 2px solid var(--alp); outline-offset: 1px; }
.toolbar-search .icon { color: var(--gray-5); flex-shrink: 0; }
.toolbar-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--sans); font-size: var(--fs-md); line-height: normal; color: var(--black); }
.toolbar-search input::-webkit-search-cancel-button { display: none; }
.toolbar-search-clear { display: flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 24px; min-height: 24px; padding: 0; border: none; background: none; color: var(--gray-5); cursor: pointer; }
.toolbar-search-clear[hidden] { display: none; }

.filtre-tuiles { --tuile-anneau: 4px; display: flex; align-items: center; gap: calc(var(--espace-xs) + 2 * var(--tuile-anneau)); }
.filtre-tuile {
  position: relative;
  --avatar-d: 34px;
  width: var(--avatar-d);
  height: var(--avatar-d);
  border: none;
  padding: 0;
  border-radius: 999px;
  color: var(--vitrine-blanc);
  font-family: var(--sans);
  font-size: calc(var(--avatar-d) * var(--avatar-initiales));
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: .4;
  transition: opacity .1s, transform .1s;
}
.filtre-tuile:hover { transform: scale(1.08); }
.filtre-tuile.selected { opacity: 1; box-shadow: var(--avatar-relief), 0 0 0 2px var(--vitrine-blanc), 0 0 0 var(--tuile-anneau, 4px) var(--gray-6); }
.filtre-tuile-check {
  display: none;
  position: absolute;
  --coche-d: calc(var(--avatar-d) * .44);
  bottom: calc(var(--coche-d) * -.2);
  right: calc(var(--coche-d) * -.2);
  width: var(--coche-d);
  height: var(--coche-d);
  background-color: var(--surface);
  border-radius: 999px;
  color: var(--cyan-dark);
}
.filtre-tuile.selected .filtre-tuile-check { display: block; }
.filtre-etats { display: flex; align-items: center; gap: var(--espace-2xs); margin-left: var(--espace-sm); padding-left: var(--espace-sm); border-left: 1px solid var(--gray-3); }

.dossier-list-header { display: flex; align-items: center; padding: var(--espace-xs) var(--espace-sm); }
.dossier-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-2xs);
  background: none;
  border: none;
  padding: 0;
  font-family: var(--sans);
  font-size: var(--fs-2xs);
  line-height: normal;
  text-transform: uppercase;
  letter-spacing: var(--suivi-titre);
  color: var(--gray-5);
  cursor: pointer;
}
.dossier-sort-btn:hover, .dossier-sort-btn.active { color: var(--gray-6); }
.dossier-list-header .dossier-sort-btn[data-sort="etat"] { width: var(--col-statut); flex: none; justify-content: flex-end; margin-right: var(--espace-xs); }
.dossier-list-header .dossier-sort-btn[data-sort="echeance"] { margin-left: auto; width: var(--col-echeance); flex: none; justify-content: center; white-space: nowrap; margin-right: var(--espace-xs); }
.dossier-list-header .dossier-sort-btn[data-sort="cloture"] { width: var(--col-exercice); flex: none; white-space: nowrap; margin-right: calc(var(--col-collaborateurs) + var(--col-signataire) + var(--espace-xs) * 2 + var(--espace) + var(--icon-sm)); }
.dossier-sort-icon { width: var(--icon-xs); height: var(--icon-xs); opacity: 0; transform: rotate(-90deg); transition: transform .15s var(--ease); }
.dossier-sort-btn.active .dossier-sort-icon { opacity: 1; }
.dossier-sort-btn[data-dir="desc"] .dossier-sort-icon { transform: rotate(90deg); }

.dossier-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gray-3); }
.dossier-item {
  --dossier-logo-l: 34px;
  --dossier-voie-logo: calc(var(--dossier-logo-l) + var(--espace));
  --dossier-voie-nom: calc(var(--espace-2xs) + var(--icon-sm) + var(--espace-3xs) + var(--espace-xs) + var(--espace-sm) + var(--dossier-voie-logo) + var(--icon-md) + var(--espace));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-xs);
  border-bottom: 1px solid var(--gray-3);
}
.dossier-item[hidden] { display: none; }
.dossier-item:not([hidden]):not(:has(~ .dossier-item:not([hidden]))) { border-bottom: 0; }
.dossier-link {
  display: flex;
  align-items: center;
  gap: var(--espace);
  padding: var(--espace-2xs) var(--espace-sm);
  text-decoration: none;
  color: var(--black);
  border-radius: var(--radius-sm);
  transition: background .15s var(--ease);
  flex: 1;
  min-width: 0;
  cursor: default;
}
.dossier-link:hover { background: var(--cyan-pale); }
.dossier-logo-cell { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--dossier-logo-l); height: 22px; }
.dossier-list-sans-logos .dossier-logo-cell, .dossier-list-sans-logos .dossier-groupe-chip { display: none; }
.dossier-icon { width: var(--icon-md); height: var(--icon-md); }
.dossier-icon-entreprise { color: var(--purple); }
.dossier-icon-association { color: var(--blue); }
.dossier-nom { font-weight: 600; }
.dossier-avatar, .filtre-tuile { background-image: var(--avatar-lumiere); box-shadow: var(--avatar-relief); letter-spacing: var(--suivi-serre); background-clip: padding-box; }
.filtre-tuile.selected { box-shadow: var(--avatar-relief), 0 0 0 2px var(--vitrine-blanc), 0 0 0 var(--tuile-anneau, 4px) var(--gray-6); }
.dossier-avatar {
  --avatar-d: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--avatar-d);
  height: var(--avatar-d);
  flex: none;
  border-radius: 999px;
  color: var(--vitrine-blanc);
  font-size: calc(var(--avatar-d) * var(--avatar-initiales));
  font-weight: 700;
}
.dossier-collaborateurs-slot { width: var(--col-collaborateurs); flex: none; display: flex; align-items: center; justify-content: flex-start; }
.dossier-collaborateurs-icones { position: relative; width: var(--col-collaborateurs); height: 19px; }
.dossier-avatar-collaborateur { position: absolute; top: 0; --avatar-d: 19px; }
.dossier-avatar-collaborateur:nth-child(1) { left: 0; z-index: 2; }
.dossier-avatar-collaborateur:nth-child(2) { left: 11px; z-index: 1; }
.dossier-avatar-collaborateur-plus { background-color: var(--gray-5); font-size: calc(var(--avatar-d) * .38); }
.dossier-cabinet-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-xs);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--suivi-serre);
  color: var(--vitrine-blanc);
}
.dossier-audit-badge { display: inline-flex; align-items: center; flex: none; color: var(--purple); background: var(--purple-pale); border: 1px solid var(--purple); border-radius: var(--radius-sm); padding: var(--espace-3xs) var(--espace-2xs); }
.dossier-audit-badge .icon { width: var(--icon-sm); height: var(--icon-sm); }
.dossier-conso-badge { display: inline-flex; align-items: center; flex: none; color: var(--yellow); background: var(--yellow-pale); border: 1px solid var(--yellow); border-radius: var(--radius-sm); padding: var(--espace-3xs) var(--espace-2xs); }
.dossier-conso-badge .icon { width: var(--icon-sm); height: var(--icon-sm); }
.etiquette-fec { display: inline-flex; align-items: stretch; flex: none; font-size: var(--fs-xs); font-weight: 600; line-height: 1.4; color: var(--gray-5); border: 1px solid currentColor; border-radius: var(--radius-xs); }
.etiquette-fec-sigle { display: flex; align-items: center; padding: 0 var(--espace-3xs); background: currentColor; border-radius: calc(var(--radius-xs) - 1px) 0 0 calc(var(--radius-xs) - 1px); font-size: var(--fs-3xs); font-weight: 700; letter-spacing: var(--suivi-titre); -webkit-text-fill-color: var(--surface); }
.etiquette-fec-sigle:last-child { border-radius: calc(var(--radius-xs) - 1px); }
.etiquette-fec-nombre { flex: 1; min-width: 2ch; padding: 0 var(--espace-3xs); box-sizing: content-box; text-align: center; font-variant-numeric: tabular-nums; }
.dossier-fec-count { flex: none; margin-left: auto; position: relative; cursor: default; }
.dossier-fec-count-vide { visibility: hidden; }
/* Les honoraires : reste a facturer, reste a encaisser, comme dans la liste
   du produit. Les montants de la maquette sont inventes. */
.dossier-honoraires-slot { width: var(--col-honoraires); flex: none; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; line-height: 1.2; font-variant-numeric: tabular-nums; font-size: var(--fs-xs); }
.dossier-honoraires { white-space: nowrap; }
.dossier-honoraires-facturer { color: var(--gray-5); }
.dossier-honoraires-encaisser[data-etat="encours"] { color: var(--blue-dark); }
.dossier-honoraires-encaisser[data-etat="urgent"] { color: var(--red-dark); font-weight: 600; }
.dossier-honoraires-slot + .dossier-fec-count { margin-left: 0; width: var(--col-fec); box-sizing: border-box; justify-content: center; }
.dossier-list-sans-logos .dossier-honoraires-slot { display: none; }
.dossier-list-sans-logos .dossier-honoraires-slot + .dossier-fec-count { margin-left: auto; }
.dossier-hono-synthese { margin-left: auto; display: flex; align-items: baseline; gap: var(--espace); font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; white-space: nowrap; line-height: normal; }
.dossier-hono-synthese[hidden] { display: none; }
.dossier-hono-synthese:not([hidden]) + .dossier-sort-btn[data-sort="echeance"] { margin-left: calc(var(--espace) * 2 + var(--col-fec)); }
.dossier-hono-total-titre { color: var(--gray-5); text-transform: uppercase; letter-spacing: var(--suivi-titre); }
.dossier-hono-total-valeur { font-weight: 600; color: var(--gray-5); }
.dossier-hono-total-valeur[data-total="retard"][data-alerte="1"] { color: var(--red-dark); }
/* Le logiciel les retire a 720 px ; la maquette, plus etroite que la fenetre
   et passee en liste compacte des 820 px, les retire avec elle. */
@media (max-width: 820px) { .dossier-hono-synthese { display: none; } }
.dossier-groupe-chip {
  flex: none;
  padding: var(--espace-3xs) var(--espace-xs);
  border: 1px solid var(--gray-3);
  border-radius: var(--radius-xs);
  background: var(--gray-1);
  font-size: var(--fs-2xs);
  color: var(--gray-5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12rem;
}
.dossier-prospect-badge { display: inline-flex; align-items: center; justify-content: center; gap: var(--espace-2xs); box-sizing: border-box; height: var(--h-etiquette); padding: 0 var(--espace-sm); border: 1px solid transparent; border-radius: 999px; font-family: var(--sans); font-size: var(--fs-2xs); font-weight: 600; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; vertical-align: middle; background: var(--orange-pale); color: var(--orange-dark); }
.dossier-statut-group { display: flex; align-items: center; gap: var(--espace-xs); flex: none; }
.dossier-statut-slot { width: var(--col-statut); display: flex; align-items: center; justify-content: flex-end; flex: none; }
.dossier-chevron { width: var(--icon-sm); height: var(--icon-sm); color: var(--gray-4); }
.dossier-etat-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid var(--gray-3); border-radius: var(--radius-sm); background: var(--surface); transition: background-color .3s var(--ease), border-color .3s var(--ease); }
.dossier-etat-lock { width: var(--icon-xs); height: var(--icon-xs); color: var(--gray-5); }
.dossier-etat-badge-urgent { border-color: var(--orange); background: var(--orange-pale); }
.dossier-etat-badge-en_cours { border-color: var(--green); background: var(--green-pale); }
.dossier-etat-badge-termine { background: var(--gray-1); }
.dossier-echeance-slot { width: var(--col-echeance); flex: none; display: flex; align-items: center; justify-content: flex-start; }
/* Ce dont on compte les jours : la marque CAC avant l'emission du rapport, le
   cadenas blanc ensuite, jusqu'a la cloture du dossier. */
.dossier-echeance-verrou { flex: none; align-self: center; width: var(--icon-xs); height: var(--icon-xs); margin-right: var(--espace-3xs); color: var(--gray-5); transform: scale(1.28); }
.dossier-echeance-marque { flex: none; align-self: center; width: var(--icon-xs); height: var(--icon-xs); margin-right: var(--espace-3xs); color: var(--red); }
.dossier-exercice-slot { width: var(--col-exercice); flex: none; display: flex; align-items: center; justify-content: flex-start; white-space: nowrap; }
.dossier-signataire-slot { width: var(--col-signataire); flex: none; display: flex; align-items: center; justify-content: flex-end; }
.dossier-signataire-slot .dossier-avatar { --avatar-d: 24px; }
.dossier-exercice-cloture { display: block; font-size: var(--fs-xs); color: var(--gray-5); }

.dossier-echeance-ancre { position: relative; display: flex; align-items: center; cursor: default; }
.dossier-echeance-resume {
  position: absolute;
  bottom: calc(100% + .5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: none;
  flex-direction: column;
  gap: var(--espace-3xs);
  width: max-content;
  max-width: 320px;
  padding: var(--espace-sm) var(--espace);
  background: var(--surface);
  border: 1px solid var(--gray-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-weight: 400;
  text-align: left;
  pointer-events: none;
  animation: surface-entre .2s var(--ease) backwards;
  transform-origin: top center;
}
.dossier-echeance-ancre:hover .dossier-echeance-resume, .dossier-echeance-ancre:focus-visible .dossier-echeance-resume { display: flex; }
.dossier-echeance-resume-titre { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--suivi-titre); color: var(--gray-5); white-space: nowrap; }
.dossier-echeance-resume-date { font-size: var(--fs-sm); font-weight: 600; color: var(--black); white-space: nowrap; }
@keyframes surface-entre { from { opacity: 0; translate: 0 -4px; scale: .98; } }

.row-toggle { display: inline-flex; align-items: center; gap: var(--espace-xs); cursor: pointer; user-select: none; background: none; border: none; font: inherit; color: inherit; padding: 0; }
.row-toggle .arrow { display: inline-block; transition: transform .15s var(--ease); color: var(--gray-4); width: var(--icon-sm); height: var(--icon-sm); }
.row-toggle.open .arrow, .row-toggle[aria-expanded="true"] .arrow { transform: rotate(90deg); }
.dossier-exercices-toggle { flex: none; padding: var(--espace-2xs) var(--espace-3xs) var(--espace-2xs) var(--espace-2xs); }
.dossier-exercices { flex-basis: 100%; list-style: none; margin: 0; padding: 0 var(--espace-sm) var(--espace-sm) var(--dossier-voie-nom); background: var(--gray-1); }
.dossier-exercice { display: flex; align-items: center; gap: var(--espace); padding: var(--espace-xs) 0; }
.dossier-exercice-lien { display: flex; flex-direction: column; text-decoration: none; color: var(--black); min-width: 8rem; }
.dossier-exercice-titre { font-size: var(--fs-sm); font-weight: 500; }
.dossier-exercice-etat { display: flex; align-items: center; }

.avancement-lock-badge, .filtre-etat-tuile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--h-sm);
  height: var(--h-sm);
  flex: none;
  padding: 0;
  border: 1px solid var(--gray-3);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.filtre-etat-tuile { cursor: pointer; --seg-voile: .45; transition: background .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease); }
.filtre-etat-tuile > * { opacity: var(--seg-voile, 1); transition: opacity .15s var(--ease); }
.filtre-etat-tuile:hover { --seg-voile: .85; transform: scale(1.08); }
.filtre-etat-tuile.selected[data-etat="urgent"] { --seg-voile: 1; border-color: var(--orange); background: var(--orange-pale); }
.filtre-etat-tuile.selected[data-etat="en_cours"] { --seg-voile: 1; border-color: var(--green); background: var(--green-pale); }
.filtre-etat-tuile.selected[data-etat="termine"] { --seg-voile: 1; border-color: var(--gray-4); background: var(--gray-1); }
.avancement-dot { width: 9px; height: 9px; border-radius: 999px; transition: width .15s var(--ease), height .15s var(--ease); }
.avancement-dot-urgent { background: var(--orange); }
.avancement-dot-encours { background: var(--green); }
.filtre-etat-tuile.selected .avancement-dot { width: 12px; height: 12px; }
.avancement-lock-icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--gray-5); }
.avancement-lock-badge { background: var(--gray-1); }
.avancement-lock-badge .avancement-lock-icon { color: var(--black); }
.dossier-note-recherche { margin: 0; padding: var(--espace-xs) var(--espace-2xs); font-size: var(--fs-xs); color: var(--gray-5); }

.etat-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--espace-xs);
  max-width: 34rem;
  margin: 0 auto;
  padding: var(--espace-xl) var(--espace-lg);
  color: var(--gray-5);
  font-size: var(--fs-sm);
  line-height: 1.55;
  list-style: none;
}
.etat-vide-rond {
  flex: none;
  width: calc(var(--h-champ) * 1.6);
  height: calc(var(--h-champ) * 1.6);
  margin-bottom: var(--espace-2xs);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background-color: var(--cyan-light);
  background-image: var(--avatar-lumiere);
  box-shadow: var(--avatar-relief);
  color: var(--cyan-dark);
}
.etat-vide-titre { margin: 0; font-size: var(--fs-md); font-weight: 600; color: var(--gray-6); }
.etat-vide-texte { margin: 0; }
.etat-vide-action { margin-top: var(--espace-xs); text-decoration: none; }
.dessin { position: relative; flex: none; display: block; width: var(--dessin-l); height: var(--dessin-h); margin-bottom: var(--espace-xs); }
.dessin-trait, .dessin-accent { position: absolute; inset: 0; -webkit-mask: var(--dessin-masque) center / contain no-repeat; mask: var(--dessin-masque) center / contain no-repeat; }
.dessin-trait { --dessin-masque: var(--dessin-fichier-trait); background: var(--gray-4); }
.dessin-accent { --dessin-masque: var(--dessin-fichier-accent); background: var(--cyan); }
.dessin-boussole { --dessin-l: 4.98rem; --dessin-h: 6.875rem; --dessin-fichier-trait: url("/static/dessins/boussole.svg"); --dessin-fichier-accent: url("/static/dessins/boussole-accent.svg"); }

/* Le compte a rebours, en volets d'aeroport : la copie de style.css, carte
   claire et volets pales depuis le 1er octobre 2026. */
.arrete-rebours { float: left; width: 3.1rem; margin: 0 var(--espace) var(--espace-xs) 0; border: 1px solid var(--gray-3); border-radius: var(--radius-sm); overflow: hidden; text-align: center; background: var(--surface); }
.dossier-echeance-slot .arrete-rebours.dossier-echeance { float: none; width: auto; margin: 0; border: 0; background: none; }
.dossier-echeance-slot .arrete-rebours-compte { padding: 0; }
.dossier-echeance-slot .arrete-flap { font-size: var(--fs-xs); }
.arrete-rebours-compte { display: flex; justify-content: center; gap: 1px; padding: var(--espace-3xs) var(--espace-3xs) var(--espace-2xs); line-height: 1; }
.arrete-flap {
  flex: none;
  min-width: .72em;
  padding: var(--espace-3xs) 0;
  border-radius: var(--vitrine-rayon-2);
  background-color: var(--gray-2);
  background-image: linear-gradient(color-mix(in srgb, currentColor 20%, transparent),
                                    color-mix(in srgb, currentColor 20%, transparent));
  background-size: 100% 1px;
  background-position: center;
  background-repeat: no-repeat;
  font-family: var(--mono);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--gray-6);
}
.arrete-rebours[data-volets="4"] .arrete-flap { font-size: var(--fs-sm); }
.arrete-rebours[data-volets="mot"] .arrete-flap { min-width: 0; padding: var(--espace-3xs) var(--espace-2xs); font-size: var(--fs-2xs); }
.dossier-echeance-slot .arrete-rebours[data-volets="mot"] .arrete-flap { font-size: var(--fs-3xs); }
.arrete-rebours[data-urgence="loin"] .arrete-flap { color: var(--green-dark); background-color: var(--green-pale); }
.arrete-rebours[data-urgence="proche"] .arrete-flap { color: var(--orange-dark); background-color: var(--orange-pale); }
.arrete-rebours[data-urgence="retard"] .arrete-flap, .arrete-rebours[data-urgence="aujourdhui"] .arrete-flap { color: var(--red-dark); background-color: var(--red-pale); }
.arrete-rebours[data-urgence="passe"] { opacity: .6; }

/* Une ligne qu'Alppy vient d'ecrire s'eclaire un instant. */
@keyframes ligne-touchee { 0%, 45% { background-color: var(--alppy-pale); } 100% { background-color: transparent; } }
.dossier-item.est-touchee { animation: ligne-touchee 2.6s var(--ease); }

@media (max-width: 820px) {
  .maquette-reperes, .maquette-reperes.est-place { display: none; }
  .app-cadre { padding: 0; border: 0; background-color: transparent; box-shadow: none; }
  .toolbar { flex-wrap: wrap; }
  .toolbar-group-export, .toolbar-group:has(#btn-deplier-tout) { display: none; }
  .toolbar:has(.toolbar-search-group) > .toolbar-group + .toolbar-group::before { display: none; }
  .toolbar-search-group { flex-basis: 100%; order: 2; }
  .toolbar-search { max-width: none; }
  .toolbar-group:has(.filtre-tuiles) { order: 3; flex-wrap: wrap; }
  .filtre-etats { margin-left: 0; padding-left: 0; border-left: 0; }
  .dossier-list-header {
    display: flex;
    align-items: center;
    gap: var(--espace-2xs);
    padding: var(--espace-3xs);
    margin-bottom: var(--espace-sm);
    background: var(--gray-2);
    border: 1px solid var(--gray-3);
    border-radius: 999px;
  }
  .dossier-list-header .dossier-sort-btn[data-sort] {
    flex: 1;
    min-width: 0;
    width: auto;
    min-height: var(--h-sm);
    margin: 0;
    justify-content: center;
    padding: 0 var(--espace-xs);
    border-radius: 999px;
    font-size: var(--fs-xs);
    text-transform: none;
    letter-spacing: normal;
  }
  .dossier-list-header .dossier-sort-btn.active { background: var(--surface); color: var(--black); font-weight: 600; box-shadow: var(--shadow-sm); }
  .dossier-list-header .dossier-sort-btn:not(.active) .dossier-sort-icon { display: none; }
  .dossier-list { border: 1px solid var(--gray-3); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm); }
  .dossier-list > .dossier-item { border-bottom-color: var(--gray-2); }
  .tuile-liste,
  .app .tuile.tuile-liste { padding: 0; border: 0; background: none; }
  .dossier-link {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--espace-xs);
    row-gap: var(--espace-2xs);
    padding: var(--espace-sm);
    min-height: 58px;
  }
  .dossier-logo-cell, .dossier-groupe-chip, .dossier-audit-badge, .dossier-prospect-badge, .dossier-conso-badge { display: none; }
  .dossier-nom {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
  }
  .dossier-icon { grid-column: 1; grid-row: 2; }
  .dossier-fec-count { grid-column: 2; grid-row: 2; font-size: var(--fs-2xs); margin-left: 0; }
  .dossier-statut-group { grid-column: 3; grid-row: 2; justify-self: start; flex-wrap: wrap; gap: var(--espace-xs); margin-left: 0; }
  .dossier-statut-slot { width: auto; }
  .dossier-chevron { display: none; }
  .dossier-exercices { padding-left: var(--espace-sm); }
}

/* ----------------------------------------------------------------- Alppy */
.alppy-scene {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}

/* La frise : le calendrier de la mission, du jour de cloture a l'assemblee. */
.frise { margin: 0; padding-top: 6px; }
.frise-tete { display: flex; flex-direction: column; gap: 2px; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--filet); }
.frise-mandat { font-family: var(--titre); font-size: 1.15rem; font-weight: 650; letter-spacing: -.01em; }
.frise-exercice { font-size: .88rem; color: var(--encre-3); }
.frise-etapes { position: relative; margin: 0; padding: 0 0 0 30px; list-style: none; }
.frise-etapes::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  border-left: 2px dotted var(--champ-bord);
}
.frise-etape, .frise-aujourdhui {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 20px;
  transition: opacity .5s var(--ease);
}
.frise-etape.est-passee::before {
  content: "";
  position: absolute;
  left: -23px;
  top: 10px;
  bottom: -10px;
  width: 2px;
  background-color: var(--encre-2);
}
.frise-point {
  position: absolute;
  left: -30px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--champ-bord);
  background-color: var(--papier);
}
.frise-etape.est-passee .frise-point { border-color: var(--encre-2); background-color: var(--encre-2); box-shadow: inset 0 0 0 3px var(--papier); }
.frise-aujourdhui .frise-point { border-color: var(--alp); background-color: var(--alp); box-shadow: 0 0 0 5px rgba(var(--vitrine-alp-rgb), .14); }
.frise-libelle { font-weight: 500; }
.frise-etape.est-a-venir .frise-libelle { color: var(--encre-2); }
.frise-aujourdhui .frise-libelle { font-family: var(--titre); font-weight: 600; color: var(--alp); }
.frise-date { flex: none; font-size: .88rem; font-variant-numeric: tabular-nums; color: var(--encre-3); }
.frise-aujourdhui .frise-date { color: var(--alp); }
.frise-etape.est-retiree { opacity: .45; }
.frise-etape.est-retiree .frise-libelle { text-decoration: line-through; text-decoration-color: var(--alppy); }
.frise-etape.est-retiree .frise-point { border-color: var(--alppy); border-style: dashed; }
.frise-note { margin-top: 4px; padding-left: 30px; font-size: .88rem; line-height: 1.55; color: var(--encre-3); }

/* L'assistant, dans sa couleur. La maquette suit le panneau d'Alppy tel
   qu'il est dans le produit depuis le 28 septembre 2026 : l'onglet en tete,
   la marque et la mention IA a l'accueil, la mascotte qui reflechit pendant
   l'attente, chaque reponse signee et suivie de ses actions, la portee et le
   modele sous le champ. Les regles d'Alppy viennent de style.css ; ce qui
   s'en ecarte le dit en commentaire. */
.alppy {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--alppy-light);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--ombre-carte);
}

/* L'en-tete du panneau : l'onglet Alppy dans sa piste, et a droite les trois
   gestes du produit (historique, nouvelle conversation, telechargement),
   montres sans etre cliquables. L'onglet Ticket n'y est pas : la vitrine ne
   presente que l'assistant, et un onglet qui ne mene nulle part promettrait
   ce que la page ne tient pas. */
.alppy-entete {
  display: flex;
  align-items: center;
  gap: var(--espace-xs);
  padding: var(--espace-xs) var(--espace-sm);
  border-bottom: 1px solid var(--alppy-light);
  background-color: var(--alppy-pale);
}
.alppy-bascule {
  display: inline-flex;
  padding: var(--espace-3xs);
  border-radius: var(--radius);
  background-color: var(--surface);
}
.alppy-onglet {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-xs);
  padding: var(--espace-2xs) var(--espace-sm);
  border-radius: var(--radius-sm);
  background-color: var(--alppy);
  color: var(--vitrine-blanc);
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.alppy-onglet .icon { width: var(--icon-sm); height: var(--icon-sm); }
.alppy-entete-actions { display: flex; align-items: center; margin-left: auto; }
.alppy-entete-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--h-sm);
  height: var(--h-sm);
  border-radius: var(--radius-sm);
  color: var(--gray-5);
}
.alppy-entete-action .icon { width: var(--icon-sm); height: var(--icon-sm); }

.alppy-fil {
  display: flex;
  flex-direction: column;
  gap: var(--espace-lg);
  padding: var(--espace-md);
  background-color: var(--alppy-pale);
}
.alppy.est-anime .alppy-fil { height: 390px; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
.alppy.est-anime .alppy-echange:not(.est-montre) { display: none; }
.alppy-echange { display: flex; flex-direction: column; gap: var(--espace-sm); }
.alppy.est-anime .alppy-echange.est-montre .chatbot-bulle-moi,
.alppy-accueil > :is(.alppy-accueil-phrase, .alppy-accueil-note) { animation: alppy-bloc-monte .32s var(--ease) both; }

/* L'accueil d'un fil vide : la marque (la mascotte qui se dessine, puis le
   mot), la phrase, les suggestions, et la mention qu'Alppy est une IA, que
   le produit porte au titre de l'article 50 de l'AI Act. */
.alppy-accueil { flex: none; align-self: stretch; display: flex; flex-direction: column; gap: var(--espace-sm); padding: var(--espace-md); border: 1px solid var(--alppy-light); border-radius: var(--radius); background-color: var(--surface); }
.alppy-accueil-phrase { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--gray-6); }
.alppy-accueil-note { margin: 0; font-size: var(--fs-2xs); color: var(--gray-5); }
.alppy-accueil > .alppy-accueil-phrase { animation-delay: .06s; }
.alppy-accueil > .alppy-accueil-note { animation-delay: .3s; }
.alppy-marque { --marque-h: 36px; display: flex; align-items: flex-start; gap: calc(var(--marque-h) * .151); }
.alppy-marque > .alppy-mascotte { width: auto; height: var(--marque-h); aspect-ratio: 530.4 / 437.65; }
.alppy-marque-mot { display: block; flex: none; width: auto; height: calc(var(--marque-h) * .695); margin-top: calc(var(--marque-h) * .2695); }
.alppy-accueil .alppy-marque-mot { animation: alppy-bloc-monte .32s .5s var(--ease) both; }
/* Le dessin ne part qu'une fois le panneau sous les yeux : joue au chargement,
   il serait fini avant qu'on descende jusqu'a lui. `est-vu` est pose par
   vitrine.js ; sans script, rien n'est suspendu. */
.alppy.est-anime:not(.est-vu) .alppy-accueil :is(.alppy-mascotte, .alppy-mascotte *, .alppy-marque-mot, .alppy-accueil-phrase, .alppy-accueil-note, .alppy-suggestion) { animation-play-state: paused; }
.alppy-suggestions { display: flex; flex-wrap: wrap; gap: var(--espace-2xs); }
.alppy-suggestion {
  padding: var(--espace-2xs) var(--espace-sm);
  border: 1px solid var(--alppy-light);
  border-radius: 999px;
  background: var(--alppy-pale);
  font-family: var(--sans);
  font-size: var(--fs-xs);
  color: var(--alppy-dark);
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .2s var(--ease-spring);
  animation: alppy-bloc-monte .32s var(--ease) both;
}
.alppy-suggestion:nth-child(1) { animation-delay: .14s; }
.alppy-suggestion:nth-child(2) { animation-delay: .2s; }
.alppy-suggestion:nth-child(3) { animation-delay: .26s; }
.alppy-suggestion:nth-child(4) { animation-delay: .32s; }
.alppy-suggestion:nth-child(5) { animation-delay: .38s; }
.alppy-suggestion:hover { background: var(--alppy-light); border-color: var(--alppy); transform: translateY(-1px); }
.alppy-suggestion:active { transform: scale(.97); transition-duration: .08s; }
.alppy-suggestion:focus-visible { outline: 2px solid var(--alppy); outline-offset: 2px; box-shadow: 0 0 0 3px var(--alppy-light); border-color: var(--alppy); }
.alppy-suggestion[aria-pressed="true"],
.alppy-suggestion[aria-disabled="true"][aria-pressed="true"]:hover { background: var(--alppy-light); }
.alppy-suggestion:disabled { cursor: default; }
/* Le script les rend inertes par aria-disabled, pas par disabled : une
   suggestion desactivee sous le focus le rendrait au document. */
.alppy-suggestion[aria-disabled="true"] { cursor: default; }
.alppy-suggestion[aria-disabled="true"]:hover { background: var(--alppy-pale); border-color: var(--alppy-light); transform: none; }
.alppy-suggestion[aria-disabled="true"]:not([aria-pressed="true"]) { opacity: .6; }
@keyframes alppy-bloc-monte { from { opacity: 0; translate: 0 6px; } }

/* La question tient dans sa bulle au corps du produit : plus petite que la
   reponse, qui est ce qu'on vient lire. */
.chatbot-bulle-moi { align-self: flex-end; max-width: 85%; margin: 0; padding: var(--espace-xs) var(--espace-md); border-radius: var(--radius-lg); background: var(--alppy-light); color: var(--alppy-dark); font-size: var(--fs-sm); line-height: 1.5; white-space: pre-wrap; }
.chatbot-bulle-assistant { align-self: stretch; color: var(--gray-6); font-size: var(--fs-md); line-height: 1.6; }
.chatbot-bulle-assistant > * { margin: 0 0 var(--espace-sm); }
.chatbot-bulle-assistant > :last-child { margin-bottom: 0; }

/* La signature : chaque reponse s'ouvre sur le nom d'Alppy et un filet. Celle
   qui vient d'arriver est signee de la mascotte, qui sautille deux fois. */
.alppy-signature { display: flex; align-items: center; gap: var(--espace-2xs); color: var(--alppy); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--suivi-entete); text-transform: uppercase; }
.alppy-signature .icon { width: var(--icon-sm); height: var(--icon-sm); }
.alppy-signature > .alppy-signature-mascotte { width: 20px; }
.alppy-signature-mascotte .am-fil { stroke-width: 1px; }
.alppy-signature-filet { flex: 1; height: 1px; background: var(--alppy-light); }
.chatbot-bulle-assistant.est-neuve .alppy-signature .icon { animation: alppy-signe-encre .42s var(--ease-spring) both; }
@keyframes alppy-signe-encre { from { opacity: 0; scale: .6; rotate: -12deg; } }

/* Les actions, sous la reponse : Copier, et qui a repondu. Discretes jusqu'au
   survol, sauf sous la derniere reponse. Refaire avec, Regenerer et Modifier
   n'y sont pas : ils relanceraient une question que la vitrine n'envoie pas. */
.alppy-actions { position: relative; display: flex; align-items: center; gap: var(--espace-2xs); opacity: 0; transition: opacity .15s var(--ease); }
.chatbot-bulle-assistant > .alppy-actions { margin-top: var(--espace-xs); }
.chatbot-bulle-assistant:hover > .alppy-actions,
.chatbot-bulle-assistant:focus-within > .alppy-actions,
.alppy-actions.est-derniere { opacity: 1; }
@media (hover: none) { .alppy-actions { opacity: 1; } }
.alppy-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--h-sm);
  height: var(--h-sm);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--gray-4);
  cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.alppy-action .icon { width: var(--icon-sm); height: var(--icon-sm); }
.alppy-action:hover { background: var(--gray-2); color: var(--gray-6); }
.alppy-action:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--alppy-light); }
.alppy-action.est-fait { color: var(--alppy); animation: alppy-mot-change .24s var(--ease); }
.alppy-modele { display: inline-flex; align-items: center; gap: var(--espace-3xs); margin-left: auto; padding: var(--espace-3xs) var(--espace-2xs); border-radius: var(--radius-sm); font-size: var(--fs-2xs); color: var(--gray-4); }
.alppy-modele .icon { width: var(--icon-xs); height: var(--icon-xs); }

.chatbot-bulle-assistant b { font-weight: 600; color: var(--black); }
.alppy.est-anime .chatbot-bulle-assistant.est-neuve > p:not([class]) { animation: alppy-bloc-monte .4s var(--ease) both; }
.chatbot-ecriture { margin: var(--espace-xs) 0 0; padding-left: var(--espace-sm); border-left: 2px solid var(--green); font-size: var(--fs-xs); color: var(--green-dark); }
.chatbot-attente { margin: var(--espace-xs) 0 0; padding-left: var(--espace-sm); border-left: 2px solid var(--orange); font-size: var(--fs-xs); }
.chatbot-attente-libelle { margin: 0 0 var(--espace-3xs); }
.chatbot-attente-actions { display: flex; gap: var(--espace-3xs); flex-wrap: wrap; }
.chatbot-attente-actions[hidden] { display: none; }
.chatbot-pieces-lues { margin: var(--espace-xs) 0 0; font-size: var(--fs-xs); color: var(--gray-5); }
@keyframes alppy-ecriture-scelle { 0%, 55% { background: var(--green-pale); } 100% { background: transparent; } }
.chatbot-bulle-assistant.est-neuve .chatbot-ecriture { animation: alppy-ecriture-scelle 1.1s var(--ease) .1s both; }
@keyframes alppy-geste-appelle { 0%, 100% { background: transparent; } 40% { background: var(--orange-pale); } }
.chatbot-bulle-assistant.est-neuve .chatbot-attente { animation: alppy-geste-appelle .9s var(--ease) .2s 2 both; }

/* L'attente : la mascotte reflechit, le mot et les points a sa droite, la
   barre qui balaie dessous. C'est la carte du produit depuis le 25 septembre
   2026 ; le chantier a la pioche qu'elle remplace n'existe plus nulle part. */
.alppy-attente { flex: none; align-self: stretch; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--alppy-light); border-radius: var(--radius); background-color: var(--surface); animation: alppy-attente-parait .26s var(--ease) both; }
@keyframes alppy-attente-parait { from { opacity: 0; translate: 0 6px; } }
.alppy-attente-ligne { display: flex; align-items: center; gap: var(--espace-xs); padding: var(--espace-sm) var(--espace-md); }
.alppy-attente-ligne > .alppy-attente-mascotte { width: 34px; margin-right: var(--espace-xs); }

/* La mascotte d'Alppy, recopiee de style.css (section « La mascotte d'Alppy
   ») : memes chemins, memes durees, memes instants clefs. Une pose retouchee
   dans le produit se retouche ici. */

.alppy-mascotte {
  display: block;
  flex: none;
  width: 48px;
  height: auto;
  overflow: visible;
}
.alppy-mascotte .am-montagne { fill: var(--alppy); }
.alppy-mascotte .am-neige,
.alppy-mascotte .am-oeil { fill: var(--alppy-neige); }
.alppy-mascotte .am-fil {
  fill: none;
  stroke: var(--alppy-encre);
  stroke-width: 2px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.alppy-mascotte .am-ombre { fill: var(--alppy-encre); opacity: .08; }
.alppy-mascotte .am-rieurs {
  fill: none;
  stroke: var(--alppy-neige);
  stroke-width: 9;
  stroke-linecap: round;
  opacity: 0;
}
.alppy-mascotte .am-etincelles { fill: var(--alppy); opacity: 0; }
.alppy-mascotte .am-sourire {
  fill: none;
  stroke: var(--alppy-neige);
  stroke-width: 14;
  stroke-linecap: round;
}
.alppy-mascotte .am-rire { fill: var(--alppy-neige); opacity: 0; }
.alppy-mascotte .am-ondes {
  fill: none;
  stroke: var(--alppy);
  stroke-width: 13;
  stroke-linecap: round;
  opacity: 0;
}
.alppy-mascotte .am-loupe { opacity: 0; }
.alppy-mascotte .am-loupe circle {
  fill: rgba(var(--vitrine-blanc-rgb), .28);
  stroke: var(--alppy-encre);
  stroke-width: 13;
}
.alppy-mascotte .am-loupe path {
  stroke: var(--alppy-encre);
  stroke-width: 24;
  stroke-linecap: round;
}
.alppy-mascotte .am-pioche { opacity: 0; }
.alppy-mascotte .am-manche,
.alppy-mascotte .am-fer {
  fill: none;
  stroke-linecap: round;
}
.alppy-mascotte .am-manche { stroke: var(--alppy-dark); stroke-width: 17; }
.alppy-mascotte .am-fer { stroke: var(--alppy-encre); stroke-width: 20; }
.alppy-mascotte .am-eclats { fill: var(--alppy-dark); opacity: 0; }
.alppy-mascotte :is(.am-corps, .am-yeux, .am-sourire, .am-rire, .am-etincelles path, .am-ondes path, .am-ombre) {
  transform-box: fill-box;
}
.alppy-mascotte .am-corps { transform-origin: 50% 100%; }
.alppy-mascotte :is(.am-yeux, .am-etincelles path, .am-ombre) { transform-origin: 50% 50%; }
.alppy-mascotte :is(.am-sourire, .am-rire) { transform-origin: 50% 0; }
.alppy-mascotte .am-ondes path:nth-child(-n+2) { transform-origin: 100% 50%; }
.alppy-mascotte .am-ondes path:nth-child(n+3) { transform-origin: 0 50%; }
.alppy-mascotte .am-pioche {
  transform-box: view-box;
  transform-origin: 456px 270px;
}
.alppy-mascotte :is(.am-regard, .am-yeux, .am-rieurs, .am-loupe, .am-corps) {
  transition: translate .35s var(--ease), scale .2s var(--ease), opacity .2s var(--ease);
}
.alppy-mascotte :is(.am-sourire, .am-rire) {
  transition: scale .3s var(--ease-spring), rotate .3s var(--ease), translate .3s var(--ease), stroke-width .3s var(--ease), opacity .2s var(--ease);
}
.alppy-mascotte .am-corps { animation: am-respire 3.6s ease-in-out infinite; }
.alppy-mascotte .am-yeux { animation: am-cligne 5.3s infinite; }
.alppy-mascotte .am-sourire { animation: am-sourit 5.3s infinite; }
@keyframes am-respire {
  0%, 100% { scale: 1 1; }
  50% { scale: 1.006 1.018; }
}
@keyframes am-cligne {
  0%, 93%, 100% { scale: 1 1; }
  95.5% { scale: 1 .12; }
}
@keyframes am-sourit {
  0%, 22% { scale: 1 1; rotate: 0deg; stroke-width: 14; }
  30%, 46% { scale: 1.1 1.4; rotate: 0deg; stroke-width: 11; }
  54% { scale: .97 .9; rotate: 0deg; stroke-width: 15; }
  62%, 72% { scale: 1 1; rotate: 0deg; stroke-width: 14; }
  78%, 88% { scale: 1.02 1.2; rotate: -6deg; stroke-width: 12; }
  95%, 100% { scale: 1 1; rotate: 0deg; stroke-width: 14; }
}
.alppy-mascotte[data-etat="reflechit"] .am-regard { animation: am-songe 3.2s ease-in-out infinite; }
.alppy-mascotte[data-etat="reflechit"] .am-sourire { animation: am-hmm 1.6s ease-in-out infinite; }
.alppy-mascotte[data-etat="reflechit"] .am-etincelles { opacity: 1; }
.alppy-mascotte[data-etat="reflechit"] .am-etincelles path { animation: am-scintille 1.6s ease-in-out infinite; }
.alppy-mascotte[data-etat="reflechit"] .am-etincelles path:nth-child(2) { animation-delay: .5s; }
.alppy-mascotte[data-etat="reflechit"] .am-etincelles path:nth-child(3) { animation-delay: 1s; }
@keyframes am-songe {
  0%, 100% { translate: -15px -20px; }
  42%, 58% { translate: 15px -20px; }
}
@keyframes am-hmm {
  0%, 100% { scale: .55 .5; translate: 6px 0; stroke-width: 24; }
  50% { scale: .6 .3; translate: 9px 0; stroke-width: 36; }
}
@keyframes am-scintille {
  0%, 100% { scale: 0; opacity: 0; }
  40% { scale: 1; opacity: 1; }
  70% { scale: .4; opacity: .6; }
}
.alppy-mascotte[data-etat="cherche"] .am-loupe {
  opacity: 1;
  animation: am-balaie 2.2s ease-in-out infinite;
}
.alppy-mascotte[data-etat="cherche"] .am-regard { animation: am-suit 2.2s ease-in-out infinite; }
.alppy-mascotte[data-etat="cherche"] .am-sourire { scale: .62 .8; stroke-width: 17; animation: none; }
@keyframes am-balaie {
  0%, 100% { translate: -70px 6px; }
  50% { translate: 60px -4px; }
}
@keyframes am-suit {
  0%, 100% { translate: -22px 4px; }
  50% { translate: 20px 0; }
}
.alppy-mascotte[data-etat="creuse"] .am-pioche {
  opacity: 1;
  animation: am-coup 1.1s infinite;
}
.alppy-mascotte[data-etat="creuse"] .am-corps { animation: am-encaisse 1.1s var(--ease) infinite; }
.alppy-mascotte[data-etat="creuse"] .am-regard { translate: 20px 12px; }
.alppy-mascotte[data-etat="creuse"] .am-sourire { animation: am-serre 1.1s infinite; }
.alppy-mascotte[data-etat="creuse"] .am-eclats { opacity: 1; }
.alppy-mascotte[data-etat="creuse"] .am-eclats circle { animation: am-eclat 1.1s ease-out infinite; }
.alppy-mascotte .am-eclats circle:nth-child(1) { --vol: 34px -70px; }
.alppy-mascotte .am-eclats circle:nth-child(2) { --vol: 70px -40px; }
.alppy-mascotte .am-eclats circle:nth-child(3) { --vol: -12px -56px; }
@keyframes am-coup {
  0% { rotate: -58deg; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  40% { rotate: -72deg; animation-timing-function: cubic-bezier(.6, 0, .95, .6); }
  62% { rotate: 2deg; animation-timing-function: cubic-bezier(.3, 1.4, .5, 1); }
  72% { rotate: -5deg; }
  100% { rotate: -58deg; }
}
@keyframes am-serre {
  0%, 58%, 100% { scale: .8 .35; stroke-width: 34; }
  64% { scale: 1 .2; stroke-width: 56; }
  76% { scale: .86 .5; stroke-width: 26; }
}
@keyframes am-encaisse {
  0%, 58%, 80%, 100% { scale: 1 1; translate: 0 0; }
  64% { scale: 1.03 .95; translate: 3px 0; }
  71% { scale: .99 1.02; translate: 0 0; }
}
@keyframes am-eclat {
  0%, 60% { opacity: 0; translate: 0 0; }
  64% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: var(--vol); }
}
.alppy-mascotte[data-etat="ecrit"] .am-regard { animation: am-ligne 2.4s infinite; }
.alppy-mascotte[data-etat="ecrit"] .am-sourire { animation: am-applique 1.2s ease-in-out infinite; }
.alppy-mascotte[data-etat="ecrit"] .am-corps { animation: am-hoche 1.2s ease-in-out infinite; }
@keyframes am-ligne {
  0% { translate: -20px 10px; animation-timing-function: linear; }
  44% { translate: 20px 10px; animation-timing-function: var(--ease); }
  50% { translate: -20px 17px; animation-timing-function: linear; }
  94% { translate: 20px 17px; animation-timing-function: var(--ease); }
  100% { translate: -20px 10px; }
}
@keyframes am-applique {
  0%, 100% { scale: .8 .75; stroke-width: 18; }
  88% { scale: .72 .5; stroke-width: 26; }
}
@keyframes am-hoche {
  0%, 100% { scale: 1 1; }
  90% { scale: 1.01 .985; }
}
.alppy-mascotte[data-etat="ecoute"] .am-ondes { opacity: 1; }
.alppy-mascotte[data-etat="ecoute"] .am-ondes path { animation: am-onde 1.4s ease-out infinite; }
.alppy-mascotte[data-etat="ecoute"] .am-ondes path:nth-child(odd) { animation-delay: .35s; }
.alppy-mascotte[data-etat="ecoute"] .am-yeux { scale: 1.2; animation: none; }
.alppy-mascotte[data-etat="ecoute"] .am-sourire { scale: .72 1.15; stroke-width: 14; animation: none; }
@keyframes am-onde {
  0% { opacity: 0; scale: .7; }
  30% { opacity: .9; }
  100% { opacity: 0; scale: 1.15; }
}
.alppy-mascotte[data-etat="content"] .am-yeux { opacity: 0; }
.alppy-mascotte[data-etat="content"] .am-rieurs { opacity: 1; }
.alppy-mascotte[data-etat="content"] .am-sourire { opacity: 0; animation: none; }
.alppy-mascotte[data-etat="content"] .am-rire { opacity: 1; animation: am-eclate .45s var(--ease-spring) both; }
.alppy-mascotte[data-etat="content"] .am-corps { animation: am-bondit .9s var(--ease) 2 both; }
.alppy-mascotte[data-etat="content"] .am-ombre { animation: am-ombre-bondit .9s var(--ease) 2 both; }
@keyframes am-bondit {
  0%, 100% { translate: 0 0; scale: 1 1; }
  12% { translate: 0 0; scale: 1.04 .94; }
  38% { translate: 0 -30px; scale: .98 1.04; }
  62% { translate: 0 0; scale: 1.03 .96; }
}
@keyframes am-eclate {
  from { scale: .5 .2; }
}
@keyframes am-ombre-bondit {
  0%, 12%, 62%, 100% { scale: 1; opacity: .08; }
  38% { scale: .8; opacity: .04; }
}
.alppy-mascotte[data-etat="erreur"] .am-corps { animation: am-non .5s var(--ease) both; }
.alppy-mascotte[data-etat="erreur"] .am-yeux { scale: .8; animation: none; }
.alppy-mascotte[data-etat="erreur"] .am-sourire { animation: am-moue .5s var(--ease) both; }
@keyframes am-moue {
  0% { scale: 1 1; translate: 0 0; stroke-width: 14; }
  45% { scale: .9 .1; translate: 0 4px; stroke-width: 60; }
  100% { scale: .8 -.6; translate: 0 8px; stroke-width: 20; }
}
@keyframes am-non {
  0%, 100% { translate: 0 0; }
  20% { translate: -12px 0; }
  45% { translate: 10px 0; }
  70% { translate: -6px 0; }
}
.alppy-mascotte[data-entree="dessin"] :is(.am-montagne, .am-neige) {
  stroke: var(--alppy);
  stroke-width: 5;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  animation: am-trace 1s var(--ease) both, am-colore .45s .75s var(--ease) both;
}
.alppy-mascotte[data-entree="dessin"] .am-neige { stroke: var(--alppy-encre); animation-delay: .15s, .85s; }
.alppy-mascotte[data-entree="dessin"] .am-fil { animation: am-parait .3s 1s both; }
.alppy-mascotte[data-entree="dessin"] .am-regard { animation: am-ouvre .4s 1.15s var(--ease-spring) both; }
.alppy-mascotte[data-entree="dessin"] .am-ombre { animation: am-parait .4s .9s both; }
.alppy-mascotte[data-entree="dessin"] .am-sourire {
  stroke-dasharray: 1;
  animation: am-trace .4s 1.45s var(--ease) both, am-sourit 5.3s 1.85s infinite;
}
@keyframes am-trace {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes am-colore {
  from { fill-opacity: 0; }
  to { fill-opacity: 1; stroke-width: 0; }
}
@keyframes am-parait {
  from { opacity: 0; }
}
@keyframes am-ouvre {
  from { opacity: 0; scale: 1 0; }
}
.alppy-mascotte .am-regard { transform-box: fill-box; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: reduce) {
  .alppy-mascotte,
  .alppy-mascotte * { animation: none !important; transition: none !important; }
  .alppy-mascotte[data-etat="reflechit"] .am-regard { translate: 0 -20px; }
  .alppy-mascotte[data-etat="cherche"] .am-loupe { translate: -10px 0; }
  .alppy-mascotte[data-etat="creuse"] .am-pioche { rotate: 0deg; }
  .alppy-mascotte[data-etat="creuse"] .am-eclats { opacity: 0; }
  .alppy-mascotte[data-etat="ecoute"] .am-ondes path { opacity: .6; }
  .alppy-mascotte[data-etat="reflechit"] .am-sourire { scale: .55 .5; translate: 6px 0; stroke-width: 24; }
  .alppy-mascotte[data-etat="creuse"] .am-sourire { scale: .8 .35; stroke-width: 34; }
  .alppy-mascotte[data-etat="ecrit"] .am-sourire { scale: .8 .75; stroke-width: 18; }
  .alppy-mascotte[data-etat="erreur"] .am-sourire { scale: .8 -.6; translate: 0 8px; stroke-width: 20; }
}
/* ===== Alppy en relief.

   Depuis le 1er octobre 2026 (« un logo en 3D qui se deplace a la maniere des
   dots d'OpenAI ou des mews de Meta ») la mascotte est un volume. Le dessin
   reste la face avant, avec ses huit poses ; ce qui suit lui donne une
   epaisseur et un mouvement d'ensemble :

   - douze tranches de la meme silhouette (`.am3-tranche`), empilees en
     profondeur derriere la face, rouges sous une calotte de neige, de plus en
     plus sombres vers l'arriere : c'est le flanc qu'on voit quand il tourne ;
   - un reflet (`.am3-reflet`) qui glisse sur la face au rythme du balancement ;
   - un halo (`.am3-halo`), degrade conique flou qui tourne et se deforme
     derriere lui : discret au repos, plus vif quand il travaille, qui bat
     quand il ecoute, comme l'orbe de ChatGPT ou l'anneau de Meta AI ;
   - une ombre au sol (`.am3-sol`) qui se resserre quand il s'eleve.

   Deux etages de mouvement. La scene (`.am3-scene`) se balance au repos,
   lentement, en flottant ; elle se fige la ou elle en est des qu'une autre
   pose commence, et reprend de la au retour : on ne la voit jamais sauter.
   La pose (`.am3-pose`) ajoute le geste de l'etat, parti de la position
   neutre : il cherche en tournant la tete, il hoche en ecrivant, il fait un
   tour sur lui-meme quand il est content, il dit non en cas d'erreur.

   Les longueurs sont en `cqi`, centiemes de la largeur de la mascotte :
   l'epaisseur, le flottement, le flou du halo valent a 20 comme a 120 pixels.
   Les silhouettes des masques sont celles du dessin, recopiees de
   `_alppy_mascotte.html`. Les couleurs sont les jetons d'Alppy, donc le
   theme sombre suit sans regle de plus. Le pendant de l'app est
   `MascotteAlppy3D.swift`, memes angles, memes durees. */
.alppy-mascotte {
  --am3-corps: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 530.4 437.65' preserveAspectRatio='none'%3E%3Cpath d='M293.62 23L521.14 369.3A42.7 42.7 0 0 1 485.45 435.45L44.95 435.45A42.7 42.7 0 0 1 9.26 369.3L236.78 23A34 34 0 0 1 293.62 23Z'/%3E%3C/svg%3E");
  --am3-neige: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 530.4 437.65' preserveAspectRatio='none'%3E%3Cpath d='M415.93 215.35C418.43 215.15 420.9 214.75 423.33 214.16C426.21 213.46 428.8 212.44 429.78 209.34C431.05 205.36 428.08 202.05 426.05 198.96C420.74 190.91 415.52 182.8 410.16 174.78C399.91 159.43 389.89 143.92 379.72 128.52C370.37 114.37 360.97 100.24 351.71 86.03C345.45 76.42 339.19 66.79 332.81 57.27C328.92 51.46 325.1 45.61 321.27 39.78C318.35 35.33 315.6 30.74 312.22 26.62C310.22 24.17 307.97 21.92 305.63 19.81C300.16 14.88 292.99 10.55 286.02 8.16C279.87 6.06 273.51 4.67 266.99 4.53C250.29 4.16 233.68 10.53 221.91 22.5C215.24 29.27 210.58 37.7 205.33 45.55C201.54 51.22 197.73 56.89 194.07 62.64C192.29 65.44 190.36 68.15 188.58 70.97C187.52 72.65 186.35 74.28 185.26 75.95C182.07 80.82 178.9 85.7 175.67 90.54C168.28 101.61 161.14 112.83 153.75 123.9C150.98 128.05 148.3 132.25 145.52 136.39C144.36 138.11 142.82 140.73 143.51 142.89C144.3 145.36 147.75 144.9 149.69 144.5C152.13 143.99 154.52 143.2 156.96 142.66C161.04 141.76 165.17 141.23 169.34 141.04C181.65 140.49 194.05 142.44 206.26 140.06C222.02 136.99 236.2 128.82 251.44 124.05C258.73 121.77 266.42 120.3 274.08 121.01C289.95 122.48 303.51 134.47 314.62 144.98C324.54 154.37 334.21 164.04 343.99 173.58C353.4 182.76 362.93 191.95 373.47 199.83C385.67 208.96 400.24 216.58 415.93 215.35Z'/%3E%3C/svg%3E");
  --am3-ep: 20cqi;
  position: relative;
  aspect-ratio: 530.4 / 437.65;
  container-type: inline-size;
}
.alppy-mascotte > :is(.am3-halo, .am3-sol, .am3-vue) { position: absolute; display: block; }
.alppy-mascotte > .am3-vue { inset: 0; perspective: 420cqi; }
.alppy-mascotte :is(.am3-scene, .am3-pose) {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
}
.alppy-mascotte :is(.am3-tranche, .am3-reflet) {
  position: absolute;
  inset: 0;
  display: block;
  -webkit-mask: var(--am3-corps) center / 100% 100% no-repeat;
  mask: var(--am3-corps) center / 100% 100% no-repeat;
}
.alppy-mascotte .am3-face {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: translateZ(calc(var(--am3-ep) / 2));
  backface-visibility: hidden;
}

/* Les tranches : de l'arriere (1) a l'avant (12), juste derriere la face. */
.alppy-mascotte .am3-tranche {
  background: var(--alppy);
  transform: translateZ(calc(var(--am3-ep) * (var(--i) - 12.5) / 12));
  filter: brightness(calc(.4 + var(--i) * .032));
}
.alppy-mascotte .am3-tranche::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--alppy-neige);
  -webkit-mask: var(--am3-neige) center / 100% 100% no-repeat;
  mask: var(--am3-neige) center / 100% 100% no-repeat;
}
.alppy-mascotte .am3-tranche:nth-child(1) { --i: 1; }
.alppy-mascotte .am3-tranche:nth-child(2) { --i: 2; }
.alppy-mascotte .am3-tranche:nth-child(3) { --i: 3; }
.alppy-mascotte .am3-tranche:nth-child(4) { --i: 4; }
.alppy-mascotte .am3-tranche:nth-child(5) { --i: 5; }
.alppy-mascotte .am3-tranche:nth-child(6) { --i: 6; }
.alppy-mascotte .am3-tranche:nth-child(7) { --i: 7; }
.alppy-mascotte .am3-tranche:nth-child(8) { --i: 8; }
.alppy-mascotte .am3-tranche:nth-child(9) { --i: 9; }
.alppy-mascotte .am3-tranche:nth-child(10) { --i: 10; }
.alppy-mascotte .am3-tranche:nth-child(11) { --i: 11; }
.alppy-mascotte .am3-tranche:nth-child(12) { --i: 12; }

/* Le reflet : une bande de lumiere, posee un rien devant la face, qui
   traverse la silhouette d'un flanc a l'autre pendant qu'il se balance. */
.alppy-mascotte .am3-reflet {
  overflow: hidden;
  opacity: .5;
  transform: translateZ(calc(var(--am3-ep) / 2 + .4cqi));
  backface-visibility: hidden;
  pointer-events: none;
}
.alppy-mascotte .am3-reflet::before {
  content: "";
  position: absolute;
  inset: 0 -60%;
  background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, var(--alppy-neige) 42%, transparent) 50%, transparent 62%);
  animation: am3-luit 7.2s ease-in-out infinite;
}

/* Le halo et l'ombre, hors du volume : ils ne tournent pas avec lui. */
.alppy-mascotte > .am3-halo {
  inset: -14% -8% -4%;
  border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%;
  background: conic-gradient(from 0deg, var(--alppy), var(--alppy-light), var(--alppy-dark), color-mix(in srgb, var(--alppy) 55%, var(--alppy-neige)), var(--alppy));
  filter: blur(10cqi);
  opacity: .2;
  scale: .88;
  transition: opacity .5s var(--ease), scale .5s var(--ease);
  animation: am3-tourne 9s linear infinite, am3-ondule 6.4s ease-in-out infinite alternate;
  pointer-events: none;
}
.alppy-mascotte > .am3-sol {
  left: 18%;
  bottom: -5%;
  width: 64%;
  height: 9%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--alppy-encre) 26%, transparent), transparent);
  animation: am3-sol 3.6s ease-in-out infinite;
}

/* La face ne bouge plus seule : sauter, dire non, encaisser, hocher, c'est
   desormais le volume entier qui le fait, sans quoi la face se decollerait de
   ses tranches. Son ombre dessinee cede la place a celle du sol. */
.alppy-mascotte .am3-face .am-corps { animation: none; }
.alppy-mascotte .am3-face .am-ombre { display: none; }

/* ----- repos : il se balance d'un trois-quarts a l'autre et flotte. Deux
   periodes qui ne tombent jamais juste (7,2 et 3,6 s, celle de sa
   respiration) : le mouvement ne se repete pas a l'oeil. */
.alppy-mascotte .am3-scene {
  animation: am3-balance 7.2s ease-in-out infinite, am3-flotte 3.6s ease-in-out infinite;
}
.alppy-mascotte:not([data-etat="repos"]) :is(.am3-scene, .am3-sol),
.alppy-mascotte:not([data-etat="repos"]) .am3-reflet::before { animation-play-state: paused; }

@keyframes am3-balance {
  0%, 100% { transform: rotateX(5deg) rotateY(-15deg); }
  50% { transform: rotateX(-2deg) rotateY(15deg); }
}
@keyframes am3-flotte {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3cqi; }
}
@keyframes am3-sol {
  0%, 100% { scale: 1; opacity: 1; }
  50% { scale: .84; opacity: .7; }
}
@keyframes am3-luit {
  0%, 100% { transform: translateX(-24%); }
  50% { transform: translateX(24%); }
}
@keyframes am3-tourne {
  to { rotate: 1turn; }
}
@keyframes am3-ondule {
  0% { border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%; }
  50% { border-radius: 56% 44% 46% 54% / 44% 56% 48% 52%; }
  100% { border-radius: 48% 52% 58% 42% / 50% 50% 44% 56%; }
}

/* ----- quand il travaille, le halo s'avive et tourne plus vite. */
.alppy-mascotte:is([data-etat="reflechit"], [data-etat="cherche"], [data-etat="creuse"], [data-etat="ecrit"]) > .am3-halo {
  opacity: .5;
  scale: 1;
  animation-duration: 3.2s, 2.4s;
}

/* ----- reflechit : la tete part en arriere, vers la neige, et va d'un cote a
   l'autre avec le regard (memes instants que `am-songe`). */
.alppy-mascotte[data-etat="reflechit"] .am3-pose { animation: am3-songe 3.2s ease-in-out infinite; }
@keyframes am3-songe {
  0%, 100% { transform: rotateX(-12deg) rotateY(-11deg); }
  42%, 58% { transform: rotateX(-12deg) rotateY(11deg); }
}

/* ----- cherche : il tourne la tete pour suivre sa loupe (`am-suit`). */
.alppy-mascotte[data-etat="cherche"] .am3-pose { animation: am3-scrute 2.2s ease-in-out infinite; }
@keyframes am3-scrute {
  0%, 100% { transform: rotateX(3deg) rotateY(-20deg); }
  50% { transform: rotateX(3deg) rotateY(18deg); }
}

/* ----- creuse : il se penche sur sa pioche et accuse le coup a l'impact
   (memes instants que `am-encaisse`). */
.alppy-mascotte[data-etat="creuse"] .am3-pose { animation: am3-creuse 1.1s var(--ease) infinite; }
@keyframes am3-creuse {
  0%, 58%, 80%, 100% { transform: rotateX(6deg) rotateY(-8deg) scale3d(1, 1, 1); }
  64% { transform: rotateX(15deg) rotateY(-12deg) scale3d(1.03, .95, 1); }
  71% { transform: rotateX(3deg) rotateY(-7deg) scale3d(.99, 1.02, 1); }
}

/* ----- ecrit : la tete suit la ligne, de gauche a droite, et baisse d'un
   cran a la ligne suivante (memes instants que `am-ligne`). */
.alppy-mascotte[data-etat="ecrit"] .am3-pose { animation: am3-ligne 2.4s infinite; }
@keyframes am3-ligne {
  0% { transform: rotateX(8deg) rotateY(-10deg); animation-timing-function: linear; }
  44% { transform: rotateX(8deg) rotateY(10deg); animation-timing-function: var(--ease); }
  50% { transform: rotateX(12deg) rotateY(-10deg); animation-timing-function: linear; }
  94% { transform: rotateX(12deg) rotateY(10deg); animation-timing-function: var(--ease); }
  100% { transform: rotateX(8deg) rotateY(-10deg); }
}

/* ----- ecoute : il se tourne vers vous et le halo bat avec les ondes. */
.alppy-mascotte[data-etat="ecoute"] .am3-pose { animation: am3-ecoute 1.4s ease-in-out infinite; }
.alppy-mascotte[data-etat="ecoute"] > .am3-halo {
  opacity: .6;
  animation: am3-tourne 4s linear infinite, am3-ondule 2.8s ease-in-out infinite alternate, am3-bat 1.4s ease-in-out infinite;
}
@keyframes am3-ecoute {
  0%, 100% { transform: rotateX(2deg) scale3d(1, 1, 1); }
  50% { transform: rotateX(2deg) scale3d(1.04, 1.04, 1); }
}
@keyframes am3-bat {
  0%, 100% { scale: .92; }
  50% { scale: 1.14; }
}

/* ----- content : un bond, un tour complet sur lui-meme en l'air, et le
   halo s'illumine le temps du saut. */
.alppy-mascotte[data-etat="content"] .am3-pose { animation: am3-joie 1.6s var(--ease) both; }
.alppy-mascotte[data-etat="content"] > .am3-halo {
  animation: am3-tourne 2s linear infinite, am3-ondule 2s ease-in-out infinite alternate, am3-eclat 1.6s var(--ease) both;
}
@keyframes am3-joie {
  0% { transform: translateY(0) rotateY(0deg) scale3d(1, 1, 1); }
  12% { transform: translateY(0) rotateY(0deg) scale3d(1.05, .93, 1); }
  42% { transform: translateY(-8cqi) rotateY(200deg) scale3d(1, 1, 1); }
  70% { transform: translateY(0) rotateY(360deg) scale3d(1.04, .95, 1); }
  84% { transform: translateY(-2cqi) rotateY(360deg) scale3d(1, 1, 1); }
  100% { transform: translateY(0) rotateY(360deg) scale3d(1, 1, 1); }
}
@keyframes am3-eclat {
  0% { opacity: .2; scale: .88; }
  40% { opacity: .75; scale: 1.18; }
  100% { opacity: .2; scale: .88; }
}

/* ----- erreur : un non de tout le volume, et le halo s'eteint presque. */
.alppy-mascotte[data-etat="erreur"] .am3-pose { animation: am3-non .5s var(--ease) both; }
.alppy-mascotte[data-etat="erreur"] > .am3-halo { opacity: .08; }
@keyframes am3-non {
  0%, 100% { transform: rotateY(0deg); }
  20% { transform: rotateY(-18deg); }
  45% { transform: rotateY(15deg); }
  70% { transform: rotateY(-8deg); }
}

/* ----- l'entree dessinee : le contour se trace a plat, puis le volume
   prend son epaisseur, sa lumiere et son halo. */
.alppy-mascotte[data-entree="dessin"] :is(.am3-tranche, .am3-reflet) { animation: am-parait .5s .95s both; }
.alppy-mascotte[data-entree="dessin"] > .am3-sol { animation: am-parait .5s .95s both, am3-sol 3.6s 1.45s ease-in-out infinite; }
.alppy-mascotte[data-entree="dessin"] > .am3-halo {
  animation: am-parait .8s 1.1s both, am3-tourne 9s linear infinite, am3-ondule 6.4s ease-in-out infinite alternate;
}

/* La signature d'une reponse est petite et se repete dans tout le fil : son
   halo ne s'allume que lorsqu'elle se rejouit. */
.alppy-signature-mascotte[data-etat="repos"] > .am3-halo { opacity: 0; }

/* Sans mouvement, il reste de trois quarts, immobile, son relief visible. */
@media (prefers-reduced-motion: reduce) {
  .alppy-mascotte .am3-scene { transform: rotateX(5deg) rotateY(-14deg); }
  .alppy-mascotte > .am3-halo { opacity: .2; }
  .alppy-mascotte .am3-reflet::before { animation: none; }
}

.alppy-attente-nom {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--alppy-dark);
}
.alppy-attente-nom.est-change {
  animation: alppy-mot-change .24s var(--ease);
}
@keyframes alppy-mot-change {
  from { opacity: 0; translate: 0 3px; }
}
.alppy-attente-points {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-3xs);
}
.alppy-attente-points i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--alppy);
  animation: alppy-point-monte 1.4s var(--ease) infinite;
}
.alppy-attente-points i:nth-child(2) { animation-delay: .16s; }
.alppy-attente-points i:nth-child(3) { animation-delay: .32s; }
@keyframes alppy-point-monte {
  0%, 60%, 100% { opacity: .3; translate: 0 0; }
  30% { opacity: 1; translate: 0 -3px; }
}
.alppy-attente-barre {
  display: block;
  position: relative;
  height: 2px;
  background: var(--alppy-light);
  overflow: hidden;
}
.alppy-attente-barre::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: var(--alppy);
  animation: alppy-barre-balaie 1.8s var(--ease) infinite;
}
@keyframes alppy-barre-balaie {
  from { translate: -100% 0; }
  to { translate: 250% 0; }
}

/* Le champ et son pied, comme dans le produit : le micro dans le champ, la
   portee et le modele dessous, le bouton d'envoi a droite. Decoratifs (la
   vitrine n'envoie rien) : ce sont des etiquettes, pas des controles, et le
   lecteur d'ecran ne les entend pas. */
.alppy-saisie { padding: var(--espace-sm) var(--espace-md); background-color: var(--alppy-pale); }
.alppy-champ {
  position: relative;
  min-height: 4.5rem;
  padding: var(--espace-sm) calc(var(--h-sm) + 2 * var(--espace-xs)) var(--espace-sm) var(--espace-sm);
  border: 1px solid var(--alppy-light);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  font-size: var(--fs);
  line-height: 1.5;
  color: var(--gray-4);
}
.alppy-champ-micro {
  position: absolute;
  right: var(--espace-xs);
  bottom: var(--espace-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--h-sm);
  height: var(--h-sm);
  border-radius: 999px;
  background-color: var(--gray-2);
  color: var(--gray-6);
}
.alppy-champ-micro .icon { width: var(--icon-sm); height: var(--icon-sm); }
.alppy-pied {
  --chevron-taille: var(--icon);
  --chevron-retrait: var(--espace-xs);
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
  padding: 0 var(--espace-md) var(--espace-md);
  background-color: var(--alppy-pale);
}
.alppy-portee, .alppy-modele-choix {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-xs);
  min-width: 0;
  padding: var(--espace-xs) calc(var(--chevron-retrait) + var(--chevron-taille) + var(--espace-xs)) var(--espace-xs) var(--espace-sm);
  border: 1px solid var(--gray-3);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaaaaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--chevron-retrait) center;
  background-size: var(--chevron-taille);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.alppy-portee { color: var(--gray-6); }
.alppy-portee .icon { flex: none; width: var(--icon-sm); height: var(--icon-sm); color: var(--gray-5); }
.alppy-portee > span { overflow: hidden; text-overflow: ellipsis; }
.alppy-modele-choix { margin-right: auto; color: var(--gray-5); }
.app .alppy-envoyer, .app .alppy-envoyer:hover { flex: none; background: var(--alppy); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(var(--vitrine-blanc-rgb), .18); transform: none; cursor: default; }

.alppy-rejouer {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-2xs);
  min-height: var(--h-sm);
  margin-left: auto;
  padding: 0 var(--espace-sm);
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--alppy-dark);
  cursor: pointer;
}
.alppy-rejouer:hover { background: var(--surface); }
.alppy-rejouer:focus-visible { outline: 2px solid var(--alppy); outline-offset: 2px; }
.alppy-rejouer[hidden] { display: none; }
.alppy-rejouer:not([hidden]) + .alppy-entete-actions { margin-left: 0; }

@media (max-width: 900px) {
  .alppy-scene { grid-template-columns: minmax(0, 1fr); }
  .frise { order: 2; }
  .alppy.est-anime .alppy-fil { height: 440px; }
}
@media (max-width: 480px) {
  /* Sur telephone, le pied ne tient pas sur une ligne : le bouton passe
     dessous, a toute la largeur, comme le panneau du produit a cette taille. */
  .alppy-pied { flex-wrap: wrap; }
  .app .alppy-envoyer { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .alppy-attente, .alppy-attente-points i, .alppy-attente-barre::after,
  .alppy-suggestion, .alppy-accueil > :is(.alppy-accueil-phrase, .alppy-accueil-note),
  .alppy-accueil .alppy-marque-mot, .alppy-action.est-fait,
  .chatbot-bulle-assistant.est-neuve .alppy-signature .icon,
  .chatbot-bulle-assistant.est-neuve .chatbot-ecriture,
  .chatbot-bulle-assistant.est-neuve .chatbot-attente,
  .alppy.est-anime .alppy-echange.est-montre .chatbot-bulle-moi,
  .alppy.est-anime .chatbot-bulle-assistant.est-neuve > p:not([class]),
  .dossier-echeance-resume, .dossier-item.est-touchee { animation: none; }
  .alppy-attente-points i { opacity: 1; }
  .alppy-attente-barre::after { width: 100%; opacity: .35; }
  .chatbot-bulle-assistant.est-neuve .chatbot-ecriture { background: var(--green-pale); }
  .chatbot-bulle-assistant.est-neuve .chatbot-attente { background: var(--orange-pale); }
  .dossier-item.est-touchee { background-color: var(--alppy-pale); }
  .app :is(.btn-primary, .btn-link):active { transform: none; }
  .alppy.est-anime .alppy-fil { scroll-behavior: auto; }
}

/* --------------------------------------------------------------- Nommage
   A gauche le tableau des renommages, a droite la piece dans le lecteur :
   le tampon, l'entoure, la note a la plume. */
.nommage-scene {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.nommage-tableau {
  overflow: hidden;
  border: 1px solid var(--gray-3);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  box-shadow: var(--ombre-carte);
}
.renommage { width: 100%; border-collapse: collapse; }
.renommage th {
  padding: 12px 18px;
  border-bottom: 1px solid var(--gray-2);
  background-color: var(--gray-1);
  color: var(--gray-5);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: left;
  letter-spacing: var(--suivi-serre);
}
.renommage th:first-child, .renommage td:first-child { width: 36%; }
.renommage td {
  padding: 18px;
  vertical-align: top;
  border-top: 1px solid var(--gray-2);
}
.renommage tbody tr:first-child td { border-top: 0; }
.renommage td + td { border-left: 1px solid var(--gray-2); }
.renommage-brut {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--gray-5);
  font-size: var(--fs-md);
  line-height: 1.4;
  text-decoration: line-through;
  text-decoration-color: rgba(var(--vitrine-gris-5-rgb), .45);
  overflow-wrap: anywhere;
}
.renommage-brut .icon { margin-top: 2px; color: var(--red); }
.renommage-lieu {
  display: block;
  margin-top: 6px;
  padding-left: 24px;
  color: var(--gray-5);
  font-size: var(--fs-xs);
  transition: opacity .4s var(--ease);
}
.renommage-net {
  display: block;
  color: var(--black);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.renommage-pourquoi {
  display: block;
  margin-top: 6px;
  color: var(--alp);
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.45;
}
/* La piece qui designe un autre mandat, comme le Juridique la montre
   (.juridique-autre-mandat dans style.css) : le nom en rouge, la phrase et
   le lien de deplacement dessous, du meme rouge. */
.renommage-net.est-autre-mandat { color: var(--red); }
.renommage-autre-mandat {
  display: block;
  margin-top: var(--espace-3xs);
  color: var(--red);
  font-size: var(--fs-xs);
  line-height: 1.45;
}
.renommage-deplacer {
  margin-left: var(--espace-2xs);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--red);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.renommage-deplacer:hover { color: var(--red-dark); }
.renommage-deplacer:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: var(--vitrine-rayon-2); }
.renommage-deplacer.est-fait {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--green-dark);
  text-decoration: none;
  cursor: default;
}
.renommage-deplacer.est-fait .icon { width: var(--icon-xs); height: var(--icon-xs); color: var(--green); }
tr.est-deplacee .renommage-lieu { opacity: .55; text-decoration: line-through; }

/* La piece dans le lecteur. Une lettre : une serif systeme, le seul endroit
   de la page qui n'est ni en Geologica ni en Inter. */
.feuille {
  padding: 12px;
  border: 1px solid var(--filet);
  border-radius: var(--radius-lg);
  background-color: var(--papier-2);
  box-shadow: var(--ombre-carte);
}
.feuille-barre { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.feuille-barre span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--vitrine-rayon-8);
  background-color: var(--surface);
  color: var(--gray-6);
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  box-shadow: var(--shadow-sm);
}
/* L'outil actif, comme dans l'atelier d'annotation : un fond cyan pale, le
   texte cyan fonce, sans filet. Ecrire est l'outil pris a l'ouverture. */
.feuille-barre span.est-actif { background-color: var(--cyan-pale); color: var(--cyan-dark); }
.feuille-barre .icon { width: var(--icon-sm); height: var(--icon-sm); }
.feuille-page {
  position: relative;
  padding: clamp(22px, 3vw, 34px) clamp(20px, 3vw, 32px) clamp(24px, 3vw, 34px);
  border-radius: var(--vitrine-rayon-4);
  background-color: var(--surface);
  color: var(--vitrine-feuille-encre);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .86rem;
  line-height: 1.6;
  box-shadow: 0 1px 3px rgba(var(--vitrine-encre-rgb), .1), 0 8px 24px -12px rgba(var(--vitrine-encre-rgb), .18);
}
.feuille-tampon {
  position: absolute;
  top: 18px;
  right: 16px;
}
.feuille-emetteur {
  max-width: calc(100% - 200px);
  margin-bottom: 20px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .03em;
}
.feuille-emetteur span { display: block; font-weight: 400; font-style: italic; letter-spacing: 0; color: var(--gray-5); }
.feuille-objet { margin-bottom: 12px; font-weight: 700; }
.feuille-texte { margin-bottom: 8px; }
.feuille-ordre { margin: 0; padding-left: 1.3em; }
.feuille-ordre li { margin: 3px 0; }
.feuille-entoure { position: relative; display: inline-block; }
.feuille-entoure::after {
  content: "";
  position: absolute;
  inset: -7px -12px -6px -10px;
  border: 2px solid var(--alp);
  border-radius: 50% / 55%;
  rotate: -1.5deg;
  opacity: .85;
  pointer-events: none;
}
.feuille-annotation {
  display: block;
  margin: 18px 0 0 38%;
  color: var(--alp);
  font-family: var(--titre);
  font-size: 1.02rem;
  font-style: oblique 12deg;
  font-weight: 500;
  line-height: 1.3;
  rotate: -3deg;
}
.feuille-lignes { display: grid; gap: 9px; margin-top: 18px; }
.feuille-lignes i { display: block; height: 6px; border-radius: var(--vitrine-rayon-3); background-color: var(--gray-2); }
.feuille-lignes i:nth-child(2) { width: 92%; }
.feuille-lignes i:nth-child(3) { width: 97%; }
.feuille-lignes i:nth-child(4) { width: 58%; }
.feuille-legende { margin-top: 14px; padding-inline: 4px; color: var(--encre-2); font-size: .9rem; line-height: 1.5; }

/* -------------------------------------------------------------- Juridique */
.controle-convocation {
  overflow: hidden;
  border: 1px solid var(--gray-3);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  box-shadow: var(--ombre-carte);
}
.controle-tete {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--gray-2);
  background-color: var(--gray-1);
}
.controle-icone {
  width: 38px;
  height: 38px;
  padding: 9px;
  border-radius: var(--radius);
  background-color: var(--cyan-pale);
  color: var(--cyan);
}
.controle-titre { color: var(--black); font-size: var(--fs-lg); font-weight: 600; line-height: 1.3; }
.controle-sous-titre { margin-top: 2px; color: var(--gray-5); font-size: var(--fs-sm); }
/* Les constats, recopies de style.css (.arrete-conformite) : le logiciel
   ne montre que ce qui accroche, une reserve en orange, une anomalie en
   rouge, chacune avec sa source. Un controle passe ne dit rien. */
.arrete-conformite {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3xs);
  margin: 0;
  padding: 16px 20px 18px;
  list-style: none;
}
.arrete-conformite-ligne {
  padding: var(--espace-2xs) var(--espace-xs);
  border: 1px solid color-mix(in srgb, var(--orange) 35%, var(--surface));
  border-radius: var(--radius-xs);
  background-color: var(--orange-pale);
  font-size: var(--fs-sm);
  color: var(--gray-6);
  line-height: 1.5;
}
.arrete-conformite-ligne[data-genre="anomalie"] {
  border-color: color-mix(in srgb, var(--red) 35%, var(--surface));
  background-color: var(--red-pale);
}
.arrete-conformite-marque {
  display: inline-block;
  margin-right: var(--espace-3xs);
  padding: 0 var(--espace-2xs);
  border-radius: var(--radius-xs);
  background-color: var(--orange);
  color: var(--vitrine-blanc);
  font-size: var(--fs-3xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--suivi-entete);
  white-space: nowrap;
}
.arrete-conformite-ligne[data-genre="anomalie"] .arrete-conformite-marque { background-color: var(--red); }
.arrete-conformite-source {
  display: block;
  margin-top: var(--espace-3xs);
  font-size: var(--fs-2xs);
  color: var(--gray-5);
}

/* -------------------------------------------------------------------- FEC
   Le profil en long : les courbes de niveau en bistre, une maitresse toutes
   les cinq, le trace en bleu sur un remplissage de glacier. */
.profil {
  padding: clamp(18px, 2.6vw, 32px);
  border: 1px solid var(--filet);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  box-shadow: 0 1px 2px rgba(var(--vitrine-encre-rgb), .05);
}
.profil-defile {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  border-radius: var(--vitrine-rayon-6);
}
/* Les deux bandes qui defilent au clavier (voir defilants() dans
   vitrine.js). Le profil a de la marge autour de lui : son contour s'en
   ecarte. La synthese remplit un cadre qui rogne ce qui deborde : un
   contour pose dehors y serait coupe, il se pose donc dedans. */
.profil-defile:focus-visible { outline: 2px solid var(--alp); outline-offset: 4px; }
.synthese-defile:focus-visible {
  outline: 2px solid var(--alp);
  outline-offset: -2px;
  border-radius: var(--radius-lg);
}
.profil-svg { width: 100%; min-width: 860px; height: auto; overflow: visible; }
.profil-courbe { stroke: var(--bistre); stroke-opacity: .26; stroke-width: 1; vector-effect: non-scaling-stroke; }
.profil-courbe.est-maitresse { stroke-opacity: .6; stroke-width: 1.5; }
.profil-cote-courbe { fill: var(--bistre); font-family: var(--titre); font-size: 12px; font-style: oblique 10deg; font-weight: 500; }
.profil-remplissage { fill: var(--glacier); fill-opacity: .75; }
.profil-trace { fill: none; stroke: var(--alp); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.profil-base { stroke: var(--encre); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.profil-station line { stroke: var(--alp); stroke-opacity: .4; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.profil-station circle { fill: var(--vitrine-blanc); stroke: var(--alp); stroke-width: 2; vector-effect: non-scaling-stroke; }
.profil-cote { fill: var(--encre); font-family: var(--titre); font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.profil-code { fill: var(--encre-3); font-family: var(--texte); font-size: 12px; font-variant-numeric: tabular-nums; }
/* Avec script, les stations se posent l'une apres l'autre, derriere le trace
   qui se dessine (voir Mise en scene). */
.profil.est-en-attente .profil-station { opacity: 0; translate: 0 8px; }

.profil-legende { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--filet); }
.chapitres { margin: 0; padding: 0; list-style: none; columns: 17rem; column-gap: 36px; }
.chapitres li {
  display: grid;
  grid-template-columns: 2.8em minmax(0, 1fr) auto;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dotted var(--filet);
  break-inside: avoid;
  font-size: .88rem;
  line-height: 1.4;
}
.chapitre-code { color: var(--encre-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.chapitre-titre { color: var(--encre-2); }
.chapitre-points { color: var(--encre); font-weight: 600; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- Synthese
   Les regles de la synthese de groupe du produit (`.synthese-groupe-*` dans
   style.css), recopiees sous des noms courts : la colonne Total d'abord, sur
   fond gris, puis une par structure, separees d'un trait epais que porte la
   variation ; l'exercice de reference en gras ; les cases saisies sur un fond
   vert tres pale, celles lues dans un document sur un fond bleu, le chiffre
   souligne d'un pointille. Seul le cadre est celui de la vitrine : une carte
   posee sur la page, la ou le produit remplit la sienne. */
.synthese-cadre {
  overflow: hidden;
  border: 1px solid var(--gray-3);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  box-shadow: var(--ombre-carte);
}
.synthese-defile { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.synthese {
  --entete-h: 2.4rem;
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1.4;
}
.synthese thead th {
  background-color: var(--gray-1);
  padding: var(--espace-2xs) var(--espace-sm);
  border-bottom: 1px solid var(--gray-3);
  text-align: right;
  font-weight: 600;
  color: var(--gray-6);
}
.synthese thead tr:first-child th { height: var(--entete-h); }
.synthese thead th.synthese-structure {
  text-align: center;
  border-left: 2px solid var(--gray-3);
  max-width: 18em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.synthese-signataire {
  display: block;
  font-size: var(--fs-3xs);
  font-weight: 400;
  color: var(--gray-4);
  overflow: hidden;
  text-overflow: ellipsis;
}
.synthese thead th.synthese-annee {
  font-weight: 500;
  color: var(--gray-5);
  text-align: center;
}
.synthese th.synthese-mesure,
.synthese thead th.synthese-coin {
  position: sticky;
  left: 0;
  z-index: 3;
  background-color: var(--surface);
  text-align: left;
  font-weight: 500;
  padding: var(--espace-2xs) var(--espace-sm);
  border-right: 1px solid var(--gray-2);
  width: 17em;
  min-width: 17em;
  white-space: normal;
}
.synthese thead th.synthese-coin { background-color: var(--gray-1); z-index: 4; }
.synthese th.synthese-mesure.est-saisissable { color: var(--gray-5); font-style: italic; }
.synthese .est-total { background-color: var(--gray-1); }
.synthese thead th.est-total { background-color: var(--gray-2); }
.synthese td.est-total { font-weight: 600; }
.synthese-case {
  padding: var(--espace-2xs) var(--espace-sm);
  border-top: 1px solid var(--gray-2);
  text-align: right;
  color: var(--gray-6);
}
.synthese-case.est-vide { color: var(--gray-3); }
.synthese-case.est-negatif,
.synthese-case.est-variation.est-negatif { color: var(--orange-dark); }
.synthese td.synthese-case.est-reference { font-weight: 700; }
.synthese thead th.synthese-annee.est-reference { font-weight: 700; color: var(--gray-6); }
.synthese-case.est-variation {
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-3xs);
  color: var(--gray-5);
  padding-left: var(--espace-3xs);
  padding-right: var(--espace-3xs);
  border-right: 2px solid var(--gray-3);
}
.synthese thead th.synthese-annee.est-variation {
  font-size: var(--fs-3xs);
  padding-left: var(--espace-3xs);
  padding-right: var(--espace-3xs);
  text-align: right;
}
.synthese-case.est-saisissable { background-color: rgba(var(--vitrine-vert-rgb), .05); }
.synthese-case.est-lue { background-color: rgba(var(--vitrine-alp-rgb), .05); }
.synthese-case.est-centre { text-align: center; }
/* Le champ du produit est un `<input>` : ici un texte, qui en garde la
   largeur minimale et l'alignement. */
.synthese-champ { display: inline-block; min-width: 5em; color: var(--gray-6); }
.synthese-case.est-lue .synthese-champ {
  text-decoration: underline dotted var(--gray-4);
  text-underline-offset: 3px;
}
.synthese-case.est-non-determine .synthese-champ { color: var(--gray-4); }
.synthese tfoot .synthese-documents-case {
  padding: var(--espace-2xs) var(--espace-sm);
  border-top: 2px solid var(--gray-3);
  border-left: 2px solid var(--gray-3);
  text-align: center;
  background-color: var(--surface);
}
.synthese tfoot .synthese-documents-case.est-total { background-color: var(--gray-1); }
.synthese tfoot th.synthese-mesure { border-top: 2px solid var(--gray-3); color: var(--gray-5); }
.synthese-doc {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-3xs);
  border: 1px solid var(--gray-3);
  border-radius: 999px;
  background-color: var(--surface);
  color: var(--gray-5);
  font-size: var(--fs-3xs);
  font-weight: 500;
  line-height: 1.2;
  padding: var(--espace-3xs) var(--espace-xs);
}
.synthese-doc .icon { width: 1em; height: 1em; }

/* -------------------------------------------------------------- Livrables
   Un sommaire imprime : trois parties, un point de carte devant chaque
   entree. */
.sommaire {
  padding: clamp(22px, 3vw, 40px);
  border: 1px solid var(--filet);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  box-shadow: 0 1px 2px rgba(var(--vitrine-encre-rgb), .05);
}
.sommaire-titre {
  margin-top: 32px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--encre);
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -.01em;
}
.sommaire-titre:first-child { margin-top: 0; }
.sommaire-liste { margin: 0; padding: 0; list-style: none; }
.sommaire-liste li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--filet);
  color: var(--encre);
  font-size: .98rem;
  line-height: 1.45;
}
.sommaire-liste li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--alp);
  border-radius: 50%;
  translate: 0 -2px;
}
.sommaire-liste li > span:first-of-type { flex: 1 1 18rem; min-width: 0; }
.sommaire-valeur { margin-left: auto; color: var(--encre-3); font-size: .88rem; white-space: nowrap; }

/* ---------------------------------------------------------------- Cabinet */
.cabinet-grille {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
/* Seule dans sa section, sur la page de sa famille (les droits, ou
   l'acceptation) : une colonne, a la largeur d'une carte. */
.cabinet-grille.est-seule { grid-template-columns: minmax(0, 1fr); max-width: 44rem; }
:is(.droits, .acceptation) {
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid var(--gray-3);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  box-shadow: var(--ombre-carte);
}
.droits-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.droits-tete .dossier-avatar { --avatar-d: 44px; }
:is(.droits-titre, .acceptation-titre) {
  color: var(--black);
  font-family: var(--sans);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
}
.droits-sous-titre { margin-top: 2px; color: var(--gray-5); font-size: var(--fs-sm); }
/* Le bouton-lien du produit (.btn-link), qui pose un modele d'un geste, et
   l'etat qui dit que c'est enregistre. */
.droits-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 6px -12px; }
.droits-modele {
  display: inline-flex;
  align-items: center;
  min-height: var(--h-sm);
  padding: var(--espace-2xs) var(--espace-sm);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--cyan-dark);
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color .15s var(--ease);
}
.droits-modele:hover { background-color: var(--cyan-pale); }
.droits-modele:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.droits-etat { color: var(--green); font-size: var(--fs-sm); font-style: italic; }

/* Un domaine, puis ses deux cases, Voir et Modifier : les deux cases du
   panneau d'acces du produit (cabinet.js), qui disent un reglage a trois
   crans sans pouvoir se contredire. Le libelle passe au-dessus des cases
   quand la carte se resserre. */
.droit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0;
  padding: 12px 0;
  border-top: 1px solid var(--gray-2);
}
.droit-libelle { flex: 1 1 14em; min-width: 0; color: var(--black); font-size: var(--fs-md); font-weight: 500; }
.droit-case {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-2xs);
  flex: none;
  width: 6.5rem;
  color: var(--gray-5);
  font-size: var(--fs-sm);
  cursor: pointer;
}
/* La case du produit (style.css, `input[type="checkbox"]`) : la vitrine ne
   charge pas sa feuille, elle en reprend le dessin ici. */
.droit-case input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 17px;
  height: 17px;
  margin: 0;
  border: 1.5px solid var(--gray-3);
  border-radius: var(--radius-xs);
  background: var(--surface) center no-repeat;
  background-size: 72%;
  cursor: pointer;
  transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
.droit-case input:hover { border-color: var(--gray-4); }
.droit-case input:checked {
  background-color: var(--cyan);
  border-color: var(--cyan);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.droit-case input:focus-visible { outline: none; border-color: var(--cyan); box-shadow: var(--anneau-champ); }
.droits-note { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--gray-2); color: var(--gray-5); font-size: var(--fs-sm); line-height: 1.5; }

/* Le selecteur a choix unique du produit : piste grise, curseur cyan plein
   qui glisse d'un choix a l'autre. Sans script, le choix coche porte le cyan
   lui-meme ; vitrine.js pose `est-pilote` et place le curseur. */
.segment {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  gap: var(--espace-3xs);
  padding: var(--espace-3xs);
  border-radius: var(--radius);
  background-color: var(--gray-2);
}
.segment-choix {
  position: relative;
  z-index: 1;
  padding: var(--espace-2xs) var(--espace);
  border-radius: var(--radius-sm);
  color: var(--gray-5);
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: 1.6;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.segment-choix input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.segment-choix:hover { color: var(--gray-6); }
.segment-choix:has(input:checked), .segment-choix input:checked + span { color: var(--vitrine-blanc); }
.segment:not(.est-pilote) .segment-choix:has(input:checked) { background-color: var(--cyan); box-shadow: var(--shadow-sm); }
.segment-curseur {
  position: absolute;
  z-index: 0;
  top: var(--espace-3xs);
  bottom: var(--espace-3xs);
  left: var(--curseur-x, 0);
  width: var(--curseur-l, 0);
  border-radius: var(--radius-sm);
  background-color: var(--cyan);
  box-shadow: var(--shadow-sm);
  transition: left .3s var(--ease), width .3s var(--ease);
}
.segment:not(.est-pilote) .segment-curseur { display: none; }
.segment:has(:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 2px; }

.acceptation-titre { display: flex; align-items: center; gap: 10px; }
.acceptation-titre .icon { width: var(--icon-lg); height: var(--icon-lg); color: var(--cyan); }
.acceptation-texte { margin-top: 8px; color: var(--gray-6); font-size: var(--fs-md); line-height: 1.55; }
.acceptation-champ { display: grid; gap: 6px; margin-top: 18px; }
.acceptation-champ-libelle { color: var(--gray-6); font-size: var(--fs-xs); font-weight: 600; }
.acceptation-champ-valeur {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--cyan);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  box-shadow: var(--anneau-champ);
}
.acceptation-champ-valeur i { width: 7px; height: 7px; border-radius: 50%; background-color: var(--gray-6); }
.acceptation-champ-valeur i:nth-child(3n) { margin-right: 7px; }
.acceptation-champ-valeur::after {
  content: "";
  width: 1.5px;
  height: 18px;
  margin-left: -4px;
  background-color: var(--cyan);
  animation: curseur-clignote 1.1s steps(1) infinite;
}
@keyframes curseur-clignote { 50% { opacity: 0; } }
.acceptation-risque {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  min-width: 0;
  margin: 18px 0 0;
  padding: 0;
  border: 0;
}
.acceptation-risque legend { float: left; padding: 0; color: var(--gray-6); font-size: var(--fs-xs); font-weight: 600; }
.acceptation-note {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background-color: var(--gray-1);
  color: var(--gray-6);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.acceptation-note .icon { margin-top: 2px; color: var(--green-dark); }

/* -------------------------------------------------------------- Appareils
   Une publicite en plan-sequence, sur fond blanc (vitrine-appareils.js).
   Le plateau est le cadre du film, 1920 sur 1080 : tout ce qui s'y pose
   s'ecrit en pixels du film, et le script le met a l'echelle de l'ecran comme
   une camera. Le film ne montre que le telephone et la main ; l'ecran allume,
   l'iPad et la montre sont du HTML pose par-dessus, sur les donnees fictives
   de la maquette. Sans script, ou en mouvement reduit, la figure de repli
   montre la scene finale. */
.section-appareils {
  background-image: linear-gradient(var(--papier), var(--vitrine-blanc) 260px, var(--vitrine-blanc) calc(100% - 180px), var(--papier));
}
/* La figure de repli est une prise de vue sur blanc : sans le film, la
   section est courte, et le blanc doit la tenir jusqu'en bas. */
.section-appareils:not(.est-anime) {
  background-image: linear-gradient(var(--papier), var(--vitrine-blanc) 200px, var(--vitrine-blanc) calc(100% - 60px), var(--papier));
}
.est-anime .duo-repli { display: none; }
.duo-repli { margin: 0 auto; max-width: 1100px; }
.duo-repli img { display: block; width: 100%; height: auto; }

/* La course du defilement : 360vh depuis le 19 octobre 2026 (600 avant).
   Le site range en pages courtes, la scene se joue en moins de defilement ;
   le script lit la course sur la hauteur, rien d'autre ne change. */
.duo {
  position: relative;
  height: 360vh;
  margin-inline: calc(50% - 50vw);
}
.duo-scene {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.duo-plateau {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  pointer-events: none;
}
.duo-film-cadre {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(to right, transparent, var(--vitrine-noir) 10%), linear-gradient(to bottom, transparent, var(--vitrine-noir) 9%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, var(--vitrine-noir) 10%), linear-gradient(to bottom, transparent, var(--vitrine-noir) 9%);
  mask-composite: intersect;
}
.duo-film-cadre > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.duo-film { opacity: 0; }
.est-filme-pret .duo-film { opacity: 1; }
.duo-fixe { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; opacity: 0; }

/* L'ecran du telephone ouvert : 698 sur 768, sous la vitre. Il suit les
   proportions d'un iPhone plie a l'horizontale ; un pixel du film y vaut un
   point d'iOS, les tailles de texte sont donc celles d'iOS, a peine forcees. */
.duo-ecran {
  position: absolute;
  left: 612px;
  top: 158px;
  width: 698px;
  height: 768px;
  overflow: hidden;
  border-radius: var(--vitrine-rayon-34);
  background-color: var(--surface);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 19px;
  line-height: 1.3;
  opacity: 0;
  -webkit-font-smoothing: antialiased;
}
:where(.duo-ecran, .duo-ipad, .duo-montre) :is(p, ul) { margin: 0; padding: 0; list-style: none; }
.duo-ecran .icon, .duo-ipad .icon { width: 1em; height: 1em; }

.duo-barre-etat {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  padding: 4px 30px 0 34px;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.01em;
  pointer-events: none;
}
.duo-etat-icones { display: flex; align-items: center; gap: 7px; }
.duo-etat-icones i { display: block; }
.duo-reseau {
  width: 18px;
  height: 12px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 3px 35% no-repeat,
              linear-gradient(currentColor, currentColor) 5px 100% / 3px 55% no-repeat,
              linear-gradient(currentColor, currentColor) 10px 100% / 3px 78% no-repeat,
              linear-gradient(currentColor, currentColor) 15px 100% / 3px 100% no-repeat;
}
.duo-wifi {
  width: 16px;
  height: 12px;
  background: radial-gradient(circle at 50% 100%, currentColor 0 2.6px, transparent 3px 5.2px, currentColor 5.6px 8px, transparent 8.4px 10.6px, currentColor 11px 13.4px, transparent 13.8px);
  -webkit-mask-image: conic-gradient(from -45deg at 50% 100%, var(--vitrine-noir) 90deg, transparent 0);
  mask-image: conic-gradient(from -45deg at 50% 100%, var(--vitrine-noir) 90deg, transparent 0);
}
.duo-pile {
  position: relative;
  width: 25px;
  height: 12px;
  border: 1.5px solid rgba(var(--vitrine-encre-rgb), .4);
  border-radius: var(--vitrine-rayon-4);
  box-shadow: inset 0 0 0 1.5px var(--vitrine-blanc);
  background-color: currentColor;
}
.duo-pile::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 3px;
  width: 2px;
  height: 4px;
  border-radius: 0 var(--vitrine-rayon-1) var(--vitrine-rayon-1) 0;
  background-color: rgba(var(--vitrine-encre-rgb), .4);
}

/* Le lancement : le logo sur blanc, le temps que l'ecran s'allume. */
.duo-lancement {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: grid;
  place-items: center;
  background-color: var(--surface);
}
/* La montagne en relief, celle de l'icone de l'app : le A a plat, d'une
   seule teinte, etait l'icone d'avant le 29 septembre 2026 (38.61). */
.duo-lancement-a { width: 132px; height: 132px; object-fit: contain; }

/* L'application : le fond gris1 de l'app et ses cartes blanches. */
.duo-app {
  position: absolute;
  inset: 0;
  background-color: var(--gray-1);
}
.duo-app-contenu {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 56px 24px 0;
}
.duo-app.est-etroit .duo-app-contenu { left: 355px; padding-inline: 18px; }
.duo-app-attente {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
}
.duo-attente-a {
  width: 92px;
  height: 92px;
  padding: 16px;
  border-radius: var(--vitrine-rayon-22);
  object-fit: contain;
  background-color: var(--surface);
  box-shadow: 0 6px 20px rgba(var(--vitrine-encre-rgb), .12);
}
.duo-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  color: var(--cyan);
  font-size: 19px;
}
.duo-retour { display: inline-flex; align-items: center; gap: 4px; }
.duo-chevron {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  border-radius: var(--vitrine-rayon-1);
  rotate: 45deg;
  margin-right: 4px;
}
.duo-liste .duo-chevron { rotate: -135deg; margin: 0 4px 0 auto; width: 10px; height: 10px; border-width: 2.5px; color: var(--vitrine-ios-chevron); }
.duo-titre {
  margin-top: 6px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
}
/* La barre d'un mandat, comme VueMandat la pose. En pleine largeur, les
   volets prennent la place du titre, au centre du bandeau (420 points au
   plus, segments d'egale largeur, comme un UISegmentedControl) ; ecran
   partage, la largeur devient compacte : le nom revient au centre et les
   volets descendent flotter sur du verre au bas de l'ecran. */
.duo-nav-mandat {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
}
.duo-nav-mandat .duo-retour { grid-column: 1; justify-self: start; }
.duo-nav-titre {
  display: none;
  grid-column: 2;
  overflow: hidden;
  color: var(--encre);
  font-size: 19px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 470 px : les 420 points du selecteur de l'app (maxWidth), a l'echelle de la maquette. */
.duo-volets-cadre { grid-column: 2; width: 470px; }
.duo-volets {
  position: relative;
  overflow: hidden;
  border-radius: var(--vitrine-rayon-9);
  background-color: var(--gray-2);
}
.duo-volets-piste {
  display: flex;
  gap: 2px;
  padding: 2px;
  translate: var(--decale, 0) 0;
}
.duo-volets-piste span {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 2px;
  border-radius: var(--vitrine-rayon-7);
  color: var(--gray-5);
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}
.duo-volets-piste .est-actif { background-color: var(--cyan); color: var(--vitrine-blanc); }
.duo-app.est-etroit .duo-retour-texte { display: none; }
.duo-app.est-etroit .duo-nav-titre { display: block; }
.duo-app.est-etroit .duo-volets-cadre {
  position: absolute;
  z-index: 1;
  left: 14px;
  right: 14px;
  bottom: 40px;
  width: auto;
  padding: 11px 18px;
  border: 1px solid rgba(var(--vitrine-blanc-rgb), .7);
  border-radius: var(--vitrine-rayon-22);
  background-color: rgba(var(--vitrine-blanc-rgb), .72);
  box-shadow: 0 8px 24px rgba(var(--vitrine-encre-rgb), .12);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
}
.est-etroit .duo-volets-piste span { flex: 1 0 auto; padding-inline: 10px; }
.est-etroit .duo-volets {
  -webkit-mask-image: linear-gradient(to right, transparent, var(--vitrine-noir) 22px, var(--vitrine-noir) calc(100% - 22px), transparent);
  mask-image: linear-gradient(to right, transparent, var(--vitrine-noir) 22px, var(--vitrine-noir) calc(100% - 22px), transparent);
}

/* La rangee des exercices (BarreExercicesAudit) : les annees a gauche, du
   plus recent au plus ancien, et les trois carres d'avancement a droite,
   celui de l'etat de l'exercice ouvert allume. */
.duo-exercices {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 11px;
  padding: 7px 0;
}
.duo-exercices-piste {
  display: inline-flex;
  gap: 4px;
  padding: 2px;
  border: 1px solid var(--gray-3);
  border-radius: var(--vitrine-rayon-8);
  background-color: var(--gray-1);
}
.duo-annee {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: var(--vitrine-rayon-6);
  color: var(--gray-5);
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
}
.duo-annee.est-active {
  background-color: var(--surface);
  color: var(--encre);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(var(--vitrine-encre-rgb), .12);
}
.duo-annee-point { width: 7px; height: 7px; border-radius: 50%; }
.duo-annee-verrou { width: 9px; height: 9px; }
.duo-annee-point[data-etat="urgent"], .duo-carre[data-etat="urgent"] i { background-color: var(--orange); }
.duo-annee-point[data-etat="encours"], .duo-carre[data-etat="encours"] i { background-color: var(--green); }
.duo-avancement { display: inline-flex; gap: 7px; }
.duo-carre {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid var(--gray-3);
  border-radius: var(--vitrine-rayon-8);
  background-color: var(--surface);
  color: var(--gray-5);
}
.duo-carre i { width: 10px; height: 10px; border-radius: 50%; opacity: .45; }
.duo-carre-verrou { width: 13px; height: 13px; opacity: .45; }
.duo-carre.est-allume i { width: 13px; height: 13px; opacity: 1; }
.duo-carre.est-allume .duo-carre-verrou { color: var(--encre); opacity: 1; }
.duo-carre.est-allume[data-etat="urgent"] { border-color: var(--orange); background-color: var(--orange-pale); }
.duo-carre.est-allume[data-etat="encours"] { border-color: var(--green); background-color: var(--green-pale); }
.duo-carre.est-allume[data-etat="termine"] { border-color: var(--gray-4); background-color: var(--gray-1); }
.duo-liste {
  overflow: hidden;
  border-radius: var(--vitrine-rayon-14);
  background-color: var(--surface);
}
.duo-liste > li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 10px 16px;
}
.duo-liste > li + li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 66px;
  right: 0;
  border-top: 1px solid var(--vitrine-ios-separateur);
}
.duo-zone { margin-top: 8px; }
.duo-zone > li { gap: 13px; min-height: 50px; padding: 7px 18px; }
.duo-zone > li + li::before { left: 57px; }
.duo-zone .duo-ligne-texte { gap: 3px; }
.duo-zone .duo-ligne-texte b { font-size: 17px; font-weight: 500; }
.duo-zone .duo-ligne-texte small { gap: 11px; color: var(--gray-4); font-size: 13.5px; }
.duo-nature {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 26px;
  color: var(--gray-5);
  font-size: 23px;
  line-height: 0;
}
.duo-zone > li.duo-ligne-dossier { gap: 7px; }
.duo-ligne-dossier .duo-chevron {
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 9px 0 7px;
  border-width: 2.2px;
  color: var(--gray-4);
}
.duo-dossier { color: var(--yellow); font-size: 24px; line-height: 0; }
.duo-zone .duo-ligne-dossier b { font-size: 19px; font-weight: 400; }
.duo-ligne-texte { display: grid; min-width: 0; gap: 2px; }
.duo-ligne-texte b {
  display: -webkit-box;
  overflow: hidden;
  font-size: 17px;
  font-weight: 550;
  line-height: 1.25;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.duo-ligne-texte small { display: flex; align-items: center; gap: 8px; color: var(--vitrine-ios-texte-2); font-size: 14px; }
/* La vignette d'un PDF : une page, son titre, sa bande rouge. */
.duo-vignette {
  position: relative;
  flex: none;
  width: 34px;
  height: 44px;
  border: 1px solid var(--vitrine-vignette-bord);
  border-radius: var(--vitrine-rayon-5);
  background: linear-gradient(var(--vitrine-vignette-trait), var(--vitrine-vignette-trait)) 6px 9px / 20px 2px no-repeat,
              linear-gradient(var(--vitrine-vignette-trait-2), var(--vitrine-vignette-trait-2)) 6px 14px / 16px 2px no-repeat,
              linear-gradient(var(--vitrine-vignette-trait-2), var(--vitrine-vignette-trait-2)) 6px 19px / 19px 2px no-repeat,
              var(--vitrine-blanc);
}
.duo-vignette b {
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: 5px;
  background-color: var(--red);
  color: var(--vitrine-blanc);
  font-size: 9px;
  font-weight: 700;
  line-height: 13px;
  letter-spacing: .04em;
  text-align: center;
}
.duo-vignette-photo {
  border: 0;
  background: linear-gradient(180deg, var(--vitrine-photo-ciel) 0%, var(--vitrine-photo-horizon) 48%, var(--vitrine-photo-pre) 49%, var(--vitrine-photo-sol) 100%);
}
.duo-vignette-photo::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 19px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 13px solid var(--vitrine-vignette-coin);
}

/* La piece deposee : sa rangee s'ouvre (le script pose sa hauteur), puis
   elle y parait, soulignee d'un bleu pale qui s'efface. */
.duo-liste > li.duo-arrivee { display: block; min-height: 0; height: 0; padding: 0; overflow: hidden; }
.duo-liste > li.duo-arrivee + li::before { left: 57px; }
.duo-arrivee-dedans {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 50px;
  padding: 7px 18px;
  opacity: 0;
  background-color: rgba(var(--vitrine-alp-rgb), calc(var(--lueur, 0) * .1));
}

/* Fichiers, dans la moitie gauche. */
.duo-fichiers {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  bottom: 0;
  width: 349px;
  padding: 56px 16px 0;
  background-color: var(--surface);
  translate: -355px 0;
}
.duo-fichiers .duo-titre { font-size: 30px; }
.duo-recherche {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  margin-top: 12px;
  padding-inline: 10px;
  border-radius: var(--vitrine-rayon-11);
  background-color: var(--vitrine-ios-recherche);
  color: var(--vitrine-ios-recherche-texte);
  font-size: 17px;
}
.duo-liste-fichiers { margin-top: 14px; border-radius: 0; }
.duo-liste-fichiers > li { padding-inline: 4px; }
.duo-liste-fichiers > li + li::before { left: 52px; }
.duo-liste-fichiers .duo-ligne-texte b { -webkit-line-clamp: 1; }
.duo-source { border-radius: var(--vitrine-rayon-12); background-color: rgba(var(--vitrine-ios-remplissage-rgb), calc(var(--appui, 0) * .16)); }
.duo-separateur {
  position: absolute;
  z-index: 3;
  left: 349px;
  top: 0;
  bottom: 0;
  width: 6px;
  background-color: var(--vitrine-noir);
  translate: -355px 0;
}
.duo-separateur::after {
  content: "";
  position: absolute;
  left: 1px;
  top: calc(50% - 30px);
  width: 4px;
  height: 60px;
  border-radius: var(--vitrine-rayon-2);
  background-color: var(--vitrine-ios-poignee);
}

/* La piece qu'on emporte, et le doigt qui l'emporte. */
.duo-fantome {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 300px;
  height: 64px;
  padding: 10px 14px;
  border-radius: var(--vitrine-rayon-14);
  background-color: var(--surface);
  box-shadow: 0 1px 2px rgba(var(--vitrine-encre-rgb), .08), 0 18px 40px rgba(var(--vitrine-encre-rgb), .22);
  opacity: 0;
  transform-origin: 50% 50%;
}
.duo-fantome > b {
  overflow: hidden;
  font-size: 17px;
  font-weight: 550;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.duo-plus {
  position: absolute;
  top: -11px;
  right: -11px;
  width: 30px;
  height: 30px;
  border: 2px solid var(--vitrine-blanc);
  border-radius: 50%;
  background: linear-gradient(var(--vitrine-blanc), var(--vitrine-blanc)) center / 14px 3px no-repeat,
              linear-gradient(var(--vitrine-blanc), var(--vitrine-blanc)) center / 3px 14px no-repeat,
              var(--green);
  scale: 0;
}
.duo-doigt {
  position: absolute;
  z-index: 5;
  left: -28px;
  top: -28px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: rgba(var(--vitrine-ios-doigt-rgb), .34);
  box-shadow: inset 0 0 0 2px rgba(var(--vitrine-blanc-rgb), .75), 0 4px 14px rgba(var(--vitrine-encre-rgb), .16);
  opacity: 0;
}

/* Le pli et la vitre : ce qui rappelle qu'on regarde un objet. */
.duo-pli {
  position: absolute;
  z-index: 7;
  left: 344px;
  top: 0;
  bottom: 0;
  width: 14px;
  background-image: linear-gradient(to right, transparent, rgba(var(--vitrine-noir-rgb), .028) 40%, rgba(var(--vitrine-blanc-rgb), .05) 55%, rgba(var(--vitrine-noir-rgb), .02) 70%, transparent);
  pointer-events: none;
}
.duo-reflet {
  position: absolute;
  z-index: 7;
  inset: 0;
  background-image: linear-gradient(118deg, transparent 38%, rgba(var(--vitrine-blanc-rgb), .06) 48%, transparent 58%);
  pointer-events: none;
}

/* L'iPad et la montre : des photographies detourees, et leur ecran en HTML. */
.duo-ipad, .duo-montre {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.duo-ipad { width: 1463px; height: 1149px; }
.duo-montre { width: 564px; height: 1003px; }
.duo-ipad > img, .duo-montre > img { display: block; width: 100%; height: 100%; }
.duo-ipad-ecran {
  position: absolute;
  left: 8.743%;
  top: 10.255%;
  width: 82.514%;
  height: 77.673%;
  display: grid;
  grid-template-columns: 262px minmax(0, 1fr);
  overflow: hidden;
  border-radius: var(--vitrine-rayon-20);
  background-color: var(--surface);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 19px;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}
.duo-ipad-barre {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 34px 14px 24px;
  background-color: var(--gray-1);
}
.duo-ipad-marque {
  margin: 0 0 16px 8px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.duo-ipad-version { margin: auto 0 0 14px; color: var(--gray-4); font-size: 13px; }
.duo-ipad-barre > span {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--vitrine-rayon-11);
  font-size: 18px;
  font-weight: 500;
}
.duo-ipad-barre > span .icon { color: var(--cyan); font-size: 22px; }
.duo-ipad-barre > span.est-actif { background-color: var(--cyan); color: var(--vitrine-blanc); }
.duo-ipad-barre > span.est-actif .icon { color: var(--vitrine-blanc); }
.duo-ipad-contenu { padding: 44px 36px 0; background-color: var(--gray-1); border-left: 1px solid var(--gray-3); }
.duo-ipad .est-nouvelle { background-color: rgba(var(--vitrine-alp-rgb), .07); }

.duo-montre-ecran {
  position: absolute;
  left: 117.5px;
  top: 309px;
  width: 235px;
  height: 306px;
  overflow: hidden;
  padding: 30px 20px 0;
  border-radius: var(--vitrine-rayon-44);
  background-color: var(--vitrine-noir);
  color: var(--vitrine-blanc);
  font-family: var(--texte);
  -webkit-font-smoothing: antialiased;
}
.duo-montre-app { display: flex; align-items: center; gap: 7px; color: var(--vitrine-montre-bleu); font-size: 16px; font-weight: 650; }
.duo-montre-a { width: 22px; height: 22px; padding: 3px; border-radius: 50%; object-fit: contain; background-color: var(--surface); }
.duo-montre-titre { margin-top: 16px; font-size: 19px; font-weight: 700; line-height: 1.2; }
.duo-montre-texte { margin-top: 8px; color: var(--vitrine-montre-texte); font-size: 17px; line-height: 1.3; }

/* Les legendes, une a la fois, au-dessus de la scene. */
.duo-legendes {
  position: absolute;
  z-index: 2;
  top: calc(var(--entete-h) + clamp(22px, 4.5vh, 48px));
  left: 0;
  right: 0;
  display: grid;
  padding-inline: var(--gouttiere);
  text-align: center;
  pointer-events: none;
}
.duo-legende {
  grid-area: 1 / 1;
  margin: 0;
  color: var(--encre);
  font-family: var(--titre);
  font-size: clamp(1.45rem, 2.7vw, 2.5rem);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -.03em;
  text-wrap: balance;
  opacity: 0;
}
@media (max-width: 760px) {
  .duo { height: 400vh; }
  .duo-legende { font-size: 1.45rem; }
}

/* ---------------------------------------------------------------- Legende
   L'index de la carte : en colonnes, comme une legende imprimee. */
.legende { columns: 3 19rem; column-gap: clamp(32px, 4.5vw, 64px); }
.legende-groupe { break-inside: avoid; margin-bottom: 40px; }
.legende-titre {
  margin-bottom: 4px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--encre);
  font-size: 1.08rem;
  font-weight: 650;
  letter-spacing: -.01em;
}
.legende-liste { margin: 0; padding: 0; list-style: none; }
.legende-entree {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--filet);
}
.legende-symbole {
  grid-row: span 2;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  padding: 4px;
  border: 1px solid var(--filet);
  border-radius: var(--vitrine-rayon-7);
  background-color: var(--vitrine-blanc);
  color: var(--alp);
}
.legende-nom { color: var(--encre); font-size: .98rem; font-weight: 600; line-height: 1.35; }
.legende-ligne { color: var(--encre-2); font-size: .9rem; line-height: 1.45; }
.legende-compte {
  margin-left: 10px;
  color: var(--encre-3);
  font-family: var(--texte);
  font-size: .85rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------- Les pages des fonctions
   L'index (/fonctions) et la page de chaque famille (/fonctions/<famille>),
   ou vit le detail que l'accueil ne garde plus (13 octobre 2026). Une carte
   par metier, a la tuile de sa couleur ; la page d'une famille reprend sa
   tuile, ses apports et la liste de ses fonctions, puis ses maquettes. */
.superapp-tout { margin-top: clamp(28px, 3.5vw, 44px); text-align: center; }

/* Pas de heros sous l'en-tete : la premiere section s'en ecarte elle-meme. */
:is(.fonctions-tete, .fonction-tete, .page-tete) {
  padding-top: calc(var(--entete-h) + clamp(36px, 6vw, 88px));
}
:is(.fonctions-tete, .fonction-tete, .page-tete) h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.9rem);
  font-weight: 650;
  line-height: 1.06;
  letter-spacing: -.035em;
}

.fil {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: clamp(24px, 3vw, 36px);
  color: var(--encre-3);
  font-size: .92rem;
}
.fil a { color: var(--alp); font-weight: 600; text-underline-offset: 3px; }
.fil [aria-current] { color: var(--encre-2); }

.fonction-tete-grille {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.fonction-tete-texte .superapp-exemple-famille { margin-bottom: 22px; }
.fonction-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
/* La liste des etapes de la super app, posee en carte : deux classes pour
   passer devant sa regle, ecrite plus bas. */
.superapp-etapes.fonction-apports {
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--filet);
  border-radius: var(--radius-lg);
  background-color: var(--vitrine-blanc);
  box-shadow: var(--ombre-carte);
}
.superapp-etapes.fonction-apports li:first-child { border-top: 0; padding-top: 0; }
.superapp-etapes.fonction-apports li:last-child { padding-bottom: 0; }

/* La liste des fonctions d'une famille : la legende, sur deux colonnes. */
.fonction-liste .legende-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  column-gap: clamp(24px, 4vw, 56px);
  border-top: 1.5px solid var(--encre);
}

.familles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.famille {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  gap: 4px 16px;
  height: 100%;
  padding: 22px;
  border: 1px solid var(--filet);
  border-radius: var(--radius-lg);
  background-color: var(--vitrine-blanc);
  box-shadow: var(--ombre-carte);
  color: var(--encre);
  text-decoration: none;
  transition: border-color .2s var(--ease), translate .2s var(--ease);
}
.famille .superapp-tuile { grid-row: span 3; width: 46px; height: 46px; border-radius: var(--radius); }
.famille .superapp-tuile .icon { width: var(--icon-lg); height: var(--icon-lg); }
.famille-nom { font-family: var(--titre); font-size: 1.1rem; font-weight: 650; letter-spacing: -.01em; }
.famille-titre { color: var(--encre-2); font-size: .95rem; line-height: 1.45; }
.famille-compte {
  margin-top: 8px;
  color: var(--alp);
  font-size: .88rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) {
  .famille:hover { border-color: var(--sa-b); translate: 0 -2px; }
}
.familles-courtes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 12px; }
.familles-courtes .famille { align-items: center; padding: 14px 16px; }
.familles-courtes .superapp-tuile { grid-row: auto; width: 36px; height: 36px; }
.familles-courtes .superapp-tuile .icon { width: var(--icon-md); height: var(--icon-md); }
.familles-courtes .famille-nom { font-size: 1rem; }
.fonctions-tout { margin-top: 24px; }
.fonctions-tout a { color: var(--alp); font-weight: 600; text-underline-offset: 3px; }

.fonctions-appel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--radius-lg);
  background-color: var(--papier-2);
}
.fonctions-appel h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 650; letter-spacing: -.02em; }


@media (max-width: 980px) {
  .fonction-tete-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .famille { transition: none; }
  .famille:hover { translate: none; }
}

/* ------------------------------------------------- Les pages du site public
   Le 19 octobre 2026, le site s'est range en pages (« une vraie structure de
   site »), et ses textes se sont resserres autour de leurs mots cles
   (« marquer plutot les mots cles »). Ce qui suit est commun a ces pages :
   l'en-tete d'une page, ses points, la bande des mots cles, les trois
   raisons de l'accueil, les documents de reference et l'appel final. */

/* Un mot cle dans un chapeau : l'encre et le gras, pas une couleur seule. */
.chapo strong { color: var(--encre); font-weight: 650; }
.est-filmee:not(.est-claire) .chapo strong { color: var(--vitrine-blanc); }

.section-tete-centree { margin-inline: auto; text-align: center; }
.section-tete-centree .chapo { margin-inline: auto; }

.page-tete-grille {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.page-tete-texte .superapp-exemple-famille { margin-bottom: 22px; }
.page-tete-large { max-width: 54rem; }
.page-actions { margin-top: 32px; }
.section-tarifs.page-tete { padding-bottom: var(--entre-sections); }

/* Les points d'une page : un mot cle, puis ce qu'il veut dire. */
.points {
  display: grid;
  margin: 0;
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--filet);
  border-radius: var(--radius-lg);
  background-color: var(--vitrine-blanc);
  box-shadow: var(--ombre-carte);
  list-style: none;
}
.points li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-top: 1px solid var(--filet); }
.points li:first-child { padding-top: 0; border-top: 0; }
.points li:last-child { padding-bottom: 0; }
.points .icon { flex: none; width: var(--icon-lg); height: var(--icon-lg); margin-top: 3px; color: var(--sa-b, var(--alp)); }
.points span { min-width: 0; color: var(--encre-2); font-size: .98rem; line-height: 1.5; }
.points b { display: block; color: var(--encre); font-family: var(--titre); font-size: 1.05rem; font-weight: 650; }

/* La bande des mots cles : ce qu'on doit avoir lu en trois secondes. */
.mots-cles { padding: clamp(28px, 4vw, 48px) var(--marge-page) 0; }
.mots-cles-liste {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1.5px solid var(--encre);
  border-bottom: 1px solid var(--filet);
  list-style: none;
}
.mots-cles-liste li { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 18px 20px; }
.mots-cles-liste li:first-child { padding-left: 0; }
.mots-cles-liste li + li { border-left: 1px solid var(--filet); }
.mots-cles-liste b {
  color: var(--encre);
  font-family: var(--titre);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.mots-cles-liste span { color: var(--encre-3); font-size: .92rem; line-height: 1.4; }
.mots-cles-page { margin-top: clamp(36px, 5vw, 56px); }

/* Les trois raisons de l'accueil : une carte chacune, et toute la carte mene
   a sa page. */
.raisons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.raison {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.8vw, 34px);
  overflow: hidden;
  border: 1px solid var(--filet);
  border-radius: var(--radius-lg);
  background-color: var(--vitrine-blanc);
  box-shadow: var(--ombre-carte);
  transition: border-color .2s var(--ease), translate .2s var(--ease);
}
.raison::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--sa-a), var(--sa-b));
}
.raison h3 { margin: 18px 0; font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 650; line-height: 1.2; letter-spacing: -.02em; }
.raison-mots { display: grid; gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; }
.raison-mots li { display: flex; align-items: center; gap: 10px; color: var(--encre-2); }
.raison-mots .icon { flex: none; width: var(--icon-md); height: var(--icon-md); color: var(--sa-b); }
.raison-mots b { color: var(--encre); font-weight: 650; }
.raison-lien { margin-top: auto; color: var(--alp); font-weight: 600; text-underline-offset: 3px; }
/* Le lien couvre la carte ; l'anneau du clavier passe sur la carte entiere. */
.raison-lien::after { content: ""; position: absolute; inset: 0; }
.raison:focus-within { outline: 2px solid var(--alp); outline-offset: 3px; }
.raison-lien:focus-visible { outline: none; }
@media (hover: hover) {
  .raison:hover { border-color: var(--sa-b); translate: 0 -2px; }
}

/* Les documents de reference, au pied de la page de la securite. */
.securite-documents { padding-bottom: 0; }
.references {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.reference {
  display: flex;
  gap: 14px;
  height: 100%;
  padding: 20px;
  border: 1px solid var(--filet);
  border-radius: var(--radius-lg);
  background-color: var(--vitrine-blanc);
  box-shadow: var(--ombre-carte);
  color: var(--encre-2);
  text-decoration: none;
  transition: border-color .2s var(--ease);
}
.reference .icon { flex: none; width: var(--icon-lg); height: var(--icon-lg); margin-top: 2px; color: var(--alp); }
.reference span { font-size: .95rem; line-height: 1.5; }
.reference b { display: block; margin-bottom: 4px; color: var(--encre); font-family: var(--titre); font-weight: 650; }
@media (hover: hover) {
  .reference:hover { border-color: var(--alp); color: var(--encre-2); }
}

/* L'appel, en fin de chaque page, sur la mer de nuages. */
.appel-dedans { display: flex; flex-direction: column; align-items: center; text-align: center; }
.appel-dedans h2 { max-width: 20ch; font-size: clamp(2rem, 3.6vw, 3.25rem); font-weight: 650; line-height: 1.08; letter-spacing: -.03em; }
.appel-dedans .chapo { margin-inline: auto; }
.appel-dedans .section-actions { justify-content: center; margin-top: 30px; }

/* La demonstration, premiere section de sa page. */
.est-filmee.est-premiere { margin-top: 0; }
.section-demo h1 { color: var(--vitrine-blanc); font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight: 650; line-height: 1.06; letter-spacing: -.035em; }
.demo-reperes { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.demo-reperes li { display: flex; align-items: flex-start; gap: 12px; }
.demo-reperes .icon { flex: none; width: var(--icon-lg); height: var(--icon-lg); margin-top: 3px; color: var(--vitrine-garantie-icone); }
.demo-reperes b { color: var(--vitrine-blanc); font-weight: 650; }
.demo-autres { margin-top: 24px; font-size: .95rem; }
.est-filmee:not(.est-claire) .demo-autres a { color: var(--vitrine-blanc); }

@media (max-width: 980px) {
  .page-tete-grille, .raisons { grid-template-columns: minmax(0, 1fr); }
  .mots-cles-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mots-cles-liste li, .mots-cles-liste li + li { padding: 14px 16px 14px 0; border-left: 0; }
  .mots-cles-liste li:nth-child(n + 3) { border-top: 1px solid var(--filet); }
  .mots-cles-liste li + li:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--filet); }
  .mots-cles-liste li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .raison, .reference { transition: none; }
  .raison:hover { translate: none; }
}

/* --------------------------------------------------- La super app, le mot
   Dans le titre du heros, le mot se lit en capitales, sans decor : les deux
   eclairs qui l'encadraient sont retires depuis le 23 octobre 2026 ([auteur] :
   « retire partout dans le site les eclairs de la super app »). Le mot reste
   du texte, en minuscules dans le code, pour que les lecteurs d'ecran ne
   l'epellent pas. */
.heros-super {
  color: var(--alp);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.02em;
  white-space: nowrap;
}
/* ----------------------------------------------- La super app, l'ecran
   Comme l'ecran d'accueil d'une super app, sur un ordinateur portable : une
   banniere, une recherche, et une grille de mini-apps aux tuiles de couleur,
   ouverte par celle de l'IA en grand. Chaque teinte est un degrade a deux
   tons (`--sa-a`, `--sa-b`), repris par le panneau qu'elle ouvre. */
[data-teinte="ia"]       { --sa-a: #E8414F; --sa-b: var(--alppy); }
[data-teinte="bleu"]     { --sa-a: #3D7BFF; --sa-b: var(--alp); }
[data-teinte="violet"]   { --sa-a: #A07BFF; --sa-b: #6A3FD1; }
[data-teinte="sarcelle"] { --sa-a: #22C9B7; --sa-b: #0B8A80; }
[data-teinte="orange"]   { --sa-a: #FFA53D; --sa-b: #E8611A; }
[data-teinte="rouge"]    { --sa-a: #FF6F6F; --sa-b: #C9333A; }
[data-teinte="indigo"]   { --sa-a: #7584FF; --sa-b: #3B40C4; }
[data-teinte="vert"]     { --sa-a: #3DD68C; --sa-b: #1B8F52; }
[data-teinte="ardoise"]  { --sa-a: #8492A8; --sa-b: #44526A; }
[data-teinte="rose"]     { --sa-a: #FF7EB3; --sa-b: #CC3D78; }
[data-teinte="ambre"]    { --sa-a: #F6B530; --sa-b: #CF7D06; }
[data-teinte="nuit"]     { --sa-a: var(--vitrine-ardoise-nuit); --sa-b: var(--nuit); }
[data-teinte="cyan"]     { --sa-a: #3CC4FF; --sa-b: #0B84CF; }

/* L'ordinateur seul, au milieu : chaque tuile mene a la page de son metier
   (19 octobre 2026), il n'y a plus de panneau a cote. */
.superapp { max-width: 980px; margin-inline: auto; }
/* L'ordinateur est un dessin, pas une surface du produit : son cadre, son
   ecran et son socle suivent les arrondis d'un portable, hors de l'echelle
   des jetons. Generique a dessein : ni pomme ni feux de couleur sur la
   fenetre. Le socle deborde du cadre comme sur un vrai portable ; la marge
   du conteneur lui laisse sa place. */
.superapp-portable { min-width: 0; padding-inline: 5%; }
.superapp-cadre {
  position: relative;
  padding: 16px 14px 14px;
  border-radius: var(--vitrine-rayon-20) var(--vitrine-rayon-20) var(--vitrine-rayon-8) var(--vitrine-rayon-8);
  background: linear-gradient(160deg, var(--vitrine-portable-reflet), var(--nuit) 45%);
  box-shadow: inset 0 0 0 1px rgba(var(--vitrine-blanc-rgb), .08);
}
.superapp-cadre::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 5px;
  height: 5px;
  translate: -50% 0;
  border-radius: 50%;
  background-color: var(--vitrine-ardoise-nuit);
}
.superapp-ecran {
  overflow: hidden;
  padding-bottom: 20px;
  border-radius: var(--vitrine-rayon-6);
  background: linear-gradient(180deg, var(--vitrine-portable-ciel) 0%, var(--vitrine-portable-ciel-2) 34%, var(--vitrine-blanc) 60%);
}
.superapp-socle {
  position: relative;
  height: 14px;
  margin: 0 -5%;
  border-radius: var(--vitrine-rayon-2) var(--vitrine-rayon-2) var(--vitrine-rayon-14) var(--vitrine-rayon-14) / var(--vitrine-rayon-2) var(--vitrine-rayon-2) var(--vitrine-rayon-10) var(--vitrine-rayon-10);
  background: linear-gradient(180deg, var(--vitrine-socle-haut), var(--vitrine-socle-milieu) 55%, var(--vitrine-socle-bas));
  box-shadow: var(--ombre-carte);
}
.superapp-socle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 16%;
  height: 5px;
  translate: -50% 0;
  border-radius: 0 0 var(--vitrine-rayon-8) var(--vitrine-rayon-8);
  background-color: rgba(var(--vitrine-encre-rgb), .12);
}
.superapp-fenetre {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 7px 12px;
  border-bottom: 1px solid var(--filet);
  background-color: rgba(var(--vitrine-blanc-rgb), .75);
}
.superapp-fenetre-points { display: flex; gap: 6px; }
.superapp-fenetre-points i { width: 9px; height: 9px; border-radius: 50%; background-color: var(--filet); }
.superapp-fenetre-adresse {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 14px;
  border-radius: var(--radius-sm);
  background-color: var(--gray-2);
  color: var(--encre-3);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}
.superapp-fenetre-adresse .icon { width: var(--icon-xs); height: var(--icon-xs); }
.superapp-tete {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 16px 18px 0;
}
.superapp-recherche {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--filet);
  border-radius: var(--radius);
  background-color: var(--vitrine-blanc);
  color: var(--encre-3);
  font-size: .85rem;
}
.superapp-recherche span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.superapp-recherche .icon { flex: none; width: var(--icon); height: var(--icon); }
.superapp-banniere {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  overflow: hidden;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 96% 10%, rgba(var(--vitrine-blanc-rgb), .22) 0 18%, transparent 18.5%),
    radial-gradient(circle at 84% 130%, rgba(var(--vitrine-blanc-rgb), .14) 0 34%, transparent 34.5%),
    linear-gradient(120deg, var(--alp) 0%, var(--lac) 70%, var(--vitrine-banniere-lueur) 100%);
  color: var(--vitrine-blanc);
  white-space: nowrap;
}
.superapp-banniere-mot {
  font-family: var(--titre);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.superapp-banniere-suite { margin-left: 2px; font-size: .82rem; opacity: .9; }
.superapp-grille {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 16px 4px;
  margin: 0;
  padding: 18px 18px 0;
  list-style: none;
}
.superapp-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 2px 0 4px;
  border-radius: var(--radius);
  color: var(--encre);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.superapp-tuile {
  display: grid;
  place-items: center;
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--sa-a), var(--sa-b));
  color: var(--vitrine-blanc);
  box-shadow: 0 8px 16px -8px var(--sa-b), inset 0 1px 0 rgba(var(--vitrine-blanc-rgb), .35);
  transition: translate .25s var(--ease), outline-color .2s var(--ease);
  outline: 3px solid transparent;
  outline-offset: 3px;
}
.superapp-tuile .icon { width: var(--icon-xl); height: var(--icon-xl); }
.superapp-nom {
  max-width: 100%;
  overflow: hidden;
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* La tuile de l'IA : deux colonnes sur deux rangees, en tete de grille.
   Fond de neige, pour que la mascotte rouge s'y voie. */
.superapp-case-ia { grid-column: span 2; grid-row: span 2; }
.superapp-app.superapp-app-ia {
  height: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 12px 10px;
  border: 1px solid var(--alppy-light);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--vitrine-blanc), var(--alppy-pale) 60%, var(--alppy-light));
  color: var(--alppy-encre);
  box-shadow: 0 10px 20px -12px var(--alppy);
  outline: 3px solid transparent;
  outline-offset: 3px;
  transition: translate .25s var(--ease), outline-color .2s var(--ease);
}
.superapp-ia-mascotte { width: 46px; }
.superapp-ia-texte { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.superapp-ia-nom { font-family: var(--titre); font-size: 1.1rem; font-weight: 750; line-height: 1.1; color: var(--alppy-dark); }
.superapp-app-ia .superapp-nom { color: var(--alppy-encre); font-weight: 600; }
.superapp-ia-mention {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  color: var(--alppy-dark);
  font-size: .66rem;
  font-weight: 600;
  line-height: 1.25;
}
.superapp-ia-mention .icon { flex: none; width: var(--icon-xs); height: var(--icon-xs); }
@media (hover: hover) {
  .superapp-app:hover .superapp-tuile,
  .superapp-app-ia:hover { translate: 0 -3px; }
  /* Le lien du site bleuit au survol ; une icone garde l'encre de son nom. */
  .superapp-app:hover { color: var(--encre); }
}
/* L'icone ouverte : un anneau de sa couleur et son nom en gras. L'anneau est
   une forme, le gras un second signe : la couleur ne parle pas seule. */
.superapp-app:focus-visible { outline: none; }
.superapp-app:focus-visible .superapp-tuile { outline-color: var(--alp); }
.superapp-app.superapp-app-ia:focus-visible { outline-color: var(--alp); }

.superapp-exemple-famille {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--encre-2);
  font-size: .9rem;
  font-weight: 600;
}
.superapp-exemple-famille .superapp-tuile { width: 34px; height: 34px; border-radius: var(--radius); }
.superapp-exemple-famille .superapp-tuile .icon { width: var(--icon-md); height: var(--icon-md); }
.superapp-etapes { margin: 0; padding: 0; list-style: none; }
.superapp-etapes li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid var(--filet);
  color: var(--encre-2);
  font-size: 1rem;
  line-height: 1.5;
}
.superapp-etapes .icon { flex: none; width: var(--icon-lg); height: var(--icon-lg); margin-top: 2px; color: var(--sa-b); }
.superapp-etapes span { min-width: 0; overflow-wrap: anywhere; }

/* -------------------------------------------------------- L'espace client
   Le texte a gauche ; a droite, l'espace d'un client tel qu'il le voit. */
.espace-points {
  display: grid;
  gap: 16px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.espace-points li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 14px;
  color: var(--encre-2);
  font-size: 1rem;
  line-height: 1.55;
}
.espace-points b { color: var(--encre); font-weight: 650; }
.espace-symbole {
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: var(--radius-sm);
  background-color: var(--glacier);
  color: var(--alp);
}

.ec-maquette { margin: 0; }
.ec-maquette-ecran {
  overflow: hidden;
  border: 1px solid var(--filet);
  border-radius: var(--vitrine-rayon-20);
  background-color: var(--gray-1);
  box-shadow: var(--ombre-carte);
}
.ec-maquette-tete {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background-color: var(--alp);
  color: var(--vitrine-blanc);
}
.ec-maquette-logo {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background-color: var(--vitrine-blanc);
  color: var(--alp);
  font-family: var(--titre);
  font-size: 1.15rem;
  font-weight: 700;
}
.ec-maquette-qui { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ec-maquette-qui b { font-size: var(--fs-md); font-weight: 650; }
.ec-maquette-qui small { opacity: .82; font-size: var(--fs-sm); }
.ec-maquette-cac { margin-left: auto; opacity: .82; font-size: var(--fs-sm); text-align: right; }
.ec-maquette-onglets {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  overflow: hidden;
  border-bottom: 1px solid var(--gray-3);
  background-color: var(--vitrine-blanc);
}
.ec-maquette-onglets span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: var(--gray-5);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
}
.ec-maquette-onglets .icon { width: var(--icon-sm); height: var(--icon-sm); }
.ec-maquette-onglets .est-actif { background-color: var(--cyan-pale); color: var(--alp); font-weight: 600; }
.ec-maquette-onglets i {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background-color: var(--alp);
  color: var(--vitrine-blanc);
  font-size: var(--fs-2xs);
  font-style: normal;
  font-weight: 650;
  line-height: 18px;
  text-align: center;
}
.ec-maquette-corps { display: grid; gap: 14px; padding: 18px 20px 22px; }
.ec-maquette-avance {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--gray-3);
  border-radius: var(--radius);
  background-color: var(--vitrine-blanc);
}
.ec-maquette-avance p { margin: 0; color: var(--gray-6); font-size: var(--fs-sm); }
.ec-maquette-avance b { color: var(--black); font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.ec-maquette-barre { display: flex; gap: 3px; height: 8px; }
.ec-maquette-barre i { border-radius: var(--radius-xs); }
.ec-maquette-barre [data-etat="recu"] { flex: 5; background-color: var(--green); }
.ec-maquette-barre [data-etat="depose"] { flex: 1; background-color: var(--orange); }
.ec-maquette-barre [data-etat="reste"] { flex: 2; background-color: var(--gray-3); }
.ec-maquette-avance .ec-maquette-cle { color: var(--gray-5); font-size: var(--fs-xs); }
.ec-maquette-groupe {
  margin: 4px 0 -6px;
  color: var(--gray-5);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ec-maquette-liste {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--gray-3);
  border-radius: var(--radius);
  background-color: var(--vitrine-blanc);
  list-style: none;
}
.ec-maquette-liste li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  font-size: var(--fs-sm);
}
.ec-maquette-liste li + li { border-top: 1px solid var(--gray-2); }
.ec-maquette-liste li > .icon { flex: none; width: var(--icon-md); height: var(--icon-md); color: var(--gray-4); }
.ec-maquette-liste span { flex: 1; min-width: 0; color: var(--black); font-weight: 500; }
.ec-maquette-liste em {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-size: var(--fs-xs);
  font-style: normal;
  font-weight: 600;
}
.ec-maquette-liste em .icon { width: var(--icon-xs); height: var(--icon-xs); }
.ec-maquette-liste [data-etat="recu"] em { background-color: var(--green-pale); color: var(--green-dark); }
.ec-maquette-liste [data-etat="depose"] em { background-color: var(--orange-pale); color: var(--orange-dark); }
.ec-maquette-liste [data-etat="retard"] em { background-color: var(--red-pale); color: var(--red-dark); }
.ec-maquette-liste [data-etat="reste"] em { background-color: var(--gray-2); color: var(--gray-6); }
.ec-maquette-liste b {
  flex: none;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background-color: var(--alp);
  color: var(--vitrine-blanc);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.ec-maquette-liste [data-etat="retard"] b { background-color: var(--vitrine-blanc); box-shadow: inset 0 0 0 1px var(--alp); color: var(--alp); }
.ec-maquette-libre {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  border: 1.5px dashed var(--gray-4);
  border-radius: var(--radius);
  color: var(--gray-5);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.ec-maquette-libre .icon { flex: none; width: var(--icon-lg); height: var(--icon-lg); color: var(--alp); }
.ec-maquette-legende { margin-top: 12px; color: var(--encre-3); font-size: .85rem; }

@media (max-width: 760px) {
  .superapp { gap: 28px; }
  .superapp-portable { padding-inline: 3%; }
  .superapp-socle { height: 10px; margin-inline: -3%; }
  .superapp-cadre { padding: 10px 8px 8px; border-radius: var(--vitrine-rayon-14) var(--vitrine-rayon-14) var(--vitrine-rayon-6) var(--vitrine-rayon-6); }
  .superapp-cadre::before { top: 3px; width: 4px; height: 4px; }
  .superapp-ecran { padding-bottom: 14px; }
  .superapp-fenetre-points { display: none; }
  .superapp-fenetre { grid-template-columns: 1fr; justify-items: center; padding: 6px 10px; }
  .superapp-tete { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 12px 0; }
  .superapp-banniere { justify-content: center; }
  .superapp-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 2px; padding: 14px 10px 0; }
  .superapp-case-ia { grid-column: 1 / -1; grid-row: auto; }
  .superapp-app.superapp-app-ia { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; }
  .superapp-ia-mascotte { width: 40px; }
  .superapp-ia-mention { flex-basis: 100%; }
  .superapp-tuile { width: 50px; height: 50px; }
  .superapp-nom { font-size: .7rem; }
  .superapp-etapes li { font-size: .95rem; }
  .ec-maquette-cac { display: none; }
  .ec-maquette-corps { padding: 14px; }
  .ec-maquette-liste li { flex-wrap: wrap; row-gap: 6px; }
  .ec-maquette-liste span { flex-basis: calc(100% - 40px); }
  .ec-maquette-liste em { margin-left: 30px; }
  .ec-maquette-liste b { margin-left: auto; }
}

/* ---------------------------------------------------------------- Tarifs
   Trois etapes sur un sentier en pointille, jusqu'au sommet. */
.itineraire { margin: 0; padding: 8px 0 0; list-style: none; }
.etape { position: relative; padding: 0 0 40px 44px; }
.etape:last-child { padding-bottom: 0; }
.etape::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 16px;
  height: 16px;
  border: 2px solid var(--alp);
  border-radius: 50%;
  background-color: var(--papier);
}
.etape:last-child::before {
  top: 2px;
  left: -2px;
  width: 20px;
  height: 18px;
  border: 0;
  border-radius: 0;
  background-color: var(--alp);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.etape:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 6px;
  left: 7px;
  border-left: 2px dashed var(--bistre);
  opacity: .55;
}
.etape-titre {
  margin-bottom: 6px;
  color: var(--encre);
  font-family: var(--titre);
  font-size: 1.28rem;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.015em;
}
.etape p:not(.etape-titre) { max-width: 52ch; color: var(--encre-2); }

/* -------------------------------------------------------------- Questions */
.questions { border-top: 1.5px solid var(--encre); }
.question { border-bottom: 1px solid var(--filet); }
.question summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  color: var(--encre);
  font-family: var(--titre);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
  list-style: none;
  cursor: pointer;
  transition: color .2s var(--ease);
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background-image: linear-gradient(var(--alp), var(--alp)), linear-gradient(var(--alp), var(--alp));
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 2px, 2px 100%;
  transition: background-size .3s var(--ease);
}
.question[open] summary::after { background-size: 100% 2px, 2px 0; }
.question summary:hover { color: var(--alp); }
.question summary:focus-visible { outline-offset: 4px; border-radius: var(--vitrine-rayon-4); }
.question p { max-width: 64ch; padding: 0 40px 22px 0; color: var(--encre-2); }
.question[open] p { animation: question-ouvre .35s var(--ease) both; }
@keyframes question-ouvre { from { opacity: 0; translate: 0 -4px; } }

/* -------------------------------------------------------- Sections filmees
   Quatre haltes filmees rythment la page, et la journee passe avec elles :
   le glacier en plein jour (FEC), le sommet au soir (Livrables), le refuge de
   nuit (Securite), la mer de nuages au matin (Demo). Le film reste en place
   pendant que la section defile dessus ; a l'arrivee, il s'ouvre comme une
   fenetre qui s'agrandit jusqu'aux bords. Un voile garde le texte lisible :
   clair sur le glacier, de nuit sur les trois autres. La video ne joue que
   visible, et jamais en mouvement reduit ; sans elle, son affiche. */
.est-filmee {
  isolation: isolate;
  overflow: clip;
  margin-top: var(--entre-sections);
  padding-block: 0;
  view-timeline: --film block;
}
.film {
  position: sticky;
  top: 0;
  z-index: -1;
  height: 100vh;
  height: 100lvh;
  /* D'un bord a l'autre de la fenetre : `--marge-page` se recalculerait ici
     sur la largeur du contenu, pas sur celle de la page. */
  margin-inline: calc(50% - 50vw);
  margin-bottom: -100vh;
  margin-bottom: -100lvh;
  overflow: hidden;
  background-color: var(--nuit);
}
.film-video {
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: var(--film-x, 50%) 50%;
}
.film::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(0deg, rgba(var(--vitrine-encre-rgb), .88), rgba(var(--vitrine-encre-rgb), 0) 42%),
    linear-gradient(90deg, rgba(var(--vitrine-encre-rgb), .9) 0%, rgba(var(--vitrine-encre-rgb), .7) 45%, rgba(var(--vitrine-encre-rgb), .3) 100%);
  pointer-events: none;
}
.film-dedans {
  position: relative;
  padding-block: clamp(120px, 22vh, 220px) var(--entre-sections);
}
/* Le bouton qui arrete les films, pose par vitrine.js seulement la ou un film
   joue : dans le coin bas droit du film, comme la commande d'un lecteur, et
   pas au milieu du texte. Il ferme la section et colle au bas de la fenetre
   tant qu'elle est a l'ecran : le film, lui, occupe toute la fenetre pendant
   ce temps, donc son coin est le coin de l'ecran. Le rail a une hauteur
   nulle et prend toute la largeur du film, pas celle du texte ; le bouton en
   deborde vers le haut. Petit et presque efface : 24 px, la cible minimale,
   un voile de nuit a peine pose, et il ne s'affirme qu'au survol du film ou
   au focus. Le focus porte deux anneaux, blanc puis encre : l'un des deux
   se detache toujours, quel que soit le film derriere. */
.film-commande {
  position: sticky;
  bottom: calc(var(--espace-md) + env(safe-area-inset-bottom));
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  height: 0;
  margin-inline: calc(50% - 50vw);
  padding-inline: var(--espace-md);
}
.film-pause {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background-color: rgba(var(--vitrine-encre-rgb), .32);
  color: rgba(var(--vitrine-blanc-rgb), .85);
  opacity: .5;
  cursor: pointer;
  transition: opacity .2s var(--ease), background-color .2s var(--ease);
}
.film-pause .icon { --icon: var(--icon-xs); fill: currentColor; stroke: none; }
/* Au doigt, la pastille garde son dessin discret de 24 px mais sa cible
   atteint 44 px (ronde de design du 28 octobre 2026). */
@media (pointer: coarse) {
  .film-pause { position: relative; }
  .film-pause::before { content: ""; position: absolute; inset: -10px; }
}
@media (hover: hover) {
  .est-filmee:hover .film-pause { opacity: .8; }
  .film-pause:hover { opacity: 1; background-color: rgba(var(--vitrine-encre-rgb), .6); }
}
.film-commande .film-pause:focus-visible {
  opacity: 1;
  background-color: rgba(var(--vitrine-encre-rgb), .6);
  outline: 2px solid var(--vitrine-blanc);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--encre);
}
.est-filmee:not(.est-claire) { color: var(--nuit-texte); }
.est-filmee:not(.est-claire) h2 { color: var(--vitrine-blanc); }
.est-filmee:not(.est-claire) :is(.chapo, .livrables-note, .demo-note) { color: var(--nuit-texte); }
.est-filmee:not(.est-claire) :is(.chapo, .livrables-note, .demo-note) a { color: var(--vitrine-blanc); }
.est-filmee:not(.est-claire) :is(.livrables-note, .demo-note) { border-left-color: var(--vitrine-cuivre); }
.est-filmee:not(.est-claire) :focus-visible { outline-color: var(--vitrine-blanc); }
/* Les cartes restent de papier, et prennent la lumiere du film par leurs
   bords. */
.est-filmee :is(.sommaire, .demo-carte) {
  border-color: rgba(var(--vitrine-blanc-rgb), .5);
  box-shadow: 0 40px 100px -30px rgba(var(--vitrine-ombre-nuit-rgb), .6), 0 2px 10px rgba(var(--vitrine-ombre-nuit-rgb), .12);
}

/* Le glacier, de jour : un voile de papier plutot qu'un voile de nuit, et la
   carte du profil en verre depoli. */
.est-claire .film { background-color: var(--glacier); }
.est-claire .film::after {
  background-image:
    linear-gradient(180deg, var(--papier) 0%, rgba(var(--vitrine-papier-rgb), 0) 22%, rgba(var(--vitrine-papier-rgb), 0) 70%, var(--papier) 100%),
    linear-gradient(90deg, rgba(var(--vitrine-papier-rgb), .95) 0%, rgba(var(--vitrine-papier-rgb), .88) 52%, rgba(var(--vitrine-papier-rgb), .3) 100%);
}
.est-claire .profil {
  border-color: rgba(var(--vitrine-blanc-rgb), .8);
  background-color: rgba(var(--vitrine-blanc-rgb), .8);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--ombre-carte);
}

/* Securite, sur le refuge de nuit. */
.section-securite a { color: var(--vitrine-blanc); }
.garanties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 14px;
  margin: 0;
}
.garantie {
  padding: 22px 22px 24px;
  border: 1px solid rgba(var(--vitrine-blanc-rgb), .12);
  border-radius: var(--vitrine-rayon-18);
  background-color: rgba(var(--vitrine-encre-rgb), .56);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}
.garantie dt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--vitrine-blanc);
  font-family: var(--titre);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.garantie dt .icon { width: 20px; height: 20px; color: var(--vitrine-garantie-icone); }
.garantie dd { margin: 0; color: var(--nuit-texte); font-size: .98rem; line-height: 1.6; }
.garantie dd b { color: var(--vitrine-blanc); font-weight: 650; }

/* La fenetre s'ouvre en arrivant, et le film recule d'un pas pour prendre
   toute la place. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .film {
      animation: film-fenetre linear both;
      animation-timeline: --film;
      animation-range: entry 0% entry 55%;
    }
    .film-video {
      animation: film-recul linear both;
      animation-timeline: --film;
      animation-range: entry 0% cover 60%;
    }
  }
}
@keyframes film-fenetre { from { clip-path: inset(7% 4% 0 4% round 36px); } to { clip-path: inset(0 0 0 0 round 0); } }
@keyframes film-recul { from { scale: 1.22; } to { scale: 1; } }

/* ------------------------------------------------------------------- Demo */
.demo-carte {
  padding: clamp(22px, 3.4vw, 44px);
  border: 1px solid var(--filet);
  border-radius: var(--vitrine-rayon-20);
  background-color: var(--vitrine-blanc);
  box-shadow: var(--ombre-carte);
}
.demo-formulaire { display: grid; gap: 18px; }
.champs-rangee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.champ { display: grid; gap: 7px; min-width: 0; }
.champ label { color: var(--encre); font-size: .92rem; font-weight: 600; }
.champ-facultatif { margin-left: 4px; color: var(--encre-3); font-weight: 400; }
.champ :is(input, select, textarea) {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--champ-bord);
  border-radius: var(--vitrine-rayon-10);
  background-color: var(--vitrine-blanc);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.champ :is(input, select, textarea):hover { border-color: var(--encre-3); }
.champ :is(input, select, textarea):focus { outline: none; border-color: var(--alp); box-shadow: 0 0 0 4px rgba(var(--vitrine-alp-rgb), .14); }
/* Le halo seul ne se voit pas (1,26:1 sur blanc) : un contour plein s'y
   ajoute. La carte est blanche dans une section filmee, ou le contour passe
   au blanc : la regle suivante le ramene au bleu pour tout ce qu'elle
   contient, sans quoi le focus y serait blanc sur blanc. */
.champ :is(input, select, textarea):focus-visible { outline: 2px solid var(--alp); outline-offset: 1px; }
.est-filmee .demo-carte :focus-visible { outline-color: var(--alp); }
.champ select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233D4B5E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  cursor: pointer;
}
.champ textarea { min-height: 112px; resize: vertical; }
.champ.est-en-erreur :is(input, select, textarea) { border-color: var(--red-dark); }
.champ.est-en-erreur :is(input, select, textarea):focus { box-shadow: 0 0 0 4px rgba(var(--vitrine-rouge-fonce-rgb), .14); }
.champ-erreur { color: var(--red-dark); font-size: .88rem; line-height: 1.45; }
/* Le champ que seul un robot remplit : hors de l'ecran, pas cache, pour
   qu'un automate le trouve. */
.champ-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.demo-erreur-formulaire {
  padding: 12px 14px;
  border-radius: var(--vitrine-rayon-10);
  background-color: var(--red-pale);
  color: var(--red-dark);
  font-size: .95rem;
  line-height: 1.5;
}
.demo-envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 4px; }
.demo-envoi-note { color: var(--encre-3); font-size: .92rem; }
.demo-rgpd { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--filet); color: var(--encre-3); font-size: .82rem; line-height: 1.5; }
.demo-rgpd a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.demo-merci { display: grid; justify-items: start; gap: 10px; padding-block: 12px; }
.demo-merci:focus { outline: none; }
.demo-merci-rond {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 6px;
  border-radius: 50%;
  background-color: var(--green);
  background-image: var(--avatar-lumiere);
  box-shadow: var(--avatar-relief);
  color: var(--vitrine-blanc);
  animation: merci-pose .5s var(--ease) both;
}
.demo-merci-rond .icon { width: 24px; height: 24px; stroke-width: 2.4; }
.demo-merci-titre { color: var(--encre); font-family: var(--titre); font-size: 1.8rem; font-weight: 650; letter-spacing: -.02em; }
.demo-merci p:last-child { max-width: 44ch; color: var(--encre-2); }
@keyframes merci-pose { from { opacity: 0; scale: .6; } }

/* -------------------------------------------------------- Points de rupture
   Du plus large au plus etroit. Les maquettes et le heros portent les leurs
   dans leur propre partie. */
@media (max-width: 980px) {
  :is(.juridique-grille, .espace-grille, .livrables-grille, .tarifs-grille, .questions-grille, .demo-grille) { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  :is(.juridique-grille, .espace-grille, .livrables-grille, .tarifs-grille, .questions-grille, .demo-grille) > .section-tete { position: static; }
  .nommage-scene, .cabinet-grille { grid-template-columns: minmax(0, 1fr); }
  .feuille { max-width: 560px; }
}
@media (max-width: 760px) {
  .chapo { font-size: 1.08rem; }
  .question p { padding-right: 0; }
}
@media (max-width: 640px) {
  .renommage thead { display: none; }
  .renommage, .renommage tbody, .renommage tr, .renommage td { display: block; width: 100%; }
  .renommage th:first-child, .renommage td:first-child { width: 100%; }
  .renommage tr + tr { border-top: 1px solid var(--gray-3); }
  .renommage td { padding: 14px 16px 0; border-top: 0; }
  .renommage td + td { padding-bottom: 16px; border-left: 0; }
  .renommage td::before { display: block; margin-bottom: 4px; color: var(--gray-5); font-size: var(--fs-2xs); font-weight: 600; }
  .renommage td:first-child::before { content: "Déposée sous"; }
  .renommage td + td::before { content: "Rangée sous"; }
  .feuille-emetteur { max-width: none; margin-top: 64px; }
  .feuille-annotation { margin-left: 18%; }
}
@media (max-width: 560px) {
  .champs-rangee { grid-template-columns: minmax(0, 1fr); }
  .acceptation-risque { flex-direction: column; align-items: flex-start; }
  .droit-libelle { flex-basis: 100%; }
}

/* -------------------------------------------------------------- Telephone
   Debout et etroit, la page ne se contente plus de s'empiler : elle se
   raconte au pouce. La carte tient tout l'ecran et reste en place pendant
   qu'on fait monter le texte dessus ; en la quittant, elle s'approche de la
   Pointe de la Liasse et le soleil tombe vers le couchant (vitrine.js pose
   `--p`, la progression, et vitrine-relief.js deplace la lumiere). Glisser
   le doigt de cote fait tourner le soleil, comme la souris sur grand ecran.
   Plus bas, les titres se composent mot a mot, les maquettes montent a leur
   place au fil du defilement, et les garanties passent sur le refuge de nuit
   reste fixe. Rien de tout cela ne touche la tablette ni l'ordinateur. */
@media (max-width: 760px) and (orientation: portrait) {
  .heros {
    --fx: 10.8;
    --fy: -.1;
    --fw: 4.5;
    --fh: 10;
    display: grid;
    touch-action: pan-y pinch-zoom;
  }
  .heros-carte {
    grid-area: 1 / 1;
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    height: 100lvh;
    min-height: 0;
    max-height: none;
  }
  /* L'approche suit le pouce, pas la sortie de la carte, qui ne sort plus.
     Elle se fait vers la Pointe de la Liasse, qui ne bouge donc pas. */
  .heros-zoom {
    animation: none;
    scale: calc(1 + var(--pz, 0) * .22);
    transform-origin:
      calc(50cqw + (14.4 - var(--fx) - var(--fw) / 2) * var(--s))
      calc(50cqh + (4.4 - var(--fy) - var(--fh) / 2) * var(--s));
  }
  /* L'affiche couvre toute la carte (0 a 16 sur 0 a 10) : on la place en
     kilometres, comme le relief, pour que la fenetre tombe sur les sommets. */
  .heros-zoom picture {
    inset: auto;
    left: calc(50cqw - (var(--fx) + var(--fw) / 2) * var(--s));
    top: calc(50cqh - (var(--fy) + var(--fh) / 2) * var(--s));
    width: calc(16 * var(--s));
    height: calc(10 * var(--s));
  }
  .toponyme-col { display: none; }
  /* Le bas de la carte se fond dans le papier sous le titre, puis se degage
     des qu'on defile, et revient a la toute fin pour passer la main a la
     section suivante sans bord franc. */
  .heros-carte::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, rgba(var(--vitrine-papier-rgb), 0) 46%, rgba(var(--vitrine-papier-rgb), .7) 64%, var(--papier) 84%);
    opacity: max(1 - var(--p, 0) * 3, (var(--p, 0) - .86) * 7);
    pointer-events: none;
  }
  /* --titre-voile et --habillage sont mesures par vitrine.js sur la position
     reelle du titre et du panneau : la rose du nord s'efface devant le titre qui
     monte, et la coordonnee du bas suit le voile. L'opacite du titre ne porte
     pas le nom --titre : c'est deja celui de la police des titres, et le
     nombre pose sur .heros la remplacait chez tous les descendants (le h1
     retombait sur la police de repli en defilant). */
  .carte-nord { top: calc(var(--entete-h) + 6px); }
  .carte-nord { opacity: var(--habillage, 1); }
  .carte-coord-lon { opacity: calc(1 - clamp(0, max(1 - var(--p, 0) * 3, (var(--p, 0) - .86) * 7), 1)); }

  .heros-dedans {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    display: block;
    padding: 0 var(--gouttiere) 18svh;
  }
  .heros-texte {
    display: grid;
    grid-template-rows: calc(100svh - 104px) auto;
    isolation: auto;
  }
  .heros-titraille { align-self: end; }
  .heros h1 {
    font-size: clamp(2.5rem, 11.4vw, 3.6rem);
    text-shadow: 0 0 18px var(--papier), 0 0 36px rgba(var(--vitrine-papier-rgb), .9);
    opacity: var(--titre-voile, 1);
  }
  .heros-suite {
    margin-top: 18px;
    padding: 20px 20px 22px;
    border: 1px solid rgba(var(--vitrine-blanc-rgb), .7);
    border-radius: var(--vitrine-rayon-20);
    background-color: rgba(var(--vitrine-papier-rgb), .8);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: 0 18px 40px -18px rgba(var(--vitrine-encre-rgb), .28);
  }
  .heros .chapo { margin-top: 0; }
  .heros-actions { margin-top: 20px; }
  :is(.heros-actions, .section-actions) .bouton { flex: 1 1 auto; justify-content: center; }

}

@media (max-width: 760px) {
  /* L'en-tete devient une vitre des qu'on quitte le haut de la page. */
  .entete.est-voile {
    background-color: rgba(var(--vitrine-papier-rgb), .78);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 1px 0 rgba(var(--vitrine-filet-rgb), .7);
  }

  /* Les fonctions deviennent des cartes qu'on fait passer au doigt. */
  .legende {
    display: flex;
    gap: 12px;
    margin-inline: calc(-1 * var(--gouttiere));
    padding: 4px var(--gouttiere) 18px;
    overflow-x: auto;
    columns: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gouttiere);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .legende::-webkit-scrollbar { display: none; }
  .legende-groupe {
    flex: 0 0 84%;
    margin-bottom: 0;
    padding: 18px 18px 8px;
    border: 1px solid var(--filet);
    border-radius: var(--vitrine-rayon-18);
    background-color: var(--vitrine-blanc);
    box-shadow: var(--ombre-carte);
    scroll-snap-align: start;
  }
  .legende-groupe .legende-entree:last-child { border-bottom: 0; }

  /* Debout, chaque section filmee s'ouvre sur un ecran de film, son titre
     pose en bas ; le reste defile ensuite sur le film, qui reste en place. */
  .film::after {
    background-image: linear-gradient(180deg, rgba(var(--vitrine-encre-rgb), .55) 0%, rgba(var(--vitrine-encre-rgb), .62) 30%, rgba(var(--vitrine-encre-rgb), .8) 64%, rgba(var(--vitrine-encre-rgb), .92) 100%);
  }
  .est-claire .film::after {
    background-image: linear-gradient(180deg, rgba(var(--vitrine-papier-rgb), .88) 0%, rgba(var(--vitrine-papier-rgb), .72) 32%, rgba(var(--vitrine-papier-rgb), .88) 66%, var(--papier) 100%);
  }
  /* Le texte ne reste pas en bas : il remonte ensuite tout l'ecran sur le
     film, qui ne bouge pas. Le voile tient donc 4,5:1 sur toute la hauteur,
     pas seulement dans la bande de depart (mesure sur les affiches recadrees
     en 375 x 812 : plus aucun pixel sous 4,5:1 pour le chapeau #E3EAF3 et le
     titre blanc de sommet-soir, mer-de-nuages et refuge-nuit ; pour
     l'encre-2 sur glacier-jour, minimum 4,48:1). Les anciennes valeurs,
     .34 au tiers de l'ecran, laissaient un cinquieme de l'image sous le
     seuil. */
  .film-dedans { padding-top: 0; }
  .est-filmee .section-tete {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 86svh;
    margin-bottom: 28px;
  }
  /* Le texte defile sur un film qui, lui, reste en place : il passe tot ou tard
     sur de la neige au soleil. Plus clair, et un halo de nuit qui le suit. */
  .est-filmee:not(.est-claire) .section-tete { text-shadow: 0 1px 3px rgba(var(--vitrine-encre-rgb), .5), 0 2px 18px rgba(var(--vitrine-encre-rgb), .65); }
  .est-filmee:not(.est-claire) .section-tete :is(.chapo, .livrables-note, .demo-note) { color: var(--vitrine-chapo-film); }
  /* Le texte sombre qui remonte sur les crevasses garde un halo de papier. */
  .est-claire .section-tete { text-shadow: 0 0 12px rgba(var(--vitrine-papier-rgb), .95), 0 0 3px rgba(var(--vitrine-papier-rgb), .9); }
}

/* Au fil du defilement, et seulement la ou le navigateur sait l'attacher a
   la page : ailleurs, tout est deja a sa place. */
@supports (animation-timeline: view()) {
  @media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    :is(.maquette, .alppy-scene, .nommage-tableau, .feuille, .controle-convocation, .profil,
        .synthese-cadre, .sommaire-pile, .droits, .acceptation, .questions, .demo-carte, .etape) {
      animation: vitrine-monte linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
    /* Le profil du FEC defile tout seul, au rythme de la page. Sans cette
       attache, il garde son defilement au doigt. */
    .profil-defile { overflow: clip; container-type: inline-size; }
    .profil-svg {
      animation: vitrine-panoramique linear both;
      animation-timeline: view();
      animation-range: contain 0% contain 100%;
    }
    .etape:not(:last-child)::after {
      animation: vitrine-trace linear both;
      animation-timeline: view();
      animation-range: entry 60% exit 20%;
    }
  }
}
@keyframes vitrine-monte { from { opacity: 0; translate: 0 48px; scale: .94; } }
@keyframes vitrine-panoramique { from { translate: 0 0; } to { translate: calc(100cqw - 100%) 0; } }
@keyframes vitrine-trace { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }

/* ------------------------------------------------------ La pile du sommaire
   Deux feuillets depassent sous le sommaire, comme une liasse posee sur le
   bureau. Ils s'eventent en arrivant ; sans mouvement, ils sont deja
   eventes. */
.sommaire-pile { position: relative; isolation: isolate; }
.sommaire-feuillet {
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid rgba(var(--vitrine-filet-rgb), .9);
  border-radius: var(--radius-lg);
  background-color: var(--papier-2);
  box-shadow: 0 24px 60px -30px rgba(var(--vitrine-ombre-nuit-rgb), .55);
}
.sommaire-feuillet:first-child { rotate: -4deg; translate: -18px 12px; }
.sommaire-feuillet:nth-child(2) { rotate: 3deg; translate: 16px 16px; background-color: var(--papier); }
@media (max-width: 760px) {
  .sommaire-feuillet:first-child { rotate: -2.5deg; translate: -8px 10px; }
  .sommaire-feuillet:nth-child(2) { rotate: 2deg; translate: 8px 14px; }
}

/* ------------------------------------------------------- Mise en scene
   Avec script, chaque maquette attend d'etre a l'ecran (`est-en-attente`),
   puis joue son geste : les renommages arrivent ligne a ligne, les constats
   du controle tombent et leur marque eclot, le trace du FEC se dessine de
   gauche a droite, la synthese se remplit en vague, le sommaire s'ecrit, le
   SIREN se tape. vitrine.js
   pose `--i` (le rang), et `--r`, `--c` dans la synthese. */
.renommage td { transition: opacity .6s var(--ease), translate .7s var(--ease), filter .7s var(--ease); transition-delay: calc(var(--i, 0) * 160ms + 150ms); }
.renommage td + td { transition-delay: calc(var(--i, 0) * 160ms + 380ms); }
.nommage-tableau.est-en-attente .renommage td { opacity: 0; translate: -18px 0; }
.nommage-tableau.est-en-attente .renommage td + td { translate: 0 0; filter: blur(6px); }

.arrete-conformite-ligne { transition: opacity .6s var(--ease), translate .7s var(--ease); transition-delay: calc(var(--i, 0) * 260ms + 200ms); }
.arrete-conformite-marque { transition: scale .55s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--i, 0) * 260ms + 520ms); }
.controle-convocation.est-en-attente .arrete-conformite-ligne { opacity: 0; translate: 0 16px; }
.controle-convocation.est-en-attente .arrete-conformite-marque { scale: 0; }

.profil :is(.profil-trace, .profil-remplissage) { transition: clip-path 1.9s cubic-bezier(.45, 0, .2, 1) .2s; }
.profil.est-en-attente :is(.profil-trace, .profil-remplissage) { clip-path: inset(0 100% 0 0); }
.profil-station {
  transition: opacity .5s var(--ease), translate .6s var(--ease);
  transition-delay: calc(var(--i) * 140ms + 320ms);
}

.synthese tbody td { transition: opacity .5s var(--ease), translate .6s var(--ease); transition-delay: calc((var(--c, 0) + var(--r, 0)) * 26ms + 150ms); }
.synthese-cadre.est-en-attente .synthese tbody td { opacity: 0; translate: 0 8px; }

.sommaire-liste li { transition: opacity .55s var(--ease), translate .65s var(--ease); transition-delay: calc(var(--i, 0) * 70ms + 250ms); }
.sommaire-pile.est-en-attente .sommaire-liste li { opacity: 0; translate: 14px 0; }

.acceptation-champ-valeur i { transition: opacity .2s linear, scale .35s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--i, 0) * 90ms + 400ms); }
.acceptation.est-en-attente .acceptation-champ-valeur i { opacity: 0; scale: .2; }


/* ------------------------------------------------------ Entrees en relief
   Sur grand ecran, les maquettes n'arrivent pas a plat : elles se levent
   comme une carte posee qu'on redresse, s'ouvrent comme un volet depuis le
   bord ou elles vivent, et la convocation tombe dans le lecteur. Les
   proprietes separees (`translate`, `rotate`, `scale`) portent le
   defilement ; `transform` reste libre pour la souris. */
@supports (animation-timeline: view()) {
  @media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
    :is(.nommage-scene, .juridique-grille, .film-dedans, .section-synthese, .cabinet-grille, .sommaire-pile) { perspective: 1600px; }
    :is(.profil, .synthese-cadre, .sommaire-pile, .demo-carte) {
      transform-origin: 50% 100%;
      animation: entree-releve linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }
    :is(.nommage-tableau, .droits) {
      transform-origin: 0% 50%;
      animation: entree-gauche linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 85%;
    }
    :is(.controle-convocation, .acceptation) {
      transform-origin: 100% 50%;
      animation: entree-droite linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 85%;
    }
    .feuille {
      transform-origin: 50% 0%;
      animation: entree-feuille linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }
    .feuille-page {
      animation: feuille-pose linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 45%;
    }
    .sommaire-feuillet {
      animation: feuillet-evente linear both;
      animation-timeline: view();
      animation-range: entry 40% cover 50%;
    }
  }
}
@keyframes entree-releve { from { opacity: 0; translate: 0 90px; rotate: x 28deg; scale: .96; } }
@keyframes entree-gauche { from { opacity: 0; translate: -70px 0; rotate: y 18deg; } }
@keyframes entree-droite { from { opacity: 0; translate: 70px 0; rotate: y -18deg; } }
@keyframes entree-feuille { from { opacity: 0; translate: 0 -24px; rotate: x -38deg; } }
@keyframes feuille-pose { from { rotate: -3deg; translate: 0 18px; } }
@keyframes feuillet-evente { from { rotate: 0deg; translate: 0 0; } }

/* ------------------------------------------------------------- Sous la main
   A la souris, les maquettes se penchent vers le curseur, a peine : trois
   degres au plus. vitrine.js pose `--ix` et `--iy` ; au depart du curseur,
   elles reviennent a plat. */
.est-inclinable { transition: transform .7s var(--ease); }
.est-inclinable.est-incline {
  transform: perspective(1200px) rotateX(var(--ix, 0deg)) rotateY(var(--iy, 0deg));
  transition-duration: .15s;
  transition-timing-function: linear;
}

/* ------------------------------------------------------- Mouvement reduit
   Tout reste en place et lisible ; seul le mouvement disparait. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .bouton:hover, .bouton:active { translate: 0 0; scale: 1; }
}

/* ------------------------------------------------------ Le massif du FEC
   Un vrai relief (vitrine-massif.js), qui remplace le film et le profil en
   SVG des qu'il sait se dessiner. La scene reste collee a l'ecran pendant que
   la page defile sous elle : ce defilement fait basculer la camera de la vue
   du ciel a la vue de profil. Le calque des sommets suit la projection de
   chaque cime ; le script y pose `--cote`, 0 vu du ciel, 1 de profil. */
.massif { display: none; }
/* La course du defilement : 320vh depuis le 19 octobre 2026 (480 avant),
   pour une page du controle plus courte. */
.est-en-relief .massif {
  display: block;
  position: relative;
  height: 320vh;
  margin-inline: calc(50% - 50vw);
}
.massif-scene {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background-color: var(--papier);
}
/* Le ciel ne se leve qu'avec la camera : vu d'en haut, le massif est pose
   sur le papier ; de profil, il se detache sur un ciel d'altitude. */
.massif-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, var(--vitrine-ciel-1) 0%, var(--vitrine-ciel-2) 30%, var(--vitrine-ciel-3) 56%, var(--papier) 84%);
  opacity: var(--ciel, 0);
  pointer-events: none;
}
.massif-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, var(--papier) 0%, rgba(var(--vitrine-papier-rgb), 0) 12%),
    linear-gradient(0deg, var(--papier) 0%, rgba(var(--vitrine-papier-rgb), 0) 14%);
  pointer-events: none;
}
.massif-toile {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.massif-toile.est-pret { opacity: 1; }
/* Le film : la meme trajectoire en prise de vue reelle. Il ne se montre
   qu'une fois cale sur la bonne image, et le relief dessine s'efface derriere
   lui. Il couvre la scene comme le ferait une photographie, et le script
   ramene la camera des etiquettes au meme cadre. */
.massif-film {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s var(--ease);
  pointer-events: none;
}
.est-filme.est-filme-pret .massif-film { opacity: 1; }
.est-filme.est-filme-pret .massif-toile { opacity: 0; transition-delay: .6s; }
.massif-sommets {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* Une cime : sa cote au-dessus, son code dessous, un trait jusqu'au sommet.
   Le point d'ancrage est le bas du trait. */
.sommet {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  justify-items: center;
  translate: -50% -100%;
  padding-bottom: 12px;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 0 6px var(--papier), 0 0 2px var(--papier);
  transition: opacity .3s var(--ease);
  will-change: transform;
  /* La plus proche devant : voir placer, dans vitrine-massif.js. */
  z-index: var(--plan, auto);
}
.sommet.est-cache { opacity: 0; }
.sommet::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 50%;
  width: 1px;
  height: 9px;
  background-color: var(--encre);
  opacity: .45;
}
.sommet-points {
  color: var(--encre);
  font-family: var(--titre);
  font-size: calc(13px + 6px * var(--cote, 0));
  font-weight: 650;
  letter-spacing: -.02em;
}
.sommet-code { color: var(--encre-3); font-size: 11.5px; font-weight: 500; }
.sommet-titre {
  position: absolute;
  bottom: 100%;
  left: calc(50% + var(--decale, 0px));
  translate: -50% 4px;
  padding: 5px 11px;
  border: 1px solid rgba(var(--vitrine-alp-rgb), .18);
  border-radius: 999px;
  background-color: rgba(var(--vitrine-blanc-rgb), .92);
  box-shadow: 0 8px 24px -10px rgba(var(--vitrine-encre-rgb), .35);
  color: var(--alp);
  font-size: 12.5px;
  font-weight: 600;
  text-shadow: none;
  opacity: 0;
  transition: opacity .25s var(--ease), translate .35s var(--ease);
}
.sommet.est-actif .sommet-points { color: var(--alp); }
.sommet.est-actif .sommet-code { color: var(--alp); }
.sommet.est-actif::after { background-color: var(--alp); opacity: 1; }
.sommet.est-actif .sommet-titre { opacity: 1; translate: -50% -8px; }
.massif-graduation {
  position: absolute;
  left: 0;
  top: 0;
  translate: 0 -50%;
  color: var(--bistre);
  font-family: var(--titre);
  font-size: 12px;
  font-style: oblique 10deg;
  font-weight: 500;
  text-shadow: 0 0 6px var(--papier);
  opacity: clamp(0, calc(var(--cote, 0) * 6 - 5), 1);
}
/* Sur la photographie, l'encre du papier se perd dans la roche : les cotes
   passent en clair, detachees par une ombre de nuit, et le chapitre actif se
   reconnait a son titre et a son trait plein. Le massif est enneige : un
   lisere serre sous chaque chiffre, sans quoi le petit code palit sur la
   neige au soleil. */
.est-filme-pret .sommet { text-shadow: 0 0 2px rgba(var(--vitrine-encre-rgb), 1), 0 0 5px rgba(var(--vitrine-encre-rgb), .85), 0 0 16px rgba(var(--vitrine-encre-rgb), .6); }
.est-filme-pret .sommet-points { color: var(--vitrine-blanc); }
.est-filme-pret .sommet-code { color: var(--vitrine-blanc); font-weight: 600; }
.est-filme-pret .sommet::after { background-color: var(--vitrine-blanc); opacity: .7; }
.est-filme-pret .sommet.est-actif :is(.sommet-points, .sommet-code) { color: var(--vitrine-blanc); }
.est-filme-pret .sommet.est-actif::after { background-color: var(--vitrine-blanc); opacity: 1; }
.est-filme-pret .massif-graduation { color: var(--vitrine-cuivre); text-shadow: 0 1px 2px rgba(var(--vitrine-encre-rgb), .9); }
.sommet-points, .sommet-code, .massif-graduation { transition: opacity .3s var(--ease); }

/* De profil, le massif se lit d'un coup : le titre redescend dans la scene,
   mot a mot, et chaque cime montre sa tuile au bout d'une tige, son nombre de
   controles et son nom. La tige pousse, puis la tuile se pose, de gauche a
   droite ; le script place chaque tuile (`--tige`, `--tuile-x`) pour qu'elle
   ne couvre ni une autre, ni une cime. Les cotes et les codes de la bascule
   s'effacent devant elles. */
.massif-titre {
  position: absolute;
  z-index: 2;
  top: calc(var(--entete-h) + clamp(22px, 4.5vh, 48px));
  left: 0;
  right: 0;
  padding-inline: var(--gouttiere);
  text-align: center;
  pointer-events: none;
}
.massif-titre-nom {
  color: var(--encre);
  font-family: var(--titre);
  font-size: clamp(1.45rem, 2.7vw, 2.5rem);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.massif-titre-nom .mot {
  display: inline-block;
  opacity: 0;
  translate: 0 -.7em;
  filter: blur(8px);
  transition: opacity .3s var(--ease), translate .3s var(--ease), filter .3s var(--ease);
}
.massif-titre-sous {
  max-width: 62ch;
  margin: 10px auto 0;
  color: var(--encre-2);
  font-size: clamp(.9rem, 1.1vw, 1.05rem);
  line-height: 1.45;
  opacity: 0;
  translate: 0 -10px;
  transition: opacity .3s var(--ease), translate .3s var(--ease);
}
.est-revele .massif-titre-nom .mot {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
  transition-duration: .9s;
  transition-delay: calc(var(--i) * 55ms);
}
.est-revele .massif-titre-sous { opacity: 1; translate: 0 0; transition-duration: .9s; transition-delay: .5s; }
.est-filme-pret .massif-titre-nom { color: var(--vitrine-blanc); text-shadow: 0 2px 22px rgba(var(--vitrine-encre-rgb), .45); }
.est-filme-pret .massif-titre-sous { color: rgba(var(--vitrine-blanc-rgb), .88); text-shadow: 0 1px 12px rgba(var(--vitrine-encre-rgb), .55); }

.massif-scene.est-revele .sommet :is(.sommet-points, .sommet-code, .sommet-titre),
.massif-scene.est-revele .sommet::after,
.est-revele .massif-graduation { opacity: 0; }

.sommet-pointe {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 7px;
  height: 7px;
  translate: -50% 50%;
  border-radius: 50%;
  background-color: var(--alp);
  box-shadow: 0 0 0 3px rgba(var(--vitrine-alp-rgb), .22);
  scale: 0;
  transition: scale .25s var(--ease);
}
.sommet-pointe::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: inherit;
  opacity: 0;
}
.sommet-tige {
  position: absolute;
  bottom: 5px;
  left: 50%;
  width: 1.5px;
  height: var(--tige, 24px);
  translate: -50% 0;
  background-image: linear-gradient(0deg, var(--alp), rgba(var(--vitrine-alp-rgb), .3));
  clip-path: inset(100% 0 0 0);
  transition: clip-path .25s var(--ease);
}
.sommet-tuile {
  position: absolute;
  bottom: calc(var(--tige, 24px) + 5px);
  left: calc(50% + var(--tuile-x, 0px));
  display: grid;
  justify-items: center;
  gap: 1px;
  width: max-content;
  max-width: 120px;
  padding: 6px 10px 7px;
  translate: -50% 10px;
  scale: .9;
  transform-origin: 50% 100%;
  border: 1px solid rgba(var(--vitrine-encre-rgb), .08);
  border-radius: var(--vitrine-rayon-10);
  /* Pas de flou d'arriere-plan : vingt tuiles floutees sur un film qui
     change a chaque image coutaient une passe de flou chacune, a chaque
     image. Un fond presque opaque se lit aussi bien. */
  background-color: rgba(var(--vitrine-blanc-rgb), .92);
  box-shadow: 0 12px 28px -14px rgba(var(--vitrine-encre-rgb), .45);
  line-height: 1.2;
  white-space: normal;
  text-shadow: none;
  opacity: 0;
  transition: opacity .25s var(--ease), translate .25s var(--ease), scale .25s var(--ease), transform .2s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease);
}
.sommet-nombre {
  color: var(--alp);
  font-family: var(--titre);
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.05;
}
.sommet-nom {
  width: max-content;
  max-width: 100px;
  color: var(--encre-2);
  font-size: 11px;
  font-weight: 500;
  text-wrap: balance;
}
.est-revele .sommet-pointe {
  scale: 1;
  transition: scale .5s cubic-bezier(.34, 1.56, .64, 1) calc(var(--rang, 0) * 45ms);
}
.est-revele .sommet-pointe::after { animation: pointe-onde 1.3s var(--ease) calc(var(--rang, 0) * 45ms + 120ms) both; }
@keyframes pointe-onde {
  from { opacity: .55; scale: 1; }
  to { opacity: 0; scale: 3.4; }
}
.est-revele .sommet-tige {
  clip-path: inset(0);
  transition: clip-path .55s cubic-bezier(.65, 0, .35, 1) calc(var(--rang, 0) * 45ms + 80ms);
}
.est-revele .sommet-tuile {
  opacity: 1;
  translate: -50% 0;
  scale: 1;
  transition:
    opacity .5s var(--ease) calc(var(--rang, 0) * 45ms + 380ms),
    translate .7s var(--ease) calc(var(--rang, 0) * 45ms + 380ms),
    scale .7s var(--ease) calc(var(--rang, 0) * 45ms + 380ms),
    transform .2s var(--ease),
    background-color .25s var(--ease),
    border-color .25s var(--ease);
}
/* Sur la photographie, la tuile passe en verre sombre et le texte en clair. */
.est-filme-pret .sommet-pointe { background-color: var(--vitrine-blanc); box-shadow: 0 0 0 3px rgba(var(--vitrine-blanc-rgb), .28), 0 1px 6px rgba(var(--vitrine-encre-rgb), .5); }
.est-filme-pret .sommet-tige { background-image: linear-gradient(0deg, var(--vitrine-blanc), rgba(var(--vitrine-blanc-rgb), .35)); }
.est-filme-pret .sommet-tuile {
  border-color: rgba(var(--vitrine-blanc-rgb), .2);
  background-color: rgba(var(--vitrine-tuile-filmee-rgb), .68);
  box-shadow: 0 14px 30px -14px rgba(var(--vitrine-noir-rgb), .65), inset 0 1px 0 rgba(var(--vitrine-blanc-rgb), .12);
}
.est-filme-pret .sommet-nombre { color: var(--vitrine-blanc); }
.est-filme-pret .sommet-nom { color: rgba(var(--vitrine-blanc-rgb), .92); }
/* Toutes les tuiles se lisent d'un coup, sans la souris : elle ne change ni
   leur couleur ni celle des voisines. Tout au plus la tuile qu'elle touche
   grossit un peu et passe devant. */
@media (hover: hover) and (pointer: fine) {
  .est-revele .sommet-tuile { pointer-events: auto; }
  .est-revele .sommet-tuile:hover { transform: scale(1.08); }
  .est-revele .sommet:has(.sommet-tuile:hover) { z-index: 9999; }
}

/* Le relief tient lieu de film et de profil. La liste des chapitres reste
   pour les lecteurs d'ecran : de profil, les tuiles la disent deja, et un
   tableau sous la montagne ne se lisait pas. */
.est-en-relief :is(.film, .film-commande) { display: none; }
.est-en-relief .section-tete { margin-bottom: clamp(20px, 3vw, 40px); }
.est-en-relief .profil {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 760px) {
  .est-en-relief .massif { height: 400vh; }
  .est-en-relief .film-dedans { padding-top: var(--entre-sections); }
  .est-en-relief .section-tete {
    display: block;
    min-height: 0;
    margin-bottom: 16px;
    text-shadow: none;
  }
  .sommet-titre { font-size: 12px; }
  /* Six tuiles dans trois cent quatre-vingt-dix pixels : une tuile plus
     large, et une tige finit par passer derriere sa voisine. */
  .sommet-tuile { max-width: 100px; padding: 4px 7px 5px; }
  .sommet-nombre { font-size: 16px; }
  .sommet-nom { max-width: 86px; font-size: 10.5px; }
}
/* La photographie, quand le film ne peut pas se jouer (pas encore charge,
   refuse par le navigateur, mouvement reduit, economie de donnees) : la
   derniere image du film, le massif de profil, tiges et titre deployes. Rien
   a parcourir, donc rien a coller : la scene prend sa hauteur d'ecran et la
   page continue. Apres la regle du telephone, qu'elle doit defaire aussi. */
.est-en-photo .massif { height: auto; }
.est-en-photo .massif-scene { position: relative; }
/* A trois cent soixante-quinze pixels (iPhone SE, iPhone mini), la tuile de
   la tresorerie touchait encore le bord droit : huit pixels de moins suffisent. */
@media (max-width: 380px) {
  .sommet-tuile { max-width: 92px; padding: 4px 6px 5px; }
  .sommet-nom { max-width: 80px; font-size: 10px; }
}
/* Un telephone couche n'a que trois cents pixels de ciel : le titre de la
   scene y prenait la place des tuiles, qui passaient dessous et sous l'entete.
   Le titre de la section, juste au-dessus, dit deja la meme chose ; celui de
   la scene s'efface. Le film garde son ciel et rogne son premier plan, ce qui
   descend les cimes, et les tuiles se serrent : vingt y tiennent dans le ciel
   sans deborder du haut de l'ecran. L'entete, lui,
   s'escamote tant que la scene est collee a l'ecran (le script pose
   `est-escamote`) : les tuiles ont tout le ciel. Il revient des qu'on sort de
   la scene, ou qu'on y amene le focus au clavier. Le script lit le cadrage du
   film (object-position) pour poser les cimes au bon endroit. */
@media (max-width: 1079px) and (orientation: landscape) and (max-height: 560px) {
  .entete { transition: background-color .3s var(--ease), box-shadow .3s var(--ease), translate .35s var(--ease); }
  .entete.est-escamote:not(:focus-within) { translate: 0 -100%; }
  .massif-titre { display: none; }
  .massif-film { object-position: 50% 0; }
  .duo-legendes { top: 14px; }
  .duo-legende { font-size: 1.2rem; }
  .sommet-titre { font-size: 12px; }
  .sommet-tuile { max-width: 90px; padding: 2px 6px 3px; border-radius: var(--vitrine-rayon-7); line-height: 1.12; }
  .sommet-nombre { font-size: 13px; }
  .sommet-nom { max-width: 80px; font-size: 9.5px; }
}
/* Au format du film (seize neuviemes, iPhone SE ou 8), le film couvre
   l'ecran sans rien rogner : les cimes restent a mi-hauteur, et vingt tuiles
   ne tiennent plus au-dessus. Le film descend donc sous une bande de ciel, qui
   se fond dans son haut ; le premier plan sort par le bas. Le script lit la
   boite du film pour poser les cimes. */
@media (max-width: 1079px) and (orientation: landscape) and (max-height: 560px) and (max-aspect-ratio: 2/1) {
  .massif-film {
    top: 24%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, var(--vitrine-noir) 72px);
    mask-image: linear-gradient(180deg, transparent 0, var(--vitrine-noir) 72px);
  }
}

/* --------------------------------------------------- Le ton de l'en-tete
   L'en-tete prend le ton de ce qu'il recouvre (vitrine.js pose `data-ton`
   d'apres la zone qui passe sous lui), a la maniere de la barre du site
   d'Audit France. En fin de feuille, pour passer devant la vitre du
   telephone et le bouton de connexion des petits ecrans, qui ont la meme
   force.
   - transparent : sur le massif, dont le haut se fond deja dans le papier ;
     le texte reste d'encre, comme sur la carte du heros.
   - nuit : sur les sections filmees de nuit ; fond de nuit, texte clair,
     logo de nuit (« board » en blanc, le A et le « lp » dans leurs bleus). */
.entete[data-ton="transparent"] {
  background-color: rgba(var(--vitrine-papier-rgb), 0);
  box-shadow: 0 1px 0 rgba(var(--vitrine-filet-rgb), 0);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.entete[data-ton="nuit"] {
  background-color: rgba(var(--vitrine-encre-rgb), .9);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(var(--vitrine-blanc-rgb), .08);
}
.entete[data-ton="nuit"] :is(.entete-nav a, .entete-connexion) { color: var(--nuit-texte); }
.entete[data-ton="nuit"] :is(.entete-nav a, .entete-connexion):hover { color: var(--vitrine-blanc); background-color: rgba(var(--vitrine-blanc-rgb), .08); }
.entete[data-ton="nuit"] .entete-menu summary { color: var(--vitrine-blanc); }
.entete[data-ton="nuit"] :is(.entete-menu summary:hover, .entete-menu[open] summary) { background-color: rgba(var(--vitrine-blanc-rgb), .1); }
.entete[data-ton="nuit"] .entete-logo-nuit { opacity: 1; }
.entete[data-ton="nuit"] .entete-logo img:not(.entete-logo-nuit) { opacity: 0; }
.entete[data-ton="nuit"] :is(.entete-logo, .entete-nav a, .entete-connexion, .entete-menu summary):focus-visible { outline-color: var(--vitrine-blanc); }
/* Sous 560 pixels, la connexion est un bouton blanc : il le reste la nuit,
   sans le trait d'encre qui s'y perdrait. */
@media (max-width: 560px) {
  .entete[data-ton="nuit"] .entete-actions .entete-connexion { background-color: var(--vitrine-blanc); color: var(--encre); box-shadow: none; }
  @media (hover: hover) {
    .entete[data-ton="nuit"] .entete-actions .entete-connexion:hover { background-color: var(--glacier); color: var(--encre); }
  }
}

/* ------------------------------------------- Au telephone, la mesure juste
   23 octobre 2026, [auteur] : « le site est encore mal dimensionne sur pas mal
   d'espace en mode telephone ». La tournee ecran par ecran, a 320, 360 et
   390 px, a releve ce qui suit, corrige ici en un seul bloc, en fin de
   feuille pour passer devant les regles de chaque section :
   - le heros tenait tout l'ecran, titre cale en bas : le chapeau et les
     boutons n'arrivaient qu'au defilement, suivis d'un blanc de 18svh ;
   - chaque section filmee s'ouvrait sur 86svh de film vide (les rapports,
     les garanties, la demonstration) ;
   - les boutons d'une tete de page, de largeurs inegales, calees a gauche ;
   - l'index des fonctions et « les autres metiers », dix cartes pleines
     empilees ;
   - la liste du portefeuille, ou les montants, l'equipe et la cloture
     tombaient en vrac sous la ligne ;
   - un pied de trois listes l'une sous l'autre, et a 320 px un bouton de
     menu hors de l'ecran : ces deux-la sont dans vitrine-cadre.css, que les
     pages de reference chargent aussi. */
@media (max-width: 760px) and (orientation: portrait) {
  /* Le titre, le chapeau et les boutons dans le premier ecran ; la carte
     prend la hauteur du texte, et plus celle de l'ecran. */
  .heros-texte { grid-template-rows: minmax(0, 42svh) auto; }
  /* Le toponyme de la Pointe de la Liasse tombe sous le titre depuis que
     celui-ci remonte (releve le 3 novembre 2026) : les deux se melaient. */
  .toponyme-repere { display: none; }
  .heros-dedans { padding-bottom: 28px; }
  .heros-carte { height: auto; align-self: stretch; }
}
@media (max-width: 760px) {
  /* Le bouton sous la super app sortait de l'ecran a 320 px, et la recherche
     de la maquette du portefeuille, sous 16 px, ferait zoomer iOS au toucher. */
  .superapp-tout .bouton { max-width: 100%; white-space: normal; }
  .toolbar-search input { font-size: 16px; }

  /* Une bande de film, plus un ecran entier, au-dessus du titre. */
  .est-filmee .section-tete { min-height: 44svh; }
  .est-filmee.est-premiere .section-tete { min-height: 0; padding-top: calc(var(--entete-h) + 36px); }
  .est-filmee.est-premiere .film-dedans { padding-bottom: 56px; }

  /* Les boutons d'une tete de page, l'un sous l'autre, de toute la largeur. */
  :is(.fonction-actions, .page-actions) .bouton { flex: 1 1 100%; }

  /* Les metiers en tuiles, deux par rangee : la tuile, le nom, le compte. */
  .familles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .famille { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 14px; }
  .famille .superapp-tuile { grid-row: auto; width: 36px; height: 36px; }
  .famille-titre { display: none; }
  .famille-compte { margin-top: 0; }
  .familles-courtes .famille { grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 10px 12px; }
  .familles-courtes .superapp-tuile { width: 30px; height: 30px; }
  .familles-courtes .famille-nom { font-size: .92rem; }

  /* Le portefeuille : le nom, puis l'echeance, l'etat et le signataire.
     Les montants, l'equipe et la cloture restent au bureau. */
  :is(.dossier-honoraires-slot, .dossier-collaborateurs-slot, .dossier-exercice-slot) { display: none; }
}