/* ======================================================
   OPUS — DESIGN SYSTEM OFFICIEL
   VERSION A — BACKWARD-COMPATIBLE (STABILITÉ GLOBALE)
   Objectif: zéro scroll horizontal + topbar fixe + pages stables
   ====================================================== */

/* ======================================================
   1) VARIABLES GLOBALES (LEGACY + OPUS)
   ====================================================== */
   :root{
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    color:#111;
    background:#f6f7fb;
  
    /* LEGACY (NE PAS SUPPRIMER) */
    --color-accent:#0a5295;
    --color-accent-dark:#07386f;
    --color-accent-light:#3a8dd9;
  
    --color-success:#29c37e;
    --color-success-dark:#1e8f5d;
    --color-success-light:#61dfa7;
  
    --color-warn:#f5a623;
    --color-warn-dark:#c27a00;
    --color-warn-light:#f7c776;
  
    --color-danger:#dc2626;
  
    --color-bg-nav:#0a5295;
  
    /* OPUS ALIAS */
    --opus-blue:var(--color-accent);
    --opus-blue-dark:var(--color-accent-dark);
    --opus-blue-light:var(--color-accent-light);
  
    --bg-main:#f5f7fb;
    --bg-card:#fff;
    --bg-soft:#fbfcfe;
  
    --text-main:#0f172a;
    --text-muted:#64748b;
  
    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:16px;
    --radius-xl:20px;
  
    --shadow-sm:0 4px 14px rgba(0,0,0,.08);
    --shadow-md:0 12px 36px rgba(0,0,0,.14);
    --shadow-lg:0 24px 64px rgba(0,0,0,.20);
  
    --topbar-h:64px;
  }
  
  /* ======================================================
     2) RESET GLOBAL + CONTRAT “APP NATIVE”
     ====================================================== */
  *,*::before,*::after{box-sizing:border-box}
  
  html{
    margin:0;
    padding:0;
    width:100%;
    max-width:100vw;
    height:100%;
    overflow-x:hidden !important;
    overscroll-behavior-x:none;
    /* ✅ Empêcher le drag horizontal sur mobile */
    touch-action:pan-y pinch-zoom;
    position:relative;
    /* ✅ Empêcher le scroll horizontal même si du contenu dépasse */
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  
  body{
    margin:0;
    padding:0;
    width:100%;
    max-width:100vw;
    min-height:100vh;
    background:var(--bg-main);
    color:var(--text-main);
  
    /* ✅ Laisse la topbar fixed sans chevauchement */
    padding-top:var(--topbar-h);
  
    /* ✅ Contrat anti glisse / anti overflow horizontal */
    overflow-x:hidden !important;
    overscroll-behavior-x:none;
    /* ✅ autorise uniquement le scroll vertical (évite le “drag” du layout) */
    touch-action:pan-y pinch-zoom;
    position:relative;
  }
  
  /* ✅ Sécurité universelle : les enfants ne doivent jamais élargir la page */
  #appArea,
  .page-area,
  .landing,
  .landing-section,
  .container,
  .card{
    max-width:100vw;
    overflow-x:hidden;
    box-sizing:border-box;
  }
  
  /* ✅ Empêcher le scroll horizontal sur tous les conteneurs principaux */
  #loginContainer,
  #appArea,
  .navbar,
  .mobile-nav-overlay{
    max-width:100vw;
    overflow-x:hidden;
    position:relative;
  }
  
  /* IMPORTANT : min-width:0 = la clé pour éviter les débordements invisibles
     sur flex/grid quand un enfant contient un long texte */
  #appArea *,
  .page-area *,
  .landing *{
    min-width:0;
    max-width:100%;
  }
  
  h1,h2,h3{margin:0 0 10px;font-weight:800;letter-spacing:-.02em}
  .muted{color:var(--text-muted);font-size:.85rem}
  code{background:#f2f2f7;padding:2px 6px;border-radius:8px}
  
  /* ======================================================
     3) TOPBAR (fix align + stable)
     ====================================================== */
  .topbar{
    position:fixed;
    top:0;left:0;right:0;
    height:var(--topbar-h);
    display:flex;
    align-items:center;            /* ✅ aligne tout verticalement */
    justify-content:space-between;
    padding:0 18px;
    background:linear-gradient(90deg,var(--color-accent-dark),var(--color-accent));
    color:#fff;
    z-index:1100;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
    gap:16px;
  }
  
  .topbar-left{
    flex:1;
    display:flex;
    align-items:center;
    flex-shrink:0;
  }
  
  .topbar-center{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    pointer-events:none; /* Permet de cliquer à travers pour les boutons */
  }
  
  .topbar-right{
    flex:1;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    flex-shrink:0;
  }
  
  .topbar .brand{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
  }
  
  .logo-img{
    height:52px; /* 40px * 1.3 = 52px */
    width:auto;
    display:block;
  }
  
  .logo-text{
    font-size:1.5rem;
    font-weight:800;
    letter-spacing:-.02em;
    line-height:1;                 /* ✅ évite le texte “baissé” */
    color:#fff;
  }
  
  .topbar-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
  }
  
  .topbar-actions .button{
    padding:8px 14px;
    font-size:.9rem;
    font-weight:700;
    border-radius:10px;
    background:#fff;
    color:var(--color-accent-dark);
    border:1px solid rgba(255,255,255,.35);
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  
  .topbar-actions .button:hover{
    transform:translateY(-1px);
    box-shadow:0 2px 10px rgba(0,0,0,.18);
    background:rgba(255,255,255,.95);
  }
  .topbar-actions .button:active{transform:translateY(0)}
  
  @media (max-width:768px){
    .topbar{padding:0 12px;gap:8px}
    .logo-text{font-size:1.25rem}
    .logo-img{height:46.8px} /* 36px * 1.3 = 46.8px */
    .topbar-actions .button{padding:6px 10px;font-size:.85rem}
  }
  
  /* ======================================================
     4) AUTH MODE (anti flash + pas de chevauchement topbar)
     ====================================================== */
  body.auth-mode #appArea{display:none!important}
  
  body.auth-mode #loginContainer{
    display:block!important;
    min-height:calc(100vh - var(--topbar-h));
    padding-top:0; /* body a déjà padding-top */
    position:relative;
    z-index:1000;
  }
  
  /* ======================================================
     5) LOADING OVERLAY (sous topbar)
     ====================================================== */
  .loading-overlay{
    position:fixed;
    inset:var(--topbar-h) 0 0 0;
    z-index:1000;
    display:grid;
    place-items:center;
    background:rgba(10,82,149,.12);
    backdrop-filter:blur(2px);
  }
  #loadingOverlay[hidden]{display:none!important}
  
  .loading-content{
    background:#fff;
    border:1px solid rgba(15,23,42,.12);
    border-radius:14px;
    padding:18px 20px;
    width:min(420px, calc(100vw - 28px));
    text-align:center;
    box-shadow:0 8px 28px rgba(0,0,0,.14);
  }
  body.loading-active{overflow:hidden}
  body.modal-open{overflow:hidden !important}
  
  /* ======================================================
     6) LAYOUT APP
     ====================================================== */
  #appArea{
    display:flex;
    align-items:flex-start;
    width:100%;
  }
  
  .page-area{
    flex:1;
    width:100%;
    max-width:1100px;
    margin:0 auto;
    padding:20px;
    overflow-x:hidden;
  }
  
  /* ======================================================
     7) NAVIGATION DESKTOP
     ====================================================== */
  .navbar{
    width:220px;
    background:#fff;
    border-right:1px solid rgba(15,23,42,.08);
    padding:12px;
    min-height:calc(100vh - var(--topbar-h));
    box-shadow:0 1px 4px rgba(0,0,0,.04);
  }
  
  .navbar .nav-item{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px;
    margin-bottom:8px;
    border-radius:10px;
    font-weight:700;
    color:var(--color-accent-dark);
    border:1px solid var(--color-accent-light);
    cursor:pointer;
    background:rgba(255,255,255,.05);
    transition:background .2s ease, color .2s ease, transform .15s ease;
  }
  
  .navbar .nav-item:hover{
    background:linear-gradient(90deg,var(--color-accent-light),var(--color-accent));
    color:#fff;
    transform:translateY(-1px);
  }
  
  .navbar .nav-item.active{
    background:linear-gradient(90deg,var(--color-accent-dark),var(--color-accent));
    color:#fff;
    border:none;
  }
  
  /* ======================================================
     8) MOBILE NAV (overlay)
     ====================================================== */
  .mobile-toggle{
    display:none;
    font-size:1.6rem;
    background:none;
    border:none;
    cursor:pointer;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  
  .mobile-nav-overlay{
    position:fixed;
    top:var(--topbar-h);
    left:0;
    width:100%;
    height:calc(100% - var(--topbar-h));
    background:#fff;
    z-index:1000;
    display:none;
    overflow:hidden;
    box-shadow:0 -2px 8px rgba(0,0,0,.15);
  }
  .mobile-nav-overlay.open{display:block}
  
  .mobile-nav{
    width:100%;
    height:100%;
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:8px;
    overflow-y:auto;
    overflow-x:hidden;
    box-sizing:border-box;
  }
  
  /* Menu mobile avec icônes SVG cohérentes */
  .mobile-nav-item{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 1rem;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    cursor: pointer;
    background: var(--color-bg);
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    margin-bottom: 8px;
    width: 100%;
    box-sizing: border-box;
    user-select: none;
  }

  .mobile-nav-item-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease;
  }

  .mobile-nav-item-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    transition: stroke .2s ease;
  }

  .mobile-nav-item-label {
    flex: 1;
    transition: color .2s ease;
  }
  
  /* État hover et active avec couleurs de l'app */
  .mobile-nav-item:hover,
  .mobile-nav-item:active,
  .mobile-nav-item:focus {
    background: linear-gradient(90deg, rgba(10, 82, 149, 0.1) 0%, rgba(10, 82, 149, 0.08) 100%);
    color: var(--color-accent);
    border-color: var(--color-accent-light);
    transform: translateX(4px);
  }
  
  .mobile-nav-item.active{
    background: linear-gradient(90deg, var(--color-accent-dark) 0%, var(--color-accent) 100%);
    color: #fff;
    border-color: var(--color-accent);
    box-shadow: 0 2px 8px rgba(10, 82, 149, 0.2);
  }
  
  .mobile-nav-item.active .mobile-nav-item-icon svg {
    stroke: #fff;
  }
  
  .mobile-nav-item.active .mobile-nav-item-label {
    color: #fff;
  }
    color:#fff;
    border-color:var(--color-accent);
    font-weight:600;
  }
  
  /* ======================================================
     MINI-CALENDRIER POUR CARTES DE MATCHING/CANDIDATURES
     ====================================================== */
  .mini-calendars-wrapper{
    margin:16px 0;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  
  .mini-calendar-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin-bottom:8px;
  }
  
  .mini-cal-nav-btn{
    background:var(--color-bg-secondary);
    border:1px solid var(--color-border);
    border-radius:6px;
    padding:6px 12px;
    font-size:1rem;
    color:var(--color-text);
    cursor:pointer;
    transition:background .2s ease, border-color .2s ease;
    min-width:36px;
    text-align:center;
  }
  
  .mini-cal-nav-btn:hover:not(:disabled){
    background:var(--color-accent-light);
    border-color:var(--color-accent);
    color:var(--color-accent);
  }
  
  .mini-cal-nav-btn:disabled{
    opacity:0.4;
    cursor:not-allowed;
  }
  
  .mini-cal-nav-indicator{
    font-size:0.85rem;
    color:var(--color-text-secondary);
    font-weight:500;
    min-width:50px;
    text-align:center;
  }
  
  .mini-calendar-months-container{
    position:relative;
  }
  
  .mini-calendar-month{
    background:var(--color-bg-secondary);
    border:1px solid var(--color-border);
    border-radius:8px;
    padding:12px;
  }
  
  .mini-calendar-title{
    font-weight:600;
    font-size:0.9rem;
    color:var(--color-text);
    margin-bottom:8px;
    text-align:center;
  }
  
  .mini-calendar-grid{
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    gap:4px;
    max-width:280px;
    margin:0 auto;
  }
  
  .mini-cal-header{
    font-size:0.7rem;
    font-weight:600;
    color:var(--color-text-secondary);
    text-align:center;
    padding:4px 2px;
  }
  
  .mini-cal-cell{
    aspect-ratio:1;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.75rem;
    color:var(--color-text-secondary);
    background:var(--color-bg);
    border:1px solid transparent;
    border-radius:4px;
    min-width:28px;
    min-height:28px;
  }
  
  .mini-cal-cell.empty{
    background:transparent;
    border:none;
  }
  
  .mini-cal-cell.selected{
    background:var(--color-accent);
    color:#fff;
    font-weight:600;
    border-color:var(--color-accent-dark);
    box-shadow:0 2px 4px rgba(0,0,0,0.1);
  }
  
  @media (max-width:768px){
    .mobile-toggle{display:block}
    .navbar{display:none}
    .page-area{padding:18px}
  }
  @media (min-width:769px){
    .mobile-nav-overlay{display:none!important}
  }
  
  /* hidden must always win */
  .navbar[hidden],
  #mobileNavOverlay[hidden],
  #mobileNav[hidden]{
    display:none!important;
  }
  
  /* ======================================================
     9) CARDS / GRIDS (safe)
     ====================================================== */
  .card,
  .demande-card,
  .match-card,
  .profile-card{
    background:linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
    border:1px solid rgba(226, 232, 240, 0.8);
    border-radius:16px;
    padding:20px;
    box-shadow:0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
    width:100%;
    max-width:100%;
    overflow:hidden;
    transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position:relative;
  }
  
  
  
  /* S'assurer que la section zones est visible quand active */
  #zonesSection:not([hidden]){
    display:block !important;
    visibility:visible !important;
  }
  
  /* ✅ Conteneur de carte : contexte d'empilement pour Google Maps */
  /* ✅ SUPPRIMÉ : Cette règle causait overflow:visible et répétition de la carte
     * Utiliser uniquement les règles dans PATCH FINAL qui sont plus strictes */
  
  /* ✅ S'assurer que tous les contrôles Google Maps sont visibles (z-index élevé)
     * IMPORTANT : z-index 999 (inférieur à topbar 1100 et modales 10000)
     * mais supérieur aux autres éléments de la page */
  #zoneMap .gm-style,
  #zoneMap .gm-style-cc,
  #zoneMap .gm-style-iw,
  #zoneMap .gmnoprint,
  #zoneMap .gmnoscreen,
  #zoneMap .gm-bundled-control,
  #zoneMap [class*="gm-"]{
    
    
    pointer-events:auto !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  
  .card::before,
  .match-card::before,
  .demande-card::before{
    content:'';
    position:absolute;
    top:0;left:0;
    width:100%;
    height:3px;
    background:linear-gradient(90deg, #1e3a8a, #059669);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 0.3s ease;
    border-radius:16px 16px 0 0;
    z-index:2;
    pointer-events:none; /* ✅ Permettre les clics sur les boutons sous le ::before */
  }
  
  /* Pas de ::before pour la section zones pour éviter d'interférer avec la carte */
  #zonesSection.card::before{
    display:none;
  }
  
  .card:hover::before,
  .match-card:hover::before,
  .demande-card:hover::before{
    transform:scaleX(1);
  }
  
  .card:hover,
  .match-card:hover,
  .demande-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 32px rgba(30, 58, 138, 0.15), 0 4px 8px rgba(0,0,0,0.08);
    border-color:rgba(30, 58, 138, 0.3);
  }
  
  .cards-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:24px;
    margin-top:16px;
    justify-content:center;
  }
  
  @media (max-width:600px){
    .cards-grid{
      grid-template-columns:1fr;
      gap:16px;
    }
  }
  
  /* structures internes */
  .title-row{font-size:1rem;font-weight:800}
  .info-line{display:flex;justify-content:space-between;font-size:.88rem;margin-bottom:4px;gap:10px;flex-wrap:wrap}
  .info-label{color:var(--text-muted);font-weight:600}
  .info-value{font-weight:800}
  
  /* match / demande specifics - Premium Design */
  .match-card{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
    backdrop-filter:blur(10px);
  }
  
  .match-card .info-strip,
  .demande-card .info-strip{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
    flex-wrap:wrap;
    gap:8px;
    padding-bottom:12px;
    border-bottom:1px solid rgba(226, 232, 240, 0.5);
  }
  
  .match-card .pills-row,
  .demande-card .pills-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:12px;
  }
  
  /* Premium Pills Design */
  .match-card .pill,
  .demande-card .pill{
    background:linear-gradient(135deg, rgba(30, 58, 138, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
    border:1px solid rgba(30, 58, 138, 0.2);
    color:#1e3a8a;
    padding:6px 12px;
    border-radius:20px;
    font-size:0.85rem;
    font-weight:600;
    transition:all 0.2s ease;
  }
  
  .match-card .pill:hover,
  .demande-card .pill:hover{
    background:linear-gradient(135deg, rgba(30, 58, 138, 0.15) 0%, rgba(5, 150, 105, 0.15) 100%);
    transform:translateY(-1px);
    box-shadow:0 2px 8px rgba(30, 58, 138, 0.2);
  }
  
  /* ======================================================
     10) PILLS
     ====================================================== */
  .pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 9px;
    border-radius:999px;
    font-weight:900;
    font-size:.8rem;
    line-height:1;
    user-select:none;
    white-space:nowrap;
    background:#fff;
    border:1px solid rgba(15,23,42,.18);
    color:#0f172a;
  }
  .pill-primary{border-color:rgba(10,82,149,.3);color:var(--color-accent-dark)}
  .pill-warn{border-color:rgba(245,166,35,.35);color:var(--color-warn-dark)}
  .pill-ok{border-color:rgba(41,195,126,.35);color:var(--color-success-dark)}
  .pill-error{border-color:rgba(239,68,68,.35);color:#dc2626}
  .pill-muted{border-color:rgba(15,23,42,.18);color:#334155}
  
  /* ======================================================
     11) BUTTONS / ACTIONS
     ====================================================== */
  .actions{
    display:flex;
    gap:10px;
    margin-top:10px;
    flex-wrap:wrap;
  }
  
  button{
    padding:12px 24px;
    border:0;
    border-radius:12px;
    background:linear-gradient(135deg, var(--color-accent-dark) 0%, var(--color-accent) 50%, #059669 100%);
    color:#fff;
    cursor:pointer;
    font-weight:700;
    font-size:1rem;
    transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:0 4px 16px rgba(30, 58, 138, 0.25), 0 2px 6px rgba(0,0,0,0.1);
    position:relative;
    overflow:hidden;
  }
  
  button::before{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:0;
    height:0;
    border-radius:50%;
    background:rgba(255,255,255,0.3);
    transform:translate(-50%, -50%);
    transition:width 0.6s ease, height 0.6s ease;
    pointer-events:none; /* ✅ Permettre les clics sur le bouton */
    z-index:0;
  }
  
  button > *{
    position:relative;
    z-index:1;
  }
  
  button:hover:not(:disabled)::before{
    width:300px;
    height:300px;
  }
  
  button:hover:not(:disabled){
    background:linear-gradient(135deg, var(--color-accent) 0%, #059669 50%, var(--color-accent) 100%);
    transform:translateY(-2px) scale(1.02);
    box-shadow:0 8px 24px rgba(30, 58, 138, 0.35), 0 4px 12px rgba(0,0,0,0.15);
  }
  
  button:active:not(:disabled){
    transform:translateY(0) scale(0.98);
  }
  button.secondary{
    background:#fff;
    color:var(--color-accent-dark);
    border:1px solid var(--color-accent-light);
  }
  button.secondary:hover:not(:disabled){
    background:#fff;
    transform:translateY(-1px);
    box-shadow:0 2px 10px rgba(0,0,0,.10);
  }
  button:disabled{opacity:.5;cursor:not-allowed}
  
  /* “Annuler” dans modales : lisible */
  .modal button.secondary,
  .modal-content button.secondary,
  .modal-actions button.secondary{
    background:#f5f5f5;
    color:#333;
    border:1px solid #ccc;
  }
  .modal button.secondary:hover:not(:disabled),
  .modal-content button.secondary:hover:not(:disabled),
  .modal-actions button.secondary:hover:not(:disabled){
    background:#e0e0e0;
    color:#000;
  }
  
  /* ======================================================
     12) FORMS
     ====================================================== */
  .row{display:grid;gap:6px;margin:10px 0}
  .row button{
    position:relative;
    z-index:10;
    pointer-events:auto;
  }
  
  /* S'assurer que tous les boutons et éléments interactifs sont cliquables */
  button,
  a,
  input[type="checkbox"],
  input[type="radio"],
  select{
    position:relative;
    z-index:10;
    pointer-events:auto;
  }
  
  /* Actions dans les cartes : z-index élevé */
  .actions,
  .card .actions,
  .match-card .actions,
  .demande-card .actions{
    position:relative;
    z-index:10;
    pointer-events:auto;
  }
  
  .actions button,
  .card .actions button,
  .match-card .actions button{
    z-index:11;
  }
  
  label{
    font-size:13px;
    color:#333;
    display:block;
    margin-bottom:4px;
  }
  
  /* Labels avec checkbox : alignement horizontal */
  label:has(input[type="checkbox"]),
  label.checkbox-label{
    display:flex !important;
    align-items:center;
    gap:8px;
    cursor:pointer;
    user-select:none;
  }
  
  /* Toggle Switch (Slider Checkbox) - Remplace toutes les checkboxes */
  input[type="checkbox"]{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    width:44px;
    height:24px;
    background-color:#ccc;
    border-radius:12px;
    position:relative;
    cursor:pointer;
    transition:background-color 0.3s ease;
    flex-shrink:0;
    margin:0;
    padding:0;
  }
  
  input[type="checkbox"]:checked{
    background-color:var(--color-accent, #0a5295);
  }
  
  input[type="checkbox"]:disabled{
    opacity:0.5;
    cursor:not-allowed;
  }
  
  input[type="checkbox"]::before{
    content:'';
    position:absolute;
    width:20px;
    height:20px;
    border-radius:50%;
    background-color:#fff;
    top:2px;
    left:2px;
    transition:transform 0.3s ease;
    box-shadow:0 2px 4px rgba(0,0,0,0.2);
  }
  
  input[type="checkbox"]:checked::before{
    transform:translateX(20px);
  }
  
  input[type="checkbox"]:focus{
    outline:2px solid var(--color-accent, #0a5295);
    outline-offset:2px;
  }
  
  /* Radio buttons : garder le style original */
  input[type="radio"]{
    width:auto;
    margin:0;
    cursor:pointer;
    flex-shrink:0;
    padding:0;
  }
  
  input,select,textarea{
    padding:10px 12px;
    border:1px solid #d7d7e2;
    border-radius:10px;
    font-size:15px;
    width:100%;
    box-sizing:border-box;
  }
  
  /* Exception : radios n'ont pas width:100% (checkboxes ont maintenant une taille fixe pour le slider) */
  input[type="radio"]{
    width:auto;
  }
  
  input:focus,select:focus,textarea:focus{
    outline:none;
    border-color:var(--color-accent);
    box-shadow:0 0 0 3px rgba(10,82,149,.10);
  }
  
  .help-text{
    display:block;
    margin-top:4px;
    font-size:.8rem;
    line-height:1.3;
    color:#6b7280;
  }
  
  @media (max-width:600px){
    .help-text{
      display:-webkit-box;
      -webkit-line-clamp:2;
      line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
      text-overflow:ellipsis;
    }
  }
  
  .subcard{
    background:#fbfbfd;
    border:1px solid #ececf3;
    border-radius:12px;
    padding:12px;
    width:100%;
    margin-bottom:10px;
  }
  
  /* ======================================================
     13) TABLES (autoriser scroll horizontal uniquement ici)
     ====================================================== */
  .tableWrap,
  .admin-table-wrapper,
  /* ✅ Exception pour zonesSection : pas de overflow-x qui bloque Google Maps */
  #disposSection{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y; /* ✅ autorisé uniquement ici */
  }
  
  /* ✅ zonesSection : overflow visible pour permettre aux contrôles Google Maps de s'afficher */
  #zonesSection{
    overflow-x:visible !important;
    overflow-y:visible !important;
    -webkit-overflow-scrolling:auto;
    touch-action:auto;
  }
  
  table{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
    max-width:100%;
  }
  
  th,td{
    padding:8px 10px;
    border-bottom:1px solid #e7e7f0;
    text-align:left;
    white-space:nowrap;
  }
  
  /* ======================================================
     14) MODALES (SOURCE UNIQUE, STABLE)
     ====================================================== */
  .modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.60);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:10000;
    padding:18px; /* évite le collage aux bords */
  }
  
  .modal.is-open{display:flex}
  .modal[hidden]{display:none!important}
  
  .modal-content{
    background:#fff;
    padding:20px;
    border-radius:12px;
    max-width:800px;
    width:min(800px, 92vw);
    max-height:90vh;
    overflow-y:auto;
    position:relative;
    box-shadow:var(--shadow-lg);
  }
  
  .modal-body{overflow-y:auto;flex:1;margin-top:10px}
  
  .modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:12px;
    flex-wrap:wrap;
  }
  
  .close-btn{
    position:absolute;
    top:10px;
    right:10px;
    border:none;
    background:none;
    font-size:1.4rem;
    cursor:pointer;
    line-height:1;
    color:#111;
    font-weight:900;
  }
  
  /* Modal ordre de mission : pas collé sous topbar + contenu grand */
  #contractModal{
    align-items:flex-start;
    padding-top:calc(var(--topbar-h) + 16px);
    padding-bottom:20px;
  }
  #contractModal .modal-content{
    max-height:calc(100vh - var(--topbar-h) - 32px);
    width:min(860px, 95vw);
  }
  
  /* ======================================================
     15) GOOGLE MAPS (Zones) — anti débordement
     ====================================================== */
  #zoneMap{
    width:100% !important;
    max-width:100% !important;
    height:450px !important;
    min-height:450px !important;
    border-radius:12px;
    overflow:hidden !important;
    touch-action:manipulation;
    position:relative !important;
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    background:#f3f4f6;
    z-index:10;
    margin-bottom:12px;
  }
  
  /* Forcer l'affichage même si la section parente est hidden initialement */
  #zonesSection[hidden] #zoneMap,
  #zonesSection:not([hidden]) #zoneMap{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  
  /* ✅ Éléments internes Google Maps : visibilité garantie (SANS max-width sur canvas) */
  #zoneMap .gm-style,
  #zoneMap .gm-style > div {
    display:block !important;
    position:relative !important;
    visibility:visible !important;
    opacity:1 !important;
    z-index:1 !important;
  }
  
  /* ✅ Exception Google Maps : iframe uniquement doit respecter la largeur */
  #zoneMap iframe{
    max-width:100% !important;
    box-sizing:border-box;
    display:block !important;
    position:relative !important;
    visibility:visible !important;
    opacity:1 !important;
    z-index:1 !important;
  }
  
  /* ✅ SUPPRIMÉ : max-width sur canvas - cause le rendu "puzzle" et invisibilité des polygones */
  
  /* ✅ Contrôles Google Maps en bas de carte (légendes, zoom, etc.)
     * Ces éléments sont généralement positionnés en fixed/absolute par Google Maps
     * et doivent être visibles, mais sous le topbar et les modales */
  #zoneMap + div[class*="gm"],
  #zonesSection .gm-style-cc,
  #zonesSection .gmnoprint,
  #zonesSection .gmnoscreen{
    position:relative !important;
    z-index:999 !important; /* ✅ Même niveau que les contrôles Google Maps */
    pointer-events:auto !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  
  @media (max-width:768px){
    #zoneMap{
      height:375px !important;
      min-height:375px !important;
    }
  }
  body.zone-drawing-active{overscroll-behavior:contain}
  body.zone-drawing-active #zoneMap{touch-action:none}
  
  /* ======================================================
     16) CALENDRIER (Mes Dispos) — 7 colonnes fixes
     ====================================================== */
  .calendar-grid{
    display:grid;
    grid-template-columns:repeat(7, minmax(0, 1fr)) !important;
    gap:6px;
    width:100%;
    max-width:100%;
    overflow:hidden;
    margin-top:8px;
  }
  
  .calendar-cell{
    min-height:80px;
    padding:8px;
    border:1px solid #e2e2e8;
    border-radius:8px;
    cursor:pointer;
    background:#fafafa;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    transition:background .1s, border-color .1s;
  
    overflow:hidden;
    word-break:break-word;
    overflow-wrap:anywhere;
  }
  
  .calendar-cell .day-number{font-weight:800;font-size:.85rem;line-height:1}
  .calendar-cell .cell-status{font-size:.8rem;margin-top:4px;line-height:1.2}
  .calendar-cell .zone-name{
    display:block;
    font-size:.65rem;
    line-height:1.1;
    margin-top:2px;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
    max-width:100%;
  }
  
  .calendar-cell.dispo{background:#ecfdf5;border-color:#bbf7d0}
  .calendar-cell.occupe{background:#fef2f2;border-color:#fecaca}
  .calendar-cell.pref{background:#eff6ff;border-color:#bfdbfe}
  .calendar-cell.indispo{background:#f8fafc;border-color:#cbd5e1}
  
  .calendar-cell.selected{background:#eef2ff;border-color:#c7d2fe}
  
  .calendar-cell.past-date,
  .calendar-cell.disabled{
    background:#f3f4f6;
    border-color:#e5e7eb;
    color:#9ca3af;
    cursor:default;
    pointer-events:none;
  }
  
  .calendar-cell.header-cell{
    background:transparent;
    border:none;
    font-weight:700;
    text-align:center;
    cursor:default;
  }
  
  .calendar-cell.empty-cell{
    background:transparent;
    border:none;
    cursor:default;
  }
  
  @media (max-width:768px){
    .calendar-grid{gap:2px !important}
    .calendar-cell{
      min-height:44px !important;
      height:44px !important;
      padding:4px !important;
      border-radius:6px;
      font-size:.75rem;
    }
    .calendar-cell .cell-status{
      font-size:0;
      height:0;
      margin:0 !important;
      opacity:0;
    }
    .calendar-cell .day-number{
      font-size:.85rem;
      text-align:center;
    }
    .calendar-cell .zone-name{
      font-size:.6rem;
      text-align:center;
    }
  }
  
  @media (max-width:380px){
    .calendar-grid{
      grid-template-columns:repeat(7, minmax(48px, 1fr)) !important;
    }
  }
  
  /* ======================================================
     17) DASHBOARD METRICS
     ====================================================== */
  .cards-row{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:12px;
  }
  
  .metric-card{
    padding:12px;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:8px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    width:100%;
    overflow:hidden;
  }
  .metric-card .metric-title{font-size:.9rem;color:#6b7280;margin:0}
  .metric-card .metric-value{font-size:1.5rem;font-weight:900;color:#1f2937;margin:0}
  .metric-card .metric-sub{font-size:.8rem;color:#6b7280;margin:0}
  
  /* ======================================================
     18) COOKIES
     ====================================================== */
  .cookie-banner{
    position:fixed;
    left:0;right:0;bottom:0;
    background:#111827;
    color:#fff;
    padding:12px 16px;
    z-index:1500;
    box-shadow:0 -2px 8px rgba(0,0,0,.2);
  }
  .cookie-banner-reminder{
    padding-top:18px;
    padding-bottom:18px;
    background:#1f2937;
    border-top:3px solid #f59e0b;
  }
  .cookie-banner-inner{
    max-width:1200px;
    margin:0 auto;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px 16px;
  }
  .cookie-banner-text{
    flex:1 1 220px;
    font-size:.9rem;
    line-height:1.5;
  }
  .cookie-banner-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .cookie-banner .button{
    font-size:.85rem;
    padding:8px 14px;
    border-radius:8px;
    white-space:nowrap;
  }
  .cookie-banner .button.ghost{
    background:transparent;
    border:1px solid rgba(255,255,255,.3);
    color:#fff;
  }
  .cookie-banner .button.ghost:hover{
    background:rgba(255,255,255,.1);
    border-color:rgba(255,255,255,.5);
  }
  .cookie-settings-fab{
    position:fixed;
    right:16px;
    bottom:80px;
    z-index:1600;
    font-size:12px;
    padding:6px 10px;
  }
  
  @media (max-width:768px){
    .cookie-banner{padding:16px 12px}
    .cookie-banner-inner{flex-direction:column;align-items:stretch;gap:12px}
    .cookie-banner-actions{flex-direction:column}
    .cookie-banner .button{width:100%;justify-content:center}
  }
  
  /* ======================================================
     19) AVATARS (déjà refactoré en classes)
     ====================================================== */
  /* Style unifié pour tous les avatars dans l'application */
  .avatar-img,
  .candidate-avatar,
  .entreprise-avatar {
    width:80px !important;
    height:80px !important;
    min-width:80px !important;
    min-height:80px !important;
    max-width:80px !important;
    max-height:80px !important;
    border-radius:50% !important; /* Force le cercle partout */
    border:2px solid #e5e7eb;
    object-fit:cover !important;
    object-position:center;
    overflow:hidden;
    display:block;
    flex-shrink:0 !important; /* Empêche la déformation dans flex */
    aspect-ratio:1/1 !important; /* Force le ratio 1:1 (carré) */
  }
  
  /* Bouton de suppression de photo personnalisée (croix) */
  .profile-photo-remove{
    margin-left:8px;
    border:none;
    background:transparent;
    color:#64748b;
    font-size:1.1rem;
    cursor:pointer;
    padding:2px 6px;
    border-radius:999px;
    transition:background-color .15s ease,color .15s ease;
  }
  .profile-photo-remove:hover{
    background-color:rgba(148,163,184,0.15);
    color:#0f172a;
  }

/* Indicateur de progression pour les wizards d'inscription */
.signup-wizard-indicator{
  font-size:.85rem;
  color:var(--color-text-secondary);
  margin-bottom:8px;
}
.signup-wizard-progress{
  margin-bottom: 20px;
}

.signup-wizard-progress-bar{
  position: relative;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(10, 82, 149, 0.1);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.signup-wizard-progress-fill{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-accent-dark) 0%, var(--color-accent) 50%, var(--color-accent-light) 100%);
  border-radius: 999px;
  transition: width 0.3s ease-out;
  box-shadow: 0 2px 4px rgba(10, 82, 149, 0.3);
}
  
  .avatar-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(70px, 1fr));
    gap:12px;
    margin-top:16px;
    padding:10px;
    width:100%;
    min-height:150px;
    max-height:400px;
    overflow-y:auto;
  }
  
  .avatar-grid img{
    width:70px;
    height:70px;
    border-radius:50%;
    cursor:pointer;
    border:3px solid transparent;
    transition:transform .1s, border-color .2s, box-shadow .2s;
    object-fit:cover;
    display:block;
    object-position:center;
  }
  .avatar-grid img:hover{
    transform:scale(1.08);
    border-color:var(--color-accent-light);
  }
  .avatar-grid img.selected{
    border-color:var(--color-accent);
    box-shadow:0 0 0 2px rgba(10,82,149,.30);
  }
  
/* Les styles .candidate-avatar et .entreprise-avatar sont maintenant unifiés avec .avatar-img ci-dessus */
  
  /* Modal avatar legacy (si ton HTML/JS l’utilise encore) */
  .avatar-selection{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    width:100vw !important;
    height:100vh !important;
    background:rgba(0,0,0,.85) !important;
    z-index:99999 !important;
    display:none !important;
    align-items:center !important;
    justify-content:center !important;
    padding:20px;
  }
  .avatar-selection.is-visible{display:flex !important}
  .avatar-selection[hidden]{display:none !important}
  
  /* ======================================================
     20) LANDING (premium design avec tuiles & effets)
     ====================================================== */
  body.landing-mode #appArea,
  body.landing-mode .navbar,
  body.landing-mode .mobile-nav-overlay{display:none!important}
  
  .landing{
    width:100%;
    max-width:100vw;
    overflow-x:hidden;
    min-height:calc(100vh - var(--topbar-h));
    padding:0;
    background:linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%);
    position:relative;
  }
  
  .landing::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background:radial-gradient(circle at 20% 50%, rgba(30, 58, 138, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(5, 150, 105, 0.05) 0%, transparent 50%);
    pointer-events:none;
    z-index:0;
  }
  
  .landing > *{position:relative;z-index:1}
  
  /* Hero Section Premium */
  .landing-hero{
    background:linear-gradient(135deg, rgba(30, 58, 138, 0.08) 0%, rgba(5, 150, 105, 0.08) 100%);
    padding:80px 20px;
    text-align:center;
    position:relative;
    overflow:hidden;
  }
  
  .landing-hero::before{
    content:'';
    position:absolute;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
    background:radial-gradient(circle, rgba(30, 58, 138, 0.1) 0%, transparent 70%);
    animation:heroPulse 8s ease-in-out infinite;
    pointer-events:none;
  }
  
  @keyframes heroPulse{
    0%, 100%{transform:scale(1);opacity:0.5}
    50%{transform:scale(1.1);opacity:0.8}
  }
  
  .landing-hero-content{
    max-width:800px;
    margin:0 auto;
    position:relative;
    z-index:1;
  }
  
  .landing-hero-title{
    font-size:clamp(2rem, 5vw, 3.5rem);
    font-weight:900;
    background:linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #059669 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    margin-bottom:20px;
    line-height:1.2;
    letter-spacing:-0.02em;
  }
  
  .landing-hero-subtitle{
    font-size:clamp(1.1rem, 2vw, 1.35rem);
    color:#475569;
    margin-bottom:32px;
    line-height:1.6;
    font-weight:500;
  }
  
  .landing-hero-cta{
    display:flex;
    gap:16px;
    justify-content:center;
    margin-bottom:20px;
    flex-wrap:wrap;
  }
  
  .landing-hero-note{
    font-size:0.95rem;
    color:#64748b;
    margin-top:16px;
  }
  
  /* Section Premium avec tuiles */
  .landing-section{
    max-width:1200px;
    margin:0 auto;
    padding:80px 20px;
    position:relative;
  }
  
  .landing-section h2{
    font-size:clamp(1.75rem, 4vw, 2.5rem);
    font-weight:800;
    text-align:center;
    margin-bottom:48px;
    background:linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
  }
  
  .landing-section-alt{
    background:linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(248, 250, 252, 0.8) 100%);
    border-radius:24px;
    margin:32px auto;
    box-shadow:0 4px 20px rgba(0,0,0,0.04);
  }
  
  /* Colonnes avec effet glassmorphism */
  .landing-columns{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:24px;
    margin-bottom:32px;
  }
  
  @media (max-width:768px){
    .landing-columns{grid-template-columns:1fr;gap:16px}
  }
  
  .landing-column{
    background:rgba(255, 255, 255, 0.8);
    backdrop-filter:blur(10px);
    border:1px solid rgba(226, 232, 240, 0.8);
    border-radius:16px;
    padding:24px;
    box-shadow:0 4px 16px rgba(0,0,0,0.06);
    transition:transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .landing-column:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 24px rgba(0,0,0,0.12);
  }
  
  .landing-list{
    list-style:none;
    padding:0;
    margin:0;
  }
  
  .landing-list li{
    padding:12px 0;
    padding-left:32px;
    position:relative;
    color:#334155;
    line-height:1.6;
    font-size:1rem;
  }
  
  .landing-list li::before{
    content:'✓';
    position:absolute;
    left:0;
    color:#1e3a8a;
    font-weight:bold;
    font-size:1.2rem;
    background:linear-gradient(135deg, #1e3a8a, #059669);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
  }
  
  /* Tuiles Premium pour Blocs Confiance */
  .landing-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:24px;
    margin-top:32px;
  }
  
  .landing-card{
    background:linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
    border:1px solid rgba(226, 232, 240, 0.6);
    border-radius:20px;
    padding:32px;
    box-shadow:0 4px 20px rgba(0,0,0,0.08);
    transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position:relative;
    overflow:hidden;
  }
  
  .landing-card::before{
    content:'';
    position:absolute;
    top:0;left:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg, #1e3a8a, #2563eb, #059669);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 0.4s ease;
  }
  
  .landing-card:hover::before{
    transform:scaleX(1);
  }
  
  .landing-card:hover{
    transform:translateY(-8px) scale(1.02);
    box-shadow:0 12px 40px rgba(30, 58, 138, 0.15);
    border-color:rgba(30, 58, 138, 0.3);
  }
  
  .landing-card h3{
    font-size:1.5rem;
    font-weight:700;
    margin-bottom:12px;
    color:#0f172a;
    background:linear-gradient(135deg, #1e3a8a 0%, #059669 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
  }
  
  .landing-card p{
    color:#475569;
    line-height:1.7;
    font-size:0.95rem;
    margin:0;
  }
  
  /* Timeline "Comment ça marche" */
  .landing-timeline{
    list-style:none;
    padding:0;
    margin:0;
    position:relative;
    max-width:900px;
    margin:0 auto;
  }
  
  .landing-timeline::before{
    content:'';
    position:absolute;
    left:30px;
    top:0;
    bottom:0;
    width:3px;
    background:linear-gradient(180deg, #1e3a8a 0%, #2563eb 50%, #059669 100%);
  }
  
  .landing-timeline li{
    position:relative;
    padding-left:80px;
    padding-bottom:40px;
    counter-increment:step;
  }
  
  .landing-timeline li::before{
    content:counter(step);
    position:absolute;
    left:0;
    top:0;
    width:60px;
    height:60px;
    background:linear-gradient(135deg, #1e3a8a, #059669);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:800;
    font-size:1.25rem;
    box-shadow:0 4px 16px rgba(30, 58, 138, 0.3);
    z-index:1;
  }
  
  .landing-timeline{
    counter-reset:step;
  }
  
  .landing-timeline h3{
    font-size:1.25rem;
    font-weight:700;
    margin-bottom:8px;
    color:#0f172a;
  }
  
  .landing-timeline p{
    color:#64748b;
    line-height:1.6;
    margin:0;
  }
  
  .landing-section-cta{
    text-align:center;
    margin-top:32px;
  }
  
  /* Footer Premium */
  .landing-footer{
    background:linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    color:#fff;
    padding:48px 20px 32px;
    margin-top:64px;
  }
  
  .landing-footer-links{
    max-width:1200px;
    margin:0 auto 24px;
    display:flex;
    justify-content:center;
    gap:24px;
    flex-wrap:wrap;
    font-size:0.9rem;
  }
  
  .landing-footer-links a,
  .landing-footer-links span{
    color:rgba(255,255,255,0.8);
    text-decoration:none;
    transition:color 0.2s ease;
    cursor:pointer;
  }
  
  .landing-footer-links a:hover{
    color:#10b981;
  }
  
  .landing-footer-meta{
    max-width:1200px;
    margin:0 auto;
    text-align:center;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,0.1);
  }
  
  .landing-footer-meta .muted{
    color:rgba(255,255,255,0.6);
    font-size:0.85rem;
  }
  
  .landing img{
    max-width:100%;
    height:auto;
    display:block;
  }
  
  @media (max-width:768px){
    .landing-hero{padding:60px 16px}
    .landing-section{padding:48px 16px}
    .landing-section-alt{margin:16px}
    .landing-card{padding:24px}
    .landing-timeline::before{left:20px}
    .landing-timeline li{padding-left:60px}
    .landing-timeline li::before{width:40px;height:40px;font-size:1rem}
  }
  
  /* ======================================================
     21) SPINNER OPUS REMASTERED
     ====================================================== */
  
  /* Conteneur principal du spinner */
  .spinner-container {
    position: relative;
    width: 150px;
    height: 150px;
    /* Filtre pour ajouter une ombre portée globale douce */
    filter: drop-shadow(0px 10px 15px rgba(0, 50, 100, 0.3));
    margin: 0 auto;
  }

  /* Styles communs aux cercles */
  .spinner-container .ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* -- CERCLE EXTÉRIEUR -- */
  .spinner-container .outer-ring {
    z-index: 1;
    animation: spin-cw 3s linear infinite;
  }

  /* -- CERCLE INTÉRIEUR -- */
  .spinner-container .inner-ring {
    z-index: 2;
    transform-origin: center;
    /* Scale fixe de 0.60 pour toutes les tailles (cohérent) */
    transform: scale(0.60); 
    animation: spin-ccw 3s linear infinite;
  }

  /* -- ANIMATIONS -- */
  
  /* Sens des aiguilles d'une montre */
  @keyframes spin-cw {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  /* Sens inverse - scale cohérent avec la taille */
  @keyframes spin-ccw {
    from { transform: scale(0.60) rotate(360deg); }
    to { transform: scale(0.60) rotate(0deg); }
  }

  /* Tailles prédéfinies */
  .spinner-container.spinner-small {
    width: 80px;
    height: 80px;
  }

  .spinner-container.spinner-medium {
    width: 150px;
    height: 150px;
  }

  .spinner-container.spinner-large {
    width: 200px;
    height: 200px;
  }

  /* Spinner centré (pour les grilles et conteneurs) */
  .spinner-center {
    margin: 40px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px; /* Assurer un espace minimum pour le spinner */
  }

  /* Spinner dans les pages - s'affiche sous la topbar */
  .page-area .spinner-center,
  .card .spinner-center {
    padding-top: calc(var(--topbar-h) + 20px); /* Espacement sous la topbar */
  }

  /* Spinner inline (pour les boutons) - version compacte - SUPPRIMÉ (plus utilisé) */

  /* Compatibilité avec l'ancien .spinner (pour transition) */
  .spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 8px;
  }

  .spinner:not(.spinner-container) {
    /* Si c'est l'ancien spinner, le remplacer par le nouveau */
    border: none;
    background: none;
  }
  
  /* ======================================================
     22) ADMIN NAV (contraste)
     ====================================================== */
  .admin-nav{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:12px;
    background:var(--color-bg-nav);
    border:1px solid var(--color-accent-dark);
    border-radius:8px;
    color:#fff;
    padding:8px;
  }
  .admin-nav button{
    background:linear-gradient(90deg,var(--color-accent-dark),var(--color-accent));
    color:#fff;
    border:none;
    padding:6px 12px;
    border-radius:8px;
    cursor:pointer;
    font-size:.9rem;
    font-weight:800;
  }
  .admin-nav button.active{
    background:linear-gradient(90deg,var(--color-accent),var(--color-accent-light));
  }
  
  /* ======================================================
     23) LINKS LOOK BUTTON
     ====================================================== */
  .link-button{
    background:none;
    border:none;
    color:#2563eb;
    cursor:pointer;
    text-decoration:underline;
    padding:0;
    font-size:.9rem;
  }
  .link-button:hover{text-decoration:none}
  
  /* ======================================================
     PATCH FINAL — PROD (NE PAS MODIFIER AU-DESSUS)
     Objectif : ZÉRO scroll horizontal + Topbar stable + Maps OK + Landing allégée
     ====================================================== */
  
  /* 1) Anti overflow horizontal — contrat app native */
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    overscroll-behavior-x: none;
    touch-action: pan-y pinch-zoom; /* empêche le drag horizontal mobile */
  }
  
  #appArea, .page-area, .landing, .landing-section, .container, .card, .navbar, .mobile-nav-overlay {
    max-width: 100vw;
    overflow-x: hidden;
  }
  
  /* clé anti débordement flex/grid */
  #appArea, .page-area, .landing {
    min-width: 0;
  }
  #appArea * , .page-area * , .landing * {
    min-width: 0;
    max-width: 100%;
  }
  
  /* ✅ EXCEPTION CRITIQUE : Isoler Google Maps des règles globales (évite le rendu "puzzle")
     * Surcharger min-width: 0 et max-width: 100% qui cassent le rendu Google Maps */
  #zoneMap * {
    min-width: auto !important;
    max-width: none !important;
  }
  
  /* Exception pour iframe (doit respecter la largeur du conteneur) */
  #zoneMap iframe {
    max-width: 100% !important;
  }
  
  /* exceptions : autoriser scroll horizontal UNIQUEMENT sur wrappers tables */
  .tableWrap,
  .admin-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }
  table {
    max-width: 100%;
  }
  
  /* 2) Topbar ultra stable (logo + texte alignés) */
  .topbar {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    height: var(--topbar-h, 64px);
    display: flex;
    align-items: center !important;   /* corrige "OPUS baissé" */
    justify-content: space-between;
    z-index: 1100;
    transform: translateZ(0);         /* iOS fix */
    will-change: transform;
  }
  
  .topbar .brand,
  .topbar-actions,
  .topbar #authState {
    display: flex;
    align-items: center !important;
  }
  
  .logo-img {
    display: block;
    height: 40px;
    width: auto;
  }
  .logo-text {
    line-height: 1 !important;        /* corrige le texte baissé */
    display: inline-flex;
    align-items: center;
  }
  
  /* 3) Mobile nav : rendu plus propre + pas de débordements */
  .mobile-nav-overlay {
    overflow: hidden;
    max-width: 100vw;
  }
  .mobile-nav {
    max-width: 100vw;
    overflow-x: hidden;
    padding-bottom: 18px;
  }
  
  .mobile-nav-tile {
    border-radius: 18px;
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
  }
  .mobile-nav-tile span,
  .mobile-nav-tile-label {
    font-size: .9rem;
    border-radius: 12px;
  }
  
  /* 4) Landing : padding correct + centrée + allégée d'un bloc "trop lourd" */
  /* IMPORTANT : la landing était "poussée en haut à gauche" -> on force un wrapper centré */
  .landing {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow-x: hidden;
  }
  
  /* Hero moins lourd */
  .landing-hero {
    padding: 64px 16px !important; /* réduit */
  }
  .landing-section {
    padding: 56px 16px !important; /* réduit */
  }
  
  /* ✅ ALLÈGEMENT : désactiver l'animation/pulse qui surcharge */
  .landing-hero::before {
    animation: none !important;
    opacity: .35 !important;
  }
  
  /* ✅ ALLÈGEMENT : supprimer l'effet "section-alt" trop massif (on garde premium) */
  .landing-section-alt {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 auto !important;
  }
  
  /* Grilles landing : jamais de débordement */
  .landing-grid,
  .landing-columns {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
  .landing-card,
  .landing-column {
    max-width: 100%;
    overflow: hidden;
  }
  
  /* 5) GOOGLE MAPS : stabilité + pas de scroll horizontal + affichage correct même si hidden */
  /* ✅ FIX VISIBILITÉ GOOGLE MAPS : Forcer display et visibility pour corriger transform: matrix invalide */
  #zonesSection {
    overflow: hidden !important; /* ✅ CRUCIAL : Éviter que la carte se répète ou flotte */
    display: block;
    visibility: visible;
  }
  
  /* ✅ FORCE LE CADRE : Dimensions strictes pour éviter la répétition des planisphères */
  #zoneMap {
    width: 100% !important;
    height: 450px !important;
    position: relative !important;
    overflow: hidden !important; /* ✅ CRUCIAL : Pour couper la répétition des planisphères */
    display: block !important;
    visibility: visible !important;
    box-sizing: border-box !important;
  }
  
  /* ✅ ISOLATION DE LA CARTE : Reset pour les images (le puzzle) */
  #zoneMap img,
  .gm-style img {
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
  
  /* ✅ Reset pour les conteneurs de dessin et calques */
  #zoneMap div,
  .gm-style div {
    overflow: visible !important; /* Indispensable pour voir les tracés qui dépassent des tuiles */
  }
  
  /* ✅ Protection du Canvas (là où sont les polygones) */
  #zoneMap canvas {
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
  
  /* IMPORTANT :
     Si Google Maps est initialisée quand la section est hidden,
     la carte s'affiche mal => on corrige en JS avec trigger resize après affichage.
  */
  
  /* Les contrôles google doivent rester visibles (sans dépasser topbar) */
  #zoneMap [class*="gm-"],
  #zoneMap .gmnoprint,
  #zoneMap .gm-style-cc {
    pointer-events: auto !important;
  }
  
  /* Responsive map */
  @media (max-width: 768px) {
    #zoneMap {
      height: 360px !important;
      min-height: 360px !important;
    }
  }

