/* =========================================================
   Plaskito — identité visuelle
   Feuille partagée par toutes les pages, chargée en dernier.
   Palette, typographie, header, footer et boutons.
   ========================================================= */

:root{
  /* Palette Plaskito */
  --color-primary:#0314CF;   /* Bleu outremer : titres, liens, boutons */
  --color-night:#001E73;     /* Bleu nuit : fonds sombres */
  --color-footer:#00113F;    /* Bleu nuit profond : footer */
  --color-accent:#F23A2E;    /* Rouge tomate : accent, petites surfaces uniquement */
  --color-sand:#EEF1FD;      /* Bleu très clair : blocs mis en avant, texte du footer */
  --color-bg:#FAFAF8;        /* Blanc cassé : fond de page */
  --color-ink:#1A1A1A;       /* Encre : texte */

  /* Neutres dérivés (contraste AA sur sable et blanc cassé) */
  --color-muted:#5F6470;
  --color-line:#E8DFCF;

  --font-display:"Unbounded","DM Sans",system-ui,sans-serif;
  --font-body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Variables historiques du site, rebranchées sur la palette */
  --primary:var(--color-primary);
  --primary-light:var(--color-primary);
  --primary-dark:var(--color-night);
  --accent:var(--color-primary);
  --accent-light:var(--color-primary);
  --accent-soft:color-mix(in srgb, var(--color-primary) 10%, transparent);
  --bg:var(--color-bg);
  --bg-sand:var(--color-sand);
  --bg-light:var(--color-sand);
  --text:var(--color-ink);
  --text-muted:var(--color-muted);

  --header-h:84px;

  /* Largeur de page (comme robries.com) : 1456px de contenu + 40px de marge */
  --container:1536px;
  --gutter:40px;
}

/* ---------- Base ---------- */
html, body{background:var(--color-bg)}
body{font-family:var(--font-body); color:var(--color-muted)}

h1, h2{
  font-family:var(--font-display) !important;
  font-weight:700 !important;
  letter-spacing:-0.02em;
}
/* L'arabe n'est pas couvert par Unbounded : police système, sans interlettrage négatif */
html[dir="rtl"] h1, html[dir="rtl"] h2{letter-spacing:0}

.hero-eyebrow, .section-eyebrow, .pro-eyebrow, .mat-eyebrow{
  text-transform:uppercase; letter-spacing:.3em !important;
}
html[dir="rtl"] .hero-eyebrow, html[dir="rtl"] .section-eyebrow,
html[dir="rtl"] .pro-eyebrow, html[dir="rtl"] .mat-eyebrow{letter-spacing:0 !important}

a{color:inherit}

/* ---------- Boutons ---------- */
.btn{border-radius:8px}

/* =========================================================
   Header
   ========================================================= */
:root:root:root body header.nav{
  height:var(--header-h) !important;
  background:var(--color-bg) !important;
  border-bottom:1px solid var(--color-line);
  box-shadow:none !important;
}
:root:root:root body.scrolled-nav header.nav{box-shadow:0 4px 14px rgba(0,30,115,.08) !important}

:root:root:root body header.nav .inner{
  display:flex !important; align-items:center !important; justify-content:flex-start !important;
  gap:18px !important; direction:ltr !important;
}
:root:root:root[dir="rtl"] body header.nav .inner{direction:rtl !important}

:root:root:root body header.nav .logo{
  order:0 !important; flex:0 0 auto; margin:0 !important; transform:none !important; height:auto !important;
}
:root:root:root body header.nav .logo img{width:150px !important; height:auto !important; display:block}

:root:root:root body header.nav .links{
  order:1 !important; flex:1 1 auto; justify-content:center; gap:4px !important;
  margin:0 !important; top:0 !important; height:auto !important;
}
:root:root:root[dir="rtl"] body header.nav .links{direction:rtl}
:root:root:root body header.nav .links a{
  font-family:var(--font-body) !important; font-weight:500 !important; font-size:.95rem !important;
  color:var(--color-ink) !important; padding:0 10px !important; height:40px !important;
}
:root:root:root body header.nav .links a:hover,
:root:root:root body header.nav .links a:focus-visible,
:root:root:root body header.nav .links a.active{color:var(--color-primary) !important}
:root:root:root body header.nav .links a::after{background:var(--color-primary) !important; bottom:4px !important}
:root:root:root body header.nav .links a.active::after{
  content:"" !important; position:absolute; left:10px !important; right:10px; width:auto !important;
  height:2px; margin:0 !important; bottom:4px !important;
}

