/**
 * Okane Portfolio — espace privé de l'artiste (login + éditeur).
 * Interface neutre et lisible, indépendante du thème.
 */
.okane-espace{
	--o-bg:#f6f5f3;--o-card:#fff;--o-ink:#1a1a1c;--o-muted:#6c6b67;
	--o-line:#e3e1dc;--o-line-fort:#c9c6bf;--o-accent:#1a1a1c;--o-danger:#c0392b;
	--o-radius:12px;--o-radius-s:8px;
	max-width:1180px;margin:0 auto;padding:24px 24px 60px;
	font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--o-ink);
}
.okane-espace *{box-sizing:border-box}
.okane-espace :focus-visible{outline:2px solid var(--o-accent);outline-offset:2px}

/* login */
.okane-login{max-width:400px}
.okane-login h2{font-size:26px;margin:0 0 6px}
.okane-login-sub{color:var(--o-muted);margin:0 0 22px}
.okane-login .login-username,.okane-login .login-password{margin-bottom:14px}
.okane-login label{display:block;font-size:14px;margin-bottom:6px}
.okane-login input[type=text],.okane-login input[type=password]{
	width:100%;padding:11px 13px;border:1px solid var(--o-line);border-radius:var(--o-radius-s);font-size:15px}
.okane-login .button,.okane-login #wp-submit{
	background:var(--o-accent);color:#fff;border:0;padding:11px 20px;border-radius:var(--o-radius-s);cursor:pointer;font-size:15px}
.okane-denied{color:var(--o-muted);padding:40px 0}

/* app shell */
.okane-app{background:transparent}
.okane-loading{padding:40px 0;color:var(--o-muted)}
.okane-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.okane-brand{font-size:22px;font-weight:700;letter-spacing:-.015em}
.okane-head-right{display:flex;align-items:center;gap:16px;font-size:14px}
.okane-user{color:var(--o-muted)}
.okane-logout{color:var(--o-muted);text-decoration:underline}

.okane-tabs{display:flex;gap:26px;border-bottom:1px solid var(--o-line);margin-bottom:26px}
.okane-tab{background:none;border:0;border-bottom:2px solid transparent;padding:12px 2px;margin:0 0 -1px;
	font-size:15px;color:var(--o-muted);cursor:pointer}
.okane-tab:hover{color:var(--o-ink)}
.okane-tab.is-active{color:var(--o-ink);border-color:var(--o-accent);font-weight:600}

/* layout colonnes */
.okane-cols{display:grid;grid-template-columns:250px minmax(0,1fr);gap:30px;align-items:start}
@media(max-width:860px){.okane-cols{grid-template-columns:1fr}}

/* Chaque colonne défile pour elle-même. Avec quatre-vingts ensembles, la barre
   de gauche est plus haute que trois écrans : faire défiler la page entière pour
   atteindre un voyage faisait perdre de vue le formulaire, et inversement.
   « sticky » garde les deux panneaux à l'écran, sous l'en-tête collant du site,
   pendant que le pied de page reste atteignable en bas. */
@media(min-width:861px){
  .okane-side,.okane-main{
    position:sticky;
    /* sous l'en-tête du site : 16px de marge + le logo + 16px, plus un peu d'air */
    top:var(--o-haut,76px);
    max-height:calc(100vh - var(--o-haut,76px) - 24px);
    overflow-y:auto;
    /* le défilement s'arrête au bord du panneau au lieu d'entraîner la page */
    overscroll-behavior:contain;
  }
  /* L'en-tête du site se retire dès qu'on défile (il cède la place à la bulle) :
     les panneaux récupèrent alors sa hauteur. La classe est posée sur <html> par
     okane-nav.js, on la suit sans une ligne de script de plus. */
  :root.okane-scrolled .okane-side,
  :root.okane-scrolled .okane-main{top:16px;max-height:calc(100vh - 40px)}
  /* De la place pour l'ascenseur, sinon il recouvre le compteur de photos. */
  .okane-side{padding-right:8px}
  .okane-side::-webkit-scrollbar,.okane-main::-webkit-scrollbar{width:10px}
  .okane-side::-webkit-scrollbar-thumb,.okane-main::-webkit-scrollbar-thumb{
    background:var(--o-line-fort);border-radius:99px;
    border:3px solid var(--o-bg);background-clip:padding-box}
  .okane-side::-webkit-scrollbar-track,.okane-main::-webkit-scrollbar-track{background:transparent}
  .okane-side,.okane-main{scrollbar-width:thin;scrollbar-color:var(--o-line-fort) transparent}
}

/* Barre latérale : un groupe par nature de contenu (destinations, mariages,
   séries), sinon rien n'indique quelle entrée alimente quelle page. */
.okane-side{display:flex;flex-direction:column;gap:6px}
.okane-group-t{margin:16px 0 6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--o-muted)}
.okane-group-t:first-child{margin-top:0}
.okane-voyage-list{display:flex;flex-direction:column;gap:4px}
.okane-vitem{display:flex;justify-content:space-between;align-items:center;gap:10px;
	background:var(--o-card);border:1px solid var(--o-line);border-radius:var(--o-radius-s);padding:11px 13px;
	text-align:left;cursor:pointer;font-size:15px;color:var(--o-ink);transition:border-color .15s,background .15s}