/* S'assure que le conteneur ne force pas de contraintes bizarres */
.gm-style {
    font-family: Roboto, Arial, sans-serif;
    text-decoration: none;
}
  /* ======================================================
     FIN PATCH FINAL — PROD
     ====================================================== */

/* ======================================================
   ISOLATION GOOGLE MAPS — FIX ALIGNEMENT TUILES
   ====================================================== */

/* 1. Reset critique pour les tuiles Google Maps */
#zoneMap img, 
.gm-style img {
    max-width: none !important;  /* Empêche d'écraser la taille des tuiles */
    max-height: none !important; 
    min-width: 0 !important;
    min-height: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* 2. Empêcher les micro-décalages des conteneurs internes */
#zoneMap div, 
.gm-style div {
    box-sizing: content-box !important; /* Google Maps calcule en content-box */
}

/* 3. Assurer que le conteneur de dessin (Canvas) est bien aligné */
#zoneMap canvas {
    max-width: none !important;
    max-height: none !important;
}

/* 4. Fixer le cadre pour éviter le débordement */
#zoneMap {
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
}
/* =========================================
   OPUS — FIX FINAL MAP (ANTI DEDOUBLEMENT)
   Mettre EN DERNIER dans le fichier CSS
   ========================================= */

/* 1) Le hidden doit TOUJOURS gagner */
#zonesSection[hidden]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
}

