/* CaDEA — couche de raffinement typographique et spatial.
   Chargée en dernier. Ne remplace pas les feuilles existantes : elle en corrige
   la hiérarchie, le rythme vertical et les traitements trop appuyés. */

:root{
  /* Ancrage institutionnel conservé (bleu marine + or), tons resserrés. */
  --navy:#0a2440;
  --navy-2:#123a63;
  --navy-3:#1a5285;
  --gold:#b8923f;
  --gold-2:#8f6f26;
  --ink:#141d2b;
  --ink-2:#3a4658;
  --muted:#697689;
  --line:#e3e8ef;
  --paper:#faf8f4;

  --serif:'Spectral', 'Libre Baskerville', Georgia, serif;
  --sans:'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Échelle typographique (quarte, 1.333) */
  --t-xs:.8125rem;
  --t-sm:.9375rem;
  --t-base:1.0625rem;
  --t-lg:1.3rem;
  --t-xl:1.75rem;
  --t-2xl:2.35rem;
  --t-3xl:3.1rem;

  --shadow-sm:0 1px 2px rgba(10,36,64,.05);
  --shadow:0 8px 28px rgba(10,36,64,.08);
  --shadow-lg:0 24px 64px rgba(10,36,64,.12);
}

body{
  font-family:var(--sans);
  font-size:var(--t-base);
  line-height:1.65;
  color:var(--ink-2);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,.news-card h3,.person h4{
  font-family:var(--serif);
  color:var(--navy);
  font-weight:600;
  letter-spacing:-.012em;
  line-height:1.18;
  text-wrap:balance;
}
h1{font-size:clamp(2.1rem,4.6vw,var(--t-3xl));font-weight:500}
h2{font-size:clamp(1.6rem,3.1vw,var(--t-2xl));font-weight:500}
h3{font-size:var(--t-xl);font-weight:600}
h4{font-size:var(--t-lg);font-weight:600}

/* Longueur de ligne lisible : sous 80 caractères. */
.section-head p,.page-hero p,.hero p{max-width:64ch;line-height:1.7}
.section-head{margin-bottom:44px}

/* Marqueur de section : le libellé en capitales espacées dans une pastille est
   un traitement générique. Remplacé par un intitulé discret en italique, posé
   sur un filet court qui signale le début de section. */
.eyebrow,
.globe-section .section-head .eyebrow{
  display:block !important;
  font-family:var(--serif) !important;
  font-style:italic !important;
  font-size:var(--t-sm) !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:var(--gold-2) !important;
  background:none !important;
  padding:0 0 0 0 !important;
  border-radius:0 !important;
  margin:0 0 14px !important;
}
.eyebrow::before{
  content:"";display:block;width:34px;height:2px;
  background:var(--gold);margin:0 0 12px;
}
.section-head[style*="text-align:left"] .eyebrow::before,
.globe-section .section-head .eyebrow::before{margin-left:auto;margin-right:auto}
.section-head:not([style]) .eyebrow::before{margin-left:auto;margin-right:auto}
.globe-section .section-head .eyebrow{color:var(--gold) !important}

/* Rythme vertical plus généreux : l'espace est le premier signal de qualité. */
section{padding:88px 0}
section.alt,section.cream{padding:88px 0}
@media (max-width:760px){
  section{padding:56px 0}
  section.alt,section.cream{padding:56px 0}
  .section-head{margin-bottom:32px}
}

/* Surfaces : hiérarchie de rayon plutôt qu'un rayon unique partout. */
.news-card,.highlight,.person,.value-card{border-radius:4px}
.btn,.donate-btn,.donate-btn-lg{border-radius:2px}
.news-card{box-shadow:var(--shadow-sm);border:1px solid var(--line);transition:border-color .25s ease}
.news-card:hover{box-shadow:var(--shadow-sm);border-color:var(--gold);transform:none}

/* Boutons : moins de contraste décoratif, plus de tenue. */
.btn{
  font-family:var(--sans);font-weight:600;font-size:var(--t-sm);
  letter-spacing:.01em;text-transform:none;padding:15px 30px;
}

/* Liens de contenu : soulignement fin plutôt que couleur seule. */
main p a:not(.btn){
  color:var(--navy-3);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:rgba(26,82,133,.35);
}
main p a:not(.btn):hover{text-decoration-color:var(--navy-3)}

/* Mouvement : une entrée discrète, pas une animation par bloc.
   Le glissement vertical marqué sur chaque section est un défaut générique. */
.reveal{transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
  .marquee-track,.tagline-strip .tagline-track{animation:none !important}
  .chatbot-launcher::before{animation:none !important}
  *{scroll-behavior:auto !important}
}

/* Accessibilité clavier : focus visible et cohérent. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

/* Formulaires : champs plus calmes, alignés sur la grille typographique. */
.field label{font-size:var(--t-sm);font-weight:600;color:var(--ink);letter-spacing:0}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:var(--t-base);
  border:1px solid var(--line);border-radius:3px;padding:13px 15px;
  transition:border-color .2s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--navy-3);outline:none;
  box-shadow:0 0 0 3px rgba(26,82,133,.1);
}

