/* ------------------------------------------------------------------------
   Portail public des accreditations
   Titres en Bricolage Grotesque, texte en Public Sans. La couleur d'accent
   vient du reglage --pa, pose par la vue.
   ------------------------------------------------------------------------ */

:root{
  --pa: #0A6B3D;
  --encre: #111619;
  --fond: #F4F5F2;
  --creme: #EDEFE4;
  --carte: #FFFFFF;
  --ligne: #DFE3DE;
  --visuel: #D9DED6;
  --gris: #4A5650;
  --gris-clair: #5A6660;
  --barre-fond: #111619;
  --barre-texte: #D7DED9;
  --sombre-fond: #111619;
  --sombre-texte: #B9C2BC;
  --info-fond: #FDF3E2;
  --info-bord: #E8D5AC;
  --info-pastille: #B26B00;
  --ouvert-fond: #E3F2E8;
  --ouvert-texte: #0A6B3D;
  --attente-fond: #FDF3E2;
  --attente-texte: #8A5200;
  --clos-fond: #EFF1EE;
  --clos-texte: #5A6660;
  --etiq1-fond: #E7EEFF;
  --etiq1-texte: #1D4ED8;
  --etiq2-fond: #FDF0E2;
  --etiq2-texte: #A3540A;
  --etiq3-fond: #E8EAE4;
  --etiq3-texte: #3F4A44;
  /* Les polices sont posees par la vue ; ces valeurs servent de repli si
     Google Fonts est injoignable. */
  --police-titres: "Bricolage Grotesque";
  --police-texte: "Public Sans";
}

*{box-sizing:border-box}