/* 2) Zones visibles uniquement quand la page est active (pas de forcing ailleurs) */
#zonesSection{
  display:block;
  visibility:visible;
  overflow:hidden !important;       /* important : empêche les “cartes fantômes” */
}

/* 3) La map ne doit jamais être forcée visible si la section est hidden */
#zonesSection[hidden] #zoneMap{
  display:none !important;
}

/* 4) Cadre strict de la map */
#zoneMap{
  width:100% !important;
  max-width:100% !important;
  height:450px !important;
  overflow:hidden !important;
  position:relative !important;
  border-radius:12px;
  background:#f3f4f6;
}

/* 5) Reset Google Maps (anti "puzzle") */
#zoneMap img,
#zoneMap canvas,
#zoneMap .gm-style img{
  max-width:none !important;
  max-height:none !important;
}

/* 6) IMPORTANT : ne pas appliquer tes règles globales sur les enfants de la map */
#zoneMap *{
  min-width:auto !important;
  max-width:none !important;
}

@media (max-width:768px){
  #zoneMap{ height:360px !important; }
}
/* ======================================
   OPUS — ÉTATS CRITIQUES (ACTION REQUIRED)
   ====================================== */

   .card.action-required,
   .match-card.action-required,
   .demande-card.action-required{
     border-color:#f59e0b;
     background:linear-gradient(135deg,#fff7ed,#ffffff);
     box-shadow:0 0 0 2px rgba(245,158,11,.15),
                0 12px 32px rgba(245,158,11,.18);
     position:relative;
   }
   
   /* Liseré animé */
   .card.action-required::after{
     content:'';
     position:absolute;
     inset:0;
     border-radius:16px;
     border:2px solid rgba(245,158,11,.6);
     animation:pulseBorder 2.2s ease-in-out infinite;
     pointer-events:none;
   }
   
   @keyframes pulseBorder{
     0%,100%{opacity:.4}
     50%{opacity:.9}
   }
   /* ======================================
   OPUS — BADGES PREMIUM
   ====================================== */

.opus-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  font-size:.7rem;
  font-weight:900;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.opus-badge.new{
  background:linear-gradient(135deg,#2563eb,#059669);
  color:#fff;
  box-shadow:0 4px 12px rgba(37,99,235,.35);
}

.opus-badge.pending{
  background:#fff7ed;
  color:#b45309;
  border:1px solid #f59e0b;
}

.opus-badge.unread{
  background:#eef2ff;
  color:#4338ca;
  border:1px solid #c7d2fe;
}

/* ======================================
   OPUS — OVERLAY CONNEXION
   ====================================== */

.auth-overlay{
  position:fixed;
  inset:0;
  z-index:1500;
  /* Par défaut l'overlay est masqué, il est affiché uniquement quand aria-hidden="false" */
  display:none;
  align-items:center;
  justify-content:center;
}

.auth-overlay[aria-hidden="false"]{
  display:flex;
}

.auth-overlay-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,0.55);
  backdrop-filter:blur(6px);
}

