/* ======================================================
   MoveR � Th�me refondu (v3)
   - D�grad� officiel
   - Header : logo | menu (dropdown) | compte
   - Cartes homog�nes (y compris le cartouche titre)
   - Radios carr�es XL
   - Table abonnements responsive
   - Champs de formulaire
   ====================================================== */

/* -------- Palette -------- */
:root{
  --bg-start:#2ebee6;         /* d�grad� officiel */
  --bg-end:#a869a1;

  --text:#0f172a;
  --text-muted:#475569;

  --panel:#ffffffE8;          /* panneaux + opaques (titre, footer) */
  --panel-soft:#ffffffD8;     /* cartes standard */
  --stroke:#0f172a10;
  --shadow:0 10px 30px rgba(15,23,42,.12);
  --radius:14px;

  /* Couleur de marque (boutons) : rose fonc� coh�rent */
  --brand:#7a3b77;
  --brand-600:#6a3467;
  --brand-700:#5a2d58;
  --brand-100:#f3e8f4;
  --brand-200:#ead4ea;

  --danger:#e23e3e;
  --ring:#d9b6da;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background:linear-gradient(90deg,var(--bg-start),var(--bg-end)) fixed;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

.wrapper{min-height:100dvh; display:flex; flex-direction:column}
.container{width:100%; max-width:1100px; margin-inline:auto; padding:clamp(14px,2.4vw,24px)}

/* ======================================================
   HEADER : logo | menu (dropdown) | compte
   ====================================================== */
.topbar{
  position:sticky; top:0; z-index:60;               /* au-dessus des dropdowns */
  backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(180deg, rgba(100,100,100,.3), rgba(100,100,100,.6));
  border-bottom:1px solid rgba(168,105,161,1.0);
}

.topbar__bar
{
  display:flex; align-items:center; gap:14px; padding:8px 0;
}
.brand{display:flex; align-items:center; gap:8px; text-decoration:none; color:inherit; flex:0 0 auto}
.brand__logo{height:70px; width:auto; display:block}
.brand__name{font-weight:800; letter-spacing:.03em}

/* Menu horizontal (liens simples + <details> dropdown 1 niveau) */
.menu{
  display:flex; align-items:center; gap:8px;
  margin-left:8px; flex:1 1 auto; min-width:0;
  overflow-x:auto; scrollbar-width:none;
}
.menu::-webkit-scrollbar{display:none}

.menu details{position:relative; display:block; flex:0 0 auto}
.menu summary{
  list-style:none; cursor:pointer; user-select:none;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; font-weight:800;
  background:#ffffffA8; color:var(--text);
  box-shadow:inset 0 0 0 1px #ffffffCC;
  transition:transform .06s, background .2s;
}
.menu summary::-webkit-details-marker{display:none}
.menu summary:hover{transform:translateY(-1px)}
.menu details[open] > summary{background:#ffffF0}

.menu__link{
  display:inline-flex; align-items:center;
  padding:8px 12px; border-radius:999px; font-weight:800; text-decoration:none;
  background:#ffffffA8; color:var(--text);
  box-shadow:inset 0 0 0 1px #ffffffCC;
  transition:transform .06s, background .2s;
}
.menu__link:hover{transform:translateY(-1px); background:#ffffffF0}

/* Panel dropdown */
.menu__dropdown{
  position:absolute; top:calc(100% + 6px); left:0; min-width:220px;
  background:var(--panel); border:1px solid var(--stroke);
  border-radius:12px; box-shadow:var(--shadow); padding:8px; z-index:70;
}
.menu__dropdown a{
  display:flex; align-items:center; gap:8px;
  padding:10px 10px; border-radius:10px; text-decoration:none; color:var(--text);
  transition:background .15s;
}
.menu__dropdown a:hover{background:#7a3b77; color:#fffffff0} 

/* Compte � droite */
.topbar__account{flex:0 0 auto; margin-left:auto}
.topbar__account .btn{height:36px; padding-inline:14px}

/* Responsive header */
@media (max-width:700px){
  .topbar__bar{gap:10px}
  .brand__name{display:none}    /* gain de place sur mobile */
  .menu{gap:6px}
  .topbar__account .btn{height:auto}
}

/* ======================================================
   BLOCS / CARTES / TITRE
   ====================================================== */
.card{
  background:var(--panel-soft);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card__body{padding:16px; display:flex; flex-direction:column; gap:14px}
.card__title{font-weight:900; font-size:18px; margin:0}

/* H�ro titre/sous-titre = card homog�ne (plus opaque) */
.hero.card{background:var(--panel)}
.page-title{font-size:clamp(22px,2.6vw,32px); margin:0 0 6px; font-weight:900}
.page-sub{margin:0; color:var(--text-muted)}

/* ======================================================
   BOUTONS
   ====================================================== */
.btn{
  appearance:none; border:0; border-radius:10px;
  padding:11px 16px; font-weight:800; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none;
  transition:transform .06s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.btn:focus{outline:0; box-shadow:0 0 0 4px var(--ring)}
.btn:hover{transform:translateY(-1px)}

.btn--brand{background:var(--brand); color:#fff}
.btn--brand:hover{background:var(--brand-600)}
.btn--brand-ghost{
  background:var(--brand-100); color:var(--brand-700);
  box-shadow:inset 0 0 0 1.5px var(--brand-200);
}
.btn--danger{background:var(--danger); color:#fff}

/* ======================================================
   TABLE : abonnements
   ====================================================== */
.table-wrap{overflow:auto}
.table{width:100%; border-collapse:separate; border-spacing:0}
.table thead th{
  position:sticky; top:0; background:var(--panel); color:var(--text);
  text-align:left; font-weight:900; padding:12px 14px; border-bottom:1px solid var(--stroke);
}
.table tbody tr{background:#ffffffF0; border:1px solid var(--stroke)}
.table tbody tr + tr{border-top:none}
.table td{padding:12px 14px; vertical-align:middle; border-top:1px solid var(--stroke)}
.table tbody tr:first-child td{border-top:none}
.table .cell-actions{white-space:nowrap}
.table .status-badge{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:#fff3c4; color:#6b4600; font-weight:800; font-size:12px;
  box-shadow:inset 0 0 0 1px #fde68a;
}

/* Table responsive (stack) */
@media (max-width:700px){
  .table thead{display:none}
  .table, .table tbody, .table tr, .table td{display:block; width:100%}
  .table tr{margin:10px 0; border-radius:12px; overflow:hidden; box-shadow:var(--shadow)}
  .table td{border:none; border-top:1px solid var(--stroke)}
  .table td::before{
    content:attr(data-label);
    display:block; font-weight:700; color:var(--text-muted); margin-bottom:4px;
  }
  .table .cell-actions{display:flex; gap:8px}
}

/* ======================================================
   RADIOS CARR�ES XL (segmented)
   ====================================================== */
.segmented{
  --seg-size: 80px;                           /* ajuste ici la taille des carr�s */
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--seg-size), 1fr));
  gap:12px;
}
.segmented__input{position:absolute; opacity:0; pointer-events:none}
.segmented__option{
  background:#ffffffF0; color:var(--text);
  border-radius:12px; padding:0; font-weight:900;
  box-shadow:inset 0 0 0 2px var(--brand-200);
  cursor:pointer; user-select:none;
  transition:transform .06s, background .2s, box-shadow .2s, color .2s;
  aspect-ratio:1/1;                                    /* carr� parfait */
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:32px;
}
.segmented__option:hover{transform:translateY(-1px)}
.segmented__input:focus + .segmented__option{box-shadow:0 0 0 4px var(--ring), inset 0 0 0 2px var(--brand-200)}
.segmented__input:checked + .segmented__option{
  background:var(--brand); color:#fff; box-shadow:none;
}

/* ======================================================
   FORM : champ de texte (1 ligne) + group
   ====================================================== */
.field{display:flex; flex-direction:column; gap:8px}
.label{
  font-weight:900; color:var(--text); display:flex; align-items:center; gap:8px;
}
.help{color:var(--text-muted); font-size:14px}

.input{
  width:100%; appearance:none;
  background:#ffffffF8; color:var(--text);
  border:1.5px solid var(--brand-200);
  border-radius:12px;
  padding:12px 14px;
  font:inherit;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.input::placeholder{color:#94a3b8}
.input:focus{
  outline:none; border-color:var(--brand-600); box-shadow:0 0 0 4px var(--ring);
}
.input[disabled]{opacity:.6; cursor:not-allowed}

/* �tat d�erreur */
.field--error .label{color:#7a1d1d}
.field--error .input{
  border-color:#f4b4b4; background:#fff1f1;
  box-shadow:inset 0 0 0 1px #f4b4b4;
}
.field--error .help{color:#7a1d1d}

/* Input group (input + bouton) */
.input-group{display:flex; gap:10px; align-items:stretch; flex-wrap:wrap}
.input-group .input{flex:1 1 260px; min-width:220px}
.input-group .btn{padding-inline:18px}

/* ======================================================
   UTILITAIRES & FOOTER
   ====================================================== */
.text-muted{color:var(--text-muted)}
.kpi{font-weight:900}

.footer{
  margin-top:auto; background:var(--panel);
  border-top:1px solid var(--stroke); box-shadow:var(--shadow); color:var(--text);
}
.footer__inner{max-width:1100px; margin-inline:auto; padding:16px clamp(14px,2.4vw,24px); font-size:14px}
.footer a{color:var(--brand-700); font-weight:800; text-decoration:none}
.footer a:hover{text-decoration:underline}

/* Correction d�ancrage des dropdowns */
.menu details {
  position: relative;    /* indispensable pour que top: calc(100% + 6px) fonctionne */
}

/* Emp�che le header de couper le menu */
.topbar,
.topbar__bar,
.menu {
  overflow: visible;
}



/* ===========================
   PATCH MOBILE-FRIENDLY XL
   � r�organisation Flex
   � typographies et tap-targets plus grandes
   � radios & inputs XL
   =========================== */

/* 1) Base mobile : texte plus grand et respirations */
@media (max-width: 480px) {
    html, body {
        font-size: 18px;
    }
    /* �tait 16px */
    .container {
        padding: 18px;
    }
    /* un peu plus d'air */

    /* Titres plus lisibles */
    .page-title {
        font-size: clamp(24px, 7vw, 30px);
    }

    .card__title {
        font-size: 20px;
    }

    /* Boutons = grosses cibles tactiles */
    .btn {
        font-size: 1rem;
        min-height: 48px; /* tap target */
        padding: 12px 18px;
    }

    /* Inputs plus hauts */
    .input {
        font-size: 1rem;
        min-height: 48px;
        padding: 12px 16px;
    }

    /* Badges un peu plus lisibles */
    .status-badge {
        font-size: 13px;
        padding: 7px 12px;
    }
}

/* 2) Header �flex r�actif� : menu sur 2 lignes si besoin, tout en Flex */
@media (max-width: 700px) {
    .topbar__bar {
        display: flex;
        flex-wrap: wrap; /* autorise le retour � la ligne */
        row-gap: 8px;
    }
    /* Ligne 1 : logo � gauche, compte � droite */
    .brand {
        order: 1;
    }

    .topbar__account {
        order: 2;
        margin-left: auto;
    }

    /* Ligne 2 : le menu prend toute la largeur, en scroll horizontal si trop d�items */
    .menu {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        gap: 8px;
        overflow-x: auto;
        overflow-y: visible; /* crucial pour voir les dropdowns */
        -webkit-overflow-scrolling: touch;
    }
        /* Boutons de menu un poil plus gros sur mobile */
        .menu summary,
        .menu .menu__link {
            padding: 10px 14px;
        }
}

/* 3) Radios carr�es : encore plus grandes et 2/1 colonnes selon la place */
@media (max-width: 700px) {
    .segmented {
        --seg-size: 140px;
        gap: 14px;
    }

    .segmented__option {
        font-size: 18px;
    }
}

@media (max-width: 420px) {
    .segmented {
        --seg-size: 120px; /* une colonne si largeur trop petite */
        grid-template-columns: 1fr;
        justify-items: stretch;
    }

    .segmented__option {
        width: 100%;
    }
    /* occupe toute la ligne */
}

/* 4) Table : confort tactile + respiration (ta table se �stacke� d�j�) */
@media (max-width: 700px) {
    .table tr {
        margin: 12px 0;
    }

    .table td {
        padding: 14px;
    }

    .table .cell-actions {
        gap: 10px;
    }

    .table .btn {
        min-height: 44px;
    }
}

/* 5) Petits plus d�ergonomie */
@media (hover: none) {
    /* supprime l��l�vation au hover sur mobile pour �viter les �sauts� */
    .btn:hover, .menu__link:hover, .menu summary:hover, .segmented__option:hover {
        transform: none;
    }
}

/* ===== MENU MOBILE � FORC� pour Safari iOS ===== */

/* Menu sur 2 lignes, items en grille, pas de d�passement */
@media screen and (max-width: 700px) {
    .topbar__bar {
        flex-wrap: wrap !important;
        row-gap: 8px !important;
    }

    .menu {
        order: 3 !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        overflow: visible !important; /* pas de scroll horizontal */
    }

        /* Chaque item (lien ou <details>) prend sa cellule de grille */
        .menu > a,
        .menu > details {
            width: 100% !important;
        }

        /* Boutons de menu bien larges et centr�s */
        .menu summary,
        .menu .menu__link {
            width: 100% !important;
            justify-content: center !important;
            padding: 12px 14px !important;
        }

        /* Dropdowns dans le flux (plus d'absolu) */
        .menu details {
            position: static !important;
        }

    .menu__dropdown {
        position: static !important;
        width: 100% !important;
        margin-top: 6px !important;
        box-shadow: var(--shadow) !important;
        border-radius: 12px !important;
    }

    /* Logo plus petit pour gagner de la place */
    .brand__logo {
        height: 30px !important;
    }
}

/* En tr�s petit : 1 seule colonne */
@media screen and (max-width: 420px) {
    .menu {
        grid-template-columns: 1fr !important;
    }
}


#menu-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* ===========================
   MENU HAMBURGER MOBILE (pure CSS)
   =========================== */
@media screen and (max-width: 700px) {

    /* Cache le menu par d�faut */
    .menu {
        display: none !important;
    }

    /* Conteneur du burger */
    .burger {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        cursor: pointer;
        border-radius: 8px;
        background: rgba(255,255,255,0.35);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
    }

        .burger span {
            position: relative;
            display: block;
            width: 22px;
            height: 2px;
            background: var(--text);
            transition: all .3s ease;
        }

            .burger span::before,
            .burger span::after {
                content: "";
                position: absolute;
                width: 22px;
                height: 2px;
                background: var(--text);
                transition: all .3s ease;
            }

            .burger span::before {
                top: -6px;
            }

            .burger span::after {
                top: 6px;
            }

    /* Checkbox cach�e */
    #menu-toggle {
        display: none;
    }

        /* Quand activ� */
        #menu-toggle:checked + .burger span {
            background: transparent;
        }

            #menu-toggle:checked + .burger span::before {
                transform: rotate(45deg);
                top: 0;
            }

            #menu-toggle:checked + .burger span::after {
                transform: rotate(-45deg);
                top: 0;
            }

        /* Menu affich� quand checkbox coch�e */
        #menu-toggle:checked ~ nav.menu {
            display: flex !important;
            flex-direction: column;
            width: 100%;
            margin-top: 10px;
            gap: 8px;
        }

    /* Style des liens d�roul�s */
    .menu summary,
    .menu .menu__link {
        width: 100%;
        justify-content: center;
        padding: 14px;
    }
}

input#share.checker {
    width: 150px;
}

/*
Scrollbar*/

.scrollWrapper {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background: #FFF;
  border: 1px #000 solid;
  margin: 20px auto;
  padding: 15px;
  position: relative;
  height: 250px;
}

#scrollContainer {
  width: 100%;
  height: 250px;
  padding: 5px;
  margin-top: 5px;
  overflow: auto;
  position: relative;
}

.ssb_down {
  background-color: #33ccaa;
  bottom:0;
  cursor:pointer;
  position:absolute;
  right:0;
  border-radius: 10px;
}

.ssb_sb {
  background-color: #22aabb;
  cursor:pointer;
  position:absolute;
  right:0;
  border-radius: 10px;
}

.ssb_sb_down {
  background-color: #1199aa;
}

.ssb_sb_over {
  background-color: #33bbcc;
}

.ssb_st {
  background-color: #dedede;
  cursor:pointer;
  height:100%;
  position:absolute;
  right:0;
  top:0;
  border-radius: 10px;
}

.ssb_up {
  background-color: #33ccaa;
  cursor:pointer;
  position:absolute;
  right:0;
  top:0;
  border-radius: 10px;
}

.scrollParent {
  font-family:verdana;
  height:100%;
  padding:10px;
  position:relative;
}

.image_picker_image
{
    width : 150px;
}



/* on s'assure que le conteneur <details> sert d'ancre au dropdown */
.menu details {
    position: relative;
}

    /* par défaut, on cache le panneau nous-mêmes */
    .menu details .menu__dropdown {
        display: none;
    }

    /* si le <details> est ouvert (clic mobile/tablette), on l'affiche normalement */
    .menu details[open] .menu__dropdown {
        display: block;
    }

    /* SURVOL SOURIS :
   -> on force l'ouverture même si le <details> n'est pas "open"
   -> le !important est là pour battre le style natif du <details> fermé
*/
    .menu details:hover > .menu__dropdown,
    .menu details:focus-within > .menu__dropdown {
        display: block !important;
    }

    /* petit feedback visuel sur le bouton lui-même au survol */
    .menu details:hover > summary,
    .menu details:focus-within > summary {
        background: #ffffffF0;
        transform: translateY(-1px);
    }