/* ============================================================
   index.css — styles de la page d'accueil
   Extrait des cinq blocs <style> de index.php, dans l'ordre.
   Chargé par index.php via msm_style().
   ============================================================ */


/* ============================================================
   Base, en-tête, hero original
   ============================================================ */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Cairo',sans-serif;
    background:#0f172a;
    color:#fff;
    overflow-x:hidden;
}

.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

/* ================= HEADER ================= */

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    background:rgba(15,23,42,.95);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(255,255,255,.05);
}

nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 0;
}

.logo{
    font-size:30px;
    font-weight:800;
}

.logo span{
    color:#2563eb;
}

.logo-img{
    height:64px;
    width:auto;
    display:block;
}

nav ul{
    display:flex;
    gap:30px;
}

nav ul li a{
    color:#fff;
    transition:.3s;
}

nav ul li a:hover{
    color:#2563eb;
}

.nav-actions{
    display:flex;
    align-items:center;
    gap:24px;
}

.lang-switcher{
    display:flex;
    align-items:center;
    gap:6px;
    padding:5px;
    border:1px solid rgba(148,163,184,.2);
    border-radius:999px;
    background:rgba(15,23,42,.72);
}

.lang-btn{
    min-width:38px;
    height:32px;
    border:0;
    border-radius:999px;
    color:#cbd5e1;
    background:transparent;
    font-family:inherit;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
    transition:.25s;
}

.lang-btn:hover,
.lang-btn.active{
    color:#fff;
    background:#2563eb;
}

html[dir="ltr"] body{
    direction:ltr;
}

html[dir="ltr"] .hero::before{
    right:auto;
    left:-200px;
}

html[dir="ltr"] .hero-text,
html[dir="ltr"] .section-title,
html[dir="ltr"] .portfolio-content,
html[dir="ltr"] .price-card,
html[dir="ltr"] .testimonial,
html[dir="ltr"] .faq-item,
html[dir="ltr"] .contact-form,
html[dir="ltr"] footer{
    text-align:left;
}

html[dir="ltr"] .mini-nav .mini-logo{
    margin-left:0;
    margin-right:auto;
}

html[dir="ltr"] .portfolio-content span{
    grid-column:2;
}

/* ================= HERO ================= */

.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
    padding-top:120px;
}

.hero::before{
    content:'';
    position:absolute;
    width:600px;
    height:600px;
    background:#2563eb;
    filter:blur(250px);
    opacity:.15;
    top:-200px;
    right:-200px;
}

.hero-content{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:60px;
    align-items:center;
}

.hero-text h1{
    font-size:52px;
    line-height:1.3;
    margin-bottom:25px;
    font-weight:800;
}

.hero-text h1 .hero-highlight{
    color:#2563eb;
}

.hero-text p{
    font-size:20px;
    color:#cbd5e1;
    line-height:1.8;
    margin-bottom:40px;
}

.hero-buttons{
    display:flex;
    gap:20px;
}

.btn{
    padding:16px 35px;
    border-radius:12px;
    font-size:17px;
    font-weight:700;
    transition:.3s;
}

.btn-primary{
    background:#2563eb;
    color:#fff;
}

.btn-primary:hover{
    transform:translateY(-5px);
}

.btn-secondary{
    border:2px solid #2563eb;
    color:#fff;
}

.btn-secondary:hover{
    background:#2563eb;
}

/* ================= IMAGE ================= */

.hero-image{
    display:flex;
    justify-content:center;
    align-items:center;
}

.hero-img{
    width:100%;
    max-width:340px;
    height:auto;
    display:block;
    object-fit:contain;
    border-radius:20px;
    filter:drop-shadow(0 20px 40px rgba(37,99,235,.25));
    animation:float 4s ease-in-out infinite;
}

@keyframes float{
    0%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-12px);
    }
    100%{
        transform:translateY(0);
    }
}

/* ================= FEATURES ================= */

.features-bar{
    padding:30px 0;
    background:#111827;
}

