/* =========================================================
   L'ESSENTIEL DUERP - Feuille de style de marque
   SOLARYA GROUP - v1.0 - 08/09/2026
   Palette arretee le 09/09/2026 : graphite et ambre lumineux.
   Elle sort du bleu, code de tout ce marche, et de l'orange de l'INRS.
   Les teintes beige et creme restent proscrites.

   Ajout du 09/09/2026, la mise en relief.
   .ep-cle marque LA donnee qui compte dans un paragraphe : un seuil, une
   duree, un effectif, un delai, un montant. Fond ambre voile, texte
   graphite, gras. Regle d'emploi : une seule .ep-cle par reponse et par
   carte. Une page entierement surlignee ne surligne plus rien.
   Meme date, .ep-eyebrow quitte la pastille arrondie a fond pale pour un
   surtitre en capitales tenu par un filet ambre : la forme arrondie reste
   aux elements cliquables.
   ========================================================= */

:root{
  /* Graphite, la dominante */
  --ep-graphite:#1B1E21;
  --ep-encre:#3A4046;
  --ep-encre-clair:#5A636B;
  --ep-voile:#F0F1F2;

  /* Ambre lumineux, l'accent. Le texte pose dessus reste graphite :
     du blanc sur cet ambre descendrait sous le seuil de lisibilite. */
  --ep-ambre:#EDA61E;
  --ep-ambre-fonce:#C88711;
  --ep-ambre-voile:#FDF3E0;
  --ep-sur-ambre:#1B1E21;
  /* Ambre assombri pour les titres poses sur fond blanc : l'ambre vif y
     descendrait sous le seuil de lisibilite. */
  --ep-ambre-titre:#9A6A08;

  /* Neutres, tres legerement tiedes pour accompagner l'ambre */
  --ep-blanc:#FFFFFF;
  --ep-gris-fond:#F5F5F4;
  --ep-gris-bord:#DEDEDC;
  --ep-gris-texte:#61656A;
  --ep-noir:#15181B;

  /* Cotation du risque, quatre niveaux.
     Les fonds montent en clarte decroissante, du tres clair au sombre : les
     quatre se distinguent alors meme en noir et blanc, et meme pour un oeil
     qui confond le rouge et le vert. La forme portee par chaque libelle,
     cercle, losange, triangle et carre, acheve de les separer.
     Trois roles par niveau : le fond de la pastille, le texte pose dessus,
     et la teinte pleine pour un chiffre ecrit sur fond blanc. */
  --ep-vert-fond:#0E9F7E;
  --ep-vert-sur:#04342C;
  --ep-vert:#0B7A60;

  --ep-jaune-fond:#FFD23F;
  --ep-jaune-sur:#4A3800;
  --ep-jaune:#8A6600;

  --ep-cote-orange-fond:#FF6B35;
  --ep-cote-orange-sur:#4A1B0C;
  --ep-cote-orange:#D14508;

  --ep-rouge-fond:#D62246;
  --ep-rouge-sur:#FFFFFF;
  --ep-rouge:#C01C3C;

  /* Structure */
  --ep-rayon:10px;
  --ep-rayon-lg:16px;
  --ep-ombre:0 1px 2px rgba(27,30,33,.06),0 6px 20px rgba(27,30,33,.07);
  --ep-ombre-forte:0 2px 6px rgba(27,30,33,.10),0 18px 40px rgba(27,30,33,.12);
  --ep-max:1120px;
  --ep-transition:.18s ease;

  /* Typographie */
  --ep-titre:"Barlow Condensed","Oswald","Arial Narrow",system-ui,sans-serif;
  --ep-texte:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}

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

/* Une regle d'auteur ecrase le display:none par defaut du navigateur.
   Les elements masques par l'attribut hidden le restent donc explicitement. */
[hidden]{display:none!important}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--ep-texte);
  font-size:16px;
  line-height:1.62;
  color:var(--ep-noir);
  background:var(--ep-blanc);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{
  font-family:var(--ep-titre);
  font-weight:600;
  letter-spacing:.01em;
  line-height:1.16;
  color:var(--ep-graphite);
  margin:0 0 .5em;
}
h1{font-size:clamp(2rem,5.2vw,3.15rem)}
h2{font-size:clamp(1.55rem,3.6vw,2.3rem)}
h3{font-size:clamp(1.2rem,2.4vw,1.45rem)}
h4{font-size:1.05rem}

p{margin:0 0 1.05em}
a{color:var(--ep-encre);text-decoration:none}
a:hover{text-decoration:underline}

.ep-wrap{max-width:var(--ep-max);margin:0 auto;padding:0 20px}
.ep-etroit{max-width:760px;margin-left:auto;margin-right:auto}
.ep-centre{text-align:center}
.ep-secondaire{color:var(--ep-gris-texte)}
.ep-petit{font-size:.875rem}
.ep-mini{font-size:.79rem;line-height:1.55}

