/* ============================================================================
   ExpertMalin — LES JETONS DE MARQUE
   Prototype phase 10. Un seul fichier, charge par toutes les pages du site.
   ----------------------------------------------------------------------------
   POURQUOI CE FICHIER EXISTE
   L'audit a montre que le site ne portait pas trois chartes, mais une charte
   et deux surcouches :
     - em-coaching.css declarait deja les MEMES --orange, --navy, --ink que
       rs7004.html ; seules deux couleurs d'univers s'y ajoutaient, --coach
       (vert) et --form (violet), et c'est ce vert et ce violet qui donnaient
       l'impression de changer de site ;
     - la famille editoriale (/fiches/, /formations/, /qualiopi/) declarait la
       meme encre #151F34 et le meme accent #E76709 sous d'autres noms ;
     - l'accueil declarait un orange different d'un pixel de teinte (#E76709
       contre #E4610F ailleurs) — un ecart invisible a l'oeil mais reel.

   COMMENT IL FONCTIONNE
   Il ne redefinit RIEN de ce qui existe : il declare des jetons prefixes
   « --em- », et chaque page remappe ensuite ses propres variables dessus. Une
   page qui ne remappe rien continue de fonctionner exactement comme avant.
   Le retour arriere se fait en retirant une ligne de <link>.
   ========================================================================== */

:root{
  /* ── Marque ────────────────────────────────────────────────────────────── */
  --em-marque:#E76709;          /* l'orange ExpertMalin, seule couleur d'action */
  --em-marque-fonce:#B44A08;    /* survol, texte sur fond clair */
  --em-marque-voile:#FDF2E8;    /* aplats, badges, surlignages */
  --em-marque-ligne:#F0DFC8;

  /* ── Encre et fonds ────────────────────────────────────────────────────── */
  --em-encre:#151F34;           /* titres, texte fort */
  --em-encre-2:#31405E;
  --em-encre-douce:#4A5468;     /* texte courant secondaire */
  --em-encre-pale:#7A8398;      /* mentions, legendes */
  --em-fond:#F6F7F9;            /* fond de page */
  --em-surface:#FFFFFF;         /* cartes, panneaux */
  --em-surface-2:#F3F5FA;
  --em-trait:#DEE3EB;
  --em-trait-fort:#C3CBD8;
  --em-nuit:#101B30;            /* aplats sombres : bandes, pied de page */

  /* ── Etats ─────────────────────────────────────────────────────────────── */
  --em-ok:#1B6553;
  --em-alerte:#B45309;
  --em-danger:#A32E17;

  /* ── Typographie ───────────────────────────────────────────────────────── */
  /* Deux polices pour tout le site, contre six avant cette phase.
     Archivo porte le texte et l'interface ; Newsreader porte les titres et
     donne a un organisme de formation la voix qu'une grotesque seule n'a pas. */
  --em-f-texte:"Inter Tight",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --em-f-titre:"Bricolage Grotesque",system-ui,-apple-system,sans-serif;
  --em-f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* ── Mesures ───────────────────────────────────────────────────────────── */
  --em-largeur:1080px;          /* largeur de contenu commune */
  --em-rayon:12px;
  --em-rayon-s:9px;
  --em-ombre:0 1px 2px rgba(21,31,52,.05), 0 8px 24px -12px rgba(21,31,52,.14);
  --em-ombre-forte:0 2px 6px rgba(21,31,52,.08), 0 22px 48px -22px rgba(21,31,52,.3);
}

/* ============================================================================
   FIL D'ARIANE COMMUN
   Le visiteur doit toujours savoir ou il se trouve dans l'architecture.
   Quatre pages n'en avaient aucun ; trois autres en avaient un different.
   ========================================================================== */
