/*
  style.css — le design system ALMVMY.

  Ecrit a partir de la charte graphique v1.1 du 12 aout 2026.
  Chaque decision de ce fichier vient d'une regle de la charte, et les
  commentaires disent laquelle. Si la charte change, ce fichier change.

  Il est organise en trois etages :
    1. LES JETONS   les valeurs brutes, dans :root. Une seule source.
    2. LE SOCLE     le corps de page, le rythme, la typographie.
    3. LES PIECES   les composants reutilises par les six pages.

  Regle de travail : on ne tape jamais une couleur, une taille ou un espace
  en dur dans une piece. On prend un jeton. C'est ce qui fait qu'une page
  ajoutee dans six mois ressemblera aux autres sans effort.
*/

/* ==========================================================================
   1. LES JETONS
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------------
     SYSTEME REVOLUT, adopte par Almamy le 14 septembre 2026.
     Il remplace Auros, qui remplacait la charte ALMVMY v1.1.

     Le basculement le plus lourd depuis le debut : le site passe du SOMBRE au
     CLAIR. Toutes les hypotheses de contraste s'inversent, et trois procedes
     du systeme precedent disparaissent avec lui :
       - le verre et son flou. Sans fond sombre derriere, il n'a plus d'objet.
         La separation se fait desormais par un filet et par un changement de
         surface, jamais par une ombre : c'est la regle du systeme.
       - les orbes et la nappe animee. La couleur vient d'ailleurs maintenant.
       - le vert, entierement. La palette est sept neutres et un degrade bleu.

     La couleur, dans ce systeme, ne vient PAS de l'interface : elle vient de
     la photographie en pleine largeur. Tant qu'Almamy n'a pas fourni ses
     images, le site est volontairement achromatique. C'est l'etat normal du
     systeme, pas un manque.
     ------------------------------------------------------------------------ */

  /* --- Les neutres, en mode nuit ----------------------------------------
     Almamy a demande le systeme Revolut en sombre le 14 septembre 2026.
     Ce n'est pas une entorse : Revolut possede deja sa surface INVERSEE,
     #1f1f1f, pour sa navigation, son pied de page et son bloc tarifs. On
     l'etend au site entier, et le reste du systeme ne bouge pas.

     LES DEUX POLES SONT ECHANGES, et c'est ce qui permet de ne rien renommer
     ailleurs : --encre designe toujours "ce qui porte le texte" et --os
     toujours "ce sur quoi il se pose". En clair, l'encre etait sombre ; en
     nuit, elle est claire. Toutes les pieces suivent sans etre touchees, y
     compris le bouton plein qui devient clair a texte sombre.

     Chaque valeur est mesuree, jamais choisie a l'oeil :
       texte principal  17,2 sur la toile
       texte secondaire 11,3
       texte tertiaire   7,3
       filet             1,49 : il se voit sans crier. */
  /* LE NOIR EST ABSOLU. C'est le seul point sur lequel les deux references
     d'Almamy sont d'accord sans nuance : BLACKBOX et Pioneer sont sur du
     #000000, pas sur un gris tres sombre. Ses propres photos de cape aussi,
     prises au projecteur dans un vide noir. Un fond a #121214 derriere ces
     images-la dessine un rectangle, et c'est exactement ce qu'il reprochait
     a la version precedente.

     La contrepartie est reelle et elle est payee plus bas : sur du noir pur,
     une bulle a 5,5 % de blanc disparait. Les surfaces montent donc a 13 %. */
  --encre:    #ffffff;  /* le texte principal, et le bouton plein */
  --os:       #000000;  /* LA TOILE. Ce sur quoi tout se pose. */
  --noir:     #000000;
  --creux:    #000000;  /* plus rien n'est "enfonce" : le fond est deja au fond */
  --carte:    #141416;  /* la surface soulevee, sur du noir */
  --cendre:   #b9b9bf;  /* le texte secondaire */
  /* Remonte de #a1a1a8 a #c2c2ca le 14 septembre 2026, en meme temps que
     l'eclaircissement des ambiances. Le calcul est direct : au point ou deux
     lueurs se superposent, #a1a1a8 tombait a 3,6 de contraste. C'est le
     texte tertiaire qui paie l'ambiance, pas l'inverse. */
  --ardoise:  #b9b9bf;
  --graphite: #b9b9bf;
  --sourd:    #6e6e74;  /* les etats inactifs. Jamais du texte. */
  --brume:    #141416;

  /* LE FILET. Il remplace l'ombre partout : le systeme interdit l'elevation,
     la separation se fait par un trait et par un changement de surface. */
  --trait: #26262b;

  /* --- La bulle ------------------------------------------------------------
     Un film clair tres fin pose sur la toile, et un flou qui reprend
     l'ambiance derriere. C'est ce qui donne la matiere de l'application de
     reference : la bulle n'a pas de couleur propre, elle prend celle du
     fond a travers elle.
     Le film est a 5,5 % : au dela, la bulle se detache trop et redevient une
     carte posee ; en deca, elle disparait sur le noir. */
  /* Releve sur la version precedente : a 5,5 % sur du noir pur, une carte
     tombait a 1,09 de contraste avec la page et disparaissait. A 13 % elle
     remonte a 1,30, et son filet a 1,44. */
  --bulle:      rgba(255, 255, 255, .055);
  --bulle-bord: rgba(255, 255, 255, .075);
  --bulle-flou: blur(22px) saturate(125%);

  /* Le seul element chromatique, reserve au bandeau d'offre en haut de page.
     Jamais sur un bouton, une carte ou un fond de section : il perd son sens
     des qu'il apparait deux fois.
     A savoir : du blanc sur son extremite CLAIRE tombe a 2,58 de contraste.
     Le texte doit se tenir du cote fonce. */
  --cobalt: linear-gradient(to right, rgb(18, 39, 253), rgb(111, 160, 255));

  /* --- Les noms des systemes precedents, rebranches ----------------------
     Les sept pages et leurs quatre-vingt-dix classes s'appuient sur ces
     noms. Troisieme systeme, meme methode : on rebranche ici plutot que de
     renommer partout. C'est tout l'interet d'une couche de jetons. */
  --fond:   var(--os);
  --bloc:   var(--carte);
  --filet:  var(--trait);
  --texte:  var(--encre);
  --gris:   var(--cendre);
  --or:     var(--encre);

  /* --- Les deux couleurs fonctionnelles de l'espace barber ----------------
     Le systeme dit de ne pas signaler un etat par la couleur sur une surface
     neutre. C'est juste pour une page publique ; un tableau de bord prive ou
     Almamy lit des chiffres pour decider est un autre metier. Les deux
     valeurs sont eclaircies pour tenir sur fond sombre. */
  --alerte:    #FF8A7A;
  --attention: #E8B25C;

  /* --- Les series de donnees ---------------------------------------------
     Pas de couleur : deux neutres tres eloignes en clarte. L'ecart de clarte
     les distingue pour tous les daltonismes, mieux que deux teintes. */
  --serie-domicile:     #f5f5f6;
  --serie-evenementiel: #77777e;
  --courbe-couleur:     #f5f5f6;

  /* --- Le vide ------------------------------------------------------------
     Base 8, densite compacte. Le systeme est plus serre qu'Auros : il
     compense par des sections tres espacees. */
  --v1:  4px;
  --v2:  8px;
  --v3:  12px;
  --v4:  16px;
  --v5:  24px;
  --v6:  32px;
  --v7:  40px;
  --v8:  clamp(56px, 10vw, 80px);   /* entre deux sections */
  --v9:  clamp(64px, 14vw, 120px);

  /* --- Typographie --------------------------------------------------------
     Aeonik Pro n'est pas distribuable ; le systeme donne lui-meme ses
     remplacantes, Inter, DM Sans ou Manrope. Manrope porte l'affichage,
     Inter porte l'interface : c'est la repartition du systeme, une police
     au dessus de 18 px, l'autre a 16 px et en dessous. Elles ne se croisent
     jamais a la meme taille.

     La graisse d'affichage ne depasse JAMAIS 500. L'autorite vient de la
     taille et du resserrement, pas du gras : c'est la signature du systeme. */
  /*
    DEUX POLICES, DEUX ROLES, ET ILS NE SE CROISENT JAMAIS DANS UNE LIGNE.

    LA MARQUE est une IMAGE, et c'est le vrai fichier d'Almamy : le meme
    trace que celui grave sur ses deux capes, symbole depose compris. Je
    l'avais recompose en Prata puis retire le symbole sur sa consigne ; la
    photo de son materiel a tranche. Une marque ne se redessine pas.

    LA VOIX est en Anton : capitales condensees tres noires, choisies sur
    planche en comparant directement a sa capture de BLACKBOX. Elle ne sert
    qu'aux titres de section. Une seule graisse suffit : un condense ne
    porte que des titres.

    Cette separation est ce qui empeche un site d'avoir l'air de deux sites.
    C'est aussi ce que fait BLACKBOX : un logo a empattements, des titres en
    condensee grasse, jamais l'un dans la phrase de l'autre.
  */
  --voix: 'Anton', 'Arial Narrow', sans-serif;
  --logo-forme: 1088 / 172;   /* le rapport du fichier assets/logo.png */

  --affiche: 'Manrope', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --inter:   'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --titre: var(--affiche);
  --corps: var(--inter);
  --enseigne: var(--affiche);

  --regulier: 400;
  --moyen:    500;
  --demi:     600;

  /* L'echelle. Le resserrement augmente avec la taille : -0,024em a 88 px,
     -0,010em a 24 px, et il s'OUVRE a +0,015em pour les capitales de 12 px.
     C'est la seule approche positive du systeme. */
  --t-display:    clamp(44px, 12vw, 88px);
  --t-affiche:    clamp(34px, 8vw, 52px);
  --t-heading:    clamp(28px, 6vw, 40px);
  --t-h2:         clamp(24px, 5vw, 32px);
  --t-h3:         24px;
  --t-nombre:     clamp(32px, 8vw, 52px);
  --t-corps:      16px;
  --t-petit:      14px;
  --t-mention:    12px;
  --t-caption:    12px;

  --serre-display: -.024em;
  --serre-titre:   -.010em;
  --interlettre:   .015em;   /* les capitales de 12 px, et elles seules */
  --interlettre-fine: .015em;

  /* --- Formes -------------------------------------------------------------
     La pilule est la signature : TOUT bouton, toute etiquette, tout champ.
     Un coin carre ou legerement arrondi sur une action est hors systeme. */
  --rayon:        22.5px;  /* les cartes */
  --rayon-liste:  20px;    /* les groupes enfonces */
  --rayon-petit:  12px;    /* les petites commandes */
  --pilule:       9999px;  /* les boutons, les etiquettes, les champs */

  --largeur:      760px;

  /* --- LE HALO ------------------------------------------------------------
     Le code le plus fort des deux references, et celui qui manquait : un
     seul projecteur dans le noir. Le texte ne se pose pas sur le fond, il
     l'eclaire. Deux couches, une serree et une tres large, comme une lampe
     reelle : le coeur brille, la piece s'eclaire un peu. */
  --halo:      0 0 26px rgba(255, 255, 255, .30), 0 0 84px rgba(255, 255, 255, .15);
  --halo-fort: 0 0 30px rgba(255, 255, 255, .42), 0 0 110px rgba(255, 255, 255, .22);

  /* --- Mouvement ---------------------------------------------------------- */
  --duree-court: 120ms;
  --duree:       200ms;
  --courbe:      cubic-bezier(.2, .7, .3, 1);
}

/* ==========================================================================
   2. LE SOCLE
   ========================================================================== */

* { box-sizing: border-box; }

/*
  Le corps de texte est en ARGENT, pas en blanc. C'est une regle explicite
  d'Auros : le blanc pur appartient aux titres et a la navigation, et il
  perd sa valeur des qu'on le met partout. Les titres le reprennent plus bas.
*/
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--corps);
  font-size: var(--t-corps);
  font-weight: var(--regulier);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

/*
  L'AMBIANCE : une lueur froide, differente par page.

  Elle donne a chaque endroit du site sa couleur propre sans jamais sortir du
  noir : la teinte se fond dedans au lieu de s'y poser. Bleu sur l'accueil,
  indigo sur l'entreprise, violet sur les formations, vert sur l'espace
  client. L'espace barber n'en a pas : c'est un outil de travail, pas une
  ambiance.

  L'OPACITE EST PLAFONNEE A 0,58, et ce n'est pas un reglage a l'oeil.
  Mesure faite au point le plus dense de la lueur, avec la bulle translucide
  par dessus : a 0,72 le bleu tombe a 4,36 et le vert a 4,40 pour le texte
  tertiaire, sous le minimum de 4,5. A 0,58 le plus faible des quatre tient
  4,7. Ne pas monter sans refaire la mesure.
*/
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--ambiance, none);
}

body::after { content: none; }