/* ---------- En-tete ---------- */
.ep-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--ep-gris-bord);
}
.ep-header-in{
  max-width:var(--ep-max);margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
/* La signature : le nom tenu par un filet ambre, DUERP en ambre sous le nom.
   Ce montage separe la marque, L'ESSENTIEL, du marche, DUERP. L'ambre porte
   le mot-cle, comme sur la couverture du document et sur l'icone du site :
   c'est DUERP que le gerant cherche, il se lit donc en premier. */
.ep-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.ep-logo:hover{text-decoration:none}
.ep-logo > span{
  display:block;border-left:3px solid var(--ep-ambre);padding-left:13px;line-height:1;
}
.ep-logo-marque{
  display:block;font-family:var(--ep-titre);font-size:1.28rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ep-graphite);
  line-height:.98;
}
.ep-logo-marque em{
  display:block;font-style:normal;color:var(--ep-ambre);
  letter-spacing:.26em;font-size:.98em;
}
.ep-logo-sous{
  display:block;font-family:var(--ep-texte);font-size:.58rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--ep-gris-texte);
  margin-top:5px;
}
/* Sur fond sombre, la signature passe en clair. */
.ep-hero .ep-logo-marque,.ep-footer .ep-logo-marque{color:#fff}
.ep-hero .ep-logo-marque em,.ep-footer .ep-logo-marque em{color:var(--ep-ambre)}
/* La barre unique. Les 56 pages publiques portent les memes cinq portes,
   metiers, risques, affichages, verification et tarifs, dans cet ordre.
   L'appel a composer vit hors du <nav> : il garde ainsi sa ligne quand les
   portes passent en dessous, sur telephone. */
.ep-nav{display:flex;align-items:center;gap:22px;margin-left:auto;min-width:0}
.ep-nav a{color:var(--ep-graphite);font-size:.92rem;font-weight:500;white-space:nowrap}

/* Entre 721 et 1000 points, la largeur manque pour cinq portes cote a cote.
   Les deux dernieres se retirent, le pied de page continue de les porter. */
@media(max-width:1000px){
  .ep-nav{gap:16px}
  .ep-nav a.ep-nav-opt:nth-child(n+4){display:none}
}

/* Sur telephone, la signature et l'appel gardent la premiere ligne, et les
   cinq portes glissent sur une seconde ligne qui defile du pouce. Les trois
   premieres, dont les affichages, tiennent a l'ecran des 375 points. Le
   parcours de composition garde sa barre courte, sans seconde ligne. */
@media(max-width:720px){
  body:not(.ep-app) .ep-header-in{flex-wrap:wrap;row-gap:0;padding:10px 20px 0}
  body:not(.ep-app) .ep-nav{
    order:3;width:100%;margin-left:0;gap:18px;
    overflow-x:auto;scrollbar-width:none;
    border-top:1px solid var(--ep-gris-bord);
    padding:7px 0 8px;
  }
  body:not(.ep-app) .ep-nav::-webkit-scrollbar{display:none}
  body:not(.ep-app) .ep-nav a.ep-nav-opt:nth-child(n+4){display:inline}
  body:not(.ep-app) .ep-nav a{font-size:.87rem}
  body.ep-app .ep-nav a.ep-nav-opt{display:none}
}

/* Sur petit ecran, le bouton d'en-tete se raccourcit pour tenir sur une ligne.
   Le bandeau d'accueil porte le meme appel, en entier. */
@media(max-width:480px){
  .ep-header-in > .ep-btn{padding:9px 13px;font-size:.85rem;white-space:nowrap}
  .ep-header-in > .ep-btn .ep-btn-long{display:none}
  .ep-logo-marque{font-size:1.12rem}
  .ep-logo-sous{letter-spacing:.14em}
}

/* Une reponse qui reste sur l’appareil du gerant le dit a l’endroit ou il
   l’ecrit. La teinte emeraude dit une bonne nouvelle, pas une alerte. */
.ep-local{
  display:inline-block;margin-top:3px;font-weight:600;color:var(--ep-vert-sur);
  background:#E4F5F0;border-radius:3px;padding:1px 7px;font-size:.86em;
}

/* ---------- Boutons ---------- */
/* Le libelle long du bouton d'en-tete prolonge le mot qui le precede : il
   reprend une espace de mot, la ou l'ecart de 9 points separe l'icone du
   texte. Sans cela, « Composer mon DUERP » se lit avec un trou au milieu. */
.ep-btn-long{margin-left:calc(.28em - 9px)}
.ep-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--ep-texte);font-size:1rem;font-weight:600;
  padding:13px 26px;border-radius:var(--ep-rayon);border:1px solid transparent;
  cursor:pointer;transition:var(--ep-transition);text-decoration:none;
  line-height:1.2;
}
.ep-btn:hover{text-decoration:none;transform:translateY(-1px)}
.ep-btn:active{transform:translateY(0)}
.ep-btn:disabled,.ep-btn[aria-disabled="true"]{
  opacity:.45;cursor:not-allowed;transform:none;
}
.ep-btn-primaire{background:var(--ep-ambre);color:var(--ep-sur-ambre);box-shadow:0 2px 10px rgba(237,166,30,.28)}
.ep-btn-primaire:hover{background:var(--ep-ambre-fonce);color:var(--ep-sur-ambre)}
.ep-btn-bleu{background:var(--ep-encre);color:#fff}
.ep-btn-bleu:hover{background:var(--ep-graphite);color:#fff}
.ep-btn-secondaire{background:var(--ep-blanc);color:var(--ep-graphite);border-color:var(--ep-gris-bord)}
.ep-btn-secondaire:hover{border-color:var(--ep-encre-clair);color:var(--ep-encre)}
.ep-btn-large{width:100%}
.ep-btn-sm{padding:9px 16px;font-size:.9rem}

/* ---------- Bandeau d'accueil ---------- */
.ep-hero{
  background:linear-gradient(168deg,var(--ep-graphite) 0%,#22272B 55%,#2C3238 100%);
  color:#fff;padding:76px 0 82px;position:relative;overflow:hidden;
}
.ep-hero::after{
  content:"";position:absolute;right:-140px;top:-140px;
  width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(237,166,30,.20) 0%,rgba(237,166,30,0) 68%);
}
.ep-hero h1{color:#fff;max-width:15ch}
.ep-hero p{color:rgba(255,255,255,.86);font-size:1.1rem;max-width:56ch}
.ep-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;position:relative;z-index:1}
@media(max-width:880px){.ep-hero-grid{grid-template-columns:1fr;gap:34px}}
/* Le surtitre. Une ligne de capitales condensees tenue par un filet ambre.
   La pastille arrondie a fond pale empruntait la forme des boutons et
   brouillait la hierarchie : l'arrondi reste aux elements cliquables. */
.ep-eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--ep-titre);font-size:.95rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--ep-ambre-titre);margin-bottom:16px;
}
.ep-eyebrow::before{
  content:"";flex:0 0 auto;width:26px;height:3px;background:var(--ep-ambre);
}
/* Sur le bandeau sombre, l'ambre vif reprend la main. */
.ep-hero .ep-eyebrow{color:var(--ep-ambre)}
.ep-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.ep-hero-note{margin-top:18px;font-size:.85rem;color:rgba(255,255,255,.7)}

/* ---------- Sections ---------- */
.ep-section{padding:66px 0}
.ep-section-gris{background:var(--ep-gris-fond)}
.ep-section-bleu{background:var(--ep-voile)}
.ep-section-titre{max-width:62ch;margin-bottom:34px}

/* ---------- Cartes ---------- */
.ep-cartes{display:grid;gap:20px}
.ep-cartes-2{grid-template-columns:repeat(2,1fr)}
.ep-cartes-3{grid-template-columns:repeat(3,1fr)}
.ep-cartes-4{grid-template-columns:repeat(4,1fr)}
/* Cinq etapes tiennent sur une ligne en grand ecran, puis se replient en
   trois puis en deux, la derniere carte occupant alors toute la largeur. */
