/* ─────────────────────────────────────────────────────────────────────────
   Pasifika AI — les pages de contenu.
   Même océan, même vitre que l'assistant : on ne change pas de maison quand
   on change de page. Ici la vitre s'allonge et se lit ; là-bas elle écoute.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --ecume:#8fe3df; --lagon:#39b3ad; --corail:#f4a56a; --sable:#f3efe7; --brume:#a9c2cc;
  --verre:rgba(9,40,54,.46); --verre-fort:rgba(9,40,54,.66);
  --fil:rgba(255,255,255,.13); --fil-fort:rgba(255,255,255,.22);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:#04202c; color:var(--sable);
  font:400 16px/1.7 ui-sans-serif,-apple-system,"Segoe UI",Inter,system-ui,sans-serif;
  min-height:100dvh; display:flex; flex-direction:column; align-items:center;
  padding:26px 18px calc(18px + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ecume);text-decoration:none}
a:hover{text-decoration:underline}

#ocean{position:fixed;inset:0;z-index:0;pointer-events:none;display:block}
.voile{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 110%,rgba(2,14,22,.55),transparent 60%)}

.vitre{
  position:relative; z-index:1; width:100%; max-width:820px;
  background:var(--verre); border:1px solid var(--fil); border-radius:22px;
  backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 24px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.07);
  padding:clamp(22px,4vw,44px);
}

/* ── Le fil d'Ariane ── */
.fil{font-size:13px;color:var(--brume);margin-bottom:22px;letter-spacing:.01em}
.fil a{color:var(--brume)}
.fil a:hover{color:var(--ecume)}

/* ── Typographie ── */
h1{
  font-size:clamp(26px,4.4vw,38px); line-height:1.18; font-weight:650;
  letter-spacing:-.018em; margin-bottom:16px; text-wrap:balance;
}
h2{
  font-size:clamp(17px,2.4vw,20px); font-weight:600; letter-spacing:-.008em;
  margin:34px 0 14px; padding-top:20px; border-top:1px solid var(--fil);
  color:var(--ecume);
}
p{margin-bottom:14px;color:rgba(243,239,231,.9)}
.chapo{font-size:clamp(16px,2.1vw,17.5px);line-height:1.72;color:rgba(243,239,231,.96)}

/* ── Les langues, en pastilles ── */
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.tags li{
  font-size:13.5px; padding:5px 12px; border-radius:999px;
  background:rgba(255,255,255,.055); border:1px solid var(--fil); color:var(--sable);
}

/* ── Les institutions ── */
.insts{list-style:none;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(255px,1fr))}
.insts a{
  display:block; padding:11px 14px; border-radius:13px;
  background:rgba(255,255,255,.04); border:1px solid var(--fil);
  color:var(--sable); transition:background var(--t,.18s) var(--ease),border-color .18s var(--ease),transform .18s var(--ease);
}
.insts a:hover{background:rgba(143,227,223,.09);border-color:var(--fil-fort);text-decoration:none;transform:translateY(-1px)}
.insts b{display:block;font-weight:550;font-size:14.5px;line-height:1.35}
.insts span{display:block;font-size:12px;color:var(--brume);margin-top:3px;font-variant-numeric:tabular-nums}

/* ── Les questions : elles ouvrent la conversation ── */
.qs{list-style:none;display:grid;gap:7px}
.qs a{
  display:block; padding:12px 16px; border-radius:14px; color:var(--sable);
  background:rgba(255,255,255,.04); border:1px solid var(--fil); line-height:1.5;
  transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease);
}
.qs a:hover{background:rgba(143,227,223,.09);border-color:var(--fil-fort);text-decoration:none;transform:translateX(2px)}

/* ── L'appel ── */
.cta{margin:32px 0 0;padding-top:24px;border-top:1px solid var(--fil)}
.bouton{
  display:inline-block; padding:12px 22px; border-radius:999px; font-weight:550;
  color:#04202c; background:linear-gradient(135deg,var(--ecume),var(--lagon));
  box-shadow:0 8px 24px rgba(57,179,173,.26);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.bouton:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 12px 30px rgba(57,179,173,.34)}

footer{position:relative;z-index:1;margin-top:26px;font-size:13px;color:var(--brume);text-align:center}

@media (max-width:560px){
  .insts{grid-template-columns:1fr}
  .vitre{border-radius:18px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ── La barre, dans le contexte d'une page de contenu ──
   Ici l'en-tête vit AU-DESSUS de la vitre, pas dedans comme sur l'accueil :
   il lui faut sa propre largeur et son propre plan, sinon il se recentre sur
   son contenu et passe sous l'océan. */
body > .barre{
  position:relative; z-index:2;
  width:100%; max-width:820px;
  padding:0 4px 18px;
}
body > footer{width:100%;max-width:820px}