/* =========================================================
   Responsive — Mobile / Tablet / Desktop
   ========================================================= */

/* Le menu principal ne bascule plus sur un seuil de largeur d'écran fixe (trop
   peu fiable : mise à l'échelle Windows/macOS, zoom navigateur, police système...
   font qu'un même "grand écran" peut avoir des largeurs utiles très différentes).
   À la place, main.js mesure la largeur réellement nécessaire au menu et ajoute
   la classe .nav-tight sur .header-inner uniquement quand ça ne tient plus sur
   une ligne. Ces règles reprennent le même tiroir mobile, piloté par la classe. */
.header-inner.nav-tight .main-nav { position: fixed; top: 0; right: 0; width: 320px; max-width: 85%; height: 100vh;
    background: var(--bg-mobile-drawer); backdrop-filter: blur(20px);
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    padding: 100px 30px 30px; gap: 8px; transform: translateX(100%); transition: transform 0.4s ease; z-index: 999; overflow-y: auto; }
.header-inner.nav-tight .main-nav.open { transform: translateX(0); }
.header-inner.nav-tight .main-nav a { width: 100%; padding: 14px 0; border-bottom: 1px solid var(--c-border); font-size: 15px; }
.header-inner.nav-tight .burger { display: flex; z-index: 1001; }
.header-inner.nav-tight .burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header-inner.nav-tight .burger.active span:nth-child(2) { opacity: 0; }
.header-inner.nav-tight .burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.header-inner.nav-tight .mega-menu { position: static; opacity: 1; visibility: visible; transform: none; grid-template-columns: 1fr; padding: 10px 0 10px 14px; background: transparent; backdrop-filter: none; border: none; display: none; }
.header-inner.nav-tight .has-mega.mega-open .mega-menu { display: grid; }
.header-inner.nav-tight .nav-mobile-extra { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--c-border); }
.header-inner.nav-tight .nav-mobile-extra a.btn { width: 100%; padding: 14px 20px; border-bottom: none; font-size: 15px; justify-content: center; }
/* Le bouton "Shop" de la barre du haut n'est utile qu'en affichage large (menu
   sur une ligne) : en mode tiroir, "Shop" est déjà dans le menu ci-dessus. */
.header-inner.nav-tight .header-actions a.btn.btn-outline.btn-sm { display: none; }

/* Sur très petit écran, le bouton "Demander un devis" (texte long) ne rétrécit
   jamais (flex-shrink:0) et pousse le bouton hamburger hors de l'écran. On le
   déplace donc dans le tiroir mobile, mais le sélecteur de langue (FR/EN/AR)
   reste visible dans la barre du haut comme demandé. */
@media (max-width: 600px) {
    .header-actions { gap: 6px; }
    .header-actions a.btn.btn-primary.btn-sm { display: none; }
}

/* Marge de sécurité supplémentaire sur les très petits téléphones (~360-400px) :
   on resserre encore un peu le logo et le sélecteur de langue pour garantir que
   le hamburger reste toujours visible sans avoir à faire défiler horizontalement. */
@media (max-width: 400px) {
    .brand-logo { font-size: 15px; gap: 6px; }
    .brand-logo .logo-img { height: 24px; }
    .header-inner { padding: 0 14px; gap: 8px; }
    .header-actions .lang-switcher-btn { padding: 6px 8px; font-size: 11.5px; }
    .header-actions .lang-switcher-btn i { display: none; }
    .header-actions .icon-btn { width: 34px; height: 34px; }
}

/* Repli garanti si JavaScript est désactivé : sur un vrai petit écran (téléphone),
   le menu passe en tiroir même sans la classe .nav-tight. */
@media (max-width: 480px) {
    .main-nav { position: fixed; top: 0; right: 0; width: 320px; max-width: 85%; height: 100vh;
        background: var(--bg-mobile-drawer); backdrop-filter: blur(20px);
        flex-direction: column; align-items: flex-start; justify-content: flex-start;
        padding: 100px 30px 30px; gap: 8px; transform: translateX(100%); transition: transform 0.4s ease; z-index: 999; overflow-y: auto; }
    .main-nav.open { transform: translateX(0); }
    .main-nav a { width: 100%; padding: 14px 0; border-bottom: 1px solid var(--c-border); font-size: 15px; }
    .burger { display: flex; z-index: 1001; }
    .burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .burger.active span:nth-child(2) { opacity: 0; }
    .burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .mega-menu { position: static; opacity: 1; visibility: visible; transform: none; grid-template-columns: 1fr; padding: 10px 0 10px 14px; background: transparent; backdrop-filter: none; border: none; display: none; }
    .has-mega.mega-open .mega-menu { display: grid; }
    .nav-mobile-extra { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--c-border); }
    .nav-mobile-extra a.btn { width: 100%; padding: 14px 20px; border-bottom: none; font-size: 15px; justify-content: center; }
    .header-actions a.btn.btn-outline.btn-sm { display: none; }
}

@media (max-width: 1439px) {
    .hero-actions .btn span { display: none; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .domains-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
}

@media (max-width: 767px) {
    section { padding: 70px 0; }
    .hero-content { padding-top: 70px; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .footer-grid { grid-template-columns: 1fr; gap: 36px; }
    .why-grid, .domains-grid { grid-template-columns: 1fr; }
    .hero-logo { letter-spacing: 2px; }
    .page-header { padding: 140px 0 60px; }
}

@media (max-width: 480px) {
    .container { padding: 0 16px; }
    .btn { padding: 13px 24px; font-size: 14px; }
    .section-title { font-size: 26px; }
}

/* RTL support (Arabe) */
[dir="rtl"] .header-inner.nav-tight .main-nav { right: auto; left: 0; transform: translateX(-100%); }
[dir="rtl"] .header-inner.nav-tight .main-nav.open { transform: translateX(0); }
[dir="rtl"] .footer-contact i,
[dir="rtl"] .domain-link i { margin-left: 0; }
[dir="rtl"] .main-nav a::after { left: auto; right: 0; }
[dir="rtl"] #back-to-top { right: auto; left: 30px; }
@media (max-width: 480px) {
    [dir="rtl"] .main-nav { right: auto; left: 0; transform: translateX(-100%); }
    [dir="rtl"] .main-nav.open { transform: translateX(0); }
}