/* Porte d'entree : ecran de choix connexion ou inscription.

   TOUT EST SCOPE SOUS .iep-porte, ET CELA NE SUFFIT PAS.
   Une page Elementor Canvas charge quand meme le reset du theme hello-elementor,
   le kit global (post-6.css) et quelques feuilles de plugins. Plusieurs de leurs
   regles atteignent l'interieur du scope, parce qu'un selecteur comme
   « .elementor-kit-6 a » (0,1,1) matche NOS liens. La regle de survie est simple :

   TOUTE PROPRIETE QU'UNE REGLE EXTERIEURE POSE DOIT ETRE POSEE ICI AUSSI.
   L'heritage depuis .iep-porte ne protege de rien : une regle qui matche
   directement l'element bat un heritage, quelle que soit la specificite.

   Les declarations marquees « cascade » n'existent que pour cela. Elles ont
   l'air redondantes et ne le sont pas. Voir l'audit complet en rapport. */
.iep-porte{
  --iep-navy:#07124A;
  --iep-navy-2:#12205F;
  --iep-orange:#F18815;
  --iep-orange-2:#d4760f;
  --iep-ink:#1e2748;
  --iep-muted:#6b7391;
  --iep-line:#E7E9F0;
  --iep-page:#F8F9FB;   /* meme fond que les ecrans de connexion : --ac-bg, acces-client/public/css/acces-client-public.css:12. La feuille se detache par sa bordure, pas par un fond plus fonce. */
  --iep-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --iep-disp:'Plus Jakarta Sans',var(--iep-sans);

  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 16px;
  background:var(--iep-page);
  font-family:var(--iep-sans);
  font-size:16px;          /* cascade : le kit pose 1.2rem sur body, herite ici */
  box-sizing:border-box;   /* cascade : .iep-porte * ne matche pas .iep-porte */
  color:var(--iep-ink);
  line-height:1.6;
  text-align:left;
}
.iep-porte *{box-sizing:border-box}

/* Reset limite aux marges des deux elements qui en portent une par defaut.
   Ne PAS ajouter div ni span ici : un selecteur .iep-porte div (0,1,1)
   battrait .iep-porte__sheet (0,1,0) et supprimerait son padding. */
.iep-porte h1,
.iep-porte p{margin:0}

/* Specificite (0,2,0) volontaire : plus aucune regle du composant, presente ou
   future, ne peut lui reprendre son padding par accident. */
.iep-porte .iep-porte__sheet{
  width:100%;
  max-width:474px;
  background:#fff;
  border:1px solid var(--iep-line);
  border-radius:18px;
  padding:34px 36px 30px;
  box-shadow:0 18px 44px -30px rgba(9,17,54,.38);
}

/* align-items etait a baseline quand le logo etait du texte. Un SVG est un
   element remplace : sa ligne de base est son bord inferieur, donc baseline
   ferait descendre la mention a cote pour aligner SON alphabet sur le BAS du
   dessin. flex-end aligne les deux boites par le bas, ce qui est previsible et
   reprend l'alignement interne de la destination. */
.iep-porte .iep__brand{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding-bottom:16px;
  border-bottom:1px solid var(--iep-line);
  margin-bottom:26px;
}
/* Le logo est un lien vers l'accueil : l'ecran n'a pas d'en-tete, sans lui un
   visiteur renvoye ici n'aurait aucune sortie. Il porte les deux SVG de la
   marque, identiques a ceux des ecrans de connexion (voir logo_svg() en PHP).

   Disposition reprise de la destination : deux SVG cote a cote, alignes par le
   bas, un pixel d'ecart. text-decoration reste declaree parce que hello-reset
   et le kit global visent le selecteur a.

   PAS DE PASTILLE BLANCHE ici, contrairement aux ecrans de connexion : la
   pastille y sert a detacher le logo du fond teinte, alors que notre feuille
   est deja blanche. Divergence voulue.

   PAS D'ETAT DE SURVOL non plus. Les couleurs sont dans les SVG, en dur, et la
   destination n'en a pas : .ac-login-logo-link ne declare que text-decoration
   et display. Le focus clavier, lui, reste visible.

   OMISSION RAISONNEE : color, font-family, font-size et font-weight sont posees
   ici par .elementor-kit-6 a et par hello-reset, et ne sont volontairement pas
   redeclarees, parce que ce lien ne contient aucun texte ni aucun currentColor.
   Elles redeviennent actives des que le logo reprend un noeud de texte. */