/* Sélecteur de langue : icône globe, liste FR / EN / AR au clic */
:root:root:root body header.nav .lang-globe{order:2 !important; position:relative; display:flex; align-items:center; margin:0}
.lang-globe-btn{
  display:flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0;
  background:transparent; border:none; border-radius:8px; cursor:pointer; transition:background .15s;
}
.lang-globe-btn img{width:22px; height:22px; display:block}
.lang-globe-btn:hover, .lang-globe-btn[aria-expanded="true"]{background:var(--color-sand)}
.lang-globe-btn:focus-visible{outline:2px solid var(--color-primary); outline-offset:2px}
.lang-menu{
  position:absolute; top:calc(100% + 10px); right:0; z-index:10003; min-width:170px; padding:6px;
  display:flex; flex-direction:column; gap:2px;
  background:var(--color-bg); border:1px solid var(--color-line); border-radius:10px;
  box-shadow:0 12px 28px rgba(0,30,115,.12);
}
.lang-menu[hidden]{display:none}
html[dir="rtl"] .lang-menu{right:auto; left:0}
.lang-menu a{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 12px; border-radius:6px;
  font-family:var(--font-body); font-weight:500; font-size:.92rem; line-height:1.2;
  color:var(--color-ink); text-decoration:none;
}
.lang-menu a:hover, .lang-menu a:focus-visible{background:var(--color-sand); color:var(--color-primary); outline:none}
.lang-menu a[aria-current="page"]{color:var(--color-primary)}
.lang-menu a[aria-current="page"]::after{content:""; width:7px; height:7px; border-radius:50%; background:var(--color-primary)}

:root:root:root body header.nav .acct-icon-wrap{order:3 !important; margin:0 !important}
:root:root:root body header.nav .cart-icon-btn{order:4 !important; margin:0 !important}
:root:root:root body header.nav .acct-icon-btn,
:root:root:root body header.nav .cart-icon-btn{color:var(--color-ink) !important}
:root:root:root body header.nav .acct-icon-btn:hover,
:root:root:root body header.nav .cart-icon-btn:hover{color:var(--color-primary) !important; background:transparent !important}
:root:root:root body header.nav .acct-name,
:root:root:root body header.nav .acct-chevron{color:var(--color-ink) !important; font-family:var(--font-body) !important}

/* Pastille panier : rouge tomate (accent) */
html body .cart-badge{
  background:var(--color-accent) !important; color:#fff !important;
  min-width:17px; height:17px !important; width:auto !important; padding:0 4px;
  border-radius:999px !important; font-size:10px !important; font-weight:700 !important;
}
html body .cart-badge.hidden{display:none !important}


:root:root:root body header.nav .nav-toggle{order:6 !important; display:none !important; margin:0 !important}
:root:root:root body header.nav .nav-toggle span{background:var(--color-ink) !important}

/* Ancien sélecteur déroulant, remplacé par .lang-globe */
:root:root:root body header.nav .language-separator,
:root:root:root body header.nav .language-selector{display:none !important}

/* Écrans intermédiaires : liens resserrés */
@media (max-width:1240px){
  :root:root:root body header.nav .inner{gap:12px !important}
  :root:root:root body header.nav .logo img{width:132px !important}
  :root:root:root body header.nav .links a{padding:0 6px !important; font-size:.9rem !important}
}

/* Tablette et mobile : logo + panier + burger, le reste dans le menu plein écran */
@media (max-width:1024px){
  :root:root:root body header.nav .links,
  :root:root:root body header.nav .lang-globe,
  :root:root:root body header.nav .acct-icon-wrap{display:none !important}
  :root:root:root body header.nav .logo{margin-inline-end:auto !important}
  :root:root:root body header.nav .nav-toggle{display:flex !important; width:44px !important; height:44px !important}
  :root:root:root body header.nav .inner{gap:6px !important; padding-inline:16px !important}
}
@media (max-width:360px){
  :root:root:root body header.nav .logo img{width:120px !important}
}