.features{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.feature{
    text-align:center;
}

.feature i{
    color:#2563eb;
    font-size:30px;
    margin-bottom:15px;
}

.feature h3{
    margin-bottom:10px;
}

/* ================= RESPONSIVE ================= */

@media(max-width:900px){

    header{
        position:relative;
        padding-bottom:10px;
    }

    nav{
        flex-wrap:wrap;
        justify-content:space-between;
        row-gap:14px;
        padding:16px 0;
    }

    .logo-img{
        height:56px;
    }

    .nav-actions{
        display:contents;
    }

    .lang-switcher{
        order:1;
    }

    nav ul{
        order:2;
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        justify-content:center;
        align-items:center;
        gap:14px 22px;
        flex-basis:100%;
        width:100%;
        padding-top:14px;
        border-top:1px solid rgba(255,255,255,.06);
    }

    .hero{
        padding-top:40px;
    }

    .hero-content{
        grid-template-columns:1fr;
        text-align:center;
    }

    .hero-buttons{
        justify-content:center;
        gap:12px;
    }

    .btn{
        padding:12px 22px;
        font-size:14px;
        border-radius:10px;
    }

    .hero-text h1{
        font-size:32px;
    }

    .hero-text p{
        font-size:16px;
    }

    .hero-img{
        max-width:260px;
        margin-top:40px;
    }

    .features{
        grid-template-columns:1fr 1fr;
    }
}


/* ============================================================
   Hero « msm » + galaxie
   ============================================================ */
.msm-hero{
    --navy: oklch(0.22 0.04 250);
    --navy-deep: oklch(0.17 0.04 250);
    --gold: oklch(0.78 0.13 75);
    --gold-soft: oklch(0.85 0.09 80);
    --teal: oklch(0.65 0.09 195);
    --fg: oklch(0.97 0.01 90);
    --fg-70: oklch(0.97 0.01 90 / 70%);
    --fg-60: oklch(0.97 0.01 90 / 60%);
    --fg-50: oklch(0.97 0.01 90 / 50%);

    position:relative;
    overflow:hidden;
    background:var(--navy);
    color:var(--fg);
    font-family:'Inter',sans-serif;
    direction:ltr;
  }
  .msm-hero *{ box-sizing:border-box; }

  .msm-zellige{
    position:absolute; inset:0; z-index:0; opacity:0.07; pointer-events:none;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 0, transparent 18px, var(--gold) 18px, var(--gold) 19px, transparent 19px),
      radial-gradient(circle at 0% 0%, transparent 0, transparent 18px, var(--teal) 18px, var(--teal) 19px, transparent 19px),
      radial-gradient(circle at 100% 0%, transparent 0, transparent 18px, var(--teal) 18px, var(--teal) 19px, transparent 19px),
      radial-gradient(circle at 0% 100%, transparent 0, transparent 18px, var(--teal) 18px, var(--teal) 19px, transparent 19px),
      radial-gradient(circle at 100% 100%, transparent 0, transparent 18px, var(--teal) 18px, var(--teal) 19px, transparent 19px);
    background-size: 110px 110px;
    animation: msm-drift 60s linear infinite;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
  }
  @keyframes msm-drift{ from{background-position:0 0;} to{background-position:110px 110px;} }

  .msm-glow{ position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; z-index:0; }
  .msm-glow-1{ top:-160px; left:-160px; width:500px; height:500px; background:var(--teal); opacity:0.20; }
  .msm-glow-2{ top:33%; right:-160px; width:520px; height:520px; background:var(--gold); opacity:0.15; }

  .msm-nav{
    position:relative; z-index:10;
    max-width:1280px; margin:0 auto;
    display:none;
    align-items:center; justify-content:space-between;
    padding: 26px 24px;
  }
  @media (min-width: 860px){ .msm-nav{ display:flex; } }
  .msm-logo{
    display:flex; align-items:center; gap:8px;
    font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.15rem;
    text-decoration:none; color:var(--fg);
  }
  .msm-logo-mark{
    display:grid; place-items:center; width:32px; height:32px; border-radius:8px;
    background:linear-gradient(135deg, var(--gold), var(--gold-soft)); color:var(--navy-deep);
  }
  .msm-logo .accent{ color:var(--gold); }

  .msm-links{ display:none; align-items:center; gap:32px; }
  .msm-links a{ font-size:0.9rem; color:var(--fg-70); text-decoration:none; transition:.2s; }
  .msm-links a:hover{ color:var(--fg); }

  .msm-lang{
    display:flex; align-items:center; gap:2px;
    border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.05);
    border-radius:999px; padding:4px; backdrop-filter:blur(6px);
  }
  .msm-lang button{
    padding:6px 12px; font-size:0.75rem; font-weight:600; border-radius:999px;
    border:none; background:transparent; color:var(--fg-60); cursor:pointer; transition:.2s;
    font-family:'Inter', sans-serif;
  }
  .msm-lang button.active{ background:var(--gold); color:var(--navy-deep); }

  @media (min-width: 860px){ .msm-links{ display:flex; } }

  .msm-main{
    position:relative; z-index:10;
    max-width:1280px; margin:0 auto;
    display:grid; grid-template-columns:1fr;
    gap:56px;
    padding: 40px 24px 64px;
  }
  @media (min-width: 1024px){
    .msm-main{ grid-template-columns: 1.05fr 0.95fr; gap:40px; padding-top:44px; }
  }

  .msm-eyebrow{
    display:inline-flex; align-items:center; gap:8px; width:fit-content;
    border:1px solid rgba(227,168,87,0.3); background:rgba(227,168,87,0.1);
    border-radius:999px; padding:6px 14px;
    font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em;
    color:var(--gold);
  }
  .msm-eyebrow-dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); animation:msm-pulse 2s infinite; }
  @keyframes msm-pulse{ 0%,100%{opacity:1;} 50%{opacity:.4;} }

  .msm-h1{
    font-family:'Space Grotesk', sans-serif; font-weight:700; letter-spacing:-0.01em;
    line-height:1.06; margin-top:16px;
    font-size:clamp(2rem, 4.2vw, 3.1rem);
  }
  .msm-h1 .gold-italic{
    font-style:italic;
    background:linear-gradient(90deg, var(--gold), var(--gold-soft));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }

  .msm-ar{ margin-top:14px; font-weight:700; font-size:1.2rem; color:var(--fg-70); }
  .msm-hero[dir="rtl"] .msm-ar{ font-family:'Cairo', sans-serif; }
  .msm-hero[dir="rtl"] .msm-h1{
    font-size:clamp(1.85rem, 3.7vw, 2.7rem);
    line-height:1.3;
  }
  .msm-ar b{ color:var(--gold); }

  .msm-lead{ margin-top:16px; max-width:560px; font-size:0.96rem; line-height:1.65; color:var(--fg-70); }
  .msm-lead span{ color:var(--fg); }

  .msm-cta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:26px; }
  .msm-btn-primary{
    display:inline-flex; align-items:center; gap:10px;
    background:linear-gradient(90deg, var(--teal), rgba(45,156,163,0.8));
    color:white; font-weight:600; font-size:0.9rem;
    padding:15px 26px; border-radius:999px; text-decoration:none;
    box-shadow:0 10px 30px -10px var(--teal); transition:.25s;
  }
  .msm-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 15px 40px -10px var(--teal); }
  .msm-btn-ghost{
    display:inline-flex; align-items:center; gap:8px;
    font-size:0.9rem; font-weight:500; color:var(--fg-70); text-decoration:none;
    border-bottom:1px solid transparent; transition:.2s;
  }
  .msm-btn-ghost:hover{ color:var(--gold); border-color:var(--gold); }

  .msm-stats{
    margin-top:34px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.1);
    display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  }
  .msm-stat b{ display:block; font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.6rem; }
  .msm-stat.accent b{ color:var(--gold); }
  .msm-stat span{ display:block; margin-top:4px; font-size:0.78rem; color:var(--fg-60); }

  .msm-visual{ position:relative; min-height:400px; }
  @media (min-width:1024px){ .msm-visual{ min-height:470px; } }

  .msm-card{
    position:absolute; border-radius:18px; backdrop-filter:blur(20px);
    box-shadow:0 25px 60px -15px rgba(0,0,0,0.5);
  }
  .msm-card-1{
    left:0; top:20px; width:85%; max-width:400px; padding:20px;
    background:rgba(8,20,32,0.8); border:1px solid rgba(255,255,255,0.1);
    animation: msm-fade-blur .85s ease .58s both, msm-float-slow 9s ease-in-out .58s infinite;
  }
  .msm-card-head{ display:flex; align-items:center; justify-content:space-between; }
  .msm-card-head-left{ display:flex; align-items:center; gap:10px; }
  .msm-icon-box{ display:grid; place-items:center; width:32px; height:32px; border-radius:8px; background:rgba(45,156,163,0.2); color:var(--teal); }
  .msm-card-1 .label-small{ font-size:0.7rem; color:var(--fg-50); }
  .msm-card-1 .label-main{ font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:0.85rem; }
  .msm-badge-up{ font-size:0.65rem; font-weight:700; color:var(--teal); background:rgba(45,156,163,0.15); padding:3px 8px; border-radius:999px; }

  .msm-bars{ display:flex; align-items:flex-end; gap:5px; height:96px; margin-top:20px; }
  .msm-bars i{ flex:1; border-radius:2px 2px 0 0; background:linear-gradient(to top, rgba(45,156,163,0.4), rgba(227,168,87,0.7)); display:block; }
  .msm-months{ display:flex; justify-content:space-between; margin-top:14px; font-size:0.65rem; color:var(--fg-50); }

  .msm-card-2{
    right:0; bottom:16px; width:80%; max-width:340px; padding:20px;
    background:linear-gradient(135deg, rgba(8,20,32,0.95), rgba(11,27,43,0.8));
    border:1px solid rgba(227,168,87,0.2);
    animation: msm-fade-blur .85s ease .72s both, msm-float 7s ease-in-out .72s infinite;
  }
  .msm-card-2 .top{ display:flex; align-items:center; justify-content:space-between; }
  .msm-card-2 .top-left{ display:flex; align-items:center; gap:8px; font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:0.85rem; }
  .msm-card-2 .top-right{ font-size:0.65rem; color:var(--fg-50); }
  .msm-progress{ margin-top:16px; height:6px; width:100%; border-radius:999px; background:rgba(255,255,255,0.1); overflow:hidden; }
  .msm-progress i{ display:block; height:100%; width:72%; border-radius:999px; background:linear-gradient(90deg, var(--gold), var(--gold-soft)); }
  .msm-checklist{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:0.78rem; }
  .msm-checklist li{ display:flex; align-items:center; gap:10px; }
  .msm-check-dot{ display:grid; place-items:center; width:16px; height:16px; border-radius:50%; flex-shrink:0; }
  .msm-check-dot.done{ background:var(--teal); color:var(--navy-deep); }
  .msm-check-dot.pending{ border:1px solid rgba(255,255,255,0.25); }
  .msm-checklist li.pending{ color:var(--fg-50); }

  .msm-card-2 .foot{ margin-top:18px; padding-top:14px; border-top:1px solid rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:space-between; }
  .msm-avatars{ display:flex; }
  .msm-avatars span{ width:24px; height:24px; border-radius:50%; border:2px solid var(--navy-deep); margin-left:-8px; display:block; }
  .msm-avatars span:first-child{ margin-left:0; background:var(--gold); }
  .msm-avatars span:nth-child(2){ background:var(--teal); }
  .msm-avatars span:nth-child(3){ background:linear-gradient(135deg, var(--gold), var(--teal)); }

  .msm-wa-badge{
    position:absolute; right:8px; top:-10px; z-index:20;
    display:flex; align-items:center; gap:10px;
    border:1px solid rgba(45,156,163,0.3); background:rgba(8,20,32,0.9);
    border-radius:999px; padding:8px 16px 8px 8px;
    box-shadow:0 20px 40px -12px rgba(0,0,0,0.5);
    animation: msm-fade-blur .85s ease .88s both, msm-float-fast 5s ease-in-out .88s infinite;
  }
  .msm-wa-badge .ic{ display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#25D366; color:#fff; }
  .msm-wa-badge .eyebrow-tiny{ font-size:0.62rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--fg-50); }
  .msm-wa-badge .main-line{ font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:0.78rem; }
  .msm-wa-badge .main-line b{ color:var(--gold); }
  .msm-wa-badge .live-dot{ width:8px; height:8px; border-radius:50%; background:var(--teal); animation:msm-pulse 2s infinite; margin-left:2px; display:inline-block; }

  .msm-pill{
    position:absolute; display:none; align-items:center; gap:8px;
    border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.05);
    border-radius:999px; padding:7px 14px; font-size:0.7rem; color:var(--fg-60);
    backdrop-filter:blur(6px);
  }
  @media (min-width:860px){ .msm-pill{ display:inline-flex; } }
  .msm-pill-1{ left:32px; bottom:-6px; }
  .msm-pill-2{ right:24px; top:170px; }

  @keyframes msm-float{ 0%,100%{transform:translateY(0px);} 50%{transform:translateY(-14px);} }
  @keyframes msm-float-slow{ 0%,100%{transform:translateY(0px);} 50%{transform:translateY(-10px);} }
  @keyframes msm-float-fast{ 0%,100%{transform:translateY(0px) rotate(-1deg);} 50%{transform:translateY(-8px) rotate(1deg);} }

  .msm-hero a:focus-visible, .msm-hero button:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
  @media (prefers-reduced-motion: reduce){
    .msm-zellige, .msm-card, .msm-wa-badge, .msm-eyebrow-dot, .msm-wa-badge .live-dot{ animation:none; }
  }

  /* RTL support when Arabic is the selected language */
  .msm-hero[dir="rtl"]{ text-align:right; }
  .msm-hero[dir="rtl"] .msm-h1,
  .msm-hero[dir="rtl"] .msm-lead,
  .msm-hero[dir="rtl"] .msm-eyebrow,
  .msm-hero[dir="rtl"] .msm-links,
  .msm-hero[dir="rtl"] .msm-stat{ font-family:'Cairo', sans-serif; }
  .msm-hero[dir="rtl"] .msm-nav,
  .msm-hero[dir="rtl"] .msm-cta-row,
  .msm-hero[dir="rtl"] .msm-links,
  .msm-hero[dir="rtl"] .msm-eyebrow,
  .msm-hero[dir="rtl"] .msm-card-head,
  .msm-hero[dir="rtl"] .msm-card-head-left,
  .msm-hero[dir="rtl"] .msm-card-2 .top,
  .msm-hero[dir="rtl"] .msm-card-2 .top-left,
  .msm-hero[dir="rtl"] .msm-card-2 .foot,
  .msm-hero[dir="rtl"] .msm-checklist li,
  .msm-hero[dir="rtl"] .msm-wa-badge{ flex-direction:row-reverse; }
  .msm-hero[dir="rtl"] .msm-btn-primary,
  .msm-hero[dir="rtl"] .msm-btn-ghost{ flex-direction:row-reverse; }

  /* ============================================================
     [NOUVEAU] Animations d'entrée + optimisations mobile
     ============================================================ */

  /* --- 1. Entrée en cascade -------------------------------- */
  @keyframes msm-rise{
    from{ opacity:0; transform:translateY(26px); }
    to  { opacity:1; transform:translateY(0); }
  }
  @keyframes msm-fade-blur{
    from{ opacity:0; filter:blur(10px); }
    to  { opacity:1; filter:blur(0); }
  }

  .msm-hero .msm-eyebrow,
  .msm-hero .msm-h1,
  .msm-hero .msm-ar,
  .msm-hero .msm-lead,
  .msm-hero .msm-cta-row,
  .msm-hero .msm-stats{
    opacity:0;
    animation: msm-rise .75s cubic-bezier(.22,1,.36,1) var(--msm-d,0s) forwards;
  }
  .msm-hero .msm-eyebrow { --msm-d:.05s; }
  .msm-hero .msm-h1      { --msm-d:.16s; }
  .msm-hero .msm-ar      { --msm-d:.26s; }
  .msm-hero .msm-lead    { --msm-d:.34s; }
  .msm-hero .msm-cta-row { --msm-d:.44s; }
  .msm-hero .msm-stats   { --msm-d:.54s; }

  .msm-pill{ opacity:0; animation: msm-fade-blur .85s ease 1s both; }

  /* --- 2. Shimmer sur le mot doré (2 passages puis repos) --- */
  /* IMPORTANT : utiliser background-IMAGE (longhand).
     Le raccourci "background" réinitialise background-clip à border-box
     et casse l'effet texte doré -> gros blocs jaunes. */
  .msm-h1 .gold-italic{
    background-image:linear-gradient(100deg,
      var(--gold) 0%, var(--gold) 36%,
      oklch(0.96 0.05 92) 50%,
      var(--gold-soft) 64%, var(--gold-soft) 100%);
    background-size:220% 100%;
    background-position:0% 0;
    background-repeat:no-repeat;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation: msm-shimmer 3.2s ease-in-out 1.2s 2;
  }
  /* Filet de sécurité : si le navigateur ne gère pas background-clip:text,
     on affiche le mot en doré plein au lieu de le rendre invisible. */
  @supports not ((-webkit-background-clip:text) or (background-clip:text)){
    .msm-h1 .gold-italic{ background-image:none; color:var(--gold); }
  }
  @keyframes msm-shimmer{
    0%,100%{ background-position:0% 0; }
    50%    { background-position:100% 0; }
  }

  /* --- 3. Halo WhatsApp (plus calme) ----------------------- */
  .msm-wa-badge .ic{ position:relative; }
  .msm-wa-badge .ic::after{
    content:""; position:absolute; inset:0; border-radius:50%;
    border:2px solid #25D366; opacity:0; pointer-events:none;
    animation: msm-halo 3s ease-out 1.8s infinite;
  }
  @keyframes msm-halo{
    0%     { transform:scale(1);   opacity:.5; }
    70%,100%{ transform:scale(1.9); opacity:0; }
  }

  /* --- 4. Halos de fond qui respirent (desktop) ------------ */
  @keyframes msm-glow-breathe{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%    { transform:translate(26px,-20px) scale(1.12); }
  }
  .msm-glow-1{ animation: msm-glow-breathe 16s ease-in-out infinite; }
  .msm-glow-2{ animation: msm-glow-breathe 21s ease-in-out infinite reverse; }

  /* --- 5. MOBILE / TABLETTE : cards empilées, pas serrées --- */
  @media (max-width: 1023px){
    .msm-main{ gap:36px; padding-bottom:72px; }

    .msm-visual{
      display:flex; flex-direction:column; gap:14px;
      min-height:0;
    }
    .msm-visual .msm-card{
      position:relative; left:auto; right:auto; top:auto; bottom:auto;
      width:100%; max-width:none;
      animation-name: msm-fade-blur;   /* garde l'entrée, coupe le flottement */
    }
    .msm-visual .msm-wa-badge{
      position:relative; left:auto; right:auto; top:auto; bottom:auto;
      width:fit-content; order:-1;
      animation-name: msm-fade-blur;
    }
    .msm-bars{ height:78px; }

    /* moins de charge GPU / batterie */
    .msm-zellige{ animation-duration:130s; opacity:0.05; }
    .msm-glow-1, .msm-glow-2{ animation:none; }
    .msm-glow{ filter:blur(70px); }
  }

  /* --- 6. PETIT MOBILE : CTA pleine largeur ----------------- */
  @media (max-width: 560px){
    .msm-cta-row{ gap:12px; margin-top:28px; }
    .msm-cta-row .msm-btn-primary{ flex:1 0 100%; justify-content:center; padding:16px 22px; }
    .msm-cta-row .msm-btn-ghost{ flex:1 1 auto; justify-content:center; }
    .msm-stats{ margin-top:36px; padding-top:26px; }
    .msm-stat b{ font-size:1.55rem; }
    .msm-visual .msm-wa-badge{ align-self:center; }
  }

  /* --- 8. GALAXIE / TROU NOIR (fond animé en <canvas>) ----- */
  .msm-hero{
    /* Tokens lus par le canvas.
       En HEX volontairement : le canvas 2D n'accepte oklch() que sur les
       navigateurs récents, alors que le hex marche partout. Valeurs
       converties depuis la palette oklch de la marque. */
    --galaxy-base:      #0B1C2C;  /* = --navy      */
    --galaxy-deep:      #021020;  /* = --navy-deep */
    --galaxy-gold:      #E8AA4E;  /* = --gold      */
    --galaxy-gold-soft: #EDC889;  /* = --gold-soft */
    --galaxy-teal:      #3FA0A0;  /* = --teal      */
    --galaxy-star:      #F6EDE0;
  }

  .msm-galaxy,
  .msm-scrim{
    position:absolute; inset:0; z-index:0; pointer-events:none;
  }
  .msm-galaxy{ display:block; width:100%; height:100%; opacity:.95; }

  /* Voile navy : garde la colonne de texte calme et lisible */
  .msm-scrim{
    background:
      linear-gradient(to var(--msm-scrim-dir, right),
        rgba(2,16,32,.96) 0%,
        rgba(2,16,32,.84) 46%,
        rgba(2,16,32,0)  100%),
      radial-gradient(120% 90% at 50% 110%, rgba(2,16,32,.88), transparent 70%);
  }
  .msm-hero[dir="rtl"] .msm-scrim{ --msm-scrim-dir: left; }

  /* La galaxie apporte déjà sa lumière : on calme les anciens halos */
  .msm-glow-1{ opacity:.10; }
  .msm-glow-2{ opacity:.08; }

  /* --- 7. Respect de "prefers-reduced-motion" -------------- */
  @media (prefers-reduced-motion: reduce){
    .msm-hero .msm-eyebrow,
    .msm-hero .msm-h1,
    .msm-hero .msm-ar,
    .msm-hero .msm-lead,
    .msm-hero .msm-cta-row,
    .msm-hero .msm-stats,
    .msm-hero .msm-card,
    .msm-hero .msm-wa-badge,
    .msm-hero .msm-pill,
    .msm-hero .msm-glow,
    .msm-h1 .gold-italic{
      opacity:1 !important;
      filter:none !important;
      transform:none !important;
      animation:none !important;
    }
    .msm-wa-badge .ic::after{ animation:none; opacity:0; }
  }