.auth-overlay-content{
  position:relative;
  z-index:1;
  width:100%;
  max-width:420px;
  margin:0 16px;
  padding:24px 24px 20px;
  background:#ffffff;
  border-radius:16px;
  box-shadow:0 18px 45px rgba(15,23,42,0.28);
}

.auth-overlay-content h2{
  margin:0 0 8px;
  font-size:1.2rem;
  font-weight:600;
  color:#0f172a;
}

.auth-overlay-close{
  position:absolute;
  top:10px;
  right:10px;
  border:none;
  background:transparent;
  font-size:1.3rem;
  line-height:1;
  cursor:pointer;
  color:#64748b;
}

.auth-overlay-close:hover{
  color:#0f172a;
}

.auth-overlay-form .row{
  margin-bottom:12px;
}

.auth-overlay-form input[type="email"],
.auth-overlay-form input[type="password"]{
  width:100%;
}

/* Indicateur de progression pour les wizards d'inscription */
.signup-wizard-indicator{
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: 8px;
  font-weight: 500;
}

/* ======================================
   OPUS — MESSAGERIE (style bulles épuré)
   ====================================== */

.conversation-detail{
  margin-top:16px;
  padding:16px;
  border-radius:16px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  box-shadow:0 4px 12px rgba(15,23,42,0.06);
  display:flex;
  flex-direction:column;
  max-height:520px;
}

