/* =======================================================================
   ECRANS INTERNES AlloLib — couche posee PAR-DESSUS allolib.css
   -----------------------------------------------------------------------
   Quatre ecrans, tous derriere authentification : le portail client, la
   console de la Direction, le cursus de formation et l'examen final.
   Ils portent « nv2 » comme le reste du site — polices, jetons, boutons
   et champs viennent d'allolib.css — mais leur mise en page leur
   appartient, et elle est bornee par le marqueur de chaque page.
   POURQUOI UN FICHIER SEPARE : ces 77 Ko n'ont rien a faire dans la
   feuille que telechargent les 52 pages publiques. Aucun visiteur
   n'ouvrira une console interne. Les anciennes feuilles separees ont
   disparu ; celle-ci n'est pas leur retour : elle ne sert QUE ces
   quatre pages, et chaque regle y est prefixee.
   Posee le 18/09/2026, lot de cloture de la refonte visuelle.
   ======================================================================= */

/* =============================================================================
   FRAGMENT A — deux ecrans applicatifs passes sur le socle « nv2 »
   -----------------------------------------------------------------------------
   D'OU VIENT CE FICHIER
   Il rassemble tout ce qui etait auparavant ecrit EN LIGNE dans deux pages, ou
   charge par deux feuilles qui vont etre archivees :

     1. les deux blocs <style> de espace-client.html (servie a /portail-client) ;
     2. la part de /marque-allolib.css REELLEMENT utilisee par ces deux ecrans
        (les regles mortes n'ont pas ete recopiees) ;
     3. les 153 attributs style= de plateforme-interne.html (servie a /direction)
        et les 21 de espace-client.html, devenus des classes utilitaires.

   Aucune regle de /polices/polices.css n'est reprise : les deux polices sont
   deja declarees dans allolib.css (figtree-400.woff2 en « Figtree »,
   spline-sans-mono-400.woff2 en « Spline Sans Mono »).

   PORTEE
   Rien ici ne s'applique a une page de site. Chaque regle est bornee a la page
   qui l'a fournie, par un marqueur pose sur son <body> :
     .nv2-client    -> espace-client.html
     .nv2-direction -> plateforme-interne.html
     .nv2-espaces   -> les deux

   OU LE COLLER — L'ORDRE COMPTE
   APRES allolib.css, et AVANT /plateforme/plateforme.css. La section 1
   neutralise des regles du socle vitrine a specificite EGALE : placee avant
   allolib.css elle ne servirait a rien, placee apres plateforme.css elle
   prendrait la main sur la console Direction au lieu de la lui laisser.
   ============================================================================= */


/* =============================================================================
   1. ISOLATION DU SOCLE VITRINE
   -----------------------------------------------------------------------------
   Poser « nv2 » sur ces deux <body> leur apporte les jetons, les polices et les
   champs — mais aussi des regles ecrites pour des pages de vente. Celles qui
   suivent sont les seules qui les atteignaient vraiment ; chacune est ramenee a
   la valeur que l'ecran avait AVANT la bascule. La liste a ete etablie en
   croisant les selecteurs de allolib.css avec les classes reellement presentes
   dans les deux pages, pas a l'oeil.
   ============================================================================= */

/* Corps de page : « body.nv2 » impose 17 px / 1.62 au socle, les deux consoles
   travaillent en 15 px. Pour la Direction, le corps de plateforme.css (un
   simple « body ») perdrait contre cette regle a une classe : on le rappelle
   donc ici a l'identique, avec le marqueur. */
/* (l'espace client reprend son propre « body » en section 3.) */
body.nv2-direction{font-family:'Figtree',system-ui,sans-serif;color:var(--texte);
  background:var(--brume);line-height:1.55;font-size:15px;-webkit-font-smoothing:antialiased}

/* Titres : le socle les pousse a 900 et jusqu'a 4,2 rem — une console n'a pas
   de titre d'affiche. On revient aux tailles du navigateur et au poids 500 des
   deux feuilles applicatives. Specificite volontairement EGALE a celle du
   socle : plateforme.css, chargee ensuite, garde ainsi le dernier mot sur
   « .topbar h1 », « .bloc-tete h3 », etc. */
.nv2-espaces h1,.nv2-espaces h2,.nv2-espaces h3,.nv2-espaces h4{
  font-family:'Figtree',system-ui,sans-serif;font-weight:500;letter-spacing:-.01em;
}
.nv2-client h1,.nv2-client h2,.nv2-client h3,.nv2-client h4{line-height:1.12;color:var(--nuit)}
.nv2-direction h1,.nv2-direction h2,.nv2-direction h3,.nv2-direction h4{line-height:1.14;color:var(--nuit)}
.nv2-espaces h1{font-size:2em}
.nv2-espaces h2{font-size:1.5em}
.nv2-espaces h3{font-size:1.17em}
.nv2-espaces h4{font-size:1em}

/* Le socle pose « form{display:grid;gap:14px} » pour ses formulaires de vente.
   Les sept formulaires des deux consoles etaient en flux normal : la grille
   ajoutait 14 px entre chaque enfant et bloquait les elements en ligne.
   « :where() » ramene volontairement la specificite a celle d'un element nu :
   cette feuille passant apres allolib.css, elle l'emporte — et plateforme.css,
   chargee ensuite, garde le dernier mot sur ses propres formulaires. */
:where(.nv2-espaces) form{display:block;gap:normal}

/* Regle de dosage pour tout ce qui suit : chaque neutralisation pese EXACTEMENT
   le poids de la regle du socle qu'elle annule, jamais plus. Comme cette
   feuille est chargee apres allolib.css, l'egalite suffit a l'emporter — et
   plateforme.css, chargee ensuite, garde le dernier mot sur ses propres
   ecrans. « :where() » sert a ne pas compter le marqueur dans ce poids. */

/* « .champ » existe des deux cotes, mais le socle le dessine pour un formulaire
   pose sur fond marine : etiquette en capitales machine, champ translucide,
   options noires. Sur fond clair, le texte devenait presque invisible. */
:where(.nv2-espaces) .champ{display:revert;gap:normal}
:where(.nv2-espaces) .champ label{font-family:inherit;letter-spacing:normal;text-transform:none}
:where(.nv2-espaces) .champ select{width:auto;padding:revert;border:revert;border-radius:revert;
  background:revert;color:revert;font-family:inherit;font-size:inherit}
:where(.nv2-espaces) .champ select option{background:revert;color:revert}
:where(.nv2-espaces) .champ input::placeholder{color:#9AA7B4}
:where(.nv2-espaces) .champ input:focus-visible,
:where(.nv2-espaces) .champ select:focus-visible{outline:3px solid #0A6E61;outline-offset:2px}

/* « .encart » : sur le site c'est une bande de renvoi en pleine largeur ; dans
   les deux consoles c'est un pave marine. On retire la mise en flex, le filet
   et la marge haute du socle, le reste vient de la feuille de l'ecran. */
:where(.nv2-espaces) .encart{margin-top:0;border:0;display:block;gap:normal;
  align-items:normal;flex-wrap:nowrap}
:where(.nv2-espaces) .encart p{max-width:none;font-size:inherit}

/* « .duo » : deux colonnes centrees sur le site, simple empilement ici (sauf
   dans « .form-agent », ou plateforme.css le reprend juste apres). */
:where(.nv2-espaces) .duo{display:block;grid-template-columns:none;gap:normal;
  align-items:normal;margin-top:0}

/* Pictogrammes : le socle les repeint en vert accent — la pastille ET le trace
   a l'interieur — et transforme la pastille en boite. Dans une navigation
   marine, une icone suit la couleur du lien qui la porte. Ces deux regles
   portent le marqueur en clair (et non dans « :where() ») parce que les regles
   du socle qu'elles annulent comptent deja deux classes. */
.nv2-espaces .ic{color:inherit;display:revert}
.nv2-espaces .ico{color:inherit}
.nv2-espaces .ic>svg,.nv2-espaces .ico>svg{color:inherit}

/* « .ok » : sur le site c'est le panneau de confirmation d'un formulaire, et il
   est masque tant que l'envoi n'a pas abouti. Dans la console, « ok » est un
   etat de pastille — la masquer effacait l'information a l'ecran. */
.nv2-espaces .ok{display:revert;text-align:inherit;padding:revert}
.nv2-espaces .sig.ok{display:inline-block;padding:2px 8px}


/* =============================================================================
   2. PART DE /marque-allolib.css REPRISE — COMMUNE AUX DEUX ECRANS
   -----------------------------------------------------------------------------
   Seules figurent ici les regles dont un selecteur existe vraiment dans l'une
   ou l'autre page. Tout le reste de cette feuille (hero, navigation vitrine,
   cartes de services, bandeau d'appel, contrastes de fonds fonces, finition
   corporate, vignettes de secteurs, `hr`, `abbr`) ne rencontrait aucun element
   de ces deux ecrans et n'est pas recopie.

   POURQUOI « :where() » PARTOUT
   Cette feuille etait un PLANCHER : son en-tete disait que ses selecteurs
   restaient volontairement de faible specificite pour qu'une regle de page
   l'emporte toujours. Borner une regle avec « .nv2-espaces X » lui ajouterait
   une classe et retournerait ce rapport — les boutons de la console Direction
   passaient ainsi de 0,82 rem a 15 px. « :where() » borne la regle a ces deux
   pages sans rien ajouter a son poids : elle reste exactement le plancher
   qu'elle etait.
   ============================================================================= */

/* Jetons : seuls les quatre encore lus par les regles ci-dessous sont repris.
   Ils sont poses sur le <body> et non sur :root, pour rester bornes a la page. */
body.nv2-espaces{
  --al-encre:#0B1A2E;
  --al-or:#12B39F;
  --al-texte:#26333F;
  --al-transition:180ms cubic-bezier(.4, 0, .2, 1);
  color-scheme:light;
  accent-color:#12B39F;
}

/* L'axe optique de Figtree ne s'active pas tout seul : sans lui, un titre est
   rendu avec le dessin prevu pour du texte courant. */
:where(.nv2-espaces) h1,:where(.nv2-espaces) h2,:where(.nv2-espaces) h3,
:where(.nv2-espaces) h4,:where(.nv2-espaces) h5,:where(.nv2-espaces) h6{
  font-optical-sizing:auto;font-synthesis-weight:none;
}
/* Un titre qui laisse un mot seul sur la derniere ligne fait amateur. */
:where(.nv2-espaces) h1,:where(.nv2-espaces) h2,:where(.nv2-espaces) h3{text-wrap:balance}
:where(.nv2-espaces) p,:where(.nv2-espaces) li,:where(.nv2-espaces) dd{text-wrap:pretty}

/* Chiffres de meme chasse partout ou ils s'alignent en colonne ou changent sous
   les yeux : tableaux, codes, compteurs. Sans cela, un chronometre fait vibrer
   sa ligne a chaque seconde. */
:where(.nv2-espaces) table,:where(.nv2-espaces) code,:where(.nv2-espaces) pre,
:where(.nv2-espaces) kbd,:where(.nv2-espaces) samp,
:where(.nv2-espaces) [class*="chiffre"],:where(.nv2-espaces) [class*="compteur"],
:where(.nv2-espaces) [class*="montant"]{font-variant-numeric:tabular-nums}

:where(.nv2-espaces) ::selection{background:rgba(18,179,159,.28);color:var(--al-encre)}

/* Un champ non habille par sa page heritait de la police du systeme. Les cases
   a cocher et boutons radio sont exclus : leur imposer un remplissage les casse. */
:where(.nv2-espaces) input,:where(.nv2-espaces) select,
:where(.nv2-espaces) textarea,:where(.nv2-espaces) button{
  font-family:inherit;font-size:inherit;
}
:where(.nv2-espaces) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]),
:where(.nv2-espaces) select,:where(.nv2-espaces) textarea{
  transition:border-color var(--al-transition), box-shadow var(--al-transition);
}
:where(.nv2-espaces) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):focus,
:where(.nv2-espaces) select:focus,:where(.nv2-espaces) textarea:focus{
  border-color:var(--al-or);
  box-shadow:0 0 0 3px rgba(18,179,159,.16);
  outline:none;
}
:where(.nv2-espaces) textarea{resize:vertical}