/* ============================================================
   Sections du site
   ============================================================ */
/* SECTION TITLE */

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title h2{
    font-size:42px;
    margin-bottom:15px;
}

.section-title p{
    color:#94a3b8;
    font-size:18px;
}

/* SERVICES */

/* ============================================================
   SERVICES — eventail
   Les six cartes sont serrees en eventail, comme une main de
   cartes : chacune ne laisse voir qu'une tranche. Au survol, la
   carte se redresse SUR PLACE et s'ouvre.
   Le markup ne change pas : meme .services-grid, memes
   .service-card, memes data-i18n.

   Le redressement est fait en deux temps : rotate(0) ramenerait
   la carte vers le centre, elle fuirait sous le curseur et le
   survol clignoterait. On lui rend donc sa position d'origine
   avec un translate calcule (rayon 449.5px, pas de 7 degres).
   ============================================================ */

@keyframes msm-fan-in{ from{ opacity:0; } to{ opacity:1; } }

.services-grid{
    animation:msm-fan-in .8s ease both;
    animation-timeline:view();
    animation-range:entry 0% entry 60%;
}
@supports not (animation-timeline: view()){
    .services-grid{ animation:none; }
}

.services-grid{
    --card-w:200px;
    --card-h:290px;
    --pivot:205%;                       /* rayon de l'eventail */
    --step:7deg;                        /* angle entre deux cartes */
    --lift:-46px;                       /* montee au survol */
    --ease:cubic-bezier(.2,.8,.2,1);

    position:relative;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    height:calc(var(--card-h) + 120px);
    padding-top:40px;
}

