/* ================================================================
   ORCA PLONGÉE — pages intérieures (base.css)
   Ciblé sur body.outline-default -> toutes les pages SAUF l'accueil.
   Aucune dépendance à custom.js. À coller dans l'atome
   « Custom CSS / JS » de l'outline BASE, OU à ajouter à la fin de
   custom.css (il est déjà chargé partout).
   Palette « La Descente » : teal #5bc6de, charbon #15323f, Outfit.
   Structure ciblée : #g-navigation (fixe, global) puis
   #g-container-main > #g-mainbar (<main>) > .g-content > le contenu.
   ================================================================ */

/* La police Outfit doit être importée ICI aussi : sur les pages
   intérieures, custom.css n'est pas chargé, donc sans cet import le
   menu et les titres retomberaient sur une police système. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ---------- 0. NAVIGATION — complète et AUTONOME ----------
   Sur les pages intérieures, custom.css n'est PAS chargé : base.css doit
   contenir lui-même toute la mise en page du menu (identique à l'accueil,
   mais barre foncée pleine au lieu de la nav transparente du hero). */
body.outline-default #g-navigation{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:linear-gradient(180deg,#0c3346,#0a2c40);
  box-shadow:0 2px 18px rgba(0,0,0,.22);
  overflow:visible;border:none;
  font-family:'Outfit',sans-serif;
}
body.outline-default #g-navigation .g-container{position:relative;}
body.outline-default #g-navigation .g-grid{position:relative;display:flex;align-items:center;min-height:72px;}

/* Logo centré, à la taille de la barre (pas le géant 110px du hero) */
body.outline-default #g-navigation .g-block:has(.g-logo){
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:auto;flex:none;padding:0;z-index:1001;
}
body.outline-default #g-navigation .g-logo img{
  height:58px;width:auto;max-height:none;display:block;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.4));
}

/* Menu pleine largeur ; le groupe droit est poussé à droite -> écart central
   pour le logo (5e item = début du groupe droit), identique à l'accueil. */
body.outline-default #g-navigation .g-block:has(.g-main-nav){width:100%;max-width:100%;flex:1 1 100%;display:flex;align-items:center;}
body.outline-default #g-navigation .g-block:has(.g-main-nav) > .g-content{width:100%;flex:1 1 100%;}
body.outline-default #g-navigation .g-main-nav{width:100%;}
body.outline-default #g-navigation .g-main-nav .g-toplevel{
  display:flex;align-items:center;list-style:none;margin:0;padding:0;width:100%;
  font-family:'Outfit',sans-serif;
}
body.outline-default #g-navigation .g-main-nav .g-toplevel > li{white-space:nowrap;}
body.outline-default #g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container{
  color:#eaf6fb;font-weight:500;font-size:.9rem;font-family:'Outfit',sans-serif;
  padding:.5em .55em;letter-spacing:.01em;
}
body.outline-default #g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container:hover{color:#5bc6de;}
body.outline-default #g-navigation .g-main-nav .g-toplevel > li:nth-child(5){margin-left:auto;}

/* Sous-menus */
body.outline-default #g-navigation .g-dropdown,
body.outline-default #g-navigation .g-dropdown .g-dropdown-column{background:#0c3346;}
body.outline-default #g-navigation .g-dropdown{z-index:1100;box-shadow:0 12px 30px rgba(0,0,0,.35);}
body.outline-default #g-navigation .g-dropdown .g-menu-item-container{color:#eaf6fb;font-family:'Outfit',sans-serif;}