/* ==========================================================================
   2 bis. LA FONDATION

   Ce bloc a ete perdu lors du passage au systeme Revolut : la reecriture a
   remplace la couche des jetons et des pieces, mais pas celle des elements
   de base ni des classes utilitaires. Resultat, trente et une classes
   utilisees dans les pages n'avaient plus aucune regle, dont .discret
   (210 emplois), .label (75) et .enveloppe (7).

   C'est .enveloppe qui manquait le plus : c'est elle qui tient la gouttiere
   de la page. Sans elle, le texte allait d'un bord a l'autre de l'ecran et
   les derniers mots de chaque ligne se perdaient dans la courbure de la
   dalle. Les titres, eux, retombaient sur les valeurs par defaut du
   navigateur, c'est-a-dire en gras : exactement ce que le systeme interdit.
   ========================================================================== */

/* --- Les elements de base ----------------------------------------------- */

h1, h2, h3, h4, .titre {
  margin: 0;
  font-family: var(--affiche);
  /*
    Jamais au dessus de 500. L'autorite vient de la taille et du
    resserrement, pas de la graisse : c'est la signature du systeme, et
    c'est precisement ce que le defaut du navigateur (700) cassait.
  */
  font-weight: var(--moyen);
  line-height: 1.12;
  letter-spacing: var(--serre-titre);
  color: var(--encre);
}

h1 { font-size: var(--t-heading); letter-spacing: var(--serre-display); }
h2 { font-size: var(--t-h2); }
h3, .titre { font-size: var(--t-h3); }
h4 { font-size: var(--t-corps); line-height: 1.3; }

p { margin: 0; }
ul, ol { margin: 0; padding-left: 1.15em; }
li { margin-bottom: var(--v2); }
li:last-child { margin-bottom: 0; }

/* Le lien garde la couleur de son texte : dans une page ou tout est neutre,
   un lien colore serait le seul accident de couleur. Il se signale par son
   soulignement, que le survol rapproche. */
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--sourd);
  text-underline-offset: .18em;
}
a:hover { text-decoration-color: currentColor; }

img, svg, video { max-width: 100%; }

/* --- L'ENVELOPPE : la gouttiere de toutes les pages --------------------- */

/*
  Une seule largeur pour les sept pages, et une seule gouttiere.

  La gouttiere passe par max() et env() : sur un telephone a bords incurves,
  tenu en paysage, l'encoche mord sur le cote et 24 px ne suffisent plus.
  env(safe-area-inset-*) vaut zero partout ailleurs, donc la regle ne coute
  rien sur les ecrans droits.

  L'ecart entre deux sections est v8. C'est volontairement large : le systeme
  est serre A L'INTERIEUR d'une carte et tres aere ENTRE deux groupes. C'est
  ce contraste qui fait lire la page par blocs plutot qu'en continu.
*/
.enveloppe {
  display: flex;
  flex-direction: column;
  gap: var(--v8);
  max-width: var(--largeur);
  margin: 0 auto;
  padding-block: var(--v5) var(--v9);
  padding-inline:
    max(var(--v5), env(safe-area-inset-left))
    max(var(--v5), env(safe-area-inset-right));
}

/* --- Les classes de texte ----------------------------------------------- */

/*
  .discret : tout ce qui accompagne sans porter. Sous-titres, precisions,
  mentions. C'est la classe la plus employee du site, et celle dont l'absence
  se voyait le moins : sans regle, ce texte s'affichait a la taille et a la
  couleur du texte principal, donc tout avait le meme poids et plus rien ne
  hierarchisait la page.
*/
.discret {
  font-size: var(--t-petit);
  line-height: 1.55;
  color: var(--cendre);
}

/*
  .label : l'intitule qui annonce un groupe. Capitales, petit, espace.
  C'est la seule approche POSITIVE du systeme : a 12 px, des capitales
  serrees se collent, il leur faut de l'air pour rester lisibles.
*/
.label {
  font-size: var(--t-mention);
  font-weight: var(--demi);
  letter-spacing: var(--interlettre);
  text-transform: uppercase;
  color: var(--ardoise);
}

/*
  .chiffre : les chiffres alignes en colonne. Sans cette regle, un « 8 » et
  un « 1 » n'ont pas la meme largeur et une colonne de prix ondule.
*/
.chiffre { font-variant-numeric: tabular-nums; }

/* .nom : l'intitule d'une entree dans une liste. Il porte la ligne, le reste
   de la ligne est en .discret. */
.nom {
  font-family: var(--affiche);
  font-weight: var(--moyen);
  font-size: var(--t-corps);
  letter-spacing: var(--serre-titre);
  color: var(--encre);
}

/* --- Les trois portes de l'accueil, numerotees --------------------------- */

.tete-numerotee { display: flex; align-items: baseline; gap: var(--v3); }

/*
  Le numero ne crie pas : il est petit, pale et tabulaire. Il sert a dire
  « il y en a trois, dans cet ordre », pas a etre lu comme un titre.
*/
.numero {
  flex: none;
  font-family: var(--affiche);
  font-size: var(--t-mention);
  font-weight: var(--demi);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--interlettre);
  color: var(--sourd);
}

/* Le petit selecteur pose dans une ligne de texte, sur la page des devis. */
.lien-option {
  padding: 6px 10px;
  border-radius: var(--rayon-petit);
  border: 1px solid var(--filet);
  background: var(--brume);
  color: var(--encre);
  font-family: var(--corps);
  font-size: var(--t-petit);
}


/*
  L'AMBIANCE DE CHAQUE PAGE : deux lueurs, une basse et une haute.

  Deux plutot qu'une, parce qu'une seule donne une teinte plate au lieu d'une
  lumiere. Elles ne portent que la couleur ; la forme, elle, est commune a
  toutes les pages et vit dans la regle qui suit.

  Les opacites ne se choisissent pas a l'oeil. Chacune est mesuree sur la
  page composee, bulle translucide comprise, contre le texte le plus pale du
  site : voir le releve juste apres la regle commune. Ne pas les monter sans
  refaire cette mesure.
*/
body[data-ambiance="bleu"] {
  --lueur-basse: rgba(44, 90, 168, .56);
  --lueur-haute: rgba(59, 54, 144, .34);
}
body[data-ambiance="indigo"] {
  --lueur-basse: rgba(59, 54, 144, .58);
  --lueur-haute: rgba(44, 90, 168, .32);
}
body[data-ambiance="violet"] {
  --lueur-basse: rgba(86, 48, 155, .60);
  --lueur-haute: rgba(44, 90, 168, .34);
}
body[data-ambiance="vert"] {
  --lueur-basse: rgba(30, 107, 94, .52);
  --lueur-haute: rgba(44, 90, 168, .30);
}
/* Le dossier, la plus chaleureuse des cinq : c'est la page du client. */
body[data-ambiance="dossier"] {
  --lueur-basse: rgba(59, 54, 144, .62);
  --lueur-haute: rgba(86, 48, 155, .38);
}

/*
  La forme est la meme partout, seules les deux couleurs changent : une page
  qui change d'ambiance ne doit pas changer de composition, sinon on ne lit
  plus un meme site sous une autre lumiere, on lit un autre site.

  La lueur HAUTE est ce qui manquait. Sans elle, le tiers superieur de chaque
  page restait noir pur alors que la couleur etait annoncee : on ne voyait
  l'ambiance qu'en arrivant en bas. Elle est nettement plus faible que la
  basse, parce que c'est la que se trouvent l'en-tete et les onglets.
*/
body[data-ambiance] {
  --ambiance:
    radial-gradient(96% 52% at 88% -6%, var(--lueur-haute) 0%, transparent 64%),
    radial-gradient(118% 68% at 20% 110%, var(--lueur-basse) 0%, transparent 64%);
}

/*
  LE RELEVE. Contraste du texte tertiaire (#c2c2ca) pose sur une bulle,
  elle-meme posee sur les DEUX lueurs a plein regime. C'est un pire cas
  volontairement pessimiste : dans la page, l'une est en haut a droite et
  l'autre en bas a gauche, elles ne se superposent jamais a ce point.

    dossier 5,62   indigo 5,31   bleu 5,23   violet 5,12   vert 4,76

  Le plancher est 4,5. C'est le vert qui limite tout le reste, parce que le
  teal est deja la plus claire des cinq couleurs : monter les opacites de
  seulement 0,06 le fait tomber a 4,42, donc sous la barre. Le texte courant,
  lui, tient entre 7,7 et 9,1 partout.
*/

/*
  L'ECLAIRCISSEMENT A L'ENTREE DU DOSSIER.
  La lueur monte d'un quart a plein en six dixiemes de seconde : la page
  s'allume au lieu d'apparaitre. C'est un accueil, pas une transition.
  Elle ne joue qu'une fois, a l'arrivee sur l'onglet.
*/
body[data-ambiance="dossier"]::before {
  animation: allumer 620ms var(--courbe);
}

@keyframes allumer {
  from { opacity: .25; }
  to   { opacity: 1; }
}

/* --- Le rythme --- */

.pile       { display: flex; flex-direction: column; gap: var(--v3); }
.pile-large { display: flex; flex-direction: column; gap: var(--v6); }
.rangee     { display: flex; gap: var(--v3); flex-wrap: wrap; align-items: center; }

/* --- Le logo et l'en-tete --- */

/*
  LE NOM, sans logo.

  Almamy a retire le logo le 14 septembre 2026 : le site fonctionne avec le
  nom seul, comme Revolut, dont le mot-symbole est simplement son nom
  compose dans la police d'affichage. Le ™ est garde, il marque le nom et
  non le dessin disparu.

  Le nom reste ALMVMY et non Almamy : c'est celui qui figure dans les titres
  de page, les mentions legales et le devis. En changer ici seulement
  laisserait le site se contredire. Un mot a modifier le jour ou tu trancheras.
*/
/*
  LA MARQUE, et c'est une IMAGE posee en MASQUE.

  Elle a ete du texte pendant une version, compose en Prata. Le fichier
  d'Almamy a tranche : son vrai trace porte un symbole depose et des
  empattements qu'aucune police libre ne reproduit exactement. Une marque se
  scanne, elle ne se recompose pas.

  Le masque plutot que l'image : background-color prend la couleur du texte,
  donc un seul fichier sert partout, impression du devis comprise, ou la
  marque doit virer au noir. Le mot ALMVMY reste dans le HTML pour les
  lecteurs d'ecran ; seule sa taille tombe a zero.
*/
.marque {
  display: inline-block;
  flex: 0 0 auto;
  height: 15px;
  aspect-ratio: var(--logo-forme);
  font-size: 0;
  color: var(--encre);
  background-color: currentColor;
  -webkit-mask: url('logo.png') no-repeat center / contain;
          mask: url('logo.png') no-repeat center / contain;
}

.entete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--v4);
  padding-bottom: var(--v5);
  border-bottom: 1px solid var(--filet);
}

/* Les boutons restent groupes entre eux, et calés a droite meme une fois
   passes a la ligne. */
.entete .rangee { flex-wrap: nowrap; margin-left: auto; }

/* ==========================================================================
   3. LES PIECES
   ========================================================================== */

/* --- La carte ---
   A reserver aux objets : un format, une fiche, un look, un chiffre.
   Une section entiere n'est pas un objet, elle n'a pas besoin d'un cadre :
   le vide et le filet suffisent a la separer de la suivante. */
.carte {
  background: var(--bulle);
  backdrop-filter: var(--bulle-flou);
  -webkit-backdrop-filter: var(--bulle-flou);
  border: 1px solid var(--bulle-bord);
  border-radius: var(--rayon);
  padding: var(--v5);
  display: flex;
  flex-direction: column;
  gap: var(--v4);
}

/* --- Les boutons --- */

.bouton {
  display: block;
  width: 100%;
  padding: 15px 18px;
  border: 0;
  /*
    LA PILULE. C'est la signature du systeme : tout bouton, toute etiquette,
    tout champ. Un coin carre ou legerement arrondi sur une action est hors
    systeme, la reference l'interdit explicitement.
  */
  border-radius: var(--pilule);
  background: var(--encre);
  color: var(--os);
  font-family: var(--corps);
  font-size: var(--t-petit);
  font-weight: var(--moyen);
  letter-spacing: var(--interlettre);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--duree-court) var(--courbe),
              background-color var(--duree-court) var(--courbe),
              border-color var(--duree-court) var(--courbe);
}

/* Le bouton secondaire ne prend pas le degrade : un seul geste chromatique
   par ecran, sinon il n'en est plus un. */
.bouton.creux { background: none; color: var(--encre); border: 1px solid var(--filet); }
.bouton.mini  { width: auto; padding: 9px 14px; font-size: var(--t-caption); letter-spacing: var(--interlettre-fine); }

.bouton:hover        { opacity: .88; }
.bouton.creux:hover  { opacity: 1; border-color: var(--texte); }
.bouton[disabled]    { opacity: .4; cursor: not-allowed; }