body.portail{
  margin:0;background:var(--fond);color:var(--encre);
  font-family:var(--police-texte),system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.dedans{max-width:1400px;margin:0 auto;padding:0 clamp(18px,4vw,56px);width:100%}

h1,h2,h3,.chiffres b,.puce b,.date b{font-family:var(--police-titres),var(--police-texte),sans-serif}

/* ------------------------------------------------------------- Bandeaux */

.utilitaire{background:var(--barre-fond, #111619);color:var(--barre-texte, #D7DED9);font-size:13px}
.utilitaire .dedans{display:flex;align-items:center;justify-content:space-between;gap:16px;height:44px}
.utilitaire b{color:var(--carte, #FFFFFF)}
.liens-util{display:flex;gap:24px}
.utilitaire a{color:var(--barre-texte, #D7DED9);text-decoration:none}
.utilitaire a:hover{color:var(--carte, #FFFFFF)}

.entete-portail{background:var(--carte, #FFFFFF);border-bottom:1px solid var(--ligne)}
.entete-portail .dedans{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:92px;flex-wrap:wrap}

.marque-portail{display:flex;gap:14px;align-items:center;text-decoration:none;color:var(--encre)}
.marque-portail img{width:46px;height:46px;object-fit:contain}
.marque-portail .ecusson{
  width:46px;height:46px;border-radius:50%;background:var(--pa);color:var(--carte, #FFFFFF);
  display:grid;place-items:center;font-weight:800;font-size:13px;letter-spacing:.04em;
  font-family:var(--police-titres),sans-serif;
}
.marque-portail b{display:block;font-family:var(--police-titres),sans-serif;font-size:21px;line-height:1.1}
.marque-portail i{
  display:block;font-style:normal;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gris-clair);margin-top:3px;
}

.nav-portail{display:flex;gap:34px;font-size:15px;font-weight:500}
.nav-portail a{color:var(--encre);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.nav-portail a:hover{border-bottom-color:var(--pa)}

.pilule{
  display:flex;gap:12px;align-items:center;padding:11px 13px 11px 24px;border-radius:100px;
  background:var(--creme);color:var(--encre);text-decoration:none;font-weight:600;font-size:15px;
}
.pilule:hover{background:var(--creme, #EDEFE4)}
.rond{width:34px;height:34px;border-radius:50%;background:var(--sombre-fond, #111619);color:var(--carte, #FFFFFF);display:grid;place-items:center;flex:none}
.rond.clair{background:var(--carte, #FFFFFF);color:var(--encre)}

/* ------------------------------------------------------------- Corps */

.corps-portail{padding-top:36px;padding-bottom:40px;display:flex;flex-direction:column;gap:28px}

.bandeau-info{
  display:flex;gap:18px;align-items:flex-start;padding:22px 26px;
  background:var(--info-fond, #FDF3E2);border:1px solid var(--info-bord, #E8D5AC);border-radius:18px;
}
.pastille-info{width:34px;height:34px;border-radius:50%;background:var(--info-pastille, #B26B00);color:var(--carte, #FFFFFF);display:grid;place-items:center;flex:none}
.bandeau-info b{font-size:16px}
.bandeau-info p{margin:4px 0 0;font-size:14.5px;color:var(--gris);line-height:1.5}

.heros{display:flex;gap:24px;align-items:stretch}
.heros-texte{
  width:var(--heros-largeur,52%);flex:none;background:var(--creme);border-radius:28px;
  padding:clamp(28px,4vw,54px) clamp(24px,3.4vw,48px);display:flex;flex-direction:column;
}

/* Dispositions du bloc titre, reglees depuis le constructeur. */
.heros.d-deux-inverse{flex-direction:row-reverse}
.heros.d-une{flex-direction:column}
.heros.d-une .heros-texte{width:100%}
.heros.d-une .heros-visuel{min-height:320px}
.heros.d-texte .heros-texte{width:100%}
.heros.d-texte .heros-texte h1{max-width:18ch}
.surtitre{font-family:var(--police-titres),sans-serif;font-weight:700;font-size:17px;color:var(--pa);line-height:1.35}
.heros-texte h1{margin:30px 0 0;font-weight:800;font-size:clamp(42px,5vw,74px);line-height:.98;letter-spacing:-.02em}
.heros-texte p{margin:26px 0 0;font-size:17px;line-height:1.6;color:var(--gris, #4A5650);max-width:480px}
.heros-actions{display:flex;gap:26px;align-items:center;margin-top:auto;padding-top:38px;flex-wrap:wrap}

.bouton-plein{
  display:flex;gap:12px;align-items:center;padding:13px 13px 13px 26px;border-radius:100px;
  background:var(--pa);color:var(--carte, #FFFFFF);text-decoration:none;font-weight:600;font-size:16px;
}
.bouton-plein:hover{filter:brightness(.92)}
.lien-souligne{
  font-weight:600;font-size:16px;color:var(--encre);text-decoration:none;
  border-bottom:2px solid var(--pa);padding-bottom:5px;
}

.heros-visuel{
  flex-grow:1;border-radius:28px;background:var(--visuel, #D9DED6) center/cover no-repeat;
  position:relative;display:flex;align-items:flex-end;padding:26px;min-height:420px;
}
.marque-photo{
  position:absolute;top:26px;left:26px;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris-clair);
}
.chiffres-heros{display:flex;gap:16px;width:100%}
.puce{flex-grow:1;border-radius:20px;padding:22px 26px}
.puce b{display:block;font-weight:800;font-size:46px;line-height:1}
.puce span{font-size:14px;margin-top:4px;display:block}
.puce.sombre{background:var(--sombre-fond, #111619);color:var(--carte, #FFFFFF)}
.puce.sombre span{color:var(--sombre-texte, #B9C2BC)}
.puce.creme{background:var(--creme)}
.puce.creme span{color:var(--gris)}

.chiffres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.carte-chiffre{background:var(--carte, #FFFFFF);border:1px solid var(--ligne);border-radius:20px;padding:26px}
.carte-chiffre b{display:block;font-weight:800;font-size:40px;line-height:1}
.carte-chiffre span{display:block;font-size:14.5px;color:var(--gris);margin-top:6px}

section h2{margin:14px 0 0;font-weight:700;font-size:clamp(26px,3vw,34px);letter-spacing:-.01em}
.sous-titre{margin:10px 0 0;font-size:16px;color:var(--gris)}

.parcours{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:24px}
.carte-parcours{background:var(--carte, #FFFFFF);border:1px solid var(--ligne);border-radius:22px;padding:30px;display:flex;flex-direction:column}
.carte-parcours h3{margin:18px 0 0;font-weight:700;font-size:22px}
.carte-parcours p{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--gris)}
.carte-parcours .lien-souligne{margin-top:22px;align-self:flex-start;font-size:15px}
.etiquette{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.08em;padding:6px 12px;border-radius:100px}
.etiquette.e1{background:var(--etiq1-fond, #E7EEFF);color:var(--etiq1-texte, #1D4ED8)}
.etiquette.e2{background:var(--etiq2-fond, #FDF0E2);color:var(--etiq2-texte, #A3540A)}
.etiquette.e3{background:var(--etiq3-fond, #E8EAE4);color:var(--etiq3-texte, #3F4A44)}

.calendrier{background:var(--carte, #FFFFFF);border:1px solid var(--ligne);border-radius:22px;overflow:hidden;margin-top:20px}
.ligne-evt{display:flex;gap:24px;align-items:center;padding:24px 28px;border-bottom:1px solid var(--ligne, #DFE3DE);flex-wrap:wrap}
.ligne-evt:last-child{border-bottom:0}
.date{width:92px;flex:none;text-align:center}
.date b{display:block;font-weight:800;font-size:30px;line-height:1}
.date span{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-clair)}
.quoi{flex-grow:1;min-width:200px}
.quoi b{font-size:18px}
.quoi span{display:block;font-size:14.5px;color:var(--gris);margin-top:3px}
.etat{font-size:13px;font-weight:600;padding:7px 14px;border-radius:100px;flex:none}
.etat.ouvert{background:var(--ouvert-fond, #E3F2E8);color:var(--ouvert-texte, #0A6B3D)}
.etat.attente{background:var(--attente-fond, #FDF3E2);color:var(--attente-texte, #8A5200)}
.etat.clos{background:var(--clos-fond, #EFF1EE);color:var(--clos-texte, #5A6660)}
.bouton-sombre{padding:11px 22px;border-radius:100px;background:var(--sombre-fond, #111619);color:var(--carte, #FFFFFF);text-decoration:none;font-weight:600;font-size:15px}
.bouton-sombre:hover{background:#000}
.vide-portail{background:var(--carte, #FFFFFF);border:1px solid var(--ligne);border-radius:22px;padding:36px;color:var(--gris);margin-top:20px}

.bas-portail{display:flex;gap:20px;margin-top:14px;flex-wrap:wrap}
.carte-sombre{flex-grow:1;min-width:320px;background:var(--sombre-fond, #111619);color:var(--carte, #FFFFFF);border-radius:24px;padding:34px 38px}
.carte-sombre h3{margin:0;font-weight:700;font-size:26px}
.carte-sombre p{margin:10px 0 22px;font-size:15.5px;line-height:1.55;color:var(--sombre-texte, #B9C2BC);max-width:460px}
.bouton-blanc{display:inline-block;padding:12px 24px;border-radius:100px;background:var(--carte, #FFFFFF);color:var(--encre);text-decoration:none;font-weight:600;font-size:15px}
.carte-aide{width:420px;flex:none;background:var(--carte, #FFFFFF);border:1px solid var(--ligne);border-radius:24px;padding:30px 32px}
.carte-aide h3{margin:0;font-weight:700;font-size:20px}
.carte-aide p{margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--gris);white-space:pre-line}
.carte-aide .lien-souligne{display:inline-block;margin-top:18px;font-size:15px}

.pied-portail{border-top:1px solid var(--ligne);margin-top:10px}
.pied-portail .dedans{display:flex;justify-content:space-between;gap:16px;padding-top:30px;padding-bottom:30px;font-size:13.5px;color:var(--gris-clair);flex-wrap:wrap}

/* ------------------------------------------------------------- Ecrans etroits */

@media (max-width: 1080px){
  .chiffres{grid-template-columns:repeat(2,minmax(0,1fr))}
  .parcours{grid-template-columns:1fr}
  .carte-aide{width:100%}
}

@media (max-width: 860px){
  .heros,.heros.d-deux-inverse{flex-direction:column}
  .heros-texte{width:100%}
  .heros-visuel{min-height:230px}
  .nav-portail{order:3;width:100%;gap:22px;border-top:1px solid var(--ligne);padding:10px 0}
  .entete-portail .dedans{min-height:0;padding-top:14px;padding-bottom:0}
  .ligne-evt{gap:14px}
  .date{width:64px;text-align:left}
  .bouton-sombre,.etat{margin-left:auto}
}

@media (max-width: 520px){
  .chiffres{grid-template-columns:1fr}
  .chiffres-heros{flex-direction:column}
  .heros-actions{gap:16px}
  .bouton-plein,.bouton-sombre,.bouton-blanc{width:100%;justify-content:center;text-align:center}
}

/* ------------------------------------------------------------------------
   Coque publique : les pages de dépôt, de suivi et l'espace demandeur
   partagent l'en-tête et le pied du portail.
   ------------------------------------------------------------------------ */

.corps-portail.etroit{max-width:900px;margin-left:auto;margin-right:auto}
.corps-portail .entete{margin-bottom:6px}
.corps-portail .entete h1{font-weight:800;letter-spacing:-.01em}
.corps-portail .oeil{color:var(--pa)}
.corps-portail .carte{border-radius:20px}
.corps-portail .btn{border-radius:100px}

/* ------------------------------------------------------------------------
   Pages d'authentification : carte centrée, sans la navigation publique.
   ------------------------------------------------------------------------ */

.coque-auth{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:clamp(20px,5vw,48px);background:var(--fond);
}
.auth-boite{width:100%;max-width:440px}
.marque-auth{
  display:flex;gap:12px;align-items:center;justify-content:center;
  text-decoration:none;color:var(--encre);margin-bottom:26px;
}
.marque-auth img{width:52px;height:52px;object-fit:contain}
.marque-auth .ecusson{
  width:52px;height:52px;border-radius:50%;background:var(--pa);color:var(--carte, #FFFFFF);
  display:grid;place-items:center;font-weight:800;font-size:14px;
  font-family:var(--police-titres),sans-serif;
}
.marque-auth span:last-child{
  font-family:var(--police-titres),sans-serif;font-weight:700;font-size:22px;
}
.coque-auth .entete{margin-bottom:18px;text-align:center}
.coque-auth .entete h1{font-weight:800;font-size:30px;margin:0}
.coque-auth .entete p{margin:8px 0 0;color:var(--gris);font-size:15px}
.coque-auth .oeil{color:var(--pa);text-align:center}
.coque-auth .carte{border-radius:20px}
.coque-auth .btn{border-radius:100px;width:100%;justify-content:center}
.retour-portail{
  display:block;text-align:center;margin-top:22px;font-size:14px;
  color:var(--gris-clair);text-decoration:none;
}
.retour-portail:hover{color:var(--encre)}