/* =========================================================
   CAPNATU — APP.CSS (composants / UI)
   => La TRAME (fond / scroll / header non-sticky / footer) est dans trame.css
   ========================================================= */

/* Base reset (sans background, géré par trame.css) */
*{box-sizing:border-box}
html,body{height:100%}
html,body{margin:0;padding:0}

/* Body: on laisse la typo + overflow-x, mais pas le background (géré par trame.css) */
body{
  min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  overflow-x:hidden;
}

/* Liens */
a{color:inherit;text-decoration:none}



/* ====== APP HEADER ======
   IMPORTANT: la position (sticky/relative) est gérée par trame.css
   On garde ici uniquement le style visuel.
*/

/* ======================
 HEADER TRANSPARENT
====================== */

.app-header{

  /* transparence */
  background: rgba(20,20,20,0.55);

  /* effet verre moderne */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* petite ombre élégante */
  box-shadow: 0 2px 10px rgba(0,0,0,.25);

}


/*.app-header{
/*couleur du bandeau logo - nom - drapeau 
  z-index: 1100;
  padding-top: env(safe-area-inset-top);

  background: rgba(202, 233, 252, 1);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);

  border-bottom: 1px solid rgba(15,34,48,.08);
}*/

.app-header-inner{
  height: 52px;
  display: grid;
  grid-template-columns: 44px 1fr 44px; /* logo / titre / langue */
  align-items: center;

  max-width: 560px;
  margin: 0 auto;
  padding: 0 12px;
}