.ep-cartes-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){.ep-cartes-5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.ep-cartes-3,.ep-cartes-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.ep-cartes-5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.ep-cartes-2,.ep-cartes-3,.ep-cartes-4,.ep-cartes-5{grid-template-columns:1fr}}

/* La couleur de texte se pose explicitement : une carte posee sur le bandeau
   sombre heriterait sinon du blanc et deviendrait illisible. */
.ep-carte{
  background:var(--ep-blanc);border:1px solid var(--ep-gris-bord);
  border-radius:var(--ep-rayon-lg);padding:24px;box-shadow:var(--ep-ombre);
  color:var(--ep-noir);
}
.ep-carte p{color:var(--ep-noir)}
.ep-carte .ep-secondaire,.ep-carte .ep-source{color:var(--ep-gris-texte)}
.ep-carte h3{margin-bottom:.35em}
.ep-carte p:last-child{margin-bottom:0}
.ep-carte-num{
  width:34px;height:34px;border-radius:9px;background:var(--ep-voile);
  color:var(--ep-encre);font-family:var(--ep-titre);font-size:1.1rem;font-weight:600;
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}

/* ---------- Icones SVG ---------- */
.ep-ico{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.ep-ico-lg{width:30px;height:30px}
.ep-ico-sm{width:18px;height:18px}

/* ---------- Listes ---------- */
.ep-liste{list-style:none;padding:0;margin:0}
.ep-liste li{position:relative;padding-left:29px;margin-bottom:11px}
.ep-liste li::before{
  content:"";position:absolute;left:0;top:.52em;width:15px;height:9px;
  border-left:2px solid var(--ep-ambre);border-bottom:2px solid var(--ep-ambre);
  transform:rotate(-45deg);
}
.ep-liste-neutre li::before{border-color:var(--ep-encre-clair)}
/* Liste a icones : l'icone remplace la coche, ambre ou gris selon la liste */
.ep-liste-ico li{padding-left:31px}
.ep-liste-ico li::before{content:none}
.ep-liste-ico li > .ep-ico{position:absolute;left:0;top:.18em;width:20px;height:20px;color:var(--ep-ambre)}
.ep-liste-ico.ep-liste-neutre li > .ep-ico{color:var(--ep-encre-clair)}

/* ---------- Encadres ---------- */
.ep-encadre{
  border:1px solid var(--ep-gris-bord);border-left:4px solid var(--ep-encre-clair);
  background:var(--ep-voile);border-radius:var(--ep-rayon);
  padding:18px 20px;margin:22px 0;
}
.ep-encadre-alerte{border-left-color:var(--ep-ambre);background:var(--ep-ambre-voile)}
.ep-encadre p:last-child{margin-bottom:0}

/* Le bandeau de veille : il porte une information de droit qui a change,
   en tete de page. Le filet ambre s'epaissit, et la section qui le tient
   se resserre pour qu'il colle au bandeau d'accueil. */
.ep-section-veille{padding:0}
.ep-bandeau-loi{border-left-width:6px;margin:26px 0 0}
.ep-bandeau-loi .ep-encadre-titre{
  font-size:1.12rem;display:flex;align-items:center;gap:8px;
}
.ep-bandeau-loi svg{color:var(--ep-ambre-titre);flex:none}
.ep-encadre-titre{
  font-family:var(--ep-titre);font-size:1.05rem;font-weight:600;
  color:var(--ep-graphite);margin:0 0 6px;
}

.ep-source{font-size:.79rem;color:var(--ep-gris-texte);font-style:italic}

/* ---------- La donnee qui compte ----------
   Un employeur lit en diagonale entre deux clients : le seuil, la duree ou
   le montant se donne a voir sans lecture suivie. Fond ambre voile, texte
   graphite, et un filet ambre sous le mot pour que le repere tienne aussi
   en noir et blanc. Une seule par reponse et par carte. */
.ep-cle{
  background:var(--ep-ambre-voile);color:var(--ep-graphite);font-weight:700;
  border-radius:2px;border-bottom:2px solid rgba(237,166,30,.75);
  /* Le voile deborde par l'ombre plutot que par un remplissage : une virgule
     posee juste apres la donnee reste collee au dernier mot. */
  box-shadow:0 0 0 3px var(--ep-ambre-voile);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
/* Le gris d'un corps de reponse reste hors de la donnee mise en relief. */
.ep-faq-corps .ep-cle,.ep-secondaire .ep-cle{color:var(--ep-graphite)}

/* ---------- Tarifs ---------- */
.ep-tarif{
  background:var(--ep-blanc);border:1px solid var(--ep-gris-bord);
  border-radius:var(--ep-rayon-lg);padding:28px;text-align:center;
  display:flex;flex-direction:column;box-shadow:var(--ep-ombre);
  color:var(--ep-noir);
}
.ep-tarif-vedette{border:2px solid var(--ep-ambre);box-shadow:var(--ep-ombre-forte);position:relative}
.ep-tarif-badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--ep-ambre);color:var(--ep-sur-ambre);font-size:.72rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;padding:5px 14px;border-radius:100px;
  white-space:nowrap;
}
.ep-tarif-prix{
  font-family:var(--ep-titre);font-size:2.7rem;font-weight:600;
  color:var(--ep-graphite);line-height:1;margin:12px 0 4px;
}
.ep-tarif-prix span{font-size:1rem;font-weight:500;color:var(--ep-gris-texte)}
/* Le montant garde la grande taille du bloc. La regle ci-dessus habille le
   texte qui suit le prix, « pour douze mois », et elle rapetissait aussi le
   nombre, qui vit dans un span porteur de data-ep-prix. */
.ep-tarif-prix span[data-ep-prix]{font-size:inherit;font-weight:inherit;color:inherit}
.ep-tarif .ep-liste{text-align:left;margin:18px 0 22px;flex:1}
.ep-tarif .ep-btn{margin-top:auto}

/* ---------- FAQ ---------- */
.ep-faq{max-width:800px;margin:0 auto}
.ep-faq details{
  border:1px solid var(--ep-gris-bord);border-radius:var(--ep-rayon);
  background:var(--ep-blanc);margin-bottom:11px;overflow:hidden;
}
.ep-faq details[open]{border-color:var(--ep-encre-clair)}
.ep-faq summary{
  cursor:pointer;padding:16px 46px 16px 19px;font-weight:600;
  color:var(--ep-graphite);position:relative;list-style:none;
}
.ep-faq summary::-webkit-details-marker{display:none}
.ep-faq summary::after{
  content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--ep-encre-clair);border-bottom:2px solid var(--ep-encre-clair);
  transform:translateY(-70%) rotate(45deg);transition:var(--ep-transition);
}
.ep-faq details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.ep-faq-corps{padding:0 19px 18px;color:var(--ep-gris-texte)}
.ep-faq-corps p:last-child{margin-bottom:0}

