/*!
 * Glace Carbonique Agadir — thème partagé (mode lecture)
 * Chargé APRÈS le <style> propre à chaque page : il remplace les couleurs,
 * les polices et ajoute la couche de transition entre pages.
 * Aucun contenu n'est modifié par ce fichier.
 */

/* ---------- Polices auto-hébergées (aucune requête vers Google) ---------- */
@font-face{font-family:'Manrope';src:url('/assets/fonts/manrope-var.woff') format('woff');font-weight:200 800;font-style:normal;font-display:swap;}
@font-face{font-family:'Unbounded';src:url('/assets/fonts/unbounded-var.woff') format('woff');font-weight:200 900;font-style:normal;font-display:swap;}
/* Les pages existantes appellent « Lora » et « Reem Kufi » : on les redirige vers Manrope,
   ce qui applique la nouvelle typographie partout sans toucher à leur code. */
@font-face{font-family:'Lora';src:url('/assets/fonts/manrope-var.woff') format('woff');font-weight:200 800;font-style:normal;font-display:swap;}
@font-face{font-family:'Lora';src:url('/assets/fonts/manrope-var.woff') format('woff');font-weight:200 800;font-style:italic;font-display:swap;}
@font-face{font-family:'Reem Kufi';src:url('/assets/fonts/manrope-var.woff') format('woff');font-weight:200 800;font-style:normal;font-display:swap;}

/* ---------- Palette Agadir (océan, turquoise, sable, glacier) ---------- */
:root:root:root,
:root:root:root[data-theme]{
  color-scheme:dark;
  --bg:#0f161b; --bg-soft:#121b22; --surface:#152129; --surface-2:#1b2a34;
  --ink:#e9eef0; --ink-soft:#b4dadc; --ink-faint:#79a7a9;
  --ochre:#2ec4be; --ochre-deep:#228a85; --ochre-ink:#83e7f3;
  --ocean:#8fa8ff; --ocean-bright:#b5c6ff;
  --gold:#4bdae8; --gold-bright:#4bdae8; --green:#7ee2a8; --teal:#6fc7c7;
  --line:rgba(75,218,232,.26); --line-soft:rgba(143,192,194,.16);
  --shadow:0 18px 40px -20px rgba(0,0,0,.65);
  /* jetons propres au nouveau design */
  --gcm-safran:#4bdae8; --gcm-safran-clair:#83e7f3; --gcm-glacier:#8fd3ff;
  --gcm-ocean:#2f55e0; --gcm-terre:#0f161b;
}

