/* assets/css/app.css — EWAKEE UI */

/* ================== Theme ================== */
:root{
  --orange:#F57C00; --brown:#3E2723; --sand:#FFE0B2; --ivory:#FFF8E1; --green:#2E7D32; --text:#111;
  --bg:var(--ivory);

  /* Admin UI palette */
  --ui-bg:#fff; --ui-card:#ffffff; --ui-muted:#6b7280;
  --ui-border:#e8e2d6; --ui-shadow:0 10px 30px #0000000a;
  --ui-accent:#F57C00; --ui-accent-700:#E65100; --ui-green:#2E7D32; --ui-red:#c62828;
}

/* ================== Base ================== */
*{ box-sizing:border-box }
html,body{ margin:0 }
body{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans",
               "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji", sans-serif;
  background:var(--bg); color:var(--text); line-height:1.6; font-weight:400; letter-spacing:.01em;
}
.container{ max-width:1100px; margin:0 auto; padding:1rem }
.narrow{ max-width:980px; margin:0 auto }

a{ color:inherit }

/* ================== Buttons ================== */
.btn{ display:inline-block; border-radius:16px; padding:.6rem 1rem; border:1px solid var(--brown); text-decoration:none; background:#fff }
.btn-cta{ background:var(--orange); color:#fff; border-color:var(--brown) }
.btn-cta:hover{ background:#3E2723 }
.btn-outline{ background:transparent; color:#000 }
.btn.small{ padding:.4rem .7rem; border-radius:12px }
.btn.xsmall{ padding:.2rem .45rem; border-radius:10px; font-size:.82rem }
.btn.ghost{ background:#fff; border:1px solid var(--ui-border); color:#111 }
.btn.ghost:hover{ border-color:#d6cbb7 }
.btn.danger{ background:#fde8e8; border-color:#f3b6b6; color:#c62828 }
.btn.danger:hover{ background:#fbd5d5; border-color:#ee9f9f }

/* ================== Header ================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:linear-gradient(90deg,var(--orange),#f8a332);
  box-shadow:0 1px 0 #0001;
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:.55rem 0 }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:#000 }
.brand .logo{ width:32px; height:32px; object-fit:contain; border-radius:8px; background:transparent }
.brand-text{ font-weight:700; letter-spacing:.02em }
.menu{ display:flex; gap:1.2rem; list-style:none; padding:0; margin:0 }
.menu a{ color:#000; text-decoration:none; font-weight:600; line-height:1; padding:.3rem 0 }
.menu a:hover{ text-decoration:underline }
.site-header .btn{ padding:.45rem .9rem; border:0; border-radius:14px }
.site-header .btn-cta{ background:var(--orange); color:#fff; box-shadow:inset 0 1px 0 #ffffff66 }
.site-header .btn-cta:hover{ background:#e86e00; transform:translateY(-1px) }

/* ================== Hero (classic) ================== */
.hero.safari{
  background:linear-gradient(135deg,#ffd59e 0%, #F57C00 58%, #E65100 100%);
  border-radius:24px; box-shadow:0 8px 28px #E651001a, inset 0 1px 0 #ffffff70; margin-top:1rem;
}
.hero-inner{ padding:2.75rem 1.5rem }
.lead{ opacity:.9 }
.banner{ margin:1rem 0; padding:1rem; border-radius:16px; background:var(--sand); display:flex; gap:1rem; align-items:center }

/* ================== Cards / grids ================== */
.triptych{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin:1.5rem 0 }
.triptych article{ background:#fff; border:1px solid #efe4d1; border-radius:16px; padding:1.1rem; box-shadow:0 4px 20px #0000000c }

.masonry{ column-count:3; column-gap:1rem }
@media(max-width:900px){ .masonry{ column-count:2 } }
@media(max-width:560px){ .masonry{ column-count:1 } }
.masonry .tile{ break-inside:avoid; display:block; margin-bottom:1rem; border-radius:16px; overflow:hidden }
.masonry .tile img{ width:100%; display:block }

.team-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem }
.team-card{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.6rem; padding:1rem; border:1px solid #0002; border-radius:16px; background:#fff }
.team-card img{ width:240px; height:240px; border-radius:50%; object-fit:cover; object-position:center; display:block }

.site-footer{ margin-top:2rem; padding:1rem 0; border-top:1px solid #0002 }
.footer-grid{ display:flex; justify-content:space-between; align-items:center; gap:1rem }
.socials a{ margin-right:.8rem }

/* ================== Forms ================== */
.grid.two{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1rem 1.25rem }
@media(max-width:800px){ .grid.two{ grid-template-columns:1fr } }
.grid.four{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem }
@media(max-width:1000px){ .grid.four{ grid-template-columns:repeat(2,1fr) } }

.form-section{
  background:#fff; border:1px solid #0002; border-radius:16px;
  padding:1.25rem; box-shadow:0 2px 10px #0000000f; margin:1rem 0
}

/* ⚠️ Limiter le style des labels aux formulaires (évite de casser les chips) */
form label{ display:block; margin:.4rem 0; font-weight:600; font-size:.95rem }

input, textarea, select{
  width:100%; padding:.7rem .8rem; border:1px solid #e7dcc9; border-radius:12px; background:#fff;
  box-shadow:inset 0 1px 2px #0000000a; color:#111; -webkit-text-fill-color:#111; caret-color:#111;
}
input:focus, textarea:focus, select:focus{ outline:3px solid #2E7D3226; border-color:#2E7D32 }
::placeholder{ color:#9a9a9a }
input[type=radio], input[type=checkbox]{ accent-color:#F57C00; width:16px; height:16px }

/* Radios group */
.radios{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.35rem }
.radios label{
  display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .7rem;
  border:1px solid #e7dcc9; border-radius:14px; background:#fff; flex:0 0 auto; max-width:260px
}
/* Weeks in registration forms */
.weeks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.5rem 1rem }
.weeks label{ display:flex; align-items:center; gap:.55rem; padding:.55rem .7rem; border:1px solid #e7dcc9; border-radius:12px; background:#fff }

fieldset{ border:1px solid #e7dcc9; border-radius:14px; padding:1rem }
fieldset legend{ font-family:"DM Serif Display",serif; font-weight:700 }

/* Autofill (Chrome) */
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
  -webkit-text-fill-color:#111; box-shadow:0 0 0 1000px #fff inset;
}

/* Alerts */
.alert{ background:#ffebee; border:1px solid #ffcdd2; color:#b71c1c; border-radius:12px; padding:.6rem }
.notice{ background:#e8f5e9; border:1px solid #c8e6c9; color:#1b5e20; border-radius:12px; padding:.6rem }

/* ================== Tables ================== */
.table{ display:grid; gap:.2rem }
.table .thead, .table .trow{
  display:grid; grid-template-columns:80px 150px 1fr 1fr 120px 140px;
  gap:.5rem; padding:.4rem .6rem; border-bottom:1px solid #0001
}
.table.clean .thead, .table.clean .trow{ grid-template-columns:72px 1.1fr 1.2fr 130px 1.3fr }
.table.clean .thead{ background:#fff }
.table.clean .trow{ align-items:center }

/* Toolbar */
.toolbar{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap }
.toolbar select, .toolbar .tag, .toolbar .btn{ flex:0 0 auto }
.toolbar.sticky{ position:sticky; top:.5rem; z-index:5; background:var(--bg); padding:.5rem; border:1px solid var(--ui-border); border-radius:12px }
.toolbar.sticky.floating{ box-shadow:0 8px 24px #00000010 }

/* Badges */
.badge{ display:inline-block; padding:.2rem .6rem; border-radius:999px; font-weight:600; font-size:.8rem }
.badge.neutral{ background:#f4efe6; border:1px solid var(--ui-border); color:#111 }
.badge.ok{ background:#eaf7ee; border:1px solid #cdebd6; color:var(--ui-green) }
.badge.warn{ background:#fff4e8; border:1px solid #ffe3c4; color:#a34e00 }
.badge.danger{ background:#fde8e8; border:1px solid #f8c5c5; color:var(--ui-red) }

.card{ background:var(--ui-card); border:1px solid var(--ui-border); border-radius:16px; box-shadow:var(--ui-shadow); padding:1rem }
.card h2{ margin:.2rem 0 1rem }

/* ================== Planner / Kanban ================== */
.planner{ display:grid; grid-template-columns:420px minmax(0,1fr); gap:2rem; align-items:start }
@media(max-width:1100px){ .planner{ grid-template-columns:1fr } }

.sidebar{ position:sticky; top:1rem; height:max-content; max-width:420px; width:100% }
.main{ min-width:0; position:relative }
.week-list{ display:grid; gap:.6rem }
.week-item{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:.6rem; padding:.6rem .7rem; border:1px solid #e8e2d6; border-radius:12px; background:#fff }
.week-item strong{ font-weight:700 }
.week-item small{ color:var(--ui-muted) }
.week-item .meta{ display:flex; gap:.4rem; align-items:center }

.kanban{ display:flex; gap:1rem; overflow-x:auto; padding-bottom:.5rem }
.kanban .wk{ min-width:320px; max-width:360px; flex:0 0 auto }
.wk header{ display:flex; flex-direction:column; gap:.15rem; margin-bottom:.6rem }
.wk header strong{ font-weight:800 }
.lane{ background:#fff; border:1px dashed #eadfcb; border-radius:12px; padding:.6rem; margin:.5rem 0 }
.lane .lane-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem }
.slot{ display:flex; justify-content:space-between; align-items:center; padding:.5rem .6rem; border:1px solid var(--ui-border); border-radius:10px; margin:.35rem 0; background:#fff }
.slot-actions{ display:flex; gap:.25rem }
.mini{ border:1px solid var(--ui-border); background:#fff; border-radius:8px; padding:.15rem .35rem; font-weight:700 }
.mini:hover{ border-color:#d8cdbb }
.mini.danger{ color:#c62828; border-color:#f0c7c7 }
.tag{ font-size:.78rem; padding:.15rem .45rem; border-radius:999px; border:1px solid var(--ui-border); background:#faf7f1 }
.highlight{ outline:3px solid var(--ui-accent); outline-offset:2px; border-radius:10px }

/* ===== Planning “full-width” (matrix) ===== */
.planner-top{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start }
@media(max-width:1000px){ .planner-top{ grid-template-columns:1fr } }
.plan-full{ margin-top:1rem }
.planboard{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem }
.weekcard{ background:#fff; border:1px solid #efe4d1; border-radius:14px; padding:.75rem; box-shadow:0 6px 20px #0000000a }
.weekhead{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem }
.wk-title{ font-weight:800 }
.lane-matrix{ margin:.25rem 0 }
.lane-head{ display:flex; justify-content:space-between; align-items:center; margin:.25rem 0 }
.cells{ display:grid; grid-template-columns:repeat(var(--cols),1fr); gap:.4rem }
.cell{ min-height:38px; border:1px dashed #eadfcb; border-radius:10px; display:flex; align-items:center; justify-content:center; background:#fff }
.pill{ display:inline-block; padding:.25rem .5rem; border-radius:999px; border:1px solid #e8e2d6; background:#faf7f1; font-weight:600 }

/* ================== Home “Ultra” ================== */

.hero-fore{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; padding:2.5rem 1rem }
.glass{
  max-width:1000px; width:100%; color:#111;
  background:rgba(255,255,255,.45); backdrop-filter:blur(8px);
  border:1px solid #ffffff80; border-radius:20px; padding:1.6rem; box-shadow:0 10px 30px #00000014
}
.glass .accent{ background:#fff; border-radius:10px; padding:.15rem .45rem }
.cta-group{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.8rem }
.btn.big{ padding:.7rem 1rem; border-radius:14px }
.kpi-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-top:1rem }
.kpi-card{ background:#fff; border:1px solid #efe4d1; border-radius:14px; padding:.8rem; text-align:center }
.kpi-num{ font-size:1.8rem; font-weight:800 }
.kpi-label{ opacity:.7 }

/* Features */
.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:1rem 0 }
@media(max-width:980px){ .features{ grid-template-columns:1fr } }
.feature-card{
  background:#fff; border:1px solid #efe4d1; border-radius:16px; padding:1rem;
  box-shadow:0 6px 20px #0000000a; transform:translateY(6px); opacity:0; transition:.5s;
}
.feature-card.in{ transform:none; opacity:1 }
.feature-card .icon{ font-size:1.6rem }

/* Weeks strip (home) */
.weeks-strip{ margin:1rem 0 }
.strip-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem }
.strip-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.8rem }
.week-chip{ background:#fff; border:1px solid #efe4d1; border-radius:14px; padding:.8rem; box-shadow:0 6px 20px #0000000a; opacity:0; transform:translateY(8px); transition:.5s }
.week-chip.in{ opacity:1; transform:none }
.week-chip .wk-top{ display:flex; flex-direction:column; margin-bottom:.35rem }
.bar{ display:grid; grid-template-columns:auto 1fr auto; gap:.4rem; align-items:center; margin:.25rem 0 }
.progress{ height:8px; border-radius:999px; background:#f3ece1; overflow:hidden; border:1px solid #efe4d1 }
.progress i{ display:block; height:100%; background:linear-gradient(90deg,#2E7D32,#7cb342) }

/* Gallery carousel */
.gallery-band{ margin:1rem 0 }
.band-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem }
.carousel{ display:flex; gap:.6rem; overflow:auto; scroll-behavior:smooth }
.carousel::-webkit-scrollbar{ display:none }
.slide{ flex:0 0 auto; width:260px; height:170px; border-radius:14px; overflow:hidden; border:1px solid #efe4d1; box-shadow:0 6px 18px #0000000a; opacity:0; transform:translateY(8px); transition:.5s }
.slide.in{ opacity:1; transform:none }
.slide img{ width:100%; height:100%; object-fit:cover }

/* CTA banner */
.cta-banner{ margin:1rem 0 }
.cta-inner{
  background:linear-gradient(90deg,#f8a332,#F57C00); color:#111; border-radius:16px;
  padding:1rem; display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 8px 24px #F57C0015; opacity:0; transform:translateY(8px); transition:.6s;
}
.cta-inner.in{ opacity:1; transform:none }
.cta-inner h3{ margin:.1rem 0 }

/* Sfeer / About / Map */
.sfeer{ margin:1rem 0 }
.sfeer .sub{ opacity:.75; margin-top:-.25rem }
.sfeer-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.6rem; margin-top:.6rem }
.sfeer-tile{ margin:0; border-radius:12px; overflow:hidden; border:1px solid #efe4d1; box-shadow:0 6px 14px #0000000a; opacity:0; transform:translateY(6px); transition:.5s }
.sfeer-tile.in{ opacity:1; transform:none }
.sfeer-tile img{ display:block; width:100%; height:160px; object-fit:cover }

.about-band{ margin:1rem 0 }
.about-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem }
.about-card{ background:#fff; border:1px solid #efe4d1; border-radius:14px; padding:1rem; box-shadow:0 6px 20px #0000000a; opacity:0; transform:translateY(8px); transition:.5s }
.about-card.in{ opacity:1; transform:none }
.about-card h3{ margin:.1rem 0 .3rem }

.map-section{ margin:1rem 0 }
.map-section .sub{ opacity:.75; margin-top:-.25rem }
.map-wrap{ position:relative; border-radius:16px; overflow:hidden; border:1px solid #efe4d1; box-shadow:0 8px 24px #0000000a }
.map-wrap::before{ content:""; display:block; padding-top:56.25% } /* 16:9 */
.map-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

/* ================== Candidates (Roster) ================== */
.table.roster .thead, .table.roster .trow{
  grid-template-columns:64px 1.2fr 1.6fr 150px minmax(560px,2.4fr);
  align-items:start;
}
.row-card{ background:#fff; border:1px solid #e8e2d6; border-radius:12px; padding:.6rem .7rem }
.mono{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace }
.dim{ color:#0008 }
.strong{ font-weight:700 }

.row-actions{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center }
.row-actions .divider{ width:1px; height:22px; background:#eee; margin:0 .25rem }
.row-actions .spacer{ flex:1 1 auto }

/* Chips sélection de semaines */
.wk-checks{ display:flex; flex-wrap:wrap; gap:.35rem; max-width:780px }
.wk-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.30rem .55rem; border:1px solid #e8e2d6; border-radius:999px; background:#fff;
  cursor:pointer; font-size:.92rem;
}
.wk-chip input{ margin:0 }

/* Badges “déjà liés” */
.chip.linked{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.28rem .55rem; border:1px solid #e8e2d6; border-radius:999px; background:#faf7f1; font-weight:600;
}
.chip.linked .dot{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border:1px solid #d9d2c2; border-radius:999px; font-size:.72rem; background:#fff;
}
.chip.linked .role{
  font-size:.72rem; padding:.1rem .4rem; border-radius:999px; border:1px solid #e8e2d6; background:#fff;
}
.chip.linked .role.ha{ color:#2E7D32; border-color:#cfe6d3; background:#eaf7ee }
.chip.linked .role.a { color:#a34e00; border-color:#ffe3c4; background:#fff4e8 }

/* ========= FIX chips qui sautaient à la ligne (labels globaux) ========= */
label.wk-chip{ display:inline-flex !important; align-items:center; gap:.35rem; margin:0 }
.row-actions label.tag{ display:inline-flex; align-items:center; gap:.35rem; margin:0 }


/* --- Dashboard polish overrides --- */
.admin-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:.25rem 0 1rem}
.admin-tabs a{display:inline-block;padding:.5rem .8rem;border:1px solid #e8e2d6;border-radius:12px;text-decoration:none;background:#fff}
.admin-tabs a.active{background:#F57C00;color:#fff;border-color:#3E2723}

/* KPI grid/cards */
.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.admin-card{background:#fff;border:1px solid #e8e2d6;border-radius:16px;padding:1rem;box-shadow:0 4px 18px #00000010}
.kpi{font-size:2rem;font-weight:700;margin:.2rem 0}

/* Hide any old quicklink strip if still present */
.quicklinks, .legacy-links{display:none !important}

/* Tighter, wider columns for the “laatste inzendingen” table */
.table.dash .thead,
.table.dash .trow{
  grid-template-columns:72px 160px 1.1fr 1.7fr 160px 110px; /* ID, Datum, Naam, Email, GSM, Status */
  align-items:center;
}



/* Apps table (dashboard ?view=apps) — 7 colonnes bien espacées */
.table.apps .thead,
.table.apps .trow{
  /* ID | Date | Nom | Email | GSM | Statut | Actions */
  grid-template-columns: 72px 180px 1.2fr 1.7fr 180px 150px 220px;
  align-items: center;
}

.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nowrap{white-space:nowrap}


/* ================== Responsive add-ons (append-only) ================== */

/* Images fluides */
img{max-width:100%;height:auto;display:block}

/* Container : un peu moins de marge sur mobile */
@media (max-width: 680px){
  .container{padding:0 .9rem}
}



/* ======= Grilles/sections qui se replient proprement ======= */
@media(max-width:980px){ .features{ grid-template-columns:1fr } }
@media(max-width:800px){ .grid.two{ grid-template-columns:1fr } }
@media(max-width:1000px){ .grid.four{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:620px){ .footer-grid{ flex-direction:column; align-items:flex-start } }

/* ======= Tables scrollables sur mobile (pas d’écrasement des colonnes) ======= */
.table{width:100%}
@media (max-width: 900px){
  .table{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .table .thead, .table .trow{min-width: 720px}                 /* base */
  .table.clean .thead, .table.clean .trow{min-width: 720px}     /* dernières inscr. */
  .table.dash .thead, .table.dash .trow{min-width: 860px}       /* home dashboard */
  .table.apps .thead, .table.apps .trow{min-width: 980px}       /* vue Inzendingen */
}

/* Eviter les retours moches dans les identifiants/email/GSM */
.nowrap{white-space:nowrap}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ======= Cartes admin : déjà auto-fit, ajoute juste un micro gap mobile ======= */
@media (max-width:680px){
  .admin-card{padding:.9rem}
}

/* ======= Masonry et team: rien à faire (déjà responsive dans ta base) ======= */

h1,h2,h3,h4,h5,h6,.display{font-family:"Space Grotesk","Poppins","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:.01em;}


/* Hero avec photo de fond */
.hero-ultra{
  position:relative; overflow:hidden; border-radius:24px; min-height:420px;
  background-image: linear-gradient(135deg, rgba(245,124,0,.88), rgba(230,81,0,.88)), var(--hero-photo);
  background-size: cover; background-position:center; background-repeat:no-repeat;
  box-shadow:0 8px 28px #E651001a, inset 0 1px 0 #ffffff70;
}
.hero-ultra #orb{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none }
.hero-fore{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; padding:2.5rem 1rem }
/* Emoji in features cards */
.feature-card .icon{
  font-family: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji","Inter",sans-serif;
  font-size: 2rem; line-height: 1;
}



.site-header{
  position:sticky; top:0; z-index:1000;
  padding-top:env(safe-area-inset-top);
  background:linear-gradient(90deg,#f8a332,#F57C00);
  box-shadow:0 2px 12px #00000014;
}
.site-header .container{ padding:0 clamp(12px,4vw,22px); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:var(--header-h); }

.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:#000 }
.brand .logo{ width:44px; height:44px; border-radius:12px; object-fit:cover }
.brand-text{ font-weight:800; font-size:1.05rem; letter-spacing:.02em }



/* Desktop menu */
.menu{ display:flex; gap:1.2rem; list-style:none; padding:0; margin:0 }
.menu a{ color:#000; text-decoration:none; font-weight:600; line-height:1; padding:.35rem 0 }
.site-header .btn{ padding:.5rem .95rem; border:0; border-radius:14px }

/* Mobile drawer */
@media (max-width:900px){
  .hamburger{ display:block }
  .menu{
    position:fixed; top:calc(env(safe-area-inset-top)); right:0;
    width:min(88vw,360px); height:100dvh;
    background:#fff; border-left:1px solid #e8e2d6; box-shadow:-12px 0 30px #0000001f;
    padding:16px 18px; display:flex; flex-direction:column; gap:.6rem;
    transform:translateX(100%); transition:transform .25s ease;
  }
  .menu a{ font-size:1.04rem; padding:.6rem 0; }
  .menu.open{ transform:translateX(0) }
  .backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.28);
    backdrop-filter:saturate(140%) blur(2px); opacity:0; pointer-events:none; transition:opacity .25s;
  }
  body.menu-open .backdrop{ opacity:1; pointer-events:auto }
}



/* === Mobile: petit menu sous le header (dropdown), pas de drawer === */
.site-header .nav{ position:relative; }            /* point d�ancrage */

@media (max-width:900px){
  .hamburger{ display:block; }

  /* panneau compact */
  .site-header .menu{
    position:absolute;
    right:12px;
    top:calc(var(--header-h) + 8px);
    width:min(88vw,260px);
    max-height:70vh;
    overflow:auto;
    background:#fff;
    border:1px solid var(--ui-border);
    border-radius:14px;
    box-shadow:0 12px 30px #0000001a;
    padding:.55rem;
    display:none;                 /* ferm� par d�faut */
    flex-direction:column;
    gap:.45rem;
    z-index:2000;
  }
  .site-header .menu.open{ display:flex; }

  /* liens un peu plus grands au toucher */
  .site-header .menu a{ padding:.55rem .2rem; font-size:1.02rem; }

  /* pas de backdrop pour ce mode */
  .backdrop{ display:none !important; }
}


/* ===== En-t�te : menu mobile compact ===== */
:root{ --header-h:64px; }
@media (min-width:900px){ :root{ --header-h:72px; } }

.site-header{
  position:sticky; top:0; z-index:1000;
  padding-top:env(safe-area-inset-top);
  background:linear-gradient(90deg,#f8a332,#F57C00);
  box-shadow:0 2px 12px #00000014;
}
.site-header .container{ padding:0 clamp(12px,4vw,22px); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:var(--header-h); position:relative; }

.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:#000 }
.brand .logo{ width:44px; height:44px; border-radius:12px; object-fit:cover }
.brand-text{ font-weight:800; font-size:1.05rem; letter-spacing:.02em }

/* Hamburger (version unique) */
.hamburger{ display:none; width:50px; height:44px; border:0; background:transparent; cursor:pointer; position:relative; }
.hamburger span{ position:absolute; left:10px; right:10px; height:3px; background:#111; border-radius:2px; transition:.25s }
.hamburger span:nth-child(1){ top:12px }
.hamburger span:nth-child(2){ top:20px }
.hamburger span:nth-child(3){ top:28px }
.hamburger.active span:nth-child(1){ transform:translateY(8px) rotate(45deg) }
.hamburger.active span:nth-child(2){ opacity:0 }
.hamburger.active span:nth-child(3){ transform:translateY(-8px) rotate(-45deg) }

/* Menu desktop */
.menu{ display:flex; gap:1.2rem; list-style:none; padding:0; margin:0 }
.menu a{ color:#000; text-decoration:none; font-weight:600; line-height:1; padding:.35rem 0 }
.site-header .btn{ padding:.5rem .95rem; border:0; border-radius:14px }

/* Menu mobile: dropdown fluide (pas de pleine hauteur) */
@media (max-width:900px){
  .hamburger{ display:block }
  .menu{
    position:absolute; right:12px; top:calc(var(--header-h) + 8px);
    width:min(88vw,280px);
    background:#fff; border:1px solid var(--ui-border); border-radius:14px;
    box-shadow:0 14px 32px #0000001a;
    padding:.6rem; display:flex; flex-direction:column; gap:.5rem;

    /* animation douce */
    transform-origin: top right;
    transform: translateY(-8px) scale(.98);
    opacity:0; visibility:hidden; pointer-events:none;
    transition: transform .18s ease, opacity .18s ease, visibility 0s .18s;
  }
  .menu a{ padding:.6rem .25rem; font-size:1.02rem; }
  .menu.open{
    transform:none; opacity:1; visibility:visible; pointer-events:auto;
    transition: transform .18s ease, opacity .18s ease;
  }
}


/* CTA banner � propre & fluide */
.cta-banner{ margin:1rem 0 }
.cta-inner{
  background:linear-gradient(90deg,#f8a332,#F57C00);
  color:#111; border-radius:16px; box-shadow:0 8px 24px #F57C0015;
  padding:1rem;

  /* layout */
  display:grid;
  grid-template-columns: auto 1fr auto; /* h3 | texte | bouton */
  align-items:center;
  gap:1rem;
}
.cta-inner h3{ margin:0; line-height:1.15; white-space:nowrap; }
.cta-inner p{ margin:0; }
.cta-inner .btn{ margin:0 }

/* Mobile : empilement propre */
@media (max-width:700px){
  .cta-inner{
    grid-template-columns: 1fr;      /* une seule colonne */
    gap:.7rem;
  }
  .cta-inner h3{ white-space:normal } /* autorise le wrap naturel */
  .cta-inner .btn{
    justify-self:end;                /* bouton align� � droite */
  }
}

/* ==== Galerie mosa�que + lightbox ==== */
body.no-scroll { overflow: hidden; }

.mosaic-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 8px;            /* unit� de hauteur */
  gap: 16px;
}
@media (max-width: 1100px){ .mosaic-grid { grid-template-columns: repeat(4,1fr); } }
@media (max-width: 640px){  .mosaic-grid { grid-template-columns: repeat(2,1fr); } }

.tile {
  position: relative;
  grid-column: span var(--c,2);   /* colonnes dynamiques */
  grid-row-end: span var(--r,24); /* hauteur dynamique */
  border: 0; padding: 0; cursor: zoom-in;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  background: #f3f4f6;
  transition: transform .16s ease, box-shadow .16s ease;
}
.tile:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.12); }

.tile .media { width: 100%; height: 100%; }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* survol */
.tile .shade {
  position: absolute; inset: 0; display:flex; align-items:flex-end; justify-content:flex-end;
  padding: 10px; background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0) 55%);
  opacity: 0; transition: opacity .16s ease;
}
.tile:hover .shade { opacity: 1; }
.tile .shade span { color:#fff; background: rgba(0,0,0,.35); border-radius:999px; padding:4px 8px; font-size:14px; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,.92);
  display: grid; grid-template-rows: auto 1fr auto; place-items: center;
  padding: 24px; z-index: 1000;
}
.lightbox[hidden]{ display:none; }
.lb-img { max-width: min(1200px,95vw); max-height: 85vh; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.lb-cap { color:#e5e7eb; margin-top:10px; text-align:center; max-width:min(900px,90vw); }

.lb-close {
  position:absolute; top:16px; right:16px; width:40px; height:40px; border:0; border-radius:999px;
  background: rgba(0,0,0,.55); color:#fff; font-size:20px; cursor:pointer;
}
.lb-nav {
  position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px;
  border:0; border-radius:999px; cursor:pointer; background: rgba(255,255,255,.18); color:#fff; font-size:22px;
  display:flex; align-items:center; justify-content:center;
}
.lb-nav.prev { left:20px; }
.lb-nav.next { right:20px; }
.lb-nav:hover, .lb-close:hover { filter:brightness(1.1); }


.flash{display:flex;gap:.7rem;align-items:flex-start;padding:.9rem 1rem;border-radius:12px;
  border:1px solid #00000010;box-shadow:0 8px 24px #0000000d}
.flash.success{background:#f0fdf4;border-color:#86efac}
.flash.danger{background:#fff2f0;border-color:#fca5a5}
.flash .icon{width:20px;height:20px;flex:0 0 20px}
.flash .meta{line-height:1.25}
.flash .meta strong{display:block;margin-bottom:.15rem}
.flash .close{margin-left:auto;display:grid;place-items:center;background:transparent;border:0;cursor:pointer;
  color:#14532d;opacity:.6}
.flash .close:hover{opacity:1}

/* Logo rond dans l�en-t�te */
.nav .logo,
.site-header .logo {
  width: 44px;
  height: 44px;
  border-radius: 9999px;   /* cercle */
  object-fit: cover;       /* rempli bien le cadre */
  display: block;
  background: #fff;        /* fond propre si l�image n�est pas transparente */
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.08);
}

/* Espace uniquement pour la home (section hero) */
.hero-ultra{ margin-top: clamp(12px, 2.5vw, 40px); }


.trow.empty{justify-content:center;text-align:center;color:var(--muted);border-style:dashed}
.trow.empty span{opacity:.75}