/* Refonte esthetique du 13/10/2026 (retour proprietaire : "l'orange agresse,
   les boutons sont laids") - l'orange d'origine (#ff7a30) etait une couleur
   d'accent propre au dashboard, sans rapport avec la charte reelle. On
   reprend la charte de la marque : marine #182028, or #f4c56d, sarcelle
   #106b69, police Poppins. Regle : le marine porte la structure et les
   boutons, l'or reste un accent rare (action principale, onglet actif,
   "aujourd'hui"), jamais en aplat large. */
@font-face{font-family:'Poppins';font-weight:400;font-display:swap;src:url('/assets/fonts/Poppins-Regular.ttf') format('truetype');}
@font-face{font-family:'Poppins';font-weight:600;font-display:swap;src:url('/assets/fonts/Poppins-SemiBold.ttf') format('truetype');}
@font-face{font-family:'Poppins';font-weight:700;font-display:swap;src:url('/assets/fonts/Poppins-Bold.ttf') format('truetype');}
@font-face{font-family:'Poppins';font-weight:800;font-display:swap;src:url('/assets/fonts/Poppins-ExtraBold.ttf') format('truetype');}

:root{
    --navy:#182028;
    --navy-2:#26323d;
    --gold:#f4c56d;
    --gold-hover:#ecb854;
    --gold-deep:#8a6414;
    --gold-dim:#fbf2dc;
    --teal:#106b69;
    --teal-dim:#e2efed;

    --bg:#f4f2ed;
    --surface:#ffffff;
    --surface-2:#f6f4ef;
    --border:#e6e2d9;
    --text:#182028;
    --text-dim:#6c7480;

    --primary:var(--navy);
    --primary-hover:var(--navy-2);
    --accent:var(--gold);
    --accent-dim:var(--gold-dim);
    --accent-text:var(--gold-deep);
    --green:var(--teal);
    --green-dim:var(--teal-dim);
    --red:#b4352d;
    --red-dim:#fbeceb;
    --amber:#8a6414;
    --amber-dim:#fbf2dc;

    --ring:0 0 0 3px rgba(244,197,109,.55);
}
*{box-sizing:border-box;}
body{
    margin:0;
    background:var(--bg);
    font-family:'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:14px;
    line-height:1.5;
    color:var(--text);
    -webkit-font-smoothing:antialiased;
}
a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px;text-decoration-thickness:2px;}
a:hover{color:var(--gold-deep);}
input,textarea,select,button{font-family:inherit;}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--navy)!important;box-shadow:var(--ring);}
button:focus-visible,a:focus-visible{outline:none;box-shadow:var(--ring);}
button:active{transform:translateY(1px);}
@media(prefers-reduced-motion:reduce){*{transition:none!important;}}