/*
  L'anneau de focus est en blanc casse et non en or.
  Deux raisons : la charte interdit l'or sur un cadre, et le blanc contraste
  a 14:1 sur le vert profond contre 8,9:1 pour l'or. Plus conforme et plus
  visible a la fois.
*/
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--texte);
  outline-offset: 2px;
  border-radius: var(--rayon-petit);
}

/* --- Les formulaires --- */

.champ { display: flex; flex-direction: column; gap: var(--v2); }

input, select, textarea {
  font-family: var(--corps);
  font-size: var(--t-corps);
  color: var(--texte);
  background: var(--fond);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 13px 14px;
  width: 100%;
  transition: border-color var(--duree-court) var(--courbe);
}

input:hover, select:hover, textarea:hover { border-color: var(--gris); }
input::placeholder, textarea::placeholder { color: var(--gris); }
select option { background: var(--bloc); color: var(--texte); }

/* --- Les choix : prestations, options, creneaux --- */

.choix {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--v3);
  border: 1px solid var(--bulle-bord);
  border-radius: var(--rayon);
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  /*
    La teinte du verre, mais SANS le flou. Une page de reservation aligne
    huit prestations, trois options et six creneaux : dix-sept surfaces
    floutees couteraient cher sur un telephone ancien, pour un gain nul.
    A 0,82 d'opacite la teinte suffit deja a arreter les ondes, et c'est
    tout ce qu'on lui demande ici. Le flou reste pour les grandes cartes.
  */
  background: var(--bulle);
  color: inherit;
  font: inherit;
  transition: border-color var(--duree-court) var(--courbe),
              background-color var(--duree-court) var(--courbe);
}

.choix:hover                  { border-color: var(--gris); }

/* L'etat choisi s'ecrit en couche par dessus la teinte, et non a sa place :
   sinon la ligne selectionnee redeviendrait transparente. */
.choix[aria-pressed="true"] {
  border-color: var(--texte);
  background: linear-gradient(rgba(255, 255, 255, .06), rgba(255, 255, 255, .06)), var(--bulle);
}
.choix-nom   { font-weight: 500; }
.choix-desc  { display: block; font-size: 12px; color: var(--gris); line-height: 1.45; }
.choix-prix  { white-space: nowrap; font-variant-numeric: tabular-nums; }

.creneaux { display: flex; flex-wrap: wrap; gap: var(--v2); }

.creneau {
  border: 1px solid var(--bulle-bord);
  border-radius: var(--pilule);
  padding: 11px 15px;
  background: var(--bulle);
  color: inherit;
  font: inherit;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--duree-court) var(--courbe),
              background-color var(--duree-court) var(--courbe);
}

.creneau:hover                { border-color: var(--gris); }
.creneau[aria-pressed="true"] {
  border-color: var(--texte);
  background: linear-gradient(rgba(255, 255, 255, .06), rgba(255, 255, 255, .06)), var(--bulle);
}

/* --- Les formats evenementiel, page entreprises ---
   Bloc a part, et pas une variante de .choix. Une production ne choisit pas
   un format en un clic comme un client choisit sa coupe : elle compare
   quatre offres, et ce qu'elle compare, ce sont les deux nombres. */
.format {
  background: var(--bulle);
  backdrop-filter: var(--bulle-flou);
  -webkit-backdrop-filter: var(--bulle-flou);
  border: 1px solid var(--bulle-bord);
  border-radius: var(--rayon);
  padding: var(--v5);
  display: flex;
  flex-direction: column;
  gap: var(--v4);
}

.format-tete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--v3);
}

.format-nom { font-size: var(--t-h3); }

/* Le prix est en blanc casse, pas en or : quatre formats sur la page, et la
   charte n'autorise l'or qu'une fois par visuel. Il tient par la taille. */
.format-prix {
  font-family: var(--titre);
  font-weight: var(--moyen);
  font-size: 30px;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.format-mesures {
  display: flex;
  border-top: 1px solid var(--filet);
  padding-top: var(--v4);
}

/* La mesure : un nombre en grand, son intitule dessous. Sert aux formats,
   et a tout endroit ou un chiffre doit se lire sans lire la phrase. */
.mesure { flex: 1; display: flex; flex-direction: column; gap: var(--v1); min-width: 0; }

/* Le filet separe les deux mesures sans ajouter de bloc supplementaire. */
.mesure + .mesure { border-left: 1px solid var(--filet); padding-left: var(--v4); }

.mesure-valeur {
  font-family: var(--titre);
  font-weight: var(--moyen);
  font-size: var(--t-nombre);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.mesure-cle {
  font-size: 10px;
  font-weight: var(--moyen);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gris);
}

/* --- Le point : le briefing du jour --- */

/*
  C'est le premier ecran qu'Almamy voit en ouvrant son espace. Il repond a
  une seule question : qu'est-ce que je fais maintenant.

  Avant, les actions empruntaient .choix, le composant qui sert a choisir une
  prestation cote client. Ca marchait, mais ca donnait a une liste de
  decisions l'allure d'un menu. Une action a un rang, une urgence et une
  destination ; un menu n'a rien de tout ca.
*/
.brief {
  display: flex;
  flex-direction: column;
  gap: var(--v3);
  padding-bottom: var(--v5);
  border-bottom: 1px solid var(--filet);
}

.brief-titre {
  font-family: var(--titre);
  font-weight: var(--moyen);
  font-size: clamp(26px, 7vw, 34px);
  line-height: .95;
  margin: 0;
}

.brief-chiffres {
  display: flex;
  gap: var(--v6);
  flex-wrap: wrap;
  margin-top: var(--v2);
}

.brief-chiffre { display: flex; flex-direction: column; gap: 2px; }

.brief-valeur {
  font-family: var(--titre);
  font-weight: var(--moyen);
  font-size: 26px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/*
  La liste des actions, dans l'ordre ou il faut les faire.
  Le rang est ecrit : la charte reserve la numerotation aux cas ou l'ordre
  veut dire quelque chose, et ici il veut dire l'urgence.
*/
.actions { display: flex; flex-direction: column; gap: var(--v3); }

.action {
  display: flex;
  align-items: flex-start;
  gap: var(--v4);
  width: 100%;
  padding: var(--v4) var(--v4) var(--v4) var(--v3);
  border: 1px solid var(--bulle-bord);
  border-left: 3px solid var(--filet);
  border-radius: var(--rayon);
  background: var(--bulle);
  backdrop-filter: var(--bulle-flou);
  -webkit-backdrop-filter: var(--bulle-flou);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duree-court) var(--courbe),
              transform var(--duree-court) var(--courbe);
}

.action:hover  { border-top-color: var(--gris); border-right-color: var(--gris); border-bottom-color: var(--gris); }
.action:active { transform: scale(.99); }

/* L'urgence tient dans le filet de gauche, et nulle part ailleurs : une
   ligne entiere coloree se lirait comme une alerte, meme quand elle n'en
   est pas une. */
.action[data-urgence="haute"]   { border-left-color: var(--alerte); }
.action[data-urgence="moyenne"] { border-left-color: var(--attention); }
.action[data-urgence="basse"]   { border-left-color: var(--serie-domicile); }

.action-rang {
  flex: 0 0 auto;
  font-size: var(--t-mention);
  font-weight: var(--moyen);
  letter-spacing: .18em;
  color: var(--gris);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

.action-corps { flex: 1; display: flex; flex-direction: column; gap: var(--v1); min-width: 0; }
.action-titre { font-weight: 500; }
.action-detail { font-size: 12px; line-height: 1.5; color: var(--gris); }

.action-fleche {
  flex: 0 0 auto;
  color: var(--gris);
  transition: transform var(--duree-court) var(--courbe);
}

.action:hover .action-fleche { transform: translateX(3px); }

/*
  Les actions arrivent l'une apres l'autre, de haut en bas, dans l'ordre ou
  il faut les traiter. Soixante millisecondes d'ecart : assez pour que l'oeil
  suive la descente, trop peu pour qu'on attende.
*/
.anime-prete .actions .action {
  animation: apparition-action 320ms var(--courbe) backwards;
}

@keyframes apparition-action {
  from { opacity: 0; transform: translateY(8px); }
}

.anime-prete .actions .action:nth-child(1) { animation-delay: 40ms; }
.anime-prete .actions .action:nth-child(2) { animation-delay: 100ms; }
.anime-prete .actions .action:nth-child(3) { animation-delay: 160ms; }
.anime-prete .actions .action:nth-child(4) { animation-delay: 220ms; }
.anime-prete .actions .action:nth-child(n+5) { animation-delay: 280ms; }

/* --- Le mode concentration, onglet Revenus --- */

/*
  Cet onglet est le seul du site ou Almamy regarde des chiffres pour decider.
  Le mur, sa lumiere et ses ondes y sont du bruit. Quand la vue s'ouvre, la
  page bascule en presque noir : les deux couches du mur s'effacent, le fond
  se ferme. Ce n'est pas un theme de plus, c'est un etat de la meme page, et
  la transition d'une demi-seconde le dit.
*/
body {
  transition: background-color 500ms var(--courbe);
}

body::before,
body::after {
  transition: opacity 500ms var(--courbe);
}

body.concentration                { background: var(--noir); }
body.concentration::before,
body.concentration::after         { opacity: 0; }

/*
  Les surfaces suivent la page. Sans ca, les tuiles gardaient le vert du mur
  et flottaient sur un fond devenu noir : deux ambiances sur le meme ecran.
  Le verre reste du verre, il se ferme simplement d'un cran.
*/
body.concentration .carte,
body.concentration .tuile,
body.concentration .metiers {
  background: var(--creux);
  border-color: var(--filet);
}

/* --- Le graphique de revenus --- */

.focus {
  background: var(--creux);
  border: 1px solid var(--filet);
  border-radius: 16px;
  padding: var(--v5);
  display: flex;
  flex-direction: column;
  gap: var(--v5);
}

.focus-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v3);
  flex-wrap: wrap;
}

/*
  Le selecteur de periode, en bloc plein plutot qu'en boutons separes :
  ce n'est pas une action, c'est un reglage de lecture. Meme piece que le
  selecteur de metier, en plus petit.
*/
.segments {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--filet);
  border-radius: var(--pilule);
  /* Etait rgba(1,23,22,.9), un vert abyssal reste du systeme precedent sur
     une barre qui ne doit plus avoir aucune teinte. */
  background: var(--creux);
}

.segment-periode {
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  background: transparent;
  color: var(--gris);
  font-family: var(--corps);
  font-size: 10px;
  font-weight: var(--moyen);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--duree-court) var(--courbe),
              color var(--duree-court) var(--courbe);
}

.segment-periode[aria-pressed="true"] { background: var(--brume); color: var(--texte); }

.trace { position: relative; }
.trace svg { display: block; width: 100%; height: auto; overflow: visible; }

/*
  Le trait se dessine a l'ouverture. La longueur du trace est passee en
  variable par le script : une animation de trait a besoin de connaitre sa
  propre longueur, et elle n'est calculable qu'une fois le chemin construit.
*/
.trace-ligne {
  fill: none;
  stroke: var(--courbe-couleur);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 5px rgba(47, 217, 168, .45));
}

.anime-prete .trace-ligne {
  stroke-dasharray: var(--longueur);
  stroke-dashoffset: var(--longueur);
  animation: tracer 900ms var(--courbe) forwards;
}

@keyframes tracer { to { stroke-dashoffset: 0; } }

/* La prevision est en pointilles : ce n'est pas de l'argent encaisse. */
.trace-prevu {
  fill: none;
  stroke: var(--courbe-couleur);
  stroke-width: 2;
  stroke-dasharray: 4 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: .55;
}

.trace-aire { opacity: 0; animation: monter-aire 700ms var(--courbe) 250ms forwards; }
@keyframes monter-aire { to { opacity: 1; } }

.trace-grille {
  stroke: var(--cendre);
  stroke-width: 1;
  stroke-dasharray: 2 5;
  vector-effect: non-scaling-stroke;
}

