/* =========================
   THEME "APPLI" (Basque/ Bordeaux) — Responsive Moderne
   ========================= */

:root{
  --bg: #f6f7f9;
  --card: #ffffff;
  --text: #111;
  --muted: #6b7280;

  --green: #0b6a4a;   /* vert basque */
  --red: #7b0f22;     /* rouge bordeaux */

  --border: #e9e9ee;
  --shadow: 0 12px 30px rgba(0,0,0,0.08);

  --radius: 18px;
  --radius-sm: 14px;

  --maxw: 1100px;
}

/* Base */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
}

a{ color: var(--green); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 92px 16px 20px; /* espace pour header sticky */
}
@media (max-width: 720px){
  .container{ padding-top: 112px; }
}
@media (max-width: 420px){
  .container{ padding-left: 12px; padding-right: 12px; }
}

/* Typo */
h1{ font-size: 24px; margin: 8px 0 14px; letter-spacing:-.2px; }
h2{ font-size: 16px; margin: 0 0 10px; }
small{ color: var(--muted); }

/* Cards */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin: 14px 0;
}
@media (max-width: 420px){
  .card{ padding: 14px; border-radius: 16px; }
}

/* Layout helpers */
.row{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}
.grid{
  display:grid;
  gap: 12px;
}
.grid.two{ grid-template-columns: 1fr 1fr; }
.grid.three{ grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 980px){
  .grid.three{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .grid.two, .grid.three{ grid-template-columns: 1fr; }
}

/* =========================
   HEADER APP
   ========================= */
.appbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  background: linear-gradient(90deg, var(--green), var(--red));
  color: #fff;
  box-shadow: var(--shadow);
}

.appbar .inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.brand{
  display:flex;
  flex-direction:column;
  line-height:1.1;
  min-width: 180px;
}
.brand .title{
  font-weight: 900;
  letter-spacing: .2px;
}
.brand .subtitle{
  font-size: 12px;
  opacity: .92;
}

.nav{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content:flex-end;
  align-items:center;
}

/* chips */
.nav a{
  color:#fff;
  font-weight:800;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.18);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap: 8px;
}
.nav a:hover{
  background: rgba(255,255,255,0.22);
  text-decoration:none;
}

.nav .badge{
  margin:0;
  padding: 2px 7px;
  font-size: 11px;
}

/* Mobile header: brand puis nav scrollable */
@media (max-width: 820px){
  .appbar .inner{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .brand{ min-width: 0; }
  .nav{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content:flex-start;
    padding-bottom: 2px;
  }
  .nav::-webkit-scrollbar{ height: 6px; }
  .nav::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.25); border-radius: 999px; }
}

/* =========================
   HEADER PUBLIC (login/register)
   ========================= */
.publicbar{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 999;
  background: linear-gradient(90deg, var(--green), var(--red));
  color: white;
  box-shadow: var(--shadow);
}

.public-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 16px;
}

.public-title{
  font-weight: 900;
  letter-spacing: .3px;
}
.public-subtitle{
  font-size: 12px;
  opacity: .9;
}

.public-links{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content:flex-end;
  align-items:center;
}
.public-links a{
  color:#fff;
  font-weight:800;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.18);
  text-decoration:none;
  opacity:.95;
}
.public-links a:hover{
  background: rgba(255,255,255,0.22);
  opacity:1;
}

@media (max-width: 820px){
  .public-inner{ flex-direction: column; align-items:stretch; }
  .public-links{
    flex-wrap: nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    justify-content:flex-start;
  }
}

/* Décalage contenu quand non connecté */
body:not(.logged) .container{ padding-top: 96px; }
@media (max-width: 820px){
  body:not(.logged) .container{ padding-top: 126px; }
}

/* =========================
   Inputs / forms
   ========================= */
input, select, textarea{
  width: 100%;
  max-width: 360px;
  padding: 11px 12px;
  border: 1px solid #dcdce6;
  border-radius: 14px;
  background:#fff;
  outline:none;
  font-size: 14px;
}

textarea{ min-height: 96px; max-width: 680px; }

input:focus, select:focus, textarea:focus{
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(11,106,74,0.14);
}

@media (max-width: 720px){
  input, select, textarea{ max-width: 100%; }
}

/* Form grid helper (si tu veux l’utiliser) */
.form-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  align-items:end;
}

/* =========================
   Buttons (harmonisé)
   ========================= */