/* Tablette (768–1080px) : logo + libellés réduits */
@media (min-width:48rem) and (max-width:67.5rem){
  body.outline-default #g-navigation .g-logo img{height:50px;}
  body.outline-default #g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container{font-size:.8rem;padding:.5em .35em;}
}
/* Mobile : Gantry reprend le hamburger, logo centré compact */
@media (max-width:47.99rem){
  body.outline-default #g-navigation{overflow:visible;}
  body.outline-default #g-navigation .g-grid{min-height:66px;}
  body.outline-default #g-navigation .g-logo img{height:50px;}
  /* Hamburger : FIXE pour rester visible au scroll (par défaut absolute
     dans #g-page-surround -> défile hors écran). */
  body.outline-default .g-offcanvas-toggle{position:fixed !important;top:16px !important;left:14px !important;z-index:100002 !important;}
  body.outline-default .g-offcanvas-toggle .fa{color:#eaf6fb !important;font-size:22px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.55));}
}

/* ---------- Menu mobile (offcanvas) — raccord palette « La Descente » ----------
   Fond abysse + texte clair + accents teal #5bc6de, police Outfit (identique
   à l'accueil pour la cohérence entre toutes les pages). */
body.outline-default #g-offcanvas{background:linear-gradient(180deg,#0c3346,#06263a) !important;font-family:'Outfit',sans-serif;}
/* Neutralise les fonds teal-vert du thème (ul + li actif) */
body.outline-default #g-offcanvas .g-toplevel,body.outline-default #g-offcanvas .g-toplevel li{background:transparent !important;}
body.outline-default #g-offcanvas .g-toplevel{padding:6px 0;}
body.outline-default #g-offcanvas .g-menu-item-container{color:#eaf6fb !important;font-family:'Outfit',sans-serif;font-weight:500;}
body.outline-default #g-offcanvas .g-toplevel > li{border-bottom:1px solid rgba(255,255,255,.07);}
body.outline-default #g-offcanvas .g-menu-item-container:hover{color:#5bc6de !important;background:rgba(91,198,222,.08);}
body.outline-default #g-offcanvas li.active > .g-menu-item-container{color:#5bc6de !important;background:rgba(91,198,222,.12);box-shadow:inset 3px 0 0 #5bc6de;}
body.outline-default #g-offcanvas .g-dropdown{background:rgba(0,0,0,.2) !important;}
body.outline-default #g-offcanvas .g-dropdown .g-menu-item-container{padding-left:32px;font-size:.94em;}
/* Sous-niveaux du drill-down mobile : le thème les met en teal-vert -> fond abysse */
body.outline-default #g-offcanvas .g-sublevel{background:linear-gradient(180deg,#0c3346,#06263a) !important;}
body.outline-default #g-offcanvas .g-sublevel > li{border-bottom:1px solid rgba(255,255,255,.07);}
/* Flèches lisibles : le thème met l'indicateur en BOÎTE teal avec un chevron
   teal PAR-DESSUS (teal sur teal = invisible). On retire la boîte et on dessine
   nous-mêmes un chevron teal net (indépendant de FontAwesome). */
body.outline-default #g-offcanvas .g-menu-parent-indicator{
  background:transparent !important;border:none !important;box-shadow:none !important;
  border-radius:0 !important;color:#5bc6de !important;min-width:30px;text-align:center;
}
/* Le thème ne pose pas de glyphe FA ici (content vide dans l'offcanvas) : on
   injecte un chevron Unicode (police système, aucune dépendance FontAwesome). */
body.outline-default #g-offcanvas .g-menu-parent-indicator:after{
  content:"\203A" !important;                 /* › vers la droite */
  font-family:'Outfit',Arial,sans-serif !important;font-weight:700 !important;
  color:#5bc6de !important;opacity:1 !important;font-size:1.4rem !important;line-height:1 !important;
}
/* Bouton retour (‹) */
body.outline-default #g-offcanvas .g-go-back > .g-menu-item-container{color:#5bc6de !important;font-weight:600;background:rgba(91,198,222,.10);}
body.outline-default #g-offcanvas .g-go-back .g-menu-parent-indicator:after{content:"\2039" !important;}  /* ‹ vers la gauche */

/* ---------- 1. Décalage sous la nav fixe + fond de la descente ---------- */
body.outline-default #g-container-main{
  position:relative;
  padding-top:118px;padding-bottom:70px;
  background:linear-gradient(180deg,#eaf5fb 0%,#d3e9f2 100%);
}
@media (max-width:47.99rem){
  body.outline-default #g-container-main{padding-top:92px;padding-bottom:44px;}
}