.iep-porte .iep__logo{
  display:inline-flex;
  align-items:flex-end;
  gap:1px;
  text-decoration:none;
}
.iep-porte .iep__logo .ac-logo-main{width:148px;height:auto}
/* CALAGE DU .com SUR LA LIGNE DE BASE DU MOT, ET NON SUR LE BAS DES BOITES.
   Les deux SVG sont deux dessins distincts, alignes par la CSS. align-items
   flex-end colle leurs bords BAS, or ces bords ne veulent pas dire la meme
   chose : celui du mot est le jambage du « g » de enligne, celui du .com est
   sa ligne de base, puisqu'aucune de ses lettres ne descend.

   Mesure sur les viewBox et les largeurs rendues, pas un nombre magique :
     mot   : viewBox 0 0 148.219 23.835, rendu 148px, echelle 148/148.219
             fond plat du « l » a 18.009 -> ligne de base a 17.98px
             boite haute de 23.80px -> jambage de 23.80 - 17.98 = 5.82px
     .com  : viewBox 0 0 29.226 7.444, rendu 29px, echelle 29/29.226
             fond plat du « m » a 7.266 -> ligne de base a 7.21px
             boite haute de 7.39px -> ecart au bas de boite = 0.18px
   Calage = 5.82 - 0.18 = 5.64px. Avec l'ancien margin-bottom de 1px, le .com
   tombait 4.64px SOUS la ligne de base du mot.

   acces-client porte le meme 1px sur ses ecrans de connexion, donc le meme
   decalage : c'est un defaut de la destination, que nous ne corrigeons pas. */
.iep-porte .iep__logo .ac-logo-ext{width:29px;height:auto;margin-bottom:5.64px}
.iep-porte .iep__logo:focus-visible{outline:2px solid var(--iep-orange);outline-offset:3px}
.iep-porte .iep__tag{
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#9aa4bf;
}

.iep-porte .iep__h1{
  font-family:var(--iep-disp);
  font-weight:800;
  font-size:26px;
  letter-spacing:-.025em;
  line-height:1.15;
  color:var(--iep-navy);
  margin-bottom:8px;
}
.iep-porte .iep__lede{
  font-size:14px;
  color:var(--iep-muted);
  line-height:1.6;          /* cascade : le kit pose line-height sur un p nu */
  margin-bottom:26px;
}

.iep-porte .iep__doors{display:flex;flex-direction:column;gap:12px}
.iep-porte .iep__door{
  display:block;
  width:100%;
  text-align:left;
  border:none;
  border-radius:14px;
  padding:20px 24px;
  font-family:var(--iep-sans);
  font-size:16px;           /* cascade : .elementor-kit-6 a pose 18px */
  font-weight:400;          /* cascade : .elementor-kit-6 a pose 700, herite par le sous-titre */
  text-decoration:none;
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.iep-porte .iep__door:focus-visible{outline:3px solid var(--iep-orange);outline-offset:3px}
.iep-porte .iep__door-t{
  display:block;
  font-family:var(--iep-disp);
  font-size:17px;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.35;
}
.iep-porte .iep__door-s{
  display:block;
  font-size:13px;
  font-weight:400;          /* cascade : sinon 700 herite du lien */
  margin-top:3px;
  line-height:1.5;
}

.iep-porte .iep__door--main{
  background:var(--iep-navy);
  color:#fff;
  box-shadow:0 10px 26px -14px rgba(7,18,74,.55);
}
.iep-porte .iep__door--main .iep__door-s{color:rgba(255,255,255,.72)}
.iep-porte .iep__door--main:hover{background:var(--iep-navy-2);color:#fff}

.iep-porte .iep__door--alt{
  background:#fff;
  color:var(--iep-navy);
  border:1.5px solid var(--iep-line);
}
.iep-porte .iep__door--alt .iep__door-s{color:var(--iep-muted)}
.iep-porte .iep__door--alt:hover{border-color:var(--iep-orange);color:var(--iep-orange-2)}
.iep-porte .iep__door--alt:hover .iep__door-s{color:var(--iep-orange-2)}

@media (max-width:560px){
  .iep-porte{padding:24px 12px}
  .iep-porte .iep-porte__sheet{padding:26px 22px 24px;border-radius:16px}
  .iep-porte .iep__h1{font-size:23px}
}
@media (prefers-reduced-motion:reduce){
  .iep-porte .iep__door{transition:none}
}