/* -------------------------------------------------
   Another PlastiK — COOKIES 
   ------------------------------------------------- */
/* Fonts */
@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@400,500,700&display=swap');

:root{
  /* Brand */
  --primary:#1F3D32;
  --primary-light:#2A4F42;
  --primary-dark:#16291F;

  --accent:#2C5F6F;
  --accent-light:#3A7A8C;
  --accent-soft:rgba(44,95,111,.12);
  --olive:#8B9556;

  /* Neutrals */
  --bg:#FFFFFF;
  --bg-sand:#F4EBE0;
  --bg-light:#F8FAFC;
  --text:#2A2A2A;
  --text-muted:#6B7280;
  --black:#0A0A0A;
  --white:#FFFFFF;

  /* UI */
  --gray-50:#FAFAFA;
  --gray-100:#F5F5F5;
  --gray-200:#E5E5E5;
  --gray-300:#D4D4D4;
  --gray-400:#A3A3A3;
  --gray-500:#737373;
  --gray-600:#525252;
  --gray-700:#404040;
  --gray-800:#262626;
  --gray-900:#171717;

  --shadow:0 8px 28px rgba(0,0,0,.08);
  --shadow-lg:0 20px 60px rgba(0,0,0,.12);

  /* Layout */
  --container:1380px;         
  --container-narrow:1080px; 
  --gutter:20px;

  /* Header */
  --header-h:75px;
  --link-h:44px;

  /* Banner */
  --banner-h:40px;

  /* Misc */
  --success:#1aa37a;
}

/* =========================
        BASE / RESET
   ========================= */
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
html,body{  width:100%;  max-width:100%;  overflow-x:hidden;  background:var(--bg);}
body{  font-family:"Cabinet Grotesk",system-ui,sans-serif;  font-size:17px;  line-height:1.75;  color:var(--text);
  -webkit-font-smoothing:antialiased;  letter-spacing:-.01em;  min-height:100vh;  display:flex;  flex-direction:column;}
body.menu-open{overflow:hidden}
.container{max-width:var(--container); margin:0 auto; padding:0 var(--gutter);}
.container-narrow{max-width:var(--container-narrow); margin:0 auto; padding:0 var(--gutter);}
main{  flex:1 0 auto;  padding-top:calc(var(--header-h) + var(--banner-h));}
footer{margin-top:auto}

/* =========================
        BUTTONS
   ========================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  height:45px; width:180px; padding:0 16px; gap:8px; cursor:pointer; text-decoration:none;
  font-weight:600; font-size:.9rem; letter-spacing:.3px; border-radius:5px;
  color:#fff; background:var(--primary); border:2.5px solid var(--primary);
  box-shadow:none; transition:all .25s ease;
}
.btn:hover,.btn:focus{background:#fff;color:var(--primary);transform:translateY(-1px);}
.btn:active{transform:translateY(0);background:var(--primary);color:#fff;}
.btn.outline{background:transparent;color:var(--primary);border:2.5px solid var(--primary);}
.btn.outline:hover{background:var(--primary);color:#fff;}

/* =========================
        PHASE BANNER
   ========================= */
