/* ============================================================================
   e-CEFFID — feuille de style partagée des pages candidat
   Basée sur la maquette validée (maquette.html). Voir docs/DESIGN.md.
   ============================================================================ */

:root{
  --bg-1:#e9f1fc; --bg-2:#dbe8fa; --bg-3:#cfe0f7;
  --ink:#122054; --ink-soft:#57628f; --ink-faint:#8894b8;
  --accent:#1d5fc7; --accent-strong:#0f3f92; --accent-soft:rgba(29,95,199,0.12);
  --sky:#5fabe6;
  --gold:#e7a93b; --gold-strong:#b9791a;
  --correct:#278f63; --correct-soft:rgba(39,143,99,0.12);
  --warning:#e2883c; --warning-soft:rgba(226,136,60,0.12);
  --danger:#d1565c; --danger-soft:rgba(209,86,92,0.10);
  --sheet-bg:rgba(255,255,255,0.34); --sheet-border:rgba(255,255,255,0.95);
  --field-bg:rgba(255,255,255,0.55); --field-border:rgba(18,32,84,0.16);
  color-scheme: light;
}

*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; }
html{ height:100%; }
body{
  background:
    radial-gradient(60% 50% at 15% 8%, rgba(255,255,255,0.9), transparent 60%),
    linear-gradient(160deg, var(--bg-1), var(--bg-2) 55%, var(--bg-3));
  color:var(--ink);
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  height:100vh; height:100dvh;
  display:flex; flex-direction:column;
  /* Rien de sélectionnable par défaut, partout dans l'app (décidé le
     11 septembre 2026 — remplace l'ancienne règle qui réservait cette
     protection au seul "chrome" de l'appli). Les champs de formulaire
     (input/textarea) restent utilisables : ce n'est pas affecté par
     user-select sur un ancêtre. */
  user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;
}