.service-card{
    position:absolute;
    top:40px;
    width:var(--card-w);
    height:var(--card-h);
    display:flex; flex-direction:column;
    padding:24px 20px;

    /* Verre : le fond laisse passer la section, le flou la brouille.
       Un filet de lumiere en haut (inset) donne l'epaisseur, l'ombre
       est decalee vers le bas-droite comme une carte posee. */
    border-radius:26px;
    background:linear-gradient(160deg, rgba(246,237,224,.07), rgba(2,16,32,.42));
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border:1px solid rgba(246,237,224,.09);
    box-shadow:
        10px 26px 42px -18px rgba(0,0,0,.8),
        inset 0 1px 0 rgba(246,237,224,.10);
    transform-origin:50% var(--pivot);
    will-change:transform;
    transition:transform .55s var(--ease),
               filter .4s ease,
               box-shadow .5s ease,
               border-color .3s,
               background .3s;
    isolation:isolate;
    overflow:hidden;
    cursor:pointer;
}

/* --- place de chaque carte dans l'eventail --- */
.service-card:nth-child(1){ transform:rotate(calc(var(--step) * -2.5)); z-index:1; }
.service-card:nth-child(2){ transform:rotate(calc(var(--step) * -1.5)); z-index:2; }
.service-card:nth-child(3){ transform:rotate(calc(var(--step) * -0.5)); z-index:3; }
.service-card:nth-child(4){ transform:rotate(calc(var(--step) *  0.5)); z-index:4; }
.service-card:nth-child(5){ transform:rotate(calc(var(--step) *  1.5)); z-index:5; }
.service-card:nth-child(6){ transform:rotate(calc(var(--step) *  2.5)); z-index:6; }

/* --- redressement sur place : meme centre, sans rotation --- */
.service-card:nth-child(1):hover, .service-card:nth-child(1):focus-within{ transform:translate(-135px, calc(21px + var(--lift))) scale(1.08); }
.service-card:nth-child(2):hover, .service-card:nth-child(2):focus-within{ transform:translate(-82px,  calc( 8px + var(--lift))) scale(1.08); }
.service-card:nth-child(3):hover, .service-card:nth-child(3):focus-within{ transform:translate(-27px,  calc( 1px + var(--lift))) scale(1.08); }
.service-card:nth-child(4):hover, .service-card:nth-child(4):focus-within{ transform:translate( 27px,  calc( 1px + var(--lift))) scale(1.08); }
.service-card:nth-child(5):hover, .service-card:nth-child(5):focus-within{ transform:translate( 82px,  calc( 8px + var(--lift))) scale(1.08); }
.service-card:nth-child(6):hover, .service-card:nth-child(6):focus-within{ transform:translate( 135px, calc(21px + var(--lift))) scale(1.08); }

/* Filet de laiton : apparait au survol, ne s'impose jamais. */
.service-card::after{
    content:""; position:absolute; inset:0; z-index:-1;
    border-radius:inherit; padding:1px;
    background:linear-gradient(135deg, rgba(227,168,87,.75), rgba(63,160,160,.35) 60%, transparent);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    opacity:0; transition:opacity .3s;
}

/* Les autres cartes reculent, sans disparaitre. */
.services-grid:hover .service-card,
.services-grid:focus-within .service-card{ filter:brightness(.74) saturate(.85); }

.service-card:hover,
.service-card:focus-within{
    filter:none !important;
    z-index:20;
    border-color:transparent;
    background:linear-gradient(160deg, rgba(63,160,160,.16), rgba(2,16,32,.5));
    box-shadow:
        14px 44px 70px -24px rgba(0,0,0,.85),
        inset 0 1px 0 rgba(246,237,224,.16);
}
.service-card:hover::after,
.service-card:focus-within::after{ opacity:1; }

/* --- icone : etoile khatim --- */
.service-icon{
    position:relative;
    width:54px; height:54px;
    display:grid; place-items:center;
    margin-bottom:auto;
    color:#E3A857;
    transition:color .3s;
}
.service-icon::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(140deg, rgba(227,168,87,.20), rgba(63,160,160,.16));
    clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
    transform:scale(1.5);
    transition:transform .45s cubic-bezier(.22,1,.36,1), background .3s;
}
.service-card:hover .service-icon::before{
    transform:scale(1.5) rotate(45deg);
    background:linear-gradient(140deg, rgba(227,168,87,.34), rgba(63,160,160,.22));
}
.service-icon i{ position:relative; font-size:21px; }