/* Menu mobile plein écran */
html body .mobile-menu{background:var(--color-night) !important}
/* Menu fermé : totalement masqué (son contenu ne dépasse plus sous le header) */
body:not(.menu-open) .mobile-menu{visibility:hidden}
html body .mobile-menu{transition:transform .28s ease, visibility .28s ease}
html body .mobile-menu a{color:#fff; font-family:var(--font-body)}

/* =========================================================
   Footer
   ========================================================= */
html body footer{
  position:relative; isolation:isolate;
  background:var(--color-footer) !important; color:var(--color-sand) !important;
}
/* Motif d'éclats (copeaux) en fond, sous le contenu */
html body footer::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url("/img/brand/plaskito-motif-fond-fonce.svg") repeat; background-size:400px;
  opacity:.35;
}
html body footer h4{color:#fff !important}
html body footer .footer-col a,
html body footer .info-item span,
html body footer .info-item a{color:var(--color-sand) !important}
html body footer .footer-col a:hover,
html body footer .info-item a:hover{color:#fff !important}
html body footer .info-item svg{stroke:var(--color-sand) !important}
html body footer .footer-social a{background:transparent !important; color:var(--color-sand) !important; border:1px solid color-mix(in srgb, var(--color-sand) 35%, transparent)}
html body footer .footer-social a:hover{color:#fff !important; border-color:#fff}
html body footer .footer-bottom{color:var(--color-sand) !important; border-top-color:color-mix(in srgb, var(--color-sand) 20%, transparent) !important}
.footer-brand .footer-logo{display:inline-block; line-height:0}
.footer-brand .footer-logo img{width:300px; max-width:100%; height:auto}

/* =========================================================
   Hero : Unbounded est plus large que l'ancienne police
   ========================================================= */
.hero-title{font-size:clamp(1.9rem,4.4vw,3.6rem) !important; line-height:1.08 !important}
@media (max-width:640px){
  .hero-title{font-size:clamp(1.4rem,6.4vw,2rem) !important; line-height:1.15 !important}
  .hero-title span{white-space:normal !important}
}

/* Burger : deux traits positionnés, identiques en LTR et RTL */
:root:root:root body header.nav .nav-toggle{position:relative; direction:ltr}
:root:root:root body header.nav .nav-toggle span{
  position:absolute; left:10px; top:21px; width:24px; height:2px; margin:0 !important; transform:translateY(-4px) !important;
}
:root:root:root body header.nav .nav-toggle span + span{transform:translateY(4px) !important}
:root:root:root body.menu-open header.nav .nav-toggle span:first-child{transform:rotate(45deg) !important}
:root:root:root body.menu-open header.nav .nav-toggle span:last-child{transform:rotate(-45deg) !important}

/* Bloc newsletter (fond bleu) : titre plus sobre, bouton bleu nuit visible */
.cta-section h2,
.newsletter-section .newsletter-content h2{font-size:clamp(1.6rem,2.8vw,2.3rem) !important; line-height:1.2}
/* Dégradé vertical : bleu outremer en haut, bleu nuit du footer en bas
   (bloc newsletter de l'accueil et bloc newsletter du Journal) */
:root{--gradient-newsletter:linear-gradient(180deg, var(--color-primary) 0%, var(--color-footer) 100%)}
.cta-section .container-narrow,
.newsletter-section .newsletter-card{background:var(--gradient-newsletter) !important}
/* Texte du bloc newsletter Journal : paragraphe resserré, lignes équilibrées */
.newsletter-section .newsletter-content p{max-width:760px; margin-inline:auto; text-wrap:balance}
/* Retour à la ligne choisi : actif sur ordinateur, ignoré sur tablette et mobile (lignes équilibrées automatiquement) */
@media (max-width:1023px){.newsletter-section .nl-br{display:none}}
.waitlist-form button{background:var(--color-night) !important; color:#fff !important; box-shadow:none !important}
.waitlist-form button:hover, .waitlist-form button:focus{background:#fff !important; color:var(--color-primary) !important}

/* =========================================================
   Header aligné sur la largeur du contenu (comme robries.com) : logo à gauche,
   liens centrés sur l'écran, langue / compte / panier / Espace pro à droite.
   Le corps de la page garde sa largeur.
   ========================================================= */
:root:root:root body header.nav .inner{
  max-width:var(--container) !important; margin-inline:auto !important;
  padding-inline:var(--gutter) !important; position:relative;
}
:root:root:root body header.nav .lang-globe{margin-inline-start:auto !important}
@media (min-width:1280px){
  :root:root:root body header.nav .links{
    position:absolute !important; left:50% !important; top:50% !important; transform:translate(-50%,-50%);
    flex:none !important; gap:12px !important;
  }
}

/* Place de la barre de défilement toujours réservée : le header centré (logo
   compris) ne glisse plus quand la barre apparaît, disparaît ou que le panier
   bloque le défilement */
html{scrollbar-gutter:stable}

/* Variables de largeur prioritaires sur les :root des autres feuilles */
:root:root{--container:1536px; --gutter:40px}
@media (max-width:767px){
  :root:root{--gutter:24px}
}

/* Sections à deux colonnes : les visuels occupent toute leur colonne */
@media (min-width:1025px){
  .solution-gallery-wrap, .how-carousel, .sdg-column{max-width:none !important}
}

/* Mobile : même marge latérale que le header */
@media (max-width:767px){
  :root:root body .container, :root:root body .container-narrow, :root:root body .hero-container,
  :root:root body .footer-grid, :root:root body .footer-bottom,
  :root:root body .origin-layout, :root:root body .mission-layout, :root:root body .vision-layout{padding-inline:var(--gutter) !important}
}

/* Arabe (RTL) : le lien « انتقل إلى المحتوى » est caché à gauche (left négatif), ce qui
   en RTL crée une zone de défilement horizontal vers la gauche. On le cache à droite. */
html[dir="rtl"] .skip-link{left:auto !important; right:-9999px}
html[dir="rtl"] .skip-link:focus{right:12px}