/* Le remplissage automatique de Chrome repeint le champ en bleu pale et ignore
   background-color : seule une ombre interne le recouvre. C'est ce bleu qui
   abimait l'ecran de connexion de l'espace client. */
:where(.nv2-espaces) input:-webkit-autofill,
:where(.nv2-espaces) input:-webkit-autofill:hover,
:where(.nv2-espaces) input:-webkit-autofill:focus,
:where(.nv2-espaces) textarea:-webkit-autofill,
:where(.nv2-espaces) select:-webkit-autofill{
  -webkit-text-fill-color:var(--al-texte);
  -webkit-box-shadow:0 0 0 40px #fff inset;
  box-shadow:0 0 0 40px #fff inset;
  transition:background-color 6000s ease-in-out 0s;
  caret-color:var(--al-texte);
}
:where(.nv2-espaces) ::placeholder{color:#9AA7B4;opacity:1}
:where(.nv2-espaces) button,:where(.nv2-espaces) [role="button"],
:where(.nv2-espaces) summary{cursor:pointer}
:where(.nv2-espaces) button:disabled,:where(.nv2-espaces) input:disabled,
:where(.nv2-espaces) select:disabled,:where(.nv2-espaces) textarea:disabled{cursor:not-allowed}

/* Barres de defilement : celle du systeme, large et grise, jurait dans le
   bandeau marine de la navigation. */
:where(.nv2-espaces) *{scrollbar-width:thin;scrollbar-color:rgba(11,26,46,.22) transparent}
:where(.nv2-espaces) ::-webkit-scrollbar{width:10px;height:10px}
:where(.nv2-espaces) ::-webkit-scrollbar-track{background:transparent}
:where(.nv2-espaces) ::-webkit-scrollbar-thumb{
  background:rgba(11,26,46,.20);border-radius:99px;
  border:3px solid transparent;background-clip:content-box;
}
:where(.nv2-espaces) ::-webkit-scrollbar-thumb:hover{
  background:rgba(11,26,46,.34);background-clip:content-box;
}
/* Sur fond sombre, un pouce fonce est invisible. */
:where(.nv2-espaces) .sidebar ::-webkit-scrollbar-thumb,
:where(.nv2-espaces) .sidebar::-webkit-scrollbar-thumb{
  background:rgba(196,232,226,.26);background-clip:content-box;
}

/* Un lien souligne a ras du texte coupe les jambages des g, j, p, q. */
:where(.nv2-espaces) a{text-underline-offset:.18em;text-decoration-thickness:from-font}
/* Ancre atteinte par un lien interne : sans marge, l'entete collante la cache
   et l'on atterrit sur un titre invisible. */
:where(.nv2-espaces) :target{scroll-margin-top:96px}
.nv2-espaces{scroll-behavior:smooth}

/* Le logo n'est plus dessine dans la page : c'est un fichier SVG servi depuis
   /marque/. On le dimensionne par sa HAUTEUR et jamais par sa largeur — les
   attributs width/height du <img> portent les dimensions du FICHIER, pas
   celles a l'ecran. Cette regle remplace exactement les deux attributs style=
   retires des <img> de l'espace client, et elle etait deja la seule a habiller
   ceux de la console Direction. */
:where(.nv2-espaces) .login-logo img,:where(.nv2-espaces) .side-logo img{
  height:34px;width:auto;display:block;
}
@media (max-width:640px){
  :where(.nv2-espaces) .login-logo img,:where(.nv2-espaces) .side-logo img{height:28px}
}
/* Le nom de la societe est DANS l'image : l'espacement d'origine laissait un
   trou a droite du logo. */
:where(.nv2-espaces) .login-logo,:where(.nv2-espaces) .side-logo{gap:10px}

/* Mouvement reduit : on respecte le reglage du systeme. */
@media (prefers-reduced-motion:reduce){
  :where(.nv2-espaces),:where(.nv2-espaces) *,
  :where(.nv2-espaces) *::before,:where(.nv2-espaces) *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* Impression : contrats, fiches et factures sortent de ces deux ecrans. Sans
   ces regles, la navigation collante et les ombres partent au papier. */
@media print{
  body.nv2-espaces{background:#fff;font-size:11pt}
  :where(.nv2-espaces) header,:where(.nv2-espaces) nav,:where(.nv2-espaces) .btn,
  :where(.nv2-espaces) button,:where(.nv2-espaces) [class*="burger"],
  :where(.nv2-espaces) [class*="flottant"],:where(.nv2-espaces) [class*="appbar"],
  :where(.nv2-espaces) .barre{display:none !important}
  :where(.nv2-espaces) a[href^="http"]::after{content:" (" attr(href) ")";font-size:.82em;color:#555}
  :where(.nv2-espaces) h1,:where(.nv2-espaces) h2,:where(.nv2-espaces) h3{break-after:avoid-page}
  :where(.nv2-espaces) table,:where(.nv2-espaces) figure,
  :where(.nv2-espaces) blockquote{break-inside:avoid}
  :where(.nv2-espaces) *{box-shadow:none !important}
}

/* =============================================================================
   3. ESPACE CLIENT — les deux blocs <style> de espace-client.html
   -----------------------------------------------------------------------------
   Recopies tels quels, chaque selecteur borne a « .nv2-client ». Les regles qui
   visaient « body » ou « :root » sont devenues « body.nv2-client » : le
   marqueur EST le <body>, un descendant n'aurait rien trouve.
   ============================================================================= */

  /* `hidden` doit l emporter sur toute regle de mise en page : sans cela les
     deux formulaires s affichent ensemble. Piege rencontre le 2026-08-03. */
  .nv2-client [hidden]{ display:none !important; }
body.nv2-client{
  --encre:#0B1A2E;--nuit:#12283F;--porcelaine:#F4F8F7;--brume:#F8FBFA;--blanc:#FFFFFF;
  --or:#12B39F;--or-clair:#2ED3BC;--or-fonce:#0A6E61;
  --ligne:#E2EAE8;--ligne-nuit:rgba(196,232,226,.14);
  --vert:#2F6650;--rouge:#9A3F38;
  --texte:#26333F;--texte-doux:#61707F;--texte-marine:#B9C6D6;
  --radius:14px;
}
.nv2-client *{margin:0;padding:0;box-sizing:border-box}
body.nv2-client{font-family:'Figtree',system-ui,sans-serif;color:var(--texte);background:var(--brume);line-height:1.6;font-size:15px;-webkit-font-smoothing:antialiased}
.nv2-client h1,
.nv2-client h2,
.nv2-client h3,
.nv2-client h4{font-family:'Figtree',system-ui,sans-serif;color:var(--nuit);line-height:1.12;letter-spacing:-.01em;font-weight:500}
.nv2-client a{color:inherit;text-decoration:none}
.nv2-client .mono{font-family:'Spline Sans Mono',monospace}
.nv2-client button{font-family:inherit;cursor:pointer;border:none}

/* ===== LOGIN ===== */
.nv2-client #app{display:none}
body.nv2-client.logged #login{display:none}
body.nv2-client.logged #app{display:flex;min-height:100vh}
.nv2-client .login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 80% 10%,#173250 0%,var(--encre) 55%);padding:24px}
.nv2-client .login-card{background:var(--blanc);border-radius:20px;padding:44px;width:100%;max-width:420px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6);border:1px solid rgba(196,232,226,.5)}
.nv2-client .login-logo{display:flex;align-items:center;gap:11px;font-family:'Figtree',sans-serif;font-weight:600;font-size:1.6rem;color:var(--nuit);margin-bottom:6px}
.nv2-client .login-pastille{width:36px;height:36px;border-radius:50%;background:var(--encre);display:grid;place-items:center;color:var(--or);border:1px solid var(--or)}

.nv2-client .login-card h2{font-size:1.5rem;margin-bottom:6px}
.nv2-client .login-card .sous{color:var(--texte-doux);font-size:.92rem;margin-bottom:24px}
.nv2-client .champ{margin-bottom:15px}
.nv2-client .champ label{display:block;font-size:.82rem;font-weight:600;color:var(--nuit);margin-bottom:7px}
.nv2-client .champ input{width:100%;font-family:inherit;font-size:.95rem;padding:12px 14px;border:1px solid var(--ligne);
  border-radius:11px;background:var(--porcelaine);color:var(--texte);transition:border-color .18s,box-shadow .18s,background .18s}
.nv2-client .champ input:focus{outline:none;border-color:var(--or);box-shadow:0 0 0 3px rgba(18,179,159,.2);background:#fff}
.nv2-client #login .champ input[aria-invalid="true"]{border-color:var(--rouge);background:#fff;
  box-shadow:0 0 0 3px rgba(154,63,56,.14)}
.nv2-client .champ-erreur{color:var(--rouge);font-size:.88rem;font-weight:500;line-height:1.45;margin-top:6px}
.nv2-client .login-actions{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:4px}
.nv2-client .login-action{background:none;color:var(--texte-doux);font-size:.86rem;text-decoration:underline;
  padding:7px 3px;border-radius:6px}
.nv2-client .login-action:hover{color:var(--nuit)}
.nv2-client .login-action:disabled{color:#8B969F;cursor:default;text-decoration:none}
.nv2-client .btn-carte{background:var(--or);color:var(--encre);border:none;border-radius:999px;
  padding:7px 14px;font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;
  white-space:nowrap;transition:background .15s}
.nv2-client .btn-carte:hover{background:var(--or-clair)}
.nv2-client .btn-carte:disabled{opacity:.6;cursor:default}
.nv2-client .btn-doux{background:#fff;color:var(--texte-doux);border:1px solid var(--ligne);border-radius:999px;
  padding:7px 14px;font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;
  white-space:nowrap;transition:border-color .15s,color .15s}
.nv2-client .btn-doux:hover{border-color:var(--texte-doux);color:var(--encre)}
.nv2-client .btn-doux:disabled{opacity:.6;cursor:default}
.nv2-client .moyen-zone{padding:6px 22px 20px}
.nv2-client .moyen-zone p{font-size:.92rem}
.nv2-client .moyen-zone .aide{font-size:.8rem;color:var(--texte-doux);margin-top:8px}
.nv2-client .moyen-zone .boutons{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.nv2-client .moyen-carte{display:inline-flex;align-items:center;gap:10px;background:#F6F8FB;
  border:1px solid var(--ligne);border-radius:10px;padding:10px 14px;font-size:.92rem}
.nv2-client .moyen-carte code{font-family:'Spline Sans Mono';letter-spacing:.06em}
.nv2-client .callout-ok{padding:12px 16px;border-radius:10px;font-size:.92rem;margin-bottom:18px;
  background:#e8f3ec;border:1px solid #b9dcc6;color:#1f6b3d}
/* Etape de souscription inachevee. Visible sur TOUS les ecrans de l'espace :
   c'est la seule chose qui reste a faire, et la reduire a un encart de la page
   des factures reviendrait a la cacher a qui ne l'ouvre pas. */
.nv2-client .etape-souscription{margin-bottom:24px;padding:20px 22px;border-radius:12px;
  background:#EAF7F5;border:1px solid #BFE6DF}
.nv2-client .etape-souscription h3{margin:0 0 6px;font-family:'Figtree',system-ui,sans-serif;
  font-size:1.06rem;font-weight:600;color:var(--or-fonce)}
.nv2-client .etape-souscription p{margin:0;font-size:.92rem;color:var(--texte)}
.nv2-client .etape-souscription .aide{margin-top:8px;font-size:.8rem;color:var(--texte-doux)}
.nv2-client .etape-souscription .boutons{margin-top:15px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* Souscription inachevee : l'espace est FERME (Direction, 2026-08-05). On
   masque la navigation et toutes les pages plutot que de les afficher vides —
   un ecran vide se lit comme une panne, une etape se lit comme une etape.
   Le `!important` sur `.page` est necessaire : `montrer()` pose `.show` en
   ligne dans la feuille, et cette regle doit l'emporter quoi qu'il arrive. */
body.nv2-client.souscription-a-terminer #side-nav,
body.nv2-client.souscription-a-terminer .page{display:none !important}
body.nv2-client.souscription-a-terminer .content{padding-top:8px}
.nv2-client .login-ou{display:flex;align-items:center;gap:12px;margin:18px 0 14px}
.nv2-client .login-ou::before,
.nv2-client .login-ou::after{content:"";flex:1;height:1px;background:var(--ligne)}
.nv2-client .login-ou span{font-family:'Spline Sans Mono';font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--texte-doux)}
.nv2-client .btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:12px 14px;border:1px solid var(--ligne);border-radius:999px;background:#fff;
  color:var(--texte);font-family:inherit;font-weight:600;font-size:.94rem;text-decoration:none;
  transition:border-color .18s,transform .18s}
.nv2-client .btn-google:hover{border-color:var(--texte-doux);transform:translateY(-1px)}
.nv2-client .note-2fa{font-size:.86rem;color:var(--texte-doux);margin:2px 0 18px;display:block}
.nv2-client .btn-plein{width:100%;background:var(--or);color:var(--encre);font-weight:600;font-size:1rem;
  padding:13px;border-radius:999px;box-shadow:0 10px 30px -10px rgba(18,179,159,.6);transition:transform .18s,background .18s}
.nv2-client .btn-plein:hover{transform:translateY(-2px);background:var(--or-clair)}

.nv2-client .sep::before,
.nv2-client .sep::after{content:"";height:1px;background:var(--ligne);flex:1}

/* ===== SHELL ===== */
.nv2-client .sidebar{width:256px;background:var(--encre);color:var(--texte-marine);display:flex;flex-direction:column;flex-shrink:0;position:sticky;top:0;height:100vh}
.nv2-client .side-logo{display:flex;align-items:center;gap:11px;font-family:'Figtree',sans-serif;font-weight:600;font-size:1.4rem;color:#fff;padding:24px 22px 20px}
.nv2-client .side-logo .login-pastille{background:rgba(255,255,255,.06)}
.nv2-client .side-nav{flex:1;padding:8px 14px;overflow-y:auto}
.nv2-client .side-nav a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;font-weight:500;font-size:.92rem;color:#8FA2BA;margin-bottom:3px;transition:background .15s,color .15s}
.nv2-client .side-nav a:hover{background:rgba(255,255,255,.05);color:#fff}
.nv2-client .side-nav a.actif{background:var(--or);color:var(--encre);font-weight:600}
.nv2-client .side-nav .ic{width:20px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center}
.nv2-client .side-nav .ic svg{width:18px;height:18px;display:block}
.nv2-client .side-label{font-family:'Spline Sans Mono';font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:#5E718C;padding:14px 14px 6px}
.nv2-client .side-bas{padding:16px;border-top:1px solid var(--ligne-nuit)}
.nv2-client .side-user{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.nv2-client .avatar{width:36px;height:36px;border-radius:50%;background:var(--or);color:var(--encre);display:grid;place-items:center;font-weight:700;flex-shrink:0;font-family:'Figtree',sans-serif}
.nv2-client .side-user strong{color:#fff;font-size:.88rem;display:block}
.nv2-client .side-user span{font-size:.74rem;color:#8FA2BA}
.nv2-client .btn-side{width:100%;background:rgba(255,255,255,.06);color:#DCE7F6;font-weight:600;font-size:.82rem;padding:10px;border-radius:9px;transition:background .15s}
.nv2-client .btn-side:hover{background:rgba(255,255,255,.12)}

.nv2-client .main{flex:1;min-width:0;display:flex;flex-direction:column;max-height:100vh;overflow-y:auto}
.nv2-client .topbar{position:sticky;top:0;z-index:5;background:rgba(251,250,246,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--ligne);padding:0 32px;height:68px;display:flex;align-items:center;justify-content:space-between}
.nv2-client .topbar h1{font-size:1.3rem}
.nv2-client .top-right{display:flex;align-items:center;gap:14px}
.nv2-client .role-badge{font-family:'Spline Sans Mono';font-size:.68rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  background:var(--porcelaine);color:var(--or-fonce);padding:6px 13px;border-radius:999px;border:1px solid #E2EAE8}
.nv2-client .content{padding:32px}

/* ===== PAGES ===== */
.nv2-client .page{display:none}
.nv2-client .page.show{display:block}
.nv2-client .page-intro{color:var(--texte-doux);margin-bottom:26px;font-size:.98rem}

.nv2-client .cartes{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:26px}
.nv2-client .carte-stat{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--radius);padding:22px}
.nv2-client .carte-stat .lbl{font-size:.8rem;color:var(--texte-doux);display:flex;align-items:center;gap:8px}
.nv2-client .carte-stat .val{font-family:'Figtree',sans-serif;font-size:2.1rem;font-weight:500;color:var(--nuit);margin-top:8px;line-height:1}
.nv2-client .carte-stat .delta{font-size:.78rem;margin-top:8px}
.nv2-client .delta.up{color:var(--vert)}.nv2-client .delta.flat{color:var(--texte-doux)}

.nv2-client .grille-2{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;align-items:start}
.nv2-client .bloc{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--radius);overflow:hidden}
.nv2-client .bloc-tete{padding:18px 22px;border-bottom:1px solid var(--ligne);display:flex;align-items:center;justify-content:space-between;gap:10px}
.nv2-client .bloc-tete h3{font-size:1.05rem;font-weight:600}
.nv2-client .bloc-tete .lien{background:none;border:none;font-family:inherit;cursor:pointer;font-size:.82rem;color:var(--or-fonce);font-weight:600}
.nv2-client .bloc-corps{padding:8px 0}

.nv2-client .ligne-item{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid #F0EDE4}
.nv2-client .ligne-item:last-child{border-bottom:none}
.nv2-client .pastille-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;font-size:1rem;border:1px solid var(--ligne)}
.nv2-client .pi-bleu{background:var(--porcelaine)}.nv2-client .pi-vert{background:#EEF5EF;border-color:#CFE3D5}.nv2-client .pi-orange{background:#F4F8F7;border-color:#E2EAE8}.nv2-client .pi-rouge{background:#F8ECEA;border-color:#EBCFCB}
.nv2-client .ligne-item .txt{flex:1;min-width:0}
.nv2-client .ligne-item .txt strong{display:block;font-size:.9rem;color:var(--nuit);font-weight:600}
.nv2-client .ligne-item .txt span{font-size:.82rem;color:var(--texte-doux)}
.nv2-client .ligne-item .meta{font-family:'Spline Sans Mono';font-size:.76rem;color:var(--texte-doux);white-space:nowrap}
.nv2-client .tag{font-size:.7rem;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap;font-family:'Spline Sans Mono';letter-spacing:.04em}
.nv2-client .tag-urgent{background:#F8ECEA;color:var(--rouge);border:1px solid #EBCFCB}
.nv2-client .tag-nouveau{background:#F4F8F7;color:var(--or-fonce);border:1px solid #E2EAE8}
.nv2-client .tag-ok{background:#EEF5EF;color:var(--vert);border:1px solid #CFE3D5}
.nv2-client .tag-attente{background:var(--porcelaine);color:var(--nuit);border:1px solid var(--ligne)}

.nv2-client .encart{background:var(--encre);color:#fff;border-radius:var(--radius);padding:24px;position:relative;overflow:hidden}
.nv2-client .encart::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,var(--or),transparent)}
.nv2-client .encart h3{color:#fff;font-size:1.1rem}
.nv2-client .encart p{color:var(--texte-marine);font-size:.86rem;margin-top:8px}
.nv2-client .encart .statut{display:inline-flex;align-items:center;gap:8px;background:rgba(62,125,99,.2);border:1px solid rgba(62,125,99,.5);
  color:#8FD3B4;font-size:.8rem;font-weight:600;padding:6px 13px;border-radius:999px;margin-top:16px}
.nv2-client .pt{width:8px;height:8px;border-radius:50%;background:#5FD69E;animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(95,214,158,.5)}50%{box-shadow:0 0 0 7px rgba(95,214,158,0)}}

/* Tables */
.nv2-client .tbl{width:100%;border-collapse:collapse;font-size:.88rem}
.nv2-client .tbl th{text-align:left;font-family:'Spline Sans Mono';font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--texte-doux);font-weight:500;padding:13px 22px;border-bottom:1px solid var(--ligne);background:var(--brume)}
.nv2-client .tbl td{padding:14px 22px;border-bottom:1px solid #F0EDE4;vertical-align:middle}
.nv2-client .tbl tr:last-child td{border-bottom:none}
.nv2-client .tbl .nom{font-weight:600;color:var(--nuit)}

@media (max-width:1100px){.nv2-client .cartes{grid-template-columns:1fr 1fr}.nv2-client .grille-2{grid-template-columns:1fr}}
@media (max-width:720px){.nv2-client .sidebar{display:none}.nv2-client .content{padding:20px}.nv2-client .cartes{grid-template-columns:1fr}}

.nv2-client :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid #0A6E61;outline-offset:2px;box-shadow:none}

@media (pointer:coarse){.nv2-client .foot-links a,
.nv2-client .fl a,
.nv2-client .dl,
.nv2-client .btn-mini,
.nv2-client .footer-bas a,
.nv2-client footer a{display:inline-flex;align-items:center;min-height:44px}}

.nv2-client .tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.nv2-client .tw:focus-visible{outline:3px solid #0A6E61;outline-offset:2px}
.nv2-client .bloc{overflow:visible}


/* ---- bloc suivant ---- */

/* ============================================================
   Pleine largeur — 20/07/2026
   Le contenu occupe tout l'ecran ; seuls les paragraphes gardent
   une longueur de ligne lisible (au-dela de ~75 caracteres, l'oeil
   perd la ligne suivante).
   ============================================================ */

/* 1. Le conteneur ne bride plus rien. Les marges deviennent fluides :
      18 px sur telephone, jusqu'a 68 px sur grand ecran. */
body.nv2-client{ --maxw:100%; }
.nv2-client .wrap{ max-width:100%; padding-inline:clamp(18px,3.2vw,68px); padding-left:clamp(18px,3.2vw,68px); padding-right:clamp(18px,3.2vw,68px); }

/* 2. Les grilles gagnent des colonnes au lieu de s'etirer.
      `min(Xpx,100%)` et non `Xpx` seul : sans ce garde, une colonne de 340 px
      ne peut pas retrecir et deborde sur un telephone de 360 px (qui n'offre
      que 328 px utiles une fois les marges retirees). */
.nv2-client .services-grille{ grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr)); }
.nv2-client .secteurs-grille{ grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr)); }
.nv2-client .chiffres-grille{ grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); }
.nv2-client .engagements{ grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); }
.nv2-client .pourquoi{ grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); }
.nv2-client .footer-grille{ grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); }
.nv2-client .fac-grille{ grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); }
.nv2-client .nv-piliers{ grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); }
.nv2-client .nv-preuve{ grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); }
.nv2-client .nv-pas{ grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); }
.nv2-client .metier-demo{ grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); }
.nv2-client .filet-duo{ grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr)); }
.nv2-client .etapes{ grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); }
.nv2-client .urg-etapes{ grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); }

/* 3. Le texte courant reste lisible : la ligne ne depasse pas ~75 caracteres.
      Les cartes, grilles et fonds, eux, occupent bien toute la largeur. */
.nv2-client .section-head{ max-width:min(75ch,100%); }
.nv2-client .section-head p,
.nv2-client .hero-sous,
.nv2-client .lead-txt p,
.nv2-client .faq p,
.nv2-client .preuve-note,
.nv2-client .nv-mention{ max-width:min(72ch,100%); }

/* 4. Au-dela de 1500 px, les mises en page a deux colonnes cessent de
      s'etirer indefiniment : le contenu se recentre plutot que de se diluer. */
@media (min-width:1500px){
  .nv2-client .hero-grille,
.nv2-client .offre-grille,
.nv2-client .lead-grille,
.nv2-client .urg-grille,
.nv2-client .nv-offre{ max-width:1560px; margin-inline:auto; }
  .nv2-client .section-head{ max-width:min(80ch,100%); }
}

/* 5. Telephone : on recolle aux bords sans jamais toucher le texte. */
@media (max-width:600px){
  .nv2-client .wrap{ padding-left:16px; padding-right:16px; }
}

/* 6. Defaut anterieur a la refonte, mesure a +347 px : le panneau du menu
      mobile est place hors ecran par translation, mais rien ne le confine.
      La page pouvait donc defiler lateralement et decouvrir le menu ferme.
      `clip` plutot que `hidden` : `hidden` casserait les elements colles
      (position:sticky) de l'en-tete. */
/* La regle d'origine visait <html> ET <body> ; le marqueur etant pose sur le
   <body>, c'est la seule des deux que l'on peut borner a cette page. */
body.nv2-client{ overflow-x:clip; }
@supports not (overflow:clip){
  body.nv2-client,
body.nv2-client{ overflow-x:hidden; }
}

/* === complements propres a l espace client === */
.nv2-client .msg-vide{padding:26px 22px;color:var(--texte-doux);font-size:.92rem}
.nv2-client .msg-erreur{background:#FDF1F0;border:1px solid #E6C7C4;color:var(--rouge);
  border-radius:10px;padding:11px 14px;font-size:.88rem;margin-bottom:16px}
.nv2-client #login-erreur strong{display:block;font-weight:600}
.nv2-client .msg-ok{background:#EEF5F1;border:1px solid #C6DDD1;color:var(--vert);
  border-radius:10px;padding:11px 14px;font-size:.88rem;margin-bottom:16px}
.nv2-client .ligne-item.cliquable{cursor:pointer}
.nv2-client .ligne-item.cliquable:hover{background:var(--porcelaine)}
.nv2-client .tbl tbody tr.cliquable{cursor:pointer}
.nv2-client .tbl tbody tr.cliquable:hover{background:var(--porcelaine)}
.nv2-client .fiche-champ{display:grid;grid-template-columns:minmax(160px,34%) 1fr;gap:4px 18px;
  padding:9px 0;border-bottom:1px solid var(--ligne)}
.nv2-client .fiche-champ:last-child{border-bottom:none}
.nv2-client .fiche-champ dt{color:var(--texte-doux);font-size:.82rem}
.nv2-client .fiche-champ dd{color:var(--texte);font-size:.94rem;word-break:break-word}
.nv2-client .retour{background:none;color:var(--texte-doux);font-size:.85rem;padding:0;margin-bottom:14px}
.nv2-client .retour:hover{color:var(--nuit)}
.nv2-client .form-consignes{padding:18px 22px;display:grid;gap:16px}
.nv2-client .form-consignes label{display:block;font-size:.82rem;color:var(--texte-doux);margin-bottom:6px}
.nv2-client .form-consignes input,
.nv2-client .form-consignes textarea{width:100%;font-family:inherit;font-size:.94rem;
  color:var(--texte);background:var(--brume);border:1px solid var(--ligne);border-radius:10px;padding:10px 12px}
.nv2-client .form-consignes textarea{min-height:150px;resize:vertical;line-height:1.6}
.nv2-client .form-consignes .aide{font-size:.8rem;color:var(--texte-doux);margin-top:5px}
.nv2-client .chargement{padding:26px 22px;color:var(--texte-doux);font-size:.9rem}
@media(max-width:640px){.nv2-client .fiche-champ{grid-template-columns:1fr}}

/* ===================== SOCLE MOBILE — 2026-08-08 =====================
   Bloc ajoute en fin de feuille. Rien n'est retire : toutes les regles
   ci-dessous sont conditionnees au doigt (pointer:coarse) ou au petit
   ecran, donc un poste au clavier-souris ne bouge pas d'un pixel.
   Retrait : supprimer le bloc entre ce commentaire et FIN SOCLE MOBILE. */

/* Safari iOS regrossit le texte tout seul au passage en paysage. */
body.nv2-client{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (pointer: coarse){
  /* Un champ sous 16px fait zoomer Safari iOS des qu'on le touche, et la
     page ne revient jamais a son echelle : elle reste decalee jusqu'au
     rechargement. C'est le defaut mobile le plus visible.
     !important assume : c'est un plancher, pas un style. Des dizaines de
     champs portent une taille posee en classe ou en attribut style, que
     n'importe quel selecteur simple perdrait. La regle ne s'applique
     qu'au doigt : au clavier-souris, rien ne change. */
  .nv2-client input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="color"]),
.nv2-client select,
.nv2-client textarea{ font-size: 16px !important; }

  /* Cible tactile : 44px chez Apple, 48dp chez Android. */
  .nv2-client input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="color"]),