.phase-banner{
  position:fixed; top:var(--header-h); left:0; right:0; z-index:10000;
  height:var(--banner-h); display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#2C5F6F 0%,#3A7A8C 100%); color:#fff;
  line-height:1; font-size:.95rem; padding:0; transition:transform .3s,opacity .3s;
}
body.scrolled-nav .phase-banner{transform:translateY(-100%);opacity:0;pointer-events:none;}
.phase-banner a{color:#fff;text-decoration:underline;font-weight:600;text-underline-offset:3px;transition:opacity .2s;}
.phase-banner a:hover{opacity:.85;}

/* =========================
        HEADER / NAV
   ========================= */
header.nav{
  position:fixed; inset:0 0 auto 0; height:var(--header-h); z-index:10001;
  width:100%; max-width:100vw; overflow-x:clip; background:var(--bg);
  box-shadow:0 2px 8px rgba(0,0,0,.1); transition:box-shadow .3s;
}
body.scrolled-nav header.nav{box-shadow:0 6px 18px rgba(0,0,0,.12);}
header.nav .inner{
  height:100%; max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
}
header.nav .logo{display:flex; align-items:center; height:100%; margin-right:clamp(32px,6vw,128px);transform:translateX(-8px)}
header.nav .logo img{display:block; height:calc(var(--header-h) - 28px); width:auto;}

header.nav .links{
  display:flex; align-items:center; gap:20px; height:100%; position:relative; top:3px; margin-left:auto;
}
header.nav .links a{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  height:var(--link-h); padding:0 14px; line-height:1; font-weight:600; color:var(--primary);
  text-decoration:none; transition:color .2s,transform .2s;
}
header.nav .links a::after{
  content:""; position:absolute; left:0; bottom:-3px; width:0; height:2px; background:var(--primary); transition:width .25s;
}
header.nav .links a:hover::after, header.nav .links a:focus::after{width:100%;}
body.has-hero header.nav{background:var(--bg); box-shadow:0 2px 8px rgba(0,0,0,.1);}
body.has-hero.scrolled-nav header.nav{box-shadow:0 6px 18px rgba(0,0,0,.12);}
body.has-hero header.nav .links a{color:var(--primary);}

/* =========================
            BURGER
   ========================= */
header.nav .nav-toggle{
  display:none; width:44px; height:44px; background:transparent; border:none; cursor:pointer; z-index:10000;
  align-items:center; justify-content:center;
}
header.nav .nav-toggle span{display:block; width:24px; height:2px; background:var(--primary); transition:transform .25s,opacity .2s,background .25s}
header.nav .nav-toggle span+span{margin-left:-24px; transform:translateY(6px)}
body.menu-open .nav-toggle span:first-child{transform:translateY(0) rotate(45deg)}
body.menu-open .nav-toggle span:last-child{transform:translateY(0) rotate(-45deg)}

/* =========================
         Mobile menu
   ========================= */
.mobile-menu{  position:fixed;  inset:0;  z-index:9998;  display:flex;  flex-direction:column;  align-items:center;  justify-content:center;  gap:22px;
  padding:20px;  background:rgba(31,92,66,.98);  transform:translateY(-100%);  transition:transform .28s ease;
}

body.menu-open .mobile-menu{  transform:none;}
.mobile-menu a{  color:#fff;  font-size:1.3rem;  font-weight:600;  text-decoration:none;}

/* =========================
       Language selector
   ========================= */

/* Vertical separator */
.language-separator{  display:inline-block;  width:1px;  height:26px;  background:var(--primary);  margin:0 8px;}

/* Wrapper */
.language-selector{  position:relative;  display:flex;  align-items:center;  height:var(--link-h);}

/* Toggle button */
.lang-toggle{  display:inline-flex;  align-items:center;  justify-content:center;  gap:6px;
  height:var(--link-h);  padding:0 14px;  background:transparent;  border:none;  color:var(--primary);
  font-weight:600;  font-size:1rem;  font-family:"Cabinet Grotesk",sans-serif;
  cursor:pointer;  transform:translateY(1px);  transition:opacity .25s;}
.lang-toggle:hover{  opacity:.9;}

/* Arrow */
.lang-arrow{  width:10px;  height:10px;  stroke:currentColor;  stroke-width:1.6;  transition:transform .25s;}
.lang-toggle[aria-expanded="true"] .lang-arrow{  transform:rotate(180deg);}

/* Dropdown */
.lang-dropdown{  position:absolute;  top:calc(100% + 8px);  right:0;  min-width:120px;  z-index:1000;  background:var(--bg);box-shadow:0 8px 24px rgba(0,0,0,.15);
  opacity:0;  visibility:hidden;  transform:translateY(-8px);  transition:opacity .25s ease, transform .25s ease;
}
.lang-dropdown[aria-hidden="false"]{  opacity:1;  visibility:visible;  transform:translateY(0);}

/* Language links */
.lang-option{  display:block;  width:100%;  padding:12px 20px;  background:transparent;  border:none;  text-align:left;
  text-decoration:none;  color:var(--primary);  font-weight:600;  font-size:.95rem;  font-family:"Cabinet Grotesk",sans-serif;  cursor:pointer;  transition:background .2s ease;}
.lang-option:hover,
.lang-option:focus{  background:var(--accent-soft);  text-decoration:none;}
.lang-option:focus-visible{  outline:2px solid var(--accent);  outline-offset:2px;}
.lang-option.active,
.lang-option[aria-current="page"]{  background:var(--accent-soft);  color:var(--primary);}

/* =========================
    Mobile language
   ========================= */
.mobile-lang-selector{  display:flex;  flex-direction:column;  gap:12px;  padding-top:24px;
  margin-top:24px;  border-top:1px solid rgba(0,0,0,.12);}
.lang-option-mobile{  background:rgba(255,255,255,.1);  border:1.5px solid rgba(255,255,255,.3);  border-radius:5px;
  color:#fff; padding:14px 20px;  font-weight:600;  font-size:1.1rem;  text-align:center;
  font-family:"Cabinet Grotesk",sans-serif;  cursor:pointer;  transition:background .25s, border-color .25s;}
.lang-option-mobile:hover{  background:rgba(255,255,255,.2);  border-color:rgba(255,255,255,.5);}
.lang-option-mobile.active{  background:#fff;  color:var(--primary);  border-color:#fff;}

/* =========================================================
        MAIN CONTENT (COOKIE PAGE)
   ========================================================= */
.legal-wrap{  max-width:var(--container-narrow);  margin:0 auto;  padding:60px 0 0; }

/* header compact, sans trait sous la date */
.legal-header{  text-align:left;  margin:0 0 12px;  padding:0;  border-bottom:none; }
.legal-header h1{  font-size:clamp(2rem,3.6vw,2.8rem);  color:var(--primary);  font-weight:600;  letter-spacing:-.01em;  line-height:1.05;  margin:0 0 6px;}
.legal-header .update-date{  color:var(--text-muted);  font-size:1rem;  font-style:italic;  margin:0;}

/* Intro : box propre sans “trait vert” */
.legal-intro{  background:var(--bg-light);  border:1px solid rgba(0,0,0,.08); padding:14px 16px;  border-radius:5px;  margin:12px 0 18px; }
.legal-intro p{  margin:0;  text-align:justify;  text-align-last:left;  font-size:1.05rem;  line-height:1.85;  color:var(--text);  letter-spacing:.1px;}

/* Sections */
.legal-section{margin-bottom:28px;}
.legal-section h2{  font-size:clamp(1.4rem,2.2vw,1.8rem);  color:var(--primary);  font-weight:600;  margin:0 0 12px;}
.legal-section h3{  font-size:1.2rem;  color:var(--primary);  font-weight:600;  margin:18px 0 10px;}
.legal-section p{  text-align:justify;  text-align-last:left;  font-size:1.05rem;  line-height:1.85;  color:var(--text);  letter-spacing:.1px;  margin:0 0 12px;}

/* Bullets */
.legal-section ul{  margin:12px 0 18px;  padding-left:1.25rem;}
.legal-section li{  text-align:justify;  text-align-last:left;  font-size:1.05rem;  line-height:1.85;
  color:var(--text);  letter-spacing:.1px;  margin-bottom:8px;}
.legal-section li::marker{color:var(--primary);}

/* =========================
      INFO BOX
   ========================= */
.info-box{  background:#E6F7F1;  border:1px solid rgba(31,61,50,.35);  border-radius:5px;  padding:18px;  margin:22px 0;}
.info-box h4{  color:var(--primary);  font-weight:600;  margin:0 0 10px;  display:flex;  align-items:center;  gap:10px;}
.info-box h4::before{  content:"ℹ";  width:24px; height:24px;  background:var(--primary);  color:var(--white);
  border-radius:999px;  display:inline-flex;  align-items:center;  justify-content:center;  flex-shrink:0;  font-size:.9rem;}
.info-box p{  margin:0;  text-align:justify;  text-align-last:left;  font-size:1.05rem;  line-height:1.85;  color:var(--text);  letter-spacing:.1px;}

/* =========================
   JOIN SECTION 
   ========================= */
.join-section{  background: transparent;  padding:48px var(--gutter);   max-width: var(--container);  margin:0 auto;}
.join-card{  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);  color:#fff;  text-align:center;  
  position:relative;  z-index:1;  max-width:980px;  margin:0 auto;  padding:32px 28px;   border-radius:5px;
  box-shadow:0 16px 36px rgba(0,0,0,.12);overflow:hidden;}
.join-card::before{  content:"";  position:absolute;  top:-40%;  right:-8%;  width:520px;  height:520px;
  background: radial-gradient(circle, rgba(255,255,255,.10) 0%, transparent 70%);  pointer-events:none; z-index:-1;}
.join-content{ max-width:640px; margin:0 auto;}
.join-content h2{  font-size:clamp(2rem,4vw,2.8rem);  margin:0 0 12px;  font-weight:700;  font-family:"Cabinet Grotesk",sans-serif;}
.join-content p{  font-size:1.05rem;  opacity:.95;  margin-bottom:24px;   line-height:1.75;}
.join-actions{  display:flex;  gap:12px;   justify-content:center;  flex-wrap:wrap;}
.join-actions .btn{  background:var(--accent-light);  color:#fff;
  border:none;  border-radius:5px;  font-weight:600;  font-size:14px;  text-decoration:none;
  cursor:pointer;  padding:10px 20px;  transition:transform .25s ease, background .25s ease;
  box-shadow:0 3px 8px rgba(44,95,111,.30);}
.join-actions .btn:hover,.join-actions .btn:focus{background:#fff;color:var(--accent-light);transform:translateY(-1px);}
.join-actions .btn:active{transform:translateY(0);background:#356f83 ;color:#fff;}

/* =========================
           FOOTER
   ========================= */
 footer{background:var(--primary); color:rgba(255,255,255,.95); padding:48px 0 24px}
.footer-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:48px; max-width:var(--container); 
             margin:0 auto; padding:0 var(--gutter); margin-bottom:32px;}
.footer-brand{margin-bottom:20px}
.footer-brand h3{color:#fff; font-size:1.3rem; font-weight:600}
.footer-info{display:flex; flex-direction:column; gap:14px; margin-bottom:20px}
.info-item{display:flex; align-items:center; gap:12px}
.info-item svg{width:20px; height:20px; stroke:rgba(255,255,255,.9); fill:none; stroke-width:2; flex-shrink:0}
.info-item span,.info-item a{color:rgba(255,255,255,.95); font-size:.95rem; text-decoration:none; transition:color .2s}
.info-item a:hover{color:#fff}
.footer-social{display:flex; gap:12px}
.footer-social a{  width:44px; height:44px; background:var(--primary); border-radius:5px; display:flex; align-items:center; justify-content:center;
  transition:all .3s; text-decoration:none; position:relative;}
.footer-social a:hover{transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.2)}
.footer-social a svg{width:26px; height:26px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)}
.footer-col h4{color:#fff; font-weight:600; margin-bottom:16px; font-size:1.1rem}
.footer-col a{color:rgba(255,255,255,.85); font-size:.95rem; line-height:1.8; text-decoration:none; display:block; margin-bottom:8px; transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-bottom{  border-top:1px solid rgba(255,255,255,.15); padding-top:24px; text-align:center; font-size:.85rem; color:rgba(255,255,255,.7);
  max-width:var(--container); margin:0 auto; padding-inline:var(--gutter);}

/* ===============================
        RESPONSIVE
   =============================== */
@media (max-width:1024px){
  :root{--gutter:12px;}

  header.nav .nav-toggle{display:flex !important; margin-left:auto}
  header.nav .links{display:none !important}

  header.nav .inner{
    max-width:1024px;
    width:100%;
    margin:0 auto;
    padding-inline:var(--gutter) !important;
  }

  .container{max-width:1024px;}

  .legal-wrap{
    max-width:min(var(--container-narrow), 92vw);
    padding:16px 0 0;
  }

  .phase-banner{
    padding-left:clamp(8px,2vw,16px);
    padding-right:clamp(8px,2vw,16px);
    text-align:center;
  }
}

@media (max-width:768px){
  .legal-header h1{font-size:clamp(1.8rem,6vw,2.4rem)}

  .legal-section p,
  .legal-section li,
  .legal-intro p,
  .info-box p{font-size:1rem;}

  .footer-grid{grid-template-columns:1fr; gap:28px;}
}

@media (max-width:640px){
  .legal-wrap{
    max-width:100%;
    padding:18px 0 10px; /* ✅ pas 44px (trop) */
  }
  .legal-intro{padding:14px}
}

/* =========================================================
   AR FIXES — COOKIES / LEGAL (RTL + HEADER + CONTENT)
   À COLLER TOUT À LA FIN du CSS Cookies
   ========================================================= */

/* 0) RTL global */
html[lang="ar"][dir="rtl"],
body[lang="ar"][dir="rtl"],
[dir="rtl"]{
  direction: rtl;
}

/* ---------------------------------------------------------
   1) HEADER AR — BASE (tous breakpoints)
   Stabilise le flex en LTR, puis place via order + margins.
---------------------------------------------------------- */
html[lang="ar"][dir="rtl"] header.nav .inner,
[dir="rtl"] header.nav .inner{
  direction:ltr !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
}

/* Logo à droite */
html[lang="ar"][dir="rtl"] header.nav .logo,
[dir="rtl"] header.nav .logo{
  order:99 !important;
  margin-left:auto !important;
  margin-right:0 !important;
  transform:none !important;
}

/* Desktop links lecture RTL */
html[lang="ar"][dir="rtl"] header.nav .links,
[dir="rtl"] header.nav .links{
  order:2 !important;
  margin:0 !important;
  direction:rtl !important;
}

/* Separator (desktop) */
html[lang="ar"][dir="rtl"] header.nav .language-separator,
[dir="rtl"] header.nav .language-separator{
  order:1 !important;
  margin:0 8px !important;
}

/* Language selector (desktop) */
html[lang="ar"][dir="rtl"] header.nav .language-selector,
[dir="rtl"] header.nav .language-selector{
  order:0 !important;
  margin:0 !important;
  direction:rtl !important;
}

/* Dropdown langue : ancrage à droite */
html[lang="ar"][dir="rtl"] header.nav .lang-dropdown,
body[lang="ar"][dir="rtl"] header.nav .lang-dropdown{
  left: 0 !important;     
  right: auto !important;  
  text-align: right !important;
}

html[lang="ar"][dir="rtl"] header.nav .lang-option,
[dir="rtl"] header.nav .lang-option{
  text-align:right !important;
}


/* =========================================================
   2) COOKIES CONTENT AR — TITRES + PARAGRAPHES À DROITE
   (corrige: legal-header align left, paragraphs text-align-last:left, ul padding-left...)
========================================================= */

/* Bloc principal + header */
html[lang="ar"] .legal-wrap,
body[lang="ar"] .legal-wrap,
:root:dir(rtl) .legal-wrap,
[dir="rtl"] .legal-wrap{
  direction:rtl !important;
}

/* Tous les titres à droite */
html[lang="ar"] .legal-header,
body[lang="ar"] .legal-header,
:root:dir(rtl) .legal-header,
[dir="rtl"] .legal-header{
  direction:rtl !important;
  text-align:right !important;
}

html[lang="ar"] .legal-header h1,
html[lang="ar"] .legal-section h2,
html[lang="ar"] .legal-section h3,
html[lang="ar"] .info-box h4,
body[lang="ar"] .legal-header h1,
body[lang="ar"] .legal-section h2,
body[lang="ar"] .legal-section h3,
body[lang="ar"] .info-box h4,
:root:dir(rtl) .legal-header h1,
:root:dir(rtl) .legal-section h2,
:root:dir(rtl) .legal-section h3,
:root:dir(rtl) .info-box h4,
[dir="rtl"] .legal-header h1,
[dir="rtl"] .legal-section h2,
[dir="rtl"] .legal-section h3,
[dir="rtl"] .info-box h4{
  direction:rtl !important;
  text-align:justify !important;
  text-align:right !important;
}

/* Date / meta à droite */
html[lang="ar"] .legal-header .update-date,
body[lang="ar"] .legal-header .update-date,
:root:dir(rtl) .legal-header .update-date,
[dir="rtl"] .legal-header .update-date{
  text-align:right !important;
  direction:rtl !important;
}

/* Paragraphes: justification + dernière ligne à droite */
html[lang="ar"] .legal-intro p,
html[lang="ar"] .legal-section p,
html[lang="ar"] .info-box p,
body[lang="ar"] .legal-intro p,
body[lang="ar"] .legal-section p,
body[lang="ar"] .info-box p,
:root:dir(rtl) .legal-intro p,
:root:dir(rtl) .legal-section p,
:root:dir(rtl) .info-box p,
[dir="rtl"] .legal-intro p,
[dir="rtl"] .legal-section p,
[dir="rtl"] .info-box p{
  direction:rtl !important;
  text-align:justify !important;
  text-align-last:right !important;
}

/* Listes: padding à droite (et markers cohérents) */
html[lang="ar"] .legal-section ul,
body[lang="ar"] .legal-section ul,
:root:dir(rtl) .legal-section ul,
[dir="rtl"] .legal-section ul{
  padding-left:0 !important;
  padding-right:1.25rem !important;
}

html[lang="ar"] .legal-section li,
body[lang="ar"] .legal-section li,
:root:dir(rtl) .legal-section li,
[dir="rtl"] .legal-section li{
  direction:rtl !important;
  text-align:justify !important;
  text-align-last:right !important;
}

/* Info-box: align RTL + ordre icône/texte propre */

html[lang="ar"] .info-box h4::before,
body[lang="ar"] .info-box h4::before,
:root:dir(rtl) .info-box h4::before,
[dir="rtl"] .info-box h4::before{
  order:2 !important;              /* l’icône visuelle à gauche du texte RTL */
  margin-right:10px !important;
  margin-left:0 !important;
}
/* ---------------------------------------------------------
   3) TABLET/MOBILE (≤1024px) — ordre EXACT :
   LANGUE → SEPARATOR → BURGER (à gauche)
   LOGO à droite
---------------------------------------------------------- */
@media (max-width:1024px){

  /* point clé : PAS space-between */
  html[lang="ar"][dir="rtl"] header.nav .inner,
  [dir="rtl"] header.nav .inner{
    direction:ltr !important;
    justify-content:flex-start !important;
  }

  /* Cache liens desktop */
  html[lang="ar"][dir="rtl"] header.nav .links,
  [dir="rtl"] header.nav .links{
    display:none !important;
  }

  /* 1) LANGUE en premier (collée à gauche) */
  html[lang="ar"][dir="rtl"] header.nav .language-selector,
  [dir="rtl"] header.nav .language-selector{
    order:0 !important;
    margin:0 !important;
    direction:ltr !important; /* AR + flèche comme EN */
  }

  /* 2) SEPARATOR */
  html[lang="ar"][dir="rtl"] header.nav .language-separator,
  [dir="rtl"] header.nav .language-separator{
    order:1 !important;
    margin:0 8px !important;
  }

  /* 3) BURGER après separator */
  html[lang="ar"][dir="rtl"] header.nav .nav-toggle,
  [dir="rtl"] header.nav .nav-toggle{
    display:flex !important;
    order:2 !important;
    margin-left:0 !important;  /* annule ton global */
    margin-right:0 !important;
  }

  /* 4) LOGO à droite */
  html[lang="ar"][dir="rtl"] header.nav .logo,
  [dir="rtl"] header.nav .logo{
    order:99 !important;
    margin-left:auto !important;
    margin-right:0 !important;
    transform:none !important;
  }
}

/* Micro-compact mobile */
@media (max-width:640px){
  html[lang="ar"][dir="rtl"] header.nav .language-separator,
  [dir="rtl"] header.nav .language-separator{
    height:22px !important;
    margin:0 6px !important;
  }
}