/* --- Hero + carte qui remonte --- */
.auth-hero{
  flex:none; height:268px; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background:radial-gradient(130% 100% at 50% 0%, var(--sky) 0%, var(--accent) 55%, var(--accent-strong) 100%);
}
.hero-logo{
  width:104px; height:104px; border-radius:50%; object-fit:cover;
  border:3px solid rgba(255,255,255,0.9);
  box-shadow:0 16px 32px -14px rgba(18,32,84,0.45);
  background:#fff;
}
.hero-badge{
  font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.02em;
  font-weight:600; color:#fff; background:rgba(255,255,255,0.18);
  border:1px solid rgba(255,255,255,0.4);
  padding:8px 16px; border-radius:16px;
  display:flex; align-items:flex-start; gap:7px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  max-width:230px; line-height:1.4;
}
.hero-badge .dot{ width:6px; height:6px; border-radius:50%; background:#fff; flex:none; margin-top:4px; }

.auth-sheet{
  flex:1; display:flex; flex-direction:column; min-height:0;
  background:var(--sheet-bg);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border-radius:28px 28px 0 0;
  margin-top:-24px; position:relative; z-index:2;
  padding:26px 22px 20px;
  box-shadow:0 -6px 30px -20px rgba(18,32,84,0.3);
  border:1.5px solid var(--sheet-border);
  border-bottom:none;
}
.sheet-top{ flex:1; min-height:0; overflow-y:auto; scrollbar-width:none; }
.sheet-top::-webkit-scrollbar{ display:none; }
.sheet-actions{ flex:none; padding-top:16px; }

.auth-title{ font-family:'Unbounded', sans-serif; font-weight:700; font-size:22px; margin-bottom:6px; text-align:center; }
.auth-sub{ font-size:13.5px; color:var(--ink-soft); margin-bottom:22px; line-height:1.5; text-align:center; }

.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; }
.field-label-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.field-label-row label{ margin-bottom:0; }
.field-input{
  display:flex; align-items:center; gap:8px;
  background:var(--field-bg); border:1px solid var(--field-border);
  border-radius:13px; padding:12px 14px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field-input:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.field-input.champ-erreur{ border-color:var(--danger); }
.field-input .ic{ font-size:14px; opacity:0.55; flex:none; }
.field-input .pfx{ font-size:13.5px; color:var(--ink-faint); font-weight:600; }
.field-input input{
  border:none; outline:none; background:transparent; flex:1; min-width:0;
  font-family:'Plus Jakarta Sans', sans-serif; font-size:14px; color:var(--ink);
}
.field-input input::placeholder{ color:var(--ink-faint); }
.eye-toggle{ background:none; border:none; cursor:pointer; color:var(--ink-faint); font-size:15px; padding:2px; flex:none; }
.eye-toggle:hover{ color:var(--ink-soft); }
.field-erreur{ font-size:11.5px; color:var(--danger); margin-top:5px; }
.field-hint{ font-size:11.5px; color:var(--ink-faint); margin-top:6px; line-height:1.5; }

.btn{
  padding:14px 16px; border-radius:13px;
  font-family:'Plus Jakarta Sans', sans-serif; font-weight:700; font-size:14px;
  border:1px solid transparent; cursor:pointer; text-align:center;
  text-decoration:none; display:inline-block;
  transition:transform .15s ease, background .15s ease, opacity .15s ease;
  user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;
}
.btn:active{ transform:scale(0.97); }
/* Un bouton masqué par l'attribut `hidden` (ex. "Activer" des notifications
   une fois bloquées, accueil.php) doit le rester : sans cette règle, le
   display:inline-block ci-dessus l'emporte — voir docs/DESIGN.md. */
.btn[hidden]{ display:none; }

.btn-primary{ background:var(--accent-strong); color:#fff; box-shadow:0 12px 22px -10px rgba(15,63,146,0.55); }
.btn-primary:hover{ background:#0d3679; }
.btn-primary:disabled{ opacity:0.5; cursor:not-allowed; transform:none; }
.btn-block{ display:block; width:100%; }

.link{ font-size:12.5px; color:var(--accent); font-weight:600; text-decoration:none; cursor:pointer; background:none; border:none; padding:0; font-family:inherit; }
.link:hover{ text-decoration:underline; }
.switch-line{ margin-top:16px; text-align:center; font-size:13px; color:var(--ink-soft); }
.legal{ font-size:11px; color:var(--ink-faint); line-height:1.5; margin-top:14px; text-align:center; }

.alert{
  display:flex; align-items:flex-start; gap:9px;
  border-radius:13px; padding:11px 13px; margin-bottom:18px;
  font-size:12.5px; font-weight:600; line-height:1.5;
}
.alert-danger{ background:var(--danger-soft); color:var(--danger); border:1px solid rgba(209,86,92,0.3); }
.alert-success{ background:var(--correct-soft); color:var(--correct); border:1px solid rgba(39,143,99,0.3); }
.alert-warning{ background:var(--warning-soft); color:var(--warning); border:1px solid rgba(226,136,60,0.3); }
.alert .ic{ flex:none; font-size:15px; }

.countdown-block{ text-align:center; padding:6px 0 4px; }
.countdown-time{
  font-family:'Unbounded', sans-serif; font-weight:700; font-size:34px;
  color:var(--accent-strong); font-variant-numeric:tabular-nums; margin:10px 0 4px;
}
.countdown-label{ font-size:12.5px; color:var(--ink-soft); }

/* ============================================================================
   Accueil — voir maquette.html (écran "ACCUEIL"). Ici en plein viewport
   (pas de cadre .phone/.screen, comme les autres pages réelles).
   ============================================================================ */
.home-top{
  flex:none;
  padding:14px 22px; display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:rgba(255,255,255,0.4);
  border-bottom:1.5px solid var(--sheet-border);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.home-brand{ display:flex; align-items:center; gap:8px; }
.home-brand img{ width:26px; height:26px; border-radius:50%; object-fit:cover; }
.home-brand span{ font-family:'Unbounded', sans-serif; font-weight:700; font-size:14px; color:var(--ink); }
.icon-btn-ghost{
  width:34px; height:34px; border-radius:50%; flex:none; position:relative;
  background:rgba(255,255,255,0.7); border:1px solid rgba(255,255,255,0.85);
  display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--ink-soft);
}
.icon-btn-ghost .ping{
  position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%;
  background:var(--gold); border:1.5px solid #fff;
}

/* ============================================================================
   Barre du haut des écrans secondaires (retour + titre) — parrainage.php,
   notifications.php, et tout futur écran du même genre. Voir docs/DESIGN.md
   pour la règle du bouton retour (cercle plein + icône SVG, jamais un
   caractère "←"/"↑").
   ============================================================================ */
.page-top{
  flex:none; padding:14px 22px; display:grid; grid-template-columns:34px 1fr 34px; align-items:center; gap:12px;
  background:rgba(255,255,255,0.4); border-bottom:1.5px solid var(--sheet-border);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.page-back-btn{
  width:34px; height:34px; border-radius:50%;
  background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; cursor:pointer;
  box-shadow:0 8px 16px -8px rgba(29,95,199,0.55);
}
.page-title{
  grid-column:2; display:flex; justify-content:center; min-width:0;
  font-family:'Unbounded', sans-serif; font-weight:700; font-size:15px; color:var(--ink);
}
.page-title-text{
  position:relative; display:inline-block; padding-bottom:3px; max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.page-title-text::before{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:4px; border-radius:99px;
  background:linear-gradient(to bottom, #ce1126 0%, #ce1126 50%, #1c8a4f 50%, #1c8a4f 100%);
}
.page-title-text::after{
  content:"★"; position:absolute; left:50%; bottom:-1.5px; transform:translateX(-50%);
  font-size:8px; line-height:1; color:#e7a93b;
}

/* Corps de page scrollable + cartes de contenu — même famille que la barre
   du haut ci-dessus, pour tout écran secondaire (parrainage.php, profil.php...). */
.page-scroll{ flex:1; min-height:0; overflow-y:auto; scrollbar-width:none; }
.page-scroll::-webkit-scrollbar{ display:none; }
.page-content{ max-width:560px; width:100%; margin:0 auto; padding:22px 22px 40px; }

.page-card{
  background:var(--sheet-bg); border:1.5px solid var(--sheet-border);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-radius:14px; padding:20px; margin-bottom:16px;
  box-shadow:0 14px 30px -20px rgba(18,32,84,0.18);
}
.page-card h2{ font-family:'Unbounded', sans-serif; font-weight:700; font-size:15px; margin:0 0 12px; color:var(--ink); }

/* Nombre de statistique isolé (compteur de filleuls, progression...) : jamais
   Unbounded ici — ses chiffres ronds (surtout le "0") sont pris pour un simple
   cercle à cette taille. IBM Plex Mono, déjà utilisé pour les autres pastilles
   numériques de l'appli, reste lisible comme un chiffre. */
.stat-num{ font-family:'IBM Plex Mono', monospace; font-weight:700; font-variant-numeric:tabular-nums; }

.page-back-to-top{
  position:fixed; right:20px; bottom:24px; z-index:5;
  width:46px; height:46px; border-radius:50%; border:none;
  background:var(--accent-strong); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 12px 24px -10px rgba(15,63,146,0.55);
  opacity:0; pointer-events:none; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease;
}
.page-back-to-top.visible{ opacity:1; pointer-events:auto; transform:translateY(0); }

/* Raccourci flottant vers l'accueil — affiché uniquement quand la page a été
   ouverte depuis profil.php (voir le script de la page concernée) : un aller
   simple vers l'accueil, sans repasser par le profil comme le ferait le
   bouton retour "intelligent". */
.page-float-home{
  position:fixed; right:20px; bottom:82px; z-index:5;
  width:46px; height:46px; border-radius:50%; border:none;
  background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 12px 24px -10px rgba(29,95,199,0.55);
}
.page-float-home[hidden]{ display:none; }

.home-body{ flex:1; min-height:0; overflow-y:auto; scrollbar-width:none; padding:18px 22px 18px; max-width:520px; width:100%; margin:0 auto; }
.home-body::-webkit-scrollbar{ display:none; }

/* ============================================================================
   Modale générique — tout écran qui a besoin d'un formulaire dans une fenêtre
   plutôt qu'en ligne (ex. profil.php). Ouverture/fermeture via data-open-modal
   / data-close-modal, voir assets/js/app.js.
   ============================================================================ */
.modal-overlay{
  position:fixed; inset:0; background:rgba(18,32,84,0.45);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:50;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal-panel{
  background:#fff; border-radius:18px; padding:24px 22px; width:100%; max-width:420px;
  max-height:88vh; overflow-y:auto; position:relative;
  box-shadow:0 30px 60px -20px rgba(18,32,84,0.4);
  transform:translateY(12px); transition:transform .2s ease;
}
.modal-overlay.open .modal-panel{ transform:translateY(0); }
.modal-panel h2{ font-family:'Unbounded', sans-serif; font-weight:700; font-size:16px; margin:0 0 16px; color:var(--ink); padding-right:24px; }
.modal-close{
  position:absolute; top:16px; right:16px; width:30px; height:30px; border-radius:50%;
  background:var(--field-bg); border:none; color:var(--ink-soft); font-size:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}

.home-section{ border-radius:14px; padding:12px 20px 18px; margin-bottom:14px; position:relative; overflow:hidden; }
.home-section h4{ font-family:'Unbounded', sans-serif; font-weight:800; font-size:17px; margin:0 0 10px; line-height:1.25; }
.home-section p{ font-size:13px; line-height:1.55; margin:0 0 16px; }
.home-section .btn-row{ display:flex; gap:9px; flex-wrap:wrap; position:relative; z-index:1; }

.home-hero{
  background:var(--sheet-bg);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1.5px solid var(--sheet-border);
  box-shadow:0 20px 50px -20px rgba(18,32,84,0.35);
}
.home-hero h4{ color:var(--ink); margin-bottom:10px; }
.home-hero .quote{ font-size:13px; color:var(--ink-soft); line-height:1.6; display:flex; gap:7px; }
.home-hero .quote .star{ color:var(--gold); flex:none; font-size:13px; margin-top:1px; }
.home-hero .quote-author{ font-size:11.5px; color:var(--ink-faint); font-weight:600; margin-top:6px; text-align:right; }

.home-blue{
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color:#fff; box-shadow:0 18px 36px -16px rgba(15,63,146,0.5);
}
.home-blue h4{ color:#fff; }
.home-blue p{ color:rgba(255,255,255,0.85); }
.home-blue::after{
  content:""; position:absolute; top:-40px; right:-40px; width:150px; height:150px;
  border:1.5px solid rgba(255,255,255,0.16); border-radius:50%; pointer-events:none;
}
.home-blue .btn-row{ justify-content:flex-end; }
.btn-glass{
  background:rgba(255,255,255,0.16);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1.5px solid rgba(255,255,255,0.55); color:#fff;
  font-weight:700; padding:9px 16px; font-size:12.5px;
}
.btn-glass:hover{ background:rgba(255,255,255,0.26); }

/* Bouton doré scintillant (Coach personnel, accueil.php) — signale un
   exercice disponible non encore traité (ajouté le 20 septembre 2026).
   Anneau lumineux qui respire plutôt qu'un clignotement d'opacité brutal,
   cohérent avec le principe "animation fluide" de docs/DESIGN.md. */
.btn-glass-dore{
  background:var(--gold); border-color:var(--gold); color:#3a2600;
  animation:scintiller-dore 1.8s ease-in-out infinite;
}
.btn-glass-dore:hover{ background:var(--gold-strong); }
@keyframes scintiller-dore{
  0%, 100%{ box-shadow:0 0 0 0 rgba(231,169,59,0.55); }
  50%{ box-shadow:0 0 0 9px rgba(231,169,59,0); }
}
@media (prefers-reduced-motion: reduce){
  .btn-glass-dore{ animation:none; }
}

.home-pale{ background:var(--surface-card-2, #eef2fb); box-shadow:none; }
.home-pale h4{ color:var(--ink); }
.testi-content{ transition:opacity .3s ease; }
.home-pale .testi-quote{ font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.5; margin-bottom:8px; }
.home-pale .testi-author{ font-size:12px; color:var(--ink-soft); margin-bottom:16px; }
.dots{ display:flex; gap:5px; }
.dots span{ width:16px; height:5px; border-radius:99px; background:rgba(29,95,199,0.18); transition:background .3s ease; }
.dots span.active{ background:var(--accent-strong); }
@media (prefers-reduced-motion: reduce){
  .testi-content{ transition:none; }
}

.home-white{
  background:#fff; border:1px solid rgba(18,32,84,0.08);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:16px 16px; box-shadow:0 14px 30px -20px rgba(18,32,84,0.18);
}
.home-white .txt{ flex:1; min-width:0; }
.home-white .txt h4{ font-size:13.5px; margin-bottom:3px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.home-white .txt p{ font-size:11.5px; color:var(--ink-soft); margin:0; }
.btn-outline-green{
  flex:none; background:transparent; border:1.5px solid var(--correct); color:var(--correct);
  font-weight:700; padding:9px 16px; font-size:12.5px;
}
.btn-outline-blue{
  flex:none; background:transparent; border:1.5px solid var(--accent); color:var(--accent-strong);
  font-weight:700; padding:9px 16px; font-size:12.5px;
}

/* Cartes d'invitation à agir (notifications, parrainage) — mêmes proportions
   que .home-blue/.home-pale mais identité sobre, boutons secondaires. */
.home-notif, .home-parrain{
  background:var(--surface-card, #fff); border:1px solid var(--card-border, rgba(18,32,84,0.08));
  box-shadow:0 14px 30px -20px rgba(18,32,84,0.18);
}
.home-notif h4, .home-parrain h4{ color:var(--ink); }
.home-notif p, .home-parrain p{ color:var(--ink-soft); }

/* Icônes de réseaux — boutons ronds compacts, jamais de texte à côté :
   pas de risque de superposition/débordement quel que soit l'écran. */
.social-btn{
  flex:none; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 20px -10px rgba(18,32,84,0.35);
  transition:transform .15s ease;
}
.social-btn:active{ transform:scale(0.94); }
.social-btn-whatsapp{ background:#25D366; }
.social-btn-facebook{ background:#1877F2; }

.bottom-nav{
  display:flex; justify-content:space-around; align-items:center;
  flex:none; padding:10px 8px 14px; border-top:1.5px solid var(--sheet-border);
  background:rgba(255,255,255,0.4); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.nav-item{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--ink-faint); font-size:9.5px; font-weight:600;
  background:none; border:none; cursor:pointer; font-family:inherit; text-decoration:none;
  padding:5px 14px; border-radius:14px; transition:background .15s ease, color .15s ease;
}
.nav-item .ic{ font-size:17px; }
.nav-item.active{
  color:var(--accent-strong); font-weight:800;
  background:var(--accent-soft);
}

/* Petit drapeau du Burkina, dans le coin de la carte "Bienvenue" — voir DESIGN.md */
.hero-flag{
  position:absolute; top:-24px; right:-15px; z-index:0;
  width:92px; opacity:1;
  transform:rotate(-15deg);
}
.hero-flag svg{ display:block; width:100%; height:auto; filter:drop-shadow(0 2px 4px rgba(18,32,84,0.16)); }
.hero-flag .cloth{
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation:flagSway 3s ease-in-out infinite;
}
@keyframes flagSway{
  0%,100%{ transform:rotate(0deg); }
  50%{ transform:rotate(6deg); }
}
@media (prefers-reduced-motion: reduce){
  .hero-flag .cloth{ animation:none; transform:rotate(0deg); }
}

/* ============================================================================
   Barre de chargement entre deux pages (25 septembre 2026, audit de
   performance — voir docs/AUDIT_PERFORMANCE.md et assets/js/app.js). Avance
   vite au début puis ralentit sans jamais atteindre le bout : elle montre que
   l'app a bien pris le tap en compte, sans prétendre connaître la durée
   réelle du chargement (qui dépend du réseau).
   ============================================================================ */
.nav-progress{
  position:fixed; top:0; left:0; z-index:100; height:3px; width:0;
  background:linear-gradient(90deg, var(--sky), var(--accent));
  box-shadow:0 0 8px rgba(29,95,199,0.55);
  border-radius:0 3px 3px 0; opacity:0; pointer-events:none;
}
.nav-progress.en-cours{ opacity:1; animation:navProgress 12s cubic-bezier(.08,.75,.2,1) forwards; }
@keyframes navProgress{
  0%{ width:0; }
  8%{ width:45%; }
  30%{ width:72%; }
  100%{ width:94%; }
}
@media (prefers-reduced-motion: reduce){
  .nav-progress.en-cours{ animation:none; width:70%; }
}

/* Logo dans le coin haut droit du ruban .page-top, sur tous les écrans qui
   n'y ont rien d'autre (25 septembre 2026, repris de qcm.php) — occupe la
   3e colonne (34px) de la grille du ruban. */
.page-top-logo{ width:30px; height:30px; border-radius:50%; object-fit:cover; justify-self:end; }

/* Version ordinateur (26 septembre 2026, voir include/ordinateur.php) : la
   barre latérale et les blocs `.o-seul` n'existent que sur grand écran —
   toute la mise en page grand écran vit dans assets/css/ordinateur.css,
   chargée seulement à partir de 1024 px. */
@media (max-width: 1023.98px){
  .d-side, .o-seul{ display:none !important; }
}