/* Le pied de page conserve la charte PAM demandée : on n'y touche pas,
   hormis la police de base pour rester cohérent avec le reste du site. */
.un-footer,.un-footer .foot-main p,.un-footer .foot-main a{font-family:var(--sans)}
.un-footer .donate-band h3{font-family:var(--serif);font-weight:500}

/* ===== Menu mobile : sous-menu « Formation » =====
   Les règles du méga-menu de bureau (polish.css) emploient !important et des
   sélecteurs .open très spécifiques qui débordaient sur le mobile : le
   sous-menu restait en grille, et à l'ouverture il conservait un
   translateX(-50%) qui décalait son contenu hors de l'écran. On rétablit ici
   un comportement d'accordéon simple, en pleine largeur. */
@media (max-width:1024px){
  .un-nav .menu .has-sub{width:100%;position:static}

  .un-nav .menu .has-sub .submenu,
  .un-nav .menu .has-sub:hover .submenu{
    display:none !important;
    position:static !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:4px 0 8px !important;
    background:#0d0d0d !important;
    border:0 !important;
    border-left:3px solid #009edb !important;
    border-radius:0 !important;
    box-shadow:none !important;
    transition:none !important;
  }
  /* Ouverture uniquement au toucher, via la classe posée par le script. */
  .un-nav .menu .has-sub.open .submenu{
    display:block !important;
    transform:none !important;
  }

  /* Chaque entrée occupe toute la largeur et le texte peut revenir à la ligne. */
  .un-nav .menu .has-sub .submenu a{
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;
    min-height:0 !important;
    padding:12px 22px !important;
    margin:0 !important;
    background:transparent !important;
    border:0 !important;
    border-bottom:1px solid #23262b !important;
    border-radius:0 !important;
    white-space:normal !important;
    overflow-wrap:anywhere;
    color:#eaf2fb !important;
    font-size:.9rem !important;
    line-height:1.35 !important;
    transform:none !important;
  }
  .un-nav .menu .has-sub .submenu a:last-child{border-bottom:0 !important}
  .un-nav .menu .has-sub .submenu a small{
    display:block !important;
    margin-top:3px !important;
    white-space:normal !important;
    overflow-wrap:anywhere;
    color:#9fb0c6 !important;
    font-size:.78rem !important;
    line-height:1.45 !important;
  }

  /* Indicateur d'état sur le bouton parent. */
  .un-nav .menu .has-sub > button{
    display:flex !important;align-items:center !important;width:100% !important;
  }
  .un-nav .menu .has-sub > button::after{
    content:"+";margin-left:auto;padding-left:12px;
    font-size:1.05rem;line-height:1;opacity:.75;
  }
  .un-nav .menu .has-sub.open > button::after{content:"–"}

  /* Le menu doit pouvoir défiler sans rogner la dernière entrée. */
  .un-nav .menu{
    max-height:calc(100vh - 120px) !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding-bottom:16px !important;
  }
}
@supports (height:100dvh){
  @media (max-width:1024px){
    .un-nav .menu{max-height:calc(100dvh - 120px) !important}
  }
}

/* ===== Bascule carte Equal Earth / globe 3D ===== */
.wv-switch{
  display:flex;justify-content:center;gap:8px;margin:28px auto 0;
  padding:5px;border-radius:3px;width:fit-content;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
}
.wv-btn{
  appearance:none;cursor:pointer;
  font-family:var(--sans);font-size:.86rem;font-weight:600;
  padding:11px 22px;border-radius:2px;border:0;
  background:transparent;color:#c3cee3;
  transition:background .2s ease,color .2s ease;
}
.wv-btn:hover:not(:disabled){color:#fff;background:rgba(255,255,255,.08)}
.wv-btn.is-active{background:#fff;color:#0a2440}
.wv-btn:disabled{opacity:.4;cursor:not-allowed}
.wv-status{
  text-align:center;margin:14px 0 0;font-size:.82rem;color:#9fb0c6;
}
.globe-wrap{
  position:relative;height:520px;max-width:980px;margin:28px auto 0;
  border-radius:8px;overflow:hidden;
  background:radial-gradient(circle at 50% 45%,#0b1c33 0%,#050e1c 75%);
  box-shadow:0 24px 64px rgba(0,0,0,.28);
}
#cadea-globe{width:100%;height:100%;cursor:grab}
#cadea-globe:active{cursor:grabbing}
@media (max-width:760px){
  .globe-wrap{height:360px;margin-top:20px}
  .wv-btn{padding:10px 15px;font-size:.8rem}
  .wv-switch{width:100%;box-sizing:border-box}
  .wv-btn{flex:1}
}