/* ====== PALETTE ENSOLEILLÉE ====== */
:root{
  --ink:#0f172a;           /* texte principal */
  --muted:#637188;         /* texte secondaire */
  --sea:#0ea5e9;           /* bleu mer */
  --deep-sea:#2563eb;      /* bleu profond */
  --sun:#f59e0b;           /* soleil/ambre */
  --coral:#ff7a59;         /* accent chaud */
  --surface:rgba(255,255,255,.91);
  --radius:16px;
  --shadow:0 10px 28px rgba(0,0,0,.18);
    --header-h: 76px;
    --card: rgba(255,255,255,0.95);
}

:root{
  --tropic-a:#15db15; /* ambre vif */
  --tropic-b:#4ee740; /* mandarine */
  --tropic-c:#4be61c; /* rose/soleil couchant */
  --tropic-shadow: rgba(251, 146, 60, .28);
}

:root { --header-h: 72px; }

/* ====== FOND RESPONSIVE (2 images) ====== */
body{
  margin:0;
  color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  padding-top: var(--header-h);
}
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background:center/cover no-repeat;
  filter:saturate(1.02) contrast(.98) brightness(.98);
}
@media (min-width:900px){
  body::before{ background-image:url("/Voyages/tarragona-2026/assets/img/bg-desktop.webp"); }
}
@media (max-width:899.98px){
  body::before{ background-image:url("/Voyages/tarragona-2026/assets/img/bg-mobile.webp"); }
}
/* voile de lisibilité, un peu plus léger */
body::after{
  content:""; position:fixed; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.68) 32%, rgba(255,255,255,.62));
}

.container{max-width:1200px;margin:auto;padding:22px}

/* ====== HEADER / NAV ====== */
.header{
  position: fixed;    /* <- au lieu de sticky */
  top: 0; left: 0; right: 0;
  z-index: 30;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #e9eef4;
}

.header.scrolled{
  border-bottom-color: rgba(0,0,0,.08);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

.header-row{
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 8px 5px;
}

/* Marque (à gauche) */
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.brand-badge{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; color:#fff; font-size:18px;
  background-image: linear-gradient(135deg, var(--primary-a), var(--primary-b));
  box-shadow: 0 4px 12px rgba(14,165,233,.25);
}
.brand-text{display:flex; flex-direction:column; line-height:1.05}
.brand-title{font-weight:800; letter-spacing:.2px}
.brand-sub{font-size:12px; color:#637188}

/* Nav "pill group" à droite */
.nav{
  display:flex; gap:8px; padding:6px;
  border:1px solid #e6ebf2; border-radius:999px;
  background: rgba(255,255,255,.9);
}
.nav a{
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:0 14px; border-radius:999px;
  text-decoration:none; color:#0f172a; border:1px solid transparent;
  transition: background .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s;
}
.nav a:hover{ background: rgba(20,184,166,.08); border-color: rgba(20,184,166,.25); }
.nav a.active{
  background:#fff; color:#0f766e;
  border-color: var(--primary-a);
  box-shadow: 0 0 0 3px rgba(20,184,166,.22);
}

/* Empêche la nav admin de s'étirer : taille = contenu */
.nav--compact{
  display: inline-flex;   /* au lieu de flex */
  flex: 0 0 auto;         /* ne grandit pas dans le flex parent */
  width: auto;            /* largeur serrée */
  gap: 6px;
  padding: 4px;
}

/* (déjà présent) sur mobile on permet un léger scroll horizontal */
@media (max-width: 900px){
  .nav--compact{
    white-space: nowrap;
    overflow-x: auto;
    max-width: calc(100vw - 140px);
    -webkit-overflow-scrolling: touch;
  }
  .nav--compact::-webkit-scrollbar{ display:none; }
}



/* ====== HERO / CARTE CENTRALE ====== */
.hero{
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;     /* centrage vertical */
  justify-content: center; /* centrage horizontal */
  padding: clamp(16px, 10.5vw, 48px) 0;
}


.hero-card{
  width: min(100%, 980px);
  background:var(--surface); backdrop-filter:blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding:clamp(90px,20.5vw,36px);
  text-align:center;
  border-radius:22px;
  box-shadow:var(--shadow);
}

.hero-card-voyage{
  width: min(100%, 980px);
  background:var(--surface); backdrop-filter:blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  text-align:center;
  border-radius:22px;
  box-shadow:var(--shadow);
}

h1{margin:.35em 0; font-size:clamp(22px,3.4vw,42px); line-height:1.18}
.muted{color:var(--muted)}

/* Desktop : carte moins haute que plein écran */
@media (min-width: 900px){
  .hero{ min-height: 78vh; }  /* ou garde le calc() si tu veux */
}

/* Mobile : carte plus compacte et fond moins "gros" */
@media (max-width:899.98px){
  .hero{min-height:64vh; padding:16px 0}
  .hero-card{
    border-radius:18px;
    padding: 70px 18px; 
    width:92vw
}
  h1{font-size:clamp(20px,10.5vw,28px)}
}

/* ====== BOUTONS MODERNES ====== */
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:46px;
  padding:0 20px;
  border-radius:12px;
  font-weight:800;
  border:1px solid transparent;
  text-decoration:none;
  line-height:1;
  white-space:nowrap;
  transition:transform .08s ease, box-shadow .15s ease, filter .15s ease;
  width: 200px;
}
.btn:active{transform:translateY(1px)}

/* primaire : gradient mer -> mer profonde */
.btn-primary{
  background-image:linear-gradient(135deg, var(--sea) 0%, var(--deep-sea) 100%);
  color:#fff; border-color:transparent;
  box-shadow:0 8px 18px rgba(37,99,235,.22);
}
.btn-primary:hover{filter:saturate(1.05) brightness(1.02)}

/* secondaire : blanc avec bord chaud (soleil) */
.btn-secondary{
  background:#fff;
  color:#0b3d91;
  box-shadow:0 8px 16px rgba(14,165,233,.08);
}
.btn-secondary:hover{box-shadow:0 8px 18px rgba(14,165,233,.16)}

.btn-terce{
  background-image: linear-gradient(135deg, var(--tropic-a) 0%, var(--tropic-b) 50%, var(--tropic-c) 100%);
  color:#fff;
  border:0;
  box-shadow: 0 10px 18px var(--tropic-shadow);
}
.btn-terce:hover{
  filter: saturate(1.06) brightness(1.02);
  transform: translateY(-1px);
}
.btn-terce:active{
  transform: translateY(0);
}
.btn-terce:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(250, 204, 21, .35); /* anneau ambre */
}