.nv2-client select{ min-height: 44px; }
  .nv2-client textarea{ min-height: 66px; }
  .nv2-client button,
.nv2-client input[type="submit"],
.nv2-client input[type="button"],
.nv2-client input[type="reset"]{ min-height: 44px; }
  .nv2-client .login-action{ min-height: 44px; padding:10px 5px; }
  .nv2-client .btn,
.nv2-client .btn-mini,
.nv2-client .btn-topbar,
.nv2-client .btn-vert,
.nv2-client [role="button"]{
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  }
}

/* Une adresse, un identifiant ou un jeton sans espace pousse la page hors
   de l'ecran : la couper vaut mieux que devoir defiler lateralement. */
@media (max-width: 640px){
  .nv2-client p,
.nv2-client li,
.nv2-client td,
.nv2-client th,
.nv2-client dd,
.nv2-client dt,
.nv2-client h1,
.nv2-client h2,
.nv2-client h3,
.nv2-client h4,
.nv2-client .mono,
.nv2-client code{ overflow-wrap: break-word; }
}
/* ===================== FIN SOCLE MOBILE ===================== */


/* =============================================================================
   3 bis. ESPACE CLIENT — les 21 attributs style= devenus des classes
   -----------------------------------------------------------------------------
   Trois d'entre eux n'ont pas eu besoin de classe : la hauteur des deux logos
   vient desormais de « .login-logo img / .side-logo img » (section 2), et les
   deux titres de bloc comme le titre d'encart passent par un selecteur propre,
   juste en dessous.
   ============================================================================= */