.trace-base { stroke: var(--cendre); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* Le point courant porte un anneau de la couleur de la surface : sans lui il
   se confond avec le trait des qu'il passe devant l'aire. */
.trace-point {
  fill: var(--courbe-couleur);
  stroke: var(--encre);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.trace-viseur { stroke: rgba(255, 255, 255, .18); stroke-width: 1; vector-effect: non-scaling-stroke; }

.trace-survol {
  position: absolute;
  inset: 0;
  cursor: crosshair;
}

/* Le grand chiffre du bas, celui qu'on vient chercher. */
.focus-pied {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--v4);
  flex-wrap: wrap;
  padding-top: var(--v5);
  border-top: 1px solid var(--filet);
}

.focus-total {
  font-family: var(--titre);
  font-weight: var(--moyen);
  font-size: clamp(38px, 11vw, 52px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.focus-total sup {
  font-family: var(--corps);
  font-size: 14px;
  font-weight: var(--moyen);
  vertical-align: super;
  margin-left: 4px;
  color: var(--courbe-couleur);
}

.focus-total sup.baisse { color: var(--alerte); }

.focus-variation {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  color: var(--courbe-couleur);
}

.focus-variation.baisse { color: var(--alerte); }
.focus-variation svg { width: 16px; height: 16px; }

/* --- Le dossier client : un ecran de personnalisation --- */

/*
  Cette vue est la seule du site a ne pas ressembler au reste, et c'est
  voulu. Partout ailleurs le client lit une offre ; ici il regarde SON
  dossier. Le changement d'ambiance le lui dit avant le premier mot.

  L'ambiance est posee par app.html au changement d'onglet, pas ici : elle
  depend d'un etat de la page, et un etat se decide en script.
*/

.profil {
  position: relative;
  overflow: hidden;
  /* Les statistiques sont parties dans leurs tuiles : sans elles, le bas de
     cette carte n'a plus rien a porter et v6 y creusait un vide. */
  padding: var(--v7) var(--v6) var(--v5);
  border-radius: var(--rayon);
  border: 1px solid var(--bulle-bord);
  background: var(--bulle);
  backdrop-filter: var(--bulle-flou);
  -webkit-backdrop-filter: var(--bulle-flou);
}

/*
  LE FILIGRANE. Le prenom ecrit en tres grand, tres pale, derriere le
  contenu. Il n'est pas decoratif : c'est lui qui dit au client que cette
  page est la sienne, avant meme qu'il ait lu un mot.

  Il est marque decoratif pour les lecteurs d'ecran, parce que le meme
  prenom est ecrit lisiblement juste devant : le faire lire deux fois serait
  du bruit.
*/
.profil-filigrane {
  position: absolute;
  left: -.06em;
  /*
    Cale sur le HAUT et non sur le milieu : centre, il traversait la rangee
    de statistiques et brouillait les chiffres. Un filigrane doit se sentir
    derriere le contenu, jamais passer au travers.

    La valeur est positive, et de peu. Avec une interligne de .8, le haut des
    capitales sort deja du dessus de la boite : a zero, la carte rognait le
    sommet des lettres, et un prenom rogne dit exactement le contraire de ce
    qu'il est la pour dire.
  */
  top: .06em;
  font-family: var(--affiche);
  font-weight: var(--moyen);
  /*
    Taille calee sur la LARGEUR du cadre et non sur celle de l'ecran : a
    34vw, "Karim" debordait par la droite et paraissait coupe faute de
    place. A 20vw il tient en entier, y compris pour un prenom long.
  */
  font-size: clamp(56px, 20vw, 132px);
  line-height: .8;
  letter-spacing: var(--serre-display);
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, .055);
  pointer-events: none;
  user-select: none;
}

.profil-corps { position: relative; display: flex; flex-direction: column; gap: var(--v3); }

/*
  L'ACCUEIL. "Coucou" est une salutation, pas un titre : il passe petit au
  dessus et c'est le prenom qui porte la ligne. Ecrits a la meme taille, les
  deux mots feraient un slogan au lieu d'un bonjour.

  Il remplace l'ancien intitule "Ton dossier", qui disait la meme chose que
  l'onglet deja selectionne juste au dessus.
*/
.profil-nom {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--v2);
  font-family: var(--inter);
  font-size: var(--t-corps);
  font-weight: var(--regulier);
  letter-spacing: 0;
  color: var(--ardoise);
}

.profil-prenom {
  font-family: var(--affiche);
  font-weight: var(--moyen);
  font-size: clamp(34px, 10vw, 56px);
  line-height: 1;
  letter-spacing: var(--serre-display);
  color: var(--encre);
}

/*
  Les statistiques. En grille et non en ligne souple : en ligne, sur
  telephone, les trois blocs s'empilaient l'un sous l'autre avec 56 px entre
  chacun, et la carte faisait 309 px de haut pour trois chiffres. La grille
  en pose deux par rangee des que la place manque.

  L'ecart horizontal reste large, le vertical est plus court : deux colonnes
  se separent a l'oeil, deux rangees se separent deja toutes seules.
*/
.profil-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: var(--v5) var(--v6);
  margin-top: var(--v5);
  padding-top: var(--v5);
  border-top: 1px solid var(--filet);
}

.stat { display: flex; flex-direction: column; gap: var(--v2); }

.stat-valeur {
  font-family: var(--affiche);
  font-weight: var(--moyen);
  font-size: 30px;
  line-height: 1;
  color: var(--encre);
}

.stat-cle {
  font-size: var(--t-mention);
  font-weight: var(--demi);
  letter-spacing: var(--interlettre);
  text-transform: uppercase;
  color: var(--ardoise);
}

/*
  La fiche du look. Les reglages sont ranges comme les caracteristiques d'un
  equipement : un intitule court, une valeur. C'est ce qu'ils sont.
*/
.fiche-look {
  margin-top: var(--v5);
  display: flex;
  flex-direction: column;
  gap: var(--v6);
  padding: var(--v6);
  border-radius: var(--rayon);
  border: 1px solid var(--bulle-bord);
  background: var(--bulle);
  backdrop-filter: var(--bulle-flou);
  -webkit-backdrop-filter: var(--bulle-flou);
}

/*
  Le titre et la vignette cote a cote. Sur un telephone, la vignette de 96 px
  plus la gouttiere ne laissaient que 150 px au titre, et « Le degrade bas »
  tombait sur trois lignes hachees. En dessous de 420 px la vignette passe
  donc au dessus, en pleine largeur : mieux vaut une image plus grande et un
  titre entier que l'inverse.
*/
.fiche-tete {
  display: flex;
  gap: var(--v5);
  align-items: flex-start;
  justify-content: space-between;
}

@media (max-width: 420px) {
  .fiche-tete { flex-direction: column-reverse; gap: var(--v4); }
  .fiche-photo { width: 100%; aspect-ratio: 16 / 10; }
}

.fiche-nom {
  margin: 0;
  font-family: var(--affiche);
  font-weight: var(--moyen);
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: var(--serre-titre);
  color: var(--encre);
}

.fiche-photo {
  flex: 0 0 auto;
  width: 96px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--rayon-petit);
  border: 1px solid var(--filet);
}

/* Deux colonnes des que la place le permet : cinq reglages en une colonne
   font une liste, en deux ils font un tableau de bord. */
.fiche-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--v4);
}

.fiche-stat {
  display: flex;
  flex-direction: column;
  gap: var(--v2);
  padding: var(--v4) var(--v5);
  border-radius: var(--rayon-petit);
  background: rgba(255, 255, 255, .04);
}

.fiche-cle {
  font-size: 10px;
  font-weight: var(--demi);
  letter-spacing: var(--interlettre);
  text-transform: uppercase;
  color: var(--ardoise);
}

.fiche-val { font-size: var(--t-corps); line-height: 1.5; color: var(--encre); }

/* --- La banniere de fidelite --- */

/*
  Elle pousse a reprendre rendez-vous tant que la fenetre des 20 jours tient.

  Deux choix de charte qui se lisent mal si on ne les explique pas.

  Pas d'or. La couronne est un symbole, pas du texte, et la charte reserve
  l'or au texte : "jamais sur un filet, un cadre ou un fond". Le total de
  cette page est deja son unique element en or. Le blanc casse est de toute
  facon la vraie couleur d'accent de la marque, et une couronne blanche fine
  sur le vert profond fait plus cher qu'une couronne doree.

  Pas d'emoji. La charte n'en veut pas, et une couronne emoji change de
  dessin sur chaque telephone : ce serait le seul element de la page a ne pas
  etre a toi.
*/
.fidelite {
  display: flex;
  align-items: center;
  gap: var(--v3);
  width: 100%;
  padding: var(--v3) var(--v4);
  border: 1px solid var(--bulle-bord);
  border-radius: var(--rayon);
  background: var(--bulle);
  backdrop-filter: var(--bulle-flou);
  -webkit-backdrop-filter: var(--bulle-flou);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duree-court) var(--courbe),
              transform var(--duree-court) var(--courbe);
}

.fidelite:hover  { border-color: var(--texte); }
.fidelite:active { transform: scale(.99); }

.fidelite-couronne {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--texte);
}

.fidelite-texte { flex: 1; font-size: var(--t-petit); line-height: 1.45; }

.fidelite-fleche {
  flex: 0 0 auto;
  color: var(--gris);
  transition: transform var(--duree-court) var(--courbe);
}

.fidelite:hover .fidelite-fleche { transform: translateX(3px); }

/* --- Les formations : les programmes et les modules --- */

/*
  LA VITRINE, page formations.

  Un programme presente comme un produit : un seul a l'ecran, en grand, les
  autres en vignettes. Cinq cartes empilees demandaient de comparer avant de
  choisir, alors que cette page s'adresse a celui qui ne sait pas comparer.

  La lueur derriere le nom est la seule concession a la reference : elle
  reste dans la pile de teals du systeme, aucune couleur etrangere.
*/
.vitrine {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--v4);
  padding: var(--v6) var(--v5) var(--v5);
  border: 1px solid var(--bulle-bord);
  border-radius: var(--rayon);
  background: var(--bulle);
  backdrop-filter: var(--bulle-flou);
  -webkit-backdrop-filter: var(--bulle-flou);
}

/* La lueur : posee derriere le contenu, jamais devant. */
.vitrine::before {
  content: '';
  position: absolute;
  top: -40%;
  left: 50%;
  width: 130%;
  height: 110%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side,
      rgba(31, 31, 31, .07) 0%,
      rgba(31, 31, 31, .03) 45%,
      transparent 72%);
  pointer-events: none;
}

.vitrine > * { position: relative; }

.vitrine-rang {
  margin: 0;
  font-size: var(--t-mention);
  font-weight: var(--moyen);
  letter-spacing: var(--interlettre);
  text-transform: uppercase;
  color: var(--ardoise);
}

/* Le nom du programme porte l'enseigne : c'est un nom de produit, pas un
   titre de section. C'est la seule autre place d'Archivo Black sur le site. */
.vitrine-nom {
  margin: 0;
  font-family: var(--enseigne);
  font-size: clamp(34px, 9vw, 56px);
  line-height: .92;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--encre);
}

.vitrine-pour   { margin: 0; font-size: var(--t-corps); color: var(--ardoise); }
.vitrine-texte  { margin: 0; font-size: var(--t-petit); line-height: 1.6; }

.vitrine-action {
  display: flex;
  align-items: center;
  gap: var(--v4);
  flex-wrap: wrap;
  margin-top: var(--v2);
}

.vitrine-action .bouton { width: auto; }

.vitrine-prix {
  font-family: var(--enseigne);
  font-size: 22px;
  color: var(--encre);
}

/* Les deux chiffres, presentes comme des caracteristiques produit. */
.vitrine-specs {
  display: flex;
  gap: var(--v3);
  flex-wrap: wrap;
}

.spec {
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--v3) var(--v4);
  border: 1px solid var(--bulle-bord);
  border-radius: var(--rayon-petit);
  background: var(--bulle);
  backdrop-filter: var(--bulle-flou);
  -webkit-backdrop-filter: var(--bulle-flou);
}

.spec-valeur { font-family: var(--enseigne); font-size: 26px; line-height: 1; color: var(--encre); }
.spec-cle {
  font-size: 10px;
  font-weight: var(--moyen);
  letter-spacing: var(--interlettre-fine);
  text-transform: uppercase;
  color: var(--graphite);
}

.vitrine-etapes {
  list-style: none;
  margin: 0;
  padding: var(--v4) 0 0;
  border-top: 1px solid var(--filet);
  display: flex;
  flex-direction: column;
  gap: var(--v2);
}

.vitrine-etapes li {
  display: flex;
  align-items: baseline;
  gap: var(--v3);
  font-size: var(--t-petit);
}

.vitrine-pied {
  display: flex;
  align-items: center;
  gap: var(--v4);
  flex-wrap: wrap;
  padding-top: var(--v4);
  border-top: 1px solid var(--filet);
}

.vitrine-fleches { display: flex; gap: var(--v2); flex: 0 0 auto; }

.fleche {
  width: 44px;
  height: 36px;
  border: 1px solid var(--filet);
  border-radius: var(--rayon-petit);
  background: var(--brume);
  color: var(--encre);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: border-color var(--duree-court) var(--courbe),
              transform var(--duree-court) var(--courbe);
}

.fleche:hover  { border-color: var(--encre); }
.fleche:active { transform: scale(.94); }

/* Les vignettes defilent plutot que de se serrer : a cinq programmes elles
   deviendraient illisibles sur un telephone. */