html{background:#0f161b;}
body{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16.5px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
h1,h2{font-family:'Unbounded','Manrope',system-ui,sans-serif;font-weight:600;letter-spacing:-.01em;}
h1{font-size:clamp(24px,3.4vw,38px);line-height:1.2;}
h2{line-height:1.25;}
h3{font-family:'Manrope',system-ui,sans-serif;font-weight:700;}
::selection{background:rgba(75,218,232,.35);color:#ffffff;}
a{text-underline-offset:3px;}
:focus-visible{outline:3px solid #83e7f3;outline-offset:3px;}

/* ---------- En-tête commun (identique à l'accueil 3D) ---------- */
.sitenav{background:rgba(15,22,27,.82);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(75,218,232,.14);box-shadow:none;}
.brand{font-family:'Unbounded','Manrope',sans-serif;font-weight:700;font-size:14px;color:#e9eef0;letter-spacing:.01em;}
.brand-city{color:#4bdae8;}
.brand-logo{width:30px;height:30px;flex-shrink:0;display:block;}
.navlinks > a,.dropdown-toggle{font-weight:600;color:#ced8db;}
.navlinks > a:hover,.dropdown-toggle:hover{background:rgba(75,218,232,.10);color:#83e7f3;}
.navlinks > a[aria-current="page"],.dropdown-toggle[aria-current="page"]{background:rgba(75,218,232,.14);color:#83e7f3;}
.dropdown-menu{background:#152129;border-color:rgba(75,218,232,.2);}
.dropdown-menu a:hover{background:#1b2a34;}
.search-toggle{background:rgba(255,255,255,.04);border-color:rgba(143,192,194,.25);color:#e9eef0;}
.btn-nav-whatsapp{border-radius:999px;background:#2f9e5f;}
.nav-toggle span{background:#e9eef0;}
.sitenav-inner{max-width:1200px;gap:12px;}
.navlinks{flex-wrap:nowrap;}
.navlinks > a,.dropdown-toggle{font-size:13.5px;padding:8px 10px;white-space:nowrap;}
@media (max-width:1100px){.brand-city{display:none;}}
@media (max-width:520px){.btn-nav-whatsapp{display:none;}.brand{font-size:13px;}}
@media (max-width:900px){.navlinks{background:#0f161b;}}

/* ---------- En-têtes de page : même lumière terracotta que l'accueil 3D ---------- */
header.hero,header.pagehero{
  background:radial-gradient(ellipse at 78% 30%,#228a85 0%,#1c3344 42%,#0f161b 82%) !important;
}
header.hero h1,header.pagehero h1{color:#e9eef0;}
.lead{background:rgba(6,11,14,.35) !important;border-color:rgba(75,218,232,.25) !important;border-radius:14px !important;}
.eyebrow{color:#4bdae8;font-weight:700;}
.price-pill{background:#4bdae8 !important;color:#0f161b !important;border-radius:14px !important;flex-wrap:wrap;padding:10px 18px !important;width:fit-content;max-width:100%;}

/* ---------- Composants : coins arrondis et boutons pilule comme la maquette ---------- */
.btn{border-radius:999px;font-weight:700;}
.btn-primary{background:#4bdae8;color:#0f161b;}
.btn-primary:hover{filter:brightness(1.08);}
.domain-card,.pricing,.why,.clients-strip,.blog-teaser-card,.price-tile,.callout,.side-box,.card,.faq-item,details{border-radius:18px;}
.callout{border-radius:0 14px 14px 0;}
input,select,textarea{border-radius:12px;}
footer.cta{background:radial-gradient(ellipse at 50% 0%,#2346c7 0%,#13236e 55%,#0a1033 100%) !important;}
footer.sitemap{background:#0b1115;border-top-color:rgba(143,192,194,.14);}
.wa-float,.call-float,.catalogue-float{font-family:'Manrope',sans-serif;}
.catalogue-float{background:#20b3ad;}
.wa-float{background:#1e7b46;}
.call-float{background:#2f55e0;}
.wa-float svg,.call-float svg,.catalogue-float svg{width:16px;height:16px;flex-shrink:0;}
table{border-radius:12px;overflow:hidden;}
img{max-width:100%;height:auto;}

/* ---------- Transitions entre pages (View Transitions API, navigateurs récents) ---------- */
@view-transition{navigation:auto;}
.sitenav{view-transition-name:gcm-nav;}
::view-transition-old(root){animation:gcm-out .26s cubic-bezier(.4,0,1,1) both;}
::view-transition-new(root){animation:gcm-in .42s cubic-bezier(0,0,.2,1) both;}
::view-transition-group(gcm-nav){animation-duration:0s;}
@keyframes gcm-out{to{opacity:0;filter:blur(6px);transform:scale(.985);}}
@keyframes gcm-in{from{opacity:0;filter:blur(8px);transform:scale(1.015);}}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none;}
  *,*::before,*::after{scroll-behavior:auto !important;}
}

/* ---------- Menu « Blog & articles » : sous-menu Agroalimentaire (5 rubriques) ---------- */
.dd-sub{position:relative;}
.dd-sub-toggle{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;padding:8px 30px 8px 10px;border:0;background:none;
  color:inherit;font:inherit;font-size:13px;text-align:left;border-radius:3px;cursor:pointer;position:relative;}
.dd-sub-toggle small{font-family:'Manrope',sans-serif;font-size:11px;color:var(--ink-faint);font-weight:400;}
.dd-sub-toggle::after{content:"";position:absolute;right:12px;top:50%;width:6px;height:6px;border-left:1.8px solid currentColor;border-bottom:1.8px solid currentColor;
  transform:translateY(-50%) rotate(45deg);opacity:.75;transition:transform 200ms cubic-bezier(.23,1,.32,1);}
.dd-sub-toggle:hover,.dd-sub.open>.dd-sub-toggle,.dd-sub:focus-within>.dd-sub-toggle{background:#1b2a34;}
.dd-subpanel{display:none;flex-direction:column;gap:1px;}
.dd-subpanel a .dd-dot{width:7px;height:7px;}
.dd-subpanel a.dd-all{margin-top:3px;padding-top:8px;border-top:1px solid var(--line-soft);font-weight:600;color:#83e7f3;}
@media (min-width:901px){
  .dd-blog .dropdown-menu{left:auto;right:0;}
  /* Le volet s'ouvre à gauche du menu ; une marge invisible garde le survol en traversant l'espace */
  .dd-subpanel{position:absolute;top:-9px;right:100%;min-width:268px;padding:8px;margin-right:6px;background:#152129;
    border:1px solid rgba(75,218,232,.2);border-radius:14px;box-shadow:0 18px 40px -20px rgba(0,0,0,.65);}
  .dd-subpanel::after{content:"";position:absolute;top:0;bottom:0;left:100%;width:10px;}
  .dd-sub:hover>.dd-subpanel,.dd-sub:focus-within>.dd-subpanel,.dd-sub.open>.dd-subpanel{display:flex;}
  /* Volet long (10 rubriques) : sans sous-titres sur ordinateur pour rester dans l'écran */
  .dd-subpanel.cols2{top:-100px;}
  .dd-subpanel.cols2 a small{display:none;}
  .dd-subpanel.cols2 a{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:9px;padding-top:7px;padding-bottom:7px;}
  .dd-subpanel.cols2 a .dd-dot{margin:0;flex:none;}
}
@media (max-width:900px){
  .dd-sub-toggle::after{transform:translateY(-70%) rotate(-45deg);}
  .dd-sub.open>.dd-sub-toggle::after{transform:translateY(-30%) rotate(135deg);}
  .dd-sub.open>.dd-subpanel{display:flex;margin:2px 0 6px 12px;padding-left:10px;border-left:1px solid rgba(75,218,232,.25);}
}

/* ---------- Menu mobile : le flou d'arrière-plan crée un bloc conteneur pour les éléments « fixed »
   et réduisait le panneau du menu à une seule ligne. On le retire sous 900 px. ---------- */
@media (max-width:900px){
  .sitenav{-webkit-backdrop-filter:none;backdrop-filter:none;background:#0f161b;}
  .navlinks{height:calc(100dvh - 58px);}
}
.menu-open .wa-float,.menu-open .call-float,.menu-open .catalogue-float{opacity:0;pointer-events:none;}

/* ---------- Bouton flottant « Calculateur » (ajouté par nav-sub.js au-dessus de « Catalogue ») ---------- */
.calc-float{position:fixed;right:16px;bottom:178px;z-index:70;display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:30px;
  background:#4bdae8;color:#0f161b !important;text-decoration:none;font-family:'Manrope',sans-serif;font-size:12.5px;font-weight:700;
  box-shadow:0 8px 20px -6px rgba(0,0,0,.4);transition:opacity .3s ease,transform .3s ease;}
.calc-float svg{width:16px;height:16px;flex-shrink:0;}
.calc-float:active{transform:scale(.97);}
@media (max-width:480px){.calc-float{padding:12px;}.calc-float span{display:none;}}
.menu-open .calc-float,.in-3d .calc-float{opacity:0;pointer-events:none;}
@media (hover:hover) and (pointer:fine){.calc-float:hover{filter:brightness(1.06);transform:translateY(-2px);}}