.nv2-client .bloc-tete h2{font-size:1.05rem;font-weight:600}
.nv2-client .encart h2{font-size:1.1rem;color:#fff}
.nv2-client .retour-site{display:inline-block;text-decoration:none}

/* L'encart « Regler par virement » etait masque par « style="display:none" », et
   le script de la page le montrait en remettant .style.display a ''. Il passe
   par cette classe, que le script ajoute et retire : sans elle, l'encart serait
   soit toujours visible, soit impossible a montrer. */
.nv2-espaces .cache{display:none !important}

.nv2-client .u-souligne{text-decoration:underline}
.nv2-client .u-mt22{margin-top:22px}
.nv2-client .u-m10-0-0{margin:10px 0 0}
.nv2-client .u-m0-0-10{margin:0 0 10px}
.nv2-client .u-m12-0-0{margin:12px 0 0}
.nv2-client .u-m8-0-0{margin:8px 0 0}
.nv2-client .u-p6-22-14{padding:6px 22px 14px}
.nv2-client .u-bloc-texte{padding:14px 22px;color:var(--texte)}
/* Saisie du code a six chiffres : chiffres espaces et centres. Le selecteur
   nomme la balise en plus de la classe pour reprendre la taille imposee par
   « .champ input » plus haut — l'attribut style= d'origine, lui, passait
   devant toute feuille. */
.nv2-client input.u-code-saisie{letter-spacing:.4em;text-align:center;font-size:1.25rem}

/* Ces trois-la ne viennent pas du HTML mais des fragments construits par le
   script de la page : ils y etaient ecrits en ligne, ils sont ici. */
.nv2-client .u-note-boite{margin:14px 22px 0}
.nv2-client .u-zone-vide{padding:18px 22px;color:var(--texte-doux)}
.nv2-client .u-zone-erreur{padding:18px 22px}
.nv2-client .u-fiche-corps{padding:6px 22px 16px}
.nv2-client .u-sur-encre{color:#fff}
.nv2-client .u-lien-encre{color:#fff;text-decoration:underline}


/* =============================================================================
   4. CONSOLE DIRECTION — part de /marque-allolib.css propre a cet ecran
   -----------------------------------------------------------------------------
   Trois familles seulement : le suffixe « Team » a cote du logo, la classe
   « .btn » (que ni plateforme.css ni direction-interface.css ne definissent :
   elle ne tenait QUE de cette feuille), et le socle mobile, que l'espace client
   portait deja dans son propre <style> mais pas cette page.
   ============================================================================= */

/* Suffixe d'application : il nomme l'outil a cote de la marque sans jamais
   rivaliser avec elle. */
:where(.nv2-direction) .logo-suffixe{
  font-family:'Spline Sans Mono', ui-monospace, monospace;
  font-size:.62rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;opacity:.62;white-space:nowrap;align-self:center;
}

/* Cases a cocher : dix dans cet ecran, aucune dans l'espace client. */
:where(.nv2-direction) input[type="checkbox"],
:where(.nv2-direction) input[type="radio"]{accent-color:var(--al-or)}

/* « .btn » : quatre boutons de document et d'apercu. Ici, et ici seulement, la
   specificite est portee a deux classes — sinon « .nv2 .btn » du socle les
   redessine en bouton d'appel a l'action (pastille pleine, 700, 14/24 px). Les
   proprietes que le socle ajoute sont donc ramenees a leur valeur d'avant, et
   « btn-plein », defini par plateforme.css avec une seule classe, est rappele
   juste apres pour ne pas perdre sa taille au passage. */
.nv2-direction .btn{
  /* « revert » et non « inline-block » : deux de ces boutons portent l'attribut
     hidden, et une regle d'auteur qui poserait une valeur d'affichage passerait
     devant celle du navigateur — les deux « Imprimer » reapparaitraient. */
  /* padding:0 et non « revert » : plateforme.css remet a zero les marges et les
     remplissages de tous les elements, c'est de la que ces boutons tenaient
     leur absence de remplissage. */
  display:revert;padding:0;border:none;gap:normal;white-space:normal;
  font-family:inherit;font-size:inherit;text-decoration:none;cursor:pointer;
  border-radius:999px;font-weight:700;letter-spacing:-.01em;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
/* « display:revert » ne suffit pas : le navigateur rend un bouton en
   inline-block meme porteur de l'attribut hidden des qu'une regle d'auteur
   touche a son affichage. Les deux « Imprimer » restent donc masques ici. */
.nv2-direction .btn[hidden]{display:none}
.nv2-direction .btn:hover{transform:translateY(-3px)}
.nv2-direction .btn:active{transform:translateY(-1px)}
.nv2-direction .btn.btn-plein{
  width:100%;padding:13px;font-weight:600;font-size:1rem;
  background:var(--or);color:var(--encre);
  box-shadow:0 10px 30px -10px rgba(18,179,159,.6);
}

/* ----- Socle mobile (2026-08-08), repris de marque-allolib.css -------------
   Tout est conditionne au doigt ou au petit ecran : un poste au clavier-souris
   ne bouge pas d'un pixel. */
/* Safari iOS regrossit le texte tout seul au passage en paysage. */
body.nv2-direction{-webkit-text-size-adjust:100%;text-size-adjust:100%}

@media (pointer:coarse){
  /* Un champ sous 16 px fait zoomer Safari iOS des qu'on le touche, et la page
     ne revient jamais a son echelle : elle reste decalee jusqu'au rechargement.
     C'est le defaut mobile le plus visible. Le !important est assume : c'est un
     plancher, pas un style, et il ne vaut qu'au doigt. */
  :where(.nv2-direction) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="color"]),
  :where(.nv2-direction) select,:where(.nv2-direction) textarea{font-size:16px !important}
  /* Cible tactile : 44 px chez Apple, 48 dp chez Android. */
  :where(.nv2-direction) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="color"]),
  :where(.nv2-direction) select{min-height:44px}
  :where(.nv2-direction) textarea{min-height:66px}
  :where(.nv2-direction) button,:where(.nv2-direction) input[type="submit"],
  :where(.nv2-direction) input[type="button"],
  :where(.nv2-direction) input[type="reset"]{min-height:44px}
  :where(.nv2-direction) .btn,:where(.nv2-direction) .btn-mini,
  :where(.nv2-direction) .btn-topbar,:where(.nv2-direction) .btn-vert,
  :where(.nv2-direction) [role="button"]{
    display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  }
}

