/* =====================================================================
   public.css — Style du site public (aligné sur la maquette validée)
   Serveur Média Photo/Vidéo
   ===================================================================== */

:root{
  --bg:#0e1217;
  --surface:#161c24;
  --surface-2:#1e2630;
  --text:#eef2f6;
  --text-dim:#9aa7b4;
  --accent:#19b6c9;
  --accent-2:#1d6fa5;
  --border:rgba(255,255,255,.08);
  --radius:10px;
  --grid-min:240px;
  --grid-gap:8px;
  --grid-cell:280px;
  --grid-row:185px;
  --font:'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}
a{color:inherit;text-decoration:none}
img{-webkit-user-drag:none}

/* HEADER */
.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;background:rgba(14,18,23,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.site-logo{font-weight:700;font-size:20px;letter-spacing:.5px;display:flex;align-items:center}
.site-logo span{color:var(--accent)}
.site-logo img{max-height:42px;max-width:200px;display:block}
.site-header--logo-big{position:sticky;overflow:visible;padding-left:280px}
.site-header--logo-big .site-logo{position:absolute;left:28px;top:8px;z-index:60}
.site-header--logo-big .site-logo img{max-height:72px;max-width:240px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.30))}
.site-header--logo-big + *{margin-top:34px}
.site-header--logo-big + .hero{margin-top:0}
.site-nav{display:flex;gap:26px;align-items:center}
.site-nav a{font-size:14px;color:var(--text-dim);transition:color .2s}
.site-nav a:hover,.site-nav a.active{color:var(--text)}
.site-nav a.btn{background:var(--accent);color:#04181b;font-weight:600;padding:8px 16px;border-radius:8px}
.site-nav a.btn:hover{filter:brightness(1.1);color:#04181b}
.nav-actions{display:flex;gap:18px;align-items:center}
.icon-btn{font-size:13px;color:var(--text-dim);cursor:pointer;display:flex;align-items:center;gap:6px;transition:color .2s}
.icon-btn:hover{color:var(--accent)}
.badge{background:var(--accent);color:#04181b;border-radius:20px;font-size:11px;font-weight:700;padding:1px 7px}
.lang{border:1px solid var(--border);border-radius:6px;padding:3px 8px;font-size:12px;color:var(--text-dim);cursor:pointer}
.btn-nav{background:var(--accent);color:#04181b;font-weight:600;padding:8px 16px;border-radius:8px;font-size:13px}
.btn-nav:hover{filter:brightness(1.1)}

/* HERO */
.hero{position:relative;height:340px;overflow:hidden;display:flex;align-items:flex-end}
.hero-whole{height:auto;overflow:visible;display:block}
.hero-whole-img{display:block;width:100%;height:auto}
.hero-whole .hero-text{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(to top,var(--bg) 0%,rgba(0,0,0,0) 100%)}
.hero-bg,.hero-img{position:absolute;inset:0;background-size:cover;background-position:center}
.hero--fade .hero-bg::after,.hero--fade .hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 35%,var(--bg) 100%)}
/* ===== Thème VISION — TYPO GLOBALE (isolé, n'affecte que body.layout-vision) ===== */
body.layout-vision{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif}
body.layout-vision h1,body.layout-vision h2,body.layout-vision h3{font-family:'Archivo',system-ui,sans-serif}
/* ===== Thème VISION — HERO (isolé, n'affecte que body.layout-vision) ===== */
body.layout-vision .hero{--vmargin:clamp(24px,5vw,75px);width:min(1280px, 100% - var(--vmargin) - var(--vmargin));margin:22px auto;border-radius:18px;overflow:hidden;align-items:center}
body.layout-vision main{--vmargin:clamp(24px,5vw,75px);width:min(1280px, 100% - var(--vmargin) - var(--vmargin));max-width:none;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}
body.layout-vision .hero-img{border-radius:18px}
body.layout-vision .hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,var(--bg) 0%,rgba(0,0,0,.45) 45%,rgba(0,0,0,0) 85%)}
body.layout-vision .hero-text{max-width:640px;padding:0 clamp(24px,6vw,64px)}
body.layout-vision .hero-text h1{font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-size:clamp(32px,5vw,52px);line-height:1.04;letter-spacing:-.5px}
body.layout-vision .hero-text p{font-family:'Manrope',system-ui,sans-serif;color:var(--text-dim);font-size:16px;margin-top:16px;max-width:460px}
body.layout-vision .hero-eyebrow{display:block;color:var(--accent);font-family:'Manrope',system-ui,sans-serif;font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px}
/* ===== Thème VISION — CARTES DE REPORTAGES (option B immersive) ===== */
body.layout-vision .folio-grid{gap:18px}
body.layout-vision .folio{border-radius:16px}
body.layout-vision .folio-overlay{background:linear-gradient(to top,rgba(0,0,0,.80) 0%,rgba(0,0,0,0) 50%);padding:16px}
body.layout-vision .folio-overlay h3{font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:19px;line-height:1.15;margin-bottom:8px}
body.layout-vision .folio-meta{gap:8px;font-size:12px;margin-top:0}
body.layout-vision .folio-meta .pill{background:rgba(255,255,255,.17);color:#fff;padding:3px 11px;border-radius:20px}
body.layout-vision .folio-meta .pill-protected{background:rgba(210,153,34,.92);color:#1a1206;font-weight:600}
.hero-overlay{display:none}
.hero-content,.hero-text{position:relative;padding:0 28px 32px;z-index:2}
.hero-content h1,.hero-text h1{font-size:38px;font-weight:700;letter-spacing:-.5px}
.hero-content p,.hero-text p{color:var(--text-dim);margin-top:8px;font-size:15px;max-width:600px}
.pagetitle{padding:8px 0 28px}
main.main--after-hero{padding-top:12px}
main.main--after-hero.main--no-gap{padding-top:0}
main.main--after-hero>.pagetitle:first-child{padding-top:0}
.pagetitle h1{font-size:38px;font-weight:700;letter-spacing:-.5px}
.pagetitle p{color:var(--text-dim);margin-top:8px;font-size:15px;max-width:600px}

/* CONTENU */
main{max-width:1400px;margin:0 auto;padding:28px}

/* SECTIONS */
.section,.season{margin-bottom:42px}
.section-head,.season-head{display:flex;align-items:baseline;gap:14px;margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.section-head h2,.season-head h2{font-size:24px;font-weight:600}
.section-head .count,.season-head .count{color:var(--text-dim);font-size:13px}
.freetext{max-width:760px;margin:0 0 42px}
.freetext h3{font-size:20px;font-weight:600;margin-bottom:10px}
.freetext-body{color:var(--text-dim);font-size:15px;line-height:1.7}
.freetext-body p{margin-bottom:8px}
.freetext-body a{color:var(--accent)}
.freetext-body strong{color:var(--text);font-weight:600}
.slideshow{position:relative;overflow:hidden;margin-bottom:32px}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease}
.slide.active{opacity:1}
.textimage{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-bottom:32px;min-height:300px;border-radius:var(--radius);overflow:hidden}
.textimage.ti-right{direction:rtl}.textimage.ti-right>*{direction:ltr}
.ti-img{background-size:cover;background-position:center;min-height:300px}
.ti-text{display:flex;align-items:center;padding:32px 40px}
@media(max-width:700px){.textimage{grid-template-columns:1fr}.ti-img{min-height:200px}}
.video-block{margin-bottom:32px}
.quote-block{max-width:700px;margin:0 auto 32px;text-align:center;padding:24px 0}
.quote-block blockquote{font-size:20px;font-style:italic;line-height:1.6;color:var(--text);margin:0;padding:0 20px}
.quote-block blockquote::before{content:'"';font-size:48px;color:var(--accent);display:block;margin-bottom:-10px}
.quote-author{margin-top:14px;font-size:14px;color:var(--text-dim)}
.sep-line{display:flex;align-items:center}.sep-line hr{flex:1;border:0;border-top:1px solid var(--border)}
.sep-dots{display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:18px;letter-spacing:8px}
.fullimg{width:100%;border-radius:var(--radius);margin-bottom:42px;background-size:cover;background-position:center}
.fullimg-whole{display:block;width:100%;height:auto;border-radius:var(--radius);margin-bottom:42px}

/* LIENS / RÉSEAUX SOCIAUX */
.links-block{margin-bottom:42px}
.links-block h3{font-size:20px;font-weight:600;margin-bottom:14px}
.links-row{display:flex;flex-wrap:wrap;gap:12px}
.link-card{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 20px;transition:border-color .2s,transform .15s}
.link-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.link-icon{font-size:22px}
.link-label{font-size:14px;font-weight:500}

/* BLOC RECHERCHE */
.search-block{margin-bottom:42px}
.search-block-heading{font-size:20px;font-weight:600;margin-bottom:14px;color:var(--text)}
.search-block-form{display:flex;gap:8px;width:100%}
.search-block-input{flex:1;height:46px;padding:0 16px;font-size:15px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text)}
.search-block-input:focus{outline:none;border-color:var(--accent)}
.search-block-btn{height:46px;padding:0 24px;font-size:15px;font-weight:500;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);cursor:pointer;white-space:nowrap;transition:opacity .15s}
.search-block-btn:hover{opacity:.9}
@media(max-width:560px){
  .search-block-form{flex-direction:column;gap:12px}
  /* flex:none OBLIGATOIRE ici : le `flex:1` de la regle generale vaut
     flex-basis:0%, or flex-basis prime sur height sur l'AXE PRINCIPAL. En colonne
     l'axe principal devient le vertical, donc height:48px etait ecrase et le champ
     retombait sur la hauteur de son texte (mesure : 14 px au lieu de 48). Le bouton
     ne porte aucun flex, d'ou l'asymetrie visible. Ne pas retirer flex:none. */
  .search-block-input{flex:none;width:100%;height:48px}
  .search-block-btn{width:100%;height:48px}
}

/* FOLIO GRID */
.folio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--grid-min),1fr));gap:var(--grid-gap)}
.folio-card,.folio{position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;aspect-ratio:3/2;background:var(--surface-2);display:block}
.folio-cover,.folio-thumb{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s ease}
.folio-card:hover .folio-cover,.folio:hover .folio-thumb{transform:scale(1.06)}
.folio-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,transparent 55%);
  display:flex;flex-direction:column;justify-content:flex-end;padding:14px;color:#fff}
.folio-overlay h3{font-size:15px;font-weight:600;line-height:1.2;color:#fff}
.folio-meta{display:flex;gap:10px;margin-top:5px;font-size:11px;color:rgba(255,255,255,.7);align-items:center;flex-wrap:wrap}
.folio-meta .pill{background:rgba(255,255,255,.12);padding:1px 7px;border-radius:10px}

/* PHOTO GRID */
/* Grille type NetFolio : colonnes de largeur fixe, rangées de hauteur égale.
   Un paysage occupe 1 rangée, un portrait 2 rangées (+ le gap). Recadrage léger
   via object-fit:cover pour que les lignes soient parfaitement alignées. */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--grid-cell),1fr));
  grid-auto-rows:var(--grid-row);gap:var(--grid-gap);margin-bottom:65px}
