/*
Theme Name: ZN Digital Coaching
Theme URI: https://zndigitalcoaching.com
Author: Amina - ZN Digital Coaching
Author URI: https://zndigitalcoaching.com
Description: Theme vitrine one-page pour ZN Digital Coaching, formations e-commerce a Alger et Oran. Bilingue FR/AR.
Version: 1.1
License: Usage prive
Text Domain: zn-digital-coaching
*/

:root{
    --navy-900:#0a0806;
    --navy-800:#161310;
    --navy-700:#211c17;
    --navy-600:#332a20;
    --gold:#ff6a1f;
    --gold-soft:#ffb27a;
    --white:#ffffff;
    --off-white:#f7f4f0;
    --ink-60:rgba(255,255,255,.62);
    --ink-40:rgba(255,255,255,.42);
    --line:rgba(255,255,255,.12);
    --shadow:0 20px 60px rgba(0,0,0,.35);
    --serif:'Fraunces', serif;
    --sans:'Inter', sans-serif;
    --arabic:'Cairo', sans-serif;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--sans);
    color:var(--navy-800);
    background:var(--off-white);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  html[dir="rtl"] body{font-family:var(--arabic);}
  html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] .eyebrow{font-family:var(--arabic);}
  html[dir="rtl"] .hero-tag, html[dir="rtl"] .g-tag{font-family:var(--arabic);}
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
  @media(max-width:640px){.wrap{padding:0 20px;}}

  /* ---------- LANG SWITCH ---------- */
  .lang-switch{
    display:flex; align-items:center; gap:2px; border:1px solid var(--ink-40); border-radius:20px;
    padding:4px; background:rgba(255,255,255,.03);
  }
  .lang-switch button{
    font-family:var(--sans); font-size:12px; font-weight:700; padding:6px 14px; border-radius:16px;
    border:none; background:transparent; color:var(--ink-60); cursor:pointer; transition:all .2s;
  }
  .lang-switch button.active{background:var(--gold); color:var(--navy-900);}
  html[dir="rtl"] .lang-switch button{font-family:var(--arabic);}

  /* ---------- WHATSAPP FLOAT ---------- */
  .wa-float{
    position:fixed; bottom:22px; right:22px; z-index:200;
    width:60px; height:60px; border-radius:50%; background:#25D366;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 24px rgba(37,211,102,.55);
    animation:waPulse 2.2s infinite;
  }
  html[dir="rtl"] .wa-float{right:auto; left:22px;}
  .wa-float svg{width:30px; height:30px;}
  @keyframes waPulse{
    0%{box-shadow:0 6px 24px rgba(37,211,102,.55), 0 0 0 0 rgba(37,211,102,.6);}
    70%{box-shadow:0 6px 24px rgba(37,211,102,.55), 0 0 0 16px rgba(37,211,102,0);}
    100%{box-shadow:0 6px 24px rgba(37,211,102,.55), 0 0 0 0 rgba(37,211,102,0);}
  }

  h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.05; letter-spacing:-.01em;}
  .eyebrow{
    font-family:var(--sans); font-size:12.5px; font-weight:700; letter-spacing:.16em;
    text-transform:uppercase; color:var(--gold);
  }
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--sans); font-weight:700; font-size:15px;
    padding:15px 28px; border-radius:2px; cursor:pointer; border:1px solid transparent;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
    white-space:nowrap;
  }
  .btn-gold{background:var(--gold); color:var(--navy-900);}
  .btn-gold:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(255,106,31,.35);}
  .btn-outline{background:transparent; color:var(--white); border-color:var(--ink-40);}
  .btn-outline:hover{border-color:var(--gold); color:var(--gold);}
  .btn-outline-dark{background:transparent; color:var(--navy-800); border-color:rgba(10,8,6,.25);}
  .btn-outline-dark:hover{border-color:var(--navy-800);}

  /* ---------- NAV ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(10,8,6,.0);
    border-bottom:1px solid transparent;
    transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  }
  header.scrolled{
    background:rgba(10,8,6,.92);
    backdrop-filter:blur(10px);
    border-color:var(--line);
  }
  nav{display:flex; align-items:center; justify-content:space-between; height:82px;}
  .logo{
    font-family:var(--serif); font-size:21px; font-weight:600; color:var(--white); letter-spacing:.01em;
    display:flex; align-items:center; gap:9px;
  }
  .logo span{color:var(--gold);}
  .nav-links{display:flex; gap:38px; align-items:center;}
  .nav-links a{
    font-size:13.5px; font-weight:600; color:var(--ink-60);
    letter-spacing:.03em; text-transform:uppercase; transition:color .2s;
  }
  .nav-links a:hover{color:var(--white);}
  .nav-cta{display:flex; align-items:center; gap:20px;}
  .burger{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none;}
  .burger span{width:24px; height:2px; background:var(--white);}
  @media(max-width:900px){
    .nav-links{display:none;}
    .burger{display:flex;}
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative; min-height:100vh;
    background:
      radial-gradient(1100px 600px at 82% -8%, rgba(255,106,31,.16), transparent 60%),
      linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
    color:var(--white);
    display:flex; align-items:center;
    padding:150px 0 90px;
    overflow:hidden;
  }
  .hero::after{
    content:''; position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size:64px 64px;
    mask-image:linear-gradient(180deg, transparent, black 30%, black 70%, transparent);
    pointer-events:none;
  }
  .hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:center; position:relative; z-index:1;}
  @media(max-width:940px){.hero-grid{grid-template-columns:1fr; gap:56px;}}
  .hero h1{
    font-size:clamp(38px, 5.4vw, 64px);
    margin:20px 0 22px;
  }
  .hero h1 em{font-style:normal; color:var(--gold);}
  .hero p.lead{
    font-size:18px; line-height:1.65; color:var(--ink-60); max-width:520px; margin-bottom:36px;
  }
  .hero-cta{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:56px;}
  .hero-stats{display:flex; gap:0; border-top:1px solid var(--line); padding-top:28px; max-width:560px;}
  .hero-stat{flex:1; padding-right:24px;}
  .hero-stat b{
    display:block; font-family:var(--serif); font-size:32px; color:var(--white); font-weight:600;
  }
  .hero-stat span{font-size:12.5px; color:var(--ink-40); letter-spacing:.03em;}

  .hero-photo-frame{
    position:relative; border:1px solid var(--line); padding:14px;
  }
  .hero-photo-frame img{width:100%; height:520px; object-fit:cover;}
  .hero-tag{
    position:absolute; left:-1px; bottom:-1px; background:var(--gold); color:var(--navy-900);
    padding:16px 22px; font-family:var(--serif); font-weight:600; font-size:15px;
    max-width:250px; line-height:1.35;
  }
  @media(max-width:940px){.hero-photo-frame img{height:380px;}}

  /* ---------- SECTION SHELL ---------- */
  section{padding:120px 0;}
  @media(max-width:640px){section{padding:80px 0;}}
  .section-head{max-width:640px; margin-bottom:64px;}
  .section-head h2{font-size:clamp(30px, 4vw, 44px); margin-top:14px; color:var(--navy-800);}
  .section-head p{font-size:16.5px; color:#5b6172; margin-top:16px; line-height:1.6;}
  .section-head.light h2, .section-head.light .eyebrow{color:var(--white);}
  .section-head.light p{color:var(--ink-60);}

  /* ---------- PARCOURS / TIMELINE ---------- */
  .parcours{background:var(--white);}
  .parcours-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:start;}
  @media(max-width:900px){.parcours-grid{grid-template-columns:1fr;}}
  .parcours-text p{font-size:16px; line-height:1.75; color:#3c4257; margin-bottom:18px;}
  .parcours-text strong{color:var(--navy-800);}

  .timeline{position:relative; padding-left:34px;}
  .timeline::before{
    content:''; position:absolute; left:6px; top:6px; bottom:6px; width:1px; background:rgba(10,8,6,.15);
  }
  .t-item{position:relative; padding-bottom:44px;}
  .t-item:last-child{padding-bottom:0;}
  .t-item::before{
    content:''; position:absolute; left:-34px; top:4px; width:13px; height:13px; border-radius:50%;
    background:var(--white); border:2px solid var(--gold);
  }
  .t-item .t-year{font-family:var(--serif); font-size:15px; font-weight:600; color:var(--gold); margin-bottom:6px; display:block;}
  .t-item h4{font-family:var(--sans); font-size:17px; font-weight:700; color:var(--navy-800); margin-bottom:6px;}
  .t-item p{font-size:14.5px; color:#5b6172; line-height:1.6;}

  /* ---------- COMPETENCES ---------- */
  .skills{background:var(--off-white);}
  .skills-list{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:rgba(10,8,6,.1);}
  @media(max-width:760px){.skills-list{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:480px){.skills-list{grid-template-columns:1fr;}}
  .skill-cell{
    background:var(--white); padding:34px 26px; transition:background .25s;
  }
  .skill-cell:hover{background:var(--navy-800);}
  .skill-cell:hover *{color:var(--white) !important;}
  .skill-cell .num{font-family:var(--serif); font-size:13px; color:var(--gold); display:block; margin-bottom:14px;}
  .skill-cell h4{font-size:16.5px; font-weight:700; color:var(--navy-800); margin-bottom:8px;}
  .skill-cell p{font-size:13.5px; color:#6b7086; line-height:1.5;}

  /* ---------- FORMATIONS ---------- */
  .formations{background:var(--navy-900); position:relative; overflow:hidden;}
  .formations::before{
    content:''; position:absolute; inset:0;
    background:radial-gradient(900px 500px at 10% 110%, rgba(255,106,31,.12), transparent 60%);
  }
  .form-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); position:relative; z-index:1;}
  @media(max-width:900px){.form-grid{grid-template-columns:1fr;}}
  .form-card{
    background:var(--navy-800); padding:44px 34px; display:flex; flex-direction:column; height:100%;
    transition:background .3s;
  }
  .form-card.featured{background:var(--navy-700);}
  .form-card .f-city{font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:14px;}
  .form-card h3{font-size:26px; color:var(--white); margin-bottom:6px;}
  .form-card .f-price{font-family:var(--serif); font-size:38px; color:var(--white); margin:18px 0 4px;}
  .form-card .f-price span{font-size:14px; color:var(--ink-40); font-family:var(--sans); font-weight:500;}
  .f-details{list-style:none; margin:22px 0 30px; flex-grow:1;}
  .f-details li{
    font-size:14px; color:var(--ink-60); padding:10px 0; border-top:1px solid var(--line);
    display:flex; gap:10px;
  }
  .f-details li:first-child{border-top:none;}
  .f-details li b{color:var(--white); font-weight:600; min-width:82px; flex-shrink:0;}
  .form-card .btn{width:100%; justify-content:center; margin-top:auto;}

  /* ---------- PROGRAMME ---------- */
  .programme{background:var(--white);}
  .prog-wrap{display:grid; grid-template-columns:.8fr 1.2fr; gap:70px;}
  @media(max-width:900px){.prog-wrap{grid-template-columns:1fr;}}
  .prog-list{}
  .prog-row{
    display:flex; align-items:center; justify-content:space-between; padding:22px 0;
    border-bottom:1px solid rgba(10,8,6,.1);
  }
  .prog-row:first-child{border-top:1px solid rgba(10,8,6,.1);}
  .prog-row h4{font-size:18px; font-weight:600; color:var(--navy-800); font-family:var(--serif);}
  .prog-row span{font-size:12.5px; color:var(--gold); font-weight:700; letter-spacing:.08em; text-transform:uppercase;}
  .attestation-card{
    background:var(--off-white); border:1px solid rgba(10,8,6,.1); padding:40px;
    display:flex; flex-direction:column; justify-content:center; gap:16px;
  }
  .attestation-card .eyebrow{color:var(--navy-800);}
  .attestation-card h3{font-size:24px; color:var(--navy-800);}
  .attestation-card p{font-size:15px; color:#5b6172; line-height:1.65;}
  .pay-list{display:flex; flex-direction:column; gap:10px; margin-top:8px;}
  .pay-list li{font-size:14px; color:var(--navy-800); display:flex; gap:10px; align-items:baseline;}
  .pay-list li::before{content:'—'; color:var(--gold); font-weight:700;}

  /* ---------- GALLERY ---------- */
  .gallery{background:var(--off-white);}
  .g-scroll{
    display:flex; gap:16px; overflow-x:auto; padding-bottom:10px; scroll-snap-type:x mandatory;
    -ms-overflow-style:none; scrollbar-width:none;
  }
  .g-scroll::-webkit-scrollbar{display:none;}
  .g-card{
    scroll-snap-align:start; flex:0 0 320px; position:relative; border:1px solid rgba(10,8,6,.12);
    padding:10px; background:var(--white);
  }
  .g-card img{width:100%; height:420px; object-fit:cover; object-position:center 25%; display:block;}
  .g-card .g-tag{
    position:absolute; left:9px; right:9px; bottom:9px; background:rgba(10,8,6,.88); color:var(--white);
    padding:10px 14px; font-family:var(--serif); font-weight:600; font-size:13.5px; line-height:1.3;
  }
  @media(max-width:640px){.g-card{flex-basis:260px;} .g-card img{height:340px;}}
  .g-controls{display:flex; gap:12px; margin-top:20px;}
  .g-controls button{
    width:44px; height:44px; border-radius:50%; border:1px solid rgba(10,8,6,.15); background:transparent;
    color:var(--navy-800); cursor:pointer; font-size:16px; transition:border-color .2s, background .2s;
  }
  .g-controls button:hover{border-color:var(--gold); background:rgba(255,106,31,.08);}

  .t-shot{
    scroll-snap-align:start; flex:0 0 220px; border:1px solid var(--line); background:var(--navy-800);
    padding:8px; transition:transform .2s;
  }
  .t-shot img{width:100%; border-radius:2px; display:block;}
  .t-shot:hover{transform:translateY(-4px);}
  @media(max-width:640px){.t-shot{flex-basis:170px;}}

  /* ---------- TEMOIGNAGES ---------- */
  .temoignages{background:var(--navy-900); position:relative;}
  .t-scroll{
    display:flex; gap:20px; overflow-x:auto; padding-bottom:10px; scroll-snap-type:x mandatory;
    -ms-overflow-style:none; scrollbar-width:none;
  }
  .t-scroll::-webkit-scrollbar{display:none;}
  .t-card{
    scroll-snap-align:start; flex:0 0 340px; background:var(--navy-800); border:1px solid var(--line);
    padding:30px 28px; display:flex; flex-direction:column;
  }
  .t-card .quote-mark{font-family:var(--serif); font-size:44px; color:var(--gold); line-height:1; margin-bottom:6px;}
  .t-card p.body{font-size:14.5px; color:var(--ink-60); line-height:1.65; flex-grow:1; margin-bottom:20px;}
  .t-card .t-who{display:flex; align-items:center; gap:12px; border-top:1px solid var(--line); padding-top:16px;}
  .t-avatar{
    width:38px; height:38px; border-radius:50%; background:var(--gold); color:var(--navy-900);
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; font-family:var(--serif);
    flex-shrink:0;
  }
  .t-who b{display:block; font-size:14px; color:var(--white); font-weight:600;}
  .t-who span{font-size:12px; color:var(--ink-40);}
  .t-controls{display:flex; gap:12px; margin-top:34px;}
  .t-controls button{
    width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:transparent;
    color:var(--white); cursor:pointer; font-size:16px; transition:border-color .2s, background .2s;
  }
  .t-controls button:hover{border-color:var(--gold); background:rgba(255,106,31,.1);}

  /* ---------- CONTACT ---------- */
  .contact{background:var(--off-white);}
  .contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:2px; background:rgba(10,8,6,.1);}
  @media(max-width:900px){.contact-grid{grid-template-columns:1fr;}}
  .contact-main{background:var(--navy-800); color:var(--white); padding:56px 48px; position:relative; overflow:hidden;}
  .contact-main::before{
    content:''; position:absolute; inset:0;
    background:radial-gradient(700px 400px at 100% 0%, rgba(255,106,31,.16), transparent 60%);
  }
  .contact-main > *{position:relative; z-index:1;}
  .contact-main h3{font-size:30px; margin-bottom:14px;}
  .contact-main p{font-size:15.5px; color:var(--ink-60); margin-bottom:32px; max-width:420px; line-height:1.6;}
  .wa-btn{
    display:inline-flex; align-items:center; gap:12px; background:#25D366; color:#08351d;
    padding:17px 30px; font-weight:700; font-size:15.5px; border-radius:2px;
  }
  .contact-side{background:var(--white); padding:56px 48px; display:flex; flex-direction:column; gap:28px;}
  .contact-line{display:flex; flex-direction:column; gap:4px; padding-bottom:22px; border-bottom:1px solid rgba(10,8,6,.08);}
  .contact-line:last-child{border-bottom:none; padding-bottom:0;}
  .contact-line span.label{font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); font-weight:700;}
  .contact-line a, .contact-line p{font-size:16px; color:var(--navy-800); font-weight:600;}
  .socials{display:flex; gap:14px; margin-top:6px;}
  .socials a{
    width:42px; height:42px; border-radius:50%; border:1px solid rgba(10,8,6,.15);
    display:flex; align-items:center; justify-content:center; transition:all .2s;
  }
  .socials a:hover{background:var(--navy-800); border-color:var(--navy-800);}
  .socials a:hover svg{stroke:var(--white); fill:var(--white);}
  .socials svg{width:18px; height:18px;}

  footer{background:var(--navy-900); padding:36px 0; text-align:center;}
  footer p{font-size:12.5px; color:var(--ink-40); letter-spacing:.02em;}
  footer .logo{justify-content:center; margin-bottom:10px;}

  .reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}

  @media (prefers-reduced-motion: reduce){
    *{transition:none !important; scroll-behavior:auto !important;}
  }