.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--navy);}
.login-box{
    background:var(--surface);
    border:none;
    border-radius:20px;
    padding:36px;
    width:340px;
    text-align:center;
    box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.login-box h1{margin:0 0 4px;font-size:22px;font-weight:700;letter-spacing:-.02em;}
.login-box .subtitle{color:var(--text-dim);margin:0 0 24px;font-size:14px;}
.login-box form{display:flex;flex-direction:column;gap:12px;}
.login-box label{text-align:left;font-size:13px;color:var(--text-dim);}
.login-box input{
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px;
    color:var(--text);
    font-size:15px;
}
.login-box button{
    margin-top:8px;
    background:var(--gold);
    border:none;
    border-radius:12px;
    padding:12px;
    color:var(--navy);
    font-weight:700;
    cursor:pointer;
    transition:background-color .15s, transform .08s;
}
.login-box button:hover{background:var(--gold-hover);}
.alert{padding:12px 14px;border-radius:12px;font-size:14px;margin-bottom:16px;}
.alert-error{background:var(--red-dim);color:var(--red);border:1px solid rgba(220,38,38,.22);}
.alert-success{background:var(--green-dim);color:var(--green);border:1px solid rgba(22,163,74,.22);}

.shell{display:flex;min-height:100vh;}

/* Barre laterale marine : porte l'identite de la marque (a la place de
   l'orange), le contenu reste clair pour la lisibilite. */
.sidebar{
    width:224px;
    flex:0 0 auto;
    padding:28px 14px;
    background:var(--navy);
    color:#fff;
    position:sticky;
    top:0;
    height:100vh;
    display:flex;
    flex-direction:column;
    gap:4px;
}
.sidebar .brand{font-size:18px;font-weight:700;letter-spacing:-.02em;padding:0 10px 22px;color:#fff;}
.sidebar .brand span{color:var(--gold);margin-left:5px;font-weight:400;}
.sidebar .logout{margin-top:auto;font-size:13px;color:rgba(255,255,255,.55);padding:10px;text-decoration:none;}
.sidebar .logout:hover{color:#fff;}

.nav-btn{
    display:block;
    padding:10px 12px;
    margin:0 10px 4px;
    border-radius:10px;
    color:rgba(255,255,255,.68);
    font-weight:600;
    font-size:14px;
    text-decoration:none;
    transition:background-color .15s, color .15s;
}
.nav-btn:hover{background:rgba(255,255,255,.08);color:#fff;}
.nav-btn.active{background:rgba(244,197,109,.14);color:var(--gold);box-shadow:inset 3px 0 0 var(--gold);}

.nav-count{
    display:inline-block;
    background:#ece8de;
    color:var(--text-dim);
    border-radius:999px;
    padding:0 8px;
    font-size:11px;
    font-weight:700;
    margin-left:6px;
    font-variant-numeric:tabular-nums;
}
.tab-btn.active .nav-count{background:var(--gold);color:var(--navy);}

.nav-status{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
    border-radius:14px;
    padding:14px;
    margin:0 10px 14px;
}
.nav-status-label{font-size:11px;color:rgba(255,255,255,.55);margin-bottom:4px;}
.nav-status-value{font-size:14px;font-weight:600;color:#fff;}
.nav-status-detail{font-size:12px;color:rgba(255,255,255,.55);margin-top:2px;}

.main{flex:1;min-width:0;max-width:1240px;margin:0 auto;padding:36px 40px 80px;}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;gap:12px;}
.topbar h1{font-size:26px;font-weight:700;margin:0;letter-spacing:-.02em;}

.panel{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    padding:20px;
    margin-bottom:16px;
}
.panel h2{margin:0 0 14px;font-size:15px;color:var(--text);font-weight:700;letter-spacing:-.01em;}

.empty{color:var(--text-dim);font-size:14px;margin:0;}

.upload-form{display:flex;flex-direction:column;gap:12px;}
.upload-form input[type=file],
.upload-form textarea,
.upload-form input[type=datetime-local]{
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:12px;
    padding:10px 12px;
    color:var(--text);
    font-family:inherit;
    font-size:14px;
}
.upload-form button{
    align-self:flex-start;
    background:var(--primary);
    border:none;
    border-radius:10px;
    padding:11px 20px;
    color:#fff;
    font-weight:600;
    cursor:pointer;
    transition:background-color .15s, transform .08s;
}
.upload-form button:hover{background:var(--primary-hover);}

table{width:100%;border-collapse:collapse;font-size:14px;}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--border);}
th{color:var(--text-dim);font-weight:600;font-size:12px;}

.badge{display:inline-block;padding:2px 9px;border-radius:6px;font-size:11px;font-weight:600;letter-spacing:.01em;}
.badge-status-draft{background:var(--surface-2);color:var(--text-dim);border:1px solid var(--border);}
.badge-status-approved{background:var(--green-dim);color:var(--green);}
.badge-status-publishing{background:var(--amber-dim);color:var(--amber);}
.badge-status-published{background:var(--green-dim);color:var(--green);}
.badge-status-failed{background:var(--red-dim);color:var(--red);}
.badge-format-feed{background:var(--gold-dim);color:var(--gold-deep);}
.badge-format-story{background:#e8ecf0;color:#3b4856;}

/* --- Regroupement par date : repond a "les dates c'est pas bien visible,
   tout se melange" (retour proprietaire 06/08/2026). Chaque groupe de date
   a un en-tete distinct et sticky pendant le scroll. --- */
.date-group{margin-bottom:4px;}
.date-heading{
    display:flex;
    align-items:baseline;
    gap:8px;
    padding:10px 4px 8px;
    position:sticky;
    top:0;
    background:var(--surface);
    z-index:1;
}
.date-heading .date-label{font-size:14px;font-weight:700;color:var(--text);text-transform:capitalize;}
.date-heading .date-relative{
    font-size:11px;
    font-weight:600;
    padding:2px 9px;
    border-radius:6px;
    background:var(--gold-dim);
    color:var(--gold-deep);
}
.date-heading .date-relative.is-today{background:var(--gold);color:var(--navy);}
.date-heading .date-count{font-size:12px;color:var(--text-dim);margin-left:auto;}

/* --- Carte de post : image et legende entierement visibles d'un coup
   d'oeil (retour proprietaire 07/08/2026 - la miniature reduite et la
   legende tronquee etaient allees trop loin). Le regroupement par date
   ci-dessus reste ce qui evite que "tout se melange". --- */
.post-card{
    display:flex;
    gap:14px;
    padding:10px 4px;
    border-bottom:1px solid var(--border);
    align-items:flex-start;
}
.date-group .post-card:last-child{border-bottom:none;}
.post-media{flex:0 0 160px;}
.post-media img, .post-media video{
    width:160px;
    height:160px;
    object-fit:cover;
    border-radius:12px;
    background:var(--surface-2);
    display:block;
}
.post-media.story img, .post-media.story video{
    width:160px;
    height:280px;
}

/* Carrousel feed (plusieurs images) : la 1ere en grand comme une carte
   normale, les suivantes empilees derriere en decale pour montrer qu'il y
   en a d'autres, plus un badge avec le nombre total. */
/* height/width legerement plus grands que les vignettes (160px) pour laisser
   la place au decalage des cartes empilees derriere - overflow:hidden en
   securite : sans ca, le decalage (jusqu'a 12px) depassait le bas du
   conteneur et debordait visuellement sur la carte suivante dans la liste
   (bug trouve 20/08/2026, retour proprietaire "ça déborde sur... le poste
   du lendemain"). */
.post-media-carousel{position:relative;flex:0 0 176px;width:176px;height:176px;overflow:hidden;}
.post-media-carousel-main{
    width:160px;
    height:160px;
    object-fit:cover;
    border-radius:12px;
    background:var(--surface-2);
    display:block;
    position:relative;
    z-index:3;
}
.post-media-carousel-thumb{
    display:none;
}
.post-media-carousel-thumb:nth-child(2){
    display:block;
    position:absolute;
    top:6px; left:8px;
    width:160px;
    height:160px;
    object-fit:cover;
    border-radius:12px;
    z-index:2;
    box-shadow:0 2px 6px rgba(20,20,30,.12);
}
.post-media-carousel-thumb:nth-child(3){
    display:block;
    position:absolute;
    top:12px; left:16px;
    width:160px;
    height:160px;
    object-fit:cover;
    border-radius:12px;
    z-index:1;
    box-shadow:0 2px 6px rgba(20,20,30,.12);
}
.post-media-carousel-count{
    position:absolute;
    bottom:6px; right:6px;
    z-index:4;
    background:rgba(20,20,30,.72);
    color:#fff;
    font-size:11px;
    font-weight:700;
    padding:3px 8px;
    border-radius:20px;
}

/* --- Grille compacte pour les stories (retour proprietaire 08/08/2026) :
   plus de gros boutons a cote de l'image, tout tient dans une petite
   tuile - date/heure+statut au-dessus, image, boutons reduits en dessous.
   Jusqu'a 4 stories d'une meme journee cote a cote. --- */
.story-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:14px;
    margin-top:2px;
    border-radius:10px;
    transition:background-color .12s, outline-color .12s;
    outline:2px dashed transparent;
    outline-offset:4px;
}
/* Glisser-deposer pour changer la date d'une story (retour proprietaire
   08/08/2026) - base sur les pointer events (pas l'API HTML5 drag and drop,
   qui ne marche pas sur mobile/tactile) pour fonctionner au doigt comme a
   la souris, meme technique que l'outil de recadrage plus bas. */
.story-grid.drop-target{
    background:var(--accent-dim);
    outline-color:var(--accent);
}
.story-tile-draggable{cursor:grab;touch-action:none;}
.story-tile-draggable.dragging{opacity:.4;cursor:grabbing;}
.story-drag-ghost{
    position:fixed;
    left:0; top:0;
    width:64px;
    height:114px;
    pointer-events:none;
    z-index:300;
    transform:translate(-50%,-50%) rotate(-4deg);
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 10px 28px rgba(20,20,30,.4);
    border:2px solid var(--accent);
    background:var(--surface);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}
.story-drag-ghost img{width:100%;height:100%;object-fit:cover;display:block;}
.story-tile{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    padding:10px;
    display:flex;
    flex-direction:column;
    gap:7px;
}
.story-tile-meta{display:flex;flex-direction:column;gap:3px;align-items:flex-start;}
.story-tile-meta .post-time{font-size:11px;}
.story-tile-media img, .story-tile-media video{
    width:100%;
    aspect-ratio:9/16;
    object-fit:cover;
    border-radius:8px;
    background:var(--surface-2);
    display:block;
}
.story-tile-label{margin:0;font-size:11px;font-weight:700;color:var(--text-dim);}
.story-tile-error{color:var(--red);font-size:11px;margin:0;}
.story-tile-note{
    color:var(--amber);
    font-size:11px;
    margin:0;
    background:var(--amber-dim);
    border-radius:6px;
    padding:5px 7px;
}
.story-tile-actions{display:flex;flex-wrap:wrap;gap:5px;}
.btn-tiny{
    font-size:11.5px;
    padding:6px 10px;
    border-radius:8px;
    border:1px solid transparent;
    background:var(--primary);
    color:#fff;
    font-weight:600;
    cursor:pointer;
    transition:background-color .15s, border-color .15s, transform .08s;
}
.btn-tiny:hover{background:var(--primary-hover);}
.btn-tiny[data-action="approve"]{background:var(--gold);color:var(--navy);}
.btn-tiny[data-action="approve"]:hover{background:var(--gold-hover);}
.btn-tiny.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border);}
.btn-tiny.btn-secondary:hover{background:var(--surface-2);border-color:#cfc9bb;}
.btn-tiny.btn-danger{background:transparent;color:var(--red);}
.btn-tiny.btn-danger:hover{background:var(--red-dim);}
.story-tile-edit{
    display:none;
    flex-direction:column;
    gap:6px;
    padding:8px;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:8px;
}
.story-tile-edit.open{display:flex;}
.story-tile-edit textarea, .story-tile-edit input{
    font-size:12px;
    padding:6px;
    border-radius:6px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
    font-family:inherit;
}

.post-body{flex:1;min-width:0;}
.post-meta{display:flex;align-items:center;gap:8px;margin-bottom:3px;flex-wrap:wrap;}
.post-time{font-size:12px;color:var(--text-dim);font-variant-numeric:tabular-nums;font-weight:700;}
.post-attempts{font-size:12px;color:var(--text-dim);}
/* Legendes Claude pleines de sauts de ligne courts (un mot/une phrase par
   ligne, paragraphes separes par une ligne vide) - white-space:pre-wrap
   restitue fidelement chaque saut de ligne, ce qui peut donner un bloc de
   ~1000px pour une legende de 600 caracteres. Plafonnee avec un scroll
   interne (retour proprietaire 19/08/2026 : "on voit un seul post sur un
   ecran") plutot que tronquee - le texte reste entierement disponible,
   juste consultable en scrollant DANS la carte au lieu d'agrandir toute la
   carte. */
.post-caption{
    margin:0 0 6px;
    font-size:14px;
    line-height:1.35;
    color:var(--text);
    white-space:pre-wrap;
    max-height:210px;
    overflow-y:auto;
    padding-right:4px;
}
.post-error{color:var(--red);font-size:13px;margin:0 0 6px;}
.post-note{
    color:var(--amber);
    font-size:13px;
    margin:0 0 6px;
    background:var(--amber-dim);
    border:1px solid rgba(180,83,9,.2);
    border-radius:10px;
    padding:7px 9px;
    white-space:pre-wrap;
}
.note-label{font-size:12px;color:var(--text-dim);}
.btn-note-toggle{margin-top:10px;}
#generate-course-story-result{margin-top:10px;font-size:13px;color:var(--text-dim);}
#generate-wod-stories-result{margin-top:10px;font-size:13px;color:var(--text-dim);}
.inline-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.inline-form label{font-size:13px;color:var(--text-dim);}
.inline-form input[type=number]{
    width:70px;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:10px;
    padding:8px 10px;
    color:var(--text);
    font-family:inherit;
}
.post-processing{color:var(--amber);font-size:13px;font-weight:700;}

.post-actions{display:flex;gap:6px;flex-wrap:wrap;}
.post-actions button{
    background:var(--primary);
    border:1px solid transparent;
    border-radius:9px;
    padding:7px 13px;
    color:#fff;
    font-weight:600;
    font-size:12.5px;
    cursor:pointer;
    transition:background-color .15s, border-color .15s, transform .08s;
}
.post-actions button:hover{background:var(--primary-hover);}
.post-actions button[data-action="approve"]{background:var(--gold);color:var(--navy);}
.post-actions button[data-action="approve"]:hover{background:var(--gold-hover);}
.post-actions .btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border);}
.post-actions .btn-secondary:hover{background:var(--surface-2);border-color:#cfc9bb;}
.post-actions .btn-danger{background:transparent;color:var(--red);}
.post-actions .btn-danger:hover{background:var(--red-dim);}

.edit-form{
    display:none;
    flex-direction:column;
    gap:10px;
    margin-top:12px;
    padding:14px;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:12px;
}
.edit-form.open{display:flex;}
.edit-form textarea,
.edit-form input[type=datetime-local]{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:10px;
    padding:9px 10px;
    color:var(--text);
    font-family:inherit;
    font-size:13px;
}
.edit-form button{
    align-self:flex-start;
    background:var(--primary);
    border:none;
    border-radius:10px;
    padding:9px 16px;
    color:#fff;
    font-weight:600;
    cursor:pointer;
    transition:background-color .15s, transform .08s;
}
.edit-form button:hover{background:var(--primary-hover);}

code{background:var(--surface-2);border-radius:4px;padding:1px 5px;font-size:12px;}

.regles-content h1{font-size:20px;margin:0 0 16px;}
.regles-content h2{font-size:17px;font-weight:700;color:var(--text);letter-spacing:-.01em;margin:30px 0 12px;padding-top:18px;border-top:1px solid var(--border);}
.regles-content h2:first-child{margin-top:0;}
.regles-content p{font-size:14px;line-height:1.6;margin:0 0 10px;}
.regles-content ul{margin:0 0 14px;padding-left:20px;}
.regles-content li{font-size:14px;line-height:1.6;margin-bottom:4px;}
.regles-content table{margin-bottom:16px;}

/* Onglets principaux : simple soulignement dore (plus de boutons colores). */
.tabs{display:flex;gap:30px;margin-bottom:24px;border-bottom:1px solid var(--border);}
.tab-btn{
    display:flex;
    align-items:center;
    gap:4px;
    background:none;
    border:none;
    border-bottom:3px solid transparent;
    border-radius:0;
    margin-bottom:-1px;
    padding:10px 2px;
    color:var(--text-dim);
    font-weight:600;
    font-size:15px;
    cursor:pointer;
    transition:color .15s, border-color .15s;
}
.tab-btn:hover{color:var(--text);}
.tab-btn.active{color:var(--navy);border-bottom-color:var(--gold);}
.tab-view{display:none;}
.tab-view.active{display:block;}

.subtabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap;}
.subtab-btn{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:999px;
    padding:6px 15px;
    color:var(--text-dim);
    font-weight:600;
    font-size:13px;
    cursor:pointer;
    transition:background-color .15s, color .15s, border-color .15s, transform .08s;
}
.subtab-btn:hover{border-color:var(--navy);color:var(--navy);}
.subtab-btn.active{background:var(--navy);color:#fff;border-color:var(--navy);}
.subtab-btn.active .nav-count{background:rgba(255,255,255,.18);color:#fff;}
.subtab-view{display:none;}
.subtab-view.active{display:block;}

.inline-form{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px;}
.inline-form label{font-size:13px;color:var(--text-dim);}
.inline-form input[type=number],
.inline-form input[type=time]{
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:8px;
    padding:7px 10px;
    color:var(--text);
    width:80px;
    font-family:inherit;
}
.inline-form button{
    background:var(--primary);
    border:none;
    border-radius:10px;
    padding:9px 16px;
    color:#fff;
    font-weight:600;
    font-size:13px;
    cursor:pointer;
    transition:background-color .15s, transform .08s;
}
.inline-form button:hover{background:var(--primary-hover);}

/* --- Grille d'outils de generation : widgets compacts et homogenes entre
   eux (retour proprietaire 07/08/2026 - avant, chaque generateur avait sa
   propre mise en forme, panneaux pleine largeur inconsistants). --- */
.tool-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
    gap:14px;
    margin-bottom:20px;
}
.tool-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:10px;
    transition:border-color .15s;
}
.tool-card:hover{border-color:#d4cdbd;}
.tool-card-head{display:flex;align-items:center;gap:10px;}
.tool-card-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    flex:0 0 auto;
    background:var(--gold-dim);
    border-radius:9px;
    font-size:16px;
    line-height:1;
}
.tool-card h3{margin:0;font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.01em;}
.tool-card p{margin:0;font-size:12.5px;color:var(--text-dim);line-height:1.5;}
.tool-card-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-top:auto;padding-top:10px;}
.tool-card-field{display:flex;flex-direction:column;gap:4px;}
.tool-card-field label{font-size:11px;color:var(--text-dim);font-weight:600;}
.tool-card-field input{
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:8px;
    padding:6px 8px;
    color:var(--text);
    font-family:inherit;
    font-size:13px;
    width:60px;
}
.tool-card-field input[type=time]{width:78px;}
.tool-card-field input[type=date]{width:130px;}
.tool-card-btn{
    background:var(--primary);
    border:none;
    border-radius:10px;
    padding:9px 18px;
    color:#fff;
    font-weight:600;
    font-size:13px;
    cursor:pointer;
    white-space:nowrap;
    margin-left:auto;
    transition:background-color .15s, transform .08s;
}
.tool-card-btn:hover{background:var(--primary-hover);color:#fff;}
.tool-card-btn:disabled{opacity:.55;cursor:default;}
.tool-card-result{font-size:12px;color:var(--text-dim);margin:2px 0 0;min-height:1.2em;}

@media(max-width:900px){
    .shell{flex-direction:column;}
    .sidebar{
        width:100%;
        height:auto;
        position:static;
        flex-direction:row;
        overflow-x:auto;
        padding:14px;
        border-right:none;
        border-bottom:1px solid var(--border);
        align-items:center;
    }
    .sidebar .brand{padding:0 10px;display:flex;align-items:center;}
    .sidebar .logout{margin-top:0;white-space:nowrap;}
    .nav-status{display:none;}
    .main{padding:20px 16px 50px;}
    .date-heading{position:static;}
    .story-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
    .post-card{flex-direction:column;}
    .post-media{flex:0 0 auto;}
    .post-media img, .post-media video{width:100%;height:auto;max-height:360px;}
}

.crop-modal{
    display:none;
    position:fixed;inset:0;
    background:rgba(20,20,30,.5);
    align-items:center;justify-content:center;
    z-index:100;
    padding:20px;
}
.crop-modal.open{display:flex;}
.crop-modal-box{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    padding:20px;
    max-width:420px;
    width:100%;
    text-align:center;
    box-shadow:0 14px 34px rgba(20,20,30,.18);
}
.crop-modal-box h3{margin:0 0 4px;}
.crop-hint{color:var(--text-dim);font-size:13px;margin:0 0 14px;}
#crop-canvas{
    width:100%;
    max-width:320px;
    border-radius:10px;
    border:1px solid var(--border);
    touch-action:none;
    cursor:grab;
    background:var(--surface-2);
}
#crop-zoom{width:100%;max-width:320px;margin:14px 0;}
.crop-actions{display:flex;flex-direction:column;gap:8px;align-items:stretch;max-width:320px;margin:0 auto;}
.crop-replace-btn{
    display:inline-block;
    background:var(--surface-2);
    border:1px solid var(--border);
    color:var(--text);
    padding:10px 14px;
    border-radius:10px;
    font-size:14px;
    cursor:pointer;
    text-align:center;
}
.crop-replace-btn:hover{border-color:var(--accent);}