/* Mobile : boutons un peu moins massifs et bien espacés */
@media (max-width:899.98px){
  .btn{height:44px; padding:0 16px; border-radius:10px}
  .cta-row{gap:10px}
}







/* Programme */


.card{
  background:var(--card);
  border:1px solid #ddd;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:18px;margin:18px 0
}

.day{margin:22px 0}
.block{margin:8px 0 6px}
.block .label{font-weight:700;margin-bottom:6px}
.block ul{margin:6px 0 0 18px}

/* Gallery (vignettes) */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-top:12px}
.thumb{
  display:block;border-radius:16px;overflow:hidden;border:1px solid #d7d7d7;
  box-shadow:0 6px 16px rgba(0,0,0,.12)
}
.thumb img{width:100%;height:160px;object-fit:cover;display:block;transition:transform .25s}
.thumb:hover img{transform:scale(1.03)}

/* Lightbox plein écran */
#lightbox{
  position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;
  z-index:9999;cursor:zoom-out
}
#lightbox img{max-width:95vw;max-height:92vh;display:block}

/* Photos parents */
.pass-form{display:flex;gap:8px;justify-content:center}
.input{
  padding:10px 12px;
  border:1px solid #bbb;
  border-radius:10px;
  width: calc(100% - 40px);
}

.photos .btn{
  padding:10px 14px;
}

.btn:disabled{opacity:.6;cursor:not-allowed}