/* ---------- Cartes a icone, accueil (15/09/2026) ----------
   La pastille numerotee reste, l'icone trait fin se pose a sa droite. */
.ep-carte-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.ep-carte-tete .ep-carte-num{margin-bottom:0}
.ep-carte-ico{color:var(--ep-ambre-titre)}
.ep-carte-puces li{margin-bottom:8px}
.ep-carte-puces li:last-child{margin-bottom:0}

/* ---------- Sections repliables, accueil (15/09/2026) ----------
   Rapport 05-Rapports\ACCUEIL_REPLIABLE_15-09.md. Chaque section se plie
   sous son titre, fermee par defaut, sans script : details et summary.
   La fleche reprend le chevron de la foire aux questions, en ambre titre.
   Un lien vers une section repliee l'ouvre (essentielpro-config.js). */
.ep-section-repli{padding:30px 0}
.ep-repli > summary{
  list-style:none;cursor:pointer;position:relative;
  padding:6px 52px 6px 0;border-radius:var(--ep-rayon);
}
.ep-repli > summary::-webkit-details-marker{display:none}
.ep-repli > summary::after{
  content:"";position:absolute;right:14px;top:50%;width:12px;height:12px;
  border-right:2.5px solid var(--ep-ambre-titre);border-bottom:2.5px solid var(--ep-ambre-titre);
  transform:translateY(-70%) rotate(45deg);transition:var(--ep-transition);
}
.ep-repli[open] > summary::after{transform:translateY(-20%) rotate(-135deg)}
.ep-repli > summary h2{margin:0}
.ep-repli > summary .ep-eyebrow{margin-bottom:8px}
.ep-repli > summary:hover h2{color:var(--ep-encre-clair)}
.ep-repli[open] > summary{margin-bottom:22px}
.ep-repli[open]{padding-bottom:36px}

/* Le repli en forme de touche : detail d'une carte de tarif, liste des
   questions. Meme chevron que chaque question. */
.ep-repli-bouton > summary{
  list-style:none;cursor:pointer;position:relative;display:block;
  padding:12px 46px 12px 18px;border:1px solid var(--ep-gris-bord);
  border-radius:var(--ep-rayon);background:var(--ep-blanc);
  font-weight:600;color:var(--ep-graphite);text-align:left;
}
.ep-repli-bouton > summary::-webkit-details-marker{display:none}
.ep-repli-bouton > summary::after{
  content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--ep-encre-clair);border-bottom:2px solid var(--ep-encre-clair);
  transform:translateY(-70%) rotate(45deg);transition:var(--ep-transition);
}
.ep-repli-bouton > summary:hover,.ep-repli-bouton[open] > summary{border-color:var(--ep-encre-clair)}
.ep-repli-bouton[open] > summary::after{transform:translateY(-20%) rotate(-135deg)}
.ep-repli-carte{margin:16px 0 22px}
/* Carte au detail replie : elle garde sa hauteur propre, sans vide sous la touche. */
.ep-tarif-repli{align-self:start}
/* La ligne des entreprises de 50 a 249 salaries, sous les tarifs : taille
   de paragraphe, lien en gras, encadre fin discret. */
.ep-tarifs-grande{
  max-width:560px;margin:30px auto 0;padding:12px 18px;
  border:1px solid var(--ep-gris-bord);border-radius:var(--ep-rayon);
  background:var(--ep-blanc);color:var(--ep-noir);
}
.ep-tarifs-grande a{font-weight:700;color:var(--ep-encre)}
.ep-repli-carte[open] > summary{margin-bottom:6px}
.ep-repli-carte .ep-liste{flex:none}
.ep-faq-tout > summary{max-width:800px;margin:0 auto}
.ep-faq-tout[open] > summary{margin-bottom:18px}