.app-header-logo{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.app-header-logo img{
  width: 50px;
  height: 48px;
  border-radius: 10px;
  display:block;
}

.app-header-title{
  text-align:center;
  pointer-events:none;
}

.app-title{
  font-weight:900;
  font-size:15.5px;
  letter-spacing:.22em;
  text-transform:uppercase;

  background: linear-gradient(
    180deg,
    #0b3550 0%,
    #0f4e75 50%,
    #08324a 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

.app-header-title::after{
  content:"";
  display:block;
  width:42px;
  height:2px;
  margin:6px auto 0;
  border-radius:2px;
  background: linear-gradient(90deg,#128c83,#0b2f45);
  opacity:.6;
}


/* ====== LAYOUT ======
   La trame (scroll/height/padding bottom) est gérée par trame.css.
   On garde juste les contraintes de largeur.
*/
.app{
  max-width:520px;
  margin:0 auto;
  min-height:100%;
}

/* Containers */
.container{padding:5px}
.spacer{height:16px}

/* =========================================================
   Surfaces glass (composants)
   (on remplace les variables par valeurs équivalentes en dur)
   ========================================================= */
.hero,
.card,
.editor,
.sheet,
.row,
.select,
.btn,
.btn-mini{
  background: rgba(255,255,255,.88);
  border:1px solid rgba(15,34,48,.12);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.hero{
  text-align:center;
  padding:16px;
  border-radius:18px;
}
.hero-title{font-size:24px;font-weight:900}
.hero-subtitle{margin-top:6px;color:#6b7c8f;font-size:14px}

/* ====== GRID / CARDS — Style "app" moderne ====== */
.grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

/* Cards : même hauteur, look app */
.card{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;

  padding:14px 14px 12px;
  border-radius:18px;

  /* même taille pour toutes */
  min-height:118px;

  /* fond et bord "soft" */
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,34,48,.10);

  /* ombre app */
  box-shadow: 0 10px 22px rgba(0,0,0,.10);

  /* animation */
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
  overflow:hidden;
}

/* accent couleur (barre verticale + petit glow) */
.card::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:6px;
  border-radius:18px 0 0 18px;
  background: var(--c1, #128c83);
  opacity:.95;
}

.card::after{
  content:"";
  position:absolute;
  left:-30px; top:-30px;
  width:120px; height:120px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 65%);
  opacity:.55;
  pointer-events:none;
}

/* Hover desktop */
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0,0,0,.16);
}

/* Tap mobile */
.card:active{
  transform: translateY(0) scale(.985);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  filter: brightness(.98);
}

/* Typo */
.card-title{
    text-align:center;
  font-weight: 950;
  font-size: 18.5px;
  letter-spacing: .2px;
  color:#0f2230;
}

.card-desc{
  margin-top: 6px;
  color: rgba(15,34,48,.68);
  font-size: 12.2px;
  line-height: 1.35;
}

/* ===== Couleurs automatiques par card =====
   Tu peux réordonner les couleurs si tu veux.
*/
.grid .card:nth-child(1){ --c1:#128c83; } /* turquoise */
.grid .card:nth-child(2){ --c1:#228dcf; } /* bleu */
.grid .card:nth-child(3){ --c1:#f06a5f; } /* corail */
.grid .card:nth-child(4){ --c1:#7c5cff; } /* violet */
.grid .card:nth-child(5){ --c1:#f5b942; } /* jaune/or */
.grid .card:nth-child(6){ --c1:#2bb673; } /* vert */
.grid .card:nth-child(7){ --c1:#ff5aa5; } /* rose */
.grid .card:nth-child(8){ --c1:#0b2f45; } /* bleu nuit */

/* Si tu as plus de 8 cards, ça boucle "visuellement" en reprenant */
.grid .card:nth-child(8n + 1){ --c1:#128c83; }
.grid .card:nth-child(8n + 2){ --c1:#228dcf; }
.grid .card:nth-child(8n + 3){ --c1:#f06a5f; }
.grid .card:nth-child(8n + 4){ --c1:#7c5cff; }
.grid .card:nth-child(8n + 5){ --c1:#f5b942; }
.grid .card:nth-child(8n + 6){ --c1:#2bb673; }
.grid .card:nth-child(8n + 7){ --c1:#ff5aa5; }
.grid .card:nth-child(8n + 8){ --c1:#0b2f45; }

/* ===== Responsive : plus de colonnes sur grand écran (facultatif) ===== */
@media (min-width: 900px){
  .grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .card{ min-height: 126px; }
}




/* ====== BOTTOM NAV ======
   La trame et l’adaptation langues est ajustée dans trame.css.
   Ici on garde ton style de base tel quel.
*/
.bottom-nav{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:0;

  width:min(520px, calc(100% - 16px));
  display:flex;
  gap:6px;

  padding:10px 10px calc(10px + env(safe-area-inset-bottom));
  border-top-left-radius:18px;
  border-top-right-radius:18px;

  background: rgba(255,255,255,.90);
  border:1px solid rgba(255,255,255,.35);
  box-shadow: 0 -10px 28px rgba(0,0,0,.14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  z-index:1000;
}

.bn-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;

  padding:9px 6px;
  border-radius:14px;
  color:#6b7c8f;
}

.bn-item.active{
  color:#128c83;
  font-weight:900;
  background: rgba(18,140,131,.10);
  border: 1px solid rgba(18,140,131,.16);
}

/* ====== SELECT / BUTTONS ====== */
.map-toolbar{margin:0 0 10px}

.select{
  width:100%;
  padding:12px;
  border-radius:16px;
  font-weight:900;
  color:#0f2230;
  background: rgba(255,255,255,.78);
  box-shadow: 0 12px 30px rgba(16,24,40,.14);
}

.stack{display:flex;flex-direction:column;gap:10px}

.btn{
  display:block;
  text-align:center;
  padding:14px;
  border-radius:18px;
  font-weight:900;
  background: rgba(255,255,255,.78);
  box-shadow: 0 12px 30px rgba(16,24,40,.14);
}

.btn.primary,
.btn-mini.primary{
  background: linear-gradient(180deg, rgba(18,140,131,1), rgba(14,108,100,1));
  color:#fff;
  border:0;
  box-shadow: 0 14px 30px rgba(18,140,131,.22);
}

/* ====== MINI BUTTONS / ROWS (si utilisés) ====== */
.row{
  padding:10px;
  border-radius:18px;
  margin-bottom:10px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 12px 30px rgba(16,24,40,.14);
}

.row-top{display:flex;align-items:center;gap:10px}
.row-title{flex:1;font-weight:1000}
.row-emoji{opacity:.9}

.row-actions{display:flex;gap:10px;margin-top:10px}

.btn-mini{
  flex:1;
  text-align:center;
  padding:10px;
  border-radius:16px;
  font-weight:1000;
  background: rgba(255,255,255,.78);
  border:1px solid rgba(22,34,56,.12);
  box-shadow: 0 12px 30px rgba(16,24,40,.14);
}

/* ====== MAP / PINS ====== */
.pin-emoji{background:transparent;border:0}

.pin{
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border-radius:14px;
  background: rgba(255,255,255,.88);
  border:1px solid rgba(22,34,56,.12);
  box-shadow: 0 12px 30px rgba(16,24,40,.14);
}

#map.map{ height:20vh; min-height:520px; }

.map-osm{
  height:60vh;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(22,34,56,.10);
  box-shadow: 0 12px 30px rgba(16,24,40,.14);
}

/* ====== SHEET ====== */
.sheet{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(70px + env(safe-area-inset-bottom));
  width: min(520px, calc(100vw - 24px));
  max-height: 46vh;

  border-radius: 20px;
  overflow:hidden;
  z-index: 900;
}
.sheet.closed{ max-height:52px; }

.sheet-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid rgba(22,34,56,.10);
}
.sheet-title{font-weight:1000}

.sheet-toggle{
  border:1px solid rgba(22,34,56,.12);
  background: rgba(255,255,255,.72);
  color: #0f2230;
  border-radius: 14px;
  padding:7px 10px;
  cursor:pointer;
  font-weight:900;
}

.sheet-list{padding:10px; overflow:auto; max-height: calc(46vh - 52px);}
.sheet.closed .sheet-list{display:none;}

/* ====== LEAFLET POPUPS (si utilisés) ====== */
.leaflet-popup-content-wrapper{
  border-radius:18px;
  background: rgba(255,255,255,.90);
  color: #0f2230;
  border:1px solid rgba(22,34,56,.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px rgba(16,24,40,.14);
}
.leaflet-popup-tip{ background: rgba(255,255,255,.90); }
.leaflet-popup-content{
  margin:12px 14px;
  font-size:13px;
  line-height:1.35;
}

/* ====== DESKTOP ====== */
@media (min-width:900px){
  .app{max-width:560px}
  .bottom-nav{width:560px;padding:1px}
  .app-header-inner{ height: 56px; }
  .app-title{ font-size: 16.5px; letter-spacing: .26em; }
}

@media (max-width:1200px){
  .bottom-nav{width:374px;padding:3px}
}


/*=====================================*/
/* STYLE POUR LE CHANGEMENT DE LANGUES */
/* (compatible avec ton header en GRID) */
/*=====================================*/


    /* Modal langues (au cas où ton CSS ne l'a pas) */
    .lang-modal{
      position:fixed; inset:0;
      display:none;
      align-items:center; justify-content:center;
      background:rgba(0,0,0,.55);
      z-index:9999;
      padding:16px;
    }
    .lang-modal-content{
      width:min(360px, 92vw);
      background:#0b2f45;
      border:1px solid rgba(255,255,255,.12);
      border-radius:16px;
      padding:16px;
      color:#fff;
      box-shadow:0 10px 30px rgba(0,0,0,.35);
    }
    .lang-modal-content h3{
      margin:0 0 12px 0;
      font-size:16px;
      letter-spacing:.2px;
    }
    .lang-modal-content ul{
      list-style:none; padding:0; margin:0;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }
    .lang-option{
      width:100%;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.06);
      color:#fff;
      border-radius:12px;
      padding:10px 12px;
      font-size:14px;
      text-align:left;
      cursor:pointer;
    }
    .lang-option:active{ transform:scale(.98); }
    .lang-btn{
      border:0;
      background:transparent;
      font-size:40px;
      cursor:pointer;
      line-height:1;
    }
    /* On cache le switcher natif GTranslate */
    .gtranslate_wrapper{ display:none !important; }