.photo{position:relative;border-radius:8px;cursor:pointer;background:var(--surface-2);grid-row:span 1}
.photo.is-portrait{grid-row:span 2}
/* GRILLE DES FOLIOS VIDEO (build 230h) - voir le commentaire de public/folio.php.
   Colonnes etroites, une seule rangee pour tout le monde, et c'est l'HORIZONTALE
   qui s'etale sur deux colonnes. Sur 1128 px utiles : 7 colonnes de 154 px, donc
   une 16/9 en 316 x 185 (rapport 1,71, tres proche du 16/9 reel) et une 9/16 en
   154 x 185. Reservee aux folios `folio_type = 'video'` : aucune regle ci-dessus
   n'est modifiee, les folios photo et la recherche sont inchanges. */
.photo-grid--video{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.photo-grid--video .photo.is-wide{grid-column:span 2}
.photo:hover{z-index:20}
/* zone image (porte le recadrage + l'arrondi) */
.photo-media{position:absolute;inset:0;border-radius:8px;overflow:hidden}
.photo-media .photo-thumb{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.photo:hover .photo-media .photo-thumb{transform:scale(1.04)}
.photo-playicon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;
  border-radius:50%;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;
  font-size:20px;color:#fff;pointer-events:none;z-index:1;transition:opacity .2s}
.photo:hover .photo-playicon{opacity:0}
/* boutons d'action centrés sur l'image */
.photo-actions{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;gap:14px;
  opacity:0;transition:opacity .25s;z-index:4}
.photo:hover .photo-actions{opacity:1}
.pa-wrap{position:relative;display:inline-flex}
.pa-btn{width:46px;height:46px;border-radius:50%;border:2px solid rgba(255,255,255,.85);background:rgba(0,0,0,.25);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s}
.pa-btn:hover{background:var(--accent);border-color:var(--accent);color:#04181b}
.lb-active{background:var(--accent) !important;border-color:var(--accent) !important;color:#04181b !important}
.pa-tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;
  background:#000;color:#fff;font-size:11px;padding:4px 8px;border-radius:5px;opacity:0;pointer-events:none;
  transition:opacity .15s;z-index:10}
.pa-btn:hover + .pa-tip{opacity:1}
/* panneau info : se déploie SOUS l'image, en superposition (ne décale pas les voisines) */
.photo-info{position:absolute;left:0;right:0;top:100%;padding:10px 14px 12px;z-index:3;color:#fff;
  background:rgba(8,10,14,.96);border-radius:0 0 8px 8px;opacity:0;pointer-events:none;transition:opacity .25s}
.photo:hover .photo-info{opacity:1}
.photo-info .pi-title{font-size:13px;font-weight:600;line-height:1.25;color:#fff;margin-bottom:6px}
.photo-info .pi-row{font-size:11px;color:rgba(255,255,255,.78);padding:3px 0;
  border-bottom:1px solid rgba(255,255,255,.12)}

.back-link{display:inline-flex;align-items:center;gap:8px;color:var(--text-dim);font-size:14px;margin-bottom:18px;cursor:pointer}
.breadcrumb{font-size:13px;color:var(--text-dim);margin-bottom:18px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.breadcrumb a{color:var(--text-dim);text-decoration:none}.breadcrumb a:hover{color:var(--accent)}
.bc-sep{color:var(--accent);font-size:14px;opacity:.6;margin:0 2px}
.bc-current{color:var(--text);font-weight:500}
.back-link:hover{color:var(--accent)}

/* VIEWER */
.viewer{position:fixed;inset:0;z-index:100;background:rgba(8,11,15,.97);display:none;flex-direction:column}
.viewer.open{display:flex}
.viewer-top{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 20px}
.vtop-btn{width:38px;height:38px;border-radius:8px;background:rgba(255,255,255,.07);display:flex;align-items:center;
  justify-content:center;font-size:16px;cursor:pointer;transition:background .2s;color:var(--text);border:none}
.vtop-btn:hover{background:var(--accent);color:#04181b}
.viewer-body{flex:1;display:flex;min-height:0;padding:0 16px 16px;gap:18px}
.viewer-stage{flex:1;display:flex;align-items:center;justify-content:center;position:relative;min-width:0}
.img-wrap{position:relative;display:inline-block;line-height:0}
.img-wrap img{max-width:100%;max-height:82vh;border-radius:6px;display:block}
/* La VIDEO de la visionneuse est bridee ICI, et non plus par un style en ligne pose
   par le script (retire au build 231h). POURQUOI ce deplacement : un style en ligne
   l'emporte sur toute regle de feuille de style, le plafond mobile plus bas dans ce
   fichier n'aurait donc jamais pu s'appliquer. Constat sur telephone : une video
   VERTICALE recouvrait le panneau d'informations, qui passe SOUS le media en dessous
   de 760 px de large. Defaut PREEXISTANT, sans rapport avec la grille video du 230h :
   aucune regle ne visait la balise video, elle prenait sa hauteur naturelle. */
.img-wrap video{max-width:100%;max-height:82vh;border-radius:6px;display:block}
.viewer-wm{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:11px;color:rgba(255,255,255,.55);letter-spacing:2px;text-transform:uppercase;pointer-events:none}
.vnav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;transition:background .2s;border:none;color:var(--text)}
.vnav:hover{background:var(--accent);color:#04181b}
.vnav.prev{left:8px}.vnav.next{right:8px}
/* panneau latéral riche : zone d'infos scrollable + barre d'actions épinglée en bas */
.viewer-side{width:300px;flex-shrink:0;background:var(--surface);border-radius:var(--radius);align-self:center;max-height:82vh;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.vside-scroll{flex:1;overflow-y:auto;min-height:0;padding:20px 20px 8px}
.vside-pos{font-size:12px;color:var(--accent);font-weight:600;letter-spacing:1px}
.vside-origin{background:rgba(25,182,201,.10);border:1px solid rgba(25,182,201,.35);border-radius:8px;padding:8px 11px;margin:8px 0 6px}
.vside-origin:empty{display:none}
.vside-origin .vorigin-k{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.vside-origin .vorigin-link{color:var(--accent);text-decoration:none;font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:5px}
.vside-origin .vorigin-link:hover{text-decoration:underline}
.vside-title{font-size:16px;font-weight:600;margin:4px 0 16px}
.vside-row{display:flex;padding:7px 0;border-top:1px solid var(--border);font-size:12px;gap:10px}
.vside-row .k{color:var(--text-dim);width:62px;flex-shrink:0}
.vside-row .v{color:var(--text);flex:1}
.vside-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.vtag{background:var(--surface-2);padding:2px 8px;border-radius:10px;font-size:10.5px;color:var(--text-dim)}
.vtag-more{background:rgba(25,182,201,.14);color:var(--accent);padding:2px 9px;border-radius:10px;font-size:10.5px;font-weight:600;cursor:pointer;user-select:none}
.vtag-more:hover{background:rgba(25,182,201,.22)}
.vside-actions{flex-shrink:0;display:flex;flex-direction:column;gap:8px;padding:12px 20px;background:rgba(0,0,0,.18);border-top:1px solid var(--border)}

/* BOUTONS */
.btn{border:1px solid var(--border);background:var(--surface-2);color:var(--text);padding:10px 16px;border-radius:8px;
  font-size:13px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:all .2s}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);color:#04181b;border-color:var(--accent);font-weight:600}
.btn.primary:hover{filter:brightness(1.1)}
.btn.full{width:100%}
.btn.ghost{background:transparent}

/* FORMULAIRES */
.auth-wrap{max-width:480px;margin:40px auto;padding:0 20px}
.auth-wrap .panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:var(--text-dim);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:11px 13px;color:var(--text);font-size:14px;font-family:inherit}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field textarea{min-height:90px;resize:vertical}
.alert{border-radius:8px;padding:12px 14px;margin-bottom:18px;font-size:14px}
.alert.error{background:rgba(229,83,75,.12);border:1px solid rgba(229,83,75,.3);color:#f85149}
.alert.success{background:rgba(46,160,67,.12);border:1px solid rgba(46,160,67,.3);color:#3fb950}
.alert.info{background:rgba(25,182,201,.1);border:1px solid rgba(25,182,201,.3);color:var(--accent)}

/* ---------- Filtre par bateau des folios (build 301h, maquette v3 validée le 01/10) ----------
   Le menu natif n'avait AUCUN style hors mise en page Immersion : blanc et en police du
   système sur un site sombre. Il prend ici la police, les couleurs et les coins du site,
   avec une flèche dessinée par le site (couleur du thème). Texte à 13 px, comme son
   libellé et le compteur ; 16 px sur téléphone, sans quoi Safari iOS zoome la page au
   toucher. La liste qui se déroule reste celle du système, non habillable. */
.boat-filter{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 22px}
.boat-filter label{font-size:13px;color:var(--text-dim)}
.boat-filter .bf-select{position:relative;display:inline-block;min-width:280px;max-width:100%}
.boat-filter select{-webkit-appearance:none;appearance:none;width:100%;font:inherit;font-size:13px;line-height:1.3;
  color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:8px;
  padding:6px 36px 6px 12px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.boat-filter select:hover{border-color:var(--text-dim)}
.boat-filter select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(25,182,201,.22)}
.boat-filter select option{background:var(--surface);color:var(--text)}
.boat-filter .bf-select::after{content:"";position:absolute;right:14px;top:50%;width:6px;height:6px;margin-top:-4px;
  border-right:1.6px solid var(--text-dim);border-bottom:1.6px solid var(--text-dim);transform:rotate(45deg);pointer-events:none}
@media (max-width:640px){
  .boat-filter .bf-select{min-width:0;width:100%}
  .boat-filter select{font-size:16px}
}

/* INSCRIPTION — mise en page deux colonnes (register.php uniquement).
   Classe modificatrice : .auth-wrap reste à 480px pour login/contact/compte. */
.auth-wrap-wide{max-width:880px}
.reg-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px}
.reg-col-head{font-size:12px;color:var(--text-dim);letter-spacing:.02em;text-transform:uppercase;margin-bottom:14px}
.reg-name-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.reg-name-row .field{margin-bottom:16px}
.reg-hint{font-size:12px;color:var(--text-dim);margin-top:5px}
.reg-notif-box{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:18px}
.reg-foot{border-top:1px solid var(--border);margin-top:22px;padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.reg-foot p{margin:0}
/* Colonne unique sous 760px : l'ordre du flux HTML est conservé
   (informations puis alertes), conformément à la décision de cadrage. */
@media(max-width:760px){
  .reg-grid{grid-template-columns:1fr;gap:0}
  .auth-wrap-wide{max-width:480px}
}

/* PIED */
.site-footer{border-top:1px solid var(--border);padding:28px;text-align:center;color:var(--text-dim);font-size:13px;margin-top:40px}
.footer-custom{margin-bottom:12px}
.footer-logo{margin-bottom:8px}
.footer-logo img{max-height:48px;max-width:240px}
.footer-text{font-size:13px;line-height:1.6;color:var(--text-dim)}
.footer-legal{margin-top:10px;font-size:11px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.footer-legal a{color:var(--text-dim);transition:color .2s}
.footer-legal a:hover{color:var(--accent)}

/* RECHERCHE DROPDOWN NAV */
.search-drop{position:relative}
.search-drop>a{cursor:pointer}
.search-drop-panel{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:10px;z-index:100}
.search-drop-panel form{display:flex;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px;box-shadow:0 8px 24px rgba(0,0,0,.4);white-space:nowrap}
.search-drop-panel input{background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:8px 14px;color:var(--text);font-size:14px;font-family:inherit;width:260px}
.search-drop-panel input::placeholder{color:var(--text-dim)}
.search-drop-panel input:focus{outline:none;border-color:var(--accent)}
.search-drop-panel button{background:var(--accent);color:#04181b;border:none;border-radius:6px;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer}
.search-drop:hover .search-drop-panel{display:block}
/* Pastille de recherche (mise en avant, suit l'accent du site) */
.site-nav a.search-trigger{display:inline-flex;align-items:center;gap:7px;color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, transparent);border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);padding:6px 15px;border-radius:20px;transition:background .2s,border-color .2s,color .2s}
.site-nav a.search-trigger:hover{color:var(--accent);background:color-mix(in srgb, var(--accent) 20%, transparent);border-color:color-mix(in srgb, var(--accent) 50%, transparent)}
.site-nav a.search-trigger.active{color:#04181b;background:var(--accent);border-color:var(--accent)}
.search-trigger i{font-size:15px}
/* Séparateur vertical avant Contact (zone actions) */
.nav-sep{width:1px;height:18px;background:var(--border);display:inline-block}
/* Contact en icône seule sur desktop (le libellé ne s'affiche qu'en mobile) */
.contact-icon .contact-label{display:none}
.contact-icon.active{color:var(--accent)}

.nav-toggle{display:none;background:none;border:none;color:var(--text);font-size:22px;cursor:pointer;padding:4px 8px}

@media(max-width:900px){
  .site-nav{gap:16px}
  .nav-actions{gap:10px}
  .btn-nav{padding:6px 12px;font-size:12px}
}
@media(max-width:700px){
  /* Header */
  .nav-toggle{display:block}
  .site-header{flex-wrap:wrap;padding:10px 16px;gap:8px}
  .site-header--logo-big{padding-left:16px}
  .site-header--logo-big .site-logo{position:static}
  .site-header--logo-big .site-logo img{max-height:48px}
  .site-header--logo-big + *{margin-top:0}
  .site-nav{order:3;width:100%;justify-content:center;gap:14px;padding-top:6px;border-top:1px solid var(--border);display:none}
  .site-nav.open{display:flex;flex-direction:column;align-items:center}
  .nav-actions{order:2;gap:8px;font-size:12px;display:none}
  .nav-actions.open{display:flex}
  .icon-btn{font-size:12px}
  .contact-icon .contact-label{display:inline}
  .nav-sep{display:none}

  /* Hero */
  .hero{height:220px}
  .hero-text{padding:0 16px 20px}
  .hero-text h1{font-size:24px}
  .hero-text p{font-size:13px}
  .pagetitle h1{font-size:24px}
  .pagetitle p{font-size:13px}

  /* Main */
  main{padding:16px}

  /* Grids */
  .folio-grid,.photo-grid{--grid-gap:6px}
  .folio-grid{--grid-min:140px}
  .photo-grid{--grid-cell:150px;--grid-row:110px}
  /* Folio video sur mobile : la rangee tombe a 110 px, donc la colonne doit suivre
     pour garder une 16/9 correcte sur deux colonnes (2 x 85 + 6 = 176, rapport 1,60). */
  .photo-grid--video{grid-template-columns:repeat(auto-fill,minmax(85px,1fr))}
  /* Finitions de la grille video sur mobile (build 231h). Une colonne fait 85 px,
     alors que deux boutons de 46 px avec 14 px d'ecart en reclament 106, et trois
     en reclament 166 : ils debordaient de la cellule et se retrouvaient rognes.
     Le nom du fichier, lui, s'affiche sur la largeur de la cellule, trop etroite
     pour lui. On reduit au lieu de masquer : l'information reste accessible.
     PORTEE : grille video sur mobile UNIQUEMENT, les folios photo sont intacts. */
  .photo-grid--video .photo-actions{gap:8px}
  .photo-grid--video .pa-btn{width:34px;height:34px;font-size:16px;border-width:1.5px}
  .photo-grid--video .photo-info{padding:8px 10px 10px}
  .photo-grid--video .photo-info .pi-title{font-size:12px;margin-bottom:4px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .photo-grid--video .photo-info .pi-row{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* Viewer */
  .viewer-body{flex-direction:column;padding:0 8px 8px}
  .viewer-side{width:100%;max-height:44vh;border-radius:8px 8px 0 0}
  .vside-scroll{padding:14px 14px 6px}
  .vside-actions{padding:10px 14px}
  .viewer-stage{min-height:40vh}
  /* Plafond du media abaisse sur mobile : la visionneuse passe en colonne et le
     panneau d'informations (.viewer-side) prend jusqu'a 44vh. Laisser le media a
     82vh faisait 126vh au total, d'ou le recouvrement du panneau par une video
     verticale. 48 + 44 tiennent dans l'ecran. S'applique a l'image comme a la
     video : le cas se poserait a l'identique sur une photo tres verticale. */
  .img-wrap img,.img-wrap video{max-height:48vh}
  .vnav{width:36px;height:36px;font-size:18px}
  .vside-title{font-size:14px}
  .vside-row{font-size:11px}

  /* Auth pages */
  .auth-wrap{padding:0 12px}

  /* Footer */
  .site-footer{padding:16px;font-size:11px}
}

/* ---------- Bouton « Charger plus » (pagination folio à dégradation sûre) ---------- */
/* Bouton flottant « Derniers médias » : saute en bas du folio (scroll infini).
   Empilé AU-DESSUS de la bouée d'aide FAQ (elle-même à right:22px;bottom:22px,
   58px de haut → occupe jusqu'à ~80px du bas). On se place à bottom:92px pour
   ne jamais la chevaucher. z-index aligné sur celui de la bouée par sûreté. */
.folio-jump{position:fixed;right:22px;bottom:92px;z-index:9997;display:inline-flex;align-items:center;gap:7px;
  background:rgba(25,182,201,.92);color:#04181b;border:none;border-radius:22px;
  padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.4);transition:opacity .25s,transform .15s,background .2s}
.folio-jump:hover{background:var(--accent);transform:translateY(-1px)}
.folio-jump[hidden]{display:none} /* sinon inline-flex écrase l'attribut hidden → bouton jamais masqué */
.folio-jump i{font-size:16px}
@media (max-width:640px){.folio-jump{right:14px;bottom:84px;padding:8px 14px;font-size:12px}}

/* Message vidéo 4K non lisible en ligne (folio : lecteur remplacé par ce bloc
   quand la vidéo est en haute résolution sans version web transcodée). */
.v4k-msg{position:relative;width:100%;max-width:520px;aspect-ratio:16/10;
  background:#0d1117 center/cover no-repeat;border:1px solid var(--border);
  border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.v4k-msg::before{content:'';position:absolute;inset:0;background:rgba(13,17,23,.78)}
.v4k-inner{position:relative;z-index:1;text-align:center;padding:28px 26px;max-width:400px}
.v4k-ic{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;
  border-radius:50%;background:rgba(210,153,34,.14);border:1px solid rgba(210,153,34,.4);
  color:#d29922;font-size:28px;margin-bottom:18px}
.v4k-title{color:var(--text);font-size:15px;font-weight:500;line-height:1.55;margin-bottom:8px}
.v4k-sub{color:var(--text-dim);font-size:13px;line-height:1.55}

/* =====================================================================
   ESPACE TEAM (public/onboard/espace-team.php) - build 201h
   Ces règles vivaient dans un <style> en dur DANS le PHP, avec un
   vocabulaire parallèle (.team-hero/.media-card/.media-thumb) inconnu du
   reste du front. Rapatriées ici et alignées sur les jetons du site.
   Aucune de ces classes n'est utilisée par un autre fichier (grep vérifié).
   ===================================================================== */

/* Bascule d'équipe (affichée seulement si le validateur suit plusieurs bateaux) */
.team-switch{display:inline-flex;gap:4px;padding:4px;background:var(--surface);border:1px solid var(--border);
  border-radius:24px;margin-bottom:20px;flex-wrap:wrap}
.team-switch a{padding:7px 16px;border-radius:20px;font-size:13px;font-weight:600;color:var(--text-dim);transition:color .2s,background .2s}
.team-switch a:hover{color:var(--text)}
.team-switch a.active{background:var(--accent);color:#04181b}

/* En-tête de page : reprend le gabarit .pagetitle du reste du front */
.tm-eyebrow{display:block;color:var(--accent);font-size:12px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:12px}
.tm-sub{color:var(--text-dim);margin-top:10px;font-size:15px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tm-sub .tm-dot{opacity:.4}
.tm-sub i{font-size:15px;vertical-align:-2px}
.team-help{display:flex;gap:9px;align-items:flex-start;margin-top:16px;padding-left:13px;
  border-left:2px solid var(--accent);color:var(--text-dim);font-size:13.5px;line-height:1.55;max-width:660px}
.team-help i{color:var(--accent);font-size:16px;margin-top:1px;flex:0 0 auto}

/* Message de retour après validation/refus (PRG) */
.team-flash{margin-bottom:18px;padding:11px 15px;border-radius:8px;font-size:13.5px}
.team-flash.flash-success{background:rgba(34,197,94,.12);color:#6ee7a0;border:1px solid rgba(34,197,94,.3)}
.team-flash.flash-rejected{background:rgba(239,68,68,.10);color:#fca5a5;border:1px solid rgba(239,68,68,.3)}
.team-flash.flash-error{background:rgba(234,179,8,.12);color:#f6d365;border:1px solid rgba(234,179,8,.3)}

/* Onglets : SEULE source des compteurs (la rangée de stats du bandeau est supprimée) */
.team-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:22px}
.team-tab{padding:11px 18px;font-size:14px;color:var(--text-dim);border-bottom:2px solid transparent;
  display:flex;align-items:center;gap:8px;transition:color .2s}
.team-tab:hover{color:var(--text)}
.team-tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:700}
.team-tab .tab-count{background:var(--surface-2);border-radius:10px;padding:1px 8px;font-size:11.5px;font-weight:600}
.team-tab.active .tab-count{background:rgba(25,182,201,.2);color:var(--accent)}

/* Grille de médias. Format de vignette FIXE en 3/2 : la table onboard_uploads
   ne porte ni width ni height, la grille portrait/paysage du folio n'est donc
   pas transposable ici sans un getimagesize() par vignette. */
.tm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px}
.tm-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .2s}
.tm-card:hover{border-color:rgba(255,255,255,.18)}
/* .tm-media est un <button> : réinitialisation, plus focus clavier visible */
.tm-media{position:relative;display:block;width:100%;padding:0;border:none;aspect-ratio:3/2;
  background:var(--surface-2);overflow:hidden;cursor:zoom-in;font:inherit;color:inherit}
.tm-media img{width:100%;height:100%;object-fit:cover;display:block}
.tm-media:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tm-zoom{position:absolute;inset:0;background:rgba(8,10,14,.35);display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s}
.tm-media:hover .tm-zoom{opacity:1}
.tm-zoom i{width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.5);border:2px solid rgba(255,255,255,.85);
  color:#fff;font-size:19px;display:flex;align-items:center;justify-content:center}
.tm-vid,.tm-noimg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;
  align-items:center;justify-content:center}
.tm-vid{width:52px;height:52px;border-radius:50%;background:rgba(0,0,0,.55);font-size:22px;color:#fff}
.tm-noimg{font-size:34px;color:var(--text-dim);opacity:.55}

/* Pastille de statut, en haut à GAUCHE : à droite elle recouvrait souvent le bateau */
.tm-pill{position:absolute;top:10px;left:10px;font-size:11px;font-weight:700;padding:4px 11px;border-radius:20px;
  display:inline-flex;align-items:center;gap:5px;backdrop-filter:blur(6px)}
.tm-pill i{font-size:13px}
.tm-pill-pending{background:rgba(234,179,8,.22);color:#f6d365;border:1px solid rgba(234,179,8,.45)}
.tm-pill-approved{background:rgba(34,197,94,.20);color:#6ee7a0;border:1px solid rgba(34,197,94,.45)}
.tm-pill-rejected{background:rgba(239,68,68,.20);color:#fca5a5;border:1px solid rgba(239,68,68,.45)}

.tm-body{padding:12px 14px 0;flex:1}
.tm-name{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-meta{font-size:12px;color:var(--text-dim);margin-top:4px}
.tm-state{display:flex;gap:6px;align-items:center;margin-top:9px;font-size:12px;font-weight:600}
.tm-state i{font-size:14px;flex:0 0 auto}
.tm-state-deadline{color:#eab308}
.tm-state-wait{color:var(--text-dim)}
/* Motif du refus : la colonne reject_reason était écrite mais jamais affichée */
.tm-reason{margin-top:9px;padding:8px 10px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.22);
  border-radius:7px;font-size:12px;color:#fca5a5;line-height:1.45}
.tm-reason b{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.8;margin-bottom:2px;font-weight:700}

/* Pied de carte : décider sans ouvrir la visionneuse. Boutons PERMANENTS
   (pas au survol) : la cible principale est le téléphone, depuis le bord. */
.tm-foot{display:flex;gap:8px;align-items:center;padding:12px 14px}
.tm-btn{flex:1;border:none;border-radius:8px;padding:10px 12px;font-size:13px;font-weight:700;cursor:pointer;
  font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:filter .2s,background .2s}
.tm-ok{background:var(--accent);color:#04181b}
.tm-ok:hover{filter:brightness(1.1)}
.tm-no{background:transparent;color:#fca5a5;border:1px solid rgba(239,68,68,.5)}
.tm-no:hover{background:rgba(239,68,68,.12)}
.tm-icon{flex:0 0 38px;height:38px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border);
  color:var(--text-dim);display:inline-flex;align-items:center;justify-content:center;font-size:17px;
  transition:color .2s,border-color .2s}
.tm-icon:hover{color:var(--accent);border-color:var(--accent)}
.tm-dl{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-dim);font-weight:600;transition:color .2s}
.tm-dl:hover{color:var(--accent)}

/* États vides (onglet sans média, compte sans team) */
.tm-empty{padding:70px 24px;text-align:center;border:1px dashed var(--border);border-radius:12px}
.tm-empty i{font-size:34px;color:var(--text-dim);opacity:.5}
.tm-empty p{margin-top:14px;color:var(--text-dim);font-size:14px}

/* Visionneuse (reprise de l'ancien <style>, styles JS sortis en classes) */
.ob-viewer{display:none;position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:200;align-items:center;justify-content:center;flex-direction:column}
.ob-viewer.open{display:flex}
.ob-viewer .close{position:absolute;top:16px;right:20px;color:#fff;font-size:26px;cursor:pointer;z-index:3;line-height:1}
.ob-viewer .content{max-width:90vw;max-height:80vh;text-align:center}
.ob-viewer .content img,.ob-viewer .content video{max-width:90vw;max-height:70vh;border-radius:8px}
.ob-viewer .info{color:#94a3b8;font-size:13px;margin-top:10px;text-align:center;padding:0 16px}
.obv-msg{max-width:440px;text-align:center;padding:32px 22px}
.obv-ic{font-size:34px;line-height:1}
.obv-ic-wait{color:#eab308}
.obv-ic-fail{color:#ef4444}
.obv-title{font-size:15px;font-weight:600;margin-top:10px}
.obv-title-wait{color:#eab308}
.obv-title-fail{color:#ef4444}
.obv-text{font-size:13px;color:var(--text-dim);margin-top:6px;line-height:1.55}
.obv-en{font-size:12px;opacity:.75;font-style:italic}
.obv-dl{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:10px 20px;background:var(--surface);
  border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px}
.obv-dl:hover{border-color:var(--accent);color:var(--accent)}
/* Actions de validation dans la visionneuse */
.ob-actions{margin-top:14px;width:100%;max-width:420px;padding:0 16px}
.ob-action-btns{display:flex;gap:10px;justify-content:center}
.ob-btn{border:none;border-radius:7px;padding:10px 18px;font-size:13px;font-weight:600;cursor:pointer;
  font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.ob-ok{background:var(--accent);color:#04181b}
.ob-no{background:rgba(239,68,68,.9);color:#fff}
.ob-cancel{background:#2a323d;color:#e6edf3}
.ob-reject{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.3);border-radius:8px;padding:12px;text-align:left}
.ob-reject label{display:block;font-size:12px;color:#ef9b95;margin-bottom:6px}
.ob-reject textarea{width:100%;box-sizing:border-box;background:#1c232c;border:1px solid var(--border);border-radius:6px;
  color:#e6edf3;font-size:13px;padding:8px;resize:vertical;min-height:54px;font-family:inherit}
.ob-reject-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}

/* La page est consultée depuis le bord, au téléphone : l'ancien bloc n'avait
   AUCUNE media query. Cibles tactiles portées à 44 px. */
@media (max-width:640px){
  .tm-eyebrow{font-size:11px;margin-bottom:10px}
  .tm-sub{font-size:13.5px;gap:7px}
  .team-help{font-size:13px}
  .team-tabs{gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .team-tab{padding:11px 13px;font-size:13px;white-space:nowrap}
  .tm-grid{grid-template-columns:1fr;gap:14px}
  .tm-btn{padding:13px 12px;font-size:14px}
  .tm-icon{flex:0 0 44px;height:44px}
  .tm-empty{padding:48px 18px}
  .ob-viewer .close{top:10px;right:14px}
}

/* =====================================================================
   PAGE DE VALIDATION ONBOARD (public/onboard/validate.php) - build 202h
   Avant ce build, cette page ne chargeait PAS cette feuille de style : elle
   vivait sur sa propre palette de 19 couleurs en dur, sa police système, sans
   aucune règle responsive et sans jamais recevoir l'accent de la course.
   Elle réutilise ici `.tm-btn/.tm-ok/.tm-no` (boutons de décision, identiques
   aux cartes de l'espace team) et `.obv-*` (messages d'état vidéo).
   ===================================================================== */

/* En-tête : logo de la course, pour reconnaître l'expéditeur du mail */
.ov-hdr{display:flex;align-items:center;gap:14px;padding:16px 24px;background:rgba(14,18,23,.85);
  border-bottom:1px solid var(--border)}
.ov-logo{display:flex;align-items:center;font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:17px}
.ov-logo img{max-height:34px;max-width:180px;display:block}
.ov-hdr-t{font-size:12px;color:var(--text-dim);margin-left:auto;text-align:right;line-height:1.4}
.ov-hdr-t b{display:block;color:var(--text);font-size:13px;font-weight:600}

/* Colonne étroite CONSERVÉE : c'est le bon format pour une page ouverte depuis un mail */
.ov-wrap{max-width:640px;margin:0 auto;padding:26px 24px 48px}

.ov-eyebrow{display:block;color:var(--accent);font-size:11.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:10px}
.ov-title{font-size:30px;font-weight:800;letter-spacing:-.4px;line-height:1.08}
.ov-sub{color:var(--text-dim);font-size:14px;margin-top:8px;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.ov-sub .ov-d{opacity:.4}
.ov-sub i{font-size:15px;vertical-align:-2px}

/* Aperçu. Plafond RELATIF (70vh) au lieu des 400 px FIXES d'avant ce build :
   une vidéo verticale passe d'environ 225 à 354 px de large. */
.ov-preview{margin-top:22px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;text-align:center;position:relative}
.ov-preview img,.ov-preview video{display:block;margin:0 auto;max-width:100%;max-height:70vh}
/* Les messages d'état vidéo réutilisent `.obv-*` de la visionneuse ; ils sont centrés
   par flex là-bas, il faut donc les centrer explicitement ICI. Portée locale : la
   visionneuse de l'espace team n'est pas touchée. */
.ov-preview .obv-msg{margin-left:auto;margin-right:auto}
.ov-pill{position:absolute;top:12px;left:12px;font-size:11px;font-weight:700;padding:4px 11px;border-radius:20px;
  display:inline-flex;align-items:center;gap:5px;backdrop-filter:blur(6px);z-index:1;
  background:rgba(234,179,8,.22);color:#f6d365;border:1px solid rgba(234,179,8,.45)}
.ov-pill i{font-size:13px}
.ov-orig{border-top:1px solid var(--border);padding:12px;background:rgba(0,0,0,.25)}
.ov-orig a{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:8px;color:var(--text-dim);font-size:12.5px;font-weight:600}
.ov-orig a:hover{color:var(--accent);border-color:var(--accent)}
.ov-orig .ov-en{display:block;font-size:11px;color:var(--text-dim);opacity:.7;margin-top:7px;font-style:italic}

/* Informations : liste lisible au lieu du paragraphe à tirets cadratins */
.ov-meta{margin-top:18px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.ov-row{display:flex;gap:14px;padding:10px 15px;font-size:13px;border-bottom:1px solid var(--border)}
.ov-row:last-child{border-bottom:none}
.ov-k{flex:0 0 108px;color:var(--text-dim)}
.ov-v{color:var(--text);font-weight:500;word-break:break-word}

/* Compte à rebours : resserré, avec l'heure d'échéance en clair */
.ov-count{margin-top:18px;display:flex;align-items:center;gap:14px;padding:14px 16px;
  background:rgba(234,179,8,.08);border:1px solid rgba(234,179,8,.28);border-radius:var(--radius)}
.ov-count>i{font-size:22px;color:#eab308;flex:0 0 auto}
.ov-time{font-family:'Archivo',system-ui,sans-serif;font-size:26px;font-weight:700;color:#eab308;
  font-variant-numeric:tabular-nums;line-height:1;flex:0 0 auto}
.ov-cl{font-size:12.5px;color:var(--text-dim);line-height:1.45}
.ov-cl b{color:#eab308;font-weight:600}

.ov-err{margin-top:16px;padding:11px 14px;border-radius:var(--radius);font-size:13px;
  background:rgba(239,68,68,.10);border:1px solid rgba(239,68,68,.35);color:#fca5a5;
  display:flex;gap:9px;align-items:center}
.ov-err i{font-size:17px;flex:0 0 auto}

/* Décision. Les boutons sont ceux de l'espace team, seule la taille est reprise
   ici (page de décision unique : la cible doit être plus généreuse). */
.ov-actions{display:flex;gap:10px;margin-top:20px}
.ov-actions .ov-half{flex:1;display:flex}
.ov-actions .tm-btn{padding:14px 12px;font-size:14.5px}

/* Encart de refus : motif OBLIGATOIRE depuis ce build */
.ov-reject{margin-top:14px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.3);
  border-radius:var(--radius);padding:14px}
.ov-reject label{display:block;font-size:12.5px;color:#fca5a5;margin-bottom:7px;font-weight:600}
.ov-reject textarea{width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:7px;
  color:var(--text);font-size:13.5px;padding:10px;resize:vertical;min-height:64px;font-family:inherit}
.ov-req{display:block;font-size:11.5px;color:var(--text-dim);margin-top:7px}
.ov-rej-act{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}
.ov-btn-s{border:none;border-radius:7px;padding:10px 18px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.ov-cancel{background:var(--surface-2);color:var(--text);border:1px solid var(--border)}
.ov-confirm{background:#dc2626;color:#fff}

/* Renvoi vers l'espace team (build 200h, conservé sur le fond) */
.ov-hint{margin-top:22px;background:color-mix(in srgb,var(--accent) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);border-radius:var(--radius);padding:18px 20px}
.ov-hint-h{font-size:14px;font-weight:700;display:flex;gap:9px;align-items:flex-start}
.ov-hint-h i{color:var(--accent);font-size:17px;margin-top:1px;flex:0 0 auto}
.ov-hint-fr{font-size:13px;color:var(--text-dim);margin-top:8px;line-height:1.55}
.ov-hint-en{font-size:12px;color:var(--text-dim);opacity:.72;margin-top:6px;line-height:1.5;font-style:italic}
.ov-hint a{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:10px 18px;background:var(--accent);
  color:#04181b;border-radius:8px;font-size:13px;font-weight:700}
.ov-hint a:hover{filter:brightness(1.1)}
.ov-hint-note{font-size:11px;color:var(--text-dim);opacity:.75;margin-top:9px}

/* Issues après décision. Les deux fonds CLAIRS d'avant ce build (#dcfce7, #fef2f2)
   dans une page sombre disparaissent. */
.ov-done{margin-top:22px;text-align:center;padding:30px 22px;border:1px solid var(--border);border-radius:var(--radius)}
.ov-done-ic{width:54px;height:54px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:27px}
.ov-done-ok .ov-done-ic{background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.4);color:#6ee7a0}
.ov-done-auto .ov-done-ic{background:rgba(234,179,8,.14);border:1px solid rgba(234,179,8,.4);color:#f6d365}
.ov-done-no .ov-done-ic{background:rgba(239,68,68,.14);border:1px solid rgba(239,68,68,.4);color:#fca5a5}
.ov-done-t{font-size:17px;font-weight:700;margin-top:14px}
.ov-done-ok .ov-done-t{color:#6ee7a0}
.ov-done-auto .ov-done-t{color:#f6d365}
.ov-done-no .ov-done-t{color:#fca5a5}
.ov-done-w{font-size:12.5px;color:var(--text-dim);margin-top:8px}
.ov-reason{margin-top:16px;text-align:left;padding:11px 13px;background:rgba(239,68,68,.08);
  border:1px solid rgba(239,68,68,.22);border-radius:8px;font-size:13px;color:#fca5a5;line-height:1.5}
.ov-reason b{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.8;margin-bottom:3px;font-weight:700}

/* Aucune règle responsive n'existait sur cette page avant ce build. */
@media (max-width:640px){
  .ov-hdr{padding:13px 16px;gap:10px}
  .ov-logo{font-size:15px}
  .ov-hdr-t{font-size:11px}
  .ov-wrap{padding:20px 16px 40px}
  .ov-title{font-size:23px}
  .ov-sub{font-size:13px;gap:7px}
  .ov-actions{flex-direction:column;gap:9px}
  .ov-actions .tm-btn{padding:15px 12px;font-size:15px}
  .ov-count{gap:11px;padding:13px 14px}
  .ov-time{font-size:23px}
  .ov-row{font-size:12.5px;gap:10px}
  .ov-k{flex:0 0 88px}
}

/* =====================================================================
   PAGE D'UN ENVOI ONBOARD (public/onboard/lot.php) - build 305h
   Maquette validée le 01/10/2026 (maquette-notification-groupee.html).
   Réutilise l'en-tête, le titre et le compte à rebours `.ov-*` de la page
   de validation ; les classes `.lt-*` ne portent que la liste. Couleurs
   d'état reprises de `.ov-done-*` (mêmes teintes, mêmes rôles).
   `.lt-back` est aussi employée par validate.php (lien de retour).
   ===================================================================== */
.lt-back{display:flex;align-items:center;gap:7px;padding:10px 24px;font-size:13px;font-weight:600;color:var(--accent);
  border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.lt-back span{margin-left:auto;font-size:11.5px;font-weight:500;color:var(--text-dim)}
.lt-sec{margin-top:24px;display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-bottom:8px;border-bottom:1px solid var(--border)}
.lt-sec h2{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.lt-sec span{font-size:12px;color:var(--text-dim);white-space:nowrap}
.lt-help{font-size:12.5px;color:var(--text-dim);margin-top:10px}
.lt-help-en{font-size:12px;color:var(--text-dim);opacity:.72;margin-top:3px;font-style:italic}
.lt-list{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.lt-it{display:flex;align-items:center;gap:8px;padding:8px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius)}
.lt-it:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.lt-done{opacity:.62}
.lt-link{flex:1;min-width:0;display:flex;align-items:center;gap:12px;color:inherit}
.lt-th{flex:0 0 64px;height:64px;border-radius:7px;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);font-size:24px;color:var(--text-dim)}
.lt-th img{width:100%;height:100%;object-fit:cover;display:block}
.lt-mid{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.lt-fn{font-size:13px;font-weight:700;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lt-fm{font-size:11.5px;color:var(--text-dim);margin-top:2px}
.lt-st{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:20px;margin-top:5px}
.lt-st i{font-size:12px}
.st-wait{background:rgba(234,179,8,.16);color:#f6d365;border:1px solid rgba(234,179,8,.38)}
.st-ok{background:rgba(34,197,94,.14);color:#6ee7a0;border:1px solid rgba(34,197,94,.38)}
.st-no,.st-fail{background:rgba(239,68,68,.14);color:#fca5a5;border:1px solid rgba(239,68,68,.38)}
.st-auto{background:rgba(234,179,8,.10);color:#f6d365;border:1px solid rgba(234,179,8,.28)}
.st-prep{background:transparent;color:var(--text-dim);border:1px dashed rgba(255,255,255,.18)}
.lt-due{font-size:11px;color:var(--text-dim);margin-top:3px}
.lt-ch{flex:0 0 auto;font-size:18px;color:var(--text-dim)}
.lt-dl{flex:0 0 auto;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:62px;
  padding:7px 4px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  font-size:10px;font-weight:600;line-height:1.2;text-align:center}
.lt-dl i{font-size:18px;color:var(--accent)}
.lt-dl:hover{border-color:var(--accent)}
.lt-foot{margin-top:22px;font-size:11.5px;color:var(--text-dim);line-height:1.5;padding:11px 13px;
  border:1px solid var(--border);border-radius:var(--radius)}
.lt-foot i{color:var(--accent);margin-right:4px;vertical-align:-2px}
@media (max-width:640px){
  .lt-back{padding:10px 16px}
}

/* =====================================================================
   PAGE D'ENVOI DU SKIPPER (public/onboard/index.php) - build 202h
   Avant ce build, 93 lignes de CSS vivaient dans le PHP, sur une palette de
   20 couleurs en dur et une police système. L'accent du site y était injecté
   11 fois MAIS 10 halos et bordures restaient en cyan écrit en dur : sur un
   site ambre, icône ambre dans un halo cyan.
   ⚠️ Les noms de classes générés par le SCRIPT sont conservés au caractère
   près (`file`, `ic`, `name`, `size`, `fbar`, `fbar-fill`, `fstatus`, `s-*`,
   `active`, `over`, `sending`, `spin`) et scopés sous `.ou-card` pour ne
   jamais entrer en collision avec le reste du front.
   ===================================================================== */

.ou-body{min-height:100vh}
.ou-page{display:flex;flex-direction:column;align-items:center;padding:28px 16px}
.ou-card{width:100%;max-width:480px;background:var(--surface);border:1px solid var(--border);
  border-radius:14px;overflow:hidden}

/* En-tête (variante A) : nom ou logo de la course, puis le bateau et son identité.
   Le badge à icône de voilier générique, identique pour tous les bateaux, est retiré. */
.ou-hdr{padding:18px 20px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.ou-hdr-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ou-site{font-family:'Archivo',system-ui,sans-serif;font-size:13px;font-weight:700;color:var(--text-dim);
  letter-spacing:.02em;text-transform:uppercase;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ou-site img{max-height:28px;max-width:150px;display:block;text-transform:none}
.ou-tag{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);flex:0 0 auto}
.ou-boat{font-family:'Archivo',system-ui,sans-serif;font-size:24px;font-weight:800;line-height:1.1;margin-top:12px}
.ou-id{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:6px;font-size:12.5px;color:var(--text-dim)}
.ou-id .ou-d{opacity:.4}
.ou-id i{font-size:14px;vertical-align:-2px}

.ou-wrap{padding:22px 20px}
.ou-footer{text-align:center;padding:16px;color:var(--text-dim);opacity:.65;font-size:11px}

/* Bandeau de reprise. L'information (noms, pourcentages, consigne de redéposer)
   existait DÉJÀ : seule la mise en forme change, une ligne par fichier au lieu
   d'une phrase à virgules illisible dès 3 fichiers sur un téléphone. */
.ou-card .resume{background:rgba(234,179,8,.08);border:1px solid rgba(234,179,8,.28);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:18px;font-size:13px;color:#f6d365;display:flex;align-items:flex-start;gap:11px;line-height:1.5}
.ou-card .resume>i{font-size:20px;flex-shrink:0;margin-top:1px}
.ou-card .resume-body{min-width:0;flex:1}
.ou-card .resume-t{font-weight:700;font-size:13.5px}
.ou-card .resume-note{color:var(--text-dim);font-size:12.5px;margin-top:8px;line-height:1.5}
.ou-card .rz-list{list-style:none;margin-top:9px;display:flex;flex-direction:column;gap:6px}
.ou-card .rz-list li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#f6d365}
.ou-card .rz-list .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ou-card .rz-list .bar{flex:0 0 54px;height:4px;border-radius:3px;background:rgba(255,255,255,.10);overflow:hidden}
.ou-card .rz-list .bar span{display:block;height:100%;background:#eab308;border-radius:3px}
.ou-card .rz-list .pc{flex:0 0 40px;text-align:right;font-variant-numeric:tabular-nums;font-weight:700}

/* Zone de dépôt. Tous les halos dérivent désormais de l'accent du site. */
.ou-card .drop{border:2px dashed color-mix(in srgb,var(--accent) 35%,transparent);border-radius:12px;
  padding:36px 20px;text-align:center;cursor:pointer;transition:border-color .25s,background .25s;
  background:color-mix(in srgb,var(--accent) 4%,transparent)}
.ou-card .drop:hover,.ou-card .drop.over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent)}
.ou-card .drop.over .drop-icon{transform:scale(1.12)}
.ou-card .drop-icon{display:inline-flex;align-items:center;justify-content:center;width:62px;height:62px;
  border-radius:50%;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);
  font-size:30px;margin-bottom:14px;transition:transform .2s}
.ou-card .drop-main{font-family:'Archivo',system-ui,sans-serif;color:var(--text);font-size:16px;font-weight:700}
.ou-card .drop-hint{margin-top:7px;font-size:13px;color:var(--text-dim);line-height:1.5}
.ou-card input[type=file]{display:none}

/* Badges de format, avec la limite de taille (valeur déjà chargée, jamais montrée) */
.ou-card .badges{display:flex;gap:8px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.ou-card .badges span{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);
  color:var(--text-dim);font-size:11px;padding:6px 11px;border-radius:8px;border:1px solid var(--border)}
.ou-card .badges span i{color:var(--accent)}

/* Progression globale */
.ou-card .global-progress{margin-top:20px;background:var(--surface-2);border-radius:var(--radius);
  padding:16px 18px;border:1px solid var(--border)}
.ou-card .gp-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px;gap:10px}
.ou-card .gp-title{font-size:14px;font-weight:700}
.ou-card .gp-count{font-size:13px;color:var(--text-dim);flex:0 0 auto}
.ou-card .gp-bar{height:9px;background:var(--bg);border-radius:5px;overflow:hidden;margin-bottom:11px}
.ou-card .gp-bar-fill{height:100%;background:var(--accent);border-radius:5px;transition:width .3s;width:0}
.ou-card .gp-stats{display:flex;justify-content:space-between;font-size:11px;color:var(--text-dim);gap:6px;flex-wrap:wrap}
.ou-card .gp-stats i{vertical-align:-1px;margin-right:2px;color:var(--accent)}

/* Liste de fichiers. NOMS DE CLASSES IMPOSÉS PAR LE SCRIPT, ne pas renommer. */
.ou-card .files{margin-top:14px;max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.ou-card .file{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:var(--radius);
  background:var(--surface-2);font-size:13px;transition:background .2s}
.ou-card .file.active{border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.ou-card .file .ic{font-size:18px;flex-shrink:0;width:22px;text-align:center;color:var(--accent)}
.ou-card .file .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.ou-card .file .size{font-size:11px;color:var(--text-dim);opacity:.75;flex-shrink:0}
.ou-card .file .fbar{width:54px;background:var(--bg);border-radius:3px;height:4px;flex-shrink:0;overflow:hidden}
.ou-card .file .fbar-fill{height:4px;border-radius:3px;background:var(--accent);transition:width .3s;width:0}
.ou-card .file .fstatus{font-size:11px;flex-shrink:0;min-width:64px;text-align:right;display:inline-flex;
  align-items:center;gap:4px;justify-content:flex-end}
.ou-card .s-ok{color:#6ee7a0}
.ou-card .s-err{color:#fca5a5}
.ou-card .s-up{color:var(--accent)}
.ou-card .s-wait{color:var(--text-dim)}
.ou-card .s-resume{color:#f6d365}

/* Bouton d'envoi. Il reste GRISÉ tant qu'aucun fichier n'est sélectionné : après un
   rechargement, le navigateur ne peut pas récupérer les fichiers du disque, donc il
   n'y a réellement rien à envoyer. Décision Vincent (202h) : ne PAS changer son
   libellé, un bouton grisé disant « sélectionnez » inviterait à cliquer dessus alors
   que le geste attendu est sur la zone de dépôt. */
.ou-card .start{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:20px;
  padding:18px;background:var(--accent);color:#04181b;border:none;border-radius:var(--radius);font-size:16px;
  font-weight:700;font-family:'Archivo',system-ui,sans-serif;cursor:pointer;letter-spacing:.3px;transition:filter .2s}
.ou-card .start:hover{filter:brightness(1.08)}
.ou-card .start:disabled{background:var(--surface-2);color:var(--text-dim);cursor:default;filter:none}
.ou-card .start.sending{background:#15803d;color:#dcfce7}
.ou-card .start.sending .spin{display:inline-block;animation:ou-spin 1s linear infinite}
@keyframes ou-spin{to{transform:rotate(360deg)}}
.ou-card .send-note{font-size:11px;color:var(--text-dim);opacity:.7;text-align:center;margin-top:8px}

/* Écran de fin */
.ou-card .done-screen{text-align:center;padding:32px 24px}
.ou-card .done-icon{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;
  border-radius:50%;background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.35);color:#6ee7a0;
  font-size:36px;margin-bottom:18px}
.ou-card .done-title{font-family:'Archivo',system-ui,sans-serif;font-size:22px;font-weight:800;margin-bottom:6px}
.ou-card .done-sub{font-size:14px;color:var(--text-dim);line-height:1.5}
.ou-card .done-stats{display:flex;gap:10px;margin-top:22px}
.ou-card .done-stats .stat{flex:1;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px 10px}
.ou-card .done-stats .num{font-family:'Archivo',system-ui,sans-serif;font-size:21px;font-weight:800}
.ou-card .done-stats .num small{font-size:12px;color:var(--text-dim);font-weight:400}
.ou-card .done-stats .lbl{color:var(--text-dim);font-size:11px;margin-top:3px;display:inline-flex;align-items:center;gap:4px}
.ou-card .done-stats .lbl i{color:var(--accent)}
.ou-card .done-note{margin-top:20px;background:color-mix(in srgb,var(--accent) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);border-radius:var(--radius);
  padding:13px 16px;display:flex;align-items:flex-start;gap:10px;text-align:left}
.ou-card .done-note i{color:var(--accent);font-size:18px;flex-shrink:0;margin-top:1px}
.ou-card .done-note span{color:var(--text-dim);font-size:13px;line-height:1.5}

/* Plein écran sur téléphone : comportement CONSERVÉ de l'ancienne feuille. */
@media (max-width:480px){
  .ou-page{padding:0}
  .ou-card{max-width:none;border:none;border-radius:0;min-height:100vh}
  .ou-hdr{padding:14px 16px}
  .ou-boat{font-size:21px}
  .ou-wrap{padding:18px 14px}
  .ou-card .drop{padding:30px 16px}
  .ou-footer{padding:14px}
}

/* =====================================================================
   MISE EN PAGE « IMMERSION » (body.layout-immersion) - build A, accueil
   ---------------------------------------------------------------------
   Ajoutee le 09/09/2026. AUCUNE regle ci-dessus n'est modifiee : tout est
   prefixe par body.layout-immersion, donc « standard » et « vision » sont
   strictement inchanges.

   Principe : l'image du bloc hero est posee en FOND DE PAGE par header.php
   (.im-cover), sous la barre et le premier groupe. Le bloc .hero ne porte
   plus que son texte.

   Les couleurs viennent des variables du theme (--bg, --surface, --accent),
   jamais en dur : le layout et la palette restent deux axes independants.
   Les degrades ont un repli en noir avant la version color-mix, pour les
   navigateurs anterieurs a 2023.
   ===================================================================== */

/* La hauteur de couverture suit la LARGEUR de la fenetre, plafonnee a 1150 px.
   Pourquoi : en hauteur fixe, une fenetre large rendait la zone proportionnellement
   plus courte que la photo, donc `cover` debordait sur les COTES et coupait les
   bords de l'image (constate en reel le 09/09 sur ecran Retina large). A 56vw, une
   image de rapport 16/9 ou plus large tient entiere en largeur ; ce qui depasse est
   rogne en haut et en bas, ce qui est le bon comportement. Effet secondaire utile :
   l'image n'est plus agrandie au-dela de la largeur, donc elle est aussi plus NETTE.
   ⚠️ Le calage du hero se calcule DEPUIS cette meme variable : les deux ne peuvent
   pas diverger, et une couverture plus courte ne laisse jamais le premier groupe
   deborder sur le fond plein. */
body.layout-immersion{font-family:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;position:relative;
  --im-cover-h:clamp(720px,56vw,1150px)}

/* --- Fond de page : image + voile haut + fermeture vers la couleur de fond --- */
body.layout-immersion .im-cover{position:absolute;top:0;left:0;right:0;height:var(--im-cover-h);z-index:0;
  background-size:cover;background-position:center top;background-repeat:no-repeat}
body.layout-immersion .im-cover::before{content:"";position:absolute;top:0;left:0;right:0;height:190px;
  background:linear-gradient(to bottom,rgba(0,0,0,.52) 0%,rgba(0,0,0,0) 100%);
  background:linear-gradient(to bottom,color-mix(in srgb,var(--bg) 52%,transparent) 0%,transparent 100%)}
body.layout-immersion .im-cover::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,0) 24%,rgba(0,0,0,.36) 47%,rgba(0,0,0,.80) 82%,#000 100%);
  background:linear-gradient(to bottom,transparent 24%,
    color-mix(in srgb,var(--bg) 12%,transparent) 34%,
    color-mix(in srgb,var(--bg) 36%,transparent) 47%,
    color-mix(in srgb,var(--bg) 54%,transparent) 63%,
    color-mix(in srgb,var(--bg) 80%,transparent) 82%,
    color-mix(in srgb,var(--bg) 97%,transparent) 95%,
    var(--bg) 100%)}

/* --- Barre du haut : posee SUR l'image, en un seul bloc centre --- */
body.layout-immersion .site-header{position:absolute;top:0;left:0;right:0;z-index:3;
  background:transparent !important;border-bottom:none;backdrop-filter:none;padding:30px 44px}
body.layout-immersion .site-header--logo-big{padding-left:44px}
body.layout-immersion .site-header--logo-big + *{margin-top:0}
body.layout-immersion .site-logo{font-size:20px;font-weight:700;letter-spacing:-.025em;color:#fff;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.6))}
body.layout-immersion .site-logo img{max-height:46px}

/* Le bandeau : navigation, recherche et lightbox dans un seul objet en verre */
/* ⚠️ LE BANDEAU EST DANS LE FLUX, ET IL DOIT Y RESTER. Il a d'abord ete centre en
   position ABSOLUE, pour un centrage mathematiquement parfait : sorti du flux, il ne
   repoussait pas ses voisins, et le bloc « compte » lui passait dessous des que la
   fenetre n'etait pas tres large (chevauchement constate en reel le 09/09).
   ⚠️ DEUXIEME CHEVAUCHEMENT, MESURE SUR LE SITE EN LIGNE le 09/09. Le remede d'alors
   donnait aux deux cotes le meme poids (flex:1 1 0) avec min-width:0, pour un centrage
   optique. Or min-width:0 autorise une boite flex a descendre SOUS la largeur de son
   contenu, et ce contenu ne se coupe pas : il sort de la boite. Le logo debordait vers
   la droite ; le bloc « compte », aligne a droite, debordait vers la GAUCHE, donc sur
   la lightbox. Seuil mesure : contenu du bandeau + 2 x contenu lateral + 2 x marge,
   soit 1048 px sur un site a une entree de menu, et pres de 1400 px sur un site a
   quatre entrees vu par un client validateur team, dont le bloc de droite porte
   « Espace team », « Mon compte », « Deconnexion » et la langue.
   REMEDE RETENU, valide en maquette le 09/09 : plus AUCUN min-width:0, donc plus aucun
   debordement possible, et la barre a le droit de passer sur DEUX LIGNES. Le bloc de
   droite descend alors d'un bloc sous la barre, ou le logo, seul a pouvoir grandir, le
   pousse au bord droit : son bord droit et celui du bloc du dessous se confondent sans
   qu'aucun calcul ne soit necessaire.
   ⚠️ CORRECTIF 252h, VU EN REEL PAR VINCENT ET MESURE. Le 251h laissait `flex:1 1 auto`
   sur le bloc de droite et centrait le bandeau par des marges automatiques. C'etait faux
   deux fois. D'abord parce qu'un item qui GRANDIT consomme tout l'espace libre AVANT que
   les marges automatiques ne recoivent quoi que ce soit : les marges du bandeau restaient
   donc a zero, le bandeau restait colle au logo, et le bloc de droite s'etirait jusqu'au
   bord en gardant son texte a droite. Mesure sur la capture : 360 px de decalage, la ou
   l'explication avancee n'en prevoyait que 90. Ensuite parce que meme correctement pose,
   un centrage par marges automatiques centre le bandeau ENTRE ses voisins, pas dans la
   page. Les deux cotes portent donc a nouveau le meme poids (`flex:1 1 0`), qui est le
   seul moyen d'un centrage vrai sans position absolue.
   CONTRAINTE ASSUMEE, MESUREE : un centrage exact exige de la place pour DEUX FOIS le
   cote le plus large. Avec le contenu de reference (logo 165, bandeau 855, bloc de
   droite 387, marges 88) il faut 1717 px pour un centrage parfait, alors que la barre
   tient sur une ligne des 1495 px. Entre les deux, le bandeau est decale d'au plus la
   moitie de l'ecart entre les cotes. Arbitre le 09/09 : on l'accepte, plutot que de
   forcer le passage a deux lignes plus tot.
   Le `white-space:nowrap` ci-dessous n'est pas cosmetique : sans lui, la largeur
   minimale d'un cote vaut son mot le plus long, et un libelle se replierait sur deux
   lignes AVANT que la barre ne passe a la ligne (« Mon compte » coupe en deux, vu le
   09/09).
   Ne pas repasser le bandeau en position absolue. Ne jamais remettre de min-width:0.
   Ne pas redonner de flex-grow a un seul des deux cotes. */
body.layout-immersion .site-header{flex-wrap:wrap;row-gap:14px}
body.layout-immersion .site-logo{flex:1 1 0}
body.layout-immersion .nav-actions{flex:1 1 0;justify-content:flex-end}
body.layout-immersion .site-nav{flex:0 1 auto;
  display:flex;align-items:center;gap:2px;padding:5px;border-radius:27px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px)}
body.layout-immersion .site-logo,
body.layout-immersion .site-nav > a,
body.layout-immersion .site-nav .search-trigger,
body.layout-immersion .site-nav .icon-btn,
body.layout-immersion .nav-actions > a{white-space:nowrap}
body.layout-immersion .site-nav > a,
body.layout-immersion .site-nav .search-trigger{font-size:16px;font-weight:500;color:rgba(255,255,255,.88);
  padding:10px 22px;border-radius:22px}
body.layout-immersion .site-nav > a.active{background:#fff;color:#10151b;font-weight:600}
body.layout-immersion .site-nav > a:hover{color:#fff}
body.layout-immersion .site-nav .icon-btn{font-size:16px;color:#fff;padding:10px 18px;border-radius:22px}
/* ⚠️ LE CONTACT N'EST PLUS DANS LA PILULE, et il ne doit pas y revenir sans motif neuf.
   Il y avait ete mis au build 249h. Deux ennuis en sont sortis. D'abord un lien
   totalement invisible : le libelle est masque par defaut plus haut dans ce fichier
   (.contact-icon .contact-label{display:none}), et j'avais masque l'icone ici pour
   qu'il ressemble aux autres onglets - donc plus rien ne rendait (constate en reel le
   09/09, corrige au 250h en reaffichant le libelle). Ensuite un melange de registres :
   la pilule porte la navigation dans le contenu et le compte, le cote droit ce qui
   ferme la session. Arbitre par Vincent le 09/09 sur maquette (variante D) : le contact
   redevient une icone a droite, comme dans « standard » et « vision », et les deux
   regles qui vivaient ici ont ete retirees. Il n'y a donc plus rien a ecrire pour lui :
   le comportement par defaut du fichier suffit, libelle rendu sous 700 px compris. */

/* A droite, hors encadre : la deconnexion, le contact en icone et la langue */
body.layout-immersion .nav-actions{gap:22px;filter:drop-shadow(0 2px 10px rgba(0,0,0,.55))}
body.layout-immersion .nav-actions .icon-btn{font-size:15px;color:#fff}
body.layout-immersion .nav-actions .btn-nav{border-radius:22px;padding:10px 18px;font-size:15px}
body.layout-immersion .nav-actions .lang{font-size:15px;font-weight:500;color:rgba(255,255,255,.75);
  border:none;padding:0}

/* --- Hero : il ne porte plus que son texte ---
   ⚠️ height:auto est en !important A DESSEIN : index.php pose la hauteur du hero
   en style EN LIGNE, et un style en ligne l'emporte sur toute feuille de style.
   Sans cela, le hero garderait ses 340 px et le texte se retrouverait colle a la
   barre. Meme raison pour masquer .hero-img : l'image est deja en fond de page. */
body.layout-immersion .hero{height:auto !important;min-height:0;overflow:visible;display:block;
  position:relative;z-index:1;background:none;padding:calc(var(--im-cover-h) * .30) 44px 0}
body.layout-immersion .hero-img,
body.layout-immersion .hero-bg,
body.layout-immersion .hero-whole-img{display:none}
body.layout-immersion .hero--fade .hero-img::after{display:none}
body.layout-immersion .hero-text,
body.layout-immersion .hero-content{padding:0;position:static}
body.layout-immersion .hero-eyebrow{display:block;color:var(--accent);font-size:13px;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;margin-bottom:18px}
body.layout-immersion .hero-text h1,
body.layout-immersion .hero-content h1{font-size:56px;font-weight:600;line-height:1.04;letter-spacing:-.032em;
  color:#fff;max-width:900px;text-shadow:0 2px 26px rgba(0,0,0,.40)}
body.layout-immersion .hero-text p,
body.layout-immersion .hero-content p{font-size:17px;line-height:1.45;color:rgba(255,255,255,.78);
  max-width:620px;margin-top:18px}

/* --- Contenu : pleine largeur, pose sur le fond de page --- */
body.layout-immersion main{position:relative;z-index:1;max-width:none;margin:0;padding:72px 44px 0;background:none}
body.layout-immersion main.main--after-hero{padding-top:72px}
body.layout-immersion main.main--after-hero.main--no-gap{padding-top:72px}
body.layout-immersion .season,
body.layout-immersion .section{margin-bottom:56px}
body.layout-immersion .season-head,
body.layout-immersion .section-head{border-bottom:none;padding-bottom:0;margin-bottom:18px;gap:14px}
body.layout-immersion .season-head h2,
body.layout-immersion .section-head h2{font-size:22px;font-weight:600;letter-spacing:-.015em;color:#fff}
body.layout-immersion .season-head .count,
body.layout-immersion .section-head .count{font-size:14px;color:rgba(255,255,255,.55);
  font-variant-numeric:tabular-nums}

/* --- Grille des reportages : QUATRE colonnes, gouttiere large, format 3/2 ---
   Pas de defilement horizontal : arbitre le 09/09, tous les reportages d'un
   groupe restent visibles en meme temps. */
body.layout-immersion .folio-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
body.layout-immersion .folio,
body.layout-immersion .folio-card{aspect-ratio:3/2;border-radius:16px;border:1px solid rgba(255,255,255,.10);
  box-shadow:0 14px 40px rgba(0,0,0,.55)}
body.layout-immersion .folio-overlay{padding:16px;
  background:linear-gradient(to top,rgba(0,0,0,.90) 0%,rgba(0,0,0,.60) 30%,rgba(0,0,0,.08) 66%,transparent 100%)}
body.layout-immersion .folio-overlay h3{font-size:19px;font-weight:600;line-height:1.14;
  letter-spacing:.015em;text-transform:uppercase;color:#fff}
body.layout-immersion .folio-meta{gap:8px;margin-top:7px;font-size:12px;letter-spacing:.075em;
  text-transform:uppercase;color:rgba(255,255,255,.60);font-variant-numeric:tabular-nums}
body.layout-immersion .folio-meta .pill{background:none;padding:0;border-radius:0}
body.layout-immersion .folio-meta .pill-protected{background:rgba(210,153,34,.92);color:#1a1206;
  padding:3px 9px;border-radius:6px;font-weight:600;letter-spacing:.06em}

/* --- Boutons et blocs communs, arrondis de la nouvelle mise en page --- */
body.layout-immersion .btn{border-radius:11px;font-size:14px;padding:12px 18px}
body.layout-immersion .search-block-input,
body.layout-immersion .search-block-btn{height:56px;border-radius:12px;font-size:16px}
body.layout-immersion .link-card{border-radius:14px}
body.layout-immersion .site-footer{position:relative;z-index:1}

/* --- Sous 1100 px : trois colonnes, puis deux, puis une --- */
@media(max-width:1100px){
  body.layout-immersion .folio-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  body.layout-immersion .hero{padding:calc(var(--im-cover-h) * .30) 28px 0}
  body.layout-immersion main{padding:56px 28px 0}
  body.layout-immersion .site-header{padding:22px 28px}
  body.layout-immersion .tab{padding:9px 16px;font-size:15px}
  body.layout-immersion .site-nav > a,
  body.layout-immersion .site-nav .search-trigger,
  body.layout-immersion .site-nav .icon-btn{padding:9px 15px;font-size:15px}
}
@media(max-width:860px){
  /* Sur telephone et petite tablette, l'ecran n'est pas assez HAUT pour porter a la
     fois le titre et une rangee de vignettes : la couverture redevient une image
     d'ambiance en haut de page, et le contenu defile par-dessous. Chercher a tout y
     faire tenir donnerait une couverture plus haute que l'ecran lui-meme. */
  body.layout-immersion{--im-cover-h:min(560px,96vw)}
  body.layout-immersion .folio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  body.layout-immersion .hero-text h1,
  body.layout-immersion .hero-content h1{font-size:38px}
  body.layout-immersion .site-nav{flex-wrap:wrap;justify-content:center}
}
@media(max-width:560px){
  body.layout-immersion .folio-grid{grid-template-columns:1fr;gap:14px}
  body.layout-immersion .hero{padding:calc(var(--im-cover-h) * .30) 18px 0}
  body.layout-immersion main{padding:40px 18px 0}
}

/* ---------------------------------------------------------------------
   IMMERSION - build B : reportage, recherche, selection, visionneuse
   ---------------------------------------------------------------------
   Ces pages ne demandent AUCUNE modification PHP : la classe de mise en
   page est posee sur <body> par header.php, commun a tout le front. Seul
   folio.php a recu une ligne, pour poser sa couverture en fond de page.
   --------------------------------------------------------------------- */

/* Le contenu passe sous la barre, qui est en position absolue. L'accueil
   garde 72 px parce que le hero occupe deja cette hauteur. */
body.layout-immersion main{padding:150px 44px 0}
body.layout-immersion main.main--after-hero{padding-top:72px}

/* --- Fil d'Ariane et titre du reportage --- */
body.layout-immersion .breadcrumb{font-size:14px;color:rgba(255,255,255,.62);gap:9px;margin-bottom:16px}
body.layout-immersion .breadcrumb a{color:rgba(255,255,255,.62)}
body.layout-immersion .breadcrumb a:hover{color:#fff}
body.layout-immersion .bc-sep{color:var(--accent);opacity:.75}
body.layout-immersion .bc-current{color:#fff;font-weight:500}
/* Le fil d'Ariane n'existe QUE sur la page d'un reportage : c'est ce qui
   permet de distinguer ici le titre du reportage des titres de groupe de
   l'accueil, qui partagent la meme classe .season-head. */
body.layout-immersion .breadcrumb + .season-head{align-items:baseline;gap:18px;margin-bottom:16px}
body.layout-immersion .breadcrumb + .season-head h2{font-size:46px;font-weight:600;line-height:1.05;
  letter-spacing:-.03em;color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.40);text-transform:none}
body.layout-immersion .breadcrumb + .season-head .count{font-size:16px;color:rgba(255,255,255,.62)}
body.layout-immersion .breadcrumb ~ .freetext{max-width:700px;margin-bottom:26px}
body.layout-immersion .breadcrumb ~ .freetext .freetext-body,
body.layout-immersion .breadcrumb ~ .freetext p{font-size:17px;line-height:1.5;color:rgba(255,255,255,.76)}

/* Filtre par bateau et rappel de connexion, poses sur l'image */
body.layout-immersion .boat-filter label{color:rgba(255,255,255,.7);font-size:14px}
body.layout-immersion .boat-filter select{background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.15);border-radius:10px;color:#fff;padding:7px 38px 7px 14px;font-size:14px;
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px)}
body.layout-immersion .boat-filter select:hover{border-color:rgba(255,255,255,.35)}
body.layout-immersion .boat-filter select option{background:#16202b;color:#fff}
body.layout-immersion .boat-filter .bf-select::after{border-right-color:rgba(255,255,255,.75);border-bottom-color:rgba(255,255,255,.75)}
@media (max-width:640px){body.layout-immersion .boat-filter select{font-size:16px}} /* 301h : pas de zoom iOS */
body.layout-immersion .alert.info{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.15);
  border-radius:10px;color:rgba(255,255,255,.88);font-size:14.5px;padding:11px 16px;
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px)}

/* --- Grille de photos : la densite NetFolio est conservee, seuls les
   arrondis et les actions changent. --- */
body.layout-immersion .photo{border-radius:12px}
body.layout-immersion .photo-media,
body.layout-immersion .photo-media .photo-thumb{border-radius:12px}
body.layout-immersion .pa-btn{width:48px;height:48px;border-width:2px}
body.layout-immersion .pa-tip{border-radius:7px;font-size:12px;padding:5px 10px}
body.layout-immersion .photo-info{border-radius:0 0 12px 12px;padding:12px 15px 14px;
  border:1px solid rgba(255,255,255,.09);border-top:none;box-shadow:0 16px 34px rgba(0,0,0,.5)}
body.layout-immersion .photo-info .pi-title{font-size:14px;margin-bottom:8px}
body.layout-immersion .photo-info .pi-row{font-size:12px;padding:5px 0;font-variant-numeric:tabular-nums}

/* Bouton flottant « Derniers medias » */
body.layout-immersion .folio-jump{border-radius:26px;padding:13px 22px;font-size:15px;font-weight:500;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.15);color:#fff;
  box-shadow:0 12px 34px rgba(0,0,0,.55);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px)}

/* --- Visionneuse --- */
body.layout-immersion .viewer{background:var(--bg);background:color-mix(in srgb,var(--bg) 97%,transparent)}
body.layout-immersion .viewer-top{padding:14px 20px;justify-content:space-between}
body.layout-immersion .vtop-btn{width:42px;height:42px;border-radius:12px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
body.layout-immersion .viewer-body{padding:0 20px 20px;gap:20px}
body.layout-immersion .img-wrap img,
body.layout-immersion .img-wrap video{border-radius:10px}
body.layout-immersion .viewer-wm{font-size:11.5px;letter-spacing:.22em;color:rgba(255,255,255,.42)}
body.layout-immersion .vnav{width:48px;height:48px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.13)}
body.layout-immersion .viewer-side{width:340px;border-radius:14px;border:1px solid rgba(255,255,255,.09)}
body.layout-immersion .vside-scroll{padding:22px 22px 10px}
body.layout-immersion .vside-pos{font-size:12.5px;letter-spacing:.12em;font-variant-numeric:tabular-nums}
body.layout-immersion .vside-title{font-size:18px;line-height:1.28;margin:8px 0 20px}
body.layout-immersion .vside-row{font-size:13px;padding:9px 0;gap:12px}
body.layout-immersion .vside-row .k{width:74px}
body.layout-immersion .vtag{font-size:11.5px;padding:4px 10px;border-radius:12px;
  border:1px solid rgba(255,255,255,.08)}
body.layout-immersion .vtag-more{font-size:11.5px;padding:4px 10px;border-radius:12px}
body.layout-immersion .vside-actions{gap:9px;padding:16px 22px}
body.layout-immersion .vside-actions .btn{border-radius:10px;padding:12px 16px;font-size:14px}
body.layout-immersion .vside-origin{border-radius:10px}

/* --- Recherche et selection : pages d'outil, donc pas d'image de fond.
   La barre redevient opaque et le contenu commence plus haut.
   La classe `has-cover` est posee par header.php sur les seules pages qui
   fournissent une couverture. On evite ainsi :has(), inutile ici et non
   supporte par les navigateurs anterieurs a fin 2023. --- */
body.layout-immersion .site-header{background:transparent}
body.layout-immersion:not(.has-cover) .site-header{position:relative;
  background:var(--surface) !important;border-bottom:1px solid var(--border);padding:26px 44px}
body.layout-immersion:not(.has-cover) .site-header .site-logo{filter:none;color:var(--text)}
body.layout-immersion:not(.has-cover) .site-nav{background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.13)}
body.layout-immersion:not(.has-cover) .nav-actions{filter:none}
body.layout-immersion:not(.has-cover) .nav-actions .icon-btn{color:var(--text)}
body.layout-immersion:not(.has-cover) main{padding-top:56px}
body.layout-immersion:not(.has-cover) .breadcrumb{color:var(--text-dim)}

/* --- Sous 1100 px --- */
@media(max-width:1100px){
  body.layout-immersion main{padding:120px 28px 0}
  body.layout-immersion .breadcrumb + .season-head h2{font-size:34px}
  body.layout-immersion .viewer-side{width:280px}
}
@media(max-width:760px){
  body.layout-immersion main{padding:96px 18px 0}
  body.layout-immersion .breadcrumb + .season-head h2{font-size:27px}
}

/* ===== Page publique du lien d'invitation YouTube (build 262h, publication YouTube, build A) =====
   public/youtube-connect.php. Maquette validee le 10/09/2026 (maquette-lien-youtube-v2).
   Complete la famille .ov-* de la page de validation Onboard, sans en modifier une regle. */
.ov-lead{font-size:14.5px;line-height:1.6;margin-top:18px}
.ov-lead b{font-weight:700}
.ov-lead-en{font-size:12.5px;color:var(--text-dim);opacity:.75;font-style:italic;line-height:1.5;margin-top:6px}
.ov-h2{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin-top:24px}
.ov-list{list-style:none;margin:0;padding:0}
.ov-list li{display:flex;gap:8px;align-items:flex-start;line-height:1.5;margin-bottom:5px}
.ov-list li:last-child{margin-bottom:0}
.ov-list li i{font-size:15px;margin-top:2px;flex:0 0 auto}
.ov-list.yes li i{color:#6ee7a0}
.ov-list.no li i{color:#fca5a5}
.ov-v .ov-en{display:block;font-size:11.5px;color:var(--text-dim);opacity:.75;font-style:italic;font-weight:400;margin-top:6px;line-height:1.45}
.ov-go{margin-top:22px}
.ov-go .tm-btn{width:100%;padding:15px 12px;font-size:15px;display:flex;align-items:center;justify-content:center;gap:9px}
.ov-go-en{text-align:center;font-size:11.5px;color:var(--text-dim);opacity:.75;margin-top:7px;font-style:italic}
.ov-foot{margin-top:26px;padding-top:16px;border-top:1px solid var(--border);font-size:12px;color:var(--text-dim);line-height:1.6}
.ov-foot a{color:var(--accent)}
.ov-foot .ov-en{display:block;font-style:italic;opacity:.75;margin-top:4px}
.ov-done-txt{font-size:13.5px;line-height:1.6;margin-top:14px;color:var(--text)}
.ov-done-en{font-size:12px;color:var(--text-dim);opacity:.75;font-style:italic;line-height:1.5;margin-top:8px}
.ov-done .tm-btn{margin-top:18px;padding:12px 26px;font-size:14px;display:inline-flex;align-items:center;gap:8px;flex:0 0 auto}

/* =====================================================================
   ZIP DE LA SÉLECTION (build B, chantier « ZIP par le worker », maquette commune
   M1 bis + M2 validée le 30/09/2026). Même encadré que le back-office (admin.css),
   sur les variables du thème : il suit les thèmes sombre, clair, gris et marine.
   Seules les quatre teintes d'état sont fixes, choisies lisibles sur fond clair ET
   sombre. La barre s'allonge par sa largeur (style.width posé par le script).
   ===================================================================== */
.zip-slot:empty{display:none}
.zip-box{background:rgba(25,182,201,.10);border:1px solid rgba(25,182,201,.35);border-radius:10px;padding:16px 18px;margin-bottom:18px;color:var(--text)}
.zip-box.is-ok{background:rgba(46,160,67,.10);border-color:rgba(46,160,67,.35)}
.zip-box.is-warn{background:rgba(210,153,34,.10);border-color:rgba(210,153,34,.40)}
.zip-box.is-err{background:rgba(229,83,75,.10);border-color:rgba(229,83,75,.35)}
.zip-box.is-off{background:var(--surface);border-color:var(--border)}
.zip-head{display:flex;align-items:flex-start;gap:12px}
.zip-hd{flex:1;min-width:0}
.zip-ic{font-size:26px;line-height:1;color:var(--accent);flex-shrink:0}
.zip-box.is-ok .zip-ic{color:#2ea043}
.zip-box.is-warn .zip-ic{color:#bf8700}
.zip-box.is-err .zip-ic{color:#d1242f}
.zip-box.is-off .zip-ic{color:var(--text-dim)}
.zip-title{font-weight:700;font-size:14.5px}
.zip-text{color:var(--text-dim);font-size:13px;margin-top:2px}
.zip-tools{display:flex;align-items:center;gap:12px;flex-shrink:0}
.zip-cancel{background:none;border:none;color:var(--text-dim);font-size:12px;cursor:pointer;text-decoration:underline;font-family:inherit}
.zip-cancel:hover{color:var(--text)}
.zip-close{background:none;border:none;color:var(--text-dim);font-size:18px;line-height:1;cursor:pointer;padding:2px;border-radius:6px}
.zip-close:hover{color:var(--text);background:var(--surface-2)}
.zip-steps{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.zip-step{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 11px;border-radius:20px;border:1px solid var(--border);color:var(--text-dim)}
.zip-step .n{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:var(--surface-2);font-size:10.5px;font-weight:700}
.zip-step.is-on{border-color:var(--accent);color:var(--text)}
.zip-step.is-on .n{background:var(--accent);color:#04181b}
.zip-step.is-done{color:#2ea043;border-color:rgba(46,160,67,.45)}
.zip-step.is-done .n{background:rgba(46,160,67,.2);color:#2ea043}
.zip-bar{position:relative;height:10px;background:var(--surface-2);border-radius:6px;overflow:hidden;margin:12px 0 6px}
.zip-bar-fill{height:100%;width:0;background:var(--accent);border-radius:6px;transition:width .3s}
.zip-bar.is-wait .zip-bar-fill{position:absolute;width:30%;animation:zipslide 1.3s ease-in-out infinite}
@keyframes zipslide{0%{left:-30%}100%{left:100%}}
.zip-meta{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--text-dim);flex-wrap:wrap}
.zip-meta strong{color:var(--text)}
.zip-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.zip-notes{margin-top:10px;font-size:12.5px;color:var(--text-dim)}
.zip-notes div{display:flex;align-items:center;gap:6px;margin-top:3px}
.zip-spin{display:inline-block;animation:zipspin 1s linear infinite}
@keyframes zipspin{to{transform:rotate(360deg)}}
.btn.is-off{opacity:.45;pointer-events:none}
/* Ligne dite une fois : vidéos retirées d'une ancienne sélection (point 5). */
.lb-note{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-dim);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:9px 14px;margin-bottom:14px}
.lb-note i{color:var(--accent);font-size:16px}