/* ---------- 2. Le contenu = carte blanche flottante sur la profondeur ---------- */
body.outline-default #g-mainbar{
  color:#33505f;font-family:'Outfit',-apple-system,Segoe UI,Roboto,sans-serif;
  max-width:1000px;margin:0 auto;
  background:#fff;border-radius:20px;
  padding:52px 56px !important;
  box-shadow:0 24px 60px rgba(12,74,104,.16);
}
@media (max-width:47.99rem){
  body.outline-default #g-mainbar{padding:32px 22px !important;border-radius:14px;}
}
body.outline-default #g-mainbar h1,
body.outline-default #g-mainbar h2,
body.outline-default #g-mainbar h3,
body.outline-default #g-mainbar h4{
  font-family:'Outfit',sans-serif;color:#15323f;letter-spacing:-.01em;line-height:1.15;
}
body.outline-default #g-mainbar h1{
  font-size:clamp(2rem,4.4vw,3rem);font-weight:800;margin:0 0 .6em;
}
/* Petit trait teal sous le titre principal */
body.outline-default #g-mainbar h1::after{
  content:"";display:block;width:64px;height:4px;border-radius:2px;margin-top:.35em;
  background:linear-gradient(90deg,#5bc6de,#2a8fb0);
}
/* Page Actualités (blog_list) : le template blog ne génère pas de <h1>.
   On injecte le titre « Actualités » en haut de la carte, style identique
   aux autres pages (trait teal via un fond dégradé en bas du bloc). */
body.blog_list #g-mainbar::before{
  content:"Actualités";display:block;
  font-family:'Outfit',sans-serif;font-weight:800;color:#15323f;letter-spacing:-.01em;
  font-size:clamp(2rem,4.4vw,3rem);line-height:1.15;
  padding-bottom:.42em;margin:0 0 .7em;
  background:linear-gradient(90deg,#5bc6de,#2a8fb0) left bottom / 64px 4px no-repeat;
}
body.outline-default #g-mainbar h2{
  font-size:clamp(1.4rem,2.8vw,1.9rem);font-weight:700;color:#2a8fb0;margin:1.6em 0 .5em;
}
body.outline-default #g-mainbar h3{font-size:1.2rem;font-weight:700;margin:1.3em 0 .4em;}
body.outline-default #g-mainbar p{line-height:1.75;margin:0 0 1.1em;}
body.outline-default #g-mainbar strong{color:#15323f;}
body.outline-default #g-mainbar a{
  color:#2a8fb0;text-decoration:none;border-bottom:1px solid rgba(91,198,222,.5);
  transition:color .2s,border-color .2s;
}
body.outline-default #g-mainbar a:hover{color:#5bc6de;border-color:#5bc6de;}
body.outline-default #g-mainbar ul li,
body.outline-default #g-mainbar ol li{margin:.35em 0;line-height:1.7;}

/* ---------- 3. Boutons génériques ---------- */
body.outline-default #g-mainbar .button,
body.outline-default #g-mainbar .btn{
  display:inline-flex;align-items:center;gap:.5em;padding:.8em 1.7em;border-radius:999px;
  background:#5bc6de;color:#0c2430 !important;font-weight:600;border:none;text-decoration:none;
  box-shadow:0 8px 20px rgba(91,198,222,.35);transition:transform .18s,background .18s;
}
body.outline-default #g-mainbar .button:hover,
body.outline-default #g-mainbar .btn:hover{background:#74d3e8;transform:translateY(-2px);}

/* ---------- 4. Footer (déjà sombre en global, on garantit la lisibilité) ---------- */
body.outline-default #g-footer{color:#9fc1d2;}
body.outline-default #g-footer a{color:#8fb2c4;border:none;}
body.outline-default #g-footer a:hover{color:#5bc6de;}