.em-fil{
  font-family:var(--em-f-texte);
  font-size:12.5px;font-weight:600;letter-spacing:.02em;
  color:var(--em-encre-pale);
  padding:14px 0 0;margin:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
}
.em-fil a{color:var(--em-encre-pale);text-decoration:none}
.em-fil a:hover{color:var(--em-marque-fonce);text-decoration:underline;text-underline-offset:3px}
.em-fil span[aria-current]{color:var(--em-encre-2)}
.em-fil .sep{color:var(--em-trait-fort);font-weight:400}

/* ============================================================================
   SIGNATURE D'UNIVERS
   ExpertMalin reste la marque ; l'univers n'est qu'une mention, dans la
   couleur de la marque et jamais dans une couleur a lui.
   ========================================================================== */
.em-univers{
  display:inline-block;font-family:var(--em-f-texte);
  font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--em-marque-fonce);background:var(--em-marque-voile);
  border:1px solid var(--em-marque-ligne);border-radius:999px;
  padding:4px 10px;vertical-align:middle;
}

/* ============================================================================
   BOUTONS — une seule signification sur tout le site
     .em-btn            action principale, fond plein orange
     .em-btn.ghost      action secondaire, contour
     .em-btn.sombre     action principale sur fond sombre
   ========================================================================== */
.em-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--em-f-texte);font-size:15px;font-weight:700;line-height:1;
  padding:12px 20px;border-radius:var(--em-rayon-s);border:1px solid transparent;
  background:var(--em-marque);color:#fff;text-decoration:none;cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.em-btn:hover{background:var(--em-marque-fonce)}
