/* ==========================================================================
   JeuneInvest — principal.css
   ========================================================================== */

:root{
  --primaire:#2BBBED;
  --accent:#EEDC00;
  --encre:#101218;
  --tendu:#2b3340;
  --muet:#667085;
  --fond:#F5F9FF;
  --carte:#FFFFFF;
  --ligne:#E6EEFC;
  --rayon:16px;
  --ombre:0 8px 24px rgba(16,18,24,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--encre); background:var(--fond);
  font-family:"Nunito",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{font-family:"Kanit","Nunito",sans-serif; margin:0 0 .5rem; line-height:1.2;}
h1{font-size:clamp(28px,3vw,40px)} h2{font-size:clamp(20px,2vw,26px)}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
.conteneur{max-width:1100px;margin:0 auto;padding:0 16px}

/* Logo */
.marque__bloc{display:inline-flex; gap:4px; align-items:flex-end}
.marque__ji{font-family:"Kanit"; font-weight:700; color:var(--primaire)}
.marque__invest{font-family:"Kanit"; font-weight:700; color:var(--accent)}

/* En-tête */
.entete-site{background:var(--carte); border-bottom:1px solid var(--ligne); position:sticky; top:0; z-index:50}
.entete-interieur{display:flex; align-items:center; justify-content:space-between; min-height:64px}
.marque{display:flex; align-items:center; gap:10px}

/* Nav bureau */
.nav-bureau{display:flex; align-items:center; gap:12px}
.lien-nav{padding:10px 12px; border-radius:10px; color:var(--tendu); transition:background .15s ease}
.lien-nav:hover{background:#f4f8ff}
.lien-nav[aria-disabled="true"]{opacity:.6; cursor:not-allowed}

/* Menu déroulant */
.menu-deroulant{position:relative}
.menu-deroulant__bouton{
  display:flex; align-items:center; gap:6px; padding:10px 12px;
  border-radius:10px; border:0; background:transparent; color:var(--tendu); font-weight:700; cursor:pointer;
}
.menu-deroulant__bouton[aria-expanded="true"]{background:#f4f8ff}
.menu-deroulant__liste{
  position:absolute; top:calc(100% + 6px); left:0; min-width:230px;
  background:var(--carte); border:1px solid var(--ligne); border-radius:12px; box-shadow:var(--ombre); padding:8px; display:none;
}
.menu-deroulant__liste a{display:flex; gap:8px; align-items:center; padding:10px 12px; border-radius:8px; color:var(--tendu)}
.menu-deroulant__liste a:hover{background:#f4f8ff}
.menu-deroulant.ouvert .menu-deroulant__liste{display:block}

/* Recherche */
.recherche-site{display:flex; align-items:center; gap:6px; padding:6px 8px; border-radius:999px; background:#f1f6fb}
.recherche-site input{border:0; background:transparent; outline:none; min-width:210px; padding:6px; color:var(--encre)}
.recherche-site button{border:0; background:transparent; cursor:pointer; padding:6px; color:var(--tendu)}

/* Bouton + */
.bouton-plus{width:36px; height:36px; border-radius:50%; display:inline-grid; place-items:center; background:var(--primaire); color:#fff; box-shadow:var(--ombre)}

/* Utilisateur */
.zone-utilisateur{display:flex; align-items:center; gap:10px}
.avatar{width:36px; height:36px; border-radius:50%; display:inline-grid; place-items:center; overflow:hidden; background:#eef6fb; color:#7a8599}
.avatar img{width:100%; height:100%; object-fit:cover}

/* Burger (mobile uniquement) */
.burger{display:none; background:#fff; border:1px solid var(--ligne); border-radius:12px; padding:10px; cursor:pointer}
.burger__barre{display:block; width:22px; height:2px; background:var(--tendu); margin:4px 0; border-radius:2px}

/* ===================== MENU MOBILE PLEIN ÉCRAN (liens à gauche) ===================== */
.tiroir-nav{
  position:fixed; inset:0; z-index:1000; background:#1F2B4A;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.tiroir-nav.ouvert{opacity:1; pointer-events:auto}
.tiroir-nav[aria-hidden="true"]{visibility:hidden}
.tiroir-nav[aria-hidden="false"]{visibility:visible}

/* Contenu interne (colonne) */
.tiroir-nav__contenu{
  height:100%; width:100%; display:flex; flex-direction:column;
  padding:12px 12px 18px;
}

/* Entête (marque à gauche + bouton fermer à droite) */
.tiroir-nav__entete{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px; border-bottom:1px solid rgba(255,255,255,.08);
  position:sticky; top:0; background:#1F2B4A; z-index:2;
}
.marque--tiroir .marque__ji{color:var(--primaire)}
.marque--tiroir .marque__invest{color:var(--accent)}
.tiroir-nav__fermer{
  width:42px; height:42px; display:grid; place-items:center;
  background:#fff; color:#111; border:0; border-radius:12px; cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}

/* Liste de liens (alignée à gauche) */
.tiroir-nav__menu{
  padding:18px 8px; display:flex; flex-direction:column; gap:14px;
  width:min(520px, 100%);
}
.tiroir-nav__lien{
  display:flex; align-items:center; gap:12px;
  padding:16px 18px; border-radius:16px;
  color:#fff; font-weight:800; font-size:20px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
}
.tiroir-nav__lien i{font-size:20px; width:26px; text-align:center}
.tiroir-nav__lien:hover, .tiroir-nav__lien:focus-visible{background:rgba(255,255,255,.12); outline:none}
.tiroir-nav__lien.cta{background:var(--primaire); border-color:transparent}

/* Responsif : burger seulement en mobile */
@media (max-width:720px){
  .nav-bureau{display:none}
  .burger{display:inline-block}
}
@media (min-width:721px){
  .burger{display:none}
  .nav-bureau{display:flex}
}

/* Cartes / formulaires génériques */
.carte{background:var(--carte); border:1px solid var(--ligne); border-radius:var(--rayon); box-shadow:var(--ombre); padding:20px; margin:16px auto; max-width:680px}
.carte-alt{border-color:#f3e9a6}
.formulaire{display:flex; gap:10px; flex-wrap:wrap}
.formulaire input{flex:1 1 220px; padding:12px 14px; border-radius:12px; border:1px solid var(--ligne); background:#fff; outline:none}
.bouton{padding:12px 16px; border:none; border-radius:12px; cursor:pointer; font-weight:700}
.bouton-primaire{background:var(--primaire); color:#fff}
.bouton-secondaire{background:#fff; color:var(--encre); border:1px solid var(--ligne)}
.etat-formulaire{min-height:20px; font-size:14px}
.etat-formulaire.ok{color:#0a7a3d}
.etat-formulaire.err{color:#a00}

/* Pied de page */
.pied-site{margin-top:40px; border-top:1px solid var(--ligne); background:var(--carte)}
.pied-grille{display:grid; gap:20px; grid-template-columns:2fr 1fr 1fr 1fr; padding:28px 0}
.liste-pied{list-style:none; margin:0; padding:0}
.liste-pied li{margin:8px 0}
.liste-pied.reseaux{display:flex; gap:14px; align-items:center}
.liste-pied.reseaux li{margin:0}
.liste-pied.reseaux a{font-size:22px}
.pied-bas{border-top:1px solid var(--ligne); text-align:center; padding:12px; color:var(--muet)}
@media (max-width:960px){.pied-grille{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.pied-grille{grid-template-columns:1fr}}

/* Accessibilité & utilitaires */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
[hidden]{display:none !important}
a:focus-visible, button:focus-visible{outline:2px solid var(--primaire); outline-offset:2px; border-radius:10px}
html,body{overflow-x:hidden}