.service-card h3{
    margin-bottom:0;
    font-size:17px; font-weight:700; line-height:1.35;
    color:#F6EDE0;
    transition:margin-bottom .45s var(--ease);
}

/* Texte et lien : replies dans l'eventail, ouverts au survol. */
.service-card p{
    color:rgba(246,237,224,.72);
    font-size:13.5px; line-height:1.65;
    margin-bottom:0;
    opacity:0; max-height:0; overflow:hidden;
    transition:opacity .35s ease .08s, max-height .55s var(--ease);
}
.service-card:hover h3,
.service-card:focus-within h3{ margin-bottom:10px; }
.service-card:hover p,
.service-card:focus-within p{ opacity:1; max-height:130px; margin-bottom:14px; }

/* --- lien discret, la fleche suit la direction du texte --- */
.service-more{
    align-self:flex-start;
    display:inline-flex; align-items:center; gap:9px;
    color:#E3A857; font-size:13px; font-weight:700;
    opacity:0; transform:translateY(6px);
    transition:opacity .3s ease .12s, transform .4s var(--ease) .12s, gap .3s, color .3s;
}
.service-more i{ font-size:11px; transition:transform .3s; }
html[dir="rtl"] .service-more i{ transform:scaleX(-1); }
.service-card:hover .service-more,
.service-card:focus-within .service-more{ opacity:1; transform:translateY(0); }
.service-card:hover .service-more{ gap:14px; color:#EDC889; }

.service-card a:focus-visible{
    outline:2px solid #E3A857; outline-offset:4px; border-radius:6px;
}

/* --- Mobile : plus d'eventail. Un carrousel lisible au pouce. --- */
@media(max-width:900px){
    .services-grid{
        display:flex;
        height:auto;
        align-items:stretch;
        justify-content:flex-start;
        gap:16px;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        padding:6px 4px 22px;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }
    .services-grid::-webkit-scrollbar{ display:none; }

    .service-card,
    .service-card:nth-child(1), .service-card:nth-child(2), .service-card:nth-child(3),
    .service-card:nth-child(4), .service-card:nth-child(5), .service-card:nth-child(6){
        position:relative; top:auto;
        flex:0 0 78%; max-width:310px;
        width:auto; height:auto; min-height:280px;
        padding:28px 24px;
        border-radius:22px;
        transform:none !important;
        filter:none !important;
        scroll-snap-align:center;
    }
    .service-icon{ width:54px; height:54px; margin-bottom:20px; }
    .service-card h3{ font-size:19px; margin-bottom:12px; }
    .service-card p{ font-size:15px; opacity:1; max-height:none; margin-bottom:20px; flex:1; }
    .service-more{ font-size:14px; opacity:1; transform:none; min-height:44px; align-items:center; }
}

@media (prefers-reduced-motion: reduce){
    .service-card, .service-card::after, .service-card p, .service-card h3,
    .service-icon::before, .service-more, .service-more i{ transition:none; }
    .service-card:hover .service-icon::before{ transform:scale(1.5); }
}

/* PORTFOLIO */

.portfolio-section{
    position:relative;
    overflow:hidden;
    padding:120px 0;
    background:
        radial-gradient(circle at 15% 20%,rgba(37,99,235,.22),transparent 34%),
        radial-gradient(circle at 84% 8%,rgba(14,165,233,.14),transparent 30%),
        linear-gradient(180deg,#0f172a 0%,#111827 52%,#0f172a 100%);
}

.portfolio-section::before,
.portfolio-section::after{
    content:'';
    position:absolute;
    pointer-events:none;
    border-radius:999px;
    filter:blur(10px);
}

.portfolio-section::before{
    inset:70px auto auto 6%;
    width:220px;
    height:220px;
    background:rgba(37,99,235,.18);
}

.portfolio-section::after{
    right:8%;
    bottom:90px;
    width:180px;
    height:180px;
    background:rgba(125,211,252,.1);
}

.portfolio-section .container{
    position:relative;
    z-index:1;
}

.portfolio-heading{
    max-width:760px;
    margin-right:auto;
    margin-left:auto;
}

.portfolio-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.portfolio-cta{
    display:flex;
    justify-content:center;
    margin-top:50px;
}

.portfolio-item{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    min-height:480px;
    padding:18px;
    border:1px solid rgba(148,163,184,.16);
    border-radius:24px;
    background:
        linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.035)),
        rgba(15,23,42,.72);
    box-shadow:0 24px 70px rgba(2,6,23,.38);
    backdrop-filter:blur(20px);
    transition:border-color .35s ease,box-shadow .35s ease,transform .35s ease;
    will-change:transform;
    cursor:pointer;
}

/* PORTFOLIO LIGHTBOX */

.portfolio-lightbox{
    display:none;
    position:fixed;
    inset:0;
    z-index:2000;
    justify-content:center;
    align-items:center;
    padding:40px;
    background:rgba(2,6,23,.92);
    backdrop-filter:blur(8px);
}

.portfolio-lightbox.active{
    display:flex;
}

.portfolio-lightbox img{
    max-width:90%;
    max-height:90%;
    border-radius:16px;
    box-shadow:0 30px 90px rgba(0,0,0,.55);
}

.portfolio-lightbox-close{
    position:absolute;
    top:30px;
    right:40px;
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.2);
    font-size:28px;
    color:#fff;
    cursor:pointer;
    line-height:1;
    transition:.25s;
}

.portfolio-lightbox-close:hover{
    background:#2563eb;
    border-color:#2563eb;
}

@media(max-width:700px){

.portfolio-lightbox-close{
    top:16px;
    right:16px;
}

}

.portfolio-item::before{
    content:'';
    position:absolute;
    inset:-1px;
    z-index:-1;
    opacity:0;
    background:
        radial-gradient(circle at var(--glow-x,50%) var(--glow-y,0%),rgba(37,99,235,.34),transparent 34%),
        linear-gradient(135deg,rgba(37,99,235,.26),transparent 42%);
    transition:opacity .35s ease;
}

.portfolio-item::after{
    content:'';
    position:absolute;
    inset:auto 28px 0;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(147,197,253,.7),transparent);
    opacity:.4;
}

.portfolio-item:hover{
    border-color:rgba(96,165,250,.56);
    box-shadow:0 34px 90px rgba(2,6,23,.58),0 0 44px rgba(37,99,235,.18);
}

.portfolio-item:hover::before{
    opacity:1;
}


/* ============================================================
   PORTFOLIO — visionneuse
   Les cartes cachent une vraie capture d'écran, mais rien ne le
   disait : ni curseur, ni survol, ni libellé. On rend le geste
   visible, et la visionneuse permet enfin de passer d'un projet
   à l'autre sans refermer.
   ============================================================ */

/* --- l'invitation au clic --- */
.portfolio-open{
    position:absolute; inset:0; z-index:4;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:14px;
    border-radius:inherit;
    background:linear-gradient(180deg, rgba(2,16,32,.35), rgba(2,16,32,.82));
    opacity:0; pointer-events:none;
    transition:opacity .32s ease;
}
.portfolio-item:hover .portfolio-open,
.portfolio-item:focus-visible .portfolio-open{ opacity:1; }

/* Sur écran tactile il n'y a pas de survol : sans cette règle, le
   visiteur mobile — la majorité — ne saurait jamais que la carte
   s'ouvre. On affiche alors un repère discret, en permanence, en bas
   de la carte plutôt qu'un voile sur toute la surface. */
@media (hover: none){
    .portfolio-open{
        opacity:1;
        inset:auto 0 0 0;
        flex-direction:row; gap:9px;
        padding:14px;
        background:linear-gradient(180deg, transparent, rgba(2,16,32,.9));
        border-radius:0 0 24px 24px;
    }
    .portfolio-open i{
        width:30px; height:30px; font-size:12px;
        transform:scale(1.25) rotate(0deg);
    }
    .portfolio-open span{ font-size:13.5px; }
}