.okane-vitem>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.okane-vitem em{font-style:normal;font-size:12px;color:var(--o-muted);background:var(--o-bg);
	border-radius:20px;padding:2px 9px;flex:0 0 auto}
.okane-vitem:hover{border-color:var(--o-line-fort)}
.okane-vitem.is-active{border-color:var(--o-accent);box-shadow:inset 0 0 0 1px var(--o-accent)}
.okane-add{margin-top:14px}

/* Carte principale */
.okane-main{background:var(--o-card);border:1px solid var(--o-line);border-radius:var(--o-radius);padding:26px 26px 30px}

/* Titre de bloc : la page enchaînait formulaire, couverture et photos sans
   jamais dire où l'on passait de l'un à l'autre. */
.okane-section-t{margin:0 0 16px;font-size:13px;font-weight:600;letter-spacing:.08em;
	text-transform:uppercase;color:var(--o-muted)}
/* Chaque bloc suivant se détache du précédent par un filet : sans lui, le titre
   « Couverture » se lisait comme une légende du bouton d'enregistrement. */
.okane-main>.okane-section-t:not(:first-child),
.okane-main>.okane-photos-head{margin-top:34px;padding-top:26px;border-top:1px solid var(--o-line)}

/* ordre des contenus d'une famille */
/* Une ligne par ensemble, pleine largeur : le geste est vertical, comme la
   liste qu'il réorganise. La vignette dit lequel on déplace mieux que son nom. */
.okane-ordre-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.okane-ordre-head .okane-section-t{margin-bottom:0}
.okane-ordre{display:flex;flex-direction:column;gap:6px;margin-top:18px}
.okane-ordre-item{display:flex;align-items:center;gap:14px;
	background:var(--o-card);border:1px solid var(--o-line);border-radius:var(--o-radius-s);
	padding:10px 14px;cursor:grab}
.okane-ordre-item.is-drag{opacity:.4}
.okane-ordre-item:hover{border-color:var(--o-line-fort)}
.okane-ordre-vue{flex:0 0 auto;width:52px;height:40px;border-radius:6px;
	background:var(--o-bg) center/cover no-repeat}
.okane-ordre-nom{flex:1 1 auto;font-size:15px}
.okane-ordre-n{flex:0 0 auto;font-size:12px;color:var(--o-muted)}
.okane-ordre-drag{flex:0 0 auto;font-size:15px;color:var(--o-muted)}

/* form */
.okane-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.okane-form-wide{grid-template-columns:1fr;max-width:640px}
.okane-field{display:flex;flex-direction:column;gap:6px;font-size:14px}
/* Un texte long ne tient pas dans une demi-colonne : il laissait un trou en
   face de lui, et se lisait sur quatre mots de large. */