.vitrine-vignettes {
  flex: 1;
  display: flex;
  gap: var(--v2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.vitrine-vignettes::-webkit-scrollbar { display: none; }

.vignette {
  flex: 0 0 auto;
  padding: 9px 13px;
  border: 1px solid var(--filet);
  border-radius: var(--rayon-petit);
  background: transparent;
  color: var(--graphite);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--duree-court) var(--courbe),
              color var(--duree-court) var(--courbe),
              background-color var(--duree-court) var(--courbe);
}

.vignette:hover { border-color: var(--gris); }

.vignette[aria-pressed="true"] {
  border-color: var(--encre);
  color: var(--encre);
  background: var(--brume);
}

.vignette-nom {
  font-size: 11px;
  font-weight: var(--moyen);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/*
  Le module. Une carte et non une ligne : onze modules en liste plate se
  lisent comme un sommaire, et personne ne lit un sommaire. En carte, chacun
  a le droit a son nom, sa phrase et sa duree.
*/
.modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--v3);
}

.module {
  display: flex;
  flex-direction: column;
  gap: var(--v2);
  padding: var(--v4);
  border: 1px solid var(--bulle-bord);
  border-radius: var(--rayon);
  background: var(--bulle);
  backdrop-filter: var(--bulle-flou);
  -webkit-backdrop-filter: var(--bulle-flou);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duree-court) var(--courbe),
              background-color var(--duree-court) var(--courbe),
              transform var(--duree-court) var(--courbe);
}

.module:hover { border-color: var(--gris); }
.module:active { transform: scale(.985); }

.module[aria-pressed="true"] {
  border-color: var(--texte);
  background: rgba(234, 234, 232, .07);
}

.module-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--v3);
}

.module-nom {
  font-family: var(--titre);
  font-weight: var(--moyen);
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: var(--serre-titre);
}

/* Le signe d'etat, seul element qui grossit a la selection. */
.module-etat {
  font-size: 18px;
  line-height: 1;
  color: var(--gris);
  flex: 0 0 auto;
  transition: color var(--duree-court) var(--courbe),
              transform var(--duree) var(--courbe);
}

.module[aria-pressed="true"] .module-etat {
  color: var(--texte);
  transform: scale(1.25);
}

.module-desc { font-size: 12px; line-height: 1.5; color: var(--gris); }

.module-note {
  font-size: 11px;
  line-height: 1.45;
  color: var(--attention);
}

/* Un prerequis absent d'un module DEJA choisi n'est plus un conseil,
   c'est un trou dans la journee : il change de couleur. */
.module-note.manque { color: var(--alerte); }

.module-pied {
  margin-top: auto;
  padding-top: var(--v2);
  display: flex;
  justify-content: flex-end;
}

.module-duree {
  font-size: 10px;
  font-weight: var(--moyen);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gris);
  font-variant-numeric: tabular-nums;
}

.famille { display: flex; flex-direction: column; gap: var(--v4); }
.famille + .famille { margin-top: var(--v6); }
.famille-tete { display: flex; flex-direction: column; gap: var(--v1); }

/* --- Le total, colle en bas de l'ecran ---
   Le montant est le seul element en or de l'espace client. C'est le chiffre
   qui doit rester en tete, exactement l'usage prevu par la charte. */
.total {
  position: sticky;
  bottom: 0;
  background: var(--fond);
  border-top: 1px solid var(--filet);
  padding: var(--v4) 0 var(--v4);
  display: flex;
  flex-direction: column;
  gap: var(--v3);
}

.total-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: var(--v4); }
.total-ligne > div { min-width: 0; }

.total-montant {
  font-family: var(--titre);
  font-weight: var(--moyen);
  font-size: 36px;
  line-height: 1;
  color: var(--or);
  font-variant-numeric: tabular-nums;
  /* Sans ces deux lignes, "85 €" se coupe en deux quand le detail s'allonge. */
  white-space: nowrap;
  flex: 0 0 auto;
}

/* --- La fiche client --- */

/* Le filet de gauche est en blanc casse, pas en or : la charte reserve l'or
   au texte. Le blanc est de toute facon sa vraie couleur d'accent. */
/*
  Le filet de gauche est epais, le reste du contour est un filet normal. Sans
  fond, seul le trait epais se voyait et le bloc ressemblait a une parenthese
  ouverte posee dans le vide : c'est ce que donnait le code de parrainage,
  imbrique dans une carte de meme couleur. Le fond enfonce lui rend son
  volume, et l'accent redevient un accent.
*/
.rappel {
  border: 1px solid var(--filet);
  border-left: 3px solid var(--texte);
  border-radius: var(--rayon);
  padding: var(--v4);
  background: var(--creux);
}

.rappel.chaud { border-left-color: var(--alerte); }
.rappel-jours { font-family: var(--titre);
  font-weight: var(--moyen); font-size: 30px; line-height: 1; }

.reglage {
  display: flex;
  justify-content: space-between;
  gap: var(--v4);
  padding: var(--v3) 0;
  border-bottom: 1px solid var(--filet);
}

.reglage:last-child { border-bottom: 0; }

.reglage-cle {
  font-size: var(--t-mention);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris);
  white-space: nowrap;
}

.reglage-val { text-align: right; font-weight: 500; }

/* --- Les deux metiers, espace barber ---
   Volontairement plus gros et plus haut que les onglets : ce n'est pas un
   onglet de plus, c'est le fait de changer de metier. */
.metiers {
  display: flex;
  gap: var(--v1);
  background: var(--bulle);
  backdrop-filter: var(--bulle-flou);
  -webkit-backdrop-filter: var(--bulle-flou);
  border: 1px solid var(--bulle-bord);
  border-radius: var(--rayon);
  padding: var(--v1);
}

.metier {
  flex: 1 1 0;
  border: 0;
  border-radius: var(--rayon-petit);
  padding: 13px 10px;
  background: transparent;
  color: var(--gris);
  font-family: var(--corps);
  font-size: var(--t-mention);
  font-weight: var(--moyen);
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--duree-court) var(--courbe),
              color var(--duree-court) var(--courbe);
}

.metier[aria-selected="true"] { background: var(--texte); color: var(--fond); }

/* --- Les onglets ---
   Defilement horizontal : a cinq onglets la rangee ne tient plus sur un
   telephone, et c'est la rangee qui doit defiler, jamais la page. */
.onglets {
  display: flex;
  gap: var(--v4);
  border-bottom: 1px solid var(--filet);
  overflow-x: auto;
  scrollbar-width: none;
}

.onglets::-webkit-scrollbar { display: none; }

.onglet {
  white-space: nowrap;
  border: 0;
  background: transparent;
  color: var(--gris);
  font-family: var(--corps);
  font-size: var(--t-mention);
  font-weight: var(--moyen);
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 13px 4px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--duree-court) var(--courbe),
              border-color var(--duree-court) var(--courbe);
}

.onglet:hover { color: var(--texte); }

/* Le trait de l'onglet actif est un filet : la charte interdit l'or dessus. */
.onglet[aria-selected="true"] { color: var(--texte); border-bottom-color: var(--texte); }

/* --- La galerie de coupes ---
   Une rangee qui defile, pas une grille : un client qui a vingt coupes doit
   pouvoir les balayer au pouce sans que son dossier devienne interminable. */
.galerie {
  display: flex;
  gap: var(--v4);
  overflow-x: auto;
  padding-bottom: var(--v2);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.galerie::-webkit-scrollbar { display: none; }

.look {
  flex: 0 0 148px;
  scroll-snap-align: start;
  border: 1px solid var(--bulle-bord);
  border-radius: var(--rayon);
  background: var(--bulle);
  backdrop-filter: var(--bulle-flou);
  -webkit-backdrop-filter: var(--bulle-flou);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  display: flex;
  flex-direction: column;
  transition: border-color var(--duree-court) var(--courbe);
}

.look:hover                 { border-color: var(--gris); }
.look[aria-pressed="true"]  { border-color: var(--texte); }

.look-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  background: var(--filet);
}

.look-vide {
  width: 100%;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gris);
  font-size: var(--t-mention);
  letter-spacing: .14em;
  text-transform: uppercase;
  background: rgba(234, 234, 232, .04);
}

.look-texte { padding: var(--v3); display: flex; flex-direction: column; gap: 2px; }
.look-nom   { font-weight: 500; font-size: var(--t-petit); line-height: 1.3; }
.look-date  { font-size: var(--t-mention); color: var(--gris); font-variant-numeric: tabular-nums; }

.apercu-photo img,
.photo-detail {
  width: 100%;
  max-width: 260px;
  border-radius: var(--rayon);
  display: block;
}

/* --- Les revenus --- */

.tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: var(--v3);
}

.tuile {
  background: var(--bulle);
  backdrop-filter: var(--bulle-flou);
  -webkit-backdrop-filter: var(--bulle-flou);
  border: 1px solid var(--bulle-bord);
  border-radius: var(--rayon);
  padding: var(--v4);
  display: flex;
  flex-direction: column;
  gap: var(--v1);
}

.tuile-valeur {
  font-family: var(--titre);
  font-weight: var(--moyen);
  font-size: 30px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.tuile-note { font-size: 12px; color: var(--gris); line-height: 1.4; }

/* Le graphique est en HTML plutot qu'en SVG : le texte ne se deforme jamais
   et la mise a l'echelle suit la largeur de l'ecran toute seule. */
.graphique {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: var(--v1);
  height: 190px;
  padding-top: 18px;
}

.barre {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px; /* le separateur entre deux segments empiles */
  cursor: default;
  position: relative;
}

.segment { border-radius: 2px; min-height: 2px; }
/* Le segment du haut porte l'extremite arrondie, ancree sur la ligne de base. */
.segment:first-child        { border-radius: 4px 4px 2px 2px; }
.segment-domicile           { background: var(--serie-domicile); }
.segment-evenementiel       { background: var(--serie-evenementiel); }
.segment-prevu {
  background: transparent;
  border: 1px dashed var(--gris);
  border-radius: 4px 4px 2px 2px;
}

.barre:hover .segment { filter: brightness(1.18); }

.barre-valeur {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--t-mention);
  color: var(--texte);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.axe {
  display: flex;
  gap: var(--v1);
  border-top: 1px solid var(--filet);
  padding-top: var(--v2);
}

.axe span {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  font-size: 10px;
  color: var(--gris);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  /* Une date sur trois seulement est affichee : elle a le droit de deborder
     sur les colonnes vides d'a cote, plutot que d'etre coupee par des points
     de suspension qui ne renseignent sur rien. */
  overflow: visible;
}

.axe .axe-debut { text-align: left; }
.axe .axe-fin   { text-align: right; }

.legende { display: flex; gap: var(--v4); flex-wrap: wrap; }
.legende span { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--gris); }
/* display:inline-block, sinon la pastille perd sa largeur et sa hauteur des
   qu'elle n'est plus l'enfant direct d'un conteneur flex. C'est arrive dans
   la legende du graphique de revenus : elle s'ecrasait en un trait. */
.pastille {
  display: inline-block;
  vertical-align: middle;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex: 0 0 auto;
  margin-right: 6px;
}

/* L'infobulle reste DANS le graphique : ancree en haut de la colonne survolee
   plutot qu'au dessus, sinon elle recouvrait les onglets. Et pres des bords,
   elle s'aligne sur le bord au lieu de deborder de la carte. */
.infobulle {
  position: absolute;
  top: var(--v1);
  left: 50%;
  transform: translateX(-50%);
  background: var(--fond);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 9px 11px;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
  z-index: 5;
  pointer-events: none;
}

.infobulle-gauche { left: 0; transform: none; }
.infobulle-droite { left: auto; right: 0; transform: none; }

.repartition        { display: flex; flex-direction: column; gap: var(--v2); }
.repartition-ligne  { display: flex; flex-direction: column; gap: var(--v1); }
.repartition-tete   { display: flex; justify-content: space-between; gap: var(--v3); font-size: var(--t-petit); }
.repartition-piste  { height: 8px; background: rgba(234, 234, 232, .07); border-radius: 4px; overflow: hidden; }
.repartition-part   { height: 100%; background: var(--serie-domicile); border-radius: 4px; }

.tableau { width: 100%; border-collapse: collapse; font-size: var(--t-petit); }
.tableau th, .tableau td { text-align: right; padding: 7px 6px; border-bottom: 1px solid var(--filet); }
.tableau th:first-child, .tableau td:first-child { text-align: left; }
.tableau th { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); font-weight: var(--moyen); }
.tableau td { font-variant-numeric: tabular-nums; }
.defilement { overflow-x: auto; }

/* --- Les etoiles ---
   Le selecteur est fait de vraies cases radio, masquees visuellement. Ca garde
   la navigation au clavier et la lecture par les lecteurs d'ecran, ce qu'une
   rangee de <span> cliquables ne donne pas. */
.etoiles {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: var(--v1);
}

.etoiles input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.etoiles label {
  font-size: 30px;
  line-height: 1;
  color: var(--filet);
  cursor: pointer;
  transition: color var(--duree-court) var(--courbe);
}

/* La rangee est inversee en CSS : au survol ou a la selection d'une etoile,
   toutes celles qui la suivent dans le HTML, donc celles a sa gauche a
   l'ecran, s'allument aussi. */
.etoiles label:hover,
.etoiles label:hover ~ label,
.etoiles input:checked ~ label { color: var(--or); }

