:root{
  color-scheme:light;
  --violet:#a855f7;--violet-dark:#7e22ce;--rose:#ec4899;--jaune:#fbbf24;
  --texte:#1f1235;--texte-2:#6b7280;--fond:#ffffff;--fond-doux:#faf5ff;--bord:#ede4f7;
  --degrade:linear-gradient(120deg,var(--violet),var(--rose));
  --ombre:0 18px 40px -22px rgba(126,34,206,.35);
  --titre:'Outfit',system-ui,sans-serif;--corps:'DM Sans',system-ui,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{height:100%}
body{margin:0;min-height:100%;background:var(--fond);color:var(--texte);font-family:var(--corps);font-size:1rem;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--titre);line-height:1.15;margin:0 0 .5rem;letter-spacing:-.015em}
h1{font-size:clamp(1.7rem,4.5vw,2.3rem);font-weight:800}
h2{font-size:1.35rem;font-weight:700}
h3{font-size:1.05rem;font-weight:600}
p{margin:0 0 .8rem}
a{color:var(--violet-dark)}
button,input,select{font:inherit}
:focus-visible{outline:3px solid var(--violet);outline-offset:2px;border-radius:8px}
.wrap{width:min(1040px,100% - 2rem);margin-inline:auto}
.muted{color:var(--texte-2)}
[hidden]{display:none!important}

/* ---------- Barre du haut ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--bord)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:64px}
.logo{display:flex;align-items:center;gap:.5rem;font-family:var(--titre);font-weight:800;font-size:1.3rem;color:var(--texte);text-decoration:none}
.logo img{height:44px;width:auto}
.onglets{display:flex;gap:.25rem;overflow-x:auto;padding:.5rem 0;border-bottom:1px solid var(--bord);background:#fff}
.onglets .wrap{display:flex;gap:.35rem}
.onglet{border:0;background:transparent;color:var(--texte-2);font-weight:600;padding:.55rem .9rem;border-radius:999px;cursor:pointer;white-space:nowrap}
.onglet[aria-current="page"]{background:var(--fond-doux);color:var(--violet-dark)}
.onglet.ajout{background:var(--degrade);color:#fff}
.btn-compte{border:1px solid var(--bord);background:#fff;border-radius:999px;padding:.4rem .85rem;font-weight:600;color:var(--texte);cursor:pointer}

/* ---------- Boutons et champs ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:0;cursor:pointer;border-radius:999px;font-family:var(--titre);font-weight:600;padding:.8rem 1.4rem;text-decoration:none;transition:transform .15s ease}
.btn:active{transform:scale(.98)}
.btn-principal{background:var(--degrade);color:#fff;box-shadow:0 10px 24px -10px rgba(236,72,153,.55)}
.btn-contour{background:#fff;color:var(--violet-dark);border:1.5px solid var(--violet)}
.btn-danger{background:#fff;color:#b91c1c;border:1.5px solid #fca5a5}
.btn-petit{padding:.4rem .85rem;font-size:.85rem}
.btn:disabled{opacity:.6;cursor:wait}
.champ{margin-bottom:1rem}
.champ label{display:block;font-weight:600;margin-bottom:.35rem;font-size:.95rem}
.champ .aide{font-weight:400;color:var(--texte-2);font-size:.85rem}
.champ input,.champ select{width:100%;padding:.75rem .9rem;border:2px solid var(--bord);border-radius:12px;background:#fff;color:var(--texte)}
.champ input:focus,.champ select:focus{border-color:var(--violet);outline:none}
.grille-2{display:grid;gap:0 1rem}
@media (min-width:640px){.grille-2{grid-template-columns:1fr 1fr}}
.erreur{color:#b91c1c;font-size:.92rem;min-height:1.3em;margin:.25rem 0 0}

/* ---------- Écrans plein centre (connexion, inscription) ---------- */
.centre{min-height:calc(100vh - 64px);display:grid;place-items:center;padding:2.5rem 1rem;background:var(--fond-doux)}
.carte-centre{width:min(460px,100%);background:#fff;border:1px solid var(--bord);border-radius:26px;box-shadow:var(--ombre);padding:2rem 1.6rem}
.carte-centre .btn{width:100%}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.85rem;color:var(--texte-2);margin:.5rem 0 1rem}
.consent input{width:18px;height:18px;margin-top:.15rem;accent-color:var(--violet);flex-shrink:0}