.em-btn.ghost{background:transparent;color:var(--em-encre);border-color:var(--em-trait-fort)}
.em-btn.ghost:hover{border-color:var(--em-marque);color:var(--em-marque-fonce)}
.em-btn.sombre{background:#fff;color:var(--em-encre)}
.em-btn:focus-visible{outline:2px solid var(--em-marque);outline-offset:2px}

/* ============================================================================
   PIED DE PAGE COMMUN
   ========================================================================== */
.em-pied{
  background:var(--em-surface);border-top:1px solid var(--em-trait);
  font-family:var(--em-f-texte);margin-top:0;
}
.em-pied .em-pied-in{max-width:var(--em-largeur);margin:0 auto;padding:26px 20px 32px}
.em-pied .em-pied-liens{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 12px;padding:0;list-style:none}
.em-pied .em-pied-liens a{font-size:13.5px;font-weight:600;color:var(--em-encre-douce);text-decoration:none}
.em-pied .em-pied-liens a:hover{color:var(--em-marque-fonce)}
.em-pied .em-pied-legal{margin:0;font-size:12.5px;line-height:1.65;color:var(--em-encre-pale);max-width:78ch}
.em-pied .em-pied-legal a{color:var(--em-encre-pale)}

/* ============================================================================
   ACCESSIBILITE
   ========================================================================== */
.em-saut{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.em-saut:focus{position:static;width:auto;height:auto;display:inline-block;
  margin:8px;padding:9px 14px;background:var(--em-marque);color:#fff;
  border-radius:var(--em-rayon-s);font-weight:700;font-family:var(--em-f-texte)}

@media (prefers-reduced-motion:reduce){
  .em-btn{transition:none}
}

/* ============================================================================
   BARRE DE SITE COMMUNE
   ----------------------------------------------------------------------------
   Constat de l'audit : sur l'univers coaching / formalites / Qualiopi, la barre
   du haut portait la navigation DE LA PAGE (Programme, Tarifs, Questions...) a
   la place de la navigation DU SITE, et le logo menait a /coaching/ et non a
   l'accueil. Le visiteur n'avait aucun moyen de rejoindre les formations, ni
   meme de savoir qu'elles existaient.

   Cette barre porte les memes cinq entrees que l'accueil, dans le meme ordre.
   Elle se pose AU-DESSUS de la barre existante, qui devient une sous-navigation
   clairement subordonnee (.em-sous). On ne retire rien.
   ========================================================================== */
.em-tete{
  background:var(--em-surface);border-bottom:1px solid var(--em-trait);
  font-family:var(--em-f-texte);position:relative;z-index:60;
}
.em-tete-in{
  max-width:var(--em-largeur);margin:0 auto;padding:10px 20px;
  display:flex;align-items:center;gap:14px 26px;flex-wrap:wrap;
}
.em-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.em-logo .sceau{
  width:30px;height:30px;border-radius:50%;background:var(--em-marque);
  display:grid;place-items:center;flex:0 0 auto;
}
.em-logo .sceau svg{width:17px;height:17px;display:block}
.em-logo .nom{
  font-family:var(--em-f-texte);font-weight:700;font-size:17px;letter-spacing:-.02em;
  color:var(--em-encre);line-height:1;white-space:nowrap;
}
.em-logo .nom b{color:var(--em-marque);font-weight:700}
.em-logo:hover .nom{color:var(--em-marque-fonce)}

.em-nav{display:flex;align-items:center;gap:4px 22px;flex-wrap:wrap;flex:1 1 auto}
.em-nav a{
  font-size:14.5px;font-weight:600;color:var(--em-encre-2);text-decoration:none;
  padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap;
}
.em-nav a:hover{color:var(--em-marque-fonce);border-bottom-color:var(--em-marque)}
.em-nav a[aria-current="page"],.em-nav a.ici{color:var(--em-marque-fonce);border-bottom-color:var(--em-marque)}
.em-tete-fin{display:flex;align-items:center;gap:12px;flex:0 0 auto;margin-left:auto}
.em-tete-fin a{font-size:13.5px;font-weight:600;color:var(--em-encre-douce);text-decoration:none;white-space:nowrap}
.em-tete-fin a:hover{color:var(--em-marque-fonce)}

@media (max-width:900px){
  .em-tete-in{padding:9px 16px;gap:8px 16px}
  .em-nav{order:3;flex-basis:100%;gap:2px 16px;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .em-nav::-webkit-scrollbar{display:none}
  .em-nav a{font-size:13.5px}
  .em-tete-fin{margin-left:auto}
  .em-logo .nom{font-size:16px}
}
@media (max-width:420px){
  .em-tete-fin a.em-apprenant{display:none}
}

/* ── Sous-navigation : la navigation DANS la page ─────────────────────────── */
.em-sous{
  background:var(--em-surface-2);border-bottom:1px solid var(--em-trait);
  font-family:var(--em-f-texte);
}
.em-sous-in{max-width:var(--em-largeur);margin:0 auto;padding:0 20px;
  display:flex;align-items:center;gap:6px 20px;overflow-x:auto;scrollbar-width:none}
.em-sous-in::-webkit-scrollbar{display:none}
.em-sous .quoi{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--em-encre-pale);padding:11px 0;white-space:nowrap;flex:0 0 auto}
.em-sous a{font-size:14px;font-weight:600;color:var(--em-encre-douce);text-decoration:none;
  padding:11px 0;white-space:nowrap;border-bottom:2px solid transparent}
.em-sous a:hover{color:var(--em-marque-fonce);border-bottom-color:var(--em-marque)}
/* PHASE 10.1 — regression corrigee : « .em-sous a » (0,1,1) battait « .em-btn » (0,1,0),
   ce qui peignait le texte du bouton d action en gris sur fond orange — contraste 2,30.
   Le bouton garde sa signature partout ou il se trouve. */
.em-sous a.em-btn{color:#fff;border-bottom:0;padding:8px 15px}
.em-sous a.em-btn:hover{color:#fff;background:var(--em-marque-fonce);border-bottom:0}

/* ============================================================================
   PHASE 10.2 — CONTRASTE DES ACTIONS
   ----------------------------------------------------------------------------
   L'audit 10.1 a mesure le bouton plein a 3,31:1 avec du texte blanc : sous le
   seuil WCAG AA de 4,5:1 pour du texte de 14-15 px. Quatre familles de pages
   etaient conformes avant l'unification (vert 5,28 · violet 6,83) et ne
   l'etaient plus.

   La marque ne change pas : #E76709 reste l'orange des accents, des filets, des
   surlignages et des textes d'accroche. Seul le FOND DES BOUTONS PLEINS passe a
   #B44A08 — l'orange profond deja utilise au survol — qui donne 5,35:1.

   Ce bloc est charge apres les feuilles locales sur les 135 pages : il surcharge
   sans qu'aucune d'elles ait a etre modifiee, et se retire d'un seul tenant.
   ========================================================================== */
:root{
  --em-action:#B44A08;        /* fond des boutons pleins — contraste 5,35:1 */
  --em-action-survol:#8F3A04; /* survol — contraste 7,57:1 */
}

.em-btn,
a.btn.btn-o, button.btn.btn-o, .btn-o,
a.btn.btn-c, button.btn.btn-c, .btn-c,
a.btn.btn-p, button.btn.btn-p, .btn-p,
a.btn.btn-blue, button.btn.btn-blue, .btn-blue,
a.btn.btn-navy, button.btn.btn-navy, .btn-navy,
.fcta, .dc-cta, .ic-cta,
.mc.o .mc-foot .btn-o, .mc.b .mc-foot .btn-blue,
.em-sous a.em-btn{
  background:var(--em-action);
  color:#fff;
}
.em-btn:hover,
a.btn.btn-o:hover, button.btn.btn-o:hover, .btn-o:hover,
a.btn.btn-c:hover, button.btn.btn-c:hover, .btn-c:hover,
a.btn.btn-p:hover, button.btn.btn-p:hover, .btn-p:hover,
a.btn.btn-blue:hover, button.btn.btn-blue:hover, .btn-blue:hover,
a.btn.btn-navy:hover, button.btn.btn-navy:hover, .btn-navy:hover,
.fcta:hover, .dc-cta:hover, .ic-cta:hover,
.em-sous a.em-btn:hover{
  background:var(--em-action-survol);
  color:#fff;
}
/* Le focus reste visible et distinct du survol. */
.em-btn:focus-visible,
.btn-o:focus-visible, .btn-c:focus-visible, .btn-p:focus-visible,
.btn-blue:focus-visible, .btn-navy:focus-visible,
.fcta:focus-visible, .dc-cta:focus-visible{
  outline:3px solid var(--em-encre);
  outline-offset:2px;
}
/* Un bouton desactive, s'il en existe un, doit se lire comme desactive. */
.em-btn[disabled], .btn[disabled], .btn-o[disabled], .fcta[disabled],
.em-btn[aria-disabled="true"], .btn[aria-disabled="true"]{
  background:var(--em-trait-fort);
  color:var(--em-surface);
  cursor:not-allowed;
  box-shadow:none;
}
/* Les boutons de contour ne prennent pas de fond : on les protege des regles
   ci-dessus, qu'une classe combinee pourrait attraper. */
.btn-ghost, .btn-g, .em-btn.ghost, a.btn.btn-ghost, button.btn.btn-ghost{
  background:transparent;
}
.btn-ghost:hover, .em-btn.ghost:hover{background:transparent}

/* Cas particuliers releves par le balayage des 121 boutons pleins du site :
   un degrade sur l'accueil, une classe « .btn-acc » propre au pole
   accompagnement, et un « .btn » sans modificateur sur la page 404. */
.btn-o{background:var(--em-action)}
.btn-acc{background:var(--em-action);color:#fff}
.btn-acc:hover{background:var(--em-action-survol);color:#fff}
body .btn:not(.btn-ghost):not(.btn-g):not(.btn-navy-clair){background:var(--em-action);color:#fff}
body .btn.btn-ghost, body .btn.btn-g{background:transparent;color:var(--em-encre)}

/* Le lien d'evitement doit se voir quand il prend le focus : sur deux pages il
   ne portait que le contour par defaut du navigateur (1 px). */
.em-saut:focus,
.em-saut:focus-visible{
  outline:3px solid var(--em-encre);
  outline-offset:2px;
}