.conversation-detail h3{
  margin-top:0;
  margin-bottom:12px;
  font-size:1rem;
  font-weight:600;
  color:#0f172a;
}

.message-list{
  flex:1;
  overflow-y:auto;
  padding:8px 4px 8px 0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.chat-message{
  max-width:78%;
  padding:8px 10px;
  border-radius:16px;
  line-height:1.45;
  font-size:.92rem;
  box-shadow:0 1px 3px rgba(15,23,42,0.06);
  word-wrap:break-word;
  white-space:pre-wrap;
}

.chat-message.me{
  margin-left:auto;
  background:#e0f2fe;
  color:#0f172a;
  border-bottom-right-radius:6px;
}

.chat-message.other{
  margin-right:auto;
  background:#f8fafc;
  color:#0f172a;
  border-bottom-left-radius:6px;
}

.chat-input{
  display:flex;
  gap:10px;
  padding:10px 0 0;
  border-top:1px solid #e5e7eb;
  margin-top:8px;
}

.chat-input textarea{
  resize:none;
  border-radius:12px;
  border:1px solid #d1d5db;
  padding:8px 10px;
  font-size:.9rem;
  flex:1;
}

.chat-input button{
  border-radius:999px;
  padding:8px 14px;
  font-size:.9rem;
}
  .card.action-required:hover{
    transform:translateY(-6px) scale(1.01);
  }
  @keyframes clickPulse{
    0%{transform:scale(1)}
    50%{transform:scale(.97)}
    100%{transform:scale(1)}
  }
  button.critical:active{
    animation:clickPulse .15s ease;
  }