.etoiles input:focus-visible + label { outline: 2px solid var(--texte); outline-offset: 2px; }

.note-lue { color: var(--or); font-size: 17px; letter-spacing: 2px; }
.note-lue .eteinte { color: var(--filet); }

.moyenne {
  font-family: var(--titre);
  font-weight: var(--moyen);
  font-size: 40px;
  line-height: 1;
  color: var(--or);
  font-variant-numeric: tabular-nums;
}

/* --- Les messages ---
   Le bandeau d'information est un cadre : il est donc en filet, jamais en or. */
.bandeau {
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: var(--v3) var(--v4);
  font-size: var(--t-petit);
  color: var(--gris);
}

.bandeau.erreur { border-color: var(--alerte); color: var(--alerte); }
.bandeau.ok     { border-color: var(--filet);  color: var(--gris); }

/* Lu par les lecteurs d'ecran, invisible a l'oeil. */
.visuellement-cachee {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

[hidden] { display: none !important; }

/* ==========================================================================
   4. LE MOUVEMENT
   ========================================================================== */

/*
  L'apparition au defilement.

  Un bloc n'apparait pas quand la page charge, il apparait quand il entre
  dans l'ecran. Dix pixels, une fois, jamais deux : ce qui remonte a chaque
  passage est un tic, pas une animation. La charte, section 06 : apparition
  franche, sans effet de rebond.

  TOUT est conditionne a .anime-prete sur <html>, posee par une ligne de
  script dans l'en-tete de chaque page. Si le script ne tourne pas, la
  classe n'existe pas, ces regles ne s'appliquent pas, et la page reste
  simplement visible et fixe. Un site dont le texte disparait parce qu'une
  animation n'a pas demarre est un site casse.
*/
.anime-prete .entree {
  opacity: 0;
  transform: translateY(10px);
}

/*
  Le retard vient de --retard, pose par js/animations.js sur l'element.
  Il est ecrit ici et nulle part ailleurs : une variable ne retarde que la
  transition qui la lit, contrairement a un transition-delay pose en direct
  qui resterait actif sur tous les etats suivants de l'element.
*/
.anime-prete .entree.vu {
  opacity: 1;
  transform: none;
  transition: opacity 380ms var(--courbe) var(--retard, 0ms),
              transform 380ms var(--courbe) var(--retard, 0ms);
}

/*
  Le passage d'un onglet a l'autre.

  Plus court et plus discret que l'apparition au defilement : on ne change
  pas de page, on tourne une feuille. Six pixels au lieu de dix.

  Aucun etat de depart n'est pose sur l'element : il est visible par defaut
  et l'animation ne fait que le traverser. Si elle ne demarre pas, l'onglet
  s'affiche simplement d'un coup. Une animation posee sur du contenu ne doit
  jamais pouvoir le cacher.
*/
@keyframes entree-onglet {
  from { opacity: 0; transform: translateY(6px); }
}

.anime-prete .onglet-entre {
  animation: entree-onglet 240ms var(--courbe);
}

/*
  LES BULLES QUI RESPIRENT, accueil seulement.

  Deux mouvements qui ne se marchent pas dessus, et c'est toute la
  difficulte : les deux veulent ecrire dans transform.

  1. L'ARRIVEE. Les cartes de l'accueil montent de plus loin que le reste du
     site, 22 px au lieu de 10, avec une legere mise a l'echelle. C'est la
     "sensation au scroll" demandee : on sent le poids du bloc qui se pose.

  2. LA RESPIRATION. Une fois arrivee, chaque carte derive de trois pixels,
     en aller-retour, sur une duree differente pour chacune. Des durees
     premieres entre elles, 11, 13 et 17 secondes : elles ne se resynchronisent
     jamais, donc le mouvement ne devient jamais un battement collectif.

  L'animation ne demarre qu'APRES l'arrivee, grace a son retard. Sans ce
  retard elle ecraserait la transition d'arrivee des la premiere image, et
  la carte apparaitrait sans monter : une animation l'emporte toujours sur
  une transition.
*/
.accueil .pile-large > .carte.entree {
  transform: translateY(22px) scale(.985);
}

.accueil .pile-large > .carte.vu {
  transform: none;
  transition: opacity 520ms var(--courbe) var(--retard, 0ms),
              transform 520ms var(--courbe) var(--retard, 0ms);
  animation: respirer 13s ease-in-out 900ms infinite alternate;
}

.accueil .pile-large > .carte:nth-of-type(1).vu { animation-duration: 11s; }
.accueil .pile-large > .carte:nth-of-type(3).vu { animation-duration: 17s; }

@keyframes respirer {
  from { transform: translateY(-3px); }
  to   { transform: translateY(3px); }
}

/* La respiration s'arrete sous le doigt : on ne vise pas une cible mouvante. */
.accueil .pile-large > .carte.vu:hover,
.accueil .pile-large > .carte.vu:active { animation-play-state: paused; }

/*
  La reponse a l'appui.

  Sur un telephone il n'y a pas de survol : le seul retour possible est
  celui du doigt qui appuie. Un enfoncement de 1,5 %, le temps de l'appui.
  C'est peu, et c'est exactement ce qu'il faut : on doit le sentir sans
  jamais le remarquer.
*/
.bouton,
.choix,
.creneau,
.look,
.metier {
  transition-property: opacity, background-color, border-color, color, transform;
  transition-duration: var(--duree-court);
  transition-timing-function: var(--courbe);
}

.bouton:active,
.choix:active,
.creneau:active,
.look:active,
.metier:active { transform: scale(.985); }

/* Certains visiteurs demandent a leur systeme de couper les animations,
   souvent pour des raisons medicales. On respecte ce reglage. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}


/* ==========================================================================
   LE DOSSIER CLIENT, RANGE EN GROUPES

   Le probleme : tout etait sur une seule page. Les looks, les passages, le
   parrainage, les avis et les reglages de compte s'enchainaient bout a bout,
   et il fallait defiler cinq ecrans pour retrouver un code de parrainage.
   Beaucoup d'informations ne devient une page seulement quand on peut en
   regarder une partie a la fois.

   D'ou quatre groupes derriere une barre de segments, sur le modele des
   applications de suivi : un bandeau de statistiques qui ne bouge pas, puis
   un seul groupe visible en dessous. Ce qui ne change jamais reste en haut ;
   ce qu'on vient chercher se choisit.
   ========================================================================== */

/* --- La barre de groupes ------------------------------------------------- */

/*
  Elle defile horizontalement plutot que de passer a la ligne : quatre
  segments a plat sur un telephone de 375 px donneraient des mots coupes.
  Une barre qui deborde se comprend, une barre qui se casse non.
*/
.groupes {
  display: flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--filet);
  border-radius: var(--pilule);
  background: var(--creux);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.groupes::-webkit-scrollbar { display: none; }

.groupe-onglet {
  flex: 1 0 auto;
  white-space: nowrap;
  border: 0;
  border-radius: var(--pilule);
  padding: 10px 18px;
  background: transparent;
  color: var(--cendre);
  font-family: var(--corps);
  font-size: var(--t-petit);
  font-weight: var(--moyen);
  letter-spacing: 0;
  cursor: pointer;
  transition: background-color var(--duree-court) var(--courbe),
              color var(--duree-court) var(--courbe);
}

.groupe-onglet:hover { color: var(--encre); }

.groupe-onglet[aria-selected="true"] {
  background: var(--carte);
  color: var(--encre);
}

/* Le compteur d'avis en attente, colle au libelle de son segment. */
.groupe-pastille {
  display: inline-block;
  margin-left: 6px;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: var(--pilule);
  background: var(--encre);
  color: var(--os);
  font-size: 11px;
  font-weight: var(--demi);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.groupe-panneau { display: flex; flex-direction: column; gap: var(--v6); }

/*
  L'en-tete d'un groupe : un titre qui porte, une phrase qui explique.
  C'est la forme de l'application de reference, et elle vaut mieux que notre
  intitule en capitales tout seul : le titre dit ou on est, la phrase dit ce
  qu'on peut y faire.
*/
.groupe-tete { display: flex; flex-direction: column; gap: var(--v2); }
.groupe-titre { font-size: var(--t-h2); }

/* --- Les tuiles de statistiques ------------------------------------------ */

/*
  Deux par rangee, jamais une seule : c'est la grille qui fait lire ces
  quatre chiffres comme un tableau de bord et non comme une liste. En
  dessous de 300 px de large, elles passent a une colonne d'elles-memes.
*/
.tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--v3);
}

.tuile {
  display: flex;
  flex-direction: column;
  gap: var(--v1);
  padding: var(--v4);
  border-radius: var(--rayon-liste);
  border: 1px solid var(--bulle-bord);
  background: var(--bulle);
}

/*
  Le chiffre et son icone sur la meme ligne, le chiffre a gauche.

  Premier essai : l'icone en filigrane geant derriere la tuile. Elle passait
  au travers du chiffre, et un « 3 » traverse par une lame de ciseaux se lit
  moins bien qu'un « 3 ». Une icone doit occuper sa place, pas celle du
  contenu.
*/
.tuile-tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--v3);
  margin-bottom: var(--v1);
}

/* L'icone dans sa pastille, comme sur la reference : c'est le carre plein
   qui la pose, sans lui elle flotte. */
.tuile-icone {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: var(--rayon-petit);
  background: rgba(255, 255, 255, .06);
  color: var(--cendre);
}

.tuile-valeur {
  font-family: var(--affiche);
  font-weight: var(--moyen);
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: var(--serre-display);
  font-variant-numeric: tabular-nums;
  color: var(--encre);
}

.tuile-cle {
  font-size: var(--t-petit);
  font-weight: var(--moyen);
  color: var(--encre);
}

.tuile-note {
  font-size: var(--t-mention);
  line-height: 1.4;
  color: var(--cendre);
}

/* --- Le pied du dossier --------------------------------------------------
   Les reglages de compte ne sont pas un groupe : personne ne vient les
   chercher. Ils restent en bas, hors des segments, en petit. */
.dossier-pied {
  display: flex;
  flex-direction: column;
  gap: var(--v3);
  padding-top: var(--v5);
  border-top: 1px solid var(--filet);
}


/*
  Le dossier empile ses morceaux : en-tete, tuiles, rappel, barre de groupes,
  groupe ouvert, pied. C'est un conteneur rempli en script, donc il n'heritait
  d'aucun ecart et les blocs se touchaient.
*/
.dossier { display: flex; flex-direction: column; gap: var(--v6); }

/* La barre de groupes et son panneau forment un seul objet : l'ecart entre
   eux est plus court qu'entre deux blocs. */
.dossier .groupes { margin-bottom: calc(var(--v6) * -1 + var(--v5)); }


/*
  La barre d'onglets appartient a ce qu'elle commande : elle doit la toucher.
  L'ecart standard entre deux blocs de l'enveloppe (v8) la faisait flotter au
  milieu du vide, a 56 px du contenu qu'elle annonce.
*/
.enveloppe > .onglets { margin-bottom: calc(var(--v5) - var(--v8)); }


/* ==========================================================================
   L'EN-TETE DE L'ACCUEIL, ET SON MENU
   ========================================================================== */

/*
  Trois colonnes et non un alignement : une case vide a gauche, la marque au
  milieu, le bouton a droite. Les deux cases laterales ont la meme largeur,
  donc la marque tombe au centre de l'ECRAN et non au centre de ce qui reste
  une fois le bouton pose. C'est la difference entre centre et "a peu pres".

  Elle colle en haut. Avant elle ne portait qu'un nom et pouvait disparaitre ;
  elle porte maintenant la seule facon d'ouvrir le menu, et un menu qu'on ne
  peut atteindre qu'en remontant tout en haut n'est pas un menu.
*/
.entete-accueil {
  position: sticky;
  top: 0;
  /*
    AU DESSUS du panneau de menu, et c'est le point important.

    Le panneau couvre l'ecran entier ; a z-index plus haut que l'en-tete, il
    recouvrait la croix qui le ferme. Le test le disait sans ambiguite :
    elementFromPoint au centre du bouton renvoyait le panneau. Echap et les
    liens fermaient bien, mais taper la croix ne faisait rien, et c'est le
    geste que tout le monde essaie en premier.
  */
  z-index: 70;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-block: var(--v3);
  background: rgba(0, 0, 0, .78);
  backdrop-filter: var(--bulle-flou);
  -webkit-backdrop-filter: var(--bulle-flou);
  border-bottom: 1px solid var(--filet);
  /* Elle doit couvrir la gouttiere, sinon le contenu passe dans ses marges. */
  margin-inline: calc(var(--v5) * -1);
  padding-inline: var(--v5);
}

.entete-accueil .marque { justify-self: center; }
.entete-cale { display: block; }

/* --- Le bouton a trois traits ------------------------------------------- */