/* Une adresse, un identifiant ou un jeton sans espace pousse la page hors de
   l'ecran : la couper vaut mieux que devoir defiler lateralement. */
@media (max-width:640px){
  :where(.nv2-direction) p,:where(.nv2-direction) li,:where(.nv2-direction) td,
  :where(.nv2-direction) th,:where(.nv2-direction) dd,:where(.nv2-direction) dt,
  :where(.nv2-direction) h1,:where(.nv2-direction) h2,:where(.nv2-direction) h3,
  :where(.nv2-direction) h4,:where(.nv2-direction) .mono,
  :where(.nv2-direction) code{overflow-wrap:break-word}
}

/* =============================================================================
   5. CONSOLE DIRECTION — les 153 attributs style= devenus des classes
   -----------------------------------------------------------------------------
   Une classe par declaration distincte (62 en tout). Les noms decrivent ce que
   la regle fait, pas ou elle sert : la meme marge revient jusqu'a vingt-trois
   fois dans la page.
   ============================================================================= */

/* Onze blocs etaient masques par « style="display:none" » et les scripts de la
   plateforme les revelent en ecrivant element.style.display. Une classe seule
   les aurait gardes masques : cette regle ne fait que tenir l'ecran propre
   jusqu'a ce que le fragment JS repose le masquage en ligne, a l'identique. */
.nv2-direction .nv2-masque-initial{display:none}

/* Marges verticales */
.nv2-direction .u-mt4{margin-top:4px}
.nv2-direction .u-mt10{margin-top:10px}
.nv2-direction .u-mt12{margin-top:12px}
.nv2-direction .u-mt14{margin-top:14px}
.nv2-direction .u-mt16{margin-top:16px}
.nv2-direction .u-mt18{margin-top:18px}
.nv2-direction .u-mt20{margin-top:20px}
.nv2-direction .u-mt26{margin-top:26px}
.nv2-direction .u-mb10{margin-bottom:10px}
.nv2-direction .u-mb18{margin-bottom:18px}
.nv2-direction .u-mb20{margin-bottom:20px}
.nv2-direction .u-m0{margin:0}
.nv2-direction .u-m2-0-0{margin:2px 0 0}
.nv2-direction .u-m0-0-12{margin:0 0 12px}
.nv2-direction .u-m0-0-14{margin:0 0 14px}
.nv2-direction .u-m0-0-18{margin:0 0 18px}
.nv2-direction .u-m10-0-18{margin:10px 0 18px}
.nv2-direction .u-m12-0-0{margin:12px 0 0}

/* Marges laterales */
.nv2-direction .u-ml8{margin-left:8px}
.nv2-direction .u-ml10{margin-left:10px}
.nv2-direction .u-mr8{margin-right:8px}
.nv2-direction .u-ml-auto{margin-left:auto}

/* Remplissages */
.nv2-direction .u-p18{padding:18px}
.nv2-direction .u-p20{padding:20px}
.nv2-direction .u-p0-14{padding:0 14px}
.nv2-direction .u-p8-20-18{padding:8px 20px 18px}
.nv2-direction .u-p16-18{padding:16px 18px}