/* ---------- Pied de page ---------- */
.ep-footer{
  background:var(--ep-graphite);color:rgba(255,255,255,.72);
  padding:46px 0 26px;font-size:.9rem;margin-top:0;
}
.ep-footer h4{color:#fff;font-size:.94rem;margin-bottom:12px;letter-spacing:.04em}
.ep-footer a{color:rgba(255,255,255,.8)}
.ep-footer a:hover{color:#fff}
.ep-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
@media(max-width:760px){.ep-footer-grid{grid-template-columns:1fr;gap:26px}}
.ep-footer-bas{
  border-top:1px solid rgba(255,255,255,.14);margin-top:32px;padding-top:18px;
  font-size:.8rem;color:rgba(255,255,255,.55);
}
.ep-footer ul{list-style:none;padding:0;margin:0}
.ep-footer ul li{margin-bottom:8px}

/* =========================================================
   PARCOURS DE COMPOSITION
   ========================================================= */

.ep-app{background:var(--ep-gris-fond);min-height:100vh;padding-bottom:120px}

/* Barre de progression */
.ep-progres{
  position:sticky;top:57px;z-index:50;background:var(--ep-blanc);
  border-bottom:1px solid var(--ep-gris-bord);padding:11px 0;
}
.ep-progres-in{max-width:var(--ep-max);margin:0 auto;padding:0 20px}
.ep-progres-haut{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;gap:12px}
.ep-progres-etape{font-family:var(--ep-titre);font-size:1rem;font-weight:600;color:var(--ep-graphite)}
.ep-progres-pct{font-size:.8rem;color:var(--ep-gris-texte);white-space:nowrap}
.ep-progres-piste{height:6px;background:var(--ep-gris-bord);border-radius:100px;overflow:hidden}
.ep-progres-barre{
  height:100%;width:0;border-radius:100px;
  background:linear-gradient(90deg,var(--ep-encre-clair),var(--ep-ambre));
  transition:width .3s ease;
}

.ep-ecran{padding:34px 0 20px}
.ep-ecran[hidden]{display:none}
.ep-panneau{
  background:var(--ep-blanc);border:1px solid var(--ep-gris-bord);
  border-radius:var(--ep-rayon-lg);padding:28px;box-shadow:var(--ep-ombre);
  margin-bottom:20px;
}
@media(max-width:600px){.ep-panneau{padding:20px 17px}}
.ep-panneau h2{margin-bottom:.3em}
.ep-panneau-intro{color:var(--ep-gris-texte);margin-bottom:24px}

/* Champs */
.ep-champ{margin-bottom:19px}
.ep-champ label,.ep-legende{
  display:block;font-weight:600;font-size:.93rem;
  color:var(--ep-graphite);margin-bottom:7px;
}
.ep-champ-aide{font-size:.82rem;color:var(--ep-gris-texte);margin:-3px 0 8px}
.ep-champ input[type="text"],
.ep-champ input[type="number"],
.ep-champ input[type="email"],
.ep-champ input[type="date"],
.ep-champ select,
.ep-champ textarea{
  width:100%;padding:11px 13px;font-family:var(--ep-texte);font-size:1rem;
  color:var(--ep-noir);background:var(--ep-blanc);
  border:1px solid var(--ep-gris-bord);border-radius:var(--ep-rayon);
  transition:var(--ep-transition);
}
.ep-champ input:focus,.ep-champ select:focus,.ep-champ textarea:focus{
  outline:none;border-color:var(--ep-encre-clair);
  box-shadow:0 0 0 3px rgba(44,121,179,.16);
}
.ep-champ textarea{min-height:88px;resize:vertical}
.ep-champ-erreur input,.ep-champ-erreur select,.ep-champ-erreur textarea{border-color:var(--ep-rouge)}
/* Une case a cocher native est peinte par accent-color : Chrome, Edge et
   Safari ignorent alors border-color, et un refus de validation passait
   inapercu. Le signe se porte donc sur le label qui entoure la case,
   bordure rouge et halo de la meme teinte. */
.ep-choix.ep-champ-erreur{
  border-color:var(--ep-rouge);
  box-shadow:0 0 0 3px rgba(192,28,60,.14);
}
.ep-choix.ep-champ-erreur:hover{border-color:var(--ep-rouge)}
.ep-msg-erreur{
  display:none;color:var(--ep-rouge);font-size:.82rem;margin-top:5px;font-weight:500;
}
.ep-champ-erreur .ep-msg-erreur{display:block}
.ep-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.ep-duo{grid-template-columns:1fr}}

/* Grille des modules */
.ep-modules{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:13px}
.ep-module{
  position:relative;border:2px solid var(--ep-gris-bord);border-radius:var(--ep-rayon);
  background:var(--ep-blanc);padding:17px 13px;text-align:center;cursor:pointer;
  transition:var(--ep-transition);display:flex;flex-direction:column;
  align-items:center;gap:9px;min-height:112px;justify-content:center;
}
.ep-module:hover{border-color:var(--ep-encre-clair);transform:translateY(-2px)}
.ep-module input{position:absolute;opacity:0;pointer-events:none}
.ep-module .ep-ico{width:29px;height:29px;color:var(--ep-encre-clair);transition:var(--ep-transition)}
.ep-module-nom{font-weight:600;font-size:.9rem;color:var(--ep-graphite);line-height:1.28}
.ep-module.est-coche{border-color:var(--ep-ambre);background:var(--ep-ambre-voile)}
.ep-module.est-coche .ep-ico{color:var(--ep-ambre)}
.ep-module-marque{
  position:absolute;top:7px;right:7px;width:19px;height:19px;border-radius:50%;
  background:var(--ep-ambre);display:none;align-items:center;justify-content:center;
}
.ep-module.est-coche .ep-module-marque{display:flex}
.ep-module-marque svg{width:11px;height:11px;stroke:#fff;stroke-width:2.6;fill:none}
.ep-module-bientot{opacity:.42;cursor:not-allowed}
.ep-module-bientot:hover{border-color:var(--ep-gris-bord);transform:none}
.ep-module-tag{
  font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ep-gris-texte);font-weight:600;
}

/* Cases et boutons radio */
.ep-choix{
  display:flex;align-items:flex-start;gap:11px;padding:13px 15px;
  border:1px solid var(--ep-gris-bord);border-radius:var(--ep-rayon);
  background:var(--ep-blanc);cursor:pointer;transition:var(--ep-transition);
  margin-bottom:9px;
}
.ep-choix:hover{border-color:var(--ep-encre-clair);background:var(--ep-voile)}
.ep-choix input{
  margin:2px 0 0;width:18px;height:18px;accent-color:var(--ep-ambre);
  flex:0 0 auto;cursor:pointer;
}
.ep-choix-texte{font-size:.96rem;line-height:1.5}
.ep-choix.est-coche{border-color:var(--ep-ambre);background:var(--ep-ambre-voile)}
.ep-choix-compact{padding:9px 12px;margin-bottom:7px}

/* Question */
.ep-question{
  border-bottom:1px solid var(--ep-gris-bord);padding-bottom:22px;margin-bottom:22px;
}
.ep-question:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0}
.ep-question-titre{
  font-family:var(--ep-texte);font-size:1.03rem;font-weight:600;
  color:var(--ep-graphite);margin-bottom:11px;line-height:1.45;
}
.ep-question-num{color:var(--ep-ambre);font-weight:600;margin-right:6px}
.ep-aide{
  background:var(--ep-voile);border-radius:var(--ep-rayon);
  padding:12px 14px;font-size:.87rem;color:var(--ep-graphite);
  margin:0 0 12px;border-left:3px solid var(--ep-encre-clair);
}
.ep-aide[hidden]{display:none}
.ep-aide-btn{
  background:none;border:none;color:var(--ep-encre);font-size:.83rem;font-weight:600;
  cursor:pointer;padding:0;margin:0 0 11px;display:inline-flex;align-items:center;gap:5px;
  font-family:var(--ep-texte);
}
.ep-aide-btn:hover{text-decoration:underline}

/* Le bandeau qui dit d'entree que ce service est prive. Il se lit avant le
   titre, sobrement : c'est une mise au point, pas une alerte. Un lecteur qui
   croirait avoir affaire a un service de l'Etat nous exposerait a la
   qualification de pratique commerciale trompeuse. */
.ep-bandeau-prive{
  font-size:.8rem;line-height:1.55;color:var(--ep-gris-texte);
  border-left:3px solid var(--ep-gris-bord);padding-left:12px;
  margin:0 0 20px;max-width:72ch;
}
.ep-bandeau-prive strong{color:var(--ep-encre)}
.ep-bandeau-prive a{color:inherit;text-underline-offset:2px}
.ep-bandeau-prive a:hover{color:var(--ep-graphite)}
/* Sur le bandeau sombre de l'accueil, la mention et le lien de confidentialite
   passent en blanc : le gris fonce y restait illisible. */