.menu-bouton {
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  /* La cible tactile fait 42 px alors que le dessin en fait 20 : on ne
     reduit jamais la zone touchable a la taille de ce qu'on y voit. */
  margin-right: -9px;
  padding: 0;
  border: 0;
  border-radius: var(--pilule);
  background: none;
  color: var(--encre);
  cursor: pointer;
}

.menu-traits {
  position: relative;
  display: block;
  width: 20px;
  height: 12px;
}

.menu-traits span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--duree) var(--courbe),
              opacity var(--duree-court) var(--courbe);
}

.menu-traits span:nth-child(1) { top: 0; }
.menu-traits span:nth-child(2) { top: 5.25px; }
.menu-traits span:nth-child(3) { top: 10.5px; }

/*
  Ouvert, les traits deviennent une croix : le meme bouton ferme ce qu'il a
  ouvert. Deux boutons pour deux sens obligeraient a en chercher un second.
*/
[aria-expanded="true"] .menu-traits span:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
[aria-expanded="true"] .menu-traits span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .menu-traits span:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }

/* --- Le panneau ---------------------------------------------------------- */

/*
  Il couvre l'ecran entier plutot que de descendre en tiroir. Sur un
  telephone, un tiroir laisse voir la page derriere et on lit deux choses a
  la fois ; en plein ecran, il n'y a qu'une decision a prendre.
*/
.menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--v2);
  padding: var(--v9) var(--v5) var(--v8);
  background: rgba(10, 10, 11, .86);
  backdrop-filter: var(--bulle-flou);
  -webkit-backdrop-filter: var(--bulle-flou);
  overflow-y: auto;
  animation: menu-entre var(--duree) var(--courbe);
}

@keyframes menu-entre {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.menu-lien {
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: var(--v4);
  align-items: baseline;
  padding: var(--v4) 0;
  border-bottom: 1px solid var(--filet);
  text-decoration: none;
  color: inherit;
}

.menu-lien:last-child { border-bottom: 0; }

.menu-rang {
  font-family: var(--voix);
  font-size: var(--t-petit);
  color: var(--sourd);
}

/* Les intitules du menu sont en Manrope, pas en condensee : sur la
   reference, le menu est en sans normale et seul le titre de section est en
   condensee grasse. Un menu en Anton crierait plus fort que la page. */
.menu-nom {
  font-family: var(--affiche);
  font-size: clamp(26px, 7vw, 36px);
  line-height: 1.1;
  color: var(--encre);
}

.menu-note {
  grid-column: 2;
  margin-top: var(--v1);
  font-size: var(--t-petit);
  color: var(--cendre);
}

.menu-lien:hover .menu-nom,
.menu-lien:focus-visible .menu-nom { color: #ffffff; }

/* Le corps ne defile plus derriere le panneau ouvert. */
body.menu-ouvert { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .menu { animation: none; }
  .menu-traits span { transition: none; }
}


/* L'en-tete de l'accueil touche le haut de l'ecran : la gouttiere haute de
   l'enveloppe la faisait flotter 24 px plus bas, ce qui se lit comme un
   defaut d'alignement sur un telephone a encoche. */
.accueil { padding-block-start: 0; }

/*
  L'en-tete collante recouvre ce sur quoi une ancre atterrit : sans cette
  marge, cliquer « Me faire couper » amenait le titre de la carte SOUS
  l'en-tete, et on tombait au milieu du paragraphe. La valeur est la hauteur
  de l'en-tete plus une respiration.
*/
.accueil [id] { scroll-margin-top: calc(67px + var(--v5)); }

/* Et le defilement est doux : un saut sec ne dit pas ou on a atterri. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}





/*
  L'indice de defilement, au bas de la premiere scene. Il ne clignote pas et
  ne rebondit pas : il descend de six pixels et remonte, lentement, en boucle.
  Un ecran plein se lit comme une page entiere ; sans ce mouvement, une part
  des visiteurs ne defile jamais.

  Ses regles avaient disparu avec l'ancien portail : la classe restait dans le
  HTML, plus rien ne la dessinait.
*/
.portail-suite {
  display: inline-flex;
  align-items: center;
  gap: var(--v2);
  margin-top: var(--v2);
  font-size: var(--t-mention);
  font-weight: var(--demi);
  letter-spacing: var(--interlettre);
  text-transform: uppercase;
  color: var(--cendre);
}

.portail-fleche {
  display: inline-block;
  animation: respirer-fleche 2.4s var(--courbe) infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .portail-fleche { animation: none; }
}


/*
  L'indice de defilement, au bas de la premiere scene. Il ne clignote pas et
  ne rebondit pas : il descend de six pixels et remonte, lentement, en boucle.
  Un ecran plein se lit comme une page entiere ; sans ce mouvement, une part
  des visiteurs ne defile jamais.

  Ses regles avaient disparu avec l'ancien portail : la classe restait dans le
  HTML, plus rien ne la dessinait.
*/
.portail-suite {
  display: inline-flex;
  align-items: center;
  gap: var(--v2);
  margin-top: var(--v2);
  font-size: var(--t-mention);
  font-weight: var(--demi);
  letter-spacing: var(--interlettre);
  text-transform: uppercase;
  color: var(--cendre);
}

.portail-fleche {
  display: inline-block;
  animation: respirer-fleche 2.4s var(--courbe) infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .portail-fleche { animation: none; }
}


/* ==========================================================================
   L'ACCROCHE : la video, puis le titre, puis les trois metiers
   ========================================================================== */

/*
  Le fond de cette section est du NOIR PUR, pas la toile du site.

  La video a elle-meme un fond noir absolu. Posee sur le #121214 de la page,
  son cadre se decoupait comme un rectangle plus sombre au milieu de l'ecran.
  En passant la section au meme noir, l'image n'a plus de bord : la chaise a
  l'air posee dans la page et non collee dessus.

  Elle sort de la gouttiere pour tenir toute la largeur, et remonte sous
  l'en-tete collante : c'est la premiere chose qu'on voit.
*/
/*
  Plus de fond sur cette section : c'est la PAGE qui a pris celui de la
  video. Un fond local, meme du bon noir, laissait un bord la ou il
  s'arretait ; et un bord, c'est exactement ce qui fait "colle".
*/
.film {
  position: relative;
  margin-inline: calc(var(--v5) * -1);
  padding: var(--v5) 0 var(--v8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--v6);
}

.film-video {
  display: block;
  width: 100%;
  height: auto;
  /* Le rapport est ecrit pour que la place soit reservee AVANT que le
     fichier n'arrive : sans lui, la page saute de trois cents pixels au
     moment ou la video se charge, et le titre se derobe sous le doigt.
     Mesure sur le fichier : 1176 x 784, soit 3/2 exactement. */
  aspect-ratio: 3 / 2;
  object-fit: cover;

  /*
    LES BORDS SE DISSOLVENT.

    Mettre la page au noir de la video supprime la difference de couleur,
    mais pas le bord : la video a sa propre lumiere, un halo en haut et un
    sol eclaire en bas, et ces deux zones s'arretent net sur le cadre. Le
    masque les fait fondre dans la page au lieu de les couper.

    Deux degrades croises, un vertical et un horizontal, combines par
    intersection. Si un navigateur ne sait pas les croiser, seul le premier
    s'applique : le haut et le bas fondent quand meme, et rien n'est casse.
  */
  --fondu: linear-gradient(to bottom, transparent 0%, #000 11%, #000 84%, transparent 100%),
           linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-image: var(--fondu);
          mask-image: var(--fondu);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/*
  LE SEUL TEXTE DE L'ACCROCHE.

  En Prata, comme la marque : l'en-tete, la chaise et cette ligne forment un
  seul bloc de marque, et une deuxieme police au milieu le casserait en deux.
  Meme approche large que le logo, pour la meme raison : c'est elle qui donne
  le calme.
*/
.film-titre {
  margin: 0;
  padding-inline: var(--v5);
  text-align: center;
  font-family: var(--logo);
  font-weight: 400;
  font-size: clamp(22px, 6.4vw, 38px);
  line-height: 1.15;
  letter-spacing: var(--logo-ecart);
  color: var(--encre);
}

/*
  Son entree. Elle n'est armee que si le script tourne : sans .anime-prete,
  la regle ne s'applique pas et le titre est simplement la. C'est la meme
  precaution que partout ailleurs sur le site, et elle vaut double ici,
  puisque c'est le seul texte de l'ecran.
*/
.anime-prete .film-titre {
  opacity: 0;
  transform: translateY(14px);
}

.anime-prete .film-titre-vu {
  opacity: 1;
  transform: none;
  transition: opacity 900ms var(--courbe), transform 900ms var(--courbe);
}

/*
  LE RYTHME DES TROIS METIERS.

  Elles arrivent l'une apres l'autre, et l'ecart entre deux est cale sur la
  video : son tour complet dure cinq secondes, soit environ 1,6 s par tiers
  de rotation. Un dixieme de ce tiers, 160 ms, donne une cadence qui se sent
  sans se compter. Le reglage general du site est a 70 ms, ce qui les faisait
  arriver presque ensemble.

  La transition reprend la duree et la courbe du titre : une page ou chaque
  element a son propre tempo n'a pas de tempo.
*/
.anime-prete .metiers > .carte.vu { transition-duration: 900ms; }
.anime-prete .metiers > .carte:nth-of-type(1).vu { transition-delay: 0ms; }
.anime-prete .metiers > .carte:nth-of-type(2).vu { transition-delay: 160ms; }
.anime-prete .metiers > .carte:nth-of-type(3).vu { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .anime-prete .film-titre { opacity: 1; transform: none; }
  .anime-prete .metiers > .carte.vu { transition-delay: 0ms; }
}


/* ==========================================================================
   L'AMBIANCE : un seul projecteur, et plus aucune couleur

   Les lueurs bleu-violet ont saute. Elles dataient du systeme Revolut et se
   battaient avec les photos d'Almamy, qui sont en noir et blanc pur. Ce
   n'etait pas une question de bord, c'etaient deux mondes de couleur qui se
   rencontraient.

   Ce qui reste : une remontee de blanc tres faible en bas d'ecran, pour que
   le noir ne soit pas plat. La lumiere vient desormais du halo des titres et
   des photos elles-memes, plus du fond.

   LES SURFACES MONTENT A 13 %. Mesure sur la version precedente : a 5,5 %
   sur du noir pur, une carte tombait a 1,09 de contraste avec la page et
   disparaissait. A 13 % elle remonte a 1,30, son filet a 1,44. C'est le fond
   qui a bouge, pas la bulle, mais c'est la bulle qui paie.
   ========================================================================== */

body[data-ambiance] {
  --ambiance: radial-gradient(130% 62% at 50% 112%, rgba(255, 255, 255, .06) 0%, transparent 64%);
  --bulle:      rgba(255, 255, 255, .13);
  --bulle-bord: rgba(255, 255, 255, .16);
}


/* ==========================================================================
   L'ACCUEIL : cinq sections, cinq gestes
   ==========================================================================

   Le brief interdit les blocs empiles identiques. Chaque section a donc sa
   composition ET son mouvement propre :

     ouverture  photo plein cadre, le titre monte ligne par ligne
     orbite     visuel colle, la pellicule tourne sous le doigt
     metiers    trois formes differentes, les chiffres se comptent
     passage    video pleine largeur, aucune information, une respiration
     reserver   le seul moment ou le site demande quelque chose
   ========================================================================== */

/* --- LA VOIX : le titre en condensee grasse ------------------------------ */

/*
  Anton, capitales, tres serree, avec le halo. C'est la signature visuelle
  des deux references : le texte ne se pose pas sur le noir, il l'eclaire.

  line-height a .88 : une condensee grasse a des capitales hautes et pas de
  jambages ; a 1 les lignes flottent. Le resserrement negatif compense
  l'espacement large d'Anton en capitales.
*/
.titre {
  margin: 0;
  font-family: var(--voix);
  font-weight: 400;
  /*
    COMMENT MESURER CE TITRE, parce que je m'y suis trompe une fois.

    Les lignes vivent dans un overflow:hidden : un titre trop large serait
    rogne EN SILENCE, sans erreur et sans debordement de page. Il faut donc
    le mesurer, et le mesurer contre le bon cadre.

    Le titre est un enfant de flex avec align-items:flex-start, donc il se
    RETRECIT SUR SON TEXTE. Comparer sa largeur a sa propre boite donne
    toujours zero de marge, et fait croire a un rognage imminent. Le cadre
    reel est la zone de contenu du PARENT.

    Releve correct sur un telephone de 375 : "Ton personal" occupe 290 px
    dans un cadre de 327, soit 37 px de marge. La ligne la plus serree de la
    page est "coupes." dans l'histoire, a 42 px. Rien n'est rogne.
  */
  font-size: clamp(46px, 15vw, 128px);
  line-height: .88;
  letter-spacing: -.012em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: var(--halo);
}

.titre.petit { font-size: clamp(36px, 11vw, 82px); }

/*
  L'ENTREE LIGNE PAR LIGNE. Chaque ligne est dans un span, et chaque span
  monte derriere un masque. C'est le geste des deux references : le titre ne
  se fond pas, il se leve.

  Le masque est un overflow sur un bloc intermediaire pose par le script :
  sans lui, la ligne monterait par dessus la precedente au lieu de sortir de
  dessous.
*/
.titre[data-lignes] span {
  display: block;
  overflow: hidden;
}

.anime-prete .titre[data-lignes] span > i {
  display: block;
  font-style: normal;
  transform: translateY(105%);
}

.anime-prete .titre[data-lignes].vu span > i {
  transform: none;
  transition: transform 900ms cubic-bezier(.16, 1, .3, 1);
}

.anime-prete .titre[data-lignes].vu span:nth-child(2) > i { transition-delay: 110ms; }
.anime-prete .titre[data-lignes].vu span:nth-child(3) > i { transition-delay: 220ms; }

.sous-titre {
  margin: 0;
  max-width: 42ch;
  font-size: var(--t-corps);
  line-height: 1.6;
  color: var(--cendre);
}

/* L'intitule d'un groupe. Un seul sur toute la page : la reference en met
   partout, c'est ce qui rend un site templatise. */
.intitule {
  font-size: var(--t-mention);
  font-weight: var(--demi);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sourd);
}

/* Le rang d'un metier. En condensee, pour qu'il appartienne a la voix. */
.rang {
  display: block;
  font-family: var(--voix);
  font-size: var(--t-petit);
  letter-spacing: .1em;
  color: var(--sourd);
}

/* --- Le bouton contourne, celui de la reference -------------------------- */
.bouton.contour {
  width: auto;
  padding: 15px var(--v6);
  background: none;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 0 22px rgba(255, 255, 255, .10);
}
.bouton.contour:hover { border-color: #fff; box-shadow: 0 0 30px rgba(255, 255, 255, .20); }

/* --- 1. L'OUVERTURE ------------------------------------------------------ */

.ouverture {
  position: relative;
  margin-inline: calc(var(--v5) * -1);
  min-height: calc(100svh - var(--v9));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.ouverture-fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Le sujet est en haut de l'image : on cadre dessus, pas au centre. */
  object-position: 50% 32%;
  /* Les bords se dissolvent. La photo a son propre projecteur ; sans fondu,
     sa lumiere s'arrete net sur le cadre et l'image parait collee. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 74%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 74%, transparent 100%);
}

.ouverture-texte {
  position: relative;
  width: 100%;
  padding: var(--v9) var(--v5) var(--v8);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--v4);
}

/* --- 2. L'ORBITE --------------------------------------------------------- */

/*
  Deux hauteurs d'ecran de defilement pour un visuel colle : c'est ce trajet
  qui sert de piste de lecture a la pellicule. Plus la section est haute,
  plus la rotation est lente.
*/
.orbite {
  position: relative;
  height: 220svh;
  margin-inline: calc(var(--v5) * -1);
}

.orbite-colle {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.orbite-toile,
.orbite-repli {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--noir);
}

/* L'image de repli est SOUS la toile et disparait des que celle-ci peint.
   Sans elle, une pellicule qui n'arrive pas laisse un rectangle noir. */
.orbite-repli { z-index: 0; }
.orbite-toile { z-index: 1; opacity: 0; transition: opacity 300ms var(--courbe); }
.orbite-toile.peinte { opacity: 1; }

.orbite-voile {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top,
    rgba(0,0,0,.92) 0%, rgba(0,0,0,.72) 26%, rgba(0,0,0,.30) 58%, rgba(0,0,0,0) 100%);
}

.orbite-texte {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 0 var(--v5) var(--v8);
  display: flex;
  flex-direction: column;
  gap: var(--v4);
  /* Le texte monte a CONTRE-SENS du defilement : deux plans, deux vitesses.
     --avance est pose par le script, de 0 a 1 sur la traversee. */
  transform: translateY(calc(var(--avance, 0) * -8vh));
}

/* --- 3. LES TROIS METIERS ------------------------------------------------ */

.metiers {
  display: flex;
  flex-direction: column;
  gap: var(--v9);
}

.metier { display: flex; flex-direction: column; gap: var(--v5); margin: 0; }
.metier-corps { display: flex; flex-direction: column; align-items: flex-start; gap: var(--v4); }
.metier-corps .bouton { margin-top: var(--v2); }

/* 01 : la photo porte la section, le texte se pose dessous. */
.metier-image {
  width: 100%;
  border-radius: var(--rayon);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* 02 : le texte a gauche, les chiffres a droite des que la place existe. */
.metier-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: var(--v5) var(--v4);
  padding-top: var(--v5);
  border-top: 1px solid var(--filet);
}

.chiffre { display: flex; flex-direction: column; gap: var(--v1); }

.chiffre-valeur {
  font-family: var(--voix);
  font-size: clamp(42px, 13vw, 72px);
  line-height: .9;
  letter-spacing: -.01em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: var(--halo);
}

.chiffre-cle {
  font-size: var(--t-mention);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cendre);
}

@media (min-width: 780px) {
  .metier-un   { flex-direction: row-reverse; align-items: center; gap: var(--v8); }
  .metier-un > * { flex: 1 1 0; min-width: 0; }
  .metier-deux { flex-direction: row; align-items: flex-start; gap: var(--v8); }
  .metier-deux > * { flex: 1 1 0; min-width: 0; }
  .metier-deux .metier-chiffres { border-top: 0; padding-top: 0; }
  .metier-trois .metier-corps { max-width: 32ch; }
}

/* --- 4. LE PASSAGE ------------------------------------------------------- */

.passage {
  margin-inline: calc(var(--v5) * -1);
  overflow: hidden;
}

.passage-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--noir);
  /* Meme fondu que l'ouverture, pour la meme raison. */
  --f: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%),
       linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: var(--f);
          mask-image: var(--f);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

@media (prefers-reduced-motion: reduce) {
  .anime-prete .titre[data-lignes] span > i { transform: none; }
  .orbite-texte { transform: none; }
}


/* --- 5. L'HISTOIRE ------------------------------------------------------- */

/*
  La cinquieme composition, et la plus nue de la page.

  Les quatre precedentes portent chacune un visuel : une photo plein cadre,
  une pellicule, une video, des compteurs. Celle-ci n'a que du texte, et
  c'est un choix : apres quatre sections qui montrent, une section qui dit
  simplement les choses se lit comme une parole et non comme un argument.

  Le titre est cale a gauche, le corps decale vers la droite des que la place
  existe. C'est ce decalage qui empeche le bloc de ressembler aux sections
  centrees que le brief interdit.
*/
.histoire {
  display: flex;
  flex-direction: column;
  gap: var(--v6);
  padding-block: var(--v8);
  border-top: 1px solid var(--filet);
}

.histoire-corps {
  display: flex;
  flex-direction: column;
  gap: var(--v5);
}

/*
  La derniere phrase porte le positionnement : moins de monde, plus de temps
  par tete. Elle est en blanc plein alors que les deux autres sont en gris,
  parce que c'est la seule que le visiteur doit retenir s'il n'en retient
  qu'une.
*/
.histoire-chute {
  color: var(--encre);
  border-left: 1px solid rgba(255, 255, 255, .28);
  padding-left: var(--v5);
}

@media (min-width: 780px) {
  .histoire {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--v9);
  }
  .histoire > .titre { flex: 0 0 38%; }
  .histoire-corps    { flex: 1 1 0; min-width: 0; padding-top: var(--v2); }
}