/* Rangees */
.nv2-direction .u-rang8{display:flex;align-items:center;gap:8px}
.nv2-direction .u-rang8-simple{display:flex;gap:8px}
.nv2-direction .u-rang8-wrap{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.nv2-direction .u-rang10-wrap{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.nv2-direction .u-rang14{display:flex;align-items:center;gap:14px}
.nv2-direction .u-rang6-petit{font-size:.82rem;display:flex;gap:6px;align-items:center}
.nv2-direction .u-rang-wrap-mb16{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.nv2-direction .u-colonne6-mt10{margin-top:10px;display:flex;flex-direction:column;gap:6px}
/* Sur un conteneur deja en flex, seule la direction change. */
.nv2-direction .u-rang-libre{flex-direction:row;align-items:center;gap:8px}

/* Largeurs */
.nv2-direction .u-mw220{max-width:220px}
.nv2-direction .u-mw320{max-width:320px}
.nv2-direction .u-mw520{max-width:520px}
.nv2-direction .u-mw-min190{min-width:190px}
.nv2-direction .u-plein-mt4{width:100%;margin:4px 0 0}

/* Textes secondaires */
.nv2-direction .u-fs90{font-size:.9em}
.nv2-direction .u-note8{margin:8px 0 0;font-size:.9em}
.nv2-direction .u-note10{margin:10px 0 0;font-size:.9em}
.nv2-direction .u-maj{text-transform:uppercase}
.nv2-direction .u-clic{cursor:pointer}
.nv2-direction .u-doux-400{font-weight:400;color:var(--texte-doux)}
.nv2-direction .u-doux-petit-mb12{font-size:.82rem;color:var(--texte-doux);margin-bottom:12px}
.nv2-direction .u-intro-douce{font-size:.85rem;color:var(--texte-doux);margin:0 0 14px}
.nv2-direction .u-bloc-note{display:block;margin-top:8px;color:#5b6b7a}
.nv2-direction .u-side-note{color:#9FB6D8;font-size:.72rem;letter-spacing:.1em}
.nv2-direction .u-case-libelle{display:flex;align-items:center;gap:7px;font-size:.82rem;
  color:var(--texte-doux);cursor:pointer}

/* Encadre d'avertissement ambre (trois emplois).

   2026-09-18 — CETTE REGLE POSAIT UN FOND CLAIR SANS TOUCHER A LA COULEUR DU
   TEXTE. Les trois encadres portent aussi la classe « .encart », qui vient de
   plateforme.css avec « color:#fff » : du blanc sur du creme, soit un contraste
   de 1,1 pour 1. Les trois avertissements etaient donc RIGOUREUSEMENT
   INVISIBLES a l'ecran — dont celui qui demande de faire relire le premier
   contrat de travail par un conseil juridique avant signature.
   Un fond se change toujours avec sa couleur de texte : l'un sans l'autre
   n'efface pas un message, il le rend illisible sans rien signaler. */
.nv2-direction .u-avert{border-left:3px solid #c47b00;background:#fff8ec;padding:12px 14px;
  color:#3a2f1c}
.nv2-direction .u-avert strong,
.nv2-direction .u-avert b,
.nv2-direction .u-avert p,
.nv2-direction .u-avert li{color:inherit}

/* Filet de separation (l'unique <hr> de la page). */
.nv2-direction .u-filet{border:0;border-top:1px solid var(--bord,#e5e2dc);margin:18px 0}

/* Champs poses hors de « .champ ». */
.nv2-direction .u-champ-mini{font-family:inherit;font-size:.85rem;padding:6px 8px;
  border:1px solid var(--ligne);border-radius:8px;background:var(--porcelaine)}
.nv2-direction .u-champ-inline{padding:7px 11px;border:1px solid var(--ligne);
  border-radius:8px;font:inherit;min-width:180px}

/* Apercus de document dans un cadre, et journal technique deroulant. */
.nv2-direction .u-apercu640{width:100%;height:640px;border:1px solid #ddd;background:#fff}
.nv2-direction .u-apercu680{width:100%;height:680px;border:1px solid #ddd;background:#fff}
.nv2-direction .u-journal{max-height:340px;overflow:auto;font-size:.78rem;line-height:1.5;
  padding:14px;margin:0;white-space:pre-wrap}

/* =============================================================================
   FRAGMENT B — CSS des ECRANS APPLICATIFS DU CURSUS (allolib.fr)
   -----------------------------------------------------------------------------
   D'OU VIENT CE FICHIER
   Il rassemble tout ce que ces pages portaient encore en propre, pour qu'elles
   cessent de dependre des feuilles qui vont etre archivees
   (/polices/polices.css, /marque-allolib.css, /marque-premier-contact.css) :

     - formation-reception.html  -> marqueur « nv2-formation »
       (cursus de formation des agents, servi a /formation-reception)
     - examen-final.html         -> marqueur « nv2-examen »
       (test de fin de cursus, servi a /examen-final)

   Les deux portent aussi « nv2-cursus », qui reunit la famille et sur lequel
   sont poses les utilitaires communs. Une troisieme page avait ete basculee
   dans le meme lot, test-francais.html ; elle a ete RETIREE du socle et
   archivee le 18/09/2026 (voir la note en fin de fichier).

   Trois sources ont ete fondues ici, dans cet ordre pour chaque page :
     1. NEUTRALISATION — allolib.css pose des regles a portee generale
        (body.nv2, .nv2 h1/h2/h3, .nv2 .btn, .nv2 .ok, .logo img, .fiche,
        .bandeau, .pied...). Ces ecrans ne les chargeaient pas jusqu'ici : on
        remet donc explicitement la valeur d'avant partout ou elles mordent.
     2. REPRISE — la part de /marque-*.css que la page employait REELLEMENT
        (ombre des cartes, hauteur du logo, plafonds de titre, socle tactile,
        mise au point, placeholder, barres de defilement...). Rien de mort n'a
        ete emporte : ni le hero, ni la navigation, ni les offres, ni le
        comparatif, ni les blocs de contraste des fonds fonces.
     3. LE BLOC <style> DE LA PAGE, prefixe par son marqueur pour qu'il ne
        fuie pas sur les 55 autres pages du site.

   CE QU'IL FAUT SAVOIR AVANT DE FUSIONNER
   - Ces regles doivent etre servies APRES allolib.css, jamais avant : qu'elles
     soient collees en fin d'allolib.css ou servies dans /ecrans-internes.css
     charge derriere, plusieurs d'entre elles ne l'emportent que par l'ordre
     (specificite egale).
   - Les marqueurs sont doubles (« .nv2-cursus.nv2-examen ») partout ou il faut
     passer devant une regle du socle a deux classes. Ce n'est pas une
     coquetterie : « .nv2 h1 » vaut (0,2,0) et aurait ecrase un titre d'ecran.
   - Aucune @font-face ici : allolib.css sert deja « Figtree » et
     « Spline Sans Mono ».
   ============================================================================= */


/* =============================================================================
   0. UTILITAIRES COMMUNS — ils remplacent les attributs « style » du HTML
   ============================================================================= */

/* Calages repris un a un des attributs « style » supprimes.
   Trois d'entre eux (u-gtm, u-mt-8, u-minh-130) ont ete retires avec le
   mouchard Google Tag Manager et avec test-francais.html : plus personne ne
   les portait. */
.nv2-cursus .u-mt-5{margin-top:5px}
.nv2-cursus .u-mt-10{margin-top:10px}
.nv2-cursus .u-mt-12{margin-top:12px}
.nv2-cursus .u-mt-22{margin-top:22px}
.nv2-cursus .u-mt-26{margin-top:26px}
.nv2-cursus .u-doux{color:var(--texte-doux)}
.nv2-cursus .u-fs-82{font-size:.82rem}


/* =============================================================================
   1. formation-reception.html — .nv2-formation
   ============================================================================= */

/* --- 1.1 NEUTRALISATION du socle du site ---------------------------------- */

/* Titres. « .nv2 h1/h2/h3 » impose les tailles enormes du site vitrine et
   « h1,h2,h3 » d'allolib impose la couleur encre : on rend a chaque niveau la
   taille par defaut du navigateur, le poids 500 et la couleur nuit qu'il avait.
   Les interlignes 1,03 et 1,12 viennent de l'ancienne feuille de marque. */
.nv2-cursus.nv2-formation h1{
  font-family:'Figtree',sans-serif;font-weight:500;font-size:2em;
  letter-spacing:-.01em;line-height:1.03;color:var(--nuit);
}
.nv2-cursus.nv2-formation h2{
  font-family:'Figtree',sans-serif;font-weight:500;font-size:1.5em;
  letter-spacing:-.01em;line-height:1.12;color:var(--nuit);
}
.nv2-cursus.nv2-formation h3{
  font-family:'Figtree',sans-serif;font-weight:500;font-size:1.17em;
  letter-spacing:-.01em;line-height:inherit;color:var(--nuit);
}
.nv2-cursus.nv2-formation h4{
  font-family:'Figtree',sans-serif;font-weight:500;font-size:1em;
  letter-spacing:-.01em;line-height:inherit;color:var(--nuit);
}

/* Le logo du site est cale a 26 px de haut ; cet ecran l'affichait a 34. */
.nv2-formation .logo img{height:34px;width:auto;display:block}

/* « .fiche » et « .bandeau » sont des composants du site vitrine qui portent
   le meme nom que deux blocs de cet ecran. On retire ce qu'ils ajoutent. */
.nv2-formation .quiz .fiche{box-shadow:none;border:0}
.nv2-formation .bandeau{margin-top:0;display:block;gap:normal}

/* « .nv2 .ok{display:none;text-align:center;padding:20px 0} » sert a masquer
   l'accuse de reception d'un formulaire du site. Ici « ok » qualifie un
   bandeau de reussite et une etiquette « Pret production » : sans ces deux
   lignes ils disparaissent, et sans le text-align le bandeau se centre. */
.nv2-formation .bandeau.ok{display:block;text-align:left}
.nv2-formation .tag.ok{display:inline;text-align:left}

/* « .nv2 .wrap » et « .nv2 .btn » sont des composants du site. */
.nv2-formation .wrap{width:auto}
.nv2-formation .btn{display:inline-block;gap:0;white-space:normal}

/* --- 1.2 REPRISE de /marque-premier-contact.css --------------------------- */

/* Axe optique et synthese de graisse : sans cela un grand titre est rendu avec
   le dessin prevu pour du texte courant. */
.nv2-formation h1,.nv2-formation h2,.nv2-formation h3,
.nv2-formation h4,.nv2-formation h5,.nv2-formation h6{
  font-optical-sizing:auto;font-synthesis-weight:none;
}
.nv2-formation p,.nv2-formation li,.nv2-formation dd{text-wrap:pretty}

/* Chiffres de meme chasse dans les tableaux du cours. */
.nv2-formation table{font-variant-numeric:tabular-nums}

/* Mise au point visible et selection de texte. */
.nv2-formation :focus-visible{outline:2px solid #12B39F;outline-offset:2px;border-radius:4px}
.nv2-formation ::selection{background:rgba(18,179,159,.28);color:#0B1A2E}

.nv2-formation button{cursor:pointer}
.nv2-formation button:disabled{cursor:not-allowed}

/* Barres de defilement fines : celle du systeme jurait dans le bandeau marine. */
.nv2-formation *{scrollbar-width:thin;scrollbar-color:rgba(11,26,46,.22) transparent}
.nv2-formation ::-webkit-scrollbar{width:10px;height:10px}
.nv2-formation ::-webkit-scrollbar-track{background:transparent}
.nv2-formation ::-webkit-scrollbar-thumb{
  background:rgba(11,26,46,.20);border-radius:99px;
  border:3px solid transparent;background-clip:content-box;
}
.nv2-formation ::-webkit-scrollbar-thumb:hover{
  background:rgba(11,26,46,.34);background-clip:content-box;
}

/* Profondeur des cartes : c'est la seule chose que la couche « Direction
   artisans / TPE » apportait encore a cet ecran. */
.nv2-formation .carte{box-shadow:0 18px 50px rgba(11,26,46,.10)}

/* Les boutons se soulevent au survol. */
.nv2-formation .btn{
  letter-spacing:-.01em;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.nv2-formation .btn:hover{transform:translateY(-3px)}
.nv2-formation .btn:active{transform:translateY(-1px)}

/* Socle tactile : 44 px de cible au doigt, rien ne bouge au clavier-souris. */
@media (pointer:coarse){
  .nv2-formation button{min-height:44px}
  .nv2-formation .btn{
    display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  }
}
/* Un identifiant sans espace poussait la page hors de l'ecran. */
@media (max-width:640px){
  .nv2-formation p,.nv2-formation li,.nv2-formation td,.nv2-formation th,
  .nv2-formation dd,.nv2-formation dt,.nv2-formation h1,.nv2-formation h2,
  .nv2-formation h3,.nv2-formation h4,.nv2-formation .mono,.nv2-formation code{
    overflow-wrap:break-word;
  }
  .nv2-formation .logo img{height:28px}
}

/* --- 1.3 BLOC <style> DE LA PAGE, prefixe --------------------------------- */

/* Les jetons de la page (ex-« :root ») et son <body> ne font plus qu'un bloc :
   les variables doivent etre portees par l'element qui les consomme, et la
   taille de base est remise a 16 px (allolib.css passe le site a 17 px). */
.nv2-cursus.nv2-formation{
  --encre:#0B1A2E; --nuit:#12283F; --or:#12B39F; --or-fonce:#0A6E61; --or-clair:#2ED3BC;
  --vert:#3F7D5A; --vert-fond:#EAF3ED; --rouge:#B4524A; --rouge-fond:#FBEDEB;
  --blanc:#fff; --fond:#F8FBFA; --porcelaine:#F4F8F7; --ligne:#E2EAE8;
  --texte:#26333F; --texte-doux:#6B7A89;
  --radius:14px;
  font-family:'Figtree',system-ui,sans-serif;
  font-size:16px;
  color:var(--texte);
  background:var(--fond);
  line-height:1.55;
  color-scheme:light;
  accent-color:#12B39F;
  -webkit-text-size-adjust:100%;
}
.nv2-formation *{box-sizing:border-box;margin:0;padding:0}
.nv2-formation .mono{font-family:'Spline Sans Mono',ui-monospace,monospace}

/* Barre superieure */
.nv2-formation .topbar{display:flex;align-items:center;gap:14px;padding:14px 22px;background:var(--encre);color:#fff;position:sticky;top:0;z-index:10}
.nv2-formation .logo{display:flex;align-items:center;gap:9px;font-family:'Figtree',sans-serif;font-size:1.15rem;color:#fff}
.nv2-formation .pastille{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(145deg,var(--or),var(--or-clair));color:var(--encre)}
.nv2-formation .topbar .sep{flex:1}
.nv2-formation .topbar .qui{font-size:.85rem;color:#B8C9DC}
.nv2-formation .btn-sortie{font:inherit;font-size:.82rem;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:7px 12px;cursor:pointer}
.nv2-formation .btn-sortie:hover{background:rgba(255,255,255,.18)}

.nv2-formation .wrap{max-width:920px;margin:0 auto;padding:26px 20px 60px}
.nv2-cursus.nv2-formation .intro-titre{font-size:1.9rem}
.nv2-formation .intro-sous{color:var(--texte-doux);margin-top:4px}

/* Progression */
.nv2-formation .progress{display:flex;align-items:center;gap:20px;background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--radius);padding:20px 22px;margin:20px 0 26px}
.nv2-formation .progress .pct{font-family:'Figtree',sans-serif;font-size:2.3rem;color:var(--nuit);line-height:1}
.nv2-formation .barre{flex:1;height:10px;background:var(--porcelaine);border:1px solid var(--ligne);border-radius:999px;overflow:hidden;min-width:120px}
.nv2-formation .barre>span{display:block;height:100%;background:var(--or);border-radius:999px;transition:width .4s}
.nv2-formation .progress .txt strong{display:block;color:var(--nuit)}
.nv2-formation .progress .txt span{font-size:.85rem;color:var(--texte-doux)}

/* Acces au test final — n apparait qu une fois le cursus complet */
.nv2-formation .fin-parcours{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--blanc);
  border:1px solid var(--or);border-left:4px solid var(--or);border-radius:var(--radius);
  padding:18px 22px;margin:0 0 26px}
.nv2-formation .fin-parcours .txt strong{display:block;color:var(--nuit)}
.nv2-formation .fin-parcours .txt span{font-size:.85rem;color:var(--texte-doux)}
.nv2-formation .fin-parcours .sep{flex:1;min-width:0}
.nv2-formation .fin-parcours a{font:inherit;font-weight:600;font-size:.9rem;text-decoration:none;color:var(--encre);
  background:linear-gradient(145deg,var(--or-clair),var(--or));border-radius:8px;padding:11px 18px;white-space:nowrap}
.nv2-formation .fin-parcours a:hover{filter:brightness(1.06)}

/* Cartes modules */
.nv2-formation .modules{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.nv2-formation .carte{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column}
.nv2-formation .carte.ouvrable{cursor:pointer;transition:border-color .18s,transform .18s,box-shadow .18s}
.nv2-formation .carte.ouvrable:hover{border-color:var(--or);transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.06)}
.nv2-formation .carte.verrou{opacity:.55;filter:grayscale(.3)}
.nv2-formation .carte .num{font-family:'Spline Sans Mono';font-size:.68rem;letter-spacing:.12em;color:var(--or-fonce)}
.nv2-cursus.nv2-formation .carte h3{font-size:1.05rem;margin:8px 0 6px}
.nv2-formation .carte p{font-size:.85rem;color:var(--texte-doux);flex:1}
.nv2-formation .etat{margin-top:14px;font-size:.72rem;font-weight:600;padding:4px 10px;border-radius:999px;display:inline-block;align-self:flex-start;font-family:'Spline Sans Mono'}
.nv2-formation .etat.fait{background:var(--vert-fond);color:var(--vert)}
.nv2-formation .etat.dispo{background:#F4F8F7;color:var(--or-fonce)}
.nv2-formation .etat.verrou{background:var(--porcelaine);color:var(--texte-doux)}
.nv2-formation .carte .seuil{font-size:.72rem;color:var(--texte-doux);margin-top:8px}
.nv2-formation .btn{font:inherit;font-weight:600;font-size:.88rem;color:var(--encre);background:linear-gradient(145deg,var(--or-clair),var(--or));border:none;border-radius:9px;padding:10px 16px;cursor:pointer;margin-top:14px;align-self:flex-start}
.nv2-formation .btn:hover{filter:brightness(1.06)}
.nv2-formation .btn.sobre{background:none;border:1px solid var(--ligne);color:var(--texte);font-weight:500}

/* Quiz */
.nv2-formation .quiz{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--radius);padding:24px;display:none}
.nv2-formation .quiz.on{display:block}
.nv2-formation .quiz .fiche{background:var(--nuit);color:#DCE7F6;border-radius:12px;padding:18px 20px;font-size:.92rem;margin-bottom:20px}
.nv2-cursus.nv2-formation .quiz .fiche h4{color:var(--or-clair);font-family:'Spline Sans Mono';font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.nv2-formation .qtete{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--ligne);padding-bottom:14px;margin-bottom:18px}
.nv2-formation .qtete .compte{font-size:.8rem;color:var(--texte-doux);font-family:'Spline Sans Mono'}
.nv2-formation .q{padding:16px 0;border-bottom:1px solid var(--porcelaine)}
.nv2-formation .q .q-txt{font-weight:600;color:var(--nuit);margin-bottom:12px}
.nv2-formation .opt{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--ligne);border-radius:9px;margin-bottom:8px;cursor:pointer;font-size:.92rem;transition:border-color .15s}
.nv2-formation .opt:hover{border-color:var(--or)}
.nv2-formation .opt input{margin-top:3px;accent-color:var(--or)}
.nv2-formation .opt.bonne{border-color:var(--vert);background:var(--vert-fond)}
.nv2-formation .opt.mauvaise{border-color:var(--rouge);background:var(--rouge-fond)}
.nv2-formation .expli{font-size:.85rem;color:var(--texte-doux);margin-top:8px;padding-left:12px;border-left:3px solid var(--or)}
.nv2-formation .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}

.nv2-formation .bandeau{border-radius:12px;padding:16px 20px;margin-bottom:20px;font-weight:600}
.nv2-formation .bandeau.ok{background:var(--vert-fond);color:var(--vert);border:1px solid #CFE3D5}
.nv2-formation .bandeau.ko{background:var(--rouge-fond);color:var(--rouge);border:1px solid #E8CFCB}

.nv2-formation .msg{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--radius);padding:40px;text-align:center;color:var(--texte-doux)}

/* Admin */
.nv2-formation .admin{margin-top:34px;background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--radius);padding:22px;display:none}
.nv2-formation .admin.on{display:block}
.nv2-cursus.nv2-formation .admin h2{font-size:1.2rem;margin-bottom:4px}
.nv2-formation .ligne{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--porcelaine)}
.nv2-formation .ligne .ava{width:34px;height:34px;border-radius:50%;background:var(--porcelaine);display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--nuit)}
.nv2-formation .ligne .info{flex:1}
.nv2-formation .ligne .info strong{display:block;color:var(--nuit)}
.nv2-formation .ligne .info span{font-size:.82rem;color:var(--texte-doux)}
.nv2-formation .tag{font-size:.72rem;font-weight:600;padding:4px 10px;border-radius:999px;font-family:'Spline Sans Mono'}
.nv2-formation .tag.ok{background:var(--vert-fond);color:var(--vert)}
.nv2-formation .cache{display:none !important}
@media (prefers-reduced-motion:reduce){.nv2-formation *{transition:none !important}}
.nv2-formation .logo-suffixe{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.62;white-space:nowrap;align-self:center}

/* Le cours, avant les questions */
.nv2-formation .cours{border:1px solid var(--ligne);border-radius:12px;padding:20px 22px;margin-bottom:22px;background:var(--blanc)}
.nv2-cursus.nv2-formation .cours>h4{font-family:'Spline Sans Mono';font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--or-fonce);margin-bottom:14px}
.nv2-formation .cours .bloc{padding:14px 0;border-top:1px solid var(--porcelaine)}
.nv2-formation .cours .bloc:first-of-type{border-top:none;padding-top:0}
.nv2-cursus.nv2-formation .cours .bloc h5{font-size:.98rem;color:var(--nuit);margin-bottom:8px}
.nv2-formation .cours .bloc p{font-size:.9rem;color:var(--texte);margin-bottom:7px;line-height:1.62}
.nv2-formation .cours .dire,.nv2-formation .cours .jamais{margin-top:10px;padding:10px 14px;border-radius:9px;font-size:.88rem}
.nv2-formation .cours .dire{background:var(--vert-fond);border-left:3px solid var(--vert)}
.nv2-formation .cours .jamais{background:var(--rouge-fond);border-left:3px solid var(--rouge)}
.nv2-formation .cours .dire b,.nv2-formation .cours .jamais b{display:block;font-family:'Spline Sans Mono';font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.nv2-formation .cours .dire li,.nv2-formation .cours .jamais li{list-style:none;margin:3px 0}
.nv2-formation .cours .tableau-wrap{overflow-x:auto;margin:10px 0 4px;border:1px solid var(--ligne);border-radius:9px}
.nv2-formation .cours .tableau-cours{width:100%;border-collapse:collapse;font-size:.86rem;min-width:620px}
.nv2-formation .cours .tableau-cours th,.nv2-formation .cours .tableau-cours td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--ligne)}
.nv2-formation .cours .tableau-cours th{background:var(--porcelaine);color:var(--nuit);font-family:'Spline Sans Mono';font-size:.66rem;letter-spacing:.08em;text-transform:uppercase}
.nv2-formation .cours .tableau-cours tr:last-child td{border-bottom:none}


/* =============================================================================
   2. examen-final.html — .nv2-examen
   ============================================================================= */

/* --- 2.1 NEUTRALISATION du socle du site ---------------------------------- */

/* Titres. Le point critique : allolib.css pose « h1,h2,h3{color:var(--encre)} »,
   c'est-a-dire bleu nuit — sur cet ecran, dont le fond EST bleu nuit, les titres
   devenaient illisibles. On leur rend la couleur heritee (blanc) et les
   interlignes de l'ancienne feuille de marque. */
.nv2-cursus.nv2-examen h1{
  font-family:'Figtree',sans-serif;font-weight:500;font-size:1.7rem;margin:26px 0 6px;
  letter-spacing:-.045em;line-height:1.03;color:inherit;
}
.nv2-cursus.nv2-examen h2{
  font-family:'Figtree',sans-serif;font-weight:500;font-size:1.3rem;margin:0 0 4px;
  letter-spacing:-.03em;line-height:1.12;color:inherit;
}
.nv2-cursus.nv2-examen h3{
  font-weight:bold;font-size:1.17em;letter-spacing:normal;line-height:inherit;color:inherit;
}

.nv2-examen .logo img{height:34px;width:auto;display:block}

/* « .pied » est le pied de page du site : bandeau encre, 44 px de respiration
   et un filet. Ici ce n'est qu'une ligne de signature. */
.nv2-examen .pied{background:transparent;border-top:0;padding-block:0}

/* --- 2.2 REPRISE de /marque-allolib.css ----------------------------------- */

.nv2-examen h1,.nv2-examen h2,.nv2-examen h3,
.nv2-examen h4,.nv2-examen h5,.nv2-examen h6{
  font-optical-sizing:auto;font-synthesis-weight:none;
}
.nv2-examen p,.nv2-examen li,.nv2-examen dd{text-wrap:pretty}

/* Chiffres de meme chasse : le tableau des tentatives et le compteur de
   caracteres, qui defile sous les yeux du stagiaire. */
.nv2-examen table,.nv2-examen [class*="compteur"]{font-variant-numeric:tabular-nums}

.nv2-examen :focus-visible{outline:2px solid #12B39F;outline-offset:2px;border-radius:4px}
.nv2-examen ::selection{background:rgba(18,179,159,.28);color:#0B1A2E}
.nv2-examen ::placeholder{color:#9AA7B4;opacity:1}
.nv2-examen button{cursor:pointer}

.nv2-examen *{scrollbar-width:thin;scrollbar-color:rgba(11,26,46,.22) transparent}
.nv2-examen ::-webkit-scrollbar{width:10px;height:10px}
.nv2-examen ::-webkit-scrollbar-track{background:transparent}
.nv2-examen ::-webkit-scrollbar-thumb{
  background:rgba(11,26,46,.20);border-radius:99px;
  border:3px solid transparent;background-clip:content-box;
}
.nv2-examen ::-webkit-scrollbar-thumb:hover{
  background:rgba(11,26,46,.34);background-clip:content-box;
}

/* Profondeur des cartes. */
.nv2-examen .carte{box-shadow:0 18px 50px rgba(11,26,46,.10)}

@media (pointer:coarse){
  /* Sous 16 px, Safari iOS zoome des qu'on touche le champ et ne revient
     jamais a l'echelle : la copie serait redigee dans une page decalee. */
  .nv2-examen textarea{font-size:16px !important;min-height:66px}
  .nv2-examen button{min-height:44px}
}
@media (max-width:640px){
  .nv2-examen p,.nv2-examen li,.nv2-examen td,.nv2-examen th,
  .nv2-examen dd,.nv2-examen dt,.nv2-examen h1,.nv2-examen h2,
  .nv2-examen h3,.nv2-examen h4,.nv2-examen code{overflow-wrap:break-word}
  .nv2-examen .logo img{height:28px}
}

/* --- 2.3 BLOC <style> DE LA PAGE, prefixe --------------------------------- */

.nv2-cursus.nv2-examen{
  --encre:#0B1A2E; --nuit:#12283F; --nuit-2:#183553;
  --or:#12B39F; --or-clair:#2ED3BC;
  --texte-doux:#8CA0B8; --texte-marine:#B8C9DC;
  --erreur:#E08A72; --vert:#7FBFA0;
  min-height:100vh; padding:28px 20px 60px;
  font-family:'Figtree',system-ui,sans-serif; color:#fff; line-height:1.6;
  font-size:16px;
  background:radial-gradient(1200px 600px at 50% -10%, var(--nuit-2), transparent 60%), var(--encre);
  color-scheme:light;
  accent-color:#12B39F;
  -webkit-text-size-adjust:100%;
}
.nv2-examen *{box-sizing:border-box;margin:0;padding:0}
.nv2-examen .zone{max-width:780px;margin:0 auto}
.nv2-examen .logo{display:flex;align-items:center;gap:9px;font-family:'Figtree',sans-serif;font-weight:600;font-size:1.3rem}
.nv2-examen .pastille{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:linear-gradient(145deg,var(--or),var(--or-clair));color:var(--encre)}
.nv2-examen .sous{color:var(--texte-doux);font-size:.92rem}
.nv2-examen .carte{background:rgba(18,40,63,.72);border:1px solid rgba(46,211,188,.16);
  border-radius:14px;padding:24px;margin-top:20px}
.nv2-examen .barre-haut{display:flex;justify-content:space-between;align-items:center;gap:14px;
  flex-wrap:wrap;margin-top:18px;padding-bottom:12px;border-bottom:1px solid rgba(184,201,220,.14)}
.nv2-examen .chrono{font-family:'Spline Sans Mono',monospace;font-size:1.05rem;color:var(--or-clair)}
.nv2-examen .chrono.urgent{color:var(--erreur)}
.nv2-examen .avance{font-family:'Spline Sans Mono',monospace;font-size:.75rem;letter-spacing:.1em;color:var(--texte-doux)}
.nv2-examen .jauge{height:5px;background:rgba(184,201,220,.16);border-radius:3px;overflow:hidden;margin-top:10px}
.nv2-examen .jauge span{display:block;height:100%;background:linear-gradient(90deg,var(--or),var(--or-clair));transition:width .3s}
.nv2-examen .jauge.temps span{transition:width .25s linear}
.nv2-examen .jauge.temps.urgent span{background:linear-gradient(90deg,var(--erreur),#F0A98F)}

.nv2-examen .consigne{background:rgba(11,26,46,.55);border-left:3px solid var(--or);
  border-radius:0 8px 8px 0;padding:12px 15px;margin:16px 0;font-size:.93rem;color:var(--texte-marine)}
.nv2-examen .doc{background:rgba(11,26,46,.72);border:1px solid rgba(184,201,220,.18);border-radius:8px;
  padding:15px;margin:14px 0;font-size:.93rem;color:#EAF0F7;white-space:pre-wrap}

.nv2-examen .q{margin:18px 0 6px;font-weight:600;font-size:1.05rem}
.nv2-examen .num{font-family:'Spline Sans Mono',monospace;font-size:.7rem;letter-spacing:.12em;color:var(--or);display:block;margin-bottom:3px}
.nv2-examen label.opt{display:flex;gap:9px;align-items:flex-start;padding:11px 13px;margin:6px 0;
  background:rgba(11,26,46,.5);border:1px solid rgba(184,201,220,.16);border-radius:8px;cursor:pointer;
  transition:border-color .15s,background .15s}
.nv2-examen label.opt:hover{border-color:rgba(46,211,188,.4)}
.nv2-examen label.opt.choisi{border-color:var(--or);background:rgba(194,160,90,.12)}
.nv2-examen label.opt input{margin-top:5px}

.nv2-examen textarea{width:100%;min-height:260px;font:inherit;font-size:.95rem;color:#fff;line-height:1.65;
  background:rgba(11,26,46,.72);border:1px solid rgba(184,201,220,.22);border-radius:8px;padding:13px;resize:vertical}
.nv2-examen textarea:focus{outline:none;border-color:var(--or);box-shadow:0 0 0 3px rgba(194,160,90,.18)}
.nv2-examen .compteur{font-family:'Spline Sans Mono',monospace;font-size:.72rem;color:var(--texte-doux);margin-top:6px;
  display:flex;justify-content:space-between;gap:12px}
.nv2-examen .compteur.court{color:var(--erreur)}
.nv2-examen .sauve{font-family:'Spline Sans Mono',monospace;font-size:.68rem;color:var(--vert);opacity:0;transition:opacity .3s}
.nv2-examen .sauve.on{opacity:1}

.nv2-examen button{font:inherit;font-weight:600;font-size:.94rem;color:var(--encre);cursor:pointer;
  background:linear-gradient(145deg,var(--or-clair),var(--or));border:none;border-radius:8px;padding:12px 20px}
.nv2-examen button:hover:not(:disabled){filter:brightness(1.07)}
.nv2-examen button:disabled{opacity:.5;cursor:not-allowed}
.nv2-examen button.secondaire{background:transparent;color:var(--texte-marine);border:1px solid rgba(184,201,220,.3)}
.nv2-examen .actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:22px}

.nv2-examen .alerte{display:none;font-size:.88rem;color:var(--erreur);background:rgba(224,138,114,.1);
  border:1px solid rgba(224,138,114,.3);border-radius:8px;padding:10px 12px;margin:14px 0}
.nv2-examen .alerte.on{display:block}
.nv2-examen .info{font-size:.88rem;color:var(--texte-marine);background:rgba(127,191,160,.08);
  border:1px solid rgba(127,191,160,.28);border-radius:8px;padding:10px 12px;margin:14px 0}

.nv2-examen .liste-et{list-style:none;margin:14px 0}
.nv2-examen .liste-et li{padding:9px 0 9px 22px;position:relative;font-size:.93rem;color:var(--texte-marine);
  border-bottom:1px solid rgba(184,201,220,.1)}
.nv2-examen .liste-et li:last-child{border-bottom:none}
.nv2-examen .liste-et li::before{content:'';position:absolute;left:4px;top:17px;width:6px;height:6px;
  border-radius:50%;background:var(--or)}

.nv2-examen .notes{display:flex;gap:14px;flex-wrap:wrap;margin:18px 0}
.nv2-examen .note{flex:1;min-width:150px;background:rgba(11,26,46,.6);border:1px solid rgba(184,201,220,.16);
  border-radius:10px;padding:16px;text-align:center}
.nv2-examen .note b{display:block;font-family:'Figtree',sans-serif;font-size:1.9rem;font-weight:500;color:var(--or-clair)}
.nv2-examen .note.finale b{font-size:2.4rem}
.nv2-examen .note.recu b{color:var(--vert)}
.nv2-examen .note.ajourne b{color:var(--erreur)}
.nv2-examen .note span{font-size:.78rem;color:var(--texte-doux);letter-spacing:.04em}

.nv2-examen .verdict{font-family:'Figtree',sans-serif;font-size:1.5rem;font-weight:500;margin:6px 0 2px}
.nv2-examen .verdict.recu{color:var(--vert)}
.nv2-examen .verdict.ajourne{color:var(--erreur)}

.nv2-examen table.hist{width:100%;border-collapse:collapse;margin-top:12px;font-size:.88rem}
.nv2-examen table.hist th{text-align:left;color:var(--texte-doux);font-weight:500;font-size:.76rem;
  letter-spacing:.08em;padding:6px 8px;border-bottom:1px solid rgba(184,201,220,.16)}
.nv2-examen table.hist td{padding:8px;border-bottom:1px solid rgba(184,201,220,.08);color:var(--texte-marine)}

.nv2-examen .pied{margin-top:34px;text-align:center;font-size:.78rem;color:var(--texte-doux)}
@media(max-width:520px){
  .nv2-cursus.nv2-examen h1{font-size:1.4rem}
  .nv2-examen .carte{padding:18px}
}


/* La section « test-francais » a ete RETIREE du socle le 18/09/2026 :
   la page n'est plus servie (redirection 302) et son ecran pesait
   13 Ko sur une feuille chargee par les 56 pages. */

/* Le bloc « LOGO-SVG » des anciennes pages a ete RETIRE : aucune de ses
   classes (ico-logo, ico-tel, demo-sonnerie, logo-pastille) n' apparait
   dans une page du site. */