.okane-field-wide{grid-column:1/-1;max-width:none}
.okane-field>span{color:var(--o-muted)}
.okane-field>span em{display:block;font-style:normal;font-size:12px;opacity:.75;margin-top:2px}
.okane-field input,.okane-field select,.okane-field textarea{
	padding:10px 12px;border:1px solid var(--o-line);border-radius:var(--o-radius-s);
	font-size:15px;font-family:inherit;background:#fff;color:var(--o-ink)}
.okane-field input:hover,.okane-field select:hover,.okane-field textarea:hover{border-color:var(--o-line-fort)}
.okane-field textarea{resize:vertical;line-height:1.5}
.okane-form-actions{grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
/* En étroit, deux champs côte à côte tronquent leur contenu au tiers du mot. */
@media(max-width:620px){.okane-form{grid-template-columns:1fr}}

.okane-btn{background:var(--o-accent);color:#fff;border:0;padding:11px 18px;border-radius:var(--o-radius-s);
	cursor:pointer;font-size:14px;font-family:inherit}
.okane-btn-ghost{background:#fff;color:var(--o-ink);border:1px solid var(--o-line)}
.okane-btn-ghost:hover{border-color:var(--o-line-fort)}
/* La suppression était collée au bouton d'enregistrement, au même poids visuel. */
.okane-btn-danger{background:#fff;color:var(--o-danger);border:1px solid var(--o-line)}
.okane-btn-danger:hover{border-color:var(--o-danger)}
.okane-btn-far{margin-left:auto}

/* couverture */
.okane-cover-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.okane-cover-prev{width:132px;height:99px;border-radius:var(--o-radius-s);background-size:cover;
	background-position:center;border:1px solid var(--o-line)}
.okane-cover-prev.is-empty{background:var(--o-bg)}
/* emplacements d'image : la vignette prend la forme de l'endroit où l'image s'affiche */
.okane-slot{margin-bottom:22px}
.okane-slot-t{font-size:13px;font-weight:600}
.okane-slot-aide{color:var(--o-muted);font-size:13px;line-height:1.5;margin:2px 0 10px}
.okane-cover-prev--wide{width:176px;height:99px}
.okane-cover-prev--tall{width:62px;height:110px}
.okane-cover-prev--carre{width:99px;height:99px}
/* image de repli : montrée pâlie, elle n'est pas un choix de l'artiste */
.okane-cover-prev.is-repli{opacity:.55}
.okane-slot-etat{color:var(--o-muted);font-size:13px}
/* diaporama de l'accueil */
.okane-hero-row{margin-bottom:14px}
.okane-hero-n{width:1.5em;font-weight:600;color:var(--o-muted)}
.okane-hero .okane-btn:disabled{opacity:.35;cursor:default}

/* photos */
.okane-photos-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.okane-photos-head h3{margin:0;font-size:13px;font-weight:600;letter-spacing:.08em;
	text-transform:uppercase;color:var(--o-muted)}
.okane-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.okane-photo{margin:0;border:1px solid var(--o-line);border-radius:var(--o-radius-s);overflow:hidden;background:#fff}
.okane-photo.is-drag{opacity:.4}
/* La vignette porte la poignée et la suppression : la barre du bas ne loge plus
   que les réglages, au lieu de pousser deux contrôles hors de la carte. */
.okane-photo-vue{position:relative}
.okane-photo-img{display:block;height:150px;background-size:cover;background-position:center}
.okane-photo-drag,.okane-photo-del{position:absolute;top:8px;display:flex;align-items:center;justify-content:center;
	width:28px;height:28px;border-radius:6px;background:rgba(16,16,18,.6);color:#fff;
	border:0;font-size:15px;line-height:1;backdrop-filter:blur(3px)}
.okane-photo-drag{left:8px;cursor:grab}
.okane-photo-del{right:8px;cursor:pointer;padding:0;font-size:18px}
.okane-photo-del:hover{background:var(--o-danger)}
.okane-photo-bar{display:flex;flex-direction:column;gap:8px;padding:10px}
.okane-size-lab{display:flex;flex-direction:column;gap:4px;font-size:11px;
	letter-spacing:.06em;text-transform:uppercase;color:var(--o-muted)}
.okane-size{width:100%;padding:7px 8px;border:1px solid var(--o-line);border-radius:6px;
	font-size:13px;font-family:inherit;background:#fff;color:var(--o-ink);text-transform:none;letter-spacing:0}
.okane-size:hover{border-color:var(--o-line-fort)}
.okane-photo-flags{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
/* coches « vente en cadre » et « grille accueil » (rappel du cadre : sombre + crème) */
.okane-sale,.okane-grille{display:flex;align-items:center;justify-content:center;gap:6px;
	padding:7px 6px;border:1px solid var(--o-line);border-radius:6px;background:#fff;color:var(--o-muted);
	font-size:11px;cursor:pointer;user-select:none;text-align:center;
	transition:background .2s,color .2s,border-color .2s}
.okane-sale input,.okane-grille input{margin:0;cursor:pointer;flex:0 0 auto}
.okane-sale:hover,.okane-grille:hover{border-color:#17140f}
.okane-sale.is-on,.okane-grille.is-on{background:#17140f;border-color:#17140f;color:#ece9e1}

.okane-hint{color:var(--o-muted);font-size:13px;margin-top:16px;line-height:1.5}
.okane-empty{color:var(--o-muted);padding:24px 0}

/* toast */
.okane-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);opacity:0;
	background:var(--o-accent);color:#fff;padding:11px 18px;border-radius:var(--o-radius-s);font-size:14px;z-index:99999;
	transition:opacity .3s,transform .3s;font-family:system-ui,sans-serif}
.okane-toast.in{opacity:1;transform:translate(-50%,0)}
.okane-toast.is-err{background:var(--o-danger)}

/* Case à cocher (voyage favori) : alignée sur la ligne, libellé cliquable. */
.okane-field-check{grid-column:1/-1;flex-direction:row;align-items:flex-start;gap:10px;cursor:pointer}
.okane-field-check input{width:18px;height:18px;margin-top:2px;flex:0 0 auto}
.okane-field-check>span{color:var(--o-ink)}
.okane-field-check em{display:block;font-style:normal;opacity:.65;font-size:12px;margin-top:2px}

/* Sous-titre de section dans l'onglet Réglages. */
.okane-subtitle{margin:34px 0 12px;font-size:13px;font-weight:600;letter-spacing:.08em;
	text-transform:uppercase;color:var(--o-muted)}

/* En étroit la ligne d'actions passe à la ligne : le bouton de suppression n'a
   plus à être repoussé au bout. Déclaré ici, après .okane-btn-far — à
   spécificité égale, une media query ne l'emporte que par l'ordre. */
@media(max-width:620px){.okane-btn-far{margin-left:0}}

/* Séparateur des champs anglais : un filet au-dessus, pour lire deux blocs. */
.okane-en-sep{margin:8px 0 0;padding-top:14px;border-top:1px solid var(--o-line,rgba(127,127,127,.25))}