/* ---------- Contenu ---------- */
main.app{padding:1.75rem 0 4rem}
.entete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}
.compteurs{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin-bottom:1.5rem}
@media (min-width:720px){.compteurs{grid-template-columns:repeat(5,1fr)}}
.compteur{background:var(--fond-doux);border-radius:16px;padding:.9rem 1rem}
.compteur b{display:block;font-family:var(--titre);font-size:1.9rem;line-height:1}
.compteur small{color:var(--texte-2)}
.compteur.total{background:var(--texte);color:#fff}
.compteur.total small{color:#d8cde6}
.relances{border:2px solid var(--jaune);background:#fffbeb;border-radius:20px;padding:1.1rem}
.relances h2{display:flex;align-items:center;gap:.5rem;font-size:1.15rem}
.pastille-nb{background:var(--jaune);border-radius:999px;padding:0 .6rem;font-size:.9rem}
.relance{display:flex;align-items:center;gap:.75rem;background:#fff;border-radius:14px;padding:.75rem .85rem;margin-top:.55rem}
.relance .qui{flex:1;min-width:0}
.relance .qui b{display:block}
.relance .qui small{color:var(--texte-2);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jours{font-size:.8rem;font-weight:700;color:#92400e;background:#fef3c7;border-radius:999px;padding:.15rem .55rem;white-space:nowrap}
.vide{text-align:center;padding:2rem 1rem;color:var(--texte-2)}
.vide .emoji{font-size:2rem;display:block;margin-bottom:.4rem}

.filtres{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.filtre{border:1.5px solid var(--bord);background:#fff;border-radius:999px;padding:.35rem .8rem;font-size:.88rem;font-weight:600;color:var(--texte-2);cursor:pointer}
.filtre[aria-pressed="true"]{border-color:var(--violet);background:var(--fond-doux);color:var(--violet-dark)}
.liste{display:grid;gap:.75rem}
.cand{border:1px solid var(--bord);border-radius:18px;padding:1rem;background:#fff;display:grid;gap:.75rem}
@media (min-width:720px){.cand{grid-template-columns:1fr auto;align-items:center}}
.cand-titre{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.cand-titre b{font-family:var(--titre);font-size:1.1rem}
.cand-infos{font-size:.9rem;color:var(--texte-2);display:flex;flex-wrap:wrap;gap:.25rem 1rem;margin-top:.25rem}
.cand-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.cand-actions select{padding:.45rem .6rem;border:2px solid var(--bord);border-radius:10px;background:#fff;font-weight:600}
.statut{display:inline-block;border-radius:999px;padding:.12rem .6rem;font-size:.78rem;font-weight:700}
.s-envoyee{background:#f3e8ff;color:#6b21a8}.s-relancee{background:#fce7f3;color:#9d174d}.s-entretien{background:#fef3c7;color:#92400e}.s-refusee{background:#f3f4f6;color:#4b5563}.s-acceptee{background:#dcfce7;color:#166534}

.panneau{background:#fff;border:1px solid var(--bord);border-radius:22px;padding:1.5rem;box-shadow:var(--ombre);max-width:680px}

.toast{position:fixed;left:50%;bottom:calc(1.25rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--texte);color:#fff;padding:.75rem 1.2rem;border-radius:999px;font-weight:600;box-shadow:0 12px 30px rgba(31,18,53,.35);z-index:50;max-width:calc(100% - 2rem);text-align:center}
.chargement{display:grid;place-items:center;min-height:60vh;color:var(--texte-2)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- Choix du rôle ---------- */
.roles{display:grid;gap:.75rem;margin-top:1rem}
@media (min-width:520px){.roles{grid-template-columns:1fr 1fr}}
.role{text-align:left;border:2px solid var(--bord);background:#fff;border-radius:18px;padding:1rem;cursor:pointer;display:flex;flex-direction:column;gap:.25rem;transition:border-color .15s ease,box-shadow .15s ease}
.role:hover{border-color:#d8b4fe}
.role.actif{border-color:var(--violet);box-shadow:0 10px 24px -14px rgba(126,34,206,.5);background:var(--fond-doux)}
.role-emoji{font-size:1.6rem}
.role b{font-family:var(--titre);font-size:1.05rem}
.role small{color:var(--texte-2);font-size:.85rem;line-height:1.4}
/* ---------- Offres (étudiant) ---------- */
.offre-carte{border:1px solid var(--bord);border-radius:18px;padding:1rem;background:#fff}
.offre-carte.une{border:2px solid var(--jaune);background:#fffdf5}
.offre-tete{display:grid;gap:.75rem}
@media (min-width:720px){.offre-tete{grid-template-columns:1fr auto;align-items:center}}
.offre-detail{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--bord)}
/* ---------- Portail entreprise ---------- */
.stats{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin-top:.6rem;font-size:.88rem;color:var(--texte-2)}
.stats b{color:var(--violet-dark);font-family:var(--titre);font-size:1rem}
.champ textarea{width:100%;padding:.75rem .9rem;border:2px solid var(--bord);border-radius:12px;background:#fff;color:var(--texte);font:inherit;resize:vertical}
.champ textarea:focus{border-color:var(--violet);outline:none}
.options-offre{border:0;padding:0;margin:0 0 1rem}
.options-offre legend{font-weight:600;margin-bottom:.5rem;font-size:.95rem}
.opt{display:flex;align-items:center;gap:.75rem;border:2px solid var(--bord);border-radius:14px;padding:.7rem .9rem;margin-bottom:.5rem;cursor:pointer}
.opt:has(input:checked){border-color:var(--violet);background:var(--fond-doux)}
.opt input{accent-color:var(--violet);width:18px;height:18px;flex-shrink:0}
.opt span{flex:1}
.opt b{display:block;font-family:var(--titre)}
.opt small{color:var(--texte-2);font-size:.85rem}
.opt strong{font-family:var(--titre);color:var(--violet-dark);white-space:nowrap}
.estimation{background:#fffbeb;border-radius:12px;padding:.75rem 1rem;font-size:.92rem}
.actions-form{display:flex;flex-wrap:wrap;gap:.6rem}

/* ---------- Portail de connexion ---------- */
.portes{display:grid;gap:1.25rem}
@media (min-width:720px){.portes{grid-template-columns:1fr 1fr}}
.porte{background:#fff;border:1px solid var(--bord);border-radius:26px;padding:2rem 1.6rem;box-shadow:var(--ombre);display:flex;flex-direction:column;align-items:flex-start}
.porte p{flex:1}
.porte .btn{width:100%}
.porte-entreprise{background:var(--texte);border-color:var(--texte);color:#fff}
.porte-entreprise .muted{color:#d8cde6}
.porte-emoji{font-size:2.2rem;display:block;margin-bottom:.5rem}
.porte-etat{margin-top:.75rem;font-size:.85rem;color:#16a34a;font-weight:600}
.porte-entreprise .porte-etat{color:#86efac}
.btn-sombre{background:#fff;color:var(--texte);box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.carte-entreprise .btn-sombre{background:var(--texte);color:#fff}
.carte-entreprise{border-top:6px solid var(--texte)}
.badge-espace{font-size:.78rem;font-weight:700;border-radius:999px;padding:.2rem .65rem;background:var(--fond-doux);color:var(--violet-dark);white-space:nowrap}
.badge-espace.ent{background:var(--texte);color:#fff}
.actions-top{display:flex;gap:.4rem;flex-wrap:nowrap}
@media (max-width:620px){.actions-top .btn-compte{padding:.35rem .6rem;font-size:.8rem}.badge-espace{display:none}}
.lien-bouton{border:0;background:none;color:var(--violet-dark);text-decoration:underline;cursor:pointer;padding:0;font:inherit}
.auth-retour{text-align:center;margin:1.25rem 0 0;font-size:.92rem}

/* =========================================================
   MODE JOUR / NUIT (bouton dans la barre du haut)
   ========================================================= */
.theme-toggle{width:38px;height:38px;border-radius:999px;border:1px solid var(--bord);background:var(--fond);color:var(--texte);display:grid;place-items:center;cursor:pointer;flex-shrink:0}
.theme-toggle:hover{background:var(--fond-doux)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .ico-soleil{display:none}
:root[data-theme="dark"]{
  --texte:#f3eefa;--texte-2:#b9adcb;--fond:#120a1f;--fond-doux:#1c1230;--bord:#33264b;--violet-dark:#d8b4fe;
  --ombre:0 18px 40px -20px rgba(0,0,0,.7);color-scheme:dark;
}
:root[data-theme="dark"] .theme-toggle .ico-lune{display:none}
:root[data-theme="dark"] .theme-toggle .ico-soleil{display:block}
:root[data-theme="dark"] .top{background:rgba(18,10,31,.9)}
:root[data-theme="dark"] .onglets,
:root[data-theme="dark"] .btn-compte,
:root[data-theme="dark"] .btn-contour,
:root[data-theme="dark"] .carte-centre,
:root[data-theme="dark"] .relance,
:root[data-theme="dark"] .filtre,
:root[data-theme="dark"] .cand,
:root[data-theme="dark"] .panneau,
:root[data-theme="dark"] .offre-carte,
:root[data-theme="dark"] .opt,
:root[data-theme="dark"] .porte,
:root[data-theme="dark"] .champ input,
:root[data-theme="dark"] .champ select,
:root[data-theme="dark"] .champ textarea,
:root[data-theme="dark"] .cand-actions select{background:#1a1029;color:var(--texte)}
:root[data-theme="dark"] .btn-danger{background:transparent;color:#fca5a5;border-color:#7f1d1d}
:root[data-theme="dark"] .compteur.total{background:#2d1b4e;color:#fff}
:root[data-theme="dark"] .relances,
:root[data-theme="dark"] .estimation{background:#2a1f0c}
:root[data-theme="dark"] .offre-carte.une{background:#241a0c}
:root[data-theme="dark"] .jours{background:#3d2e0e;color:#fcd34d}
:root[data-theme="dark"] .toast{background:#2d1b4e;border:1px solid var(--bord)}
:root[data-theme="dark"] .porte-entreprise{background:#2d1b4e;border-color:#4c3575}
:root[data-theme="dark"] .btn-sombre,
:root[data-theme="dark"] .carte-entreprise .btn-sombre{background:#f3eefa;color:#120a1f}
:root[data-theme="dark"] .carte-entreprise{border-top-color:var(--jaune)}
:root[data-theme="dark"] .badge-espace.ent{background:var(--jaune);color:#1f1235}
:root[data-theme="dark"] .opt:has(input:checked){background:#2a1c42}

/* Ciel de lanternes derrière le portail et l'inscription, en mode nuit */
.centre{position:relative;overflow:hidden}
.centre > :not(.ciel-lanternes){position:relative;z-index:1}
.ciel-lanternes{display:none;position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
:root[data-theme="dark"] .ciel-lanternes{display:block}
.lanterne-vol{position:absolute;left:var(--x);bottom:-120px;width:var(--t);opacity:0;animation:envol var(--d) linear var(--r) infinite}
.lanterne-vol::before{content:"";position:absolute;inset:-60%;border-radius:50%;background:radial-gradient(circle,rgba(251,191,36,.45) 0%,rgba(251,146,60,.15) 40%,transparent 70%)}
.lanterne-vol i{position:relative;display:block;width:100%;aspect-ratio:160/199;background:url(assets/lanterne-ciel.png) center/contain no-repeat;filter:drop-shadow(0 0 10px rgba(251,191,36,.85));animation:balance 4.5s ease-in-out infinite alternate}
@keyframes envol{0%{transform:translate(0,0);opacity:0}8%{opacity:var(--o)}50%{transform:translate(18px,-55vh)}88%{opacity:var(--o)}100%{transform:translate(-10px,-115vh);opacity:0}}
@keyframes balance{from{transform:rotate(-7deg)}to{transform:rotate(6deg)}}
@media (prefers-reduced-motion:reduce){.lanterne-vol{animation:none;opacity:var(--o);bottom:auto;top:calc(20% + var(--t))}.lanterne-vol i{animation:none}}

/* barre du haut compacte sur mobile */
.btn-compte{white-space:nowrap}
.court{display:none}
@media (max-width:640px){.long{display:none}.court{display:inline}.top .wrap{gap:.5rem}}
@media (max-width:420px){.logo-nom{display:none}}
.btn-compte{display:inline-flex;align-items:center;justify-content:center;line-height:1.2}

/* ---------- Espaces connectés ---------- */
.onglets-auth{display:flex;background:var(--fond-doux);border:1px solid var(--bord);border-radius:999px;padding:4px;margin:1.25rem 0 1.5rem}
.onglets-auth button{flex:1;border:0;background:transparent;border-radius:999px;padding:.6rem;font-family:var(--titre);font-weight:600;color:var(--texte-2);cursor:pointer}
.onglets-auth button[aria-selected="true"]{background:var(--fond);color:var(--violet-dark);box-shadow:0 4px 12px -6px rgba(126,34,206,.4)}
.lien-discret{display:block;text-align:center;margin-top:1rem;font-size:.9rem}
.info{background:var(--fond-doux);border-radius:12px;padding:.8rem 1rem;font-size:.92rem;color:var(--texte-2);margin:0 0 1rem}
.plan{display:inline-block;background:var(--fond-doux);color:var(--violet-dark);font-weight:700;border-radius:999px;padding:.1rem .7rem;font-size:.85rem}
.rappel-info{font-size:.82rem;color:var(--texte-2)}

/* bouton « Se déconnecter » dans la barre du haut */
.btn-deconnexion{color:#b91c1c;border-color:#fecaca}
.btn-deconnexion:hover{background:#fef2f2}
:root[data-theme="dark"] .btn-deconnexion{color:#fca5a5;border-color:#7f1d1d;background:transparent}

/* ciel de lanternes derrière les tableaux de bord (mode nuit uniquement) */
.app-ciel{position:relative;overflow:hidden;min-height:calc(100vh - 130px)}
.app-ciel > .wrap{position:relative;z-index:1}