/*
Theme Name: Livret d'accueil Riad
Description: Styles Nowistay-like pour livret d'accueil (hero, cartes, pills, menu langue avec drapeaux)
Version: 1.2.0
*/

:root{
  --ns-bg: #f4f7fb;
  --ns-card: #ffffff;
  --ns-text: #15202b;
  --ns-sub: #5b6b7b;
  --ns-brand: #1a73e8;
  --ns-muted: #e9eef5;
  --ns-shadow: 0 10px 30px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.04);
  --ns-radius: 18px;
  --ns-pill-radius: 16px;
  --ns-wrap: 1040px;

  /* largeur colonne Nowistay ~ 860px (contenu), carte ~ 760px */
  --nowi-content: 860px;   /* largeur max de la colonne centrale */
  --nowi-card:    760px;   /* largeur max du bandeau qui chevauche */
  --nowi-pad:     16px;    /* marge latérale sur petits écrans */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: var(--ns-bg);
  color: var(--ns-text);
  font: 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
}

.ns-wrap{ width:min(100%, var(--ns-wrap)); margin:0 auto; padding:0 20px; }

/* Header */
.ns-header{ position:sticky; top:0; z-index:40; background:#fff; border-bottom:1px solid var(--ns-muted); }
.admin-bar .ns-header{ top:32px; }
.ns-header__inner{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.ns-logo a{ color:var(--ns-text); text-decoration:none; font-weight:700; }
.ns-header__right{ display:flex; align-items:center; gap:12px; }

/* Lang menu custom (CSS only) */
.ns-langmenu{ position:relative; outline:none; }
.ns-langmenu:focus-within .ns-langmenu__list{ opacity:1; transform:translateY(4px); pointer-events:auto; }
.ns-langmenu__btn{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--ns-muted); background:#fff; cursor:pointer;
  padding:8px 12px; border-radius:999px; font-weight:700;
}
.ns-flag{ width:18px; height:12px; object-fit:cover; border-radius:2px; }
.ns-lang-code{ font-size:12px; color:#344054; letter-spacing:.4px; }
.ns-caret{ width:8px; height:8px; border-right:2px solid #667085; border-bottom:2px solid #667085; transform:rotate(45deg); margin-left:2px; }
.ns-langmenu__list{
  position:absolute; right:0; top:100%;
  background:#fff; border:1px solid #e6ebf2; border-radius:14px;
  box-shadow: var(--ns-shadow);
  margin-top:6px; list-style:none; padding:8px; width:220px;
  opacity:0; transform:translateY(0); pointer-events:none; transition:.18s ease;
}
.ns-langmenu__item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; text-decoration:none; color:#111827; font-weight:600;
}
.ns-langmenu__item:hover{ background:#f3f6fb; }
.ns-langmenu__item.is-current{ background:#eef4ff; }

/* Burger (mobile only) */
.ns-burger{ display:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--ns-muted); background:#fff; cursor:pointer; }
.ns-burger span{ display:block; width:18px; height:2px; background:#344054; margin:5px auto; }
@media (max-width:768px){ .ns-burger{ display:block; } }

/* Colonne centrée */
body .ns-container,
body .ns-wrap,
body .container,
body .wrap,
body .site-content,
body #primary,
body main .container,
body main .wrap,
body .entry-content > .alignwide,
body .wp-site-blocks {
  max-width: var(--nowi-content) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--nowi-pad) !important;
  padding-right: var(--nowi-pad) !important;
}

/* Hero */
.ns-hero{ margin:18px 0 0; border-radius:var(--ns-radius); overflow:hidden; box-shadow:var(--ns-shadow); background:#000; display:flex; justify-content:center; }
.ns-hero img{
  display:block;
  width:100%;
  max-width: var(--nowi-content);
  height: clamp(230px, 33vw, 440px); /* hero plus haut */
  object-fit:cover; object-position:center; border-radius:10px;
}

/* Carte de bienvenue */
.ns-card{ background:var(--ns-card); border-radius:var(--ns-radius); box-shadow:var(--ns-shadow); }
.ns-welcome{
  display:flex; gap:16px; align-items:center;
  padding:14px 16px; /* padding réduit */
  margin:-40px auto 22px; position:relative;
  max-width: var(--nowi-card);
  transform: translateY(-40%);
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.ns-avatar{ width:44px; height:44px; border-radius:50%; background:#eaf1ff; color:#3b82f6; font-weight:800; display:grid; place-items:center; flex:0 0 44px; }
.ns-title{ margin:0 0 6px 0; font-size:clamp(22px, 2.2vw, 28px); letter-spacing:.2px; }
.ns-subtitle{ margin:0; color:var(--ns-sub); }

/* Titre sous l’image (Guide d’accueil) */
.ns-guide-title{
  margin:-10px auto 18px;
  max-width: var(--nowi-card);
  font-size:1.25rem;
  font-weight:700;
  text-align:left;
  color:var(--ns-text);
}

/* Pills */
.ns-guide{ display:flex; flex-direction:column; gap:12px; margin:8px 0 28px; }
.ns-pill{ display:grid; grid-template-columns:36px 1fr 16px; align-items:center; gap:14px; text-decoration:none; color:inherit; background:#fff; border:1px solid #eef2f7; border-radius:var(--ns-pill-radius); padding:16px 18px; box-shadow:0 1px 2px rgba(16,24,40,.04); transition: box-shadow .2s, transform .05s, border-color .2s; }
.ns-pill:hover{ border-color:#d9e3f1; box-shadow:0 6px 18px rgba(16,24,40,.08); }
.ns-pill:active{ transform:translateY(1px); }
.ns-pill__ico{ font-size:18px; display:grid; place-items:center; }
.ns-pill__label{ font-weight:600; }
.ns-pill__chev{ color:#98a2b3; font-weight:700; }

/* Contenu libre */
.ns-content{ margin:28px 0 40px; }
.ns-content p{ color:#2f3a45; }

/* Footer */
.ns-footer{ margin-top:24px; border-top:1px solid var(--ns-muted); background:#fff; }
.ns-footer__inner{ height:64px; display:flex; align-items:center; justify-content:center; }
.ns-footer p{ margin:0; color:#667085; font-size:14px; }

/* Divers */
h1,h2,h3{ color:var(--ns-text); }
a{ color:var(--ns-brand); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Ajustement grand écran */
@media (min-width:1200px){
  .ns-welcome{ transform: translateY(-42%); }
}

/* Ajustement mobile */
@media (max-width:768px){
  :root{
    --nowi-content: 100%;
    --nowi-card: calc(100% - 2*var(--nowi-pad));
  }
  .ns-welcome{
    transform: translateY(-26%);
    border-radius:12px;
    padding:12px 14px;
  }
}