/* =========================================================
   MAROC PET FOOD — multilingue (FR / EN / AR)
   Complète styles.css sans le modifier.
   ========================================================= */

[hidden]{display:none!important}

/* ---------- Sélecteur de langue (en haut à droite) ---------- */
.nav-right{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.lang-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:#fff;box-shadow:0 6px 16px rgba(31,92,69,.06)}
.lang-switch a{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:32px;padding:0 10px;border-radius:999px;font-size:.74rem;font-weight:900;letter-spacing:.06em;color:var(--muted);line-height:1;transition:.2s ease}
.lang-switch a:hover{color:var(--green);background:var(--mint)}
.lang-switch a.active{background:var(--green);color:#fff;box-shadow:0 6px 14px rgba(31,92,69,.22)}
.lang-switch a[lang="ar"]{font-family:"IBM Plex Sans Arabic",Tahoma,sans-serif;font-size:.86rem;letter-spacing:0;font-weight:700}
.logo{flex:0 0 auto}

/* Bureau : sélecteur dans le bandeau vert, tout en haut à droite */
.topline-right{display:flex;align-items:center;gap:16px}
.lang-top{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);box-shadow:none;padding:2px}
.lang-top a{height:26px;min-width:34px;padding:0 9px;color:#fff;opacity:.85}
.topline .lang-top a{opacity:.85}
.lang-top a:hover{background:rgba(255,255,255,.16);color:#fff;opacity:1}
.lang-top a.active{background:#fff;color:var(--green);opacity:1;box-shadow:none}
.lang-mobile{display:none}

/* Tablette / mobile : sélecteur à côté du bouton Menu */
@media (max-width:1080px){
  .lang-top{display:none}
  .lang-mobile{display:inline-flex}
}
@media (max-width:420px){.lang-switch a{min-width:32px;padding:0 7px}.nav-right{gap:8px}.logo img{height:42px}}

/* ---------- Bandeau de suggestion de langue ---------- */
.lang-banner{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);opacity:0;z-index:2000;display:flex;align-items:center;gap:14px;width:max-content;max-width:calc(100% - 32px);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 22px 60px rgba(24,38,31,.22);padding:12px 12px 12px 20px;transition:opacity .35s ease,transform .35s ease}
.lang-banner.show{opacity:1;transform:translate(-50%,0)}
.lang-banner[dir="rtl"]{padding:12px 20px 12px 12px;font-family:"IBM Plex Sans Arabic",Tahoma,sans-serif}
.lang-banner .lb-globe{width:34px;height:34px;flex:0 0 auto;border-radius:50%;background:var(--mint);display:flex;align-items:center;justify-content:center;color:var(--green)}
.lang-banner p{margin:0;color:var(--graphite);font-weight:700;font-size:.92rem;line-height:1.35}
.lang-banner .btn{padding:10px 16px;font-size:.88rem;border-radius:12px;white-space:nowrap}
.lang-banner .lb-close{border:0;background:none;color:var(--muted);font:inherit;font-weight:800;font-size:.86rem;cursor:pointer;padding:10px;border-radius:10px;white-space:nowrap}
.lang-banner .lb-close:hover{background:var(--lab);color:var(--graphite)}
@media (max-width:600px){.lang-banner{left:16px;right:16px;width:auto;max-width:none;transform:translateY(20px);flex-wrap:wrap;bottom:16px}.lang-banner.show{transform:none}.lang-banner p{flex:1 1 160px}}

/* ---------- Classes remplaçant des styles en ligne ---------- */
.quote{border-left:3px solid var(--fresh);margin:24px 0;padding:4px 0 4px 20px;font-style:italic;color:var(--graphite);font-size:1.08rem}
.cta-stack{display:flex;flex-direction:column;gap:10px;min-width:260px}
.btn-ghost{background:rgba(255,255,255,.1)!important;color:#fff!important;border-color:rgba(255,255,255,.4)!important}
.legal-body{max-width:820px}
.legal-body h2{font-size:clamp(1.5rem,2.2vw,2rem);margin-top:34px}

/* =========================================================
   Arabe — sens de lecture droite → gauche
   ========================================================= */
html[dir="rtl"] body{font-family:"IBM Plex Sans Arabic",Inter,Tahoma,system-ui,sans-serif;line-height:1.75}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4{letter-spacing:0;font-weight:700}
html[dir="rtl"] h1{line-height:1.22}
html[dir="rtl"] h2{line-height:1.3}
html[dir="rtl"] h3{line-height:1.4}
html[dir="rtl"] .hero h1{line-height:1.18}
html[dir="rtl"] .kicker,html[dir="rtl"] .hero-panel span,html[dir="rtl"] .expertise .number,html[dir="rtl"] .onssa-badge span,html[dir="rtl"] .tag{letter-spacing:0;text-transform:none}
html[dir="rtl"] .kicker{font-size:.82rem;padding:7px 12px 7px 16px}
html[dir="rtl"] .hero-panel span{font-size:.86rem}
html[dir="rtl"] .nav-links{font-size:.92rem;font-weight:700}
html[dir="rtl"] .nav-links a::after{transform-origin:right}
html[dir="rtl"] .btn,html[dir="rtl"] .menu-toggle{font-weight:700}
html[dir="rtl"] .text-card::before{left:auto;right:24px}
html[dir="rtl"] .text-card ul{padding-left:0;padding-right:20px}
html[dir="rtl"] .media-frame::after{right:auto;left:24px}
html[dir="rtl"] .hero-media::before{right:auto;left:26px}
html[dir="rtl"] .expertise::after{right:auto;left:-76px}
html[dir="rtl"] .process-step{border-right:0;border-left:1px solid rgba(255,255,255,.14)}
html[dir="rtl"] .process-step:nth-child(4n){border-left:0}
html[dir="rtl"] .onssa-badge .check{margin-right:0;margin-left:8px}
html[dir="rtl"] .quote{border-left:0;border-right:3px solid var(--fresh);padding:4px 20px 4px 0}
html[dir="rtl"] input[type="email"],html[dir="rtl"] input[type="tel"]{direction:ltr;text-align:right}
@media (max-width:1240px) and (min-width:1081px){html[dir="rtl"] .nav-links{font-size:.86rem}}
@media (max-width:720px){html[dir="rtl"] h1{font-size:2.5rem}html[dir="rtl"] .process-step{border-left:0}}