.portfolio-open i{
    width:60px; height:60px; display:grid; place-items:center;
    font-size:20px; color:#0B1C2C;
    background:linear-gradient(140deg,#E3A857,#EDC889);
    clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
    transform:scale(1.35) rotate(-25deg);
    transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.portfolio-item:hover .portfolio-open i{ transform:scale(1.35) rotate(0deg); }

.portfolio-open span{
    font-size:14.5px; font-weight:700; letter-spacing:.02em; color:#F6EDE0;
}

.portfolio-item:focus-visible{ outline:2px solid #E3A857; outline-offset:4px; }

/* --- la lueur passe du bleu au laiton --- */
.portfolio-item::before{
    background:
        radial-gradient(circle at var(--glow-x,50%) var(--glow-y,0%),rgba(227,168,87,.28),transparent 34%),
        linear-gradient(135deg,rgba(63,160,160,.22),transparent 42%);
}
.portfolio-item::after{
    background:linear-gradient(90deg,transparent,rgba(227,168,87,.6),transparent);
}
.portfolio-item:hover{
    border-color:rgba(227,168,87,.5);
    box-shadow:0 34px 90px rgba(2,6,23,.58),0 0 44px rgba(227,168,87,.14);
}

/* --- le numéro : laiton, plus le carré bleu --- */
.portfolio-content span{
    background:transparent;
    border:1px solid rgba(227,168,87,.4);
    color:#E3A857;
}

/* --- la grille respire --- */
.portfolio-grid{ gap:24px; }
@media(min-width:1500px){
    .portfolio-section .container{ width:94%; max-width:1560px; }
}

/* ============ VISIONNEUSE ============ */
.portfolio-lightbox{
    display:none; position:fixed; inset:0; z-index:2000;
    flex-direction:column; align-items:center; justify-content:center;
    gap:18px; padding:76px 5% 40px;
    background:rgba(2,16,32,.94); backdrop-filter:blur(10px);
}
.portfolio-lightbox.active{ display:flex; }

.portfolio-lightbox img{
    max-width:100%; max-height:calc(100vh - 230px);
    border-radius:16px; box-shadow:0 30px 90px rgba(0,0,0,.6);
    object-fit:contain;
}

/* légende : le visiteur sait enfin quel projet il regarde */
.pf-caption{ text-align:center; max-width:60ch; }
.pf-caption h4{
    font-size:19px; font-weight:700; color:#F6EDE0; margin-bottom:7px;
}
.pf-caption p{ font-size:14.5px; line-height:1.7; color:rgba(246,237,224,.66); }

.pf-count{
    font-size:12.5px; font-weight:700; letter-spacing:.14em;
    color:rgba(246,237,224,.5); direction:ltr;
}

/* flèches : inset-inline pour qu'elles se croisent en RTL */
.pf-nav{
    position:absolute; inset-block-start:50%; transform:translateY(-50%);
    width:52px; height:52px; display:grid; place-items:center;
    border-radius:50%; cursor:pointer;
    background:rgba(246,237,224,.07);
    border:1px solid rgba(246,237,224,.16);
    color:#F6EDE0; font-size:17px;
    transition:background .25s, border-color .25s, transform .25s;
}
.pf-nav:hover{ background:rgba(227,168,87,.9); border-color:transparent; color:#0B1C2C; }
.pf-prev{ inset-inline-start:3%; }
.pf-next{ inset-inline-end:3%; }
html[dir="rtl"] .pf-nav i{ transform:scaleX(-1); }

.portfolio-lightbox-close{
    inset-block-start:26px; inset-inline-end:32px; top:auto; right:auto;
    position:absolute;
}
.portfolio-lightbox-close:hover{
    background:rgba(227,168,87,.9); border-color:transparent; color:#0B1C2C;
}

@media(max-width:900px){
    .portfolio-lightbox{ padding:66px 16px 32px; gap:14px; }
    .portfolio-lightbox img{ max-height:calc(100vh - 250px); }
    .pf-nav{ width:46px; height:46px; inset-block-start:auto; inset-block-end:26px; transform:none; }
    .pf-prev{ inset-inline-start:22%; }
    .pf-next{ inset-inline-end:22%; }
    .portfolio-lightbox-close{ inset-block-start:14px; inset-inline-end:14px; }
}

@media (prefers-reduced-motion: reduce){
    .portfolio-open, .portfolio-open i, .pf-nav{ transition:none; }
    .portfolio-item:hover .portfolio-open i{ transform:scale(1.35) rotate(-25deg); }
}

.template-window{
    overflow:hidden;
    border:1px solid rgba(226,232,240,.14);
    border-radius:20px;
    background:#020617;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
}

.template-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    min-height:38px;
    padding:0 14px;
    border-bottom:1px solid rgba(226,232,240,.1);
    background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(15,23,42,.78));
}

.window-controls{
    display:flex;
    gap:6px;
}

.window-controls span{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#475569;
}

.window-controls span:nth-child(1){background:#ef4444;}
.window-controls span:nth-child(2){background:#f59e0b;}
.window-controls span:nth-child(3){background:#22c55e;}

.template-url{
    flex:1;
    max-width:180px;
    padding:5px 12px;
    border:1px solid rgba(148,163,184,.12);
    border-radius:999px;
    color:#94a3b8;
    background:rgba(15,23,42,.85);
    font-size:11px;
    text-align:left;
    direction:ltr;
}

.template-screen{
    min-height:265px;
    padding:18px;
    background:
        radial-gradient(circle at 20% 12%,rgba(255,255,255,.18),transparent 20%),
        linear-gradient(135deg,var(--template-a),var(--template-b));
    transition:transform .55s cubic-bezier(.22,1,.36,1);
}

.portfolio-item:hover .template-screen{
    transform:scale(1.035);
}

.mini-nav,
.mini-features,
.mini-products,
.mini-menu,
.mini-stats,
.mini-search,
.mini-services{
    display:flex;
    align-items:center;
    gap:8px;
}

.mini-nav{
    justify-content:flex-start;
    margin-bottom:18px;
}

.mini-nav span{
    width:36px;
    height:8px;
    border-radius:999px;
    background:rgba(255,255,255,.45);
}

.mini-nav .mini-logo{
    width:34px;
    height:34px;
    margin-left:auto;
    border-radius:12px;
    background:rgba(255,255,255,.92) url('https://monsitemaroc.online/wp-content/uploads/2026/07/Code_Generated_Image-1.png') center/cover no-repeat;
    box-shadow:0 12px 28px rgba(15,23,42,.18);
}

.mini-hero{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:16px;
    align-items:center;
}

.mini-copy h3{
    color:#fff;
    font-size:21px;
    line-height:1.35;
    margin:10px 0;
}

.mini-copy p,
.mini-eyebrow{
    display:block;
    border-radius:999px;
    background:rgba(255,255,255,.5);
}

.mini-eyebrow{
    width:64px;
    height:8px;
}

.mini-copy p{
    width:86%;
    height:8px;
    margin-bottom:16px;
    opacity:.8;
}

.mini-copy button{
    border:0;
    border-radius:999px;
    padding:9px 16px;
    color:#0f172a;
    background:#fff;
    font-family:inherit;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 12px 28px rgba(2,6,23,.18);
    transition:transform .3s ease,box-shadow .3s ease;
}

.portfolio-item:hover .mini-copy button{
    transform:translateY(-2px);
    box-shadow:0 18px 36px rgba(2,6,23,.24);
}

.mini-visual,
.mini-product,
.mini-dish,
.mini-profile,
.mini-property,
.mini-beauty{
    position:relative;
    overflow:hidden;
    min-height:142px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:24px;
    background:rgba(255,255,255,.22);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 18px 40px rgba(2,6,23,.18);
}

.mini-visual span,
.mini-product span,
.mini-dish span,
.mini-profile span,
.mini-property span,
.mini-beauty span{
    position:absolute;
    display:block;
}

.mini-visual span:nth-child(1){
    inset:22px 20px auto auto;
    width:62px;
    height:62px;
    border-radius:20px;
    background:rgba(255,255,255,.78);
}

.mini-visual span:nth-child(2){
    left:24px;
    bottom:25px;
    width:82px;
    height:16px;
    border-radius:999px;
    background:rgba(255,255,255,.55);
}

.mini-visual span:nth-child(3){
    left:24px;
    bottom:52px;
    width:48px;
    height:48px;
    border-radius:16px;
    background:rgba(37,99,235,.72);
}

.mini-visual{
    overflow:hidden;
}

.mini-preview{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:24px;
    display:block;
}

.mini-dish .mini-preview{
    border-radius:50%;
}

.mini-features,
.mini-products,
.mini-menu,
.mini-stats,
.mini-search,
.mini-services{
    margin-top:16px;
}

.mini-features span,
.mini-products span,
.mini-menu span,
.mini-stats span,
.mini-search span,
.mini-services span{
    flex:1;
    min-height:44px;
    border-radius:16px;
    background:rgba(255,255,255,.24);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}

.mini-product span{
    inset:24px 28px;
    border-radius:22px;
    background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(219,234,254,.72));
}

.mini-dish{
    border-radius:50%;
    min-height:132px;
    aspect-ratio:1;
    margin:auto;
}

.mini-dish span:nth-child(1){
    inset:24px;
    border-radius:50%;
    background:rgba(255,255,255,.82);
}

.mini-dish span:nth-child(2){
    inset:48px;
    border-radius:50%;
    background:var(--template-c);
}

.mini-profile span:nth-child(1){
    top:18px;
    right:50%;
    width:54px;
    height:54px;
    border-radius:50%;
    transform:translateX(50%);
    background:rgba(255,255,255,.86);
}

.mini-profile span:nth-child(2),
.mini-profile span:nth-child(3){
    right:28px;
    left:28px;
    height:12px;
    border-radius:999px;
    background:rgba(255,255,255,.58);
}

.mini-profile span:nth-child(2){bottom:48px;}
.mini-profile span:nth-child(3){bottom:26px;left:54px;}

.mini-property span:nth-child(1){
    inset:28px 22px 48px;
    border-radius:18px;
    background:rgba(255,255,255,.78);
}

.mini-property span:nth-child(2){
    right:38px;
    bottom:24px;
    width:58px;
    height:10px;
    border-radius:999px;
    background:rgba(255,255,255,.62);
}

.mini-property span:nth-child(3){
    left:28px;
    bottom:22px;
    width:42px;
    height:24px;
    border-radius:999px;
    background:#fff;
}

.mini-beauty span:nth-child(1){
    inset:18px 20px auto auto;
    width:76px;
    height:94px;
    border-radius:42px 42px 18px 18px;
    background:rgba(255,255,255,.82);
}

.mini-beauty span:nth-child(2){
    left:22px;
    top:28px;
    width:42px;
    height:42px;
    border-radius:16px;
    background:rgba(255,255,255,.42);
}

.mini-beauty span:nth-child(3){
    left:22px;
    bottom:26px;
    width:82px;
    height:12px;
    border-radius:999px;
    background:rgba(255,255,255,.62);
}

.portfolio-content{
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px 16px;
    align-items:start;
    padding:24px 4px 2px;
}

.portfolio-content span{
    grid-row:1 / 3;
    grid-column:2;
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border:1px solid rgba(147,197,253,.26);
    border-radius:14px;
    color:#93c5fd;
    background:rgba(37,99,235,.12);
    font-size:13px;
    font-weight:800;
}

.portfolio-content h3{
    margin:0;
    font-size:24px;
    line-height:1.2;
}

.portfolio-content p{
    margin:0;
    color:#cbd5e1;
    line-height:1.8;
}

.portfolio-corporate{--template-a:#2563eb;--template-b:#0f172a;--template-c:#93c5fd;}
.portfolio-commerce{--template-a:#0ea5e9;--template-b:#1e3a8a;--template-c:#bfdbfe;}
.portfolio-restaurant{--template-a:#dc2626;--template-b:#7f1d1d;--template-c:#fbbf24;}
.portfolio-medical{--template-a:#0891b2;--template-b:#164e63;--template-c:#a5f3fc;}
.portfolio-realestate{--template-a:#2563eb;--template-b:#1e293b;--template-c:#dbeafe;}
.portfolio-beauty{--template-a:#be185d;--template-b:#581c87;--template-c:#fbcfe8;}

@media(max-width:1100px){

.portfolio-grid{
    grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:700px){

.portfolio-section{
    padding:90px 0;
}

.portfolio-grid{
    grid-template-columns:1fr;
}

.portfolio-item{
    min-height:auto;
}

.mini-hero{
    grid-template-columns:1fr;
}

.mini-visual,
.mini-product,
.mini-dish,
.mini-profile,
.mini-property,
.mini-beauty{
    min-height:120px;
}

}

/* STATS */

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.stat-box{
    background:#1e293b;
    text-align:center;
    padding:50px 20px;
    border-radius:20px;
}

/* Les chiffres étaient des <h3> : annoncer « 50+ » comme un titre de
   section brouille le plan de la page lu par les moteurs. Ce sont
   maintenant des <div>, à l'apparence strictement identique. */
.stat-box h3,
.stat-box .stat-num{
    font-size:50px;
    line-height:1.1;
    font-weight:700;
    color:#2563eb;
    margin-bottom:15px;
}

.stat-box p{
    color:#cbd5e1;
}

/* MOBILE */

@media(max-width:900px){

.stats-grid{
    grid-template-columns:1fr 1fr;
}

}


/* ============================================================
   Tarifs
   ============================================================ */
/* ============================================================
   Tarifs
   ------------------------------------------------------------
   Le filet doré de la carte mise en avant tourne DANS la carte.
   L'ancienne version le laissait déborder (pas d'overflow:hidden
   sur un élément en rotation) : ses angles balayaient les cartes
   voisines et les coupaient en biais.
   ============================================================ */

.msp-pricing{
    position:relative; overflow:hidden;
    padding:104px 0;
    background:#0B1C2C;
    --msp-brass:#E3A857; --msp-brass-soft:#EDC889; --msp-teal:#3FA0A0;
    --msp-paper:#F6EDE0; --msp-p70:rgba(246,237,224,.72); --msp-p50:rgba(246,237,224,.5);
    --msp-line:rgba(246,237,224,.09);
}
.msp-pricing::before{
    content:""; position:absolute; inset:0; pointer-events:none; opacity:.05;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 18px, var(--msp-brass) 18px 19px, transparent 19px),
      radial-gradient(circle at 0 0,     transparent 18px, var(--msp-teal)  18px 19px, transparent 19px),
      radial-gradient(circle at 100% 0,  transparent 18px, var(--msp-teal)  18px 19px, transparent 19px),
      radial-gradient(circle at 0 100%,  transparent 18px, var(--msp-teal)  18px 19px, transparent 19px),
      radial-gradient(circle at 100% 100%,transparent 18px, var(--msp-teal) 18px 19px, transparent 19px);
    background-size:110px 110px;
    mask-image:radial-gradient(ellipse at center, #000 35%, transparent 78%);
    -webkit-mask-image:radial-gradient(ellipse at center, #000 35%, transparent 78%);
}
.msp-pricing .wrap{ position:relative; z-index:1; width:min(1240px,92%); margin-inline:auto; }

.msp-head{ text-align:center; max-width:660px; margin-inline:auto; }
.msp-eyebrow{
    display:inline-flex; align-items:center; gap:9px; padding:8px 18px; border-radius:999px;
    border:1px solid rgba(227,168,87,.3); background:rgba(227,168,87,.1);
    color:var(--msp-brass); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
}
.msp-eyebrow i{
    width:7px; height:7px; background:var(--msp-brass);
    clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
}
.msp-head h2{ margin:22px 0 14px; font-size:clamp(27px,3.6vw,42px); font-weight:800; line-height:1.25; color:var(--msp-paper); }
html[dir="ltr"] .msp-head h2{ font-family:'Space Grotesk','Cairo',sans-serif; }
.msp-head p{ color:var(--msp-p70); font-size:16.5px; line-height:1.85; }

.msp-cur{ display:flex; justify-content:center; margin-top:30px; }
.msp-cur-in{ display:inline-flex; gap:3px; padding:4px; border-radius:999px;
    border:1px solid var(--msp-line); background:rgba(246,237,224,.04); }
.msp-cur-btn{ border:0; cursor:pointer; padding:8px 19px; border-radius:999px; font-family:inherit;
    background:transparent; color:var(--msp-p50); font-size:12.5px; font-weight:700;
    letter-spacing:.04em; transition:.22s; }
.msp-cur-btn.active{ background:linear-gradient(140deg,var(--msp-brass),var(--msp-brass-soft)); color:#0B1C2C; }

.msp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:52px; align-items:stretch; }

.msp-card{
    position:relative; display:flex; flex-direction:column;
    padding:36px 30px; border-radius:20px;
    background:linear-gradient(165deg, rgba(246,237,224,.05), rgba(2,16,32,.42));
    border:1px solid var(--msp-line);
    overflow:hidden; isolation:isolate;
    transition:transform .3s cubic-bezier(.22,1,.36,1), border-color .3s;
}
.msp-card:hover{ transform:translateY(-5px); border-color:rgba(227,168,87,.35); }

.msp-card.featured{
    border-color:rgba(227,168,87,.55);
    box-shadow:0 30px 70px -30px rgba(227,168,87,.55);
}
.msp-card.featured::before{
    content:""; position:absolute; z-index:-2; inset:-60%;
    background:conic-gradient(from 0deg, transparent 0 68%, rgba(227,168,87,.55) 82%, transparent 92%);
    animation:msp-spin 7s linear infinite;
}
.msp-card.featured::after{
    content:""; position:absolute; z-index:-1; inset:1px; border-radius:19px;
    background:linear-gradient(165deg, #14283a, #071726);
}
@keyframes msp-spin{ to{ transform:rotate(360deg); } }

.msp-tag{
    align-self:flex-start; margin-bottom:16px;
    padding:6px 15px; border-radius:999px; font-size:11px; font-weight:800;
    letter-spacing:.08em; text-transform:uppercase;
    background:linear-gradient(90deg,var(--msp-teal),#2c7676); color:#fff;
}
.msp-card h3{ font-size:22px; font-weight:700; margin-bottom:9px; color:var(--msp-paper); }
.msp-for{ font-size:14px; color:var(--msp-p70); line-height:1.75; margin-bottom:18px; min-height:48px; }

.msp-badges{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:26px; }
.msp-badges span{ padding:5px 11px; border-radius:8px; font-size:11.5px; font-weight:600;
    background:rgba(246,237,224,.06); border:1px solid var(--msp-line); color:var(--msp-p70); }

.msp-price{ display:flex; align-items:baseline; gap:10px; }
.msp-price b{ font-size:42px; font-weight:800; line-height:1; letter-spacing:-.02em; color:var(--msp-paper); }
html[dir="ltr"] .msp-price b{ font-family:'Space Grotesk','Cairo',sans-serif; }
.msp-price small{ font-size:13px; font-weight:700; color:var(--msp-brass); }
.msp-was{ display:flex; align-items:center; gap:10px; margin-top:10px; min-height:24px; }
.msp-was s{ font-size:14px; color:var(--msp-p50); }
.msp-off{ padding:3px 9px; border-radius:999px; font-size:11px; font-weight:800;
    background:rgba(63,160,160,.16); border:1px solid rgba(63,160,160,.35); color:#7fd4d4; }
.msp-once{ margin-top:7px; font-size:12.5px; color:var(--msp-p50); }

.msp-sep{ margin:26px 0; height:1px;
    background:linear-gradient(90deg, transparent, rgba(246,237,224,.14), transparent); }

.msp-feats{ list-style:none; display:flex; flex-direction:column; gap:12px; flex:1; margin:0; padding:0; }
.msp-feats li{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--msp-p70); line-height:1.6; }
.msp-feats i{ flex:0 0 auto; margin-top:4px; font-size:9px; color:var(--msp-brass); }
.msp-feats li.plus{ color:var(--msp-paper); font-weight:600; }
.msp-feats li.plus i{ color:var(--msp-teal); }

.msp-cta{
    display:block; margin-top:28px; padding:15px; border-radius:999px; text-align:center;
    font-size:15px; font-weight:700; border:1px solid var(--msp-line);
    background:rgba(246,237,224,.05); color:var(--msp-paper); transition:.25s;
}
.msp-cta:hover{ border-color:rgba(227,168,87,.5); }
.msp-card.featured .msp-cta{
    background:linear-gradient(140deg,var(--msp-brass),var(--msp-brass-soft));
    color:#0B1C2C; border-color:transparent;
}

.msp-foot{ margin-top:46px; text-align:center; }
.msp-all{
    display:inline-flex; align-items:center; gap:11px; padding:15px 32px; border-radius:999px;
    border:1px solid rgba(227,168,87,.4); color:var(--msp-brass); font-size:15px; font-weight:700;
    transition:.25s;
}
.msp-all:hover{ background:rgba(227,168,87,.12); }
html[dir="rtl"] .msp-all i{ transform:scaleX(-1); }
.msp-note{ margin-top:18px; font-size:13.5px; color:var(--msp-p50); }
.msp-note b{ color:var(--msp-teal); font-weight:700; }

@media(max-width:1024px){
    .msp-grid{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; }
}
@media(max-width:640px){
    .msp-pricing{ padding:74px 0; }
    .msp-card{ padding:30px 24px; }
    .msp-for{ min-height:0; }
}
@media (prefers-reduced-motion:reduce){
    .msp-card{ transition:none; }
    .msp-card:hover{ transform:none; }
    .msp-card.featured::before{ animation:none; }
}


/* ============================================================
   Ajustements finaux
   ============================================================ */
/* PRICING */

.pricing-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.price-card{
background:#1e293b;
padding:40px;
border-radius:20px;
text-align:center;
}

/* Ancienne carte « price-card » : le sélecteur nu .featured touchait
   AUSSI .msp-card.featured et lui imposait un second transform plus
   une bordure bleue. On le limite à son bloc d'origine. */
.price-card.featured{
border:1px solid rgba(227,168,87,.5);
transform:scale(1.05);
}

.price{
font-size:55px;
font-weight:700;
color:#2563eb;
margin:30px 0;
}

.price span{
font-size:18px;
color:#fff;
}

.price-card ul{
margin:30px 0;
}

.price-card ul li{
margin:15px 0;
}

.price-btn{
background:#2563eb;
padding:15px 30px;
border-radius:10px;
color:#fff;
display:inline-block;
}

/* TESTIMONIAL */

.testimonial-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.testimonial{
background:#1e293b;
padding:40px;
border-radius:20px;
}

.stars{
color:#f59e0b;
font-size:24px;
margin-bottom:20px;
}

.testimonial p{
margin-bottom:20px;
color:#cbd5e1;
}

/* FAQ */

.faq-item{
background:#1e293b;
padding:30px;
margin-bottom:20px;
border-radius:15px;
}

.faq-item h3{
margin-bottom:15px;
}

/* CONTACT */

.contact-form{
max-width:700px;
margin:auto;
display:flex;
flex-direction:column;
gap:20px;
}

.contact-form input,
.contact-form textarea{
background:#1e293b;
border:none;
padding:20px;
border-radius:12px;
color:#fff;
font-size:16px;
}

.contact-form button{
background:#2563eb;
border:none;
padding:20px;
color:#fff;
font-size:18px;
border-radius:12px;
cursor:pointer;
}

/* WHATSAPP */

.whatsapp{
position:fixed;
bottom:25px;
left:25px;
width:65px;
height:65px;
background:#25D366;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:35px;
color:#fff;
z-index:999;
}

/* FOOTER */

footer{
background:#111827;
padding:70px 0;
text-align:center;
}

footer h2{
font-size:36px;
margin-bottom:20px;
}

footer h2 span{
color:#2563eb;
}

.footer-logo-img{
height:80px;
width:auto;
display:block;
margin:0 auto 20px;
}

footer p{
color:#cbd5e1;
margin-bottom:30px;
}

.footer-links{
display:flex;
justify-content:center;
gap:30px;
margin-bottom:30px;
}

.footer-links a{
color:#fff;
}

.copyright{
color:#64748b;
}

/* MOBILE */

@media(max-width:900px){

.pricing-grid,
.testimonial-grid{
grid-template-columns:1fr;
}

.price-card.featured{
transform:none;
}

.footer-links{
flex-direction:column;
gap:15px;
}

}