/* --- Mode apercu (ajoute 19/08/2026, retour proprietaire : "je peux pas
   voir le carrousel du tout") - reproduit l'apparence d'un vrai post/story
   Instagram (pas juste une liste de vignettes) pour verifier le rendu final
   avant d'approuver, notamment les carrousels qui n'etaient pas du tout
   visualisables avant. Couleurs/chrome volontairement calques sur l'UI
   Instagram reelle (blanc/noir), pas sur la palette du dashboard, pour que
   l'aperçu ressemble vraiment a ce qui sera publie. --- */
.preview-btn{background:var(--surface)!important;color:var(--text)!important;border-color:var(--border)!important;}
.preview-btn:hover{background:var(--surface-2)!important;}
.ig-preview-box{
    background:#fff;
    border-radius:14px;
    max-width:400px;
    width:100%;
    overflow:hidden;
    position:relative;
    box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.ig-preview-close{
    position:absolute;
    top:10px;right:10px;
    z-index:20;
    width:32px;height:32px;
    border-radius:50%;
    border:none;
    background:rgba(0,0,0,.55);
    color:#fff;
    font-size:16px;
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
}
.ig-mock-header{
    display:flex;align-items:center;gap:10px;
    padding:12px 14px;
}
.ig-mock-avatar{
    width:34px;height:34px;border-radius:50%;
    background:var(--navy);
    box-shadow:0 0 0 2px var(--gold);
    flex:0 0 auto;
}
.ig-mock-username{font-size:14px;font-weight:700;color:#111;flex:1;}
.ig-mock-dots{color:#111;font-weight:700;letter-spacing:1px;}
.ig-mock-media{position:relative;width:100%;aspect-ratio:4/5;background:#000;overflow:hidden;}
.ig-mock-media-track{width:100%;height:100%;}
.ig-mock-media-track img, .ig-mock-media-track video{width:100%;height:100%;object-fit:cover;display:block;}
.ig-nav{
    position:absolute;top:50%;transform:translateY(-50%);
    width:32px;height:32px;border-radius:50%;
    border:none;background:rgba(255,255,255,.85);
    font-size:18px;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    z-index:5;
    color:#111;
}
.ig-nav-prev{left:10px;}
.ig-nav-next{right:10px;}
.ig-mock-counter{
    position:absolute;top:10px;right:12px;
    background:rgba(0,0,0,.55);color:#fff;
    font-size:11px;font-weight:700;
    padding:3px 9px;border-radius:20px;
}
.ig-mock-dots-indicator{
    position:absolute;bottom:10px;left:0;right:0;
    display:flex;justify-content:center;gap:5px;
}
.ig-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);}
.ig-dot.active{background:#fff;}
.ig-mock-actions{
    display:flex;align-items:center;gap:14px;
    padding:12px 14px 4px;
    font-size:20px;color:#111;
}
.ig-mock-actions .ig-mock-save{margin-left:auto;}
.ig-mock-caption{
    padding:6px 14px 16px;
    font-size:13px;
    color:#111;
    white-space:pre-wrap;
    max-height:160px;
    overflow-y:auto;
}
.ig-mock-caption strong{margin-right:4px;}

.ig-mock-story{background:#000;border-radius:14px;overflow:hidden;}
.ig-story-bar{display:flex;gap:4px;padding:8px 8px 0;}
.ig-story-bar-fill{flex:1;height:2px;background:rgba(255,255,255,.35);border-radius:2px;position:relative;overflow:hidden;}
.ig-story-bar-fill::after{content:"";position:absolute;inset:0;background:#fff;width:100%;}
.ig-story-header{display:flex;align-items:center;gap:8px;padding:10px 12px;}
.ig-story-header .ig-mock-username{color:#fff;}
.ig-story-media{width:100%;aspect-ratio:9/16;background:#111;}
.ig-story-media img, .ig-story-media video{width:100%;height:100%;object-fit:cover;display:block;}