.btn, button{
  appearance: none;
  border: 0;
  border-radius: 14px;
  padding: 11px 14px;
  cursor:pointer;
  font-weight: 900;
  letter-spacing: .15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  transition: transform .02s ease-in-out, opacity .15s, filter .15s;
}
.btn:active, button:active{ transform: translateY(1px); }

.btn-green{ background: var(--green); color:#fff; }
.btn-red, button{ background: var(--red); color:#fff; }

.btn-soft{
  background: rgba(11,106,74,0.10);
  color: var(--green);
  border: 1px solid rgba(11,106,74,0.18);
}
.btn-ghost{
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  color:#fff;
}

button:hover, .btn:hover{ filter: brightness(1.03); }
button:disabled, .btn:disabled{ opacity:.55; cursor:not-allowed; }

/* =========================
   Badges
   ========================= */
.badge{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid #e6e6e6;
  background: #f0f0f3;
  white-space: nowrap;
}
.badge.ok{
  background: #eaf7f1;
  border-color: #cfeee0;
  color: var(--green);
}
.badge.no{
  background: #ffecec;
  border-color: #ffd0d0;
  color: var(--red);
}

/* “Actions” historiques (optionnel) */
.badge.act-request{background:#eaf7f1;border-color:#cfeee0;color:var(--green);}
.badge.act-accept{background:#e8f5ff;border-color:#cfe7ff;color:#075985;}
.badge.act-refuse{background:#ffecec;border-color:#ffd0d0;color:var(--red);}
.badge.act-return{background:#f3f4f6;border-color:#e5e7eb;color:#111;}

/* Alerts */
.alert{
  padding:12px 14px;
  border-radius: 14px;
  margin: 10px 0;
  font-weight: 900;
  border:1px solid transparent;
}
.alert.ok{ background:#eaf7f1; border-color:#cfeee0; color:var(--green); }
.alert.no{ background:#ffecec; border-color:#ffd0d0; color:var(--red); }
.alert.warn{ background:#fff7e6; border-color:#ffe2a8; color:#a16207; }

/* =========================
   Tables (scroll + mobile cards)
   ========================= */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
  border: 1px solid #eee;
  background:#fff;
}
table{
  width:100%;
  border-collapse: collapse;
  min-width: 780px;
}
th, td{
  padding: 12px 10px;
  border-bottom: 1px solid #eee;
  vertical-align: top;
  text-align:left;
}
th{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color:#555;
  background:#fafafa;
}
tr:hover td{ background:#fcfcfc; }

/* Mode cartes automatique sur mobile (si tu ajoutes data-label dans les <td>) */
@media (max-width: 720px){
  table{ min-width: 0; }
  .table-wrap{ border:none; background:transparent; }
  table, thead, tbody, th, td, tr{ display:block; }
  thead{ display:none; }
  tr{
    background:#fff;
    border:1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 10px 12px;
    margin: 10px 0;
  }
  td{
    border:none;
    padding: 8px 0;
  }
  td[data-label]::before{
    content: attr(data-label);
    display:block;
    font-size: 12px;
    font-weight: 900;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-bottom: 3px;
  }
}

/* =========================
   Tool cards
   ========================= */
.tool-card{
  transition: 0.15s ease;
  cursor: default;
}
.tool-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.10);
}

/* header de carte outil */
.tool-top{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  align-items:flex-start;
}
.tool-left{ display:flex; flex-direction:column; gap: 10px; }
.tool-right{ display:flex; flex-direction:column; align-items:flex-end; gap: 8px; }
.tool-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.tool-actions .badge{ cursor:pointer; text-decoration:none; }

/* vignette */
.tool-photo{
  width:220px;
  max-width:220px;
  overflow:hidden;
  border-radius: 14px;
}
.tool-photo img{
  width:100%;
  height: 140px;
  object-fit: cover;
  display:block;
  border-radius: 14px;
}

/* Sur mobile: photo pleine largeur */
@media (max-width: 720px){
  .tool-top{ flex-direction: column; align-items:stretch; }
  .tool-right{ align-items:flex-start; }
  .tool-photo{ width:100%; max-width: 100%; }
  .tool-photo img{ height: 180px; }
  .tool-actions{ justify-content:flex-start; }
}

.tool-name{
  font-weight: 950;
  font-size: 16px;
}
.tool-name a{ text-decoration:none; font-weight:950; }
.tool-meta{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* KV blocs */
.kv{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid #eee;
  background: #fafafa;
  min-width: 150px;
}
.kv .k{ font-size: 12px; color: var(--muted); font-weight:900; }
.kv .v{ font-weight: 900; }

/* =========================
   Photo principale tool.php
   ========================= */
.tool-photo-main{
  display:flex;
  justify-content:center;
  margin: 10px 0 16px;
}
.tool-photo-main img{
  display:block;
  width:100%;
  max-width: 560px;
  border-radius: 18px;
  box-shadow: var(--shadow);
}
@media (max-width: 720px){
  .tool-photo-main img{ max-width: 100%; }
}

/* Favori étoile */
a.favstar{
  font-size: 18px;
  text-decoration:none;
  display:inline-block;
  transform: translateY(1px);
}
a.favstar:hover{ opacity:.75; }

/* =========================
   Timeline mini calendrier
   ========================= */
.timeline{
  margin-top: 10px;
  padding: 10px;
  background: #f3f4f6;
  border-radius: 12px;
  overflow-x: auto;
  white-space: nowrap;
}
.timeline-bar{
  display:flex;
  height: 26px;
  border-radius: 8px;
  overflow:hidden;
  background:#e5e7eb;
}
.slot{ height:100%; min-width:18px; }
.slot.free{ background:#d1fae5; }
.slot.busy{ background: var(--red); }

.timeline-legend{
  margin-top: 6px;
  font-size: 12px;
  display:flex;
  gap: 12px;
}
.legend-box{
  display:inline-block;
  width:14px;
  height:14px;
  border-radius: 3px;
  vertical-align: middle;
}
.legend-free{ background:#d1fae5; }
.legend-busy{ background: var(--red); }

/* =========================
   Footer
   ========================= */
.footer{
  margin-top: 18px;
  padding: 18px 0 30px;
}
.footer-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 16px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.footer-left{
  display:flex;
  flex-direction:column;
  gap: 4px;
  color: #222;
}
.footer-left small{ color: #6b7280; }
.footer-right{
  display:flex;
  align-items:center;
  gap: 10px;
}
.footer-right a{ color: var(--green); font-weight: 900; }
.footer-right .dot{ color: #c3c3c3; }

@media (max-width: 560px){
  .footer-inner{ flex-direction: column; align-items:flex-start; }
}

/* =========================
   Auth pages (login/register/forgot/rules)
   ========================= */
.auth-wrap{ max-width: 860px; margin: 0 auto; }
.auth-card{ padding: 18px; }
.auth-form{
  display:grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  align-items:end;
}
@media (max-width: 820px){
  .auth-form{ grid-template-columns: 1fr; }
  .auth-form button{ width:100%; }
}

/* Code */
code{
  background:#f3f3f3;
  border:1px solid #e6e6e6;
  border-radius: 10px;
  padding: 2px 6px;
}


/* =========================
   HEADER RESPONSIVE (burger)
   ========================= */

/* Empêche le débordement du header sur petit écran */
.appbar .inner{
  min-height: 56px;
}

/* Le checkbox est caché */
.nav-toggle{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Burger caché sur desktop */
.nav-burger{
  display: none;
  width: 44px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.14);
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

/* 3 barres */
.nav-burger span{
  display:block;
  width: 18px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}

/* Desktop nav : ok */
@media (min-width: 901px){
  .nav{
    display:flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content:flex-end;
    align-items:center;
  }
}

/* Mobile: burger + menu déroulant */
@media (max-width: 900px){
  .nav-burger{ display: inline-flex; }

  .nav{
    position: absolute;
    top: 64px;
    right: 12px;
    left: 12px;
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 16px;

    /* ✅ NET */
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 14px 32px rgba(0,0,0,0.18);

    /* ❌ on enlève l'effet vitre floue */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav a{
    width: 100%;
    display:flex;
    justify-content: space-between;
    align-items:center;
    padding: 12px 12px;
    font-size: 14px;

    /* liens lisibles sur fond blanc */
    color: #111 !important;
    background: #f6f7f9;
    border: 1px solid rgba(0,0,0,0.06);
  }

  .nav a:hover{
    background:#eef2f7;
    text-decoration:none;
  }

  .nav-toggle:checked ~ .nav{ display: flex; }

  .container{ padding-top: 86px; }
}