/* Grille des photos */
.photos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.photo-card{background:rgba(255,255,255,.8);border:1px solid #ddd;border-radius:12px;overflow:hidden}
.photo-card img{width:100%;height:160px;object-fit:cover;display:block;cursor:zoom-in}
.photo-meta{padding:8px 10px;font-size:14px;color:#333}
.photo-meta div{
  margin-top: 5px;
}
.tag{display:inline-block;background:#eef4ff;border:1px solid #cfe0ff;color:#0b3d91;border-radius:999px;padding:4px 8px;font-size:12px}

/* Admin upload */
.form-grid{display:grid;gap:12px}
select, textarea{padding:10px;border:1px solid #bbb;border-radius:10px;width:100%}
input[type=file]{padding:8px;border:1px dashed #bbb;border-radius:10px;background:#fff}
.hint{font-size:13px;color:#666}


/* === THEME C === */
:root{
  --primary-a:#14b8a6; /* teal */
  --primary-b:#0ea5e9; /* mer */
  --hi-a:#ff9a7a;      /* corail doux */
  --hi-b:#ff7a59;      /* corail vif */
  --hi-text:#1b1f24;
  --focus-ring: rgba(20,184,166,.35);
}

.btn-primary{ background-image:linear-gradient(135deg,var(--primary-a),var(--primary-b)); color:#fff; border-color:transparent; box-shadow:0 8px 18px rgba(14,165,233,.22);}
.btn-primary:hover{ transform:translateY(-1px); filter:saturate(1.05); }
.btn-secondary{ background-image:linear-gradient(135deg,var(--hi-a),var(--hi-b)); color:#fff; border:0; box-shadow:0 8px 16px rgba(255,122,89,.22);}
.btn-secondary:hover{ filter:brightness(1.02); }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--focus-ring); }



/* Conteneur du badge (cercle) */
.brand-badge{
  width:clamp(40px, 4.2vw, 50px);
  height:clamp(40px, 4.2vw, 50px);
  border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(135deg,#f4fffd 0%,#ffffff 100%);
  border:1px solid rgba(20,184,166,.38);
  box-shadow:0 4px 12px rgba(14,165,233,.16);
  overflow:hidden; /* masque ce qui dépasse du cercle */
}

/* L'icône à l'intérieur : plus petite, centrée, jamais rognée */
.brand-mark{
  width:76%;           /* ajuste 70–82% selon ton png */
  height:76%;
  object-fit:contain;  /* garde les proportions */
  display:block;
}



/* Hero plus discret sur la page Programme */
.hero--short{
  min-height: 100px;
}
@media (max-width: 899.98px){ 
  .hero--short{
    min-height: 60px;
  }
}
.card, .day, section{ scroll-margin-top: calc(var(--header-h) + 12px); }



/* ---------- Formulaire parents : grille responsive ---------- */
.pass-form{
  display:grid;
  grid-template-columns: minmax(240px, 420px) auto; /* champ + bouton */
  gap:12px;
  align-items:center;
  justify-content:center;   /* centre l’ensemble dans la card */
}

.pass-wrap{ position:relative; width:100%; }
.pass-wrap .input{
  width: calc(100% - 15px);
  height:46px;
  padding-right:44px;        /* place pour l’œil */
  box-sizing:border-box;
}

/* œil dans le champ */
.toggle-pass{
  position:absolute; top:50%; right:15px; transform:translateY(-50%);
  width:32px; height:32px; display:grid; place-items:center;
  border:0; background:transparent; color:#667085; cursor:pointer;
  border-radius:8px;
}
.toggle-pass:hover{ background:rgba(0,0,0,.05); }
.toggle-pass:focus-visible{ outline:2px solid rgba(14,165,233,.35); outline-offset:2px; }

/* bouton aligné et sans chevauchement */
.pass-submit{ height:46px; padding:0 18px; }

/* Repli mobile : le bouton passe sous le champ, largeur 100% */
@media (max-width: 640px){
  .pass-form{
    grid-template-columns: 1fr;
    justify-items:stretch;
  }
  .pass-submit{ width:100%; }
}



/* ===== Barre de filtres (pills) ===== */
.filters{ margin:10px 0 14px }
.filters.sticky{ position:sticky; top:calc(var(--header-h) + 8px); z-index:5 }
.filters-label{ font-size:14px; color:var(--muted); margin:0 0 6px 4px }

.filter-bar{
  display:flex; gap:8px; padding:6px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid #e6ebf2; border-radius:999px;
  background:rgba(255,255,255,.9);
  scroll-snap-type:x proximity;
}
.filter-bar::-webkit-scrollbar{ height:8px }
.filter-bar::-webkit-scrollbar-thumb{ background:#dfe7f2; border-radius:999px }

/* pastilles */
.pill{
  scroll-snap-align:start;
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding:0 14px; border-radius:999px;
  background:#fff; color:#0f172a; text-decoration:none;
  border:1px solid #e6eaf3; white-space:nowrap; font-weight:600;
  transition:background .15s, border-color .15s, box-shadow .15s, color .15s;
}
.pill:hover{ background:rgba(20,184,166,.06); border-color:rgba(20,184,166,.35) }
.pill.active{
  background-image:linear-gradient(135deg, var(--primary-a), var(--primary-b));
  color:#fff; border-color:transparent;
  box-shadow:0 4px 12px rgba(14,165,233,.22);
}

@media (max-width:560px){
  .filters-label{ margin-left:0 }
}


/* --- Admin : barre d'actions --- */
.admin-toolbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:8px 0 12px;
}
.admin-toolbar .spacer{ flex:1 }
.checkall, .checkday{ font-size:14px; color:#555; }
.btn-danger{ background:#fff; color:#b42318; border:1px solid #f2b8b5; box-shadow:0 8px 16px rgba(180,35,24,.08) }
.btn-danger:hover{ background:#ffeceb; }

/* --- Grille d'admin (réutilise le look des cards) --- */
.day-header{
  display:flex; align-items:center; justify-content:space-between;
  margin:14px 2px 8px; padding:4px 0; border-top:1px dashed #e5e7eb;
}
.day-title{ font-weight:700; }

/* mêmes colonnes que galerie publique mais avec champs légende */
.admin-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
  gap:14px; justify-content:flex-start;
}

/* carte avec checkbox overlay */
.photo-card.admin{
  position:relative;
  background:#fff; border:1px solid #ddd; border-radius:12px; overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.10);
}
.photo-card.admin img{ width:100%; height:160px; object-fit:cover; display:block }
.photo-card.admin .photo-meta{ padding:8px 10px }
.cap-input{ width:100%; padding:8px 10px; border:1px solid #cfd7e3; border-radius:8px; }
.filehint{ font-size:12px; color:#667085; margin-top:6px; }

/* case à cocher custom en haut à gauche */
.photo-card.admin .pick{
  position:absolute; top:8px; left:8px; display:flex; align-items:center; gap:6px; cursor:pointer;
}
.photo-card.admin .pick input{ display:none }
.photo-card.admin .pick .box{
  width:22px; height:22px; border-radius:6px; border:2px solid #e5e7eb; background:rgba(255,255,255,.9);
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.photo-card.admin .pick input:checked + .box{
  border-color:transparent;
  background-image:linear-gradient(135deg, var(--primary-a), var(--primary-b));
  box-shadow:0 4px 10px rgba(14,165,233,.24);
  position:relative;
}
.photo-card.admin .pick input:checked + .box::after{
  content:""; position:absolute; inset:5px 6px 6px 5px; border:2px solid #fff; border-top:0;border-left:0; transform:rotate(45deg);
}

/* petite adaptation mobile */
@media (max-width:520px){
  .admin-grid{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .photo-card.admin img{ height:140px }
}


.notice{
  background:#f8fbff; border:1px solid #dbeafe; color:#0f172a;
  padding:10px 12px; border-radius:10px; box-shadow:0 4px 10px rgba(0,0,0,.04);
}



/* ——— Header toujours sur UNE ligne ——— */
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;          /* interdit le retour à la ligne */
  gap:10px;
}

/* la nav peut se tasser si besoin */
.header .nav{
  flex:1 1 auto;
  justify-content:flex-end;
  min-width:0;               /* autorise le shrink en flex */
  white-space:nowrap;
}

/* compacter le header sur petits écrans */
@media (max-width: 600px){
  :root{ --header-h: 60px; }                 /* ajuste le padding-top du body */
  .header .container{ padding:8px 10px; }    /* moins de padding latéral */

  /* on garde seulement le badge (cercle) : le texte de marque disparaît */
  .brand-text{ display:none; }
  .brand-badge{ width:34px; height:34px; }

  /* pills plus compactes */
  .nav{ gap:6px; padding:4px; }
  .nav a{ height:34px; padding:0 10px; font-size:14px; }
}

/* très petit (ex. 360px) : on serre encore un peu */
@media (max-width: 380px){
  :root{ --header-h: 56px; }
  .nav{ gap:4px; }
  .nav a{ height:32px; padding:0 8px; font-size:13px; }
}


/* Mobile: la barre de pills garde la taille du contenu (pas full-width) */
@media (max-width: 600px){
  .header-row{ justify-content: space-between; }
  .header .nav{
    flex: 0 0 auto;      /* <-- ne s'étire plus */
    margin-left: auto;   /* reste collée à droite */
    gap: 6px;
    padding: 4px 6px;
  }
  .header .nav a{
    height: 34px;
    padding: 0 10px;
    font-size: 14px;
  }
}

/* Très petit (<=380px) : encore un cran plus compact */
@media (max-width: 380px){
  .header .nav{ gap: 4px; padding: 3px 5px; }
  .header .nav a{ height: 32px; padding: 0 8px; font-size: 13px; }
}


/* === FIX: bulle de navigation admin = largeur du contenu === */
.header .nav.nav--compact{
  display: inline-flex !important;  /* nav = largeur de ses liens */
  flex: 0 0 auto !important;        /* ne s'étire pas */
  width: auto !important;           /* pas de largeur imposée */
  justify-content: flex-end;        /* reste à droite */
}


/* --- Quiz list (students/index) --- */
.quiz-list{
  display:grid;
  gap:14px;
  margin-top:10px;
}
.quiz-item{
  background:var(--surface);
  border:1px solid #e6eaf3;
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:14px;
}
.quiz-title{ margin:0 0 6px; }
.quiz-actions{ margin-top:10px; }


.card .gras{

  font-weight: bold;
}

.card .url{
  font-weight: bold;
  text-decoration: none;
  color: rgb(5, 173, 173);
}

.card .url:visited{
  font-weight: bold;
  text-decoration: none;
  color: rgb(5, 173, 173);
}