.ep-hero .ep-bandeau-prive strong,.ep-hero .ep-secondaire a{color:#fff}
.ep-hero .ep-bandeau-prive a:hover{color:#fff}
/* Bandeau prive repliable de l accueil, 17/09/2026 : la premiere ligne reste visible, la suite s ouvre par la fleche. */
.ep-bandeau-prive-repli summary{cursor:pointer;list-style:none;padding-left:18px;position:relative}
.ep-bandeau-prive-repli summary::-webkit-details-marker{display:none}
.ep-bandeau-prive-repli summary::before{content:"";position:absolute;left:2px;top:.45em;width:6px;height:6px;border-right:1.5px solid var(--ep-ambre);border-bottom:1.5px solid var(--ep-ambre);transform:rotate(-45deg);transition:transform var(--ep-transition)}
.ep-bandeau-prive-repli[open] summary::before{transform:rotate(45deg)}
.ep-hero .ep-bandeau-prive{color:rgba(255,255,255,.82)}
.ep-bandeau-prive-repli p{font-size:inherit;line-height:inherit;color:inherit}
.ep-bandeau-prive-repli summary:focus-visible{outline:2px solid var(--ep-ambre);outline-offset:2px}
.ep-hero .ep-secondaire a{text-decoration:underline;text-underline-offset:2px}

/* Le pied du parcours. Un client passe un quart d'heure sur cet ecran sans
   jamais voir le pied de page du site : les mentions et les liens legaux
   doivent y vivre aussi. Le rembourrage bas degage la barre de navigation,
   qui est fixe. */
.ep-pied-parcours{
  border-top:1px solid var(--ep-gris-bord);
  margin-top:40px;padding:22px 0 104px;
  color:var(--ep-gris-texte);background:var(--ep-gris-fond);
}
.ep-pied-parcours p{margin:0 0 8px;max-width:80ch}
.ep-pied-parcours p:last-child{margin-bottom:0}
.ep-pied-parcours a{color:inherit;text-underline-offset:2px}
.ep-pied-parcours a:hover{color:var(--ep-graphite)}

/* Navigation du parcours */
.ep-nav-bas{
  position:fixed;bottom:0;left:0;right:0;z-index:55;
  background:var(--ep-blanc);border-top:1px solid var(--ep-gris-bord);
  padding:12px 0;box-shadow:0 -3px 16px rgba(27,30,33,.07);
}
.ep-nav-bas-in{
  max-width:var(--ep-max);margin:0 auto;padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.ep-nav-bas-info{font-size:.84rem;color:var(--ep-gris-texte)}
@media(max-width:600px){
  .ep-nav-bas-info{display:none}
  .ep-nav-bas-in .ep-btn{flex:1}
}

/* Tableau de relecture */
.ep-unite{margin-bottom:30px}
.ep-unite-titre{
  display:flex;align-items:center;gap:10px;
  font-family:var(--ep-titre);font-size:1.3rem;font-weight:600;
  color:var(--ep-graphite);padding-bottom:9px;margin-bottom:15px;
  border-bottom:2px solid var(--ep-voile);
}
.ep-unite-compte{
  font-family:var(--ep-texte);font-size:.78rem;font-weight:600;
  color:var(--ep-gris-texte);background:var(--ep-gris-fond);
  padding:3px 9px;border-radius:100px;margin-left:auto;
}

/* Le contenu du catalogue reste entierement visible avant paiement.
   La selection est neutralisee sur ces cartes seules, pour eviter
   qu'il parte d'un copier-coller. Les champs de saisie gardent
   leur selection, sans quoi le gerant ne pourrait plus se corriger. */
.ep-risque{
  border:1px solid var(--ep-gris-bord);border-radius:var(--ep-rayon);
  background:var(--ep-blanc);margin-bottom:12px;overflow:hidden;
  -webkit-user-select:none;user-select:none;
}
.ep-risque input,.ep-risque textarea{-webkit-user-select:text;user-select:text}
.ep-risque-haut{
  display:flex;align-items:flex-start;gap:13px;padding:15px 17px;cursor:pointer;
}
.ep-risque-corps{flex:1;min-width:0}
.ep-risque-famille{
  font-size:.7rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ep-gris-texte);margin-bottom:4px;
}
.ep-risque-situation{font-weight:600;color:var(--ep-graphite);line-height:1.45}
.ep-risque-dommages{font-size:.86rem;color:var(--ep-gris-texte);margin-top:4px}
.ep-score{
  flex:0 0 auto;width:52px;height:52px;border-radius:var(--ep-rayon);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--ep-titre);font-weight:600;line-height:1;
}
.ep-score-val{font-size:1.4rem}
/* Le « /16 » dit que ce nombre est un score, plutot qu'un nombre d'elements. */
.ep-score-val small{font-size:.56em;font-weight:500;opacity:.78}
.ep-score-lib{font-size:.55rem;letter-spacing:.06em;text-transform:uppercase;margin-top:2px}

/* Repere des lignes que l'employeur a lui-meme deplacees. */
.ep-modifie{
  display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;
  background:var(--ep-ambre);color:var(--ep-sur-ambre);
  font-size:.62rem;font-weight:600;letter-spacing:.03em;text-transform:none;
  vertical-align:middle;
}
.ep-remettre{margin-right:18px}

/* D'ou vient une ligne, et le chemin pour la faire changer. */
.ep-origine{
  background:var(--ep-ambre-voile);border-radius:var(--ep-rayon);
  padding:10px 13px;margin-bottom:14px;font-size:.84rem;color:var(--ep-graphite);
  line-height:1.5;
}
.ep-origine-lib{font-weight:600;margin:0 0 8px}
.ep-origine-item{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:7px 0;border-top:1px solid rgba(27,30,33,.09);
}
.ep-origine-texte{display:flex;flex-direction:column;gap:2px;min-width:0}
.ep-origine-q{color:var(--ep-encre-clair);line-height:1.4}
.ep-origine-r{font-weight:600;color:var(--ep-graphite)}
@media(max-width:600px){
  .ep-origine-item{flex-direction:column;align-items:flex-start;gap:5px}
}

/* Les mesures, une seule liste a trois positions. */
.ep-mesures{display:flex;flex-direction:column;gap:7px}
.ep-mesure{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:9px 13px;border:1px solid var(--ep-gris-bord);border-radius:var(--ep-rayon);
  background:var(--ep-blanc);
}
.ep-mesure.est-repondue{border-color:var(--ep-ambre);background:var(--ep-ambre-voile)}
.ep-mesure-texte{font-size:.89rem;color:var(--ep-graphite);line-height:1.4;min-width:0}
.ep-mesure-choix{display:flex;gap:5px;flex:0 0 auto}
.ep-pos{
  border:1px solid var(--ep-gris-bord);background:var(--ep-blanc);
  border-radius:999px;padding:5px 12px;cursor:pointer;
  font-family:var(--ep-texte);font-size:.78rem;font-weight:600;
  color:var(--ep-encre-clair);white-space:nowrap;
}
.ep-pos:hover{border-color:var(--ep-ambre);color:var(--ep-graphite)}
.ep-pos.est-actif{
  background:var(--ep-ambre);border-color:var(--ep-ambre);color:var(--ep-sur-ambre);
}
@media(max-width:700px){
  .ep-mesure{flex-direction:column;align-items:stretch;gap:9px}
  .ep-mesure-choix{justify-content:flex-start;flex-wrap:wrap}
}

/* Mesures ecrites par le gerant lui-meme. */
.ep-libre{margin-top:10px}
.ep-libre-saisie{display:flex;gap:8px;align-items:stretch;margin-top:8px}
.ep-libre-saisie input{
  flex:1 1 auto;min-width:0;padding:9px 12px;border-radius:var(--ep-rayon);
  border:1px solid var(--ep-gris-bord);font-family:var(--ep-texte);font-size:.88rem;
  color:var(--ep-graphite);background:var(--ep-blanc);
}
.ep-libre-saisie input:focus{outline:2px solid var(--ep-ambre);outline-offset:1px}
.ep-choix-libre{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ep-libre .ep-aide-btn{margin:10px 0 0}
.ep-libre .ep-champ-aide{margin:9px 0 0}

/* Les actions que l'employeur ecrit lui-meme, dans le meme alignement que
   les mesures proposees. Le filet graphite a gauche et le bandeau « votre
   action » les separent d'un coup d'oeil de ce qui vient de l'INRS : un
   gerant qui relit sa ligne doit savoir ce qui est de lui. Aucune couleur
   nouvelle, l'echelle de criticite garde les siennes. */
.ep-mesure.ep-mienne{border-left:3px solid var(--ep-graphite)}
.ep-mienne .ep-mesure-texte{
  flex:1 1 auto;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
.ep-mienne .ep-mesure-texte input{
  flex:1 1 180px;min-width:0;padding:6px 9px;border-radius:var(--ep-rayon);
  border:1px dashed var(--ep-gris-bord);background:var(--ep-blanc);
  font-family:var(--ep-texte);font-size:.89rem;color:var(--ep-graphite);
}
.ep-mienne .ep-mesure-texte input:focus{
  outline:2px solid var(--ep-ambre);outline-offset:1px;border-style:solid;
}
.ep-mienne .ep-modifie{margin-left:0}

/* Les quatre jauges cote a cote, aujourd'hui contre apres les actions. */
.ep-score-sm{width:52px;height:52px}
.ep-score-sm .ep-score-val{font-size:1.2rem}
.ep-cotation-grille{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ep-cotation-col{
  background:var(--ep-blanc);border:1px solid var(--ep-gris-bord);
  border-radius:var(--ep-rayon);padding:14px 16px;
  display:flex;flex-direction:column;gap:12px;
}
.ep-cotation-titre{
  font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ep-ambre-titre);
}
.ep-curseurs-colonne{display:flex;flex-direction:column;gap:14px}
.ep-cotation-badge{display:flex}
.ep-cible-texte{
  font-size:.87rem;color:var(--ep-graphite);line-height:1.5;margin:14px 0 0;
}
@media(max-width:700px){
  .ep-cotation-grille{grid-template-columns:1fr}
}

/* La croix des mesures ecrites par le gerant. */
.ep-mesure-sup{
  border:1px solid var(--ep-gris-bord);background:var(--ep-blanc);
  border-radius:999px;width:28px;height:28px;padding:0;cursor:pointer;
  font-family:var(--ep-texte);font-size:1rem;line-height:1;
  color:var(--ep-gris-texte);flex:0 0 auto;
}
.ep-mesure-sup:hover{border-color:var(--ep-rouge);color:var(--ep-rouge)}

.ep-origine-lien{
  background:none;border:none;padding:0;margin-left:8px;cursor:pointer;
  font-family:var(--ep-texte);font-size:.83rem;font-weight:600;
  color:var(--ep-ambre-fonce);text-decoration:underline;
}
.ep-origine-lien:hover{color:var(--ep-graphite)}

/* Rappel des reponses, sur l'ecran de relecture. */
.ep-rappel{margin-bottom:6px}
.ep-rappel-corps{
  border:1px solid var(--ep-gris-bord);border-radius:var(--ep-rayon);
  padding:4px 14px;margin-bottom:6px;
}
.ep-rappel-corps[hidden]{display:none}
.ep-rappel-ligne{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:10px 0;border-bottom:1px solid var(--ep-gris-bord);
}
.ep-rappel-ligne:last-child{border-bottom:none}
.ep-rappel-texte{display:flex;flex-direction:column;gap:3px;min-width:0}
.ep-rappel-q{font-size:.84rem;color:var(--ep-gris-texte);line-height:1.4}
.ep-rappel-r{font-size:.9rem;font-weight:600;color:var(--ep-graphite)}
@media(max-width:600px){
  .ep-rappel-ligne{flex-direction:column;align-items:flex-start;gap:6px}
}
.ep-c-vert{background:var(--ep-vert-fond);color:var(--ep-vert-sur)}
.ep-c-jaune{background:var(--ep-jaune-fond);color:var(--ep-jaune-sur)}
.ep-c-orange{background:var(--ep-cote-orange-fond);color:var(--ep-cote-orange-sur)}
.ep-c-rouge{background:var(--ep-rouge-fond);color:var(--ep-rouge-sur)}

.ep-risque-detail{
  border-top:1px solid var(--ep-gris-bord);background:var(--ep-gris-fond);
  padding:17px;display:none;
}
.ep-risque.est-ouvert .ep-risque-detail{display:block}
.ep-risque-detail h4{
  font-family:var(--ep-texte);font-size:.83rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ep-ambre-titre);
  margin:0 0 9px;
}
.ep-risque-detail h4+h4,.ep-risque-bloc+.ep-risque-bloc{margin-top:19px}

.ep-curseurs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:6px}
@media(max-width:600px){.ep-curseurs{grid-template-columns:1fr}}
.ep-curseur label{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:.85rem;font-weight:600;color:var(--ep-graphite);margin-bottom:6px;gap:8px;
}
.ep-curseur-val{font-weight:500;color:var(--ep-gris-texte);font-size:.8rem;text-align:right}
.ep-curseur input[type="range"]{width:100%;accent-color:var(--ep-ambre);cursor:pointer}

.ep-retirer{
  background:none;border:none;color:var(--ep-gris-texte);font-size:.82rem;
  cursor:pointer;padding:6px 0;font-family:var(--ep-texte);
  display:inline-flex;align-items:center;gap:6px;
}
.ep-retirer:hover{color:var(--ep-rouge)}
.ep-risque.est-retire{opacity:.42}
.ep-risque.est-retire .ep-risque-detail{display:none}

/* Recapitulatif */
.ep-recap{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:26px;
}
@media(max-width:700px){.ep-recap{grid-template-columns:repeat(2,1fr)}}
.ep-recap-case{
  background:var(--ep-blanc);border:1px solid var(--ep-gris-bord);
  border-radius:var(--ep-rayon);padding:15px;text-align:center;
}
.ep-recap-nb{
  font-family:var(--ep-titre);font-size:1.85rem;font-weight:600;line-height:1;
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 16px;border-radius:999px;
}
.ep-recap-forme{font-size:.62em;line-height:1}
.ep-recap-lib{font-size:.76rem;color:var(--ep-gris-texte);margin-top:5px;letter-spacing:.03em}

/* ---------- Apercu du document ----------
   Une page A4 reduite, avec les vraies donnees du gerant.
   Il voit la mise en page et la qualite avant de payer. */
.ep-apercu{
  background:var(--ep-gris-fond);border:1px solid var(--ep-gris-bord);
  border-radius:var(--ep-rayon);padding:22px;margin-top:16px;
  -webkit-user-select:none;user-select:none;
}
.ep-apercu[hidden]{display:none}
.ep-page{
  background:#fff;border:1px solid var(--ep-gris-bord);
  box-shadow:0 2px 14px rgba(27,30,33,.10);
  padding:26px 24px;max-width:520px;margin:0 auto;
  font-size:.78rem;line-height:1.5;color:#22262A;position:relative;
}
.ep-page + .ep-page{margin-top:18px}
.ep-page-tete{
  border-left:3px solid var(--ep-ambre);padding-left:11px;margin-bottom:18px;
}
.ep-page-marque{
  font-family:var(--ep-titre);font-size:.92rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ep-graphite);
  line-height:1;display:block;
}
.ep-page-marque em{font-style:normal;color:var(--ep-ambre);
  letter-spacing:.22em;display:block}