/*
  LE TITRE DE L'HISTOIRE EST PLUS GRAND QUE LES AUTRES, et c'est le seul.

  "7 000" et "coupes." font deux et un mots. A la taille des autres titres il
  occupait 89 px sur une colonne de 327 : le chiffre le plus fort du site
  avait la presence d'un sous-titre.

  La taille est calee sur la ligne la plus LONGUE, pas sur la plus courte :
  "coupes." fait 2,93 fois sa taille de police en largeur, donc 327 px de
  colonne autorisent 111 px. On s'arrete a 97 pour garder de la marge, parce
  que les lignes vivent dans un overflow:hidden et qu'un titre rogne ne
  previent pas.
*/
.histoire > .titre { font-size: clamp(52px, 26vw, 112px); }


/* --- LE BOUTON WHATSAPP -------------------------------------------------

   Vert WhatsApp, et c'est la seule couleur de marque du site.

   Le systeme interdit la couleur partout ailleurs, et cette regle tient :
   celle-ci n'est pas decorative, elle dit QUEL outil s'ouvre. Un bouton
   blanc disant "Continuer sur WhatsApp" demanderait de lire pour comprendre ;
   celui-la se reconnait avant d'etre lu.

   LE VERT EST ASSOMBRI, et voici le calcul exact.

   Le vert officiel de WhatsApp, #25D366, porte du texte blanc a 1,98 de
   contraste. C'est illisible et ce n'est pas discutable.

   Premier remplacement : #1ea65a, mesure a 3,15. J'ai cru que ca passait,
   en me disant que 3 suffit pour du texte large. C'etait faux deux fois :
   la valeur reelle est 3,15 et non 3,52 comme je l'avais ecrit, et surtout
   le libelle de ce bouton est a 14 px, donc ce n'est PAS du texte large.
   Le seuil applicable est 4,5.

   Retenu : #178046, mesure a 4,99 avec du blanc. Il reste reconnaissable
   comme le vert de WhatsApp et il est lisible.
*/
.bouton.whatsapp {
  width: auto;
  background: #178046;
  color: #ffffff;
  border: 0;
  box-shadow: 0 0 26px rgba(23, 128, 70, .30);
}

/*
  Le survol n'ECLAIRCIT PAS le fond. L'eclaircir faisait tomber le contraste
  du libelle de 4,99 a 4,03, donc sous le seuil, juste au moment ou le doigt
  s'en approche. Seule la lueur augmente : elle ne touche pas au texte.
*/
.bouton.whatsapp:hover {
  box-shadow: 0 0 38px rgba(23, 128, 70, .50);
}


/* ==========================================================================
   LE PIED DE L'ACCUEIL : les reseaux
   ==========================================================================
   Ses clients viennent de TikTok. Ces deux liens ne sont pas du decor : ils
   sont le chemin par lequel on verifie qu'il coupe vraiment avant de
   reserver. D'ou leur place, tout en bas, la ou on arrive quand on a tout lu
   et qu'il reste un doute.
   ========================================================================== */

.pied {
  display: flex;
  flex-direction: column;
  gap: var(--v5);
  padding-top: var(--v7);
  border-top: 1px solid var(--filet);
}

.pied-reseaux { display: flex; flex-wrap: wrap; gap: var(--v3); }

.reseau {
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
  gap: var(--v1);
  padding: var(--v4) var(--v5);
  border-radius: var(--rayon-liste);
  border: 1px solid var(--bulle-bord);
  background: var(--bulle);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duree-court) var(--courbe);
}

.reseau:hover { border-color: rgba(255, 255, 255, .34); }

.reseau-nom {
  font-family: var(--voix);
  font-size: var(--t-h3);
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--encre);
}

.reseau-pseudo { font-size: var(--t-petit); color: var(--cendre); }

/* ==========================================================================
   LA PAGE FORMATIONS : les etapes et les avis
   ========================================================================== */

/*
  LES QUATRE ETAPES. Une liste numerotee, pas quatre cartes alignees : la
  numerotation dit qu'il y a un ordre, et c'est exactement l'information que
  cherche quelqu'un qui n'a jamais achete de formation.

  Le filet vertical relie les etapes entre elles. Il s'arrete a la derniere,
  sinon il pend dans le vide.
*/
.etapes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.etape {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--v4);
  padding-bottom: var(--v6);
  margin-bottom: 0;
}

.etape:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 21px;
  top: 28px;
  bottom: 0;
  width: 1px;
  background: var(--filet);
}

.etape-rang {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 28px;
  font-family: var(--voix);
  font-size: var(--t-petit);
  letter-spacing: .06em;
  color: var(--cendre);
  background: var(--os);
}

.etape-corps { display: flex; flex-direction: column; gap: var(--v2); padding-top: 2px; }

.etape-titre {
  font-family: var(--voix);
  font-size: clamp(22px, 6vw, 30px);
  line-height: 1.05;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--encre);
}

/*
  LES AVIS. Le bloc entier porte l'attribut hidden tant que la liste est
  vide : une rubrique "Avis" sans avis montre que personne n'a rien dit.
*/
.avis-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--v4);
}

.avis-carte {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--v4);
  padding: var(--v5);
  border-radius: var(--rayon-liste);
  border: 1px solid var(--bulle-bord);
  background: var(--bulle);
}

.avis-texte {
  margin: 0;
  font-size: var(--t-corps);
  line-height: 1.6;
  color: var(--encre);
}

.avis-signature {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--t-petit);
  font-weight: var(--demi);
  color: var(--encre);
}

.avis-detail { font-weight: var(--regulier); color: var(--cendre); }