.ep-page-sous{
  font-size:.52rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ep-gris-texte);margin-top:4px;display:block;
}
.ep-page h5{
  font-family:var(--ep-titre);font-size:1.28rem;font-weight:600;
  color:var(--ep-graphite);margin:0 0 3px;line-height:1.1;
}
.ep-page-filet{height:3px;width:48px;background:var(--ep-ambre);margin:12px 0 16px}
.ep-page-fiche{width:100%;border-collapse:collapse;font-size:.74rem}
.ep-page-fiche td{padding:5px 8px;border:1px solid #E4E6E8}
.ep-page-fiche td:first-child{background:#F6F7F8;font-weight:600;width:46%}
.ep-page-titre-partie{
  font-family:var(--ep-titre);font-size:1rem;font-weight:600;
  color:var(--ep-graphite);margin:0 0 10px;
}
.ep-page-tableau{width:100%;border-collapse:collapse;font-size:.66rem}
.ep-page-tableau th{
  background:var(--ep-graphite);color:#fff;font-weight:600;
  padding:5px 6px;text-align:left;font-size:.6rem;
}
.ep-page-tableau td{padding:5px 6px;border:1px solid #E4E6E8;vertical-align:top}
.ep-page-tableau td.ep-c{text-align:center;font-weight:600;width:26px}
.ep-page-voile{
  position:absolute;left:0;right:0;bottom:0;height:96px;
  background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 78%);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;
}
.ep-page-voile span{font-size:.72rem;color:var(--ep-gris-texte);font-weight:600}
.ep-apercu-note{
  text-align:center;font-size:.78rem;color:var(--ep-gris-texte);margin:14px 0 0;
}

/* Chargement */
.ep-charge{text-align:center;padding:70px 20px}
.ep-roue{
  width:42px;height:42px;margin:0 auto 20px;border-radius:50%;
  border:3px solid var(--ep-gris-bord);border-top-color:var(--ep-ambre);
  animation:ep-tourne .85s linear infinite;
}
@keyframes ep-tourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .ep-roue{animation-duration:2.4s}
  *{scroll-behavior:auto!important}
}

/* Etat de sauvegarde */
.ep-sauve{
  position:fixed;bottom:78px;right:18px;z-index:54;
  background:var(--ep-graphite);color:#fff;font-size:.79rem;
  padding:8px 14px;border-radius:100px;opacity:0;
  transition:opacity .3s ease;pointer-events:none;
}
.ep-sauve.est-visible{opacity:.93}

/* Accessibilite */
.ep-invisible{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
:focus-visible{outline:3px solid var(--ep-encre-clair);outline-offset:2px;border-radius:4px}

/* Impression */
@media print{
  .ep-header,.ep-nav-bas,.ep-progres,.ep-footer,.ep-btn{display:none!important}
  body{background:#fff}
  .ep-panneau{box-shadow:none;border:1px solid #ccc}
  /* A l'impression, la donnee garde son gras et prend un soulignement. */
  .ep-cle{background:none;box-shadow:none;border-bottom:1px solid #999}
}

/* La barre de retour vers la relecture, posee au bas de l'ecran. */
.ep-barre-retour{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;justify-content:center;
  padding:12px 20px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(255,255,255,.98) 62%,rgba(255,255,255,0));
  pointer-events:none;
}
.ep-barre-retour .ep-btn{pointer-events:auto;box-shadow:var(--ep-ombre-forte)}

/* La question qu'on vient corriger, mise en evidence a l'arrivee. */
.ep-question.est-cible{
  outline:2px solid var(--ep-ambre);outline-offset:8px